Merge branch 'next' into pr/Spy-Seth/6655

# Conflicts:
#	yarn.lock

.eslintrc.js

@@ -153,6 +153,7 @@ module.exports = {
  {
  files: ['**/*.d.ts'],
  rules: {
+ 'vars-on-top': ignore,
  'no-var': ignore, // this is how typescript works
  'spaced-comment': ignore,
  },

addons/centered/src/components/Centered.svelte

@@ -5,12 +5,6 @@
 </div>
 
 <script>
- export default {
- data() {
- return {
- style: '',
- innerStyle: ''
- };
- }
- };
+ export let style = '';
+ export let innerStyle = '';
 </script>

addons/centered/src/svelte.js

@@ -19,9 +19,15 @@ const centeredStyles = {
  * @see https://svelte.technology/guide#svelte-component
  */
 export default function(storyFn) {
- const { Component: OriginalComponent, data, on } = storyFn();
+ const { Component: OriginalComponent, props, on } = storyFn();
 
- return { Component: OriginalComponent, data, on, Wrapper: Centered, WrapperData: centeredStyles };
+ return {
+ Component: OriginalComponent,
+ props,
+ on,
+ Wrapper: Centered,
+ WrapperData: centeredStyles,
+ };
 }
 
 if (module && module.hot && module.hot.decline) {

addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js

@@ -12,12 +12,14 @@ import { document } from 'global';
  * i.e. ({ Component, data }).
  */
 function getRenderedTree(story) {
- const { Component, data } = story.render();
+ const { Component, props } = story.render();
+
+ const DefaultCompatComponent = Component.default || Component;
 
  // We need to create a target to mount onto.
  const target = document.createElement('section');
 
- new Component({ target, data }); // eslint-disable-line
+ new DefaultCompatComponent({ target, props }); // eslint-disable-line
 
  // Classify the target so that it is clear where the markup
  // originates from, and that it is specific for snapshot tests.

app/angular/src/client/preview/angular/helpers.ts

@@ -9,6 +9,12 @@ import { AppComponent } from './components/app.component';
 import { STORY } from './app.token';
 import { NgModuleMetadata, IStoryFn, NgStory } from './types';
 
+declare global {
+ interface Window {
+ NODE_ENV: 'string' | 'development' | undefined;
+ }
+}
+
 let platform: any = null;
 let promises: Promise<NgModuleRef<any>>[] = [];
 
@@ -139,10 +145,13 @@ const insertDynamicRoot = () => {
 const draw = (newModule: DynamicComponentType): void => {
  if (!platform) {
  insertDynamicRoot();
- try {
- enableProdMode();
- } catch (e) {
- //
+ // eslint-disable-next-line no-undef
+ if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
+ try {
+ enableProdMode();
+ } catch (e) {
+ //
+ }
  }
 
  platform = platformBrowserDynamic();

app/angular/src/typings.d.ts

@@ -0,0 +1,2 @@
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;

app/svelte/package.json

@@ -33,12 +33,12 @@
  "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
- "svelte": "^2.16.1",
+ "svelte": "^3.1.0",
  "svelte-loader": "^2.13.3"
  },
  "peerDependencies": {
  "babel-loader": "^7.0.0 || ^8.0.0",
- "svelte": "^2.7.2",
+ "svelte": "^3.1.0",
  "svelte-loader": "^2.9.1"
  },
  "publishConfig": {

app/svelte/src/client/preview/render.js

@@ -8,33 +8,33 @@ function cleanUpPreviousStory() {
  return;
  }
 
- previousComponent.destroy();
+ previousComponent.$destroy();
  previousComponent = null;
 }
 
-function mountView({ Component, target, data, on, Wrapper, WrapperData }) {
+function mountView({ Component, target, props, on, Wrapper, WrapperData }) {
  let component;
 
  if (Wrapper) {
  const fragment = document.createDocumentFragment();
- component = new Component({ target: fragment, data });
+ component = new Component({ target: fragment, props });
 
  const wrapper = new Wrapper({
  target,
  slots: { default: fragment },
- data: WrapperData || {},
+ props: WrapperData || {},
  });
- component.on('destroy', () => {
- wrapper.destroy(true);
+ component.$on('destroy', () => {
+ wrapper.$destroy(true);
  });
  } else {
- component = new Component({ target, data });
+ component = new Component({ target, props });
  }
 
  if (on) {
  // Attach svelte event listeners.
  Object.keys(on).forEach(eventName => {
- component.on(eventName, on[eventName]);
+ component.$on(eventName, on[eventName]);
  });
  }
 
@@ -53,16 +53,18 @@ export default function render({
  /** @type {SvelteComponent} */
  Component,
  /** @type {any} */
- data,
+ props,
  /** @type {{[string]: () => {}}} Attach svelte event handlers */
  on,
  Wrapper,
  WrapperData,
  } = storyFn();
 
  cleanUpPreviousStory();
+ const DefaultCompatComponent = Component ? Component.default || Component : undefined;
+ const DefaultCompatWrapper = Wrapper ? Wrapper.default || Wrapper : undefined;
 
- if (!Component) {
+ if (!DefaultCompatComponent) {
  showError({
  title: `Expecting a Svelte component from the story: "${selectedStory}" of "${selectedKind}".`,
  description: stripIndents`
@@ -79,7 +81,14 @@ export default function render({
 
  target.innerHTML = '';
 
- mountView({ Component, target, data, on, Wrapper, WrapperData });
+ mountView({
+ Component: DefaultCompatComponent,
+ target,
+ props,
+ on,
+ Wrapper: DefaultCompatWrapper,
+ WrapperData,
+ });
 
  showMain();
 }

docs/src/pages/guides/guide-svelte/index.md

@@ -96,14 +96,14 @@ import MyButton from '../components/MyButton.svelte';
 storiesOf('MyButton', module)
  .add('with text', () => ({
  Component: MyButton,
- data: {
+ props: {
  buttonText: 'some text',
  },
  })),
  .add('with text', () => ({
  Component: MyButton,
 
- data: {
+ props: {
  buttonText: '😀 😎 👍 💯',
  },
  }));
@@ -116,7 +116,7 @@ So you can create a story "view" file, essentially just a .svelte file to load y
 
 ```html
 <!-- MyButtonView -->
-<MyButton rounded="{rounded}" on:click>
+<MyButton {rounded} on:click>
  {buttonText}
 </Button>
 ```
@@ -136,7 +136,7 @@ storiesOf('Button', module)
  .add('wrapped component(s) example', () => ({
  Components: MyButtonView,
 
- data: {
+ props: {
  buttonText: 'some text',
  rounded: true,
  },

examples/angular-cli/package.json

@@ -49,7 +49,7 @@
  "@storybook/angular": "5.1.0-alpha.39",
  "@types/core-js": "^2.5.0",
  "@types/jest": "^24.0.11",
- "@types/node": "~11.13.4",
+ "@types/node": "~12.0.0",
  "@types/webpack-env": "^1.13.7",
  "babel-plugin-require-context-hook": "^1.0.0",
  "global": "^4.3.2",

examples/preact-kitchen-sink/package.json

@@ -34,7 +34,7 @@
  "cross-env": "^5.2.0",
  "file-loader": "^3.0.1",
  "preact-render-to-json": "^3.6.6",
- "raw-loader": "^1.0.0",
+ "raw-loader": "^2.0.0",
  "svg-url-loader": "^2.3.2",
  "webpack": "^4.28.0",
  "webpack-dev-server": "^3.2.1"

examples/riot-kitchen-sink/package.json

@@ -32,7 +32,7 @@
  "babel-loader": "^8.0.4",
  "cross-env": "^5.2.0",
  "file-loader": "^3.0.1",
- "raw-loader": "^1.0.0",
+ "raw-loader": "^2.0.0",
  "riot-tag-loader": "^2.1.0",
  "svg-url-loader": "^2.3.2",
  "webpack": "^4.28.0",

examples/svelte-kitchen-sink/jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
  roots: [__dirname],
  transform: {
  ...config.transform,
- '.*\\.(svelte)$': '<rootDir>/node_modules/svelte-jest',
+ '.*\\.(svelte)$': '<rootDir>/svelte-transform',
  },
  moduleFileExtensions: [...config.moduleFileExtensions, 'svelte'],
 };

examples/svelte-kitchen-sink/src/components/Button.svelte

@@ -1,8 +1,9 @@
 <button
- class="button {roundedClass}"
- on:click="onClick(event)">
- <strong>{rounded ? 'Round' : 'Square'} corners</strong><br>
- {text}
+ class="button"
+ class:rounded={rounded}
+ on:click={onClick}>
+ <strong>{ rounded ? 'Round' : 'Square' } corners</strong><br>
+ { text }
  <slot></slot>
 </button>
 
@@ -20,29 +21,20 @@
 </style>
 
 <script>
- export default {
- data () {
- return {
- count: 0,
- text: '', // component supports both <slot> and text prop.
- rounded: true
- };
- },
+ import { createEventDispatcher, afterUpdate } from 'svelte';
+ export let count = 0;
+ export let text = '';
+ export let rounded = true;
 
- computed: {
- roundedClass({ rounded }) {
- return rounded ? 'rounded' : ''
- }
- },
+ const dispatch = createEventDispatcher();
 
- methods: {
- onClick(event) {
- const {rounded} = this.get();
+ function onClick(event) {
+ rounded = !rounded;
 
- this.set({rounded: !rounded});
-
- this.fire('click', event)
- }
- }
+ dispatch('click', event);
  }
+
+ afterUpdate(() => {
+ dispatch('afterUpdate');
+ });
 </script>

examples/svelte-kitchen-sink/src/components/Button.test.js

@@ -8,17 +8,21 @@ describe('Button Component', () => {
  beforeEach(() => {
  target = document.createElement('div');
 
- component = new Button({ target });
+ component = new Button.default({ target }); // eslint-disable-line new-cap
  });
 
- it('should render `text` property', () => {
+ it('should render `text` property', done => {
  const text = 'Hello world';
- const expected = `Round corners\n  ${text}`;
+ const expected = `Round corners ${text}`;
 
- component.set({ text });
+ component.$on('afterUpdate', () => {
+ const componentText = target.firstChild.textContent.trim();
 
- const componentText = target.firstChild.textContent.trim();
+  expect(componentText).toEqual(expected);
 
- expect(componentText).toEqual(expected);
+ done();
+ });
+
+ component.$set({ text });
  });
 });