chore(react): add dev playground

johannschopplich · Apr 20, 2023 · 5c11bd3 · 5c11bd3
1 parent d18ab8a
commit 5c11bd3
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 2 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -41,6 +41,8 @@
   ],
   "scripts": {
     "build": "unbuild",
+    "dev": "pnpm -C playground run dev",
+    "dev:build": "pnpm -C playground run build",
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -52,6 +54,8 @@
   "devDependencies": {
     "@types/node": "^18.15.12",
     "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0-beta.1",
     "fast-blurhash": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/packages/react/playground/App.tsx b/packages/react/playground/App.tsx
@@ -0,0 +1,19 @@
+import { LazyImage } from '../src'
+
+function App() {
+  return (
+    <>
+      <div>
+        <LazyImage
+          blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+          auto-sizes
+          width="640"
+          height="640"
+        />
+      </div>
+    </>
+  )
+}
+
+export default App
diff --git a/packages/react/playground/index.html b/packages/react/playground/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@unlazy/react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/react/playground/main.tsx b/packages/react/playground/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/packages/react/playground/package.json b/packages/react/playground/package.json
@@ -0,0 +1,9 @@
+{
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "vite build",
+      "preview": "vite preview"
+    }
+  }
diff --git a/packages/react/playground/vite-env.d.ts b/packages/react/playground/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/react/playground/vite.config.ts b/packages/react/playground/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -2,8 +2,9 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     /* Limit global types to those in the current package */
-    "typeRoots": ["./node_modules/@types"]
+    "typeRoots": ["./node_modules/@types"],
+    "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["src", "playground"],
   "exclude": ["**/dist"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml