From 326a769f5a1a07ce057b59b2fad26ea1cc5c5108 Mon Sep 17 00:00:00 2001
From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:29:13 +0200
Subject: [PATCH] Split workspace into seperate packages
---
.github/workflows/ci.yml | 2 +-
.github/workflows/npm-publish.yml | 3 +-
.gitignore | 6 +-
.npmrc | 1 -
LICENSE.md | 22 +-
README.md | 295 +--
package-lock.json | 2216 +++++++++++++++++
package.json | 68 +-
packages/svader/LICENSE.md | 21 +
packages/svader/README.md | 294 +++
packages/svader/package.json | 55 +
.../svader/src}/lib/BaseShader.svelte | 0
.../svader/src}/lib/WebGlShader.svelte | 0
.../svader/src}/lib/WebGpuShader.svelte | 0
{src => packages/svader/src}/lib/index.js | 0
.../svader/src}/lib/intersectionObserver.js | 0
{src => packages/svader/src}/lib/utils.js | 0
packages/svader/svelte.config.js | 4 +
.../svader/tsconfig.json | 0
packages/tests-svelte4/package.json | 23 +
.../tests-svelte4/resources}/banner.png | Bin
.../tests-svelte4/resources}/bubbles.png | Bin
.../tests-svelte4/resources}/collage.png | Bin
.../resources}/debugShaderWebGl.png | Bin
.../resources}/debugShaderWebGpu.png | Bin
.../tests-svelte4/resources}/halo.png | Bin
.../tests-svelte4/resources}/logoDark.png | Bin
.../tests-svelte4/resources}/logoLight.png | Bin
.../tests-svelte4/resources}/slider.png | Bin
{src => packages/tests-svelte4/src}/app.d.ts | 0
{src => packages/tests-svelte4/src}/app.html | 1 +
.../src}/routes/+layout.server.js | 0
.../tests-svelte4/src}/routes/+page.svelte | 0
.../src}/routes/hello-world/+page.svelte | 0
.../routes/hello-world/webgl/+page.svelte | 2 +-
.../src}/routes/hello-world/webgl/shader.frag | 0
.../routes/hello-world/webgpu/+page.svelte | 2 +-
.../routes/hello-world/webgpu/shader.wgsl | 0
.../routes/landing-page-bubbles/+page.svelte | 0
.../landing-page-bubbles/webgl/+page.svelte | 2 +-
.../landing-page-bubbles/webgl/shader.frag | 0
.../landing-page-bubbles/webgpu/+page.svelte | 2 +-
.../landing-page-bubbles/webgpu/shader.wgsl | 0
.../routes/landing-page-halo/+page.svelte | 0
.../landing-page-halo/webgl/+page.svelte | 2 +-
.../landing-page-halo/webgl/shader.frag | 0
.../landing-page-halo/webgpu/+page.svelte | 2 +-
.../landing-page-halo/webgpu/shader.wgsl | 0
.../src}/routes/logo/+page.svelte | 0
.../src}/routes/logo/logoDark.png | Bin
.../src}/routes/logo/webgl/+page.svelte | 2 +-
.../src}/routes/logo/webgl/shader.frag | 0
.../src}/routes/logo/webgpu/+page.svelte | 2 +-
.../src}/routes/logo/webgpu/shader.wgsl | 0
.../src}/routes/oversized-canvas/+page.svelte | 0
.../oversized-canvas/webgl/+page.svelte | 2 +-
.../routes/oversized-canvas/webgl/shader.frag | 0
.../oversized-canvas/webgpu/+page.svelte | 2 +-
.../oversized-canvas/webgpu/shader.wgsl | 0
.../src}/routes/remount/+page.svelte | 0
.../src}/routes/remount/webgl/+page.svelte | 2 +-
.../src}/routes/remount/webgl/shader.frag | 0
.../src}/routes/remount/webgpu/+page.svelte | 2 +-
.../src}/routes/remount/webgpu/shader.wgsl | 0
.../src}/routes/slider/+page.svelte | 0
.../src}/routes/slider/webgl/+page.svelte | 2 +-
.../src}/routes/slider/webgl/shader.frag | 0
.../src}/routes/slider/webgpu/+page.svelte | 2 +-
.../src}/routes/slider/webgpu/shader.wgsl | 0
packages/tests-svelte4/static/favicon.png | Bin 0 -> 1571 bytes
.../tests-svelte4/svelte.config.js | 0
packages/tests-svelte4/tsconfig.json | 13 +
.../tests-svelte4/vite.config.js | 0
73 files changed, 2662 insertions(+), 390 deletions(-)
delete mode 100644 .npmrc
mode change 100644 => 120000 LICENSE.md
mode change 100644 => 120000 README.md
create mode 100644 package-lock.json
create mode 100644 packages/svader/LICENSE.md
create mode 100644 packages/svader/README.md
create mode 100644 packages/svader/package.json
rename {src => packages/svader/src}/lib/BaseShader.svelte (100%)
rename {src => packages/svader/src}/lib/WebGlShader.svelte (100%)
rename {src => packages/svader/src}/lib/WebGpuShader.svelte (100%)
rename {src => packages/svader/src}/lib/index.js (100%)
rename {src => packages/svader/src}/lib/intersectionObserver.js (100%)
rename {src => packages/svader/src}/lib/utils.js (100%)
create mode 100644 packages/svader/svelte.config.js
rename tsconfig.json => packages/svader/tsconfig.json (100%)
create mode 100644 packages/tests-svelte4/package.json
rename {resources => packages/tests-svelte4/resources}/banner.png (100%)
rename {resources => packages/tests-svelte4/resources}/bubbles.png (100%)
rename {resources => packages/tests-svelte4/resources}/collage.png (100%)
rename {resources => packages/tests-svelte4/resources}/debugShaderWebGl.png (100%)
rename {resources => packages/tests-svelte4/resources}/debugShaderWebGpu.png (100%)
rename {resources => packages/tests-svelte4/resources}/halo.png (100%)
rename {resources => packages/tests-svelte4/resources}/logoDark.png (100%)
rename {resources => packages/tests-svelte4/resources}/logoLight.png (100%)
rename {resources => packages/tests-svelte4/resources}/slider.png (100%)
rename {src => packages/tests-svelte4/src}/app.d.ts (100%)
rename {src => packages/tests-svelte4/src}/app.html (82%)
rename {src => packages/tests-svelte4/src}/routes/+layout.server.js (100%)
rename {src => packages/tests-svelte4/src}/routes/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/hello-world/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/hello-world/webgl/+page.svelte (89%)
rename {src => packages/tests-svelte4/src}/routes/hello-world/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/hello-world/webgpu/+page.svelte (90%)
rename {src => packages/tests-svelte4/src}/routes/hello-world/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-bubbles/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-bubbles/webgl/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-bubbles/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-bubbles/webgpu/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-bubbles/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-halo/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-halo/webgl/+page.svelte (96%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-halo/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-halo/webgpu/+page.svelte (96%)
rename {src => packages/tests-svelte4/src}/routes/landing-page-halo/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/logo/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/logo/logoDark.png (100%)
rename {src => packages/tests-svelte4/src}/routes/logo/webgl/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/logo/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/logo/webgpu/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/logo/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/oversized-canvas/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/oversized-canvas/webgl/+page.svelte (89%)
rename {src => packages/tests-svelte4/src}/routes/oversized-canvas/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/oversized-canvas/webgpu/+page.svelte (90%)
rename {src => packages/tests-svelte4/src}/routes/oversized-canvas/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/remount/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/remount/webgl/+page.svelte (93%)
rename {src => packages/tests-svelte4/src}/routes/remount/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/remount/webgpu/+page.svelte (93%)
rename {src => packages/tests-svelte4/src}/routes/remount/webgpu/shader.wgsl (100%)
rename {src => packages/tests-svelte4/src}/routes/slider/+page.svelte (100%)
rename {src => packages/tests-svelte4/src}/routes/slider/webgl/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/slider/webgl/shader.frag (100%)
rename {src => packages/tests-svelte4/src}/routes/slider/webgpu/+page.svelte (97%)
rename {src => packages/tests-svelte4/src}/routes/slider/webgpu/shader.wgsl (100%)
create mode 100644 packages/tests-svelte4/static/favicon.png
rename svelte.config.js => packages/tests-svelte4/svelte.config.js (100%)
create mode 100644 packages/tests-svelte4/tsconfig.json
rename vite.config.js => packages/tests-svelte4/vite.config.js (100%)
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 92732f7..8965629 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,7 +15,7 @@ jobs:
with:
node-version: 20
- name: Install Dependencies
- run: npm install
+ run: npm ci
- name: Check
run: npm run check
- name: Package
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index d9890c4..8b5a890 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -16,8 +16,9 @@ jobs:
with:
node-version: 20
registry-url: https://registry.npmjs.org/
+ - run: cd packages/svader
- name: Install Dependencies
- run: npm install
+ run: npm ci
- name: Package
run: npm run package
- name: Publish
diff --git a/.gitignore b/.gitignore
index 715b548..2fe4f44 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,9 @@ node_modules
# Output
.output
.vercel
-/.svelte-kit
-/build
-/dist
+.svelte-kit
+build
+dist
# OS
.DS_Store
diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index b6f27f1..0000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-engine-strict=true
diff --git a/LICENSE.md b/LICENSE.md
deleted file mode 100644
index 029c148..0000000
--- a/LICENSE.md
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Holger Dal Mogensen
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/LICENSE.md b/LICENSE.md
new file mode 120000
index 0000000..e6c6c60
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1 @@
+C:/Users/Holger/OneDrive/DAW/voil/svader/packages/svader/LICENSE.md
\ No newline at end of file
diff --git a/README.md b/README.md
deleted file mode 100644
index 1b15580..0000000
--- a/README.md
+++ /dev/null
@@ -1,294 +0,0 @@
-
-
-
-
-# Svader
-
-Create GPU-rendered Svelte components with WebGL and WebGPU fragment shaders.
-
-## What is a fragment shader?
-
-In short, a _fragment shader_ can be written as a program that takes the coordinates of a pixel on the screen and returns the color that this pixel should have.
-This program can be executed on the GPU, ensuring massive parallelism and speed.
-
-To learn more about how to write fragment shaders, check out [The Book of Shaders](https://thebookofshaders.com/).
-
-The following is a collection of examples all made using Svader. The live version of all of these can be previewed on [svader.vercel.app](https://svader.vercel.app/),
-and the source code can be found in the [`src/routes/`](https://github.com/sockmaster27/svader/tree/master/src/routes) directory.
-
-![Shader example collage](https://raw.githubusercontent.com/sockmaster27/svader/master/resources/collage.png)
-
-## Installation
-
-```bash
-# npm
-npm i -D svader
-
-# pnpm
-pnpm i -D svader
-
-# Bun
-bun i -D svader
-
-# Yarn
-yarn add -D svader
-```
-
-## Usage
-
-To use a fragment shader component, you first need to decide whether to use WebGL or WebGPU.
-If you're unsure about what to use, see the [WebGL vs. WebGPU](#webgl-vs-webgpu) section.
-
-### Sections
-
-- [WebGL](#webgl)
- - [WebGL parameters](#webgl-parameters)
- - [WebGL built-in values](#webgl-built-in-values)
-- [WebGPU](#webgpu)
- - [WebGPU parameters](#webgpu-parameters)
- - [WebGPU built-in values](#webgpu-built-in-values)
-
-### WebGL
-
-The following is a minimal example of a WebGL fragment shader component.
-
-[**View in REPL**](https://svelte.dev/repl/3e4a38bca5ca49fa94e1106a841063d5?version=4.2.19)
-
-```svelte
-
-
-
-
WebGL not supported in this environment.
-
-```
-
-This produces the following output:
-
-![Output of the WebGL shader](https://raw.githubusercontent.com/sockmaster27/svader/master/resources/debugShaderWebGl.png)
-
-Here, the `shaderCode` variable is a string containing the [GLES](https://en.wikipedia.org/wiki/OpenGL_ES) shader code.
-For simplicity, this is stored as a string, but it would typically be stored in a separate `myShader.frag` file.
-When loading the shader from a file, it might be useful to know that the `code` property accepts both a `string` and a `Promise`.
-
-What this code does is:
-
-1. Add the given `u_offset` uniform to the 2D coordinates of the pixel given by `gl_FragCoord.xy`.
-2. Divide the resulting coordinates entrywise by the `u_resolution` uniform to normalize the coordinates between 0 and 1.
-3. Return the normalized coordinates as the color of the pixel, such that the `x` coordinate becomes the red channel and the `y` coordinate becomes the green channel. The blue channel is always set to 0, and the alpha (opacity) channel is always set to 1 (fully opaque).
-
-In GLES, _uniforms_ are inputs to the function, that are the same for every pixel on the screen.
-These need to be passed in via the `parameters` property of the `` component.
-In this case, we need to pass in two uniforms: `u_resolution` and `u_offset`.
-Since these specific parameters are very commonly used, they are specially implemented in Svader
-such that the `value` property of each parameter can simply be set to `"resolution"` and `"offset"` respectively.
-
-Lastly, the `` component accepts a fallback slot, which is rendered when the browser cannot render the shader.
-
-#### WebGL parameters
-
-The `parameters` property is an array of objects with the following properties:
-
-- **`name`**: The name of the uniform parameter, e.g. `"my_uniform"`.
- This must match the name of the parameter in the shader code.
-
-- **`type`**: The type of the uniform parameter as it is written in the shader code, e.g. `"float"`.
- If the `value` property is a [built-in value](#webgl-built-in-values), such as `"resolution"`,
- the `type` will be determined automatically and should not be set.
-
-- **`value`**: The value of the uniform parameter, or a string specifying a [built-in value](#webgl-built-in-values).
- If not a built-in value, the type of this property must correspond to the `type` property, such that:
- - **`float`, `int`, `uint`** is a `number`,
- - **`vecN`, `ivecN`, `uvecN`** is a `number[]` with a length of `N`, e.g. `vec2` -> `[1.2, 3.4]`.
- - **`matN`** is a `number[]` with a length of `N * N`, e.g. `mat2` -> `[1, 2, 3, 4]`.
-
-##### WebGL built-in values
-
-Some types of uniforms are used very often. These are implemented in Svader itself, and referred to as _built-in values_.
-To use these, the `value` property of the parameter object must be set to a string matching one of the following:
-
-- **`"resolution"`**: A `vec2` of the canvas width and height in physical device pixels.
-
-- **`"scale"`**: A `float` of the ratio between CSS pixels and physical device pixels, i.e. zoom level.
- For example, if the browser has been zoomed to 150%, the `scale` parameter will be `1.5`.
-
-- **`"time"`**: A `float` of the current time in seconds.
- NOTE: Passing this parameter to the shader will cause it to rerender every frame.
-
-- **`"offset"`**: A `vec2` to be added to the `gl_FragCoord.xy` of the fragment shader.
- Sometimes the size of the canvas is limited by hardware.
- To compensate for this, Svader creates a virtual canvas with a smaller cutout shifting around to cover the screen.
- The `"resolution"` parameter is automatically adjusted to match the size of this virtual canvas, but for technical reasons,
- the `gl_FragCoord.xy` cannot be adjusted from the outside.
- Therefore, the `"offset"` parameter is provided to be manually added to these coordinates.
-
-### WebGPU
-
-The following is a minimal example of a WebGPU fragment shader component.
-
-[**View in REPL**](https://svelte.dev/repl/498446d091964bb199e6a88bce90feae?version=4.2.19)
-
-```svelte
-
-
-
-
+
+# Svader
+
+Create GPU-rendered Svelte components with WebGL and WebGPU fragment shaders.
+
+## What is a fragment shader?
+
+In short, a _fragment shader_ can be written as a program that takes the coordinates of a pixel on the screen and returns the color that this pixel should have.
+This program can be executed on the GPU, ensuring massive parallelism and speed.
+
+To learn more about how to write fragment shaders, check out [The Book of Shaders](https://thebookofshaders.com/).
+
+The following is a collection of examples all made using Svader. The live version of all of these can be previewed on [svader.vercel.app](https://svader.vercel.app/),
+and the source code can be found in the [`src/routes/`](https://github.com/sockmaster27/svader/tree/master/src/routes) directory.
+
+![Shader example collage](https://raw.githubusercontent.com/sockmaster27/svader/master/resources/collage.png)
+
+## Installation
+
+```bash
+# npm
+npm i -D svader
+
+# pnpm
+pnpm i -D svader
+
+# Bun
+bun i -D svader
+
+# Yarn
+yarn add -D svader
+```
+
+## Usage
+
+To use a fragment shader component, you first need to decide whether to use WebGL or WebGPU.
+If you're unsure about what to use, see the [WebGL vs. WebGPU](#webgl-vs-webgpu) section.
+
+### Sections
+
+- [WebGL](#webgl)
+ - [WebGL parameters](#webgl-parameters)
+ - [WebGL built-in values](#webgl-built-in-values)
+- [WebGPU](#webgpu)
+ - [WebGPU parameters](#webgpu-parameters)
+ - [WebGPU built-in values](#webgpu-built-in-values)
+
+### WebGL
+
+The following is a minimal example of a WebGL fragment shader component.
+
+[**View in REPL**](https://svelte.dev/repl/3e4a38bca5ca49fa94e1106a841063d5?version=4.2.19)
+
+```svelte
+
+
+
+
WebGL not supported in this environment.
+
+```
+
+This produces the following output:
+
+![Output of the WebGL shader](https://raw.githubusercontent.com/sockmaster27/svader/master/resources/debugShaderWebGl.png)
+
+Here, the `shaderCode` variable is a string containing the [GLES](https://en.wikipedia.org/wiki/OpenGL_ES) shader code.
+For simplicity, this is stored as a string, but it would typically be stored in a separate `myShader.frag` file.
+When loading the shader from a file, it might be useful to know that the `code` property accepts both a `string` and a `Promise`.
+
+What this code does is:
+
+1. Add the given `u_offset` uniform to the 2D coordinates of the pixel given by `gl_FragCoord.xy`.
+2. Divide the resulting coordinates entrywise by the `u_resolution` uniform to normalize the coordinates between 0 and 1.
+3. Return the normalized coordinates as the color of the pixel, such that the `x` coordinate becomes the red channel and the `y` coordinate becomes the green channel. The blue channel is always set to 0, and the alpha (opacity) channel is always set to 1 (fully opaque).
+
+In GLES, _uniforms_ are inputs to the function, that are the same for every pixel on the screen.
+These need to be passed in via the `parameters` property of the `` component.
+In this case, we need to pass in two uniforms: `u_resolution` and `u_offset`.
+Since these specific parameters are very commonly used, they are specially implemented in Svader
+such that the `value` property of each parameter can simply be set to `"resolution"` and `"offset"` respectively.
+
+Lastly, the `` component accepts a fallback slot, which is rendered when the browser cannot render the shader.
+
+#### WebGL parameters
+
+The `parameters` property is an array of objects with the following properties:
+
+- **`name`**: The name of the uniform parameter, e.g. `"my_uniform"`.
+ This must match the name of the parameter in the shader code.
+
+- **`type`**: The type of the uniform parameter as it is written in the shader code, e.g. `"float"`.
+ If the `value` property is a [built-in value](#webgl-built-in-values), such as `"resolution"`,
+ the `type` will be determined automatically and should not be set.
+
+- **`value`**: The value of the uniform parameter, or a string specifying a [built-in value](#webgl-built-in-values).
+ If not a built-in value, the type of this property must correspond to the `type` property, such that:
+ - **`float`, `int`, `uint`** is a `number`,
+ - **`vecN`, `ivecN`, `uvecN`** is a `number[]` with a length of `N`, e.g. `vec2` -> `[1.2, 3.4]`.
+ - **`matN`** is a `number[]` with a length of `N * N`, e.g. `mat2` -> `[1, 2, 3, 4]`.
+
+##### WebGL built-in values
+
+Some types of uniforms are used very often. These are implemented in Svader itself, and referred to as _built-in values_.
+To use these, the `value` property of the parameter object must be set to a string matching one of the following:
+
+- **`"resolution"`**: A `vec2` of the canvas width and height in physical device pixels.
+
+- **`"scale"`**: A `float` of the ratio between CSS pixels and physical device pixels, i.e. zoom level.
+ For example, if the browser has been zoomed to 150%, the `scale` parameter will be `1.5`.
+
+- **`"time"`**: A `float` of the current time in seconds.
+ NOTE: Passing this parameter to the shader will cause it to rerender every frame.
+
+- **`"offset"`**: A `vec2` to be added to the `gl_FragCoord.xy` of the fragment shader.
+ Sometimes the size of the canvas is limited by hardware.
+ To compensate for this, Svader creates a virtual canvas with a smaller cutout shifting around to cover the screen.
+ The `"resolution"` parameter is automatically adjusted to match the size of this virtual canvas, but for technical reasons,
+ the `gl_FragCoord.xy` cannot be adjusted from the outside.
+ Therefore, the `"offset"` parameter is provided to be manually added to these coordinates.
+
+### WebGPU
+
+The following is a minimal example of a WebGPU fragment shader component.
+
+[**View in REPL**](https://svelte.dev/repl/498446d091964bb199e6a88bce90feae?version=4.2.19)
+
+```svelte
+
+
+
+
WebGPU not supported in this environment.
+
+```
+
+This produces the following output:
+
+![Output of the WebGPU shader](https://raw.githubusercontent.com/sockmaster27/svader/master/resources/debugShaderWebGpu.png)
+
+Here, the `shaderCode` variable is a string containing the [WGSL](https://google.github.io/tour-of-wgsl/) shader code.
+For simplicity, this is stored as a string, but it would typically be stored in a separate `myShader.wgsl` file.
+When loading the shader from a file, it might be useful to know that the `code` property accepts both a `string` and a `Promise`.
+
+What this code does is:
+
+1. Add the given `offset` uniform variable to the 2D coordinates of the pixel given by `raw_pos.xy`.
+2. Divide the resulting coordinates entrywise by the `resolution` uniform to normalize the coordinates between 0 and 1.
+3. Return the normalized coordinates as the color of the pixel, such that the `x` coordinate becomes the red channel and the `y` coordinate becomes the green channel. The blue channel is always set to 0, and the alpha (opacity) channel is always set to 1 (fully opaque).
+
+In WGSL, these `var`s are the primary way to pass in parameters to the shader.
+These need to be passed in via the `parameters` property of the `` component.
+In this case, we need to pass in two uniforms: `resolution` and `offset`.
+Since these specific parameters are very commonly used, they are specially implemented in Svader
+such that the `value` property of each parameter can simply be set to `"resolution"` and `"offset"` respectively.
+
+Lastly, the `` component accepts a fallback slot, which is rendered when the browser cannot render the shader.
+
+#### WebGPU parameters
+
+The `parameters` property is an array of objects with the following properties:
+
+- **`label`**: The name of the parameter to be used for debugging.
+ This does not have to correspond to the name of the parameter in the shader code.
+
+- **`binding`**: An integer used to match the parameter to the variable in the shader code.
+ This has to match the `binding` property of the parameter in the shader code, e.g. for the variable declaration
+
+ ```WGSL
+ @group(0) @binding(42) var my_variable: f32;
+ ```
+
+ the `binding` property should be `42`.
+
+- **`value`**: The value of the parameter, or a string specifying a [built-in value](#webgpu-built-in-values).
+ If not a built-in value, this parameter should be an `ArrayBuffer`/`ArrayBufferView`.
+ For example, to pass in a number to an `f32` parameter, it can be constructed like `new Float32Array([myNumberValue])`.
+
+- **`storage`**: [Optional - defaults to `false`] Whether the parameter is a storage variable rather than a uniform variable.
+ This has to match the declaration in the shader code, e.g. for the variable declaration
+
+ ```WGSL
+ @group(0) @binding(0) var my_variable: f32;
+ ```
+
+ the `storage` property should be `false` or omitted, and for
+
+ ```WGSL
+ @group(0) @binding(0) var my_variable: f32;
+ ```
+
+ it should be `true`.
+ Note that Svader currently only supports `var` and not `var`.
+
+##### WebGPU built-in values
+
+Some types of inputs are used very often. These are implemented in Svader itself, and referred to as _built-in values_.
+To use these, the `value` property of the parameter object must be set to a string matching one of the following:
+
+- **`"resolution"`**: A `vec2f` of the canvas width and height in physical device pixels.
+
+- **`"scale"`**: An `f32` of the ratio between CSS pixels and physical device pixels, i.e. zoom level.
+ For example, if the browser has been zoomed to 150%, the `scale` parameter will be `1.5`.
+
+- **`"time"`**: An `f32` of the current time in seconds.
+ NOTE: Passing this parameter to the shader will cause it to rerender every frame.
+
+- **`"offset"`**: A `vec2f` to be added to the `@builtin(position)` of the fragment shader.
+ Sometimes the size of the canvas is limited by hardware.
+ To compensate for this, Svader creates a virtual canvas with a smaller cutout shifting around to cover the screen.
+ The `"resolution"` parameter is automatically adjusted to match the size of this virtual canvas, but for technical reasons,
+ the `@builtin(position)` cannot be adjusted from the outside.
+ Therefore, the `"offset"` parameter is provided to be manually added to these coordinates.
+
+## WebGL vs. WebGPU
+
+**For practical applications, default to using WebGL.**
+
+WebGL and WebGPU are both rendering APIs that allow web applications to render GPU-accelerated graphics.
+
+WebGL is the older of the two and is supported by [all modern browsers](https://caniuse.com/webgl).
+
+WebGPU is still in the experimental stage and is only supported in a [few browsers](https://caniuse.com/webgpu).
+However, it supports certain features that WebGL does not. For example, as of writing, WebGL in Google Chrome only supports having 8 canvases active in the document at once, while WebGPU supports a practically unlimited number.
+
+## License
+
+Svader is licensed under the [MIT License](https://github.com/sockmaster27/svader/blob/master/LICENSE.md).
diff --git a/packages/svader/package.json b/packages/svader/package.json
new file mode 100644
index 0000000..219edec
--- /dev/null
+++ b/packages/svader/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "svader",
+ "version": "0.4.1",
+ "description": "Create GPU-rendered Svelte components",
+ "author": "Holger Dal Mogensen",
+ "license": "MIT",
+ "repository": "github:sockmaster27/svader",
+ "keywords": [
+ "svader",
+ "svelte",
+ "svelte-components",
+ "webgpu",
+ "webgl",
+ "gpu",
+ "accelerated",
+ "graphics",
+ "fragment",
+ "shader",
+ "shaders"
+ ],
+ "scripts": {
+ "package": "svelte-kit sync && svelte-package && publint",
+ "prepublishOnly": "npm run package",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+ },
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "svelte": "./dist/index.js"
+ }
+ },
+ "files": [
+ "dist",
+ "!dist/**/*.test.*",
+ "!dist/**/*.spec.*"
+ ],
+ "peerDependencies": {
+ "svelte": "^4.0.0"
+ },
+ "devDependencies": {
+ "@sveltejs/kit": "^2.0.0",
+ "@sveltejs/package": "^2.3.4",
+ "@sveltejs/vite-plugin-svelte": "^3.0.0",
+ "@webgpu/types": "^0.1.44",
+ "publint": "^0.2.9",
+ "svelte": "^4.0.0",
+ "svelte-check": "^3.8.5",
+ "typescript": "^5.5.4",
+ "vite": "^5.4.0"
+ },
+ "svelte": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "type": "module"
+}
diff --git a/src/lib/BaseShader.svelte b/packages/svader/src/lib/BaseShader.svelte
similarity index 100%
rename from src/lib/BaseShader.svelte
rename to packages/svader/src/lib/BaseShader.svelte
diff --git a/src/lib/WebGlShader.svelte b/packages/svader/src/lib/WebGlShader.svelte
similarity index 100%
rename from src/lib/WebGlShader.svelte
rename to packages/svader/src/lib/WebGlShader.svelte
diff --git a/src/lib/WebGpuShader.svelte b/packages/svader/src/lib/WebGpuShader.svelte
similarity index 100%
rename from src/lib/WebGpuShader.svelte
rename to packages/svader/src/lib/WebGpuShader.svelte
diff --git a/src/lib/index.js b/packages/svader/src/lib/index.js
similarity index 100%
rename from src/lib/index.js
rename to packages/svader/src/lib/index.js
diff --git a/src/lib/intersectionObserver.js b/packages/svader/src/lib/intersectionObserver.js
similarity index 100%
rename from src/lib/intersectionObserver.js
rename to packages/svader/src/lib/intersectionObserver.js
diff --git a/src/lib/utils.js b/packages/svader/src/lib/utils.js
similarity index 100%
rename from src/lib/utils.js
rename to packages/svader/src/lib/utils.js
diff --git a/packages/svader/svelte.config.js b/packages/svader/svelte.config.js
new file mode 100644
index 0000000..bded485
--- /dev/null
+++ b/packages/svader/svelte.config.js
@@ -0,0 +1,4 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {};
+
+export default config;
diff --git a/tsconfig.json b/packages/svader/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to packages/svader/tsconfig.json
diff --git a/packages/tests-svelte4/package.json b/packages/tests-svelte4/package.json
new file mode 100644
index 0000000..fbf1481
--- /dev/null
+++ b/packages/tests-svelte4/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "tests-svelte4",
+ "private": true,
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build",
+ "preview": "vite build && vite preview",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+ },
+ "devDependencies": {
+ "@sveltejs/adapter-auto": "^3.0.0",
+ "@sveltejs/kit": "^2.0.0",
+ "@sveltejs/vite-plugin-svelte": "^3.1.1",
+ "svelte": "^4.0.0",
+ "svelte-check": "^4.0.0",
+ "typescript": "^5.0.0",
+ "vite": "^5.0.11"
+ },
+ "svelte": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "type": "module"
+}
diff --git a/resources/banner.png b/packages/tests-svelte4/resources/banner.png
similarity index 100%
rename from resources/banner.png
rename to packages/tests-svelte4/resources/banner.png
diff --git a/resources/bubbles.png b/packages/tests-svelte4/resources/bubbles.png
similarity index 100%
rename from resources/bubbles.png
rename to packages/tests-svelte4/resources/bubbles.png
diff --git a/resources/collage.png b/packages/tests-svelte4/resources/collage.png
similarity index 100%
rename from resources/collage.png
rename to packages/tests-svelte4/resources/collage.png
diff --git a/resources/debugShaderWebGl.png b/packages/tests-svelte4/resources/debugShaderWebGl.png
similarity index 100%
rename from resources/debugShaderWebGl.png
rename to packages/tests-svelte4/resources/debugShaderWebGl.png
diff --git a/resources/debugShaderWebGpu.png b/packages/tests-svelte4/resources/debugShaderWebGpu.png
similarity index 100%
rename from resources/debugShaderWebGpu.png
rename to packages/tests-svelte4/resources/debugShaderWebGpu.png
diff --git a/resources/halo.png b/packages/tests-svelte4/resources/halo.png
similarity index 100%
rename from resources/halo.png
rename to packages/tests-svelte4/resources/halo.png
diff --git a/resources/logoDark.png b/packages/tests-svelte4/resources/logoDark.png
similarity index 100%
rename from resources/logoDark.png
rename to packages/tests-svelte4/resources/logoDark.png
diff --git a/resources/logoLight.png b/packages/tests-svelte4/resources/logoLight.png
similarity index 100%
rename from resources/logoLight.png
rename to packages/tests-svelte4/resources/logoLight.png
diff --git a/resources/slider.png b/packages/tests-svelte4/resources/slider.png
similarity index 100%
rename from resources/slider.png
rename to packages/tests-svelte4/resources/slider.png
diff --git a/src/app.d.ts b/packages/tests-svelte4/src/app.d.ts
similarity index 100%
rename from src/app.d.ts
rename to packages/tests-svelte4/src/app.d.ts
diff --git a/src/app.html b/packages/tests-svelte4/src/app.html
similarity index 82%
rename from src/app.html
rename to packages/tests-svelte4/src/app.html
index 2f12f93..faf2db7 100644
--- a/src/app.html
+++ b/packages/tests-svelte4/src/app.html
@@ -3,6 +3,7 @@
+
%sveltekit.head%
diff --git a/src/routes/+layout.server.js b/packages/tests-svelte4/src/routes/+layout.server.js
similarity index 100%
rename from src/routes/+layout.server.js
rename to packages/tests-svelte4/src/routes/+layout.server.js
diff --git a/src/routes/+page.svelte b/packages/tests-svelte4/src/routes/+page.svelte
similarity index 100%
rename from src/routes/+page.svelte
rename to packages/tests-svelte4/src/routes/+page.svelte
diff --git a/src/routes/hello-world/+page.svelte b/packages/tests-svelte4/src/routes/hello-world/+page.svelte
similarity index 100%
rename from src/routes/hello-world/+page.svelte
rename to packages/tests-svelte4/src/routes/hello-world/+page.svelte
diff --git a/src/routes/hello-world/webgl/+page.svelte b/packages/tests-svelte4/src/routes/hello-world/webgl/+page.svelte
similarity index 89%
rename from src/routes/hello-world/webgl/+page.svelte
rename to packages/tests-svelte4/src/routes/hello-world/webgl/+page.svelte
index 3a6b533..09cf622 100644
--- a/src/routes/hello-world/webgl/+page.svelte
+++ b/packages/tests-svelte4/src/routes/hello-world/webgl/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/hello-world/webgl/shader.frag b/packages/tests-svelte4/src/routes/hello-world/webgl/shader.frag
similarity index 100%
rename from src/routes/hello-world/webgl/shader.frag
rename to packages/tests-svelte4/src/routes/hello-world/webgl/shader.frag
diff --git a/src/routes/hello-world/webgpu/+page.svelte b/packages/tests-svelte4/src/routes/hello-world/webgpu/+page.svelte
similarity index 90%
rename from src/routes/hello-world/webgpu/+page.svelte
rename to packages/tests-svelte4/src/routes/hello-world/webgpu/+page.svelte
index 75a3e92..9335e26 100644
--- a/src/routes/hello-world/webgpu/+page.svelte
+++ b/packages/tests-svelte4/src/routes/hello-world/webgpu/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/hello-world/webgpu/shader.wgsl b/packages/tests-svelte4/src/routes/hello-world/webgpu/shader.wgsl
similarity index 100%
rename from src/routes/hello-world/webgpu/shader.wgsl
rename to packages/tests-svelte4/src/routes/hello-world/webgpu/shader.wgsl
diff --git a/src/routes/landing-page-bubbles/+page.svelte b/packages/tests-svelte4/src/routes/landing-page-bubbles/+page.svelte
similarity index 100%
rename from src/routes/landing-page-bubbles/+page.svelte
rename to packages/tests-svelte4/src/routes/landing-page-bubbles/+page.svelte
diff --git a/src/routes/landing-page-bubbles/webgl/+page.svelte b/packages/tests-svelte4/src/routes/landing-page-bubbles/webgl/+page.svelte
similarity index 97%
rename from src/routes/landing-page-bubbles/webgl/+page.svelte
rename to packages/tests-svelte4/src/routes/landing-page-bubbles/webgl/+page.svelte
index d4c2dcb..e3f0794 100644
--- a/src/routes/landing-page-bubbles/webgl/+page.svelte
+++ b/packages/tests-svelte4/src/routes/landing-page-bubbles/webgl/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/landing-page-halo/webgl/shader.frag b/packages/tests-svelte4/src/routes/landing-page-halo/webgl/shader.frag
similarity index 100%
rename from src/routes/landing-page-halo/webgl/shader.frag
rename to packages/tests-svelte4/src/routes/landing-page-halo/webgl/shader.frag
diff --git a/src/routes/landing-page-halo/webgpu/+page.svelte b/packages/tests-svelte4/src/routes/landing-page-halo/webgpu/+page.svelte
similarity index 96%
rename from src/routes/landing-page-halo/webgpu/+page.svelte
rename to packages/tests-svelte4/src/routes/landing-page-halo/webgpu/+page.svelte
index 0e71e94..2622c48 100644
--- a/src/routes/landing-page-halo/webgpu/+page.svelte
+++ b/packages/tests-svelte4/src/routes/landing-page-halo/webgpu/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/landing-page-halo/webgpu/shader.wgsl b/packages/tests-svelte4/src/routes/landing-page-halo/webgpu/shader.wgsl
similarity index 100%
rename from src/routes/landing-page-halo/webgpu/shader.wgsl
rename to packages/tests-svelte4/src/routes/landing-page-halo/webgpu/shader.wgsl
diff --git a/src/routes/logo/+page.svelte b/packages/tests-svelte4/src/routes/logo/+page.svelte
similarity index 100%
rename from src/routes/logo/+page.svelte
rename to packages/tests-svelte4/src/routes/logo/+page.svelte
diff --git a/src/routes/logo/logoDark.png b/packages/tests-svelte4/src/routes/logo/logoDark.png
similarity index 100%
rename from src/routes/logo/logoDark.png
rename to packages/tests-svelte4/src/routes/logo/logoDark.png
diff --git a/src/routes/logo/webgl/+page.svelte b/packages/tests-svelte4/src/routes/logo/webgl/+page.svelte
similarity index 97%
rename from src/routes/logo/webgl/+page.svelte
rename to packages/tests-svelte4/src/routes/logo/webgl/+page.svelte
index 29059ba..9203423 100644
--- a/src/routes/logo/webgl/+page.svelte
+++ b/packages/tests-svelte4/src/routes/logo/webgl/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/logo/webgl/shader.frag b/packages/tests-svelte4/src/routes/logo/webgl/shader.frag
similarity index 100%
rename from src/routes/logo/webgl/shader.frag
rename to packages/tests-svelte4/src/routes/logo/webgl/shader.frag
diff --git a/src/routes/logo/webgpu/+page.svelte b/packages/tests-svelte4/src/routes/logo/webgpu/+page.svelte
similarity index 97%
rename from src/routes/logo/webgpu/+page.svelte
rename to packages/tests-svelte4/src/routes/logo/webgpu/+page.svelte
index 505e5f1..9cd727d 100644
--- a/src/routes/logo/webgpu/+page.svelte
+++ b/packages/tests-svelte4/src/routes/logo/webgpu/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/logo/webgpu/shader.wgsl b/packages/tests-svelte4/src/routes/logo/webgpu/shader.wgsl
similarity index 100%
rename from src/routes/logo/webgpu/shader.wgsl
rename to packages/tests-svelte4/src/routes/logo/webgpu/shader.wgsl
diff --git a/src/routes/oversized-canvas/+page.svelte b/packages/tests-svelte4/src/routes/oversized-canvas/+page.svelte
similarity index 100%
rename from src/routes/oversized-canvas/+page.svelte
rename to packages/tests-svelte4/src/routes/oversized-canvas/+page.svelte
diff --git a/src/routes/oversized-canvas/webgl/+page.svelte b/packages/tests-svelte4/src/routes/oversized-canvas/webgl/+page.svelte
similarity index 89%
rename from src/routes/oversized-canvas/webgl/+page.svelte
rename to packages/tests-svelte4/src/routes/oversized-canvas/webgl/+page.svelte
index c608442..7f87c49 100644
--- a/src/routes/oversized-canvas/webgl/+page.svelte
+++ b/packages/tests-svelte4/src/routes/oversized-canvas/webgl/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/oversized-canvas/webgl/shader.frag b/packages/tests-svelte4/src/routes/oversized-canvas/webgl/shader.frag
similarity index 100%
rename from src/routes/oversized-canvas/webgl/shader.frag
rename to packages/tests-svelte4/src/routes/oversized-canvas/webgl/shader.frag
diff --git a/src/routes/oversized-canvas/webgpu/+page.svelte b/packages/tests-svelte4/src/routes/oversized-canvas/webgpu/+page.svelte
similarity index 90%
rename from src/routes/oversized-canvas/webgpu/+page.svelte
rename to packages/tests-svelte4/src/routes/oversized-canvas/webgpu/+page.svelte
index 1a48094..09f9d17 100644
--- a/src/routes/oversized-canvas/webgpu/+page.svelte
+++ b/packages/tests-svelte4/src/routes/oversized-canvas/webgpu/+page.svelte
@@ -1,5 +1,5 @@
diff --git a/src/routes/oversized-canvas/webgpu/shader.wgsl b/packages/tests-svelte4/src/routes/oversized-canvas/webgpu/shader.wgsl
similarity index 100%
rename from src/routes/oversized-canvas/webgpu/shader.wgsl
rename to packages/tests-svelte4/src/routes/oversized-canvas/webgpu/shader.wgsl
diff --git a/src/routes/remount/+page.svelte b/packages/tests-svelte4/src/routes/remount/+page.svelte
similarity index 100%
rename from src/routes/remount/+page.svelte
rename to packages/tests-svelte4/src/routes/remount/+page.svelte
diff --git a/src/routes/remount/webgl/+page.svelte b/packages/tests-svelte4/src/routes/remount/webgl/+page.svelte
similarity index 93%
rename from src/routes/remount/webgl/+page.svelte
rename to packages/tests-svelte4/src/routes/remount/webgl/+page.svelte
index b6290bd..03f2a08 100644
--- a/src/routes/remount/webgl/+page.svelte
+++ b/packages/tests-svelte4/src/routes/remount/webgl/+page.svelte
@@ -1,5 +1,5 @@