feat: update sourcemap of vue (#147)

* fix: update * fix: update * fix: fix type in js-plugin/vue * chore: add changeset --------- Co-authored-by: 余尚运 <[email protected]> Co-authored-by: Bright Wu <[email protected]>
farm-fe · Mar 30, 2023 · 3dfc64f · 3dfc64f
1 parent a402a03
commit 3dfc64f
Show file tree

Hide file tree

Showing 13 changed files with 238 additions and 142 deletions.
diff --git a/.changeset/afraid-emus-report.md b/.changeset/afraid-emus-report.md
@@ -0,0 +1,9 @@
+---
+'@farmfe/runtime-plugin-hmr': patch
+'@farmfe/runtime': patch
+'@farmfe/js-plugin-vue': patch
+'@farmfe/core': patch
+---
+
+1. Fix hmr does not update lazy compiled module
+2. Support sourcemap for Vue SFC
diff --git a/crates/plugin_lazy_compilation/src/dynamic_module.ts b/crates/plugin_lazy_compilation/src/dynamic_module.ts
@@ -51,7 +51,7 @@ if (compilingModules.has(modulePath)) {
  const queue = [...FarmModuleSystem.lazyCompilingQueue];
  FarmModuleSystem.lazyCompilingQueue = [];
 
- const url = '/__lazy_compile?paths=' + paths.join(',');
+ const url = '/__lazy_compile?paths=' + paths.join(',') + `&t=${Date.now()}`;
 
  promise = import(url).then((module: any) => {
  const result: LazyCompileResult = module.default;

diff --git a/cspell.json b/cspell.json
@@ -28,6 +28,7 @@
  "gnueabihf",
  "hashbrown",
  "hasher",
+ "jridgewell",
  "libfarmfe",
  "libloading",
  "loglevel",
@@ -47,6 +48,7 @@
  "querystring",
  "repr",
  "rkyv",
+ "rootpath",
  "Rspack",
  "Rustup",
  "sabi",

diff --git a/js-plugins/vue/package.json b/js-plugins/vue/package.json
@@ -34,7 +34,9 @@
  "@types/node": "^18.15.3"
  },
  "dependencies": {
- "@vue/compiler-sfc": "^3.2.47"
+ "@vue/compiler-sfc": "^3.2.47",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.17"
  },
  "peerDependencies": {
  "@farmfe/core": "^0.5.2"

diff --git a/js-plugins/vue/src/farm-vue-hmr.ts b/js-plugins/vue/src/farm-vue-hmr.ts
@@ -3,9 +3,13 @@ import {
  SFCScriptBlock,
  SFCTemplateBlock,
  SFCStyleBlock,
-} from "@vue/compiler-sfc";
-import { CacheDescriptor, QueryObj, StylesCodeCache } from "./farm-vue-types.js";
-import { genMainCode } from "./generatorCode.js";
+} from '@vue/compiler-sfc';
+import {
+ CacheDescriptor,
+ QueryObj,
+ StylesCodeCache,
+} from './farm-vue-types.js';
+import { genMainCode } from './generatorCode.js';
 
 export const cacheScript = new WeakMap();
 
@@ -58,7 +62,7 @@ function diffDescriptor(
  _rerender_only = true;
  }
 
- const { source, moduleType } = genMainCode(
+ const { source, moduleType, map } = genMainCode(
  descriptor,
  stylesCodeCache,
  resolvedPath,
@@ -68,7 +72,7 @@ function diffDescriptor(
  addStyles
  );
 
- return { source, moduleType };
+ return { source, moduleType, map };
 }
 
 function hasStyleChanged(prev: SFCStyleBlock[], next: SFCStyleBlock[]) {
@@ -114,7 +118,7 @@ function hasScriptChanged(prev: SFCDescriptor, next: SFCDescriptor) {
  return true;
  }
  //If cssVars changed,it means that script changed
- if (prev.cssVars.join("") !== next.cssVars.join("")) {
+ if (prev.cssVars.join('') !== next.cssVars.join('')) {
  return true;
  }
  const prevResolvedScript = cacheScript.get(prev);

diff --git a/js-plugins/vue/src/farm-vue-plugin.ts b/js-plugins/vue/src/farm-vue-plugin.ts
@@ -1,19 +1,20 @@
 import fs from 'fs';
-import path from 'path';
 import { parse } from '@vue/compiler-sfc';
 import { JsPlugin } from '@farmfe/core';
 import { handleHmr } from './farm-vue-hmr.js';
-import { StylesCodeCache, CacheDescriptor, LessStatic } from './farm-vue-types.js';
+import {
+ StylesCodeCache,
+ CacheDescriptor,
+ LessStatic,
+} from './farm-vue-types.js';
 import { genMainCode } from './generatorCode.js';
-import { error } from './utils.js';
+import { callWithErrorHandle, error } from './utils.js';
 
 //apply style langs
 type ApplyStyleLangs = ['less'];
 
 const stylesCodeCache: StylesCodeCache = {};
 const applyStyleLangs = ['less'];
-const VueRegExp = /.vue$/;
-const JsOrTsExp = /.(ts|js)$/;
 const cacheDescriptor: CacheDescriptor = {};
 
 export default function farmVuePlugin(options: object = {}): JsPlugin {
@@ -22,6 +23,28 @@ export default function farmVuePlugin(options: object = {}): JsPlugin {
  return {
  name: 'farm-vue-plugin',
  load: {
+ filters: {
+ resolvedPaths: ['.vue$'],
+ },
+ async executor(params, ctx) {
+ const { resolvedPath } = params;
+ let source = '';
+ try {
+ source = await fs.promises.readFile(resolvedPath, 'utf-8');
+ } catch (err) {
+ error({
+ id: resolvedPath,
+ message: "path is not right,can't readFile",
+ });
+ }
+ return {
+ content: source,
+ moduleType: 'ts',
+ };
+ },
+ },
+ // add hmr code In root file
+ transform: {
  filters: {
  resolvedPaths: ['.vue$'],
  },
@@ -31,38 +54,29 @@ export default function farmVuePlugin(options: object = {}): JsPlugin {
  query[key] = value;
  });
  const { vue, lang, hash } = query;
- const { resolvedPath } = params;
- const extname = path.extname(resolvedPath);
+ const { resolvedPath, content: source } = params;
  //handle .vue file
- if (VueRegExp.test(extname)) {
- if (vue === 'true' && hash) {
- let styleCode = stylesCodeCache[hash];
- //if lang is not "css",use preProcessor to handle
- if (applyStyleLangs.includes(lang)) {
- const { css } = await preProcession(styleCode, lang);
- styleCode = css;
- }
- return {
- content: typeof styleCode === 'string' ? styleCode : '',
- moduleType: 'css',
- };
- }
- let source = '';
- try {
- source = await fs.promises.readFile(resolvedPath, 'utf-8');
- } catch (err) {
- error({
- id: resolvedPath,
- message: "path is not right,can't readFile",
- });
+ if (vue === 'true' && hash) {
+ let styleCode = stylesCodeCache[hash];
+ //if lang is not "css",use preProcessor to handle
+ if (applyStyleLangs.includes(lang)) {
+ const { css } = await preProcession(styleCode, lang);
+ styleCode = css;
  }
- try {
- parse(source);
- } catch (e) {
- console.log(e);
- }
- const { descriptor } = parse(source);
+ return {
+ content: typeof styleCode === 'string' ? styleCode : '',
+ moduleType: 'css',
+ };
+ }
 
+ //transform vue
+ const result = callWithErrorHandle<null, typeof parse, [string]>(
+ this,
+ parse,
+ [source]
+ );
+ if (result) {
+ const { descriptor } = result;
  const isHmr = handleHmr(
  cacheDescriptor,
  descriptor,
@@ -71,19 +85,24 @@ export default function farmVuePlugin(options: object = {}): JsPlugin {
  resolvedPath
  );
  if (isHmr)
- return { content: isHmr.source, moduleType: isHmr.moduleType };
-
- const { source: mainCode, moduleType } = genMainCode(
- descriptor,
- stylesCodeCache,
- resolvedPath
- );
+ return {
+ content: isHmr.source,
+ moduleType: isHmr.moduleType,
+ sourceMap: isHmr.map,
+ };
 
+ const {
+ source: mainCode,
+ moduleType,
+ map,
+ } = genMainCode(descriptor, stylesCodeCache, resolvedPath);
  return {
  content: mainCode,
  moduleType,
+ sourceMap: map,
  };
  }
+
  //default
  else {
  console.error(
@@ -95,14 +114,6 @@ export default function farmVuePlugin(options: object = {}): JsPlugin {
  moduleType: 'js',
  };
  }
- },
- },
- // add hmr code In root file
- transform: {
- filters: {
- resolvedPaths: ['.html$'],
- },
- executor(params, ctx) {
  return {
  content: params.content,
  moduleType: params.moduleType,

diff --git a/js-plugins/vue/src/farm-vue-types.ts b/js-plugins/vue/src/farm-vue-types.ts
@@ -18,7 +18,7 @@ export declare namespace Less {
  rewriteUrls?: boolean | undefined;
  filename: string;
  relativeUrls: boolean;
- rootPath: string;
+ rootpath: string;
  currentDirectory: string;
  entryPath: string;
  rootFilename: string;
@@ -121,7 +121,7 @@ export declare namespace Less {
  interface SourceMapOption {
  sourceMapURL?: string | undefined;
  sourceMapBasepath?: string | undefined;
- sourceMapRootPath?: string | undefined;
+ sourceMapRootpath?: string | undefined;
  outputSourceFiles?: boolean | undefined;
  sourceMapFileInline?: boolean | undefined;
  }
@@ -162,8 +162,8 @@ export declare namespace Less {
  /** Whether output file information and line numbers in compiled CSS code. */
  dumpLineNumbers?: 'comment' | string | undefined;
  /** Add a path to every generated import and url in output css files. */
- rootPath?: string | undefined;
- /** Math mode options for avoiding symbol conflicts on math expressions. */
+ rootpath?: string | undefined;
+ /** Math mode options for avoiding symbol confects on math expressions. */
  math?:
  | 'always'
  | 'strict'
@@ -258,3 +258,5 @@ export interface LessStatic {
  FileManager: typeof Less.FileManager;
  PluginManager: typeof Less.PluginManager;
 }
+
+export type Union<A, B> = A & B;