mirror of https://github.com/sveltejs/svelte
feat: simplify HMR implementation (#11132)
* chore: simplify HMR implementation * changeset * unused * prettierpull/11134/head
parent
a740b7bb43
commit
d5776c3ec3
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
feat: simplify HMR implementation
|
@ -1,55 +1,38 @@
|
||||
import { block, branch, destroy_effect } from '../reactivity/effects.js';
|
||||
import { set, source } from '../reactivity/sources.js';
|
||||
import { set_should_intro } from '../render.js';
|
||||
import { get } from '../runtime.js';
|
||||
|
||||
/**
|
||||
* @template {(anchor: Comment, props: any) => any} Component
|
||||
* @param {{ components: Map<string, { source: import("#client").Source<Component>; wrapper: null | Component; }> }} hot_data
|
||||
* @param {string} key
|
||||
* @param {Component} component
|
||||
* @param {import("#client").Source<Component>} source
|
||||
*/
|
||||
export function hmr(hot_data, component, key) {
|
||||
var components = (hot_data.components ??= new Map());
|
||||
var data = components.get(key);
|
||||
|
||||
if (data === undefined) {
|
||||
components.set(
|
||||
key,
|
||||
(data = {
|
||||
source: source(component),
|
||||
wrapper: null
|
||||
})
|
||||
);
|
||||
} else {
|
||||
set(data.source, component);
|
||||
}
|
||||
const component_source = data.source;
|
||||
|
||||
return (data.wrapper ??= /** @type {Component} */ (
|
||||
(anchor, props) => {
|
||||
let instance = {};
|
||||
|
||||
/** @type {import("#client").Effect} */
|
||||
let effect;
|
||||
|
||||
block(() => {
|
||||
const component = get(component_source);
|
||||
|
||||
if (effect) {
|
||||
// @ts-ignore
|
||||
for (var k in instance) delete instance[k];
|
||||
destroy_effect(effect);
|
||||
}
|
||||
|
||||
effect = branch(() => {
|
||||
set_should_intro(false);
|
||||
Object.assign(instance, component(anchor, props));
|
||||
set_should_intro(true);
|
||||
});
|
||||
export function hmr(source) {
|
||||
/**
|
||||
* @param {Comment} anchor
|
||||
* @param {any} props
|
||||
*/
|
||||
return (anchor, props) => {
|
||||
let instance = {};
|
||||
|
||||
/** @type {import("#client").Effect} */
|
||||
let effect;
|
||||
|
||||
block(() => {
|
||||
const component = get(source);
|
||||
|
||||
if (effect) {
|
||||
// @ts-ignore
|
||||
for (var k in instance) delete instance[k];
|
||||
destroy_effect(effect);
|
||||
}
|
||||
|
||||
effect = branch(() => {
|
||||
set_should_intro(false);
|
||||
Object.assign(instance, component(anchor, props));
|
||||
set_should_intro(true);
|
||||
});
|
||||
});
|
||||
|
||||
return instance;
|
||||
}
|
||||
));
|
||||
return instance;
|
||||
};
|
||||
}
|
||||
|
@ -0,0 +1,7 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
hmr: true
|
||||
}
|
||||
});
|
@ -0,0 +1,28 @@
|
||||
// index.svelte (Svelte VERSION)
|
||||
// Note: compiler output will change before 5.0 is released!
|
||||
import "svelte/internal/disclose-version";
|
||||
import * as $ from "svelte/internal/client";
|
||||
|
||||
var root = $.template(`<h1>hello world</h1>`);
|
||||
|
||||
function Hmr($$anchor, $$props) {
|
||||
$.push($$props, false);
|
||||
$.init();
|
||||
|
||||
var h1 = root();
|
||||
|
||||
$.append($$anchor, h1);
|
||||
$.pop();
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
const s = $.source(Hmr);
|
||||
|
||||
Hmr = $.hmr(s);
|
||||
|
||||
import.meta.hot.accept((module) => {
|
||||
$.set(s, module.default);
|
||||
});
|
||||
}
|
||||
|
||||
export default Hmr;
|
@ -0,0 +1,9 @@
|
||||
// index.svelte (Svelte VERSION)
|
||||
// Note: compiler output will change before 5.0 is released!
|
||||
import * as $ from "svelte/internal/server";
|
||||
|
||||
export default function Hmr($$payload, $$props) {
|
||||
$.push(false);
|
||||
$$payload.out += `<h1>hello world</h1>`;
|
||||
$.pop();
|
||||
}
|
@ -0,0 +1 @@
|
||||
<h1>hello world</h1>
|
Loading…
Reference in new issue