feat(bootstrap): support bootstrap scripts for directives

A directive can provide a bootstrap export that is called a single time
when the application starts.

in order to allow directives to setup global singletons, shared stores etc.

Author: Xiphe

src/babelPluginTransformJsxDirectives.js

@@ -64,12 +64,20 @@ export default function babelPluginTransformJsxDirectives(babel) {
             name: directiveName,
             as,
             source,
+            bootstrap,
             options,
             globalOptions,
           },
           i
         ) => {
-          const localName = importDirective(babel, path, directiveName, source);
+          const localName = importDirective(
+            babel,
+            path,
+            directiveName,
+            source,
+            bootstrap,
+            globalOptions
+          );
 
           const isOuter = i === directives.length - 1;
           if (!isOuter) {

src/getApplicableDirectives.js

@@ -32,6 +32,7 @@ export default function getApplicableDirectives(babel, path, directives) {
         name: directiveName,
         type,
         source,
+        bootstrap,
         transformOptions,
         globalOptions,
       }
@@ -50,6 +51,7 @@ export default function getApplicableDirectives(babel, path, directives) {
         const directive = {
           name: directiveName,
           globalOptions,
+          bootstrap,
           type,
           source,
         };

src/getImport.js

@@ -1,6 +1,6 @@
 import getRootPath from './getRootPath';
 
-export default function getImport({ types: t }, path, directiveName, directiveSource) {
+export default function getImport({ types: t }, path, directiveName, directiveSource, bootstrap) {
   const rootPath = getRootPath(path);
 
   const existingImport = rootPath.get('body').find((bodyPath) => {
@@ -16,9 +16,19 @@ export default function getImport({ types: t }, path, directiveName, directiveSo
   }
 
   const uid = rootPath.scope.generateUidIdentifier(`${directiveName}Directive`);
+  const bootstrapUid = rootPath.scope.generateUidIdentifier(`${directiveName}Bootstrap`);
+
+  const specifiers = [t.importDefaultSpecifier(uid)];
+
+  if (bootstrap != null) {
+    specifiers.push(t.importSpecifier(
+      bootstrapUid,
+      t.identifier('bootstrap')
+    ));
+  }
 
   const newImport = t.importDeclaration(
-    [t.importDefaultSpecifier(uid)],
+    specifiers,
     t.stringLiteral(directiveSource)
   );
 

src/importDirective.js

@@ -1,7 +1,18 @@
 import getImport from './getImport';
+import insertBootstrap from './insertBootstrap';
 
-export default function importDirective(babel, path, directiveName, directiveSource) {
-  const someImport = getImport(babel, path, directiveName, directiveSource);
+export default function importDirective(
+  babel,
+  path,
+  directiveName,
+  directiveSource,
+  bootstrap
+) {
+  const someImport = getImport(babel, path, directiveName, directiveSource, bootstrap);
+
+  if (bootstrap != null) {
+    insertBootstrap(babel, someImport, bootstrap);
+  }
 
   return someImport.get('specifiers.0.local.name').node;
 }

src/insertBootstrap.js

@@ -0,0 +1,34 @@
+import template from 'babel-template';
+
+const bootstrapTemplate = `
+if (!BOOTSTRAP_NAME.__called) {
+  BOOTSTRAP_NAME.__called = true;
+  BOOTSTRAP_NAME(BOOTSTRAP_OPTIONS);
+}
+`;
+
+function appendBootstrap(t, programBody, bootstrapNode) {
+  programBody.find((childPath) => {
+    return !t.isImportDeclaration(childPath);
+  }).insertBefore(bootstrapNode);
+}
+
+export default function insertBootstrap({ types: t }, importPath, options) {
+  const BOOTSTRAP_NAME = t.identifier(importPath.get('specifiers.1.local.name').node);
+
+  const buildGlobalOptionsNode = template(`var x = ${JSON.stringify(options)};`);
+  const BOOTSTRAP_OPTIONS = buildGlobalOptionsNode().declarations[0].init;
+
+  const buildBootstrap = template(bootstrapTemplate);
+
+  const bootstrapNode = buildBootstrap({
+    BOOTSTRAP_NAME,
+    BOOTSTRAP_OPTIONS,
+  });
+
+  appendBootstrap(
+    t,
+    importPath.parentPath.get('body'),
+    bootstrapNode
+  );
+}

test/__snapshots__/spec.js.snap

@@ -30,6 +30,20 @@ exports[`babel-plugin-transform-jsx-directives applies transformOptions 1`] = `
 }} next={(_Elm, _props) => <_Elm {..._props} />} />;"
 `;
 
+exports[`babel-plugin-transform-jsx-directives bootstrap bootstrap directives 1`] = `
+"import _bootstrapDirective, { bootstrap as _bootstrapBootstrap } from \\"bootstrap.js\\";
+
+if (!_bootstrapBootstrap.__called) {
+        _bootstrapBootstrap.__called = true;
+
+        _bootstrapBootstrap({
+                \\"foo\\": \\"bar\\"
+        });
+}
+
+<_bootstrapDirective Elm=\\"div\\" props={{}} options=\\"baz\\" next={(_Elm, _props) => <_Elm {..._props} />} />;"
+`;
+
 exports[`babel-plugin-transform-jsx-directives converts jsx spread operators to object spread 1`] = `
 "import _htmlDirective from \\"./test/directives/html.js\\";
 

test/spec.js

@@ -284,4 +284,21 @@ describe('babel-plugin-transform-jsx-directives', () => {
       expect(code).toMatchSnapshot();
     });
   });
+
+  describe('bootstrap', () => {
+    it('bootstrap directives', () => {
+      const code = transform(
+        `
+        <div bootstrap="baz" />
+        `,
+        {
+          directives: [
+            [{ name: 'bootstrap', source: 'bootstrap.js', bootstrap: { foo: 'bar' } }],
+          ],
+        }
+      );
+
+      expect(code).toMatchSnapshot();
+    });
+  });
 });