From 618f50b01b6683b2697b34dcedbd5aaea822b5b9 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Wed, 27 Feb 2019 12:19:00 -0800 Subject: [PATCH] Enable TypeScript live update in Storybook (#5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: enable live TS in Storybook * chore: 🤖 manually add tsconfig for storybook * chore: 🤖 enable typescript for preset-chart-xy --- .../plugins/superset-ui-plugins/.gitignore | 1 + .../plugins/superset-ui-plugins/package.json | 4 +-- .../superset-ui-plugins-demo/package.json | 4 +++ .../storybook-config/webpack.config.js | 31 +++++++++++++++++++ .../superset-ui-plugins-demo/tsconfig.json | 23 ++++++++++++++ .../{adjustMargin.js => adjustMargin.ts} | 12 ++++++- 6 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/{adjustMargin.js => adjustMargin.ts} (63%) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/.gitignore b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/.gitignore index 57ac4bff46..168f2efa81 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/.gitignore +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/.gitignore @@ -1,5 +1,6 @@ .babelrc .cache +.cache-loader .DS_Store .eslintcache .eslintignore diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json index f9afe4c081..057248395a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json @@ -9,8 +9,8 @@ "build:esm": "NODE_ENV=production beemo babel --extensions=\".js,.jsx,.ts,.tsx\" ./src --out-dir esm/ --esm --minify --workspaces=\"@superset-ui/!(plugins-demo)\"", "build:assets": "node ./buildAssets.js", "commit": "git-cz", - "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/(plugin-*)\" --noEmit", - "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/(plugin-*)\" --emitDeclarationOnly", + "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --noEmit", + "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --emitDeclarationOnly", "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "jest": "beemo jest --color --coverage --react", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json index 6b80597947..68959662f1 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json @@ -41,6 +41,10 @@ "@superset-ui/connection": "^0.10.0", "@superset-ui/translation": "^0.10.0", "babel-loader": "^8.0.4", + "cache-loader": "^1.2.2", + "fork-ts-checker-webpack-plugin": "^0.4.9", + "thread-loader": "^1.2.0", + "ts-loader": "^5.2.0", "bootstrap": "^3.3.6", "git-directory-deploy": "^1.5.1", "react": "^16.6.0", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js index 56b9f594f9..465c10060c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js @@ -1,4 +1,6 @@ const path = require('path'); +const os = require('os'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); // Export a function. Accept the base config as the only param. module.exports = (storybookBaseConfig, configType, defaultConfig) => { @@ -6,6 +8,13 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => { // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook. + defaultConfig.resolve = defaultConfig.resolve || {}; + defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx']; + + defaultConfig.plugins.push(new ForkTsCheckerWebpackPlugin({ + checkSyntacticErrors: true, + })); + defaultConfig.module.rules[0].use[0].options.plugins.push('@babel/plugin-syntax-dynamic-import'); defaultConfig.module.rules.push({ @@ -15,6 +24,28 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => { use: defaultConfig.module.rules[0].use, }); + defaultConfig.module.rules.push({ + test: /\.tsx?$/, + use: [ + { loader: 'cache-loader' }, + { + loader: 'thread-loader', + options: { + // there should be 1 cpu for the fork-ts-checker-webpack-plugin + workers: os.cpus().length - 1, + }, + }, + { + loader: 'ts-loader', + options: { + // transpile only in happyPack mode + // type checking is done via fork-ts-checker-webpack-plugin + happyPackMode: true, + }, + }, + ], + }); + // Return the altered config return defaultConfig; }; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json new file mode 100644 index 0000000000..422d28d501 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "outDir": "./dist", + "module": "commonjs", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "importHelpers": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true, + "skipLibCheck": true + }, + "include": ["./storybook/stories/**/*", "../superset-ui-*/src/**/*", "./src/**/*", "./spec/**/*"] +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.ts similarity index 63% rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.js rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.ts index 138661ab7c..4e92a2de71 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.js +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/adjustMargin.ts @@ -1,4 +1,14 @@ -export default function adjustMargin(baseMargin = {}, minMargin = {}) { +interface Margin { + top: number; + left: number; + bottom: number; + right: number; +} + +export default function adjustMargin( + baseMargin: Partial = {}, + minMargin: Partial = {}, +) { const { top = 0, left = 0, bottom = 0, right = 0 } = baseMargin; const { top: minTop = 0,