mirror of https://github.com/sveltejs/svelte
chore: playground (#8648)
* initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch configpull/8710/head
gtmnayan
2 years ago
committed by
GitHub
parent
5902ccab81
commit
15bdadb2ae
@ -1,5 +1,6 @@
|
|||||||
.idea
|
.idea
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.vscode
|
.vscode/*
|
||||||
|
!.vscode/launch.json
|
||||||
node_modules
|
node_modules
|
||||||
.eslintcache
|
.eslintcache
|
||||||
|
|||||||
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Playground: Browser",
|
||||||
|
"url": "http://localhost:10001"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"runtimeArgs": ["--watch"],
|
||||||
|
"name": "Playground: Server",
|
||||||
|
"outputCapture": "std",
|
||||||
|
"program": "start.js",
|
||||||
|
"cwd": "${workspaceFolder}/packages/playground",
|
||||||
|
"cascadeTerminateToConfigurations": ["Playground: Browser"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compounds": [
|
||||||
|
{
|
||||||
|
"name": "Playground: Full",
|
||||||
|
"configurations": ["Playground: Server", "Playground: Browser"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
You may use this package to experiment with your changes to Svelte.
|
||||||
|
|
||||||
|
To prevent any changes you make in this directory from being accidentally committed, run `git update-index --skip-worktree ./**/*.*` in this directory.
|
||||||
|
|
||||||
|
If you would actually like to make some changes to the files here for everyone then run `git update-index --no-skip-worktree ./**/*.*` before committing.
|
||||||
|
|
||||||
|
If you're using VS Code, you can use the "Playground: Full" launch configuration to run the playground and attach the debugger to both the compiler and the browser.
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "ESNext",
|
||||||
|
/**
|
||||||
|
* svelte-preprocess cannot figure out whether you have
|
||||||
|
* a value or a type, so tell TypeScript to enforce using
|
||||||
|
* `import type` instead of `import` for Types.
|
||||||
|
*/
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
/**
|
||||||
|
* To have warnings / errors of the Svelte compiler at the
|
||||||
|
* correct position, enable source maps by default.
|
||||||
|
*/
|
||||||
|
"sourceMap": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
/**
|
||||||
|
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||||
|
* Disable this if you'd like to use dynamic types.
|
||||||
|
*/
|
||||||
|
"checkJs": true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Use global.d.ts instead of compilerOptions.types
|
||||||
|
* to avoid limiting type declarations.
|
||||||
|
*/
|
||||||
|
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "playground",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node --watch start.js"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"rollup": "^3.20.2",
|
||||||
|
"rollup-plugin-serve": "^2.0.2",
|
||||||
|
"svelte": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div>
|
||||||
|
Hello world!
|
||||||
|
</div>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import App from './App.svelte';
|
||||||
|
|
||||||
|
new App({
|
||||||
|
target: document.getElementById('app'),
|
||||||
|
hydrate: true
|
||||||
|
});
|
||||||
|
|
||||||
|
function get_version() {
|
||||||
|
return fetch('/version.json').then((r) => r.json());
|
||||||
|
}
|
||||||
|
|
||||||
|
let prev = await get_version();
|
||||||
|
|
||||||
|
// Mom: We have live reloading at home
|
||||||
|
// Live reloading at home:
|
||||||
|
while (true) {
|
||||||
|
await new Promise((r) => setTimeout(r, 2500));
|
||||||
|
try {
|
||||||
|
const version = await get_version();
|
||||||
|
if (prev !== version) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import App from './App.svelte';
|
||||||
|
|
||||||
|
export function render() {
|
||||||
|
// @ts-ignore
|
||||||
|
return App.render();
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
let count = 0
|
||||||
|
const increment = () => {
|
||||||
|
count += 1
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={increment}>
|
||||||
|
count is {count}
|
||||||
|
</button>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title><!--app-title--></title>
|
||||||
|
<!--app-head-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/entry-client.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
import { readFileSync, writeFileSync } from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
import { watch } from 'rollup';
|
||||||
|
import serve from 'rollup-plugin-serve';
|
||||||
|
import * as svelte from '../svelte/src/compiler/index.js';
|
||||||
|
|
||||||
|
const __dirname = new URL('.', import.meta.url).pathname;
|
||||||
|
|
||||||
|
/** @returns {import('rollup').Plugin}*/
|
||||||
|
function create_plugin(ssr = false) {
|
||||||
|
return {
|
||||||
|
name: 'custom-svelte-ssr-' + ssr,
|
||||||
|
resolveId(id) {
|
||||||
|
if (id === 'svelte') {
|
||||||
|
return path.resolve(
|
||||||
|
__dirname,
|
||||||
|
ssr ? '../svelte/src/runtime/ssr.js' : '../svelte/src/runtime/index.js'
|
||||||
|
);
|
||||||
|
} else if (id.startsWith('svelte/')) {
|
||||||
|
return path.resolve(__dirname, `../svelte/src/runtime/${id.slice(7)}/index.js`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform(code, id) {
|
||||||
|
code = code.replaceAll('import.meta.env.SSR', ssr);
|
||||||
|
|
||||||
|
if (!id.endsWith('.svelte')) {
|
||||||
|
return {
|
||||||
|
code,
|
||||||
|
map: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const compiled = svelte.compile(code, {
|
||||||
|
filename: id,
|
||||||
|
generate: ssr ? 'ssr' : 'dom',
|
||||||
|
hydratable: true,
|
||||||
|
css: 'injected'
|
||||||
|
});
|
||||||
|
|
||||||
|
return compiled.js;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const client_plugin = create_plugin();
|
||||||
|
const ssr_plugin = create_plugin(true);
|
||||||
|
|
||||||
|
const watcher = watch([
|
||||||
|
{
|
||||||
|
input: 'src/entry-client.js',
|
||||||
|
output: {
|
||||||
|
dir: 'dist',
|
||||||
|
format: 'esm',
|
||||||
|
sourcemap: true
|
||||||
|
},
|
||||||
|
plugins: [client_plugin, serve('dist')]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: 'src/entry-server.js',
|
||||||
|
output: {
|
||||||
|
dir: 'dist-ssr',
|
||||||
|
format: 'iife',
|
||||||
|
indent: false
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
ssr_plugin,
|
||||||
|
{
|
||||||
|
async generateBundle(_, bundle) {
|
||||||
|
const result = bundle['entry-server.js'];
|
||||||
|
const mod = (0, eval)(result.code);
|
||||||
|
const { html } = mod.render();
|
||||||
|
|
||||||
|
writeFileSync(
|
||||||
|
'dist/index.html',
|
||||||
|
readFileSync('src/template.html', 'utf-8')
|
||||||
|
.replace('<!--app-html-->', html)
|
||||||
|
.replace('<!--app-title-->', svelte.VERSION)
|
||||||
|
);
|
||||||
|
writeFileSync('dist/version.json', Date.now().toString());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
onwarn(warning, handler) {
|
||||||
|
if (warning.code === 'MISSING_NAME_OPTION_FOR_IIFE_EXPORT') return;
|
||||||
|
handler(warning);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
watcher
|
||||||
|
.on('change', (id) => {
|
||||||
|
console.log(`changed ${id}`);
|
||||||
|
})
|
||||||
|
.on('event', (event) => {
|
||||||
|
if (event.code === 'ERROR') {
|
||||||
|
console.error(event.error);
|
||||||
|
} else if (event.code === 'BUNDLE_END') {
|
||||||
|
console.log(`Generated ${event.output} in ${event.duration}ms`);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in new issue