├── .gitignore
├── public
├── favicon.png
├── index.html
└── global.css
├── src
├── main.js
└── App.svelte
├── README.md
├── package.json
└── rollup.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/build
4 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rich-Harris/svelte-gl-boxes/HEAD/public/favicon.png
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 |
3 | const app = new App({
4 | target: document.body,
5 | props: {
6 | name: 'world'
7 | }
8 | });
9 |
10 | export default app;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-gl-boxes
2 |
3 | A quick demo I made for [this Twitter thread](https://twitter.com/Rich_Harris/status/1200805237948325888).
4 |
5 | https://svelte-gl-boxes.surge.sh/
6 |
7 |
8 | ## Running locally
9 |
10 | Clone the repo, install dependencies, `npm run dev`, open [localhost:5000](http://localhost:5000):
11 |
12 | ```
13 | git clone https://github.com/Rich-Harris/svelte-gl-boxes
14 | cd svelte-gl-boxes
15 | npm i
16 | npm run dev
17 | ```
18 |
19 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "build": "rollup -c",
6 | "dev": "rollup -c -w",
7 | "start": "sirv public"
8 | },
9 | "devDependencies": {
10 | "rollup": "^1.12.0",
11 | "rollup-plugin-commonjs": "^10.0.0",
12 | "rollup-plugin-glslify": "^1.1.3",
13 | "rollup-plugin-livereload": "^1.0.0",
14 | "rollup-plugin-node-resolve": "^5.2.0",
15 | "rollup-plugin-svelte": "^5.0.3",
16 | "rollup-plugin-terser": "^5.1.2",
17 | "svelte": "^3.16.0"
18 | },
19 | "dependencies": {
20 | "@sveltejs/gl": "0.0.30",
21 | "sirv-cli": "^0.4.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 |
15 | a {
16 | color: rgb(0,100,200);
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | a:visited {
25 | color: rgb(0,80,160);
26 | }
27 |
28 | label {
29 | display: block;
30 | }
31 |
32 | input, button, select, textarea {
33 | font-family: inherit;
34 | font-size: inherit;
35 | padding: 0.4em;
36 | margin: 0 0 0.5em 0;
37 | box-sizing: border-box;
38 | border: 1px solid #ccc;
39 | border-radius: 2px;
40 | }
41 |
42 | input:disabled {
43 | color: #ccc;
44 | }
45 |
46 | input[type="range"] {
47 | height: 0;
48 | }
49 |
50 | button {
51 | color: #333;
52 | background-color: #f4f4f4;
53 | outline: none;
54 | }
55 |
56 | button:disabled {
57 | color: #999;
58 | }
59 |
60 | button:not(:disabled):active {
61 | background-color: #ddd;
62 | }
63 |
64 | button:focus {
65 | border-color: #666;
66 | }
67 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import glslify from 'rollup-plugin-glslify';
5 | import livereload from 'rollup-plugin-livereload';
6 | import { terser } from 'rollup-plugin-terser';
7 |
8 | const production = !process.env.ROLLUP_WATCH;
9 |
10 | export default {
11 | input: 'src/main.js',
12 | output: {
13 | sourcemap: true,
14 | format: 'iife',
15 | name: 'app',
16 | file: 'public/build/bundle.js'
17 | },
18 | plugins: [
19 | svelte({
20 | // enable run-time checks when not in production
21 | dev: !production,
22 | // we'll extract any component CSS out into
23 | // a separate file — better for performance
24 | css: css => {
25 | css.write('public/build/bundle.css');
26 | }
27 | }),
28 |
29 | // If you have external dependencies installed from
30 | // npm, you'll most likely need these plugins. In
31 | // some cases you'll need additional configuration —
32 | // consult the documentation for details:
33 | // https://github.com/rollup/rollup-plugin-commonjs
34 | resolve({
35 | browser: true,
36 | dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
37 | }),
38 | glslify(),
39 | commonjs(),
40 |
41 | // In dev mode, call `npm run start` once
42 | // the bundle has been generated
43 | !production && serve(),
44 |
45 | // Watch the `public` directory and refresh the
46 | // browser on changes when not in production
47 | !production && livereload('public'),
48 |
49 | // If we're building for production (npm run build
50 | // instead of npm run dev), minify
51 | production && terser()
52 | ],
53 | watch: {
54 | clearScreen: false
55 | }
56 | };
57 |
58 | function serve() {
59 | let started = false;
60 |
61 | return {
62 | writeBundle() {
63 | if (!started) {
64 | started = true;
65 |
66 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
67 | stdio: ['ignore', 'inherit', 'inherit'],
68 | shell: true
69 | });
70 | }
71 | }
72 | };
73 | }
--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
1 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | {#each boxes as r}
49 |
60 | {/each}
61 |
62 |
63 |
64 |
73 |
74 |
75 |
79 |
80 |
81 |
--------------------------------------------------------------------------------