[feature] enable config overrides

storybookjs · Aug 3, 2021 · 25358ea · 25358ea
1 parent 704d998
commit 25358ea
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 203 deletions.
diff --git a/.ember-cli b/.ember-cli
@@ -1,9 +1,3 @@
 {
-  /**
-    Ember CLI sends analytics information by default. The data is completely
-    anonymous, but there are times when you might want to disable this behavior.
-
-    Setting `disableAnalytics` to true will prevent any data from being sent.
-  */
   "disableAnalytics": false
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,7 +26,8 @@ module.exports = {
         'testem.js',
         'blueprints/*/index.js',
         'config/**/*.js',
-        'tests/dummy/config/**/*.js'
+        'tests/dummy/config/**/*.js',
+        'node-tests/**/*.js'
       ],
       excludedFiles: [
         'addon/**',
@@ -42,7 +43,7 @@ module.exports = {
         node: true
       },
       plugins: ['node'],
-      extends: ['plugin:node/recommended']
+      extends: ['plugin:node/recommended', 'plugin:jest/recommended']
     }
   ]
 };
diff --git a/README.md b/README.md
@@ -1,40 +1,71 @@
-ember-cli-storybook
-==============================================================================
+# ember-cli-storybook
 
-📒 Ember storybook adapter
+> 📒 Ember storybook adapter
 
 
-Compatibility
-------------------------------------------------------------------------------
+# Compatibility
 
 * Ember.js v3.16 or above
 * Ember CLI v2.13 or above
 * Node.js v10 or above
 
+# Installation
 
-Installation
-------------------------------------------------------------------------------
-
-```
+```terminal
 ember install @storybook/ember-cli-storybook
 ```
 
-Usage
-------------------------------------------------------------------------------
+# Usage
 
 This will be triggered automatically as a post build action when running `ember build`
 
-
 > package.json options (defaults)
 
 ```json
 "storybook": {
-  "ignoreTestFiles": true
+  "ignoreTestFiles": true,
+  "config": {}
 }
 ```
 
-Troubleshooting
-------------------------------------------------------------------------------
+## Config
+
+The config object represents anything that could be parsed from an `index.html` file. This must be in the format as below: 
+
+```json
+{
+  "meta": [{
+    "attributes": ["name", "content"]
+  }, {
+    "attributes": ["name", "content"]
+  }, {
+    "attributes": ["name", "content", "id"]
+  }],
+  "link": [{
+    "selector": "link",
+    "attributes": ["rel", "href"]
+  }],
+  "script": [{
+    "selector": "script",
+    "attributes": ["src"]
+  }]
+}
+```
+
+So in order to add a script tag to the generated `preview-head.html` a potential config would look like:
+
+```json
+"storybook": {
+  "config": { 
+    "script": {
+      "src": "./assets/foo.js"
+    }
+  }
+}
+```
+
+> It is important to note that storybook will by default serve any files out of the `public` folder. If you have custom files you would like to serve they need to exist there. 
+# Troubleshooting
 
 ### Components that need routing for query parameters
 
@@ -98,6 +129,7 @@ export let SortableColumns = () => {
 ```
 
 ### Working with store
+
 As said above, Storybook integration for Ember renders stories into a custom component, that are store-less. 
 If your component relies on an Ember model, for example, you can work around with the same way you would do for query params.  
 
