fix: fixed the problem of hot update error when VCF does not contain …

…style definition (#84)
vue-vine · Apr 26, 2024 · 4fd8212 · 4fd8212
1 parent 7fc18fb
commit 4fd8212
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 6 deletions.
diff --git a/packages/compiler/src/transform.ts b/packages/compiler/src/transform.ts
@@ -477,10 +477,10 @@ export function transformFile(
  }\n${
  showIf(
  Boolean(vineFileCtx.styleDefine[vineCompFnCtx.scopeId]),
- `__vine.__scopeId = 'data-v-${vineCompFnCtx.scopeId}';\n${
-  isDev ? `__vine.__hmrId = '${vineCompFnCtx.scopeId}';` : ''
- }\n`,
- )}${showIf(
+ `__vine.__scopeId = 'data-v-${vineCompFnCtx.scopeId}';`,
+ )}\n${
+ isDev ? `__vine.__hmrId = '${vineCompFnCtx.scopeId}';` : ''
+ }\n${showIf(
  // handle Web Component styles
  Boolean(vineCompFnCtx.isCustomElement),
  `__vine.styles = [__${vineCompFnCtx.fnName.toLowerCase()}_styles];\n`,

diff --git a/packages/compiler/tests/__snapshots__/transform.spec.ts.snap b/packages/compiler/tests/__snapshots__/transform.spec.ts.snap
@@ -1,5 +1,70 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`test transform > hmrId should be generated If there is no style 1`] = `
+"import {
+ createElementVNode as _createElementVNode,
+ openBlock as _openBlock,
+ createElementBlock as _createElementBlock,
+ pushScopeId as _pushScopeId,
+ popScopeId as _popScopeId,
+ defineComponent as _defineComponent,
+ useCssVars as _useCssVars,
+ unref as _unref,
+} from "vue";
+
+export const About = (() => {
+ const _withScopeId = (n) => (
+ _pushScopeId("data-v-ba945b60"), (n = n()), _popScopeId(), n
+ );
+ const _hoisted_1 = /*#__PURE__*/ _withScopeId(() =>
+ /*#__PURE__*/ _createElementVNode(
+ "h2",
+ null,
+ "About page",
+ -1 /* HOISTED */,
+ ),
+ );
+ const _hoisted_2 = [_hoisted_1];
+ const __vine = _defineComponent({
+ name: "About",
+ /* No props */
+ /* No emits */
+ setup(__props, { expose: __expose }) {
+ __expose();
+ const props = __props;
+ return (_ctx, _cache) => {
+ return _openBlock(), _createElementBlock("div", null, _hoisted_2);
+ };
+ },
+ });
+
+ __vine.__hmrId = "ba945b60";
+
+ return __vine;
+})();
+
+typeof __VUE_HMR_RUNTIME__ !== "undefined" &&
+ __VUE_HMR_RUNTIME__.createRecord(About.__hmrId, About);
+export const _rerender_only = false;
+export const _rerender_vcf_fn_name = "";
+import.meta.hot.accept((mod) => {
+ if (!mod) {
+ return;
+ }
+ const { _rerender_only, _rerender_vcf_fn_name } = mod;
+ if (!_rerender_vcf_fn_name) {
+ return;
+ }
+ const component = mod[_rerender_vcf_fn_name];
+ if (_rerender_only) {
+ __VUE_HMR_RUNTIME__.rerender(component.__hmrId, component.render);
+ } else {
+ __VUE_HMR_RUNTIME__.reload(component.__hmrId, component);
+ }
+});
+"
+`;
+
 exports[`test transform > inline mode output result 1`] = `
 "import { useDefaults as _useDefaults } from "vue-vine";
 import {

diff --git a/packages/compiler/tests/transform.spec.ts b/packages/compiler/tests/transform.spec.ts
@@ -114,4 +114,30 @@ describe('test transform', () => {
  expect(formated.includes('__hmrId')).toBe(false)
  expect(formated.includes('__VUE_HMR_RUNTIME__')).toBe(false)
  })
+
+ // #83
+ it('hmrId should be generated If there is no style', async () => {
+ const { mockCompilerCtx, mockCompilerHooks } = createMockTransformCtx({
+ envMode: 'development',
+ })
+ const testContent = `
+ export function About() {
+ return vine\`
+ <div>
+ <h2>About page</h2>
+ </div>
+ \`
+ }`
+ compileVineTypeScriptFile(testContent, 'testHMRContentOnNoStyle', mockCompilerHooks)
+ expect(mockCompilerCtx.vineCompileErrors.length).toBe(0)
+ const fileCtx = mockCompilerCtx.fileCtxMap.get('testHMRContentOnNoStyle')
+ const transformed = fileCtx?.fileMagicCode.toString() ?? ''
+ const formated = await format(
+ transformed,
+ { parser: 'babel-ts' },
+ )
+ expect(formated).toMatchSnapshot()
+ expect(formated.includes('__hmrId')).toBe(true)
+ expect(formated.includes('__VUE_HMR_RUNTIME__')).toBe(true)
+ })
 })
diff --git a/packages/vite-plugin/src/hot-update.ts b/packages/vite-plugin/src/hot-update.ts
@@ -63,8 +63,8 @@ function patchModule(
  const oCompFns = oVineCompFns[i]
  const nCompFnsTemplate = normalizeLineEndings(nCompFns.templateSource)
  const oCompFnsTemplate = normalizeLineEndings(oCompFns.templateSource)
- const nCompFnsStyle = normalizeLineEndings(nStyleDefine[nCompFns.scopeId].source)
- const oCompFnsStyle = normalizeLineEndings(oStyleDefine[oCompFns.scopeId].source)
+ const nCompFnsStyle = normalizeLineEndings(nStyleDefine[nCompFns.scopeId]?.source ?? '')
+ const oCompFnsStyle = normalizeLineEndings(oStyleDefine[oCompFns.scopeId]?.source ?? '')
  // 1. Get component function AST Node range for its code content
  const nCompFnCode = nOriginCode.substring(Number(nCompFns.fnItselfNode!.start), Number((nCompFns!.fnItselfNode!.end)))
  const oCompFnCode = oOriginCode.substring(Number(oCompFns.fnItselfNode!.start), Number((oCompFns!.fnItselfNode!.end)))