christopherthielen / rollup-starter-lib

Proof of concept Spinnaker Deck plugin using Rollup ES6 bundles

spinnaker-deck-plugin-proof-of-concept

This is a proof of concept Spinnaker Deck plugin with library sharing and code splitting.

This plugin exports a React component which lazy loads a second React component after 2 seconds. The second React component uses components SpinFormik, FormikFormField, TextInput, and NumberInput (from @spinnaker/core). This plugin does not bundle any React or @spinnaker/core code (the bundle size is 8kb). Instead, it uses the already loaded modules exposed by deck in this pr: spinnaker/deck#7662 .

Getting started

Clone this repository and install its dependencies. Build the library bundles into dist, generating a file for each code split point.

yarn
yarn build

Copy (or symlink) the plugin's dist directory into deck

mkdir ~/deck/plugin
cp dist/* deck/plugin

or

ln -s dist ~/deck/plugin

After loading deck (with this PR included), use native dynamic import() to load the code. Then render the exported React components somewhere.

From the javascript console:

import('/plugin/main.js').then(module => {
    const { react, react_dom } = spinnaker.plugins.sharedLibraries;
    react_dom.render(react.createElement(module.plugin.component), document.querySelector('.navbar-inverse'))
});