Skip to content

Commit 15bdadb

Browse files
gtm-nayangtm-nayan
authored
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 config
1 parent 5902cca commit 15bdadb

File tree

13 files changed

+272
-1
lines changed

13 files changed

+272
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.idea
22
.DS_Store
3-
.vscode
3+
.vscode/*
4+
!.vscode/launch.json
45
node_modules
56
.eslintcache

‎.vscode/launch.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "chrome",
6+
"request": "launch",
7+
"name": "Playground: Browser",
8+
"url": "http://localhost:10001"
9+
},
10+
{
11+
"type": "node",
12+
"request": "launch",
13+
"runtimeArgs": ["--watch"],
14+
"name": "Playground: Server",
15+
"outputCapture": "std",
16+
"program": "start.js",
17+
"cwd": "${workspaceFolder}/packages/playground",
18+
"cascadeTerminateToConfigurations": ["Playground: Browser"]
19+
}
20+
],
21+
"compounds": [
22+
{
23+
"name": "Playground: Full",
24+
"configurations": ["Playground: Server", "Playground: Browser"]
25+
}
26+
]
27+
}

‎packages/playground/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
dist-ssr
3+
*.local

‎packages/playground/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
You may use this package to experiment with your changes to Svelte.
2+
3+
To prevent any changes you make in this directory from being accidentally committed, run `git update-index --skip-worktree ./**/*.*` in this directory.
4+
5+
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.
6+
7+
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.

‎packages/playground/jsconfig.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "Node",
4+
"target": "ESNext",
5+
"module": "ESNext",
6+
/**
7+
* svelte-preprocess cannot figure out whether you have
8+
* a value or a type, so tell TypeScript to enforce using
9+
* `import type` instead of `import` for Types.
10+
*/
11+
"verbatimModuleSyntax": true,
12+
"isolatedModules": true,
13+
"resolveJsonModule": true,
14+
/**
15+
* To have warnings / errors of the Svelte compiler at the
16+
* correct position, enable source maps by default.
17+
*/
18+
"sourceMap": true,
19+
"esModuleInterop": true,
20+
"skipLibCheck": true,
21+
"forceConsistentCasingInFileNames": true,
22+
/**
23+
* Typecheck JS in `.svelte` and `.js` files by default.
24+
* Disable this if you'd like to use dynamic types.
25+
*/
26+
"checkJs": true
27+
},
28+
/**
29+
* Use global.d.ts instead of compilerOptions.types
30+
* to avoid limiting type declarations.
31+
*/
32+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
33+
}

‎packages/playground/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "playground",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "node --watch start.js"
8+
},
9+
"devDependencies": {
10+
"rollup": "^3.20.2",
11+
"rollup-plugin-serve": "^2.0.2",
12+
"svelte": "workspace:*"
13+
}
14+
}

‎packages/playground/src/App.svelte

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
Hello world!
3+
</div>

‎packages/playground/src/entry-client.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import App from './App.svelte';
2+
3+
new App({
4+
target: document.getElementById('app'),
5+
hydrate: true
6+
});
7+
8+
function get_version() {
9+
return fetch('/version.json').then((r) => r.json());
10+
}
11+
12+
let prev = await get_version();
13+
14+
// Mom: We have live reloading at home
15+
// Live reloading at home:
16+
while (true) {
17+
await new Promise((r) => setTimeout(r, 2500));
18+
try {
19+
const version = await get_version();
20+
if (prev !== version) {
21+
window.location.reload();
22+
}
23+
} catch {}
24+
}

‎packages/playground/src/entry-server.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import App from './App.svelte';
2+
3+
export function render() {
4+
// @ts-ignore
5+
return App.render();
6+
}

‎packages/playground/src/lib/Counter.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
let count = 0
3+
const increment = () => {
4+
count += 1
5+
}
6+
</script>
7+
8+
<button on:click={increment}>
9+
count is {count}
10+
</button>

‎packages/playground/src/template.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title><!--app-title--></title>
7+
<!--app-head-->
8+
</head>
9+
<body>
10+
<div id="app"><!--app-html--></div>
11+
<script type="module" src="/entry-client.js"></script>
12+
</body>
13+
</html>

‎packages/playground/start.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { readFileSync, writeFileSync } from 'node:fs';
2+
import path from 'node:path';
3+
import { watch } from 'rollup';
4+
import serve from 'rollup-plugin-serve';
5+
import * as svelte from '../svelte/src/compiler/index.js';
6+
7+
const __dirname = new URL('.', import.meta.url).pathname;
8+
9+
/** @returns {import('rollup').Plugin}*/
10+
function create_plugin(ssr = false) {
11+
return {
12+
name: 'custom-svelte-ssr-' + ssr,
13+
resolveId(id) {
14+
if (id === 'svelte') {
15+
return path.resolve(
16+
__dirname,
17+
ssr ? '../svelte/src/runtime/ssr.js' : '../svelte/src/runtime/index.js'
18+
);
19+
} else if (id.startsWith('svelte/')) {
20+
return path.resolve(__dirname, `../svelte/src/runtime/${id.slice(7)}/index.js`);
21+
}
22+
},
23+
transform(code, id) {
24+
code = code.replaceAll('import.meta.env.SSR', ssr);
25+
26+
if (!id.endsWith('.svelte')) {
27+
return {
28+
code,
29+
map: null
30+
};
31+
}
32+
33+
const compiled = svelte.compile(code, {
34+
filename: id,
35+
generate: ssr ? 'ssr' : 'dom',
36+
hydratable: true,
37+
css: 'injected'
38+
});
39+
40+
return compiled.js;
41+
}
42+
};
43+
}
44+
45+
const client_plugin = create_plugin();
46+
const ssr_plugin = create_plugin(true);
47+
48+
const watcher = watch([
49+
{
50+
input: 'src/entry-client.js',
51+
output: {
52+
dir: 'dist',
53+
format: 'esm',
54+
sourcemap: true
55+
},
56+
plugins: [client_plugin, serve('dist')]
57+
},
58+
{
59+
input: 'src/entry-server.js',
60+
output: {
61+
dir: 'dist-ssr',
62+
format: 'iife',
63+
indent: false
64+
},
65+
plugins: [
66+
ssr_plugin,
67+
{
68+
async generateBundle(_, bundle) {
69+
const result = bundle['entry-server.js'];
70+
const mod = (0, eval)(result.code);
71+
const { html } = mod.render();
72+
73+
writeFileSync(
74+
'dist/index.html',
75+
readFileSync('src/template.html', 'utf-8')
76+
.replace('<!--app-html-->', html)
77+
.replace('<!--app-title-->', svelte.VERSION)
78+
);
79+
writeFileSync('dist/version.json', Date.now().toString());
80+
}
81+
}
82+
],
83+
onwarn(warning, handler) {
84+
if (warning.code === 'MISSING_NAME_OPTION_FOR_IIFE_EXPORT') return;
85+
handler(warning);
86+
}
87+
}
88+
]);
89+
90+
watcher
91+
.on('change', (id) => {
92+
console.log(`changed ${id}`);
93+
})
94+
.on('event', (event) => {
95+
if (event.code === 'ERROR') {
96+
console.error(event.error);
97+
} else if (event.code === 'BUNDLE_END') {
98+
console.log(`Generated ${event.output} in ${event.duration}ms`);
99+
}
100+
});

‎pnpm-lock.yaml

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)