feat: WIP

vueComponent · Jan 16, 2021 · b94ff9d · b94ff9d
1 parent 2ac92f0
commit b94ff9d
Show file tree

Hide file tree

Showing 14 changed files with 4,355 additions and 90 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 天泽
+Copyright (c) 2020 Chengzhang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/example/A.jsx b/example/A.jsx
@@ -0,0 +1 @@
+export default () => <div>23411dd</div>;
diff --git a/example/App.jsx b/example/App.jsx
@@ -0,0 +1,24 @@
+import { defineComponent } from 'vue';
+import A from './A';
+import { B } from './B';
+
+const App = defineComponent({
+  data() {
+    return {
+      a: 1
+    }
+  },
+  render() {
+    const { a } = this;
+    return (
+      <>
+        {a}
+        <div onClick={() => { this.a++; }}>Hello World!</div>
+        <A />
+        <B />
+      </>
+    )
+  }
+});
+
+export default App;
diff --git a/example/B.jsx b/example/B.jsx
@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue';
+
+const B = defineComponent({
+  data() {
+    return {
+      a: 1
+    }
+  },
+  render() {
+    const { a } = this;
+    return (
+      <>
+        <div onClick={() => { this.a++; }}>{a}d4s</div>
+        <span>2</span>
+      </>
+    );
+  }
+});
+
+export {
+  B
+};
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App';
+
+createApp(App).mount('#app');
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require("path");
+
+const babelConfig = {
+  plugins: ["@vue/babel-plugin-jsx"],
+};
+
+module.exports = {
+  mode: "development",
+  entry: {
+    app: path.resolve(__dirname, "./index.js"),
+  },
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    publicPath: "/dist/",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: babelConfig,
+          },
+          "vue-jsx-hot-loader",
+        ],
+      },
+    ],
+  },
+  devServer: {
+    historyApiFallback: true,
+    hot: true,
+    open: true,
+  },
+  resolve: {
+    extensions: [".jsx", ".js"],
+  },
+  resolveLoader: {
+    alias: {
+      "vue-jsx-hot-loader": require.resolve("../"),
+    },
+  },
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="/dist/app.js"></script>
+</body>
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'ts-jest',
+  testTimeout: 30000,
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/node_modules/'],
+}
diff --git a/package.json b/package.json
@@ -3,7 +3,14 @@
   "version": "1.0.0",
   "description": "Tweak Vue components written in JSX in real time.",
   "main": "dist/index.js",
-  "scripts": {},
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "test": "jest --coverage",
+    "dev-example": "webpack-dev-server --config example/webpack.config.js",
+    "prepublishOnly": "tsc"
+  },
   "files": [
     "dist"
   ],
@@ -26,11 +33,19 @@
     "@babel/parser": "^7.0.0",
     "@babel/traverse": "^7.0.0",
     "hash-sum": "^2.0.0",
-    "loader-utils": "^2.0.0"
+    "loader-utils": "^2.0.0",
+    "lodash-es": "^4.17.20"
   },
   "devDependencies": {
-    "@types/webpack": "^4.41.22",
+    "@babel/core": "^7.12.10",
+    "@types/loader-utils": "^2.0.1",
+    "@vue/babel-plugin-jsx": "^1.0.0",
+    "babel-loader": "^8.2.2",
+    "jest": "^26.6.3",
     "typescript": "^4.0.3",
-    "webpack": "^4.44.2"
+    "vue": "^3.0.5",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.0.0",
+    "webpack-dev-server": "^3.11.1"
   }
 }
