diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 02fdc198..cd7ed78a 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,8 @@ "features": { "ghcr.io/devcontainers/features/node:1": {}, "ghcr.io/devcontainers/features/rust:1": {}, - "devwasm.azurecr.io/dev-wasm/dev-wasm-feature/rust-wasi:0": {} + "devwasm.azurecr.io/dev-wasm/dev-wasm-feature/rust-wasi:0": {}, + "ghcr.io/devcontainers/features/docker-in-docker:2": {} }, // Features to add to the dev container. More info: https://containers.dev/features. @@ -20,7 +21,8 @@ "postCreateCommand": { "submodule": "git submodule update --init --recursive", "wasm-pack": "curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh", - "yarn": "yarn" + "yarn": "yarn", + "deno": "curl -fsSL https://deno.land/install.sh | sh" }, // Configure tool-specific properties. @@ -36,7 +38,9 @@ "customizations": { "vscode": { "extensions": [ - "esbenp.prettier-vscode" + "esbenp.prettier-vscode", + "denoland.vscode-deno", + "ms-azuretools.vscode-docker" ] } } diff --git a/.eslintrc.json b/.eslintrc.json index 305e3010..57b0adb5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,36 @@ { "extends": [ - "./node_modules/gts/", - "next/core-web-vitals" + "eslint:recommended", + "next/core-web-vitals", + "plugin:n/recommended", + "prettier" + ], + "plugins": [ + "import", + "n", + "prettier" ], "rules": { + "block-scoped-var": "error", + "eqeqeq": "error", + "no-var": "error", + "prefer-const": "error", + "eol-last": "error", + "prefer-arrow-callback": "error", + "no-trailing-spaces": "error", + "quotes": ["warn", "single", { "avoidEscape": true }], + "no-restricted-properties": [ + "error", + { + "object": "describe", + "property": "only" + }, + { + "object": "it", + "property": "only" + } + ], "react-hooks/exhaustive-deps": "off", - "@typescript-eslint/ban-ts-comment": "warn", "prettier/prettier": [ "error", { @@ -32,5 +57,39 @@ "@mui/material", "@mui/icons-material" ] - } + }, + "overrides": [ + { + "files": ["**/*.ts", "**/*.tsx"], + "parser": "@typescript-eslint/parser", + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "rules": { + "@typescript-eslint/ban-ts-comment": "warn", + "@typescript-eslint/no-explicit-any": "warn", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-warning-comments": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-var-requires": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/ban-types": "off", + "@typescript-eslint/camelcase": "off", + "n/no-missing-import": "off", + "n/no-empty-function": "off", + "n/no-unsupported-features/es-syntax": "off", + "n/no-unsupported-features/node-builtins": "off", + "n/no-missing-require": "off", + "n/shebang": "off", + "no-dupe-class-members": "off", + "require-atomic-updates": "off" + }, + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + } + } + ] } diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 90e05c40..531785f1 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -9,3 +9,32 @@ updates: directory: "/" # Location of package manifests schedule: interval: "weekly" + - package-ecosystem: "npm" # See documentation for possible values + directory: "/" # Location of package manifests + schedule: + interval: "weekly" + ignore: + - dependency-name: 'eslint' + update-types: ['version-update:semver-major'] # Ignore major version updates for eslint + groups: + nextjs: + patterns: + - "@cloudflare/next-on-pages" + - "@next/*" + - "eslint-config-next" + - "next" + - "vercel" + - "wrangler" + typescript: + patterns: + - "@typescript-eslint/*" + - "@types/*" + - "@webgpu/types" + - "eslint" + - "eslint-config-prettier" + - "eslint-plugin-*" + - "prettier*" + - "typescript" + fontawesome: + patterns: + - "@fortawesome/*" diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8d2296c8..2328f4bc 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -27,7 +27,8 @@ jobs: - run: cargo install wasm-pack - uses: actions/setup-node@v4 with: - node-version: node + node-version-file: .node-version cache: 'yarn' - run: yarn + - run: yarn lint - run: yarn build diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 5953447e..e1bfa00f 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -31,7 +31,7 @@ jobs: - run: cargo install wasm-pack - uses: actions/setup-node@v4 with: - node-version: node + node-version-file: .node-version cache: 'yarn' - run: yarn - run: yarn build diff --git a/.gitignore b/.gitignore index aaae60d4..6573525c 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ yarn-error.log* .env.* .vercel/ +.wrangler/ diff --git a/.node-version b/.node-version new file mode 100644 index 00000000..016e34ba --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +v20.17.0 diff --git a/.prettierrc b/.prettierrc index 44142ec6..564cd1f3 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { + "plugins": ["prettier-plugin-organize-imports"], "semi": true, "singleQuote": true, "tabWidth": 4, diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index ff154833..00000000 --- a/.prettierrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require('gts/.prettierrc.json') -} diff --git a/README.md b/README.md index 76fa749e..5ef74b53 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,17 @@ Some other useful commands are: - `yarn lint` to only check for lint errors and warnings - `yarn fix` to automatically fix lint errors where possible +## Local Database + +Run `npx supabase start` to start a local instance of the compute.toys database. +Copy the "anon key" from the output and set it as `NEXT_PUBLIC_SUPABASE_PUBLIC_API_KEY` in the `.env` file. +You'll also need to set `NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321` + +If you're using codespaces, you can instead set the URL to the forwarded port, it'll need to have public visibility. +You should also set `api_url` in `supabase/config.toml` to the same address. + +A local test user is available to login with username `user@example.com` and password `pass` + ## Standalone Editor By default, the development environment will connect to the public API for the compute.toys website. diff --git a/components/buttons/recordbutton.tsx b/components/buttons/recordbutton.tsx index 1af3fa37..4582f726 100644 --- a/components/buttons/recordbutton.tsx +++ b/components/buttons/recordbutton.tsx @@ -18,13 +18,13 @@ export default function RecordButton() { }} title={'Record video '} sx={{ - color: recording ? theme.palette.primary.contrastText : theme.palette.primary.light + fill: recording ? theme.palette.primary.contrastText : theme.palette.primary.light }} > {recording ? ( ) : ( - + { +const ExplainerBody = () => { const theme = useTheme(); const prelude = useAtomValue(wgputoyPreludeAtom); - // Draggable needs this so React doesn't complain - // about violating strict mode DOM access rules - const nodeRef = useRef(null); - return ( - - -
- {/* Annoying viewbox tweak to align with drag bar*/} -
- props.setHidden(true)} - sx={{ cursor: 'pointer', color: 'rgba(150,150,150,1)' }} - /> -
-
- is a playground for WebGPU compute shaders. Everything here is written - in WGSL, which is WebGPU's native shader language. For up-to-date - information on WGSL, please see the{' '} - WGSL draft specification. You can also{' '} - take a tour of WGSL - . -
-
-

