Shopify · sdcooke · Feb 17, 2025
diff --git a/apps/vite-web/.gitignore b/apps/vite-web/.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/apps/vite-web/README.md b/apps/vite-web/README.md
@@ -0,0 +1,11 @@
+# Vite + Web + Skia
+
+A simple react web app with `react-native-web`, `react-native-skia`, and `react-native-reanimated` that uses vite/esbuild for bundling.
+
+## Commands
+
+**Run**
+
+```console
+yarn dev
+```
diff --git a/apps/vite-web/index.html b/apps/vite-web/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 + Skia</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/vite-web/package.json b/apps/vite-web/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vite-web-skia",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "postinstall": "setup-skia-web public"
+  },
+  "dependencies": {
+    "@shopify/react-native-skia": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-native": "0.75.2",
+    "react-native-reanimated": "^3.16.5",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.15",
+    "@vitejs/plugin-react": "^4.3.4",
+    "globals": "^15.14.0",
+    "typescript": "^5.2.2",
+    "vite": "^6.1.0"
+  }
+}
diff --git a/apps/vite-web/public/.gitignore b/apps/vite-web/public/.gitignore
@@ -0,0 +1 @@
+canvaskit.wasm
diff --git a/apps/vite-web/src/AnimatedSquareCanvas.tsx b/apps/vite-web/src/AnimatedSquareCanvas.tsx
@@ -0,0 +1,42 @@
+import { Canvas, Rect } from "@shopify/react-native-skia/src";
+import { useEffect, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import {
+    useSharedValue,
+    withRepeat,
+    withSequence,
+    withTiming,
+} from "react-native-reanimated";
+
+const AnimatedSquareCanvas = () => {
+    const x = useSharedValue(0);
+    useEffect(() => {
+        x.value = withRepeat(
+            withSequence(
+                withTiming(100, { duration: 1000 }),
+                withTiming(0, { duration: 1000 })
+            ),
+            -1
+        );
+    }, [x]);
+
+    const width = useSharedValue(100);
+
+    const handlePress = () => {
+        width.value = 200;
+    };
+
+    return (
+        <View style={{ gap: 20 }}>
+            <TouchableOpacity onPress={handlePress}>
+                <Canvas style={{ width: "100%", height: "100%" }}>
+                    <Rect x={0} y={0} width={width} height={100} color="blue" />
+                </Canvas>
+            </TouchableOpacity>
+            <Canvas style={{ width: "100%", height: "100%" }}>
+                <Rect x={x} y={0} width={100} height={100} color="red" />
+            </Canvas>
+        </View>
+    );
+};
+export default AnimatedSquareCanvas;
diff --git a/apps/vite-web/src/App.tsx b/apps/vite-web/src/App.tsx
@@ -0,0 +1,13 @@
+import { WithSkiaWeb } from "@shopify/react-native-skia/src/web";
+
+function App() {
+  return (
+    <WithSkiaWeb
+      getComponent={() => import("./SkiaApp")}
+      fallback={null}
+      opts={{ locateFile: () => `/canvaskit.wasm` }}
+    />
+  );
+}
+
+export default App;
diff --git a/apps/vite-web/src/SkiaApp.tsx b/apps/vite-web/src/SkiaApp.tsx
@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+import AnimatedSquareCanvas from './AnimatedSquareCanvas';
+
+function SkiaApp() {
+  return (
+    <View style={{ alignItems: "center", flex: 1 }}>
+      <View style={{ width: 400, aspectRatio: 1 }}>
+        <AnimatedSquareCanvas />
+      </View>
+    </View>
+  )
+}
+
+export default SkiaApp;
diff --git a/apps/vite-web/src/index.css b/apps/vite-web/src/index.css
@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+}
diff --git a/apps/vite-web/src/main.tsx b/apps/vite-web/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/apps/vite-web/src/vite-env.d.ts b/apps/vite-web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/vite-web/tsconfig.json b/apps/vite-web/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}
diff --git a/apps/vite-web/vite.config.ts b/apps/vite-web/vite.config.ts
@@ -0,0 +1,54 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { flowPlugin, esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow';
+
+const extensions = [
+  ".web.mjs",
+  ".web.js",
+  ".web.mts",
+  ".web.ts",
+  ".web.jsx",
+  ".web.tsx",
+  ".mjs",
+  ".js",
+  ".mts",
+  ".ts",
+  ".jsx",
+  ".tsx",
+  ".json",
+];
+
+// https://vite.dev/config/
+export default defineConfig({
+  define: {
+    global: "self",
+    __DEV__: JSON.stringify(process.env.NODE_ENV === "development"),
+    DEV: JSON.stringify(process.env.NODE_ENV === "development"),
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+    "process.env": JSON.stringify({}),
+  },
+  plugins: [
+    flowPlugin(),
+    react({
+      babel: {
+        plugins: [
+          "@babel/plugin-proposal-export-namespace-from",
+          "react-native-reanimated/plugin",
+        ],
+      },
+    }),
+  ],
+  resolve: {
+    extensions,
+    alias: [
+      { find: "react-native/Libraries/Image/AssetRegistry", replacement: "@react-native/assets-registry/registry" },
+      { find: "react-native", replacement: "react-native-web" },
+    ],
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      resolveExtensions: extensions,
+      plugins: [esbuildFlowPlugin()],
+    },
+  },
+});