chore(examples): add Vite example using svelte v5

metonym · Jul 27, 2024 · ac9848a · ac9848a
1 parent 3746205
commit ac9848a
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 0 deletions.
diff --git a/examples/vite@svelte-5/.gitignore b/examples/vite@svelte-5/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist
diff --git a/examples/vite@svelte-5/README.md b/examples/vite@svelte-5/README.md
@@ -0,0 +1,17 @@
+# examples/vite@svelte-5
+
+> `svelte-highlight` Vite set-up.
+
+## Available Scripts
+
+### `bun dev`
+
+Runs the project in development mode and watches for any changes.
+
+### `bun run build`
+
+Builds the project for production.
+
+### `bun preview`
+
+Preview the app locally. Run `bun run build` first.
diff --git a/examples/vite@svelte-5/bun.lockb b/examples/vite@svelte-5/bun.lockb
diff --git a/examples/vite@svelte-5/index.html b/examples/vite@svelte-5/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <script type="module">
+      import { mount } from "svelte";
+      import App from "./src/App.svelte";
+
+      mount(App, { target: document.body });
+    </script>
+  </body>
+</html>
diff --git a/examples/vite@svelte-5/package.json b/examples/vite@svelte-5/package.json
@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "latest",
+    "@tsconfig/svelte": "latest",
+    "svelte": "5.0.0-next.200",
+    "svelte-highlight": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  }
+}
diff --git a/examples/vite@svelte-5/src/App.svelte b/examples/vite@svelte-5/src/App.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Highlight } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+  import DynamicImport from "./DynamicImport.svelte";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<Highlight language={typescript} {code} />
+
+<DynamicImport />
diff --git a/examples/vite@svelte-5/src/DynamicImport.svelte b/examples/vite@svelte-5/src/DynamicImport.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { HighlightAuto } from "svelte-highlight";
+
+  let component: typeof HighlightAuto;
+  let styles: string;
+
+  onMount(async () => {
+    component = (await import("svelte-highlight")).HighlightAuto;
+    styles = (await import("svelte-highlight/styles/atom-one-dark")).default;
+  });
+</script>
+
+<svelte:head>
+  {#if styles}
+    {@html styles}
+  {/if}
+</svelte:head>
+
+<svelte:component
+  this={component}
+  langtag
+  code={`body {\n  padding: 0;\n  color: red;\n}`}
+/>
diff --git a/examples/vite@svelte-5/src/global.d.ts b/examples/vite@svelte-5/src/global.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/examples/vite@svelte-5/tsconfig.json b/examples/vite@svelte-5/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"]
+}
diff --git a/examples/vite@svelte-5/vite.config.ts b/examples/vite@svelte-5/vite.config.ts
@@ -0,0 +1,10 @@
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import type { UserConfig } from "vite";
+
+export default {
+  plugins: [
+    svelte({
+      preprocess: vitePreprocess(),
+    }),
+  ],
+} satisfies UserConfig;