From f82fa5f05c67b775041f07b39c3761fd792db0c6 Mon Sep 17 00:00:00 2001 From: wjq990112 <1163585385@qq.com> Date: Fri, 19 Jul 2024 21:06:08 +0800 Subject: [PATCH 1/3] fix(#66): signals as refs --- playground/pnpm-lock.yaml | 8 +- playground/src/App.tsx | 3 +- pnpm-lock.yaml | 8 +- src/babel/core/transform-jsx.ts | 20 +++- tests/client/__snapshots__/esm.test.ts.snap | 110 ++++++++++++++++++++ tests/client/esm.test.ts | 53 ++++++++++ 6 files changed, 188 insertions(+), 14 deletions(-) diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml index d2d672d..2cea5c5 100644 --- a/playground/pnpm-lock.yaml +++ b/playground/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: solid-js: specifier: link:../node_modules/solid-js @@ -1934,3 +1930,7 @@ packages: /yallist@4.0.0: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/playground/src/App.tsx b/playground/src/App.tsx index 31376df..a651728 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -2,6 +2,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'; export function App() { const [count, setCount] = createSignal(0); + const [, setEl] = createSignal(); function increment() { setCount(c => c + 1); @@ -19,7 +20,7 @@ export function App() { return ( <> -

Count: {count()}

+

Count: {count()}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2251ed4..391d7f4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@babel/generator': specifier: ^7.23.6 @@ -1666,3 +1662,7 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/src/babel/core/transform-jsx.ts b/src/babel/core/transform-jsx.ts index 70dabec..8f19e4c 100644 --- a/src/babel/core/transform-jsx.ts +++ b/src/babel/core/transform-jsx.ts @@ -77,6 +77,10 @@ function extractJSXExpressionFromRef( let replacement: t.Expression; if (unwrappedIdentifier) { const arg = expr.scope.generateUidIdentifier('arg'); + const binding = expr.scope.getBinding(unwrappedIdentifier.name); + const cannotAssignKind = ['const', 'module']; + const isConst = binding && cannotAssignKind.includes(binding.kind); + replacement = t.arrowFunctionExpression( [arg], t.blockStatement([ @@ -91,11 +95,17 @@ function extractJSXExpressionFromRef( t.callExpression(unwrappedIdentifier, [arg]), ), ]), - t.blockStatement([ - t.expressionStatement( - t.assignmentExpression('=', unwrappedIdentifier, arg), - ), - ]), + // fix the new usage of `ref` attribute, + // if use `Signals as refs`, the `else` branch will throw an errow with `Cannot assign to "setter" because it is a constant` message + // issue: https://github.com/solidjs/solid-refresh/issues/66 + // docs: https://docs.solidjs.com/concepts/refs#signals-as-refs + isConst + ? null + : t.blockStatement([ + t.expressionStatement( + t.assignmentExpression('=', unwrappedIdentifier, arg), + ), + ]), ), ]), ); diff --git a/tests/client/__snapshots__/esm.test.ts.snap b/tests/client/__snapshots__/esm.test.ts.snap index b0c5ec2..cbc3f91 100644 --- a/tests/client/__snapshots__/esm.test.ts.snap +++ b/tests/client/__snapshots__/esm.test.ts.snap @@ -1130,6 +1130,116 @@ if (import.meta.hot) { }" `; +exports[`esm (client, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (client, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (client, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + exports[`esm (client, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client/esm.test.ts b/tests/client/esm.test.ts index 841c019..c6a38ef 100644 --- a/tests/client/esm.test.ts +++ b/tests/client/esm.test.ts @@ -810,4 +810,57 @@ describe('esm (client, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); From c651684b7ada55aadae76c1125cd8b5128e21a6f Mon Sep 17 00:00:00 2001 From: wjq990112 <1163585385@qq.com> Date: Fri, 19 Jul 2024 21:06:20 +0800 Subject: [PATCH 2/3] chore: improve test cases --- .../__snapshots__/esm.test.ts.snap | 113 ++++++++++++++++++ .../__snapshots__/rspack-esm.test.ts.snap | 113 ++++++++++++++++++ .../__snapshots__/standard.test.ts.snap | 113 ++++++++++++++++++ .../__snapshots__/vite.test.ts.snap | 113 ++++++++++++++++++ .../__snapshots__/webpack5.test.ts.snap | 113 ++++++++++++++++++ tests/client-hydratable/esm.test.ts | 53 ++++++++ tests/client-hydratable/rspack-esm.test.ts | 53 ++++++++ tests/client-hydratable/standard.test.ts | 53 ++++++++ tests/client-hydratable/vite.test.ts | 53 ++++++++ tests/client-hydratable/webpack5.test.ts | 53 ++++++++ .../__snapshots__/rspack-esm.test.ts.snap | 110 +++++++++++++++++ .../__snapshots__/standard.test.ts.snap | 110 +++++++++++++++++ tests/client/__snapshots__/vite.test.ts.snap | 110 +++++++++++++++++ .../__snapshots__/webpack5.test.ts.snap | 110 +++++++++++++++++ tests/client/rspack-esm.test.ts | 53 ++++++++ tests/client/standard.test.ts | 53 ++++++++ tests/client/vite.test.ts | 53 ++++++++ tests/client/webpack5.test.ts | 53 ++++++++ .../__snapshots__/esm.test.ts.snap | 95 +++++++++++++++ .../__snapshots__/rspack-esm.test.ts.snap | 95 +++++++++++++++ .../__snapshots__/standard.test.ts.snap | 95 +++++++++++++++ .../__snapshots__/vite.test.ts.snap | 95 +++++++++++++++ .../__snapshots__/webpack5.test.ts.snap | 95 +++++++++++++++ tests/server-hydratable/esm.test.ts | 53 ++++++++ tests/server-hydratable/rspack-esm.test.ts | 53 ++++++++ tests/server-hydratable/standard.test.ts | 53 ++++++++ tests/server-hydratable/vite.test.ts | 53 ++++++++ tests/server-hydratable/webpack5.test.ts | 53 ++++++++ tests/server/__snapshots__/esm.test.ts.snap | 92 ++++++++++++++ .../__snapshots__/rspack-esm.test.ts.snap | 92 ++++++++++++++ .../__snapshots__/standard.test.ts.snap | 92 ++++++++++++++ tests/server/__snapshots__/vite.test.ts.snap | 92 ++++++++++++++ .../__snapshots__/webpack5.test.ts.snap | 92 ++++++++++++++ tests/server/esm.test.ts | 53 ++++++++ tests/server/rspack-esm.test.ts | 53 ++++++++ tests/server/standard.test.ts | 53 ++++++++ tests/server/vite.test.ts | 53 ++++++++ tests/server/webpack5.test.ts | 53 ++++++++ 38 files changed, 2947 insertions(+) diff --git a/tests/client-hydratable/__snapshots__/esm.test.ts.snap b/tests/client-hydratable/__snapshots__/esm.test.ts.snap index ad2dd8c..fc0aa6d 100644 --- a/tests/client-hydratable/__snapshots__/esm.test.ts.snap +++ b/tests/client-hydratable/__snapshots__/esm.test.ts.snap @@ -1170,6 +1170,119 @@ if (import.meta.hot) { }" `; +exports[`esm (client, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (client, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (client, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + exports[`esm (client, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client-hydratable/__snapshots__/rspack-esm.test.ts.snap b/tests/client-hydratable/__snapshots__/rspack-esm.test.ts.snap index 43d2ba5..86720d2 100644 --- a/tests/client-hydratable/__snapshots__/rspack-esm.test.ts.snap +++ b/tests/client-hydratable/__snapshots__/rspack-esm.test.ts.snap @@ -1170,6 +1170,119 @@ if (import.meta.webpackHot) { }" `; +exports[`rspack-esm (client, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (client, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (client, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`rspack-esm (client, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client-hydratable/__snapshots__/standard.test.ts.snap b/tests/client-hydratable/__snapshots__/standard.test.ts.snap index 620a9e3..927db6f 100644 --- a/tests/client-hydratable/__snapshots__/standard.test.ts.snap +++ b/tests/client-hydratable/__snapshots__/standard.test.ts.snap @@ -1170,6 +1170,119 @@ if (module.hot) { }" `; +exports[`standard (client, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (client, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (client, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + exports[`standard (client, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client-hydratable/__snapshots__/vite.test.ts.snap b/tests/client-hydratable/__snapshots__/vite.test.ts.snap index fd4602d..0939235 100644 --- a/tests/client-hydratable/__snapshots__/vite.test.ts.snap +++ b/tests/client-hydratable/__snapshots__/vite.test.ts.snap @@ -1165,6 +1165,119 @@ if (import.meta.hot) { }" `; +exports[`vite (client, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (client, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (client, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + exports[`vite (client, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; // @refresh reload diff --git a/tests/client-hydratable/__snapshots__/webpack5.test.ts.snap b/tests/client-hydratable/__snapshots__/webpack5.test.ts.snap index a5d892f..0f969a6 100644 --- a/tests/client-hydratable/__snapshots__/webpack5.test.ts.snap +++ b/tests/client-hydratable/__snapshots__/webpack5.test.ts.snap @@ -1170,6 +1170,119 @@ if (import.meta.webpackHot) { }" `; +exports[`webpack5 (client, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (client, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (client, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { getNextElement as _$getNextElement } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _$getNextElement(_tmpl$); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`webpack5 (client, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client-hydratable/esm.test.ts b/tests/client-hydratable/esm.test.ts index 4e3d4b8..b2b9240 100644 --- a/tests/client-hydratable/esm.test.ts +++ b/tests/client-hydratable/esm.test.ts @@ -810,4 +810,57 @@ describe('esm (client, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client-hydratable/rspack-esm.test.ts b/tests/client-hydratable/rspack-esm.test.ts index ecd0c64..a265e1c 100644 --- a/tests/client-hydratable/rspack-esm.test.ts +++ b/tests/client-hydratable/rspack-esm.test.ts @@ -810,4 +810,57 @@ describe('rspack-esm (client, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'rspack-esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'rspack-esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'rspack-esm', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client-hydratable/standard.test.ts b/tests/client-hydratable/standard.test.ts index af74e9f..b03423c 100644 --- a/tests/client-hydratable/standard.test.ts +++ b/tests/client-hydratable/standard.test.ts @@ -810,4 +810,57 @@ describe('standard (client, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'standard', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'standard', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'standard', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client-hydratable/vite.test.ts b/tests/client-hydratable/vite.test.ts index 9cd757f..5de1ca1 100644 --- a/tests/client-hydratable/vite.test.ts +++ b/tests/client-hydratable/vite.test.ts @@ -810,4 +810,57 @@ describe('vite (client, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'vite', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'vite', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'vite', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client-hydratable/webpack5.test.ts b/tests/client-hydratable/webpack5.test.ts index 8f88154..1286338 100644 --- a/tests/client-hydratable/webpack5.test.ts +++ b/tests/client-hydratable/webpack5.test.ts @@ -810,4 +810,57 @@ describe('webpack5 (client, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'webpack5', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'webpack5', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'webpack5', + 'client', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client/__snapshots__/rspack-esm.test.ts.snap b/tests/client/__snapshots__/rspack-esm.test.ts.snap index 3d5acf0..b7e5334 100644 --- a/tests/client/__snapshots__/rspack-esm.test.ts.snap +++ b/tests/client/__snapshots__/rspack-esm.test.ts.snap @@ -1130,6 +1130,116 @@ if (import.meta.webpackHot) { }" `; +exports[`rspack-esm (client, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (client, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (client, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`rspack-esm (client, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client/__snapshots__/standard.test.ts.snap b/tests/client/__snapshots__/standard.test.ts.snap index bae977e..f5de467 100644 --- a/tests/client/__snapshots__/standard.test.ts.snap +++ b/tests/client/__snapshots__/standard.test.ts.snap @@ -1130,6 +1130,116 @@ if (module.hot) { }" `; +exports[`standard (client, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (client, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (client, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + exports[`standard (client, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client/__snapshots__/vite.test.ts.snap b/tests/client/__snapshots__/vite.test.ts.snap index ca9dbc6..ff297dc 100644 --- a/tests/client/__snapshots__/vite.test.ts.snap +++ b/tests/client/__snapshots__/vite.test.ts.snap @@ -1125,6 +1125,116 @@ if (import.meta.hot) { }" `; +exports[`vite (client, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (client, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (client, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + exports[`vite (client, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; // @refresh reload diff --git a/tests/client/__snapshots__/webpack5.test.ts.snap b/tests/client/__snapshots__/webpack5.test.ts.snap index d9fe7c1..4f5bad9 100644 --- a/tests/client/__snapshots__/webpack5.test.ts.snap +++ b/tests/client/__snapshots__/webpack5.test.ts.snap @@ -1130,6 +1130,116 @@ if (import.meta.webpackHot) { }" `; +exports[`webpack5 (client, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (client, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (client, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { template as _$template } from "solid-js/web"; +import { createComponent as _$createComponent } from "solid-js/web"; +import { use as _$use } from "solid-js/web"; +var _tmpl$ = /*#__PURE__*/_$template(\`
Comp\`); +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/(() => { + var _el$ = _tmpl$(); + var _ref$ = _props.v0; + typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$; + return _el$; +})(), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`webpack5 (client, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/client/rspack-esm.test.ts b/tests/client/rspack-esm.test.ts index b38e94f..ead438c 100644 --- a/tests/client/rspack-esm.test.ts +++ b/tests/client/rspack-esm.test.ts @@ -810,4 +810,57 @@ describe('rspack-esm (client, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'rspack-esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'rspack-esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'rspack-esm', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client/standard.test.ts b/tests/client/standard.test.ts index 363524c..f076189 100644 --- a/tests/client/standard.test.ts +++ b/tests/client/standard.test.ts @@ -810,4 +810,57 @@ describe('standard (client, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'standard', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'standard', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'standard', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client/vite.test.ts b/tests/client/vite.test.ts index 997535a..e581070 100644 --- a/tests/client/vite.test.ts +++ b/tests/client/vite.test.ts @@ -810,4 +810,57 @@ describe('vite (client, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'vite', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'vite', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'vite', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/client/webpack5.test.ts b/tests/client/webpack5.test.ts index d3e8109..29cde94 100644 --- a/tests/client/webpack5.test.ts +++ b/tests/client/webpack5.test.ts @@ -810,4 +810,57 @@ describe('webpack5 (client, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'webpack5', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'webpack5', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'webpack5', + 'client', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server-hydratable/__snapshots__/esm.test.ts.snap b/tests/server-hydratable/__snapshots__/esm.test.ts.snap index 0ede7b9..8049896 100644 --- a/tests/server-hydratable/__snapshots__/esm.test.ts.snap +++ b/tests/server-hydratable/__snapshots__/esm.test.ts.snap @@ -1150,6 +1150,101 @@ if (import.meta.hot) { }" `; +exports[`esm (server, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (server, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (server, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + exports[`esm (server, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server-hydratable/__snapshots__/rspack-esm.test.ts.snap b/tests/server-hydratable/__snapshots__/rspack-esm.test.ts.snap index 0ede7b9..f6e50cb 100644 --- a/tests/server-hydratable/__snapshots__/rspack-esm.test.ts.snap +++ b/tests/server-hydratable/__snapshots__/rspack-esm.test.ts.snap @@ -1150,6 +1150,101 @@ if (import.meta.hot) { }" `; +exports[`esm (server, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`esm (server, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`esm (server, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`esm (server, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server-hydratable/__snapshots__/standard.test.ts.snap b/tests/server-hydratable/__snapshots__/standard.test.ts.snap index 759d14b..e5f457e 100644 --- a/tests/server-hydratable/__snapshots__/standard.test.ts.snap +++ b/tests/server-hydratable/__snapshots__/standard.test.ts.snap @@ -1150,6 +1150,101 @@ if (module.hot) { }" `; +exports[`standard (server, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (server, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (server, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + exports[`standard (server, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server-hydratable/__snapshots__/vite.test.ts.snap b/tests/server-hydratable/__snapshots__/vite.test.ts.snap index a1cab6c..7a5f512 100644 --- a/tests/server-hydratable/__snapshots__/vite.test.ts.snap +++ b/tests/server-hydratable/__snapshots__/vite.test.ts.snap @@ -1145,6 +1145,101 @@ if (import.meta.hot) { }" `; +exports[`vite (server, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (server, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (server, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + exports[`vite (server, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; // @refresh reload diff --git a/tests/server-hydratable/__snapshots__/webpack5.test.ts.snap b/tests/server-hydratable/__snapshots__/webpack5.test.ts.snap index 068bb16..ddbff53 100644 --- a/tests/server-hydratable/__snapshots__/webpack5.test.ts.snap +++ b/tests/server-hydratable/__snapshots__/webpack5.test.ts.snap @@ -1150,6 +1150,101 @@ if (import.meta.webpackHot) { }" `; +exports[`webpack5 (server, hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (server, hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (server, hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +import { ssrHydrationKey as _$ssrHydrationKey } from "solid-js/web"; +var _tmpl$ = ["Comp
"]; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$, _$ssrHydrationKey()), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`webpack5 (server, hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server-hydratable/esm.test.ts b/tests/server-hydratable/esm.test.ts index 95e8676..1f55074 100644 --- a/tests/server-hydratable/esm.test.ts +++ b/tests/server-hydratable/esm.test.ts @@ -810,4 +810,57 @@ describe('esm (server, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server-hydratable/rspack-esm.test.ts b/tests/server-hydratable/rspack-esm.test.ts index 95e8676..15615c3 100644 --- a/tests/server-hydratable/rspack-esm.test.ts +++ b/tests/server-hydratable/rspack-esm.test.ts @@ -810,4 +810,57 @@ describe('esm (server, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'rspack-esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'rspack-esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'rspack-esm', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server-hydratable/standard.test.ts b/tests/server-hydratable/standard.test.ts index 77f8559..77cd43a 100644 --- a/tests/server-hydratable/standard.test.ts +++ b/tests/server-hydratable/standard.test.ts @@ -810,4 +810,57 @@ describe('standard (server, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'standard', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'standard', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'standard', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server-hydratable/vite.test.ts b/tests/server-hydratable/vite.test.ts index 5091072..69a9f6b 100644 --- a/tests/server-hydratable/vite.test.ts +++ b/tests/server-hydratable/vite.test.ts @@ -810,4 +810,57 @@ describe('vite (server, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'vite', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'vite', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'vite', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server-hydratable/webpack5.test.ts b/tests/server-hydratable/webpack5.test.ts index e47ddf2..1774f21 100644 --- a/tests/server-hydratable/webpack5.test.ts +++ b/tests/server-hydratable/webpack5.test.ts @@ -810,4 +810,57 @@ describe('webpack5 (server, hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'webpack5', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'webpack5', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'webpack5', + 'server', + true, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server/__snapshots__/esm.test.ts.snap b/tests/server/__snapshots__/esm.test.ts.snap index 0954a04..9a733e8 100644 --- a/tests/server/__snapshots__/esm.test.ts.snap +++ b/tests/server/__snapshots__/esm.test.ts.snap @@ -1110,6 +1110,98 @@ if (import.meta.hot) { }" `; +exports[`esm (server, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (server, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + +exports[`esm (server, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("esm", import.meta.hot, _REGISTRY); +}" +`; + exports[`esm (server, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server/__snapshots__/rspack-esm.test.ts.snap b/tests/server/__snapshots__/rspack-esm.test.ts.snap index 4982a1b..bb5fafd 100644 --- a/tests/server/__snapshots__/rspack-esm.test.ts.snap +++ b/tests/server/__snapshots__/rspack-esm.test.ts.snap @@ -1110,6 +1110,98 @@ if (import.meta.webpackHot) { }" `; +exports[`rspack-esm (server, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (server, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`rspack-esm (server, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`rspack-esm (server, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server/__snapshots__/standard.test.ts.snap b/tests/server/__snapshots__/standard.test.ts.snap index 0376831..081357f 100644 --- a/tests/server/__snapshots__/standard.test.ts.snap +++ b/tests/server/__snapshots__/standard.test.ts.snap @@ -1110,6 +1110,98 @@ if (module.hot) { }" `; +exports[`standard (server, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (server, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + +exports[`standard (server, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (module.hot) { + _$$refresh("standard", module.hot, _REGISTRY); +}" +`; + exports[`standard (server, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server/__snapshots__/vite.test.ts.snap b/tests/server/__snapshots__/vite.test.ts.snap index 12f76fc..ed9b3d3 100644 --- a/tests/server/__snapshots__/vite.test.ts.snap +++ b/tests/server/__snapshots__/vite.test.ts.snap @@ -1105,6 +1105,98 @@ if (import.meta.hot) { }" `; +exports[`vite (server, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (server, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + +exports[`vite (server, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.hot) { + _$$refresh("vite", import.meta.hot, _REGISTRY); +}" +`; + exports[`vite (server, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; // @refresh reload diff --git a/tests/server/__snapshots__/webpack5.test.ts.snap b/tests/server/__snapshots__/webpack5.test.ts.snap index 3381a8c..1990fc2 100644 --- a/tests/server/__snapshots__/webpack5.test.ts.snap +++ b/tests/server/__snapshots__/webpack5.test.ts.snap @@ -1110,6 +1110,98 @@ if (import.meta.webpackHot) { }" `; +exports[`webpack5 (server, non-hydratable) > fix build > refs > should work with a function 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _el => el = _el + }); +}, { + location: "example.jsx:2:23", + signature: "726057ca" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (server, non-hydratable) > fix build > refs > should work with a mutable variable 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:4:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + let el; + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof el === "function") { + el(_arg); + } else { + el = _arg; + } + } + }); +}, { + location: "example.jsx:2:23", + signature: "d3db0f89" +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + +exports[`webpack5 (server, non-hydratable) > fix build > signals as refs > should work 1`] = ` +"import { createComponent as _$createComponent } from "solid-js/web"; +import { ssr as _$ssr } from "solid-js/web"; +var _tmpl$ = "
Comp
"; +import { $$component as _$$component } from "solid-refresh"; +import { $$refresh as _$$refresh } from "solid-refresh"; +import { $$registry as _$$registry } from "solid-refresh"; +import { createSignal } from 'solid-js'; +const _REGISTRY = _$$registry(); +const Comp_1 = _$$component(_REGISTRY, "Comp_1", _props => /*@refresh jsx-skip*/_$ssr(_tmpl$), { + location: "example.jsx:6:19", + signature: "6f76290" +}); +const Comp = _$$component(_REGISTRY, "Comp", () => { + const [el, setEl] = createSignal(); + return /*@refresh jsx-skip*/_$createComponent(Comp_1, { + v0: _arg => { + if (typeof setEl === "function") { + setEl(_arg); + } + } + }); +}, { + location: "example.jsx:4:23", + signature: "57db44c6", + dependencies: () => ({ + createSignal + }) +}); +if (import.meta.webpackHot) { + _$$refresh("webpack5", import.meta.webpackHot, _REGISTRY); +}" +`; + exports[`webpack5 (server, non-hydratable) > fix render > @refresh reload > should work 1`] = ` "import { createComponent as _$createComponent } from "solid-js/web"; import { $$decline as _$$decline } from "solid-refresh"; diff --git a/tests/server/esm.test.ts b/tests/server/esm.test.ts index 870ca6b..c472adc 100644 --- a/tests/server/esm.test.ts +++ b/tests/server/esm.test.ts @@ -810,4 +810,57 @@ describe('esm (server, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server/rspack-esm.test.ts b/tests/server/rspack-esm.test.ts index becf539..e0b412a 100644 --- a/tests/server/rspack-esm.test.ts +++ b/tests/server/rspack-esm.test.ts @@ -810,4 +810,57 @@ describe('rspack-esm (server, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'rspack-esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'rspack-esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'rspack-esm', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server/standard.test.ts b/tests/server/standard.test.ts index 0ae57a0..b34a844 100644 --- a/tests/server/standard.test.ts +++ b/tests/server/standard.test.ts @@ -810,4 +810,57 @@ describe('standard (server, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'standard', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'standard', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'standard', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server/vite.test.ts b/tests/server/vite.test.ts index b1286e2..ab0ef1b 100644 --- a/tests/server/vite.test.ts +++ b/tests/server/vite.test.ts @@ -810,4 +810,57 @@ describe('vite (server, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'vite', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'vite', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'vite', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); diff --git a/tests/server/webpack5.test.ts b/tests/server/webpack5.test.ts index 7536e1a..97e0fe1 100644 --- a/tests/server/webpack5.test.ts +++ b/tests/server/webpack5.test.ts @@ -810,4 +810,57 @@ describe('webpack5 (server, non-hydratable)', () => { }); }); }); + describe('fix build', () => { + describe('refs', () => { + it('should work with a mutable variable', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
Comp
; + } + `, + 'webpack5', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + it('should work with a function', async () => { + expect( + await transform( + ` + const Comp = () => { + let el; + return
el = _el}>Comp
; + } + `, + 'webpack5', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + describe('signals as refs', () => { + it('should work', async () => { + expect( + await transform( + ` + import { createSignal } from 'solid-js'; + + const Comp = () => { + const [el, setEl] = createSignal(); + return
Comp
; + } + `, + 'webpack5', + 'server', + false, + ), + ).toMatchSnapshot(); + }); + }); + }); }); From 5142e4fae6b79dc772b57279ea4e94fa6f96e67c Mon Sep 17 00:00:00 2001 From: wjq990112 <1163585385@qq.com> Date: Sat, 20 Jul 2024 17:12:07 +0800 Subject: [PATCH 3/3] fix: typo --- src/babel/core/transform-jsx.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/babel/core/transform-jsx.ts b/src/babel/core/transform-jsx.ts index 8f19e4c..e013626 100644 --- a/src/babel/core/transform-jsx.ts +++ b/src/babel/core/transform-jsx.ts @@ -96,7 +96,7 @@ function extractJSXExpressionFromRef( ), ]), // fix the new usage of `ref` attribute, - // if use `Signals as refs`, the `else` branch will throw an errow with `Cannot assign to "setter" because it is a constant` message + // if use `Signals as refs`, the `else` branch will throw an error with `Cannot assign to "setter" because it is a constant` message // issue: https://github.com/solidjs/solid-refresh/issues/66 // docs: https://docs.solidjs.com/concepts/refs#signals-as-refs isConst