Could you provide an example of a nested array that can be accessed across ES6 module boundaries with setter and getter methods from a dependent module?
While setter methods work fine, invoking getter methods across module boundaries always results in:
TypeError: nested_array[at_whatever_depth] is undefined
I am trying to simplify complex examples by modularizing the code. Here's what I've attempted so far:
The original code populated and used the array within the same scope. Now, I'm trying to modularize it for better organization.
This code prepares imported music font ('glyphs') for display using a state module approach.
var music_glyphs_store = (function () {
var pub = {};
pub.state = [],
pub.setGlyphByName = function (glyph_name, horiz_adv_x, path) {
pub.state.push(glyph_name);
pub.state[glyph_name] = [];
pub.state[glyph_name]["glyph_name"] = glyph_name;
pub.state[glyph_name]["horiz-adv-x"] = horiz_adv_x;
pub.state[glyph_name]["d"] = path;
},
pub.getGlyphByName = function(glyph_name) {
return pub.state[glyph_name];
}
return pub; // expose externally
})();
export { music_glyphs_store };
The issue arises when calling music_glyphs_store.getGlyphByName() from the dependent module. The glyphs are stored in the array but cannot be accessed.
Here's how typical font elements look like in the original svg file:
<glyph glyph-name="scripts.sforzato" unicode="" horiz-adv-x="219"
d="M-206.864 126.238c-8.498 -2.679 -12.964 -10.131 -12.964 -17.821c0 -6.455 3.146 -13.0777... />
Imports are set up as follows:
import { music_glyphs_store } from "./music_glyphs_store.js";
import * as d3 from "d3";
After loading and parsing raw xml strings, data is added to the array using set methods:
d3.selectAll(note_glyphs.getElementsByTagName("glyph")).each(function(d, i) {
var glyph_name = this.getAttribute("glyph-name");
var horiz_adv_x = this.getAttribute("horiz-adv-x");
var path = this.getAttribute("d");
music_glyphs_store.setGlyphByName(glyph_name, horiz_adv_x, path);
});
The goal is to retrieve these values later using the get methods. For example:
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("brace446"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("accidentals.natural.arrowdown"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("noteheads.s2slash"));
I have tried different approaches to conform to ES6 module standards without success. The problem may lie in the visibility/scope of dynamically allocated memory in Webpack's context. Is using nested arrays in a diverse Webpack environment possible?