Inputs

- supplies keyboard input, mouse input, selectable input textures, custom - values controlled by sliders, and the current frame and elapsed time. -
-
- Mouse input can be accessed from the mouse struct: -
-                        mouse.pos: vec2i
-                        
- mouse.click: i32 -
- Timing information is in the time struct: -
-                        time.frame: u32
-                        
- time.elapsed: f32 -
- Custom uniforms are in the custom struct: -
-                        custom.my_custom_uniform_0: f32
-                        
- custom.my_custom_uniform_1: f32 -
- Two selectable textures can be accessed from channel0 and{' '} - channel1: -
-                        textureSampleLevel(channel0, bilinear, uv, pass, lod)
-                        
- textureSampleLevel(channel1, bilinear, uv, pass, lod) -
- Keyboard input can be accessed from the provided{' '} - keyDown(keycode: u32) helper function: -
-                        keyDown(32) // returns true when the spacebar is pressed
-                    
-

Outputs

- For compute shader input and output provides: -
- one input texture array pass_in,
- one output storage texture array pass_out,
- and one output screen storage texture screen. -
-
- The shader can write to pass_out, which will be copied into{' '} - pass_in after the current entrypoint has returned. - pass_in will always contain whatever has been written to{' '} - pass_out during all of the previous entrypoints. The - contents of pass_in will not change while an entrypoint is - running. - pass_in and pass_out are both texture arrays - with 4 texture layers. For example, you can access the third layer of{' '} - pass_in at LOD 0 and coordinate (1,1) by using the built-in - helper function: -
-
-                        passLoad(2, vec2i(1,1), 0)
-                    
-

Preprocessor

- also provides an experimental WGSL preprocessor. It currently allows - the use of a handful of basic directives: -
    -
  • - #define NAME VALUE for simple macros (function-like - parameter substitution is not yet supported) -
  • -
  • - #include "PATH" for accessing built-in - libraries -
  • -
  • - #workgroup_count ENTRYPOINT X Y Z for specifying how - many workgroups should be dispatched for an entrypoint -
  • -
  • - #dispatch_count ENTRYPOINT N for dispatching an - entrypoint multiple times in a row -
  • -
  • - #storage NAME TYPE for declaring a storage buffer -
  • -
-

Storage

- Read-write storage buffers can be declared using the - #storage - {' '} - directive. For example, you can create a buffer of atomic counters: -
-                        #storage atomic_storage array<atomic<i32>>
-                    
- You could use WGSL's built-in functions to do atomic operations on this - buffer in any order, enabling you to safely perform work across many threads at - once and accumulate the result in one place. Note that any writes to read-write - storage buffers are immediately visible to subsequent reads (unlike the - situation with pass_in and pass_out). -
-
- The final visual output of every shader is written to the{' '} - screen storage texture, which displays the result in the canvas - on this page. -
-
- Debugging assertions are supported with an assert helper - function: -
-                        assert(0, isfinite(col.x))
-                        
- assert(1, isfinite(col.y)) -
-

Examples

-
- - Simple single pass shader - -
-
- - Preprocessor #include - -
-
- - Terminal overlay - -
-
- - Storage usage - -
-
- - Workgroup shared memory - -
-
- - Preprocessor #dispatch_count - -
-
- - Preprocessor #workgroup_count - -
-
- - Assert - -
-
-
-

