diff --git a/packages/typegpu-cli/src/options.ts b/packages/typegpu-cli/src/options.ts index ef2584dd72..5bb838545d 100644 --- a/packages/typegpu-cli/src/options.ts +++ b/packages/typegpu-cli/src/options.ts @@ -11,6 +11,7 @@ export const PROJECT_TEMPLATES = [ { value: 'vite-complex', label: 'Vite (Complex - Domain Warping)' }, { value: 'vite-react', label: 'Vite + React (Bare)' }, { value: 'nextjs-bare', label: 'Next.js (Bare)' }, + { value: 'waku-bare', label: 'Waku (Bare)' }, { value: 'expo-bare', label: 'Expo RN (Bare)' }, ] as const; diff --git a/packages/typegpu-cli/templates/template-waku-bare/_gitignore b/packages/typegpu-cli/templates/template-waku-bare/_gitignore new file mode 100644 index 0000000000..b78e62105a --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_gitignore @@ -0,0 +1,8 @@ +node_modules +dist +.env* +*.tsbuildinfo +.cache +.DS_Store +*.pem +.agents diff --git a/packages/typegpu-cli/templates/template-waku-bare/_nvmrc b/packages/typegpu-cli/templates/template-waku-bare/_nvmrc new file mode 100644 index 0000000000..a45fd52cc5 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_nvmrc @@ -0,0 +1 @@ +24 diff --git a/packages/typegpu-cli/templates/template-waku-bare/_oxfmtrc.json b/packages/typegpu-cli/templates/template-waku-bare/_oxfmtrc.json new file mode 100644 index 0000000000..3dbb588cb1 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_oxfmtrc.json @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "ignorePatterns": [".agents/**"] +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/_package.json b/packages/typegpu-cli/templates/template-waku-bare/_package.json new file mode 100644 index 0000000000..e927a72e2d --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_package.json @@ -0,0 +1,44 @@ +{ + "name": "typegpu-waku-bare-project", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "waku dev", + "build": "waku build", + "start": "waku start", + "typegen": "waku router typegen", + "check": "oxlint && oxfmt --check", + "fix": "oxlint --fix && oxfmt", + "types": "tsc --p ./tsconfig.json --noEmit" + }, + "dependencies": { + "@typegpu/react": "^0.11.2", + "hono": "^4.12.14", + "react": "^19.2.6", + "react-dom": "^19.2.6", + "react-server-dom-webpack": "^19.2.6", + "typegpu": "^0.11.9", + "waku": "^1.0.0-beta.6" + }, + "devDependencies": { + "@tailwindcss/vite": "4.3.0", + "@types/react": "^19.2.15", + "@types/react-dom": "^19.2.3", + "@webgpu/types": "^0.1.70", + "eslint-plugin-typegpu": "^0.11.1", + "oxfmt": "^0.49.0", + "oxlint": "^1.64.0", + "tailwindcss": "^4.3.0", + "typescript": "npm:tsover@6.0.1", + "unplugin-typegpu": "^0.11.6" + }, + "overrides": { + "typescript": "npm:tsover@6.0.1" + }, + "pnpm": { + "overrides": { + "typescript": "npm:tsover@6.0.1" + } + } +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/_vscode/extensions.json b/packages/typegpu-cli/templates/template-waku-bare/_vscode/extensions.json new file mode 100644 index 0000000000..99e2f7ddf7 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["oxc.oxc-vscode"] +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/_vscode/settings.json b/packages/typegpu-cli/templates/template-waku-bare/_vscode/settings.json new file mode 100644 index 0000000000..1056eac024 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_vscode/settings.json @@ -0,0 +1,18 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.preferences.importModuleSpecifier": "relative", + "typescript.enablePromptUseWorkspaceTsdk": true, + + "oxc.configPath": "oxlint.config.ts", + "oxc.fmt.configPath": ".oxfmtrc.json", + "oxc.lint.run": "onType", + "editor.defaultFormatter": "oxc.oxc-vscode", + "editor.formatOnSave": true, + "editor.formatOnSaveMode": "file", + + "editor.codeActionsOnSave": { + "source.organizeImports": "never", + "source.format.oxc": "always", + "source.fixAll.oxc": "always" + } +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/_zed/settings.json b/packages/typegpu-cli/templates/template-waku-bare/_zed/settings.json new file mode 100644 index 0000000000..ee27702340 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/_zed/settings.json @@ -0,0 +1,58 @@ +// Folder-specific settings +// +// For a full list of overridable settings, and general information on folder-specific settings, +// see the documentation: https://zed.dev/docs/configuring-zed#settings-files +{ + "lsp": { + "vtsls": { + "settings": { + "typescript": { + "tsdk": "node_modules/typescript/lib" + } + } + }, + "oxlint": { + "initialization_options": { + "settings": { + "configPath": "./oxlint.config.ts", + "run": "onType", + "fixKind": "safe_fix" + } + } + }, + "oxfmt": { + "initialization_options": { + "settings": { + "fmt.configPath": ".oxfmtrc.json" + } + } + } + }, + "languages": { + "TypeScript": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + }, + "TSX": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + }, + "JavaScript": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + }, + "JSON": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + }, + "JSONC": { + "format_on_save": "on", + "prettier": { "allowed": false }, + "formatter": [{ "language_server": { "name": "oxfmt" } }] + } + } +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/oxlint.config.ts b/packages/typegpu-cli/templates/template-waku-bare/oxlint.config.ts new file mode 100644 index 0000000000..b46806bcd5 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/oxlint.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from 'oxlint'; +import typegpu from 'eslint-plugin-typegpu'; + +export default defineConfig({ + plugins: ['typescript', 'import', 'unicorn', 'oxc', 'react'], + jsPlugins: ['eslint-plugin-typegpu'], + categories: { + correctness: 'warn', + suspicious: 'warn', + }, + rules: { + ...typegpu.configs.recommended.rules, + 'typescript/no-non-null-assertion': 'error', + 'typescript/no-explicit-any': 'error', + 'typescript/no-unsafe-type-assertion': 'off', + 'import/no-named-as-default': 'off', + }, + env: { + builtin: true, + }, +}); diff --git a/packages/typegpu-cli/templates/template-waku-bare/public/images/favicon.ico b/packages/typegpu-cli/templates/template-waku-bare/public/images/favicon.ico new file mode 100644 index 0000000000..2901de79c8 Binary files /dev/null and b/packages/typegpu-cli/templates/template-waku-bare/public/images/favicon.ico differ diff --git a/packages/typegpu-cli/templates/template-waku-bare/public/images/icons.svg b/packages/typegpu-cli/templates/template-waku-bare/public/images/icons.svg new file mode 100644 index 0000000000..36acdb9f18 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/public/images/icons.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-dark.svg b/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-dark.svg new file mode 100644 index 0000000000..65c9a02c31 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-dark.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-light.svg b/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-light.svg new file mode 100644 index 0000000000..a1b63335fc --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/public/images/typegpu-logo-light.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/typegpu-cli/templates/template-waku-bare/public/images/waku.png b/packages/typegpu-cli/templates/template-waku-bare/public/images/waku.png new file mode 100644 index 0000000000..cd90d79081 Binary files /dev/null and b/packages/typegpu-cli/templates/template-waku-bare/public/images/waku.png differ diff --git a/packages/typegpu-cli/templates/template-waku-bare/src/components/Shader.tsx b/packages/typegpu-cli/templates/template-waku-bare/src/components/Shader.tsx new file mode 100644 index 0000000000..26abfca078 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/src/components/Shader.tsx @@ -0,0 +1,29 @@ +'use client'; + +import React, { useMemo } from 'react'; +import { useConfigureContext, useFrame, useRoot } from '@typegpu/react'; +import { common, d } from 'typegpu'; + +export function Shader({ className }: { className?: string }) { + const { ref, ctxRef } = useConfigureContext({ autoResize: true, alphaMode: 'premultiplied' }); + + const root = useRoot(); + const renderPipeline = useMemo( + () => + root.createRenderPipeline({ + vertex: common.fullScreenTriangle, + fragment: ({ uv }) => { + 'use gpu'; + return d.vec4f(0.55, uv, 1); + }, + }), + [root], + ); + + useFrame(() => { + if (!ctxRef.current) return; + renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3); + }); + + return ; +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/src/global.d.ts b/packages/typegpu-cli/templates/template-waku-bare/src/global.d.ts new file mode 100644 index 0000000000..35306c6fc9 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/src/global.d.ts @@ -0,0 +1 @@ +declare module '*.css'; diff --git a/packages/typegpu-cli/templates/template-waku-bare/src/pages/_layout.tsx b/packages/typegpu-cli/templates/template-waku-bare/src/pages/_layout.tsx new file mode 100644 index 0000000000..a4af24de3e --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/src/pages/_layout.tsx @@ -0,0 +1,23 @@ +// oxlint-disable-next-line no-unassigned-import +import '../styles.css'; + +import React, { type ReactNode } from 'react'; + +type RootLayoutProps = { children: ReactNode }; + +export default function RootLayout({ children }: RootLayoutProps) { + return ( +
+ typegpu-waku-bare-project + + +
{children}
+
+ ); +} + +export const getConfig = async () => { + return { + render: 'static', + } as const; +}; diff --git a/packages/typegpu-cli/templates/template-waku-bare/src/pages/index.tsx b/packages/typegpu-cli/templates/template-waku-bare/src/pages/index.tsx new file mode 100644 index 0000000000..6d36845085 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/src/pages/index.tsx @@ -0,0 +1,135 @@ +import React from 'react'; +import { ClientOnly } from '@typegpu/react'; + +import { Shader } from '../components/Shader.tsx'; + +export default function HomePage() { + return ( +
+
+ Loading...

+ } + > + + +
+ +
+ +
+ {/* TypeGPU */} +
+ + + TypeGPU + + +

Type-safe WebGPU

+ + +
+ + {/* Waku */} +
+

+ + + + Waku +

+ +

The minimal React framework

+ + +
+
+ +
+ +
+
+ ); +} + +export const getConfig = async () => { + return { + render: 'static', + } as const; +}; diff --git a/packages/typegpu-cli/templates/template-waku-bare/src/styles.css b/packages/typegpu-cli/templates/template-waku-bare/src/styles.css new file mode 100644 index 0000000000..f232fefb0e --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/src/styles.css @@ -0,0 +1,64 @@ +@import 'tailwindcss'; + +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; +} + +@theme inline { + --color-bg: var(--bg); + --color-text: var(--text); + --color-text-h: var(--text-h); + --color-border: var(--border); + --color-social: var(--social-bg); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + .button-icon { + filter: invert(1) brightness(2); + } +} + +body { + margin: 0; + background: var(--bg); + color: var(--text); +} + +.ticks { + position: relative; + width: 100%; +} + +.ticks::before, +.ticks::after { + content: ''; + position: absolute; + top: -4.5px; + border: 5px solid transparent; +} + +.ticks::before { + left: 0; + border-left-color: var(--border); +} + +.ticks::after { + right: 0; + border-right-color: var(--border); +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/tsconfig.json b/packages/typegpu-cli/templates/template-waku-bare/tsconfig.json new file mode 100644 index 0000000000..64c3958aea --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ESNext", + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "types": ["@webgpu/types", "@types/react", "@types/react-dom"], + "module": "ESNext", + "esModuleInterop": true, + "skipLibCheck": true, + "jsx": "react-jsx", + + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + "strict": true, + "noImplicitReturns": true, + "exactOptionalPropertyTypes": true, + "erasableSyntaxOnly": true + }, + "include": ["src"] +} diff --git a/packages/typegpu-cli/templates/template-waku-bare/waku.config.ts b/packages/typegpu-cli/templates/template-waku-bare/waku.config.ts new file mode 100644 index 0000000000..53e34922b8 --- /dev/null +++ b/packages/typegpu-cli/templates/template-waku-bare/waku.config.ts @@ -0,0 +1,9 @@ +import tailwindcss from '@tailwindcss/vite'; +import typegpu from 'unplugin-typegpu/vite'; +import { defineConfig } from 'waku/config'; + +export default defineConfig({ + vite: { + plugins: [tailwindcss(), typegpu()], + }, +});