Skip to content

WIP: add behaviour to mimic hydration #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
RaiVaibhav wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

WIP: add behaviour to mimic hydration #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions sites/svelte-5-preview/src/lib/Bundler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,18 @@ export default class Bundler {
/**
*
* @param {import('./types').File[]} files
* @param { string} mode
* @returns
*/
bundle(files) {
bundle(files, mode) {
return new Promise((fulfil) => {
this.handlers.set(uid, fulfil);

this.worker.postMessage({
uid,
type: 'bundle',
files
files,
mode
});

uid += 1;
Expand Down
59 changes: 39 additions & 20 deletions sites/svelte-5-preview/src/lib/Output/Viewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
/** @type {'light' | 'dark'} */
export let theme;

const { bundle } = get_repl_context();
const { bundle, compile_options } = get_repl_context();

/** @type {import('./console/console').Log[]} */
let logs = [];
Expand Down Expand Up @@ -100,6 +100,7 @@
* @param {import('$lib/types').Bundle | null} $bundle
*/
async function apply_bundle($bundle) {

if (!$bundle) return;

try {
Expand Down Expand Up @@ -129,31 +130,49 @@
window._svelteTransitionManager = null;
}

const __repl_exports = ${$bundle.client?.code};
const __repl_server_exports = ${$bundle.server?.code};
const __repl_client_exports = ${$bundle.client?.code};
{
const { mount, unmount, App, untrack } = __repl_exports;

const console_methods = ['log', 'error', 'trace', 'assert', 'warn', 'table', 'group'];
const { mount, unmount, App: ClientApp, untrack, hydrate } = __repl_client_exports;
const {render, App: ServerApp} = __repl_server_exports;

// The REPL hooks up to the console to provide a virtual console. However, the implementation
// needs to stringify the console to pass over a MessageChannel, which means that the object
// can get deeply read and tracked by accident when using the console. We can avoid this by
// ensuring we untrack the main console methods.
const serverOperation = () => {
const {html, head} = render(ServerApp, {});
document.head.innerHTML = head;
document.body.innerHTML = html;
}
const clientOperation = (hydrateApp) => {
const console_methods = ['log', 'error', 'trace', 'assert', 'warn', 'table', 'group'];
// The REPL hooks up to the console to provide a virtual console. However, the implementation
// needs to stringify the console to pass over a MessageChannel, which means that the object
// can get deeply read and tracked by accident when using the console. We can avoid this by
// ensuring we untrack the main console methods.

const original = {};
const original = {};

for (const method of console_methods) {
original[method] = console[method];
console[method] = function (...v) {
return untrack(() => original[method].apply(this, v));
}
}
const component = mount(App, { target: document.body });
window.__unmount_previous = () => {
for (const method of console_methods) {
console[method] = original[method];
original[method] = console[method];
console[method] = function (...v) {
return untrack(() => original[method].apply(this, v));
}
}
const component = ${$compile_options.generate === 'hydrate' ? 'hydrate' : 'mount'}(ClientApp, { target: document.body, hydrate: hydrateApp });
window.__unmount_previous = () => {
for (const method of console_methods) {
console[method] = original[method];
}
unmount(component);
}
unmount(component);
}
if (${$compile_options.generate} === 'server') {
serverOperation()
} else if (${$compile_options.generate} === 'client') {
clientOperation(false);
} else {
serverOperation();
setTimeout(() => {
clientOperation(true)
}, 3000)
}
}
//# sourceURL=playground:output
Expand Down
4 changes: 2 additions & 2 deletions sites/svelte-5-preview/src/lib/Repl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@

/** @type {import('svelte/compiler').CompileOptions} */
const DEFAULT_COMPILE_OPTIONS = {
generate: 'client',
generate: 'hydrate',
dev: false
};

Expand Down Expand Up @@ -152,7 +152,7 @@
$bundling = new Promise((resolve) => {
resolver = resolve;
});
const result = await $bundler?.bundle($files);
const result = await $bundler?.bundle($files, DEFAULT_COMPILE_OPTIONS.generate);
if (result && token === current_token) $bundle = result;
resolver();
}
Expand Down
42 changes: 24 additions & 18 deletions sites/svelte-5-preview/src/lib/workers/bundler/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ self.addEventListener(

case 'bundle': {
await ready;
const { uid, files } = event.data;
const { uid, files, mode } = event.data;

if (files.length === 0) return;

Expand All @@ -68,7 +68,7 @@ self.addEventListener(
setTimeout(async () => {
if (current_id !== uid) return;

const result = await bundle({ uid, files });
const result = await bundle({ uid, files, mode });

if (JSON.stringify(result.error) === JSON.stringify(ABORT)) return;
if (result && uid === current_id) postMessage(result);
Expand Down Expand Up @@ -392,8 +392,9 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
} else if (id.endsWith('.svelte')) {
result = svelte.compile(code, {
filename: name + '.svelte',
generate: 'client',
dev: true
generate: mode === 'client' ? 'dom' : 'ssr',
dev: true,
hydratable: mode === 'server' ? true : false
});

if (result.css) {
Expand All @@ -408,8 +409,9 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
} else if (id.endsWith('.svelte.js')) {
result = svelte.compileModule(code, {
filename: name + '.js',
generate: 'client',
dev: true
generate: mode === 'client' ? 'dom' : 'ssr',
dev: true,
hydratable: mode === 'server' ? true : false
});
if (!result) {
return null;
Expand Down Expand Up @@ -478,7 +480,7 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
* @param {{ uid: number; files: import('$lib/types.js').File[] }} param0
* @returns
*/
async function bundle({ uid, files }) {
async function bundle({ uid, files, mode }) {
if (!DEV) {
console.clear();
console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold');
Expand All @@ -490,7 +492,8 @@ async function bundle({ uid, files }) {
lookup.set('./__entry.js', {
name: '__entry',
source: `
export { mount, unmount, untrack } from 'svelte';
export { mount, unmount, untrack, hydrate } from 'svelte';
export {render} from 'svelte/server';
export {default as App} from './App.svelte';
`,
type: 'js',
Expand All @@ -513,15 +516,18 @@ async function bundle({ uid, files }) {

cached.client = client.cache;

const client_result = (
await client.bundle?.generate({
format: 'iife',
exports: 'named'
// sourcemap: 'inline'
})
)?.output[0];

const server = false // TODO how can we do SSR?
const client_result =
mode === 'hydrate' || mode === 'client'
? (
await client.bundle?.generate({
format: 'iife',
exports: 'named'
// sourcemap: 'inline'
})
)?.output[0]
: null;

const server = mode === 'server' || mode === 'hydrate' // TODO how can we do SSR?
? await get_bundle(uid, 'server', cached.server, lookup)
: null;

Expand All @@ -536,7 +542,7 @@ async function bundle({ uid, files }) {
? (
await server.bundle?.generate({
format: 'iife',
name: 'SvelteComponent',
// name: 'SvelteComponent',
exports: 'named'
// sourcemap: 'inline'
})
Expand Down