Prelude

- Every shader begins with a common prelude. The prelude contains the data - inputs and outputs for this shader, as well as a few helper functions and type - definitions to make working with a more streamlined and familiar - process. Please refer to the prelude for a complete listing of the available - data in your shader. -
-
- Here are the current contents of this shader's prelude: -
{prelude}
- Note: Matrix types in WGSL are stored in column-major order. This means a - matrix of type mat2x3<f32> (aka mat2x3f{' '} - or float2x3) is constructed from 2 column vectors of type{' '} - vec3<f32> (aka vec3f or{' '} - float3). This is backward from HLSL and convention in - mathematics. -
- - + is a playground for WebGPU compute shaders. Everything here is written in WGSL, + which is WebGPU's native shader language. For up-to-date information on WGSL, + please see the WGSL draft specification. You + can also take a tour of WGSL + . +
+
+

Inputs

+ supplies keyboard input, mouse input, selectable input textures, custom values + controlled by sliders, and the current frame and elapsed time. +
+
+ Mouse input can be accessed from the mouse struct: +
+                mouse.pos: vec2i
+                
+ mouse.click: i32 +
+ Timing information is in the time struct: +
+                time.frame: u32
+                
+ time.elapsed: f32 +
+ Custom uniforms are in the custom struct: +
+                custom.my_custom_uniform_0: f32
+                
+ custom.my_custom_uniform_1: f32 +
+ Two selectable textures can be accessed from channel0 and{' '} + channel1: +
+                textureSampleLevel(channel0, bilinear, uv, pass, lod)
+                
+ textureSampleLevel(channel1, bilinear, uv, pass, lod) +
+ Keyboard input can be accessed from the provided + keyDown(keycode: u32) + {' '} + helper function: +
+                keyDown(32) // returns true when the spacebar is pressed
+            
+

Outputs

+ For compute shader input and output provides: +
+ one input texture array pass_in,
+ one output storage texture array pass_out,
+ and one output screen storage texture screen. +
+
+ The shader can write to pass_out, which will be copied into{' '} + pass_in after the current entrypoint has returned. + pass_in will always contain whatever has been written to{' '} + pass_out during all of the previous entrypoints. The contents + of pass_in will not change while an entrypoint is running. + pass_in and pass_out are both texture arrays with 4 + texture layers. For example, you can access the third layer of pass_in{' '} + at LOD 0 and coordinate (1,1) by using the built-in helper function: +
+
passLoad(2, vec2i(1,1), 0)
+

Preprocessor

+ also provides an experimental WGSL preprocessor. It currently allows the use of + a handful of basic directives: +
    +
  • + #define NAME VALUE for simple macros (function-like parameter + substitution is not yet supported) +
  • +
  • + #include "PATH" for accessing built-in libraries +
  • +
  • + #workgroup_count ENTRYPOINT X Y Z for specifying how many + workgroups should be dispatched for an entrypoint +
  • +
  • + #dispatch_count ENTRYPOINT N for dispatching an entrypoint + multiple times in a row +
  • +
  • + #storage NAME TYPE for declaring a storage buffer +
  • +
+

Storage

+ Read-write storage buffers can be declared using the #storage{' '} + directive. For example, you can create a buffer of atomic counters: +
+                #storage atomic_storage array<atomic<i32>>
+            
+ You could use WGSL's built-in functions to do atomic operations on this buffer in + any order, enabling you to safely perform work across many threads at once and + accumulate the result in one place. Note that any writes to read-write storage buffers + are immediately visible to subsequent reads (unlike the situation with{' '} + pass_in and pass_out). +
+
+ The final visual output of every shader is written to the screen{' '} + storage texture, which displays the result in the canvas on this page. +
+
+ Debugging assertions are supported with an assert helper function: +
+                assert(0, isfinite(col.x))
+                
+ assert(1, isfinite(col.y)) +
+

Examples

+
+ + Simple single pass shader + +
+
+ + Preprocessor #include + +
+
+ + Terminal overlay + +
+
+ + Storage usage + +
+
+ + Workgroup shared memory + +
+
+ + Preprocessor #dispatch_count + +
+
+ + Preprocessor #workgroup_count + +
+
+ + Assert + +
+
+
+

Prelude

+ Every shader begins with a common prelude. The prelude contains the data inputs + and outputs for this shader, as well as a few helper functions and type definitions to + make working with a more streamlined and familiar process. Please refer to the + prelude for a complete listing of the available data in your shader. +
+
+ Here are the current contents of this shader's prelude: +
{prelude}
+ Note: Matrix types in WGSL are stored in column-major order. This means a matrix + of type mat2x3<f32> (aka mat2x3f or{' '} + float2x3) is constructed from 2 column vectors of type{' '} + vec3<f32> (aka vec3f or float3 + ). This is backward from HLSL and convention in mathematics. + ); }; @@ -268,7 +211,13 @@ export default function Explainer() { > -