reshow-app add types

packages/reshow-app/package.build.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.94",
+  "version": "0.18.0",
   "name": "reshow-app",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
     "ansi-html-community": "0.0.8",
     "array.polyfill": "*",
     "call-func": "*",
-    "chalk": "^2.x",
+    "chalk": "5.3.0",
     "core-js": "^3.1.4",
     "error-stack-parser": "2.0.6",
     "es6-promise": "4.2.5",
@@ -37,12 +37,12 @@
     "react-atomic-atom": "*",
     "react-refresh": "*",
     "readable-stream": "3.6.0",
-    "reshow": "^0.17.x",
-    "reshow-build": "^0.17.x",
+    "reshow": "^0.18.x",
+    "reshow-build": "*",
     "reshow-constant": "*",
     "reshow-runtime": "*",
-    "reshow-unit": "^0.17.x",
-    "reshow-url": "^0.17.x",
+    "reshow-unit": "^0.18.x",
+    "reshow-url": "^0.18.x",
     "reshow-worker": "*",
     "swc-loader": "0.2.3",
     "terser-webpack-plugin": "^5.3.x",
@@ -61,9 +61,20 @@
       "require": "./client.js",
       "import": "./client.mjs"
     },
-    "./server": "./server.js",
-    "./webpack.client": "./webpack.client.js",
-    "./webpack.server": "./webpack.server.js"
+    "./server": {
+      "require": "./server.js",
+      "import": "./server.mjs"
+    },
+    "./webpack.client": {
+      "types": "./types/webpack.client.d.ts",
+      "require": "./webpack.client.js",
+      "import": "./webpack.client.mjs"
+    },
+    "./webpack.server": {
+      "types": "./types/webpack.server.d.ts",
+      "require": "./webpack.server.js",
+      "import": "./webpack.server.mjs"
+    }
   },
   "scripts": {
     "syncpkg": "cp ./yarn.lock ../yarn.build.lock && cp ./package.json ../package.build.json",
@@ -73,6 +84,7 @@
     "prepublishOnly": "npm t"
   },
   "files": [
+    "types",
     "README.md",
     "client.js",
     "client.mjs",

packages/reshow-app/package.json

@@ -15,15 +15,18 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/cli": "^7.x",
-    "reshow-unit": "*"
+    "chalk": "5.3.0",
+    "reshow-unit": "*",
+    "webpack": "5.94.0"
   },
   "scripts": {
-    "copy": "cp package.build.json ./build/package.json && cp yarn.build.lock ./build/yarn.lock && cp README.md ./build",
+    "copy": "cp package.build.json ./build/package.json && cp yarn.build.lock ./build/yarn.lock && cp -r {README.md,types} ./build",
     "clean": "find ./build/* \\( ! -path \"*node_modules*\" \\) | xargs rm -rf",
+    "build:type": "npx -p typescript tsc src/*.js src/**/*.js --jsx react-jsx --declaration --allowJs --emitDeclarationOnly --skipLibCheck --declarationDir types",
     "build:src": "BABEL_ENV=cjs babel src -d build --root-mode upward",
-    "build:client": "BABEL_ENV=es babel src/client.js -d build --out-file-extension .mjs --root-mode upward",
+    "build:client": "BABEL_ENV=es babel src/client.js src/server.js src/webpack.client.js src/webpack.server.js -d build --out-file-extension .mjs --root-mode upward",
     "build:babel": "npm run build:src && npm run build:client",
-    "build:dev": "npm run build:babel && npm run copy && cd build && yarn && npm run syncpkg",
+    "build:dev": "npm run build:type && npm run build:babel && npm run copy && cd build && yarn && npm run syncpkg",
     "build": "npm run clean && npm run build:dev",
     "mochaFor": "mocha -r global-jsdom/register",
     "mocha": "npm run mochaFor -- 'build/{,!(node_modules)/**}/__tests__/*.js'",

packages/reshow-app/src/webpack.client.js

@@ -1,4 +1,5 @@
-import webpack from "webpack";
+// @ts-check
+
 import getResolve, { getResolveLoader } from "./webpack/getResolve";
 import getEntry from "./webpack/getEntry";
 import getOptimization from "./webpack/getOptimization";
@@ -13,11 +14,19 @@ import progress from "./webpack/progress";
 const { NODE_ENV, CONFIG, BUNDLE, HOT_UPDATE, ENABLE_SW } = process.env;
 const processConfs = CONFIG ? JSON.parse(CONFIG) : {};
 
+/**
+ * @param {string} root
+ * @param {Object<string,string>} main
+ * @param {Object<any, any>} lazyConfs
+ */
 const myWebpack = (root, main, lazyConfs) => {
   const confs = { assetsFolder: "/assets", ...processConfs, ...lazyConfs };
   const stop = progress({ confs });
   const path = root + confs.assetsFolder;
   let mode = DEVELOPMENT;
+  /**
+   * @type {string|boolean}
+   */
   let devtool = "cheap-source-map";
   if (PRODUCTION === NODE_ENV) {
     mode = PRODUCTION;
@@ -27,7 +36,7 @@ const myWebpack = (root, main, lazyConfs) => {
     ...getCache({ mode }),
     mode,
     devtool,
-    entry: getEntry({ root, main, confs }),
+    entry: getEntry({ root, main }),
     output: getOutput({ path, confs }),
     optimization: getOptimization({ mode, confs }),
     plugins: getPlugins({
@@ -44,9 +53,10 @@ const myWebpack = (root, main, lazyConfs) => {
     resolve: getResolve({ root, confs }),
     resolveLoader: getResolveLoader({ root }),
     externals: confs.externals,
+    devServer: undefined,
   };
   if (HOT_UPDATE) {
-    result.devServer = getHotServer({ root, confs });
+    result.devServer = /**@type any*/ (getHotServer({ root, confs }));
   }
   return result;
 };

packages/reshow-app/src/webpack/getEntry.js

@@ -1,8 +1,20 @@
-import fs from "fs";
+// @ts-check
 
-const isExists = (f) => fs.existsSync(f);
+import * as fs from "fs";
 
-const getEntry = ({ main, confs, root, server }) => {
+const isExists = (/**@type string*/ f) => fs.existsSync(f);
+
+/**
+ * @typedef {object} GetEntryProps
+ * @property {Object<string,string>} main
+ * @property {string} root
+ * @property {boolean=} server
+ */
+
+/**
+ * @param {GetEntryProps} props
+ */
+const getEntry = ({ main, root, server }) => {
   if (!main) {
     const entry = {};
     if (server) {

packages/reshow-app/src/webpack/getOptimization.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkschunks
  *
@@ -13,20 +15,33 @@ const getChunkConfig = ({ bustMode }) => ({
   reuseExistingChunk: true,
 });
 
+/**
+ * @param {Object<any,any>} chunkConfig
+ */
 const getVendor = (chunkConfig) => ({
   ...chunkConfig,
   test: /[\/]node_modules[\/]/,
   name: "vendor",
   priority: -20,
 });
 
+/**
+ * @param {Object<any,any>} chunkConfig
+ */
 const getLibVendor = (chunkConfig) => ({
   ...chunkConfig,
   test: /[\/]node_modules[\/](reshow|react-atomic|organism-react|ricon|class-lib|need-css|keyframe-css|easing-lib|hyphenate-style-name)/,
   name: "lib",
   priority: -10,
 });
 
+
+/**
+ * @param {object} props
+ * @param {string} props.mode
+ * @param {boolean=} props.server
+ * @param {Object<any, any>} props.confs
+ */
 const getOptimization = ({ mode, server, confs }) => {
   const chunkConfig = getChunkConfig(confs);
   const cacheGroups = {};

packages/reshow-app/src/webpack/getOutput.js

@@ -1,5 +1,15 @@
+// @ts-check
+
+/**
+ * @typedef {object} GetOutputProps
+ * @property {string} path 
+ * @property {Object<string,any>} confs
+ * @property {boolean=} server 
+ */
+
 /**
  * https://webpack.js.org/configuration/output/
+ * @param {GetOutputProps} props
  */
 const getOutput = ({ path, confs, server }) => {
   const output = {

packages/reshow-app/src/webpack/getPlugins.js

@@ -1,4 +1,6 @@
-import webpack from "webpack";
+// @ts-check
+
+import * as webpack from "webpack";
 import chalk from "chalk";
 
 import FinishPlugin from "./FinishPlugin";
@@ -12,8 +14,20 @@ import { PRODUCTION } from "./const";
 
 const { AggressiveMergingPlugin, LimitChunkCountPlugin } = webpack.optimize;
 const assetsStore = { current: null };
-const log = (s) => console.log(chalk.inverse(s));
+const log = (/**@type string*/ s) => console.log(chalk.inverse(s));
 
+/**
+ * @param {object} props
+ * @param {string} props.root
+ * @param {string} props.path
+ * @param {Function} props.stop
+ * @param {string} props.mode
+ * @param {string=} props.BUNDLE
+ * @param {string=} props.HOT_UPDATE
+ * @param {string=} props.ENABLE_SW
+ * @param {boolean=} props.server
+ * @param {Object<any, any>} props.confs
+ */
 const getPlugins = ({
   root,
   path,
@@ -26,16 +40,16 @@ const getPlugins = ({
   server,
 }) => {
   ENABLE_SW = ENABLE_SW || confs.swDebug || false;
-  const processEnv = { ENABLE_SW };
+  const processEnv = { ENABLE_SW: ENABLE_SW || "" };
   const plugins = [];
   if (root) {
     plugins.push(
       new webpack.ProvidePlugin({
         process: "process/browser.js",
         ReadableStream: require.resolve(
-          root + "/node_modules/reshow-app/webpack/ReadableStream",
+          root + "/node_modules/reshow-app/webpack/ReadableStream"
         ),
-      }),
+      })
     );
   }
   let maxChunks = confs.maxChunks;
@@ -44,7 +58,7 @@ const getPlugins = ({
   } else {
     plugins.push(
       getStatsJson({ assetsStore, path }),
-      new NginxPushPlugin(confs, assetsStore),
+      new NginxPushPlugin(confs, assetsStore)
     );
   }
   if (maxChunks != null) {
@@ -60,8 +74,7 @@ const getPlugins = ({
     plugins.push(
       new AggressiveMergingPlugin({
         minSizeReduce: 2,
-        moveToParents: true,
-      }),
+      })
     );
     processEnv.NODE_ENV = PRODUCTION;
   }
@@ -84,7 +97,7 @@ const getPlugins = ({
   }
   plugins.push(
     // https://webpack.js.org/plugins/environment-plugin/
-    new webpack.EnvironmentPlugin(processEnv),
+    new webpack.EnvironmentPlugin(processEnv)
   );
   return plugins;
 };

packages/reshow-app/types/client.d.ts

@@ -0,0 +1,5 @@
+export default client;
+declare function client(rawApp: any, { selector, serviceWorkerURL }?: {
+    selector?: string;
+    serviceWorkerURL: any;
+}): void;

packages/reshow-app/types/server.d.ts

@@ -0,0 +1,7 @@
+export default server;
+declare function server(app: any, renderTo?: string): ({ process, fs, JSON, Buffer }: {
+    process: any;
+    fs: any;
+    JSON: any;
+    Buffer: any;
+}) => void;