Add data/svelte hello world

ewowi · Dec 27, 2024 · 8717049 · 8717049
1 parent b487c87
commit 8717049
Show file tree

Hide file tree

Showing 8 changed files with 1,357 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 .pio
 node_modules
+dist
 .vscode
 .DS_Store
 .idea
diff --git a/data/svelte/App.svelte b/data/svelte/App.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Counter from './Counter.svelte'
+  </script>
+
+  <main>
+	<h1>StarBase + Vite + Svelte</h1>
+
+	<div class="card">
+	  <Counter />
+	</div>
+
+	<p>
+	  Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
+	</p>
+
+	<p class="read-the-docs">
+	  Click on the Vite and Svelte logos to learn more
+	</p>
+  </main>
+
+  <style>
+	.read-the-docs {
+	  color: #888;
+	}
+  </style>
+
diff --git a/data/svelte/Counter.svelte b/data/svelte/Counter.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    let count: number = $state(0)
+    const increment = () => {
+      count += 1
+    }
+  </script>
+
+  <button onclick={increment}>
+    count is {count}
+  </button>
+
diff --git a/data/svelte/index.html b/data/svelte/index.html
@@ -0,0 +1,26 @@
+<!-- 
+  Step 1: hello world
+  * create minimal app: https://svelte.dev/docs/svelte/getting-started
+    * vite-plugin-svelte: copy paste the minimal stuff here in folder svelte
+    * myapp: compare what is here
+    * goto svelte folder
+    * npm install
+    * npm run build create dist folder
+    * npm run dev -- --open (Live Server)
+  * compare with other deployments:
+    * https://github.com/theelims/ESP32-sveltekit : .py to create zipped .html
+    * https://github.com/BCsabaEngine/svelteesp32
+-->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.ts"></script>
+  </body>
+</html>
diff --git a/data/svelte/main.ts b/data/svelte/main.ts
@@ -0,0 +1,8 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app