software-mansion · iwoplaza · Jul 5, 2024 · Jul 4, 2024 · Jul 4, 2024 · iwoplaza
diff --git a/apps/wigsill-examples/.eslintrc.cjs b/apps/wigsill-examples/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/apps/wigsill-examples/.gitignore b/apps/wigsill-examples/.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/wigsill-examples/index.html b/apps/wigsill-examples/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>wigsill - examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/wigsill-examples/package.json b/apps/wigsill-examples/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "wigsill-examples",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jotai": "^2.8.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "wigsill": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@webgpu/types": "^0.1.43",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  }
+}
diff --git a/apps/wigsill-examples/postcss.config.cjs b/apps/wigsill-examples/postcss.config.cjs
@@ -0,0 +1,7 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/wigsill-examples/public/vite.svg b/apps/wigsill-examples/public/vite.svg
diff --git a/apps/wigsill-examples/src/App.tsx b/apps/wigsill-examples/src/App.tsx
@@ -0,0 +1,51 @@
+import { atom } from 'jotai/vanilla';
+import { useAtomValue } from 'jotai/react';
+import { WGSLRuntime, ProgramBuilder } from 'wigsill';
+
+import { sampleShader } from './sampleShader';
+import { Suspense } from 'react';
+
+// using `jōtai` for a simple async resource store.
+const runtimeAtom = atom(async () => {
+  const adapter = await navigator.gpu.requestAdapter();
+  const device = await adapter!.requestDevice();
+
+  return new WGSLRuntime(device);
+});
+
+const sampleShaderAtom = atom(async (get) => {
+  const runtime = await get(runtimeAtom);
+
+  const program = new ProgramBuilder(runtime, sampleShader).build({
+    bindingGroup: 0,
+    shaderStage: GPUShaderStage.COMPUTE,
+  });
+
+  return program.code;
+});
+
+function ShaderCodeView() {
+  const resolvedCode = useAtomValue(sampleShaderAtom);
+
+  return (
+    <code className="block border p-4 bg-sky-950 text-white rounded-md whitespace-pre">
+      {resolvedCode}
+    </code>
+  );
+}
+
+function App() {
+  return (
+    <main className="mx-auto px-4">
+      <h1 className="text-2xl py-4">
+        <strong>wigsill</strong> - examples
+      </h1>
+      <p>Edit `sampleShader.ts` and see the change in resolved code.</p>
+      <Suspense fallback={'Loading...'}>
+        <ShaderCodeView />
+      </Suspense>
+    </main>
+  );
+}
+
+export default App;
diff --git a/apps/wigsill-examples/src/assets/react.svg b/apps/wigsill-examples/src/assets/react.svg
diff --git a/apps/wigsill-examples/src/common/useEvent.ts b/apps/wigsill-examples/src/common/useEvent.ts
@@ -0,0 +1,27 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+
+/**
+ * Approximate behavior of the upcoming `useEvent` React hook.
+ * WARNING: Do not use in the render phase, nor in `useLayoutEffect` calls.
+ * @param handler
+ * @returns A stable reference of the passed in function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useEvent<TFunction extends (...params: any[]) => any>(
+  handler: TFunction,
+) {
+  const handlerRef = useRef(handler);
+
+  // In a real implementation, this would run before layout effects
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  return useCallback((...args: Parameters<TFunction>) => {
+    // In a real implementation, this would throw if called during render
+    const fn = handlerRef.current;
+    return fn(...args);
+  }, []) as TFunction;
+}
+
+export default useEvent;
diff --git a/apps/wigsill-examples/src/index.css b/apps/wigsill-examples/src/index.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  @apply font-inter;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/apps/wigsill-examples/src/main.tsx b/apps/wigsill-examples/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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/apps/wigsill-examples/src/sampleShader.ts b/apps/wigsill-examples/src/sampleShader.ts
@@ -0,0 +1,7 @@
+import { wgsl } from 'wigsill';
+
+export const sampleShader = wgsl`
+fn add(a: f32, b: f32) -> f32 {
+  return a + ${wgsl.constant('123 + 5')};
+}
+`;
diff --git a/apps/wigsill-examples/src/vite-env.d.ts b/apps/wigsill-examples/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/wigsill-examples/tailwind.config.js b/apps/wigsill-examples/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+
+  theme: {
+    fontFamily: {
+      inter: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
+    },
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/wigsill-examples/tsconfig.app.json b/apps/wigsill-examples/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/apps/wigsill-examples/tsconfig.json b/apps/wigsill-examples/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/apps/wigsill-examples/tsconfig.node.json b/apps/wigsill-examples/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/wigsill-examples/vite.config.ts b/apps/wigsill-examples/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/package.json b/package.json
@@ -1,37 +1,13 @@
 {
-  "name": "wigsill",
+  "name": "wigsill-monorepo",
   "private": true,
-  "version": "0.0.0-alpha.4",
+  "version": "0.0.0",
   "description": "A thin layer between JS and WebGPU/WGSL that improves development experience and allows for faster iteration.",
   "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "module": "./dist/index.js",
-      "import": "./dist/index.js",
-      "default": "./dist/index.cjs"
-    },
-    "./*": {
-      "types": "./*.d.ts",
-      "module": "./dist/*.js",
-      "import": "./dist/*.js",
-      "default": "./dist/*.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
   "scripts": {
-    "dev": "tsup --watch",
     "build": "tsup",
     "prettier": "prettier '*.{js,json,md}' '{src,tests,benchmarks,docs}/**/*.{ts,tsx,md,mdx}' --write",
-    "eslint": "eslint --fix --no-eslintrc --c .eslintrc.json '*.{js,json,ts}' '{src,tests,benchmarks}/**/*.{ts,tsx}'",
-    "pretest": "tsc",
+    "eslint": "eslint --fix --no-eslintrc --c .eslintrc.json '*.{js,json,ts}' '{packages/apps}/**/*.{ts,tsx}'",
     "test": "vitest --ui --coverage"
   },
   "engines": {
@@ -64,7 +40,6 @@
     "@typescript-eslint/parser": "^6.20.0",
     "@vitest/coverage-v8": "0.33.0",
     "@vitest/ui": "0.33.0",
-    "@webgpu/types": "^0.1.40",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -75,11 +50,7 @@
     "prettier": "^3.2.4",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "vitest": "0.33.0",
-    "typed-binary": "^4.0.0"
+    "vitest": "0.33.0"
   },
-  "packageManager": "yarn@1.22.1",
-  "peerDependencies": {
-    "typed-binary": "^4.0.0"
-  }
+  "packageManager": "pnpm@8.15.8+sha256.691fe176eea9a8a80df20e4976f3dfb44a04841ceb885638fe2a26174f81e65e"
 }