chore: add more examples (#7)

* chore: add astro demo

* test: add path-alias case

* chore: add waku demo

.yarnrc.yml

@@ -18,4 +18,6 @@ packageExtensions:
     "unplugin-vue-router@*":
       { dependencies: { "@vue/compiler-sfc": "^3.3.13" } },
     "@nuxt/vite-builder@*": { dependencies: { "ofetch": "^1.3.3" } },
+    "waku@*":
+      { dependencies: { "react-dom": "18.3.0-canary-1d5667a12-20240102" } },
   }

__tests__/fixtures/path-alias/main.ts

@@ -0,0 +1,12 @@
+import { create, props } from '@stylexjs/stylex'
+import { colors } from '@/tokens/color.stylex'
+
+const styles = create({
+  black: {
+    color: colors.black
+  }
+})
+
+const { className } = props(styles.black)
+
+export { className }

__tests__/fixtures/path-alias/tokens/color.stylex.ts

@@ -0,0 +1,5 @@
+import { defineVars } from '@stylexjs/stylex'
+
+export const colors = defineVars({
+  black: '#000'
+})

__tests__/fixtures/path-alias/tsconfig.json

@@ -0,0 +1,9 @@
+
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["*"],
+        }
+    }
+}

__tests__/plugin.spec.ts

@@ -92,3 +92,34 @@ test('pxtorem suite should transform px to rem', async (t) => {
   await sleep()
   t.is(css, '.x1j61zf2{font-size:1rem}\n')
 })
+
+test('path-alias suite should be work', async (t) => {
+  const { js } = await mockBuild('path-alias', 
+    { vite: 
+      { 
+        resolve: {
+          alias: {
+            '@': '.'
+          }
+        },
+        build: {
+          minify: false
+        }
+      }
+    })
+  await sleep()
+  t.is(js, `import { defineVars, create, props } from "@stylexjs/stylex";
+const colors = defineVars({
+  black: "#000"
+});
+const styles = create({
+  black: {
+    color: colors.black
+  }
+});
+const { className } = props(styles.black);
+export {
+  className
+};
+`)
+})

examples/astro-demo/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/astro-demo/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/astro-demo/README.md

@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

examples/astro-demo/astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config'
+import { stylexPlugin } from 'vite-plugin-stylex-dev'
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [stylexPlugin({ include: /\.(mjs|js|ts|vue|jsx|tsx|astro)(\?.*|)$/ })]
+  }
+})

examples/astro-demo/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "astro-demo",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^4.1.1",
+    "vite-plugin-stylex-dev": "workspace:*"
+  }
+}

examples/astro-demo/src/components/Card.astro

@@ -0,0 +1,66 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+import {styles} from './style'
+
+import stylex from '@stylexjs/stylex'
+
+---
+
+<li class="link-card">
+	<button {...stylex.props(styles.Button)}>Action</button>
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

examples/astro-demo/src/components/style.ts

@@ -0,0 +1,7 @@
+import stylex from '@stylexjs/stylex'
+
+export const styles = stylex.create({
+  Button: {
+    color: 'pink'
+  }
+})

examples/astro-demo/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

examples/astro-demo/src/layouts/Layout.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #13151a;
+		background-size: 224px;
+	}
+	code {
+		font-family:
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
+	}
+</style>