mirror of https://github.com/sveltejs/svelte
Rich Harris
2 years ago
commit
fa4d3730f9
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: correctly compile $effect.root in svelte modules
|
||||
@ -1,74 +0,0 @@
|
||||
export const reserved = [
|
||||
'arguments',
|
||||
'await',
|
||||
'break',
|
||||
'case',
|
||||
'catch',
|
||||
'class',
|
||||
'const',
|
||||
'continue',
|
||||
'debugger',
|
||||
'default',
|
||||
'delete',
|
||||
'do',
|
||||
'else',
|
||||
'enum',
|
||||
'eval',
|
||||
'export',
|
||||
'extends',
|
||||
'false',
|
||||
'finally',
|
||||
'for',
|
||||
'function',
|
||||
'if',
|
||||
'implements',
|
||||
'import',
|
||||
'in',
|
||||
'instanceof',
|
||||
'interface',
|
||||
'let',
|
||||
'new',
|
||||
'null',
|
||||
'package',
|
||||
'private',
|
||||
'protected',
|
||||
'public',
|
||||
'return',
|
||||
'static',
|
||||
'super',
|
||||
'switch',
|
||||
'this',
|
||||
'throw',
|
||||
'true',
|
||||
'try',
|
||||
'typeof',
|
||||
'var',
|
||||
'void',
|
||||
'while',
|
||||
'with',
|
||||
'yield'
|
||||
];
|
||||
|
||||
const void_element_names = [
|
||||
'area',
|
||||
'base',
|
||||
'br',
|
||||
'col',
|
||||
'command',
|
||||
'embed',
|
||||
'hr',
|
||||
'img',
|
||||
'input',
|
||||
'keygen',
|
||||
'link',
|
||||
'meta',
|
||||
'param',
|
||||
'source',
|
||||
'track',
|
||||
'wbr'
|
||||
];
|
||||
|
||||
/** @param {string} name */
|
||||
export function is_void(name) {
|
||||
return void_element_names.includes(name) || name.toLowerCase() === '!doctype';
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: '<button>0</button><button>0</button><button>cleanup</button>',
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
const [b1, b2, b3] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
b1.click();
|
||||
b2.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 1]);
|
||||
|
||||
flushSync(() => {
|
||||
b3.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 1, 'cleanup 1', 'cleanup 2']);
|
||||
|
||||
flushSync(() => {
|
||||
b1.click();
|
||||
b2.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 1, 'cleanup 1', 'cleanup 2']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { with_root } from './root.svelte.js';
|
||||
let x = $state(0);
|
||||
let y = $state(0);
|
||||
|
||||
const cleanup = with_root(() => x)
|
||||
</script>
|
||||
|
||||
<button onclick={() => x++}>{x}</button>
|
||||
<button onclick={() => y++}>{y}</button>
|
||||
<button onclick={cleanup}>cleanup</button>
|
||||
@ -0,0 +1,20 @@
|
||||
export function with_root(get_x) {
|
||||
const cleanup = $effect.root(() => {
|
||||
$effect(() => {
|
||||
console.log(get_x());
|
||||
});
|
||||
|
||||
const nested_cleanup = $effect.root(() => {
|
||||
return () => {
|
||||
console.log('cleanup 2');
|
||||
};
|
||||
});
|
||||
|
||||
return () => {
|
||||
console.log('cleanup 1');
|
||||
nested_cleanup();
|
||||
};
|
||||
});
|
||||
|
||||
return cleanup;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
// Ensure we don't use any methods that are not available in all browser for a long period of time
|
||||
// so that people don't need to polyfill them. Example array.at(...) was introduced to Safari only in 2022
|
||||
"target": "es2021",
|
||||
"lib": ["es2021", "DOM", "DOM.Iterable"],
|
||||
"types": [] // prevent automatic inclusion of @types/node
|
||||
},
|
||||
"include": ["./src/"],
|
||||
// Compiler is allowed to use more recent methods; people using it in the browser are expected to know
|
||||
// how to polyfill missing methods. Also make sure to not include test files as these include Vitest
|
||||
// which then loads node globals.
|
||||
"exclude": ["./src/compiler/**/*", "./src/**/*.test.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { mount, hydrate, unmount } from 'svelte';
|
||||
import App from './src/main.svelte';
|
||||
|
||||
const root = document.getElementById('root')!;
|
||||
const render = root.firstChild?.nextSibling ? hydrate : mount;
|
||||
|
||||
const component = render(App, {
|
||||
target: document.getElementById('root')!,
|
||||
recover: false
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
window.unmount = () => unmount(component);
|
||||
@ -1,64 +0,0 @@
|
||||
// @ts-check
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import polka from 'polka';
|
||||
import { createServer as createViteServer } from 'vite';
|
||||
|
||||
const PORT = process.env.PORT || '5173';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
async function createServer() {
|
||||
const app = polka();
|
||||
|
||||
const vite = await createViteServer({
|
||||
server: { middlewareMode: true },
|
||||
appType: 'custom'
|
||||
});
|
||||
|
||||
app.use(vite.middlewares);
|
||||
|
||||
app.use('*', async (req, res) => {
|
||||
if (req.originalUrl !== '/') {
|
||||
const file = path.resolve('./dist' + req.originalUrl);
|
||||
if (fs.existsSync(file)) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/javascript'
|
||||
});
|
||||
res.end(fs.createReadStream(file));
|
||||
} else {
|
||||
res.writeHead(404);
|
||||
res.end('not found');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
|
||||
const transformed_template = await vite.transformIndexHtml(req.originalUrl, template);
|
||||
const { render } = await vite.ssrLoadModule('svelte/server');
|
||||
const { default: App } = await vite.ssrLoadModule('./src/main.svelte');
|
||||
const { head, body } = render(App);
|
||||
|
||||
const html = transformed_template
|
||||
.replace(`<!--ssr-head-->`, head)
|
||||
.replace(`<!--ssr-body-->`, body);
|
||||
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
|
||||
});
|
||||
|
||||
return { app, vite };
|
||||
}
|
||||
|
||||
createServer()
|
||||
.then(({ app }) =>
|
||||
app.listen(PORT, () => {
|
||||
console.log(`http://localhost:${PORT}`);
|
||||
})
|
||||
)
|
||||
.catch((err) => {
|
||||
console.error('Error Starting Server:\n', err);
|
||||
process.exit(1);
|
||||
});
|
||||
@ -1,22 +0,0 @@
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import express from 'express';
|
||||
import { head, body } from './server/entry-server.js';
|
||||
|
||||
const rendered = fs
|
||||
.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
|
||||
.replace(`<!--ssr-html-->`, body)
|
||||
.replace(`<!--ssr-head-->`, head);
|
||||
|
||||
express()
|
||||
.use('*', async (req, res) => {
|
||||
if (req.originalUrl !== '/') {
|
||||
res.sendFile(path.resolve('./dist/client' + req.originalUrl));
|
||||
return;
|
||||
}
|
||||
|
||||
res.status(200).set({ 'Content-Type': 'text/html' }).end(rendered);
|
||||
})
|
||||
.listen('3000');
|
||||
|
||||
console.log('listening on http://localhost:3000');
|
||||
@ -0,0 +1,36 @@
|
||||
// @ts-check
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import polka from 'polka';
|
||||
import { createServer as createViteServer } from 'vite';
|
||||
import { render } from 'svelte/server';
|
||||
|
||||
const PORT = process.env.PORT || '5173';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
const vite = await createViteServer({
|
||||
server: { middlewareMode: true },
|
||||
appType: 'custom'
|
||||
});
|
||||
|
||||
polka()
|
||||
.use(vite.middlewares)
|
||||
.use(async (req, res) => {
|
||||
const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
|
||||
const transformed_template = await vite.transformIndexHtml(req.url, template);
|
||||
const { default: App } = await vite.ssrLoadModule('./src/main.svelte');
|
||||
const { head, body } = render(App);
|
||||
|
||||
const html = transformed_template
|
||||
.replace(`<!--ssr-head-->`, head)
|
||||
.replace(`<!--ssr-body-->`, body);
|
||||
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
|
||||
})
|
||||
.listen(PORT, () => {
|
||||
console.log(`http://localhost:${PORT}`);
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import polka from 'polka';
|
||||
import { render } from 'svelte/server';
|
||||
import App from './src/main.svelte';
|
||||
|
||||
const { head, body } = render(App);
|
||||
|
||||
const rendered = fs
|
||||
.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
|
||||
.replace(`<!--ssr-body-->`, body)
|
||||
.replace(`<!--ssr-head-->`, head);
|
||||
|
||||
const types = {
|
||||
'.js': 'application/javascript',
|
||||
'.css': 'text/css'
|
||||
};
|
||||
|
||||
polka()
|
||||
.use((req, res) => {
|
||||
if (req.url === '/') {
|
||||
res.writeHead(200, { 'content-type': 'text/html' });
|
||||
res.end(rendered);
|
||||
return;
|
||||
}
|
||||
|
||||
const file = path.resolve('./dist/client' + req.url);
|
||||
|
||||
if (fs.existsSync(file)) {
|
||||
const type = types[path.extname(req.url)] ?? 'application/octet-stream';
|
||||
res.writeHead(200, { 'content-type': type });
|
||||
fs.createReadStream(file).pipe(res);
|
||||
return;
|
||||
}
|
||||
|
||||
res.writeHead(404);
|
||||
res.end('not found');
|
||||
})
|
||||
.listen('3000');
|
||||
|
||||
console.log('listening on http://localhost:3000');
|
||||
Loading…
Reference in new issue