Svelte support #3770
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| ## Addon / Framework Support Table | ||
|
|
||
| | |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| | ||
| | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:| | ||
| |[a11y](addons/a11y) |+| |+|+|+|+|+|+| | | ||
|
There was a problem hiding this comment.
The error does not seem to affect functionality though There was a problem hiding this comment. Hmm that's unfortunate, I wonder if axe is actively maintained and we could open a ticket with the maintainers.. |
||
| |[actions](addons/actions) |+|+|+|+|+|+|+|+|+| | ||
| |[backgrounds](addons/backgrounds) |+| |+|+|+|+|+|+|+| | ||
| |[centered](addons/centered) |+| |+|+| |+|+| |+| | ||
| |[events](addons/events) |+| |+|+|+|+|+|+| | | ||
| |[graphql](addons/graphql) |+| | | | | | | | | | ||
| |[info](addons/info) |+| | | | | | | | | | ||
| |[jest](addons/jest) |+| | |+| | |+| | | | ||
| |[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+| | ||
| |[links](addons/links) |+|+|+|+|+|+|+| |+| | ||
| |[notes](addons/notes) |+| |+|+|+|+|+| |+| | ||
| |[options](addons/options) |+|+|+|+|+|+|+| |+| | ||
| |[storyshots](addons/storyshots) |+|+|+|+| | |+| |+| | ||
| |[storysource](addons/storysource)|+| |+|+|+|+|+|+|+| | ||
| |[viewport](addons/viewport) |+| |+|+|+|+|+|+|+| | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="svelte-centered-wrapper" style="{centeredStyles.style}"> | ||
| <div class="svelte-centered-container" style="{centeredStyles.innerStyle}"> | ||
| <svelte:component this="{OriginalComponent}" {...originalData} /> | ||
| </div> | ||
|
There was a problem hiding this comment. Does not work in conjunction with There was a problem hiding this comment. This will be fixed in plumpNation#1 |
||
| </div> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| OriginalComponent: null, | ||
| originalData: {}, | ||
| centeredStyles: {} | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { document } from 'global'; | ||
|
|
||
| /** | ||
| * Not all frameworks support an object for the style attribute but we want all to | ||
| * consume `styles.json`. Since `styles.json` uses standard style properties for keys, | ||
| * we can just set them on an element and then get the string result of that element's | ||
| * `style` attribute. This also means that invalid styles are filtered out. | ||
| * | ||
| * @param {Object} jsonStyles | ||
| * @returns {string} | ||
| * @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles | ||
| */ | ||
| export default function jsonToCss(jsonStyles) { | ||
| const frag = document.createElement('div'); | ||
|
|
||
| Object.keys(jsonStyles).forEach(key => { | ||
| frag.style[key] = jsonStyles[key]; | ||
| }); | ||
|
|
||
| return frag.getAttribute('style'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import Centered from './components/Centered.svelte'; | ||
| import styles from './styles'; | ||
| import json2CSS from './helpers/json2CSS'; | ||
|
|
||
| const centeredStyles = { | ||
| /** @type {string} */ | ||
| style: json2CSS(styles.style), | ||
| /** @type {string} */ | ||
| innerStyle: json2CSS(styles.innerStyle), | ||
| }; | ||
|
|
||
| /** | ||
| * This functionality works by passing the svelte story component into another | ||
| * svelte component that has the single purpose of centering the story component | ||
| * using a wrapper and container. | ||
| * | ||
| * We use the special element <svelte:component /> to achieve this. | ||
| * | ||
| * @see https://svelte.technology/guide#svelte-component | ||
| */ | ||
| export default function(storyFn) { | ||
| const { Component: OriginalComponent, data: originalData } = storyFn(); | ||
|
|
||
| const centeredData = { | ||
| OriginalComponent, | ||
| centeredStyles, | ||
| originalData, | ||
| }; | ||
|
|
||
| return { Component: Centered, data: centeredData }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./dist/svelte'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import global from 'global'; | ||
|
There was a problem hiding this comment. I don't see any committed snapshots, does this addon really work? There was a problem hiding this comment. Not yet, I had to stop and sleep yesterday, got a bit late 😸 There was a problem hiding this comment. This should now be generating snapshots. |
||
| import hasDependency from '../hasDependency'; | ||
| import configure from '../configure'; | ||
|
|
||
| function test(options) { | ||
| return ( | ||
| options.framework === 'svelte' || (!options.framework && hasDependency('@storybook/svelte')) | ||
| ); | ||
| } | ||
|
|
||
| function load(options) { | ||
| global.STORYBOOK_ENV = 'svelte'; | ||
|
|
||
| const { configPath, config } = options; | ||
| const storybook = require.requireActual('@storybook/svelte'); | ||
|
|
||
| configure({ configPath, config, storybook }); | ||
|
|
||
| return { | ||
| framework: 'svelte', | ||
| renderTree: require.requireActual('./renderTree').default, | ||
| renderShallowTree: () => { | ||
| throw new Error('Shallow renderer is not supported for svelte'); | ||
| }, | ||
| storybook, | ||
| }; | ||
| } | ||
|
|
||
| export default { | ||
| load, | ||
| test, | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { document } from 'global'; | ||
|
|
||
| /** | ||
| * Provides functionality to convert your raw story to the resulting markup. | ||
| * | ||
| * Storybook snapshots need the rendered markup that svelte outputs, | ||
| * but since we only have the story config data ({ Component, data }) in | ||
| * the Svelte stories, we need to mount the component, and then return the | ||
| * resulting HTML. | ||
| * | ||
| * If we don't render to HTML, we will get a snapshot of the raw story | ||
| * i.e. ({ Component, data }). | ||
| */ | ||
| function getRenderedTree(story, context) { | ||
| const { Component, data } = story.render(context); | ||
|
|
||
| // We need to create a target to mount onto. | ||
| const target = document.createElement('section'); | ||
|
|
||
| new Component({ target, data }); // eslint-disable-line | ||
|
|
||
| // Classify the target so that it is clear where the markup | ||
| // originates from, and that it is specific for snapshot tests. | ||
| target.className = 'storybook-snapshot-container'; | ||
|
|
||
| return target; | ||
| } | ||
|
|
||
| export default getRenderedTree; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| docs | ||
| .babelrc |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Storybook for Svelte | ||
|
|
||
| [](https://circleci.com/gh/storybooks/storybook) | ||
| [](https://www.codefactor.io/repository/github/storybooks/storybook) | ||
| [](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847) | ||
| [](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook) | ||
| [](https://now-examples-slackin-rrirkqohko.now.sh/) | ||
| [](#backers) [](#sponsors) | ||
|
|
||
| * * * | ||
|
|
||
| Storybook for Svelte is a UI development environment for your Svelte components. | ||
| With it, you can visualize different states of your UI components and develop them interactively. | ||
|
|
||
|  | ||
|
|
||
| Storybook runs outside of your app. | ||
| So you can develop UI components in isolation without worrying about app specific dependencies and requirements. | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ```sh | ||
| npm i -g @storybook/cli | ||
| cd my-svelte-app | ||
| getstorybook | ||
| ``` | ||
|
|
||
| For more information visit: [storybook.js.org](https://storybook.js.org) | ||
|
|
||
| * * * | ||
|
|
||
| Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. | ||
| You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| require('../dist/server/build'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| require('../dist/server'); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| { | ||
| "name": "@storybook/svelte", | ||
| "version": "4.0.0-alpha.9", | ||
| "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", | ||
| "homepage": "https://github.com/storybooks/storybook/tree/master/apps/svelte", | ||
| "bugs": { | ||
| "url": "https://github.com/storybooks/storybook/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/storybooks/storybook.git" | ||
| }, | ||
| "license": "MIT", | ||
| "main": "dist/client/index.js", | ||
| "jsnext:main": "src/client/index.js", | ||
| "bin": { | ||
| "build-storybook": "./bin/build.js", | ||
| "start-storybook": "./bin/index.js", | ||
| "storybook-server": "./bin/index.js" | ||
| }, | ||
| "scripts": { | ||
| "prepare": "node ../../scripts/prepare.js" | ||
| }, | ||
| "dependencies": { | ||
| "@storybook/core": "4.0.0-alpha.9", | ||
| "common-tags": "^1.8.0", | ||
| "global": "^4.3.2", | ||
| "react": "^16.4.0", | ||
| "react-dom": "^16.4.0" | ||
| }, | ||
| "devDependencies": { | ||
| "svelte": "^2.7.2", | ||
| "svelte-loader": "^2.9.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export { | ||
| storiesOf, | ||
| setAddon, | ||
| addDecorator, | ||
| addParameters, | ||
| configure, | ||
| getStorybook, | ||
|
There was a problem hiding this comment. you can also export here the |
||
| forceReRender, | ||
| } from './preview'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { window } from 'global'; | ||
|
|
||
| window.STORYBOOK_REACT_CLASSES = {}; | ||
|
|
||
| window.STORYBOOK_ENV = 'svelte'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { start } from '@storybook/core/client'; | ||
|
|
||
| import './globals'; | ||
| import render from './render'; | ||
|
|
||
| const { clientApi, configApi, forceReRender } = start(render); | ||
|
|
||
| export const { | ||
| storiesOf, | ||
| setAddon, | ||
| addDecorator, | ||
| addParameters, | ||
| clearDecorators, | ||
| getStorybook, | ||
| } = clientApi; | ||
|
|
||
| export const { configure } = configApi; | ||
| export { forceReRender }; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please mention yourself here and under
/app/svelte/