diff --git a/bun.lockb b/bun.lockb index 322a992..7903e12 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/examples/.readme/image.png b/examples/.readme/image.png new file mode 100644 index 0000000..4192580 Binary files /dev/null and b/examples/.readme/image.png differ diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..20c404b --- /dev/null +++ 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 new file mode 100644 index 0000000..f81d56e --- /dev/null +++ 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 new file mode 100644 index 0000000..d3f1e8c --- /dev/null +++ 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 new file mode 100644 index 0000000..2b456fa --- /dev/null +++ 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 new file mode 100644 index 0000000..d2f58db --- /dev/null +++ b/examples/bun/index.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/examples/bun/package.json b/examples/bun/package.json new file mode 100644 index 0000000..ce8d8a1 --- /dev/null +++ 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 new file mode 100644 index 0000000..a37320e --- /dev/null +++ b/examples/bun/src/App.tsx @@ -0,0 +1,32 @@ +import { tw } from "tw-lite"; + +function MyComponent({ + className, + someProp, +}: { + className?: string; + someProp: boolean; +}) { + return ( +
My Component {someProp ? "true" : "false"}
+ ); +} + +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 ( + + Hello Red + Hello Blue + Hello Blue big + + + + ); +} diff --git a/examples/bun/src/index.css b/examples/bun/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ 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 new file mode 100644 index 0000000..93516a9 --- /dev/null +++ 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(); diff --git a/examples/bun/tailwind.config.js b/examples/bun/tailwind.config.js new file mode 100644 index 0000000..3b8e7a9 --- /dev/null +++ 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 new file mode 100644 index 0000000..fd86b75 --- /dev/null +++ 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 new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ 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 new file mode 100644 index 0000000..e0d1c84 --- /dev/null +++ b/examples/vite/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/examples/vite/package.json b/examples/vite/package.json new file mode 100644 index 0000000..6e4c47c --- /dev/null +++ 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 new file mode 100644 index 0000000..2aa7205 --- /dev/null +++ b/examples/vite/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx new file mode 100644 index 0000000..a37320e --- /dev/null +++ b/examples/vite/src/App.tsx @@ -0,0 +1,32 @@ +import { tw } from "tw-lite"; + +function MyComponent({ + className, + someProp, +}: { + className?: string; + someProp: boolean; +}) { + return ( +
My Component {someProp ? "true" : "false"}
+ ); +} + +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 ( + + Hello Red + Hello Blue + Hello Blue big + + + + ); +} diff --git a/examples/vite/src/index.css b/examples/vite/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/examples/vite/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx new file mode 100644 index 0000000..e32ed1b --- /dev/null +++ b/examples/vite/src/main.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { App } from "./App.tsx"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + +); diff --git a/examples/vite/src/vite-env.d.ts b/examples/vite/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/examples/vite/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/vite/tailwind.config.js b/examples/vite/tailwind.config.js new file mode 100644 index 0000000..3b8e7a9 --- /dev/null +++ b/examples/vite/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["src/**/*.tsx"], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json new file mode 100644 index 0000000..a7fc6fb --- /dev/null +++ b/examples/vite/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/vite/tsconfig.node.json b/examples/vite/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/examples/vite/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts new file mode 100644 index 0000000..5a33944 --- /dev/null +++ b/examples/vite/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +})