Enable TypeScript live update in Storybook (#5)

* chore: enable live TS in Storybook * chore: 🤖 manually add tsconfig for storybook * chore: 🤖 enable typescript for preset-chart-xy
apache · Nov 26, 2021 · 618f50b · 618f50b
1 parent 3e05f6f
commit 618f50b
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 3 deletions.
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
@@ -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
@@ -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/...ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/...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-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js b/.../superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js
@@ -1,11 +1,20 @@
 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) => {
   // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
   // 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/...i/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json b/...i/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/...preset-chart-xy/src/utils/adjustMargin.js → ...preset-chart-xy/src/utils/adjustMargin.ts b/...preset-chart-xy/src/utils/adjustMargin.js → ...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<Margin> = {},
+  minMargin: Partial<Margin> = {},
+) {
   const { top = 0, left = 0, bottom = 0, right = 0 } = baseMargin;
   const {
     top: minTop = 0,