Created
August 7, 2018 22:23
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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