Merge pull request #8770 from aromanarguello/svelteTypescriptMigration

Svelte: Migrate @storybook/svelte to Typescript

app/svelte/package.json

@@ -23,6 +23,7 @@
     "*.d.ts"
   ],
   "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -32,6 +33,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "5.3.0-alpha.43",
     "@storybook/core": "5.3.0-alpha.43",
     "core-js": "^3.0.1",
     "global": "^4.3.2",

app/svelte/src/client/preview/index.js → app/svelte/src/client/preview/index.ts

@@ -15,7 +15,8 @@ export const {
 } = clientApi;
 
 const framework = 'svelte';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(...args, framework);
+export const storiesOf = (...args: any) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any) => coreConfigure(...args, framework);
 
 export { forceReRender };

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

@@ -1,19 +1,21 @@
 import { document } from 'global';
 import dedent from 'ts-dedent';
+import { MountViewArgs, RenderMainArgs } from './types';
 
-let previousComponent = null;
+type Component = any;
+
+let previousComponent: Component = null;
 
 function cleanUpPreviousStory() {
   if (!previousComponent) {
     return;
   }
-
   previousComponent.$destroy();
   previousComponent = null;
 }
 
-function mountView({ Component, target, props, on, Wrapper, WrapperData }) {
-  let component;
+function mountView({ Component, target, props, on, Wrapper, WrapperData }: MountViewArgs) {
+  let component: Component;
 
   if (Wrapper) {
     const fragment = document.createDocumentFragment();
@@ -47,8 +49,7 @@ export default function render({
   selectedStory,
   showMain,
   showError,
-  // showException,
-}) {
+}: RenderMainArgs) {
   const {
     /** @type {SvelteComponent} */
     Component,

app/svelte/src/client/preview/types.ts

@@ -0,0 +1,33 @@
+import { StoryFn } from '@storybook/addons';
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: StoryFn<any>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+}
+
+export interface MountViewArgs {
+  Component: any;
+  target: any;
+  props: MountProps;
+  on: any;
+  Wrapper: any;
+  WrapperData: any;
+}
+
+interface MountProps {
+  rounded: boolean;
+  text: string;
+}
+
+interface WrapperData {
+  innerStyle: string;
+  style: string;
+}

app/svelte/src/server/framework-preset-svelte.js → app/svelte/src/server/framework-preset-svelte.ts

@@ -1,4 +1,6 @@
-export function webpack(config) {
+import { Configuration } from 'webpack'; // eslint-disable-line
+
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {

app/svelte/src/server/options.js → app/svelte/src/server/options.ts

@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,

app/svelte/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';

app/svelte/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*"
+  ]
+}

package.json

@@ -277,4 +277,4 @@
       ]
     ]
   }
-}
+}