@@ -128,6 +160,7 @@ export const storeExample = () => {
 ```
 
 ### Making Ember import work
+
 Because Ember uses a mapping to resolve import like `@ember/array` or `@ember/object` for example, they may not work in Storybook.
 However, and because the module is already declared in the [babel preset for ember](https://github.com/storybookjs/storybook/blob/next/app/ember/src/server/framework-preset-babel-ember.ts#L19), you should be able to make them work by adding 
 [babel-plugin-ember-modules-api-polyfill](https://github.com/ember-cli/babel-plugin-ember-modules-api-polyfill) to our `package.json`.

diff --git a/index.js b/index.js
@@ -5,7 +5,7 @@ const path = require('path');
 const YUIDocsGenerator = require('ember-cli-addon-docs-yuidoc/lib/broccoli/generator');
 const Funnel = require('broccoli-funnel');
 const mergeTrees = require('broccoli-merge-trees');
-const { parse, generatePreviewHead } = require('./util');
+const { parse, generatePreviewHead } = require('./lib/util');
 
 module.exports = {
   name: require('./package').name,
@@ -67,7 +67,7 @@ module.exports = {
 
     const { name } = this.app;
     const { storybook={} } = this.app.project.pkg;
-    const { ignoreTestFiles=true } = storybook;
+    const { ignoreTestFiles=true, config={ 'link': [] } } = storybook;
 
     const distFilePath = path.resolve(result.directory, 'index.html');
     const testFilePath = path.resolve(result.directory, 'tests/index.html');
@@ -93,6 +93,18 @@ module.exports = {
 
     this.ui.writeDebugLine('Generating preview-head.html');
 
+    if(config) {
+      this.ui.writeDebugLine('Setting up overrides.');
+
+      for(const key in config) {
+        if(!parsedConfig[key]) {
+          parsedConfig[key] = []
+        }
+
+        parsedConfig[key] = parsedConfig[key].concat(config[key])
+      }
+    }
+
     const previewHead = generatePreviewHead(parsedConfig);
 
     this.ui.writeDebugLine('Generating files needed by Storybook');

diff --git a/util.js → lib/util.js b/util.js → lib/util.js
diff --git a/node-tests/__snapshots__/util.test.js.snap b/node-tests/__snapshots__/util.test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`util @generatePreviewHead should work with file created with \`ember build\` 1`] = `
+"<!-- This file is auto-generated by ember-cli-storybook -->
+<meta name=\\"storybook-ember-3-1/config/environment\\" content=\\"%7B%22modulePrefix%22%3A%22storybook-ember-3-1%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22name%22%3A%22storybook-ember-3-1%22%2C%22version%22%3A%220.0.0+eebe77e5%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/vendor.css\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/storybook-ember-3-1.css\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/test-support.css\\" />
+<script src=\\"./testem.js\\"></script>
+<script src=\\"./assets/vendor.js\\"></script>
+<script>runningTests = true; Ember.testing=true;</script>
+<script src=\\"./assets/test-support.js\\"></script>
+<script src=\\"./assets/storybook-ember-3-1.js\\"></script>
+<script src=\\"./assets/tests.js\\"></script>"
+`;
+
+exports[`util @generatePreviewHead should work with file created with \`ember serve\` (should append livereload pointing at serve instance) 1`] = `
+"<!-- This file is auto-generated by ember-cli-storybook -->
+<meta name=\\"storybook-ember-3-1/config/environment\\" content=\\"%7B%22modulePrefix%22%3A%22storybook-ember-3-1%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22name%22%3A%22storybook-ember-3-1%22%2C%22version%22%3A%220.0.0+eebe77e5%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/vendor.css\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/storybook-ember-3-1.css\\" />
+<link rel=\\"stylesheet\\" href=\\"./assets/test-support.css\\" />
+<script>
+            (function() {
+              var srcUrl = null;
+              var host = location.hostname || 'localhost';
+              var defaultPort = location.protocol === 'https:' ? 443 : 80;
+              var port = undefined;
+              var path = '';
+              var prefixURL = '';
+              var src = srcUrl || prefixURL + '/_lr/livereload.js?port=' + port + '&host=' + host + path;
+              var script = document.createElement('script');
+              script.type = 'text/javascript';
+              script.src = location.protocol + '//' + host + ':undefined' + src;
+              document.getElementsByTagName('head')[0].appendChild(script);
+            }());
+          </script>
+<script src=\\"./testem.js\\"></script>
+<script src=\\"./assets/vendor.js\\"></script>
+<script>runningTests = true; Ember.testing=true;</script>
+<script src=\\"./assets/test-support.js\\"></script>
+<script src=\\"./assets/storybook-ember-3-1.js\\"></script>
+<script src=\\"./assets/tests.js\\"></script>"
+`;
+
+exports[`util @parse should be able to parse metas from a built html file from an app that uses engines 1`] = `
+Array [
+  Object {
+    "content": "%7B%22modulePrefix%22%3A%22vault%22%2C%22environment%22%3A%22development%22%2C%22rootURL%22%3A%22/ui/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22POLLING_URLS%22%3A%5B%22sys/health%22%2C%22sys/replication/status%22%2C%22sys/seal-status%22%5D%2C%22NAMESPACE_ROOT_URLS%22%3A%5B%22sys/health%22%2C%22sys/seal-status%22%2C%22sys/license/features%22%5D%2C%22DEFAULT_PAGE_SIZE%22%3A15%2C%22LOG_TRANSITIONS%22%3Atrue%7D%2C%22flashMessageDefaults%22%3A%7B%22timeout%22%3A7000%2C%22sticky%22%3Afalse%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy%22%2C%22contentSecurityPolicyMeta%22%3Atrue%2C%22contentSecurityPolicy%22%3A%7B%22connect-src%22%3A%5B%22%27self%27%22%5D%2C%22img-src%22%3A%5B%22%27self%27%22%2C%22data%3A%22%5D%2C%22form-action%22%3A%5B%22%27none%27%22%5D%2C%22script-src%22%3A%5B%22%27self%27%22%5D%2C%22style-src%22%3A%5B%22%27unsafe-inline%27%22%2C%22%27self%27%22%5D%2C%22default-src%22%3A%5B%22%27none%27%22%5D%2C%22font-src%22%3A%5B%22%27self%27%22%5D%2C%22media-src%22%3A%5B%22%27self%27%22%5D%7D%2C%22emberData%22%3A%7B%22enableRecordDataRFCBuild%22%3Afalse%7D%2C%22exportApplicationGlobal%22%3Atrue%7D",
+    "name": "vault/config/environment",
+  },
+  Object {
+    "content": "%7B%22modulePrefix%22%3A%22replication%22%2C%22environment%22%3A%22development%22%7D",
+    "name": "replication/config/environment",
+  },
+  Object {
+    "content": "%7B%22bundles%22%3A%7B%22replication%22%3A%7B%22assets%22%3A%5B%7B%22uri%22%3A%22/ui/engines-dist/replication/assets/engine-vendor.js%22%2C%22type%22%3A%22js%22%7D%2C%7B%22uri%22%3A%22/ui/engines-dist/replication/assets/engine.js%22%2C%22type%22%3A%22js%22%7D%5D%7D%7D%7D",
+    "name": "vault/config/asset-manifest",
+  },
+]
+`;