diff --git a/src/hotReload.ts b/src/hotReload.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,12 +1,128 @@
-import webpack from 'webpack';
-import * as parser from "@babel/parser";
-import traverse from "@babel/traverse";
+import * as webpack from 'webpack';
+import hash from 'hash-sum';
+import * as path from 'path';
+import * as loaderUtils from 'loader-utils';
+import * as t from '@babel/types';
+import traverse from '@babel/traverse';
+import { File } from '@babel/types'
+import { parse } from "@babel/parser";
+import { isDefineComponentCall, parseComponentDecls } from './utils';
+
+const hasJSX = (file: File) => {
+  let fileHasJSX = false;
+  traverse(file, {
+    JSXElement(path) {
+      fileHasJSX = true;
+      path.stop();
+    },
+    JSXFragment(path) {
+      fileHasJSX = true;
+      path.stop();
+    },
+  });
+
+  return fileHasJSX;
+};
 
 export default function loader(
   this: webpack.loader.LoaderContext,
-  source: string
-): string {
+  source: string,
+  sourceMap: string
+) {
   const loaderContext = this;
-
-  return source;
+  loaderContext.cacheable?.();
+  const isDev = process.env.NODE_ENV === 'development';
+
+  if (isDev) {
+    loaderContext.callback(null, source, sourceMap);
+  }
+
+  const file = parse(source, { sourceType: 'module', plugins: ['jsx', 'typescript'] });
+
+  if (!hasJSX(file)) {
+    loaderContext.callback(null, source, sourceMap);
+    return;
+  }
+
+  const webpackRemainingChain = loaderUtils.getRemainingRequest(loaderContext).split('!');
+  const fullPath = webpackRemainingChain[webpackRemainingChain.length - 1];
+  const filename = path.relative(process.cwd(), fullPath);
+
+  const declaredComponents: { name: string }[] = [];
+  const hotComponents: {
+    local: string;
+    id: string;
+  }[] = [];
+  let defaultIdentifier: t.Identifier | null = null;
+
+  traverse(file, {
+    VariableDeclaration(nodePath) {
+      declaredComponents.push(...parseComponentDecls(nodePath.node));
+    },
+    ExportNamedDeclaration(nodePath) {
+      const { specifiers = [], declaration } = nodePath.node;
+      if (t.isVariableDeclaration(declaration)) {
+        hotComponents.push(...parseComponentDecls(declaration).map(({ name }) => ({
+          local: name,
+          id: hash(`${filename}-${name}`),
+        })));
+      } else if (specifiers.length) {
+        for (const spec of specifiers) {
+          if (t.isExportSpecifier(spec) && t.isIdentifier(spec.exported)) {
+            if (declaredComponents.find(d => d.name === spec.local.name)) {
+              hotComponents.push({
+                local: spec.local.name,
+                id: hash(`${filename}-${spec.exported.name}`)
+              });
+            }
+          }
+        }
+      }
+    },
+    ExportDefaultDeclaration(nodePath) {
+      const { declaration } = nodePath.node;
+      if (t.isIdentifier(declaration)) {
+        if (declaredComponents.find(d => d.name === declaration.name)) {
+          hotComponents.push({
+            local: declaration.name,
+            id: hash(`${filename}-default`)
+          })
+        }
+      } else if (isDefineComponentCall(declaration)) {
+        defaultIdentifier = nodePath.scope.generateUidIdentifier('default')
+        hotComponents.push({
+          local: defaultIdentifier.name,
+          id: hash(`${filename}-default`)
+        });
+      }
+    }
+  });
+
+  if (hotComponents.length) {
+    if (defaultIdentifier) {
+      const { name } = defaultIdentifier as t.Identifier;
+      source.replace(
+        /export default defineComponent/g,
+        `const ${name} = defineComponent`
+      ) + `\nexport default ${name}`
+    }
+
+    let callbackCode = '';
+    for (const { local, id } of hotComponents) {
+      source +=
+        `\n${local}.__hmrId = '${id}'` +
+        `\n__VUE_HMR_RUNTIME__.createRecord('${id}', ${local})`
+      callbackCode += `\n__VUE_HMR_RUNTIME__.reload("${id}", ${local})`
+    }
+
+    source += `
+    /* hot reload */
+    if (module.hot) {
+      module.hot.accept()
+      ${callbackCode}
+    }
+    `
+  }
+
+  loaderContext.callback(null, source, sourceMap);
 };
diff --git a/src/shim.d.ts b/src/shim.d.ts
@@ -0,0 +1 @@
+declare module 'hash-sum'
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,5 +1,19 @@
-export function isFuntionalComponent(
-  code: string
-): boolean {
-  return !!code;
+import { Node } from '@babel/core';
+import * as t from '@babel/types';
+
+export function isDefineComponentCall(node?: Node | null) {
+  return t.isCallExpression(node) && t.isIdentifier(node.callee) && node.callee.name === 'defineComponent';
+}
+
+export function parseComponentDecls(node: t.VariableDeclaration) {
+  const names = [];
+  for (const decl of node.declarations) {
+    if (t.isIdentifier(decl.id) && isDefineComponentCall(decl.init)) {
+      names.push({
+        name: decl.id.name
+      });
+    }
+  }
+
+  return names;
 }