Skip to content

Instantly share code, notes, and snippets.

@svdoever
Created August 7, 2018 22:23
Show Gist options
  • Save svdoever/f3d032a5c5194097ae8135106ab7449e to your computer and use it in GitHub Desktop.
Save svdoever/f3d032a5c5194097ae8135106ab7449e to your computer and use it in GitHub Desktop.
Example of how to use the loadBundles function as defined in https://gist.github.com/svdoever/aebdbc6acf0bd15e354c18af9ed1bd47
process.env.ComponentServerBundles = JSON.stringify({
default: './server-bundle',
pwa: './server-bundle',
pwaremote: 'http://myserver.com/server-bundle.js'
});
// Handy for debugging to use a direct require so Visual Studio code can set breakpoints in the code
// of the bundle we are debugging.
let bundle_to_debug = require('./server-bundle');
if (process.env.NODE_ENV === 'production') {
bundle_to_debug = undefined;
}
const path = require('path');
// componentSpecifier is a string in the format "pwa:myComponent", if only "myComponent" is specified the
// component in the "default" bundle is assumed.
function getComponent(componentSpecifier) {
console.log(`Requested component: ${componentSpecifier}`);
let bundleName, componentName;
if (componentSpecifier.includes(':')) {
const parts = componentSpecifier.split(':');
if (parts[0] === '') {
bundleName = 'default';
componentName = parts[1];
} else {
bundleName = parts[0];
componentName = parts[1];
}
} else {
bundleName = 'default';
componentName = componentSpecifier;
}
if (typeof bundle_to_debug !== 'undefined' && bundle_to_debug) {
console.log(`Using 'bundle_to_debug' to resolve requested component '${componentSpecifier}' as component '${componentName}'.`);
component = bundle_to_debug[componentName];
bundleName = 'bundle_to_debug';
} else {
if (!bundles[bundleName]) {
throw new Error(`getComponent(): Bundle '${bundleName}' not found.`);
}
component = bundles[bundleName][componentName];
}
if (!component) {
throw new Error(`getComponent(): component '${componentName}' not found in bundle '${bundleName}'.`);
}
if (typeof component !== "function") {
throw new Error(`getComponent(): component '${componentName}' is found in bundle '${bundleName}' but it is not a function.`);
}
return component;
}
let bundleLoaderPromises; // all promises that must be resolved so we know all required server bundles are loaded
let bundles = {};
if (typeof bundle_to_debug == 'undefined') {
if (!process.env.ComponentServerBundles) {
console.error("Environment variable process.env.ComponentServerBundles is missing. Should contain definition of bundles, i.e.: { pwa: './server-bundle.js', stories: 'http://myserver.com/story-bundle.js' }");
process.exit(1);
}
let bundlesConfiguration;
try {
bundlesConfiguration = JSON.parse(process.env.ComponentServerBundles);
} catch(error) {
console.error(`Failed to parse process.env.ComponentServerBundles due to error: ${error.message}.\nCurrent value: ${process.env.ComponentServerBundles}`);
process.exit(1);
}
bundleLoaderPromises = loadBundles(bundlesConfiguration, bundles);
} else {
// We don't need to load bundles, overridden by: let bundle_to_debug = "./server-bundle.js"
// Create an empty array for the bundle promises so Promise.all(bundleLoaderPromises) directly resolves.
console.log("Using configured bundle_to_debug");
bundleLoaderPromises = [];
}
Promise.all(bundleLoaderPromises).then(() => {
// Do something with the bundles, a component can be retrieved like:
// let myComponent = getComponent("pwa:MyComponent")
}).catch(reason => {
console.error(reason.message);
process.exit(1);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment