Skip to content

Commit 73fdd9f

Browse files
PhoebePhoebe
Phoebe
authored and
Phoebe
committed
add stuff
0 parents  commit 73fdd9f

25 files changed

+3407
-0
lines changed

‎.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
indent_style = tab
7+
indent_size = 2
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
11+
[test/**/expected.css]
12+
insert_final_newline = false
13+
14+
[{package.json,.travis.yml,.eslintrc.json}]
15+
indent_style = space

‎.gitignore

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
pnpm-lock.yaml
11+
12+
node_modules
13+
dist
14+
dist-ssr
15+
*.local
16+
17+
# Editor directories and files
18+
.vscode/*
19+
!.vscode/extensions.json
20+
.idea
21+
.DS_Store
22+
*.suo
23+
*.ntvs*
24+
*.njsproj
25+
*.sln
26+
*.sw?

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["svelte.svelte-vscode"]
3+
}

‎README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Svelte + TS + Vite
2+
3+
This template should help get you started developing with Svelte and TypeScript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
8+
9+
## Need an official Svelte framework?
10+
11+
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
12+
13+
## Technical considerations
14+
15+
**Why use this over SvelteKit?**
16+
17+
- It brings its own routing solution which might not be preferable for some users.
18+
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
19+
20+
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
21+
22+
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
23+
24+
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
25+
26+
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
27+
28+
**Why include `.vscode/extensions.json`?**
29+
30+
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
31+
32+
**Why enable `allowJs` in the TS template?**
33+
34+
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
35+
36+
**Why is HMR not preserving my local component state?**
37+
38+
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
39+
40+
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
41+
42+
```ts
43+
// store.ts
44+
// An extremely simple external store
45+
import { writable } from 'svelte/store'
46+
export default writable(0)
47+
```

‎index.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+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Svelte + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "cp-canvas",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"check": "svelte-check --tsconfig ./tsconfig.json"
11+
},
12+
"devDependencies": {
13+
"@sveltejs/vite-plugin-svelte": "^1.1.0",
14+
"@tsconfig/svelte": "^3.0.0",
15+
"svelte": "^3.52.0",
16+
"svelte-check": "^2.9.2",
17+
"svelte-preprocess": "^4.10.7",
18+
"tslib": "^2.4.0",
19+
"typescript": "^4.6.4",
20+
"vite": "^3.2.3"
21+
}
22+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.svelte

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import Background from "./lib/Background.svelte";
3+
import SubPixel from "./lib/SubPixel.svelte";
4+
import Canvas from "./lib/Canvas.svelte";
5+
import ClassPad from "./lib/ClassPad.svelte";
6+
import { doDrawPixels } from "./lib/drawing";
7+
import TouchTest from "./lib/TouchTest.svelte";
8+
</script>
9+
10+
<main>
11+
<div class="card">
12+
<ClassPad>
13+
<Canvas slot="screen" />
14+
<!-- <CanvasLoop slot="screen">
15+
<Background color="hsl(0, 0%, 10%)">
16+
<SubPixel divisions={30} color="hsla(0, 0%, 100%, 0.5)" />
17+
</Background>
18+
<TouchTest />
19+
</CanvasLoop> -->
20+
</ClassPad>
21+
22+
<button on:click={() => doDrawPixels()}>DrawThings</button>
23+
</div>
24+
</main>
25+
26+
<style>
27+
button {
28+
position: fixed;
29+
top: 2rem;
30+
left: 6rem;
31+
}
32+
</style>

‎src/app.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
.card {
41+
padding: 2em;
42+
}
43+
44+
#app {
45+
max-width: 1280px;
46+
margin: 0 auto;
47+
padding: 2rem;
48+
text-align: center;
49+
}
50+
51+
button {
52+
border-radius: 8px;
53+
border: 1px solid transparent;
54+
padding: 0.6em 1.2em;
55+
font-size: 1em;
56+
font-weight: 500;
57+
font-family: inherit;
58+
background-color: #1a1a1a;
59+
cursor: pointer;
60+
transition: border-color 0.25s;
61+
}
62+
button:hover {
63+
border-color: #646cff;
64+
}
65+
button:focus,
66+
button:focus-visible {
67+
outline: 4px auto -webkit-focus-ring-color;
68+
}
69+
70+
@media (prefers-color-scheme: light) {
71+
:root {
72+
color: #213547;
73+
background-color: #ffffff;
74+
}
75+
a:hover {
76+
color: #747bff;
77+
}
78+
button {
79+
background-color: #f9f9f9;
80+
}
81+
}

‎src/assets/svelte.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/lib/Background.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
import { renderable } from "../specs";
3+
export let color = null;
4+
5+
renderable((props) => {
6+
const { context, width, height } = props;
7+
context.clearRect(0, 0, width, height);
8+
if (color) {
9+
context.fillStyle = color;
10+
context.fillRect(0, 0, width, height);
11+
}
12+
});
13+
</script>
14+
15+
<!-- The following allows this component to nest children -->
16+
<slot />

‎src/lib/Canvas.svelte

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<script lang="ts">
2+
import {
3+
onMount,
4+
onDestroy,
5+
setContext,
6+
createEventDispatcher,
7+
} from "svelte";
8+
9+
import {
10+
key,
11+
width,
12+
height,
13+
canvas as canvasStore,
14+
context as contextStore,
15+
pixelRatio,
16+
props,
17+
time,
18+
} from "../specs";
19+
20+
export let killLoopOnError = true;
21+
export let attributes = {};
22+
23+
const dispatch = createEventDispatcher();
24+
25+
let listeners = [];
26+
let canvas: HTMLCanvasElement;
27+
let context: CanvasRenderingContext2D;
28+
let frame;
29+
30+
onMount(() => {
31+
// prepare canvas stores
32+
context = canvas.getContext("2d", attributes) as CanvasRenderingContext2D;
33+
canvasStore.set(canvas);
34+
contextStore.set(context);
35+
});
36+
37+
setContext(key, {
38+
add(fn) {
39+
this.remove(fn);
40+
listeners.push(fn);
41+
},
42+
remove(fn) {
43+
const idx = listeners.indexOf(fn);
44+
if (idx >= 0) listeners.splice(idx, 1);
45+
},
46+
});
47+
48+
// function render(dt) {
49+
// context.save();
50+
// context.scale($pixelRatio, $pixelRatio);
51+
// listeners.forEach((entity) => {
52+
// try {
53+
// if (entity.mounted && entity.ready && entity.render) {
54+
// entity.render($props, dt);
55+
// }
56+
// } catch (err) {
57+
// console.error(err);
58+
// if (killLoopOnError) {
59+
// cancelAnimationFrame(frame);
60+
// console.warn("Animation loop stopped due to an error");
61+
// }
62+
// }
63+
// });
64+
// context.restore();
65+
// }
66+
67+
function handleResize() {
68+
//TODO: calculate pixel ratio
69+
/*
70+
let minW = window.innerWidth / $width;
71+
let minH = window.innerHeight / $height;
72+
let ratio = Math.floor(Math.min(minW, minH));
73+
if (ratio > 1) {
74+
// window.devicePixelRatio
75+
pixelRatio.set(ratio * window.devicePixelRatio);
76+
}
77+
// width.set(window.innerWidth);
78+
// height.set(window.innerHeight);
79+
*/
80+
}
81+
82+
function handleTouchDown(ev) {
83+
dispatch("touchDown", {
84+
event: ev,
85+
});
86+
}
87+
function handleTouchUp(ev) {
88+
dispatch("touchUp", {
89+
event: ev,
90+
});
91+
}
92+
function handleTouchMove(ev) {
93+
dispatch("touchMove", {
94+
event: ev,
95+
});
96+
}
97+
98+
// function createLoop(fn) {
99+
// let elapsed = 0;
100+
// let lastTime = performance.now();
101+
// (function loop() {
102+
// frame = requestAnimationFrame(loop);
103+
// const beginTime = performance.now();
104+
// const dt = (beginTime - lastTime) / 1000;
105+
// lastTime = beginTime;
106+
// elapsed += dt;
107+
// fn(elapsed, dt);
108+
// })();
109+
// return () => {
110+
// cancelAnimationFrame(frame);
111+
// };
112+
// }
113+
</script>
114+
115+
<canvas
116+
bind:this={canvas}
117+
width={$width * $pixelRatio}
118+
height={$height * $pixelRatio}
119+
style="width: {$width}px; height: {$height}px;"
120+
on:mousedown={handleTouchDown}
121+
on:mouseup={handleTouchUp}
122+
on:mousemove={handleTouchMove}
123+
/>
124+
<svelte:window on:resize|passive={handleResize} />
125+
<slot />

0 commit comments

Comments
 (0)