feat: WIP

Author: Amour1688

examples/index.js

@@ -0,0 +1,2 @@
+import { createApp } from 'vue';
+

package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "Tweak Vue components written in JSX in real time.",
   "main": "dist/index.js",
-  "scripts": {},
+  "scripts": {
+    "build": "tsc"
+  },
   "files": [
     "dist"
   ],
@@ -24,13 +26,20 @@
   "homepage": "https://github.com/Amour1688/vue-jsx-hot-loader#readme",
   "dependencies": {
     "@babel/parser": "^7.0.0",
+    "@babel/template": "^7.0.0",
     "@babel/traverse": "^7.0.0",
     "hash-sum": "^2.0.0",
     "loader-utils": "^2.0.0"
   },
   "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-dev-server": "^3.11.1"
   }
 }

src/index.ts

@@ -1,12 +1,36 @@
-import webpack from 'webpack';
+import * as webpack from 'webpack';
+import * as hash from 'hash-sum';
+import * as path from 'path';
+import * as loaderUtils from 'loader-utils';
 import * as parser from "@babel/parser";
 import traverse from "@babel/traverse";
 
 export default function loader(
   this: webpack.loader.LoaderContext,
-  source: string
-): string {
+  source: string,
+  sourceMap: string
+) {
   const loaderContext = this;
-  
-  return source;
+
+  loaderContext.cacheable?.();
+  const webpackRemainingChain = loaderUtils.getRemainingRequest(loaderContext).split('!');
+  const fullPath = webpackRemainingChain[webpackRemainingChain.length - 1];
+  const filename = path.relative(process.cwd(), fullPath);
+  const hotId = hash(fullPath);
+
+  loaderContext.callback(
+    null,
+    `${source}
+/* hot reload */
+if (module.hot) {
+  script.__hmrId = "${hotId}"
+  const api = __VUE_HMR_RUNTIME__
+  module.hot.accept()
+  if (!api.createRecord('${hotId}')) {
+    api.reload('${hotId}', script)
+  }
+}
+    `,
+    sourceMap
+  );
 };

src/shim.d.ts

@@ -0,0 +1 @@
+declare module 'hash-sum'

webpack.config.js

@@ -0,0 +1,21 @@
+const babelConfig = {
+  plugins: [
+    '@vue/babel-plugin-jsx'
+  ],
+}
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    app: './examples/index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        options: babelConfig,
+      }
+    ],
+  },
+};