docs: added bun and vite examples

TommasoAmici · Jul 18, 2023 · e497784 · e497784
1 parent 4bd2284
commit e497784
Show file tree

Hide file tree

Showing 25 changed files with 477 additions and 0 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/examples/.readme/image.png b/examples/.readme/image.png
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,15 @@
+# Examples
+
+This directory shows examples of using `tw-lite` with different bundlers.
+
+Before running the examples you'll want to first install dependencies and
+build the `tw-lite` package, since it's linked using npm workspace symlinks.
+
+```sh
+bun install
+cd packages/tw-lite && bun run build
+```
+
+All examples use the same code, and they should all show the same result.
+
+![Screenshot of example](./.readme/image.png)
diff --git a/examples/bun/.gitignore b/examples/bun/.gitignore
@@ -0,0 +1,169 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
diff --git a/examples/bun/README.md b/examples/bun/README.md
@@ -0,0 +1,13 @@
+# Example Bun
+
+This example shows how to use `tw-lite` with Bun.
+
+```sh
+cd examples/react
+bun run build
+bun run start
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the example in action. Here's a screenshot:
+
+![Screenshot of example](./.readme/image.png)
diff --git a/examples/bun/build.ts b/examples/bun/build.ts
@@ -0,0 +1,12 @@
+import { execSync } from "node:child_process";
+
+console.time("tailwindcss");
+execSync("bun tailwindcss -i ./src/index.css -o ./out/index.css");
+console.timeEnd("tailwindcss");
+
+console.time("bun build");
+await Bun.build({
+  entrypoints: ["src/index.tsx"],
+  outdir: "./out",
+});
+console.timeEnd("bun build");
diff --git a/examples/bun/index.html b/examples/bun/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/out/index.css" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/out/index.js"></script>
+  </body>
+</html>
diff --git a/examples/bun/package.json b/examples/bun/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/bun",
+  "module": "index.ts",
+  "type": "module",
+  "scripts": {
+    "build": "bun run build.ts",
+    "start": "bunx serve"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "bun-types": "latest",
+    "tailwindcss": "^3.3.3"
+  },
+  "peerDependencies": {
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tw-lite": "workspace:packages/tw-lite"
+  }
+}
diff --git a/examples/bun/src/App.tsx b/examples/bun/src/App.tsx
@@ -0,0 +1,32 @@
+import { tw } from "tw-lite";
+
+function MyComponent({
+  className,
+  someProp,
+}: {
+  className?: string;
+  someProp: boolean;
+}) {
+  return (
+    <div className={className}>My Component {someProp ? "true" : "false"}</div>
+  );
+}
+
+const StyledMyComponent = tw(MyComponent)`text-red-500`;
+
+export const Column = tw("div")`flex flex-col gap-4 w-64 mx-auto`;
+export const Button = tw("button")`p-4 rounded-sm`;
+export const ButtonRed = tw(Button)`bg-red-700 text-white`;
+export const ButtonBlue = tw(Button)`bg-blue-700 text-white`;
+
+export function App() {
+  return (
+    <Column>
+      <ButtonRed>Hello Red</ButtonRed>
+      <ButtonBlue>Hello Blue</ButtonBlue>
+      <ButtonBlue className="text-xl p-8">Hello Blue big</ButtonBlue>
+      <StyledMyComponent someProp={true} />
+      <StyledMyComponent someProp={false} />
+    </Column>
+  );
+}
diff --git a/examples/bun/src/index.css b/examples/bun/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/bun/src/index.tsx b/examples/bun/src/index.tsx
@@ -0,0 +1,5 @@
+import * as ReactDOM from "react-dom/client";
+import { App } from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/examples/bun/tailwind.config.js b/examples/bun/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["src/**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/examples/bun/tsconfig.json b/examples/bun/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "noEmit": true,
+    "types": [
+      "bun-types" // add Bun global
+    ]
+  }
+}
diff --git a/examples/vite/.gitignore b/examples/vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@examples/vite",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.26",
+    "tailwindcss": "^3.3.3",
+    "tw-lite": "workspace:packages/tw-lite",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.0"
+  }
+}
diff --git a/examples/vite/postcss.config.js b/examples/vite/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};