Skip to content

Commit 6fadc88

Browse files
lxsmnsyclxsmnsyc
authored
fix: hmr support for hoisted functions (#84)
* Update index.ts * fix snapshots
1 parent 6c9d851 commit 6fadc88

21 files changed

+725
-904
lines changed

‎src/babel/index.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -309,10 +309,6 @@ function bubbleFunctionDeclaration(
309309
// have zero or one parameter
310310
decl.params.length < 2
311311
) {
312-
const first = program.get('body')[0];
313-
const [tmp] = first.insertBefore(decl);
314-
program.scope.registerDeclaration(tmp);
315-
tmp.skip();
316312
if (path.parentPath.isExportNamedDeclaration()) {
317313
path.parentPath.replaceWith(
318314
t.exportNamedDeclaration(undefined, [
@@ -324,6 +320,9 @@ function bubbleFunctionDeclaration(
324320
} else {
325321
path.remove();
326322
}
323+
const [tmp] = program.unshiftContainer('body', [decl]);
324+
program.scope.registerDeclaration(tmp);
325+
tmp.skip();
327326
}
328327
}
329328
}
@@ -361,6 +360,7 @@ export default function solidRefreshPlugin(): babel.PluginObj<State> {
361360
bubbleFunctionDeclaration(programPath, path);
362361
},
363362
});
363+
programPath.scope.crawl();
364364
if (state.jsx) {
365365
programPath.traverse({
366366
JSXElement(path) {
@@ -370,6 +370,7 @@ export default function solidRefreshPlugin(): babel.PluginObj<State> {
370370
transformJSX(path);
371371
},
372372
});
373+
programPath.scope.crawl();
373374
}
374375
programPath.traverse({
375376
VariableDeclarator(path) {

‎tests/client-hydratable/__snapshots__/esm.test.ts.snap‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -451,48 +451,39 @@ exports[`esm (client, hydratable) > ExportNamedDeclaration w/ FunctionExpression
451451
"import { template as _$template } from "solid-js/web";
452452
import { createComponent as _$createComponent } from "solid-js/web";
453453
import { getNextElement as _$getNextElement } from "solid-js/web";
454-
var _tmpl$ = /*#__PURE__*/_$template(\`<div>foo\`),
455-
_tmpl$2 = /*#__PURE__*/_$template(\`<div>bar\`);
454+
var _tmpl$ = /*#__PURE__*/_$template(\`<div>bar\`),
455+
_tmpl$2 = /*#__PURE__*/_$template(\`<div>foo\`);
456456
import { $$component as _$$component } from "solid-refresh";
457457
import { $$refresh as _$$refresh } from "solid-refresh";
458458
import { $$registry as _$$registry } from "solid-refresh";
459459
const _REGISTRY = _$$registry();
460-
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
460+
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
461+
location: "example.jsx:3:15",
462+
signature: "61dd3182"
463+
});
464+
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
465+
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
466+
}, {
467+
location: "example.jsx:2:13",
468+
signature: "e93ca257"
469+
});
470+
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
461471
location: "example.jsx:8:12",
462472
signature: "241c14a4"
463473
});
464-
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(_props4.v0, {}), {
474+
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(Bar, {}), {
465475
location: "example.jsx:9:12",
466-
signature: "9a24e06b"
476+
signature: "61d9a109"
467477
});
468-
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {
469-
get v0() {
470-
return _props.v0;
471-
}
472-
})], {
478+
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props2 => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
473479
location: "example.jsx:7:10",
474-
signature: "77f4a4b9"
480+
signature: "5302828d"
475481
});
476482
const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
477-
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {
478-
v0: Bar
479-
});
483+
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {});
480484
}, {
481485
location: "example.jsx:5:13",
482-
signature: "2f861eed",
483-
dependencies: () => ({
484-
Bar
485-
})
486-
});
487-
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props2 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
488-
location: "example.jsx:3:15",
489-
signature: "fad4daa8"
490-
});
491-
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
492-
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
493-
}, {
494-
location: "example.jsx:2:13",
495-
signature: "e93ca257"
486+
signature: "c963b907"
496487
});
497488
export { Bar };
498489
export { Foo };
@@ -624,7 +615,6 @@ var _tmpl$ = /*#__PURE__*/_$template(\`<h1>\`);
624615
import { $$component as _$$component } from "solid-refresh";
625616
import { $$refresh as _$$refresh } from "solid-refresh";
626617
import { $$registry as _$$registry } from "solid-refresh";
627-
const example = 'Foo';
628618
const _REGISTRY = _$$registry();
629619
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/(() => {
630620
var _el$ = _$getNextElement(_tmpl$);
@@ -645,6 +635,7 @@ const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
645635
example
646636
})
647637
});
638+
const example = 'Foo';
648639
if (import.meta.hot) {
649640
_$$refresh("esm", import.meta.hot, _REGISTRY);
650641
}"
@@ -655,7 +646,6 @@ exports[`esm (client, hydratable) > FunctionDeclaration > should transform Funct
655646
import { $$component as _$$component } from "solid-refresh";
656647
import { $$refresh as _$$refresh } from "solid-refresh";
657648
import { $$registry as _$$registry } from "solid-refresh";
658-
const Example = createContext();
659649
const _REGISTRY = _$$registry();
660650
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/_$createComponent(_props.v0, {
661651
children: "Foo"
@@ -676,6 +666,7 @@ const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
676666
Example
677667
})
678668
});
669+
const Example = createContext();
679670
if (import.meta.hot) {
680671
_$$refresh("esm", import.meta.hot, _REGISTRY);
681672
}"
@@ -685,40 +676,40 @@ exports[`esm (client, hydratable) > FunctionDeclaration > should transform Funct
685676
"import { template as _$template } from "solid-js/web";
686677
import { createComponent as _$createComponent } from "solid-js/web";
687678
import { getNextElement as _$getNextElement } from "solid-js/web";
688-
var _tmpl$ = /*#__PURE__*/_$template(\`<div>bar\`),
689-
_tmpl$2 = /*#__PURE__*/_$template(\`<div>foo\`);
679+
var _tmpl$ = /*#__PURE__*/_$template(\`<div>foo\`),
680+
_tmpl$2 = /*#__PURE__*/_$template(\`<div>bar\`);
690681
import { $$component as _$$component } from "solid-refresh";
691682
import { $$refresh as _$$refresh } from "solid-refresh";
692683
import { $$registry as _$$registry } from "solid-refresh";
693684
const _REGISTRY = _$$registry();
694-
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
695-
location: "example.jsx:3:15",
696-
signature: "61dd3182"
697-
});
698-
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
699-
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
700-
}, {
701-
location: "example.jsx:2:6",
702-
signature: "e93ca257"
703-
});
704-
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
685+
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
705686
location: "example.jsx:8:12",
706687
signature: "241c14a4"
707688
});
708689
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(Bar, {}), {
709690
location: "example.jsx:9:12",
710691
signature: "61d9a109"
711692
});
712-
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props2 => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
693+
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
713694
location: "example.jsx:7:10",
714-
signature: "5302828d"
695+
signature: "825a754d"
715696
});
716697
const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
717698
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {});
718699
}, {
719700
location: "example.jsx:5:6",
720701
signature: "c963b907"
721702
});
703+
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props2 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
704+
location: "example.jsx:3:15",
705+
signature: "fad4daa8"
706+
});
707+
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
708+
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
709+
}, {
710+
location: "example.jsx:2:6",
711+
signature: "e93ca257"
712+
});
722713
if (import.meta.hot) {
723714
_$$refresh("esm", import.meta.hot, _REGISTRY);
724715
}"

‎tests/client-hydratable/__snapshots__/rspack-esm.test.ts.snap‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -451,48 +451,39 @@ exports[`rspack-esm (client, hydratable) > ExportNamedDeclaration w/ FunctionExp
451451
"import { template as _$template } from "solid-js/web";
452452
import { createComponent as _$createComponent } from "solid-js/web";
453453
import { getNextElement as _$getNextElement } from "solid-js/web";
454-
var _tmpl$ = /*#__PURE__*/_$template(\`<div>foo\`),
455-
_tmpl$2 = /*#__PURE__*/_$template(\`<div>bar\`);
454+
var _tmpl$ = /*#__PURE__*/_$template(\`<div>bar\`),
455+
_tmpl$2 = /*#__PURE__*/_$template(\`<div>foo\`);
456456
import { $$component as _$$component } from "solid-refresh";
457457
import { $$refresh as _$$refresh } from "solid-refresh";
458458
import { $$registry as _$$registry } from "solid-refresh";
459459
const _REGISTRY = _$$registry();
460-
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
460+
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
461+
location: "example.jsx:3:15",
462+
signature: "61dd3182"
463+
});
464+
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
465+
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
466+
}, {
467+
location: "example.jsx:2:13",
468+
signature: "e93ca257"
469+
});
470+
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
461471
location: "example.jsx:8:12",
462472
signature: "241c14a4"
463473
});
464-
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(_props4.v0, {}), {
474+
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(Bar, {}), {
465475
location: "example.jsx:9:12",
466-
signature: "9a24e06b"
476+
signature: "61d9a109"
467477
});
468-
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {
469-
get v0() {
470-
return _props.v0;
471-
}
472-
})], {
478+
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props2 => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
473479
location: "example.jsx:7:10",
474-
signature: "77f4a4b9"
480+
signature: "5302828d"
475481
});
476482
const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
477-
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {
478-
v0: Bar
479-
});
483+
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {});
480484
}, {
481485
location: "example.jsx:5:13",
482-
signature: "2f861eed",
483-
dependencies: () => ({
484-
Bar
485-
})
486-
});
487-
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props2 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
488-
location: "example.jsx:3:15",
489-
signature: "fad4daa8"
490-
});
491-
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
492-
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
493-
}, {
494-
location: "example.jsx:2:13",
495-
signature: "e93ca257"
486+
signature: "c963b907"
496487
});
497488
export { Bar };
498489
export { Foo };
@@ -624,7 +615,6 @@ var _tmpl$ = /*#__PURE__*/_$template(\`<h1>\`);
624615
import { $$component as _$$component } from "solid-refresh";
625616
import { $$refresh as _$$refresh } from "solid-refresh";
626617
import { $$registry as _$$registry } from "solid-refresh";
627-
const example = 'Foo';
628618
const _REGISTRY = _$$registry();
629619
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/(() => {
630620
var _el$ = _$getNextElement(_tmpl$);
@@ -645,6 +635,7 @@ const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
645635
example
646636
})
647637
});
638+
const example = 'Foo';
648639
if (import.meta.webpackHot) {
649640
_$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY);
650641
}"
@@ -655,7 +646,6 @@ exports[`rspack-esm (client, hydratable) > FunctionDeclaration > should transfor
655646
import { $$component as _$$component } from "solid-refresh";
656647
import { $$refresh as _$$refresh } from "solid-refresh";
657648
import { $$registry as _$$registry } from "solid-refresh";
658-
const Example = createContext();
659649
const _REGISTRY = _$$registry();
660650
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/_$createComponent(_props.v0, {
661651
children: "Foo"
@@ -676,6 +666,7 @@ const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
676666
Example
677667
})
678668
});
669+
const Example = createContext();
679670
if (import.meta.webpackHot) {
680671
_$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY);
681672
}"
@@ -685,40 +676,40 @@ exports[`rspack-esm (client, hydratable) > FunctionDeclaration > should transfor
685676
"import { template as _$template } from "solid-js/web";
686677
import { createComponent as _$createComponent } from "solid-js/web";
687678
import { getNextElement as _$getNextElement } from "solid-js/web";
688-
var _tmpl$ = /*#__PURE__*/_$template(\`<div>bar\`),
689-
_tmpl$2 = /*#__PURE__*/_$template(\`<div>foo\`);
679+
var _tmpl$ = /*#__PURE__*/_$template(\`<div>foo\`),
680+
_tmpl$2 = /*#__PURE__*/_$template(\`<div>bar\`);
690681
import { $$component as _$$component } from "solid-refresh";
691682
import { $$refresh as _$$refresh } from "solid-refresh";
692683
import { $$registry as _$$registry } from "solid-refresh";
693684
const _REGISTRY = _$$registry();
694-
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
695-
location: "example.jsx:3:15",
696-
signature: "61dd3182"
697-
});
698-
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
699-
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
700-
}, {
701-
location: "example.jsx:2:6",
702-
signature: "e93ca257"
703-
});
704-
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
685+
const Foo_1_1 = _$$component(_REGISTRY, "Foo_1_1", _props3 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$), {
705686
location: "example.jsx:8:12",
706687
signature: "241c14a4"
707688
});
708689
const Foo_1_2 = _$$component(_REGISTRY, "Foo_1_2", _props4 => /*@refresh jsx-skip*/_$createComponent(Bar, {}), {
709690
location: "example.jsx:9:12",
710691
signature: "61d9a109"
711692
});
712-
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props2 => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
693+
const Foo_1 = _$$component(_REGISTRY, "Foo_1", _props => /*@refresh jsx-skip*/[_$createComponent(Foo_1_1, {}), _$createComponent(Foo_1_2, {})], {
713694
location: "example.jsx:7:10",
714-
signature: "5302828d"
695+
signature: "825a754d"
715696
});
716697
const Foo = _$$component(_REGISTRY, "Foo", function Foo() {
717698
return /*@refresh jsx-skip*/_$createComponent(Foo_1, {});
718699
}, {
719700
location: "example.jsx:5:6",
720701
signature: "c963b907"
721702
});
703+
const Bar_1 = _$$component(_REGISTRY, "Bar_1", _props2 => /*@refresh jsx-skip*/_$getNextElement(_tmpl$2), {
704+
location: "example.jsx:3:15",
705+
signature: "fad4daa8"
706+
});
707+
const Bar = _$$component(_REGISTRY, "Bar", function Bar() {
708+
return /*@refresh jsx-skip*/_$createComponent(Bar_1, {});
709+
}, {
710+
location: "example.jsx:2:6",
711+
signature: "e93ca257"
712+
});
722713
if (import.meta.webpackHot) {
723714
_$$refresh("rspack-esm", import.meta.webpackHot, _REGISTRY);
724715
}"

0 commit comments

Comments
 (0)