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
|
||||
.DS_Store
|
||||
.vscode
|
||||
.vscode/*
|
||||
!.vscode/launch.json
|
||||
node_modules
|
||||
.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