chore: add svelte-kit demo

nonzzz · Jan 8, 2024 · 2c4d195 · 2c4d195
1 parent b4d35e5
commit 2c4d195
Show file tree

Hide file tree

Showing 11 changed files with 317 additions and 300 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ types
 .tmpl
 coverage
 .DS_Store
+.svelte-kit
 
 yarn-debug.log*
 yarn-error.log*

diff --git a/examples/sveltekit-demo/package.json b/examples/sveltekit-demo/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "svelttekit-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.2.7",
+    "vite": "^5.0.11",
+    "vite-plugin-stylex-dev": "workspace:*"
+  }
+}
diff --git a/examples/sveltekit-demo/src/app.html b/examples/sveltekit-demo/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/examples/sveltekit-demo/src/routes/+page.svelte b/examples/sveltekit-demo/src/routes/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	let count = 0;
+	const incr = () => count++;
+	const decr = () => count--;
+</script>
+
+
+<h1 {...attrs(stylex.props(styles.foo))}>SvelteKit ♥️ StyleX</h1>
+<div>
+	<button on:click={decr}>-</button>
+	{count}
+	<button on:click={incr}>+</button>
+</div>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<script context="module" lang="ts">
+	import * as stylex from '@stylexjs/stylex';
+  import {globalTokens} from '../styles/globalTokens.stylex';
+  import {attrs} from '../styles/utils';
+
+  const styles = stylex.create({
+    foo: {
+      color: globalTokens.green,
+      fontFamily: 'system-ui, sans-serif',
+      fontWeight: 200,
+      fontSize: '4rem',
+    },
+  });
+</script>
diff --git a/examples/sveltekit-demo/src/styles/globalTokens.stylex.ts b/examples/sveltekit-demo/src/styles/globalTokens.stylex.ts
@@ -0,0 +1,6 @@
+import * as stylex from '@stylexjs/stylex'
+
+export const globalTokens = stylex.defineVars({
+  green: 'green',
+  red: 'red'
+})
diff --git a/examples/sveltekit-demo/src/styles/utils.ts b/examples/sveltekit-demo/src/styles/utils.ts
@@ -0,0 +1,18 @@
+export const attrs = ({
+  className,
+  style
+}: Readonly<{
+  className?: string | undefined;
+  style?: { [key: string]: string | number };
+}>) => {
+  const result: { class?: string; style?: string } = {}
+  if (className != null) {
+    result.class = className
+  }
+  if (style != null) {
+    result.style = Object.entries(style)
+      .map(([key, value]) => `${key}: ${value}`)
+      .join('; ')
+  }
+  return result
+}
diff --git a/examples/sveltekit-demo/svelte.config.js b/examples/sveltekit-demo/svelte.config.js
@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter()
+  }
+}
+
+export default config
diff --git a/examples/sveltekit-demo/tsconfig.json b/examples/sveltekit-demo/tsconfig.json
@@ -0,0 +1,3 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/examples/sveltekit-demo/vite.config.js b/examples/sveltekit-demo/vite.config.js
@@ -0,0 +1,13 @@
+import path from 'path'
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+import { stylexPlugin } from 'vite-plugin-stylex-dev'
+
+export default defineConfig({
+  plugins: [sveltekit(), stylexPlugin({ include: /\.(mjs|js|ts|vue|jsx|tsx|svelte)(\?.*|)$/ })],
+  server: {
+    fs: {
+      allow: [path.resolve('../../../kit')]
+    }
+  }
+})
diff --git a/package.json b/package.json
@@ -71,7 +71,8 @@
     "magic-string": "^0.30.5"
   },
   "resolutions": {
-    "sharp": "0.32.6"
+    "sharp": "0.32.6",
+    "vite": "^5.0.11"
   },
   "ava": {
     "files": [