guest271314 (2019-06-01T19:33:17.000Z)
guest271314 at gmail.com (2019-06-01T21:58:49.544Z)
Re: how many async-modules can js-app practically load? An example of exporting and importing loading 1000 properties in a single module, where duplicate property names are checked for. Since JavaScript plain objects cannot have duplicate property names there should not be any "collisions"; the code can check for and modify the object to be exported, though the last duplicate property name will be exported without any errors thrown unless the code is composed to throw such an error. ``` (async() => { const oneThousandModules = encodeURIComponent(`// substitute rand for a Set of module names to be exported // e.g. const moduleNames = ['moduleA', 'moduleB', ...moduleZ] const modules = {}; // set a function to be exported modules.fn = function() {return 'a function'}; // do stuff modules.image = ${await (await fetch('https://gist.githubusercontent.com/guest271314/6042f6e438f1e4bfa65b3dcba8ef1309/raw/4df4817ccfafa0a142934630cd9818b1190f7992/imageData.json')).json()}; // function to set (1000) 'random' module names to be exported const rand = (seed = 'abcdefghijklmnopqrstuvwxyz0123456789', n = 5, len = seed.length) => '.'.repeat(n).replace(/./g, _ => seed[~~(Math.random() * len)]); // use Set for unique module identifiers const moduleNames = [...Array(1000)].map(_ => rand()); const moduleIdentifiers = new Set(moduleNames); // below line will cause ReferenceError to be thrown moduleNames.push(moduleNames[0]); try { if (moduleIdentifiers.size !== moduleNames.length) { // check for duplicates const duplicates = moduleNames.filter((moduleName, index) => moduleNames.indexOf(moduleName) !== index); // notification of duplicate module names throw new ReferenceError('module names ' + JSON.stringify(duplicates) + ' are not unique'); // perform the designated task if duplicate module names are found here } } catch (e) { console.error(e); console.trace(); } // get, set (sync or async) exported module here Object.assign(modules, ...[...moduleIdentifiers].map((id, value) => ({[id]:value}))); // since JavaScript plain object cannot have duplicate property names // modules object will still be exported without duplicate property names // without collisions export {modules}`); const scriptText = `import {modules} from "data:application/javascript,${oneThousandModules};";`; const script = document.createElement("script"); script.type = "module"; script.textContent = scriptText; script.textContent += "\nconsole.log(modules); const imageModule = () => { if (modules['image']) { console.log('image module loaded'); const canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 200; const ctx = canvas.getContext('2d'); document.body.appendChild(canvas); ctx.putImageData(new ImageData(new Uint8ClampedArray(modules.image),200,200),0,0); } else { console.log('image module not loaded'); } }; imageModule(); for (const key in modules) {if (typeof modules[key] === 'function') {console.log(modules[key]());}}"; document.head.appendChild(script); })(); ``` plnkr https://plnkr.co/edit/CgEhBY?p=preview