Migrate @storybook/svelte to Typescript

storybookjs · Nov 8, 2019 · 769ce18 · 769ce18
1 parent 4b2d80e
commit 769ce18
Show file tree

Hide file tree

Showing 14 changed files with 209 additions and 14 deletions.
diff --git a/app/svelte/package.json b/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,11 +33,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "^5.2.5",
     "@storybook/core": "5.3.0-alpha.40",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.0",
+    "webpack": "^4.33.0"
   },
   "devDependencies": {
     "svelte": "^3.4.1",

diff --git a/app/svelte/src/client/index.js → app/svelte/src/client/index.ts b/app/svelte/src/client/index.js → app/svelte/src/client/index.ts
diff --git a/app/svelte/src/client/preview/globals.js → app/svelte/src/client/preview/globals.ts b/app/svelte/src/client/preview/globals.js → app/svelte/src/client/preview/globals.ts
diff --git a/app/svelte/src/client/preview/index.js → app/svelte/src/client/preview/index.ts b/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 };
diff --git a/app/svelte/src/client/preview/render.js → app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.js → app/svelte/src/client/preview/render.ts
@@ -1,7 +1,8 @@
 import { document } from 'global';
 import dedent from 'ts-dedent';
+import { MountViewArgs, RenderMainArgs } from './types';
 
-let previousComponent = null;
+let previousComponent: any = null;
 
 function cleanUpPreviousStory() {
   if (!previousComponent) {
@@ -12,8 +13,8 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
-function mountView({ Component, target, props, on, Wrapper, WrapperData }) {
-  let component;
+function mountView({ Component, target, props, on, Wrapper, WrapperData }: MountViewArgs) {
+  let component: any;
 
   if (Wrapper) {
     const fragment = document.createDocumentFragment();
@@ -47,8 +48,7 @@ export default function render({
   selectedStory,
   showMain,
   showError,
-  // showException,
-}) {
+}: RenderMainArgs) {
   const {
     /** @type {SvelteComponent} */
     Component,

diff --git a/app/svelte/src/client/preview/types.ts b/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;
+}
diff --git a/app/svelte/src/index.d.ts b/app/svelte/src/index.d.ts
@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';
diff --git a/app/svelte/src/server/build.js → app/svelte/src/server/build.ts b/app/svelte/src/server/build.js → app/svelte/src/server/build.ts
diff --git a/...lte/src/server/framework-preset-svelte.js → ...lte/src/server/framework-preset-svelte.ts b/...lte/src/server/framework-preset-svelte.js → ...lte/src/server/framework-preset-svelte.ts
@@ -1,4 +1,6 @@
-export function webpack(config) {
+import { Configuration } from 'webpack';
+
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {

diff --git a/app/svelte/src/server/index.js → app/svelte/src/server/index.ts b/app/svelte/src/server/index.js → app/svelte/src/server/index.ts
diff --git a/app/svelte/src/server/options.js → app/svelte/src/server/options.ts b/app/svelte/src/server/options.js → app/svelte/src/server/options.ts
diff --git a/app/svelte/tsconfig.json b/app/svelte/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*"
+  ]
+}
diff --git a/package.json b/package.json
@@ -50,11 +50,11 @@
     "coverage": "codecov",
     "danger": "danger",
     "dev": "concurrently --kill-others \"yarn dev:tsc\" \"yarn dev:babel\"",
-    "dev:babel": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-babel.js",
+    "dev:babel": "lerna exec --scope @storybook/svelte --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-babel.js",
     "dev:check-types": "tsc --noEmit",
     "dev:js": "echo 'DEPRECATED: Please use yarn dev:babel' && yarn dev:babel",
     "dev:ts": "echo 'DEPRECATED: Please use yarn dev:tsc' && yarn dev:tsc",
-    "dev:tsc": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-tsc.js",
+    "dev:tsc": "lerna exec --scope @storybook/svelte --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-tsc.js",
     "docs:build": "npm --prefix docs run build",
     "docs:dev": "npm --prefix docs run dev",
     "github-release": "github-release-from-changelog",

diff --git a/yarn.lock b/yarn.lock
@@ -1642,7 +1642,7 @@
     "@emotion/utils" "0.11.2"
     "@emotion/weak-memoize" "0.2.4"
 
-"@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
   version "10.0.22"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
   integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==
@@ -1675,6 +1675,13 @@
   dependencies:
     "@emotion/memoize" "0.7.3"
 
+"@emotion/[email protected]":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
+  integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
+  dependencies:
+    "@emotion/memoize" "0.7.3"
+
 "@emotion/[email protected]":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
@@ -1705,6 +1712,17 @@
     "@emotion/utils" "0.11.2"
     csstype "^2.5.7"
 
+"@emotion/serialize@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
+  integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==
+  dependencies:
+    "@emotion/hash" "0.7.3"
+    "@emotion/memoize" "0.7.3"
+    "@emotion/unitless" "0.7.4"
+    "@emotion/utils" "0.11.2"
+    csstype "^2.5.7"
+
 "@emotion/[email protected]":
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
@@ -1728,6 +1746,24 @@
     "@emotion/serialize" "^0.11.12"
     "@emotion/utils" "0.11.2"
 
+"@emotion/styled-base@^10.0.23":
+  version "10.0.24"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
+  integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.5"
+    "@emotion/serialize" "^0.11.14"
+    "@emotion/utils" "0.11.2"
+
+"@emotion/styled@^10.0.14":
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
+  integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==
+  dependencies:
+    "@emotion/styled-base" "^10.0.23"
+    babel-plugin-emotion "^10.0.23"
+
 "@emotion/styled@^10.0.17":
   version "10.0.22"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.22.tgz#ee398710876ebda5a418f84359516c6a1c5c41b1"
@@ -3438,6 +3474,63 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@storybook/addons@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.5.tgz#e3e23d5ea6eb221df31e1a5d125be47454e9a0e8"
+  integrity sha512-CvMj7Bs3go9tv5rZuAvFwuwe8p/16LDCHS7+5nVFosvcL8nuN339V3rzakw8nLy/S6XKeZ1ACu4t3vYkreRE3w==
+  dependencies:
+    "@storybook/api" "5.2.5"
+    "@storybook/channels" "5.2.5"
+    "@storybook/client-logger" "5.2.5"
+    "@storybook/core-events" "5.2.5"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
+
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.5.tgz#dcc68c873820485372a47c095a8fc5e4fb53a34c"
+  integrity sha512-JvLafqFVgA3dIWpLMoGNk4sRuogE5imhD6/g0d8DOwnCID9xowj5xIptSrCTKvGGGxuN3wWRGn6I2lEbY6969g==
+  dependencies:
+    "@storybook/channels" "5.2.5"
+    "@storybook/client-logger" "5.2.5"
+    "@storybook/core-events" "5.2.5"
+    "@storybook/router" "5.2.5"
+    "@storybook/theming" "5.2.5"
+    core-js "^3.0.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    prop-types "^15.6.2"
+    react "^16.8.3"
+    semver "^6.0.0"
+    shallow-equal "^1.1.0"
+    store2 "^2.7.1"
+    telejson "^3.0.2"
+    util-deprecate "^1.0.2"
+
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.2.5.tgz#d6ca2b490281dacb272096563fe760ccb353c4bb"
+  integrity sha512-I+zB3ym5ozBcNBqyzZbvB6gRIG/ZKKkqy5k6LwKd5NMx7NU7zU74+LQUBBOcSIrigj8kCArZz7rlgb0tlSKXxQ==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.5.tgz#6f386ac6f81b4a783c57d54bb328281abbea1bab"
+  integrity sha512-6DyYUrMgAvF+th0foH7UNz+2JJpRdvNbpvYKtvi/+hlvRIaI6AqANgLkPUgMibaif5TLzjCr0bLdAYcjeJz03w==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.2.5.tgz#62881164a4a01aa99ff0691e70eaed2dd58e229e"
+  integrity sha512-O5GM8XEBbYNbM6Z7a4H1bbnbO2cxQrXMhEwansC7a7YinQdkTPiuGxke3NiyK+7pLDh778kpQyjoCjXq6UfAoQ==
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/eslint-config-storybook@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/eslint-config-storybook/-/eslint-config-storybook-2.0.0.tgz#78e6d3dd1fafa90aa670f80bc0a80be50c31ff5e"
@@ -3484,6 +3577,37 @@
     "@storybook/node-logger" "^5.2.4"
     react-docgen-typescript-loader "^3.3.0"
 
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.5.tgz#a005332bc6aa1e7849503187ad50c41b3f3bef92"
+  integrity sha512-e6ElDAWSoEW1KSnsTbVwbpzaZ8CNWYw0Ok3b5AHfY2fuSH5L4l6s6k/bP7QSYqvWUeTvkFQYux7A2rOFCriAgA==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+
+"@storybook/[email protected]":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.5.tgz#9579e7944f61ded637d1d79be5fb859a617620f5"
+  integrity sha512-PGZNYrRgAhXFJKnktFpyyKlaDXEhtTi5XPq5ASVJrsPW6l963Mk2EMKSm4TCTxIJhs0Kx4cv2MnNZFDqHf47eg==
+  dependencies:
+    "@emotion/core" "^10.0.14"
+    "@emotion/styled" "^10.0.14"
+    "@storybook/client-logger" "5.2.5"
+    common-tags "^1.8.0"
+    core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.14"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    resolve-from "^5.0.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -6084,6 +6208,22 @@ babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.22:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-emotion@^10.0.23:
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
+  integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.7.3"
+    "@emotion/memoize" "0.7.3"
+    "@emotion/serialize" "^0.11.14"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-extract-import-names@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.5.1.tgz#79fb8550e3e0a9e8654f9461ccade56c9a669a74"
@@ -11581,7 +11721,7 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emotion-theming@^10.0.19:
+emotion-theming@^10.0.14, emotion-theming@^10.0.19:
   version "10.0.19"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.19.tgz#66d13db74fccaefad71ba57c915b306cf2250295"
   integrity sha512-dQRBPLAAQ6eA8JKhkLCIWC8fdjPbiNC1zNTdFF292h9amhZXofcNGUP7axHoHX4XesqQESYwZrXp53OPInMrKw==
@@ -29397,7 +29537,7 @@ teeny-request@^3.11.3:
     node-fetch "^2.2.0"
     uuid "^3.3.2"
 
-telejson@^3.0.3:
+telejson@^3.0.2, telejson@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.1.0.tgz#c648479afe0d8edd90aeaf478b0b8a2fe9f59513"
   integrity sha512-mhiVy+xp2atri1bzSzdy/gVGXlOhibaoZ092AUq5xhnrZGdzhF0fLaOduHJQghkro+qmjYMwhsOL9CkD2zTicg==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		declare module '@storybook/core/*';
		declare module 'global';