Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] enable config overrides #80

Merged
merged 1 commit into from
Aug 12, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
}
5 changes: 3 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/**',
Expand All @@ -42,7 +43,7 @@ module.exports = {
node: true
},
plugins: ['node'],
extends: ['plugin:node/recommended']
extends: ['plugin:node/recommended', 'plugin:jest/recommended']
}
]
};
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`] = `
dbendaou marked this conversation as resolved.
Show resolved Hide resolved
"<!-- 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