Skip to content

Commit

Permalink
[feature] enable config overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrielcsapo committed Aug 3, 2021
1 parent 704d998 commit 31fb108
Show file tree
Hide file tree
Showing 9 changed files with 311 additions and 199 deletions.
6 changes: 0 additions & 6 deletions .ember-cli
Original file line number Diff line number Diff line change
@@ -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
}
63 changes: 48 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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`.
Expand Down
16 changes: 14 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down
File renamed without changes.
61 changes: 61 additions & 0 deletions node-tests/__snapshots__/util.test.js.snap
Original file line number Diff line number Diff line change
@@ -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",
},
]
`;
Loading

0 comments on commit 31fb108

Please sign in to comment.