@bigmistqke/view.gl 0.1.0 → 0.1.2

package/.claude/settings.local.json

@@ -1,7 +1,8 @@
 {
   "permissions": {
     "allow": [
-      "Bash(rg:*)"
+      "Bash(pnpm build:*)",
+      "Bash(grep:*)"
     ],
     "deny": []
   }

package/.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,31 @@
+name: "🐛 Bug report"
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        The more information you fill in, the better the community can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Minimal Reproduction Link
+      description: |
+        Please provide a link to a minimal reproduction of the bug you are running into.
+        It makes the process of verifying and fixing the bug much easier.
+        Note:
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the solid-js and solid-primitives.
+        - To create a shareable code example you can use [Stackblitz](https://stackblitz.com/) (https://solid.new). Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: |
+        e.g. https://stackblitz.com/edit/...... OR Github Repo
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,27 @@
+name: "Feature Request"
+description: For feature/enhancement requests. Please search for existing issues first.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for bringing your ideas here :pray:.
+
+        The more information you fill in, the better the community can understand your idea.
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe The Problem To Be Solved
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Suggest A Solution
+      description: |
+        A concise description of your preferred solution. Things to address include:
+        - Details of the technical implementation
+        - Tradeoffs made in design decisions
+        - Caveats and considerations for the future
+    validations:
+      required: true

package/.github/workflows/codeql.yml

@@ -0,0 +1,46 @@
+name: 'CodeQL'
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  schedule:
+    - cron: '30 1 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: javascript
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
+        with:
+          upload: false
+          output: sarif-results
+
+      # Only include files that are public
+      - name: filter-sarif
+        uses: advanced-security/filter-sarif@main
+        with:
+          patterns: |
+            /src/**/*.*
+            -**/*.test.*
+          input: sarif-results/javascript.sarif
+          output: sarif-results/javascript.sarif
+
+      - name: Upload SARIF
+        uses: github/codeql-action/upload-sarif@v1
+        with:
+          sarif_file: sarif-results/javascript.sarif

package/.github/workflows/deploy-page.yml

@@ -0,0 +1,38 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main # or the branch you want to trigger the deployment from
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: install latest corepack
+        run: npm install corepack@latest -g
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build dev
+        run: pnpm dev:build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dev/dist # Adjust if your build output directory is different
+          publish_branch: gh-pages # Specify the branch to deploy to

package/.github/workflows/format.yml

@@ -0,0 +1,40 @@
+name: Format
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: install latest corepack
+        run: npm install corepack@latest -g
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      # "git restore ." discards changes to package-lock.json
+      - name: Install dependencies
+        run: |
+          pnpm install --no-frozen-lockfile --ignore-scripts
+          git restore .
+
+      - name: Format
+        run: pnpm run format
+
+      - name: Add, Commit and Push
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: 'Format'

package/README.md

@@ -14,17 +14,15 @@ Minimal library for WebGL shader resource management with type-safe GLSL templat
   - [Drawing Examples](#drawing-examples)
     - [Regular Drawing](#regular-drawing)
     - [Instanced Drawing](#instanced-drawing)
-  - [Features](#features)
 - [Tag](#tag)
   - [Basic Usage](#basic-usage-1)
   - [Template Features](#template-features)
   - [Tag Functions](#tag-functions)
-  - [Supported Types](#supported-types)
+  - [Symbol Support in Templates](#symbol-support)
 - [Utils](#utils)
-  - [WebGL Utilities](#webgl-utilities)
-  - [Type Utilities](#type-utilities)
-  - [Type Guards](#type-guards)
-  - [Resource Creation](#resource-creation)
+  - [Create Program](#createprogram)
+  - [Create Texture](#createtexture)
+  - [Create Frame Buffer](#createframebuffer)
 
 ## View
 
@@ -33,9 +31,9 @@ The view system provides type-safe WebGL resource management for uniforms, attri
 ### Basic Usage
 
 ```typescript
-import { view } from 'view.gl'
+import { view } from '@bigmistqke/view.gl'
 
-const resources = view(gl, program, {
+const { uniforms, attributes } = view(gl, program, {
   uniforms: {
     time: { kind: 'float' },
     resolution: { kind: 'vec2' },
@@ -50,12 +48,12 @@ const resources = view(gl, program, {
 })
 
 // Type-safe uniform setting
-resources.uniforms.time.set(performance.now())
-resources.uniforms.resolution.set(canvas.width, canvas.height)
+uniforms.time.set(performance.now())
+uniforms.resolution.set(canvas.width, canvas.height)
 
 // Attribute management
-resources.attributes.position.set(positionData)
-resources.attributes.position.bind()
+attributes.position.set(positionData)
+attributes.position.bind()
 ```
 
 ### View Types
@@ -63,7 +61,12 @@ resources.attributes.position.bind()
 Each view type can be imported individually too.
 
 ```typescript
-import { uniformView, attributeView, interleavedAttributeView, bufferView } from 'view.gl'
+import {
+  uniformView,
+  attributeView,
+  interleavedAttributeView,
+  bufferView,
+} from '@bigmistqke/view.gl'
 ```
 
 #### uniformView
@@ -71,7 +74,7 @@ import { uniformView, attributeView, interleavedAttributeView, bufferView } from
 Manages shader uniform variables.
 
 ```typescript
-import { uniformView } from 'view.gl'
+import { uniformView } from '@bigmistqke/view.gl'
 
 const uniforms = uniformView(gl, program, {
   time: { kind: 'float' },
@@ -94,7 +97,7 @@ uniforms.transform.set(transformMatrix)
 Manages vertex attributes with buffer creation, binding, and data management.
 
 ```typescript
-import { attributeView } from 'view.gl'
+import { attributeView } from '@bigmistqke/view.gl'
 
 const attributes = attributeView(gl, program, {
   position: { kind: 'vec3' },
@@ -125,20 +128,20 @@ gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 100)
 Manages interleaved vertex data with automatic stride/offset calculation and VAO optimization.
 
 ```typescript
-import { interleavedAttributeView } from 'view.gl'
+import { interleavedAttributeView } from '@bigmistqke/view.gl'
 
 const interleavedAttributes = interleavedAttributeView(gl, program, {
   vertexData: {
     layout: [
-      { name: 'position', kind: 'vec3' },
-      { name: 'normal', kind: 'vec3' },
-      { name: 'uv', kind: 'vec2' },
+      { key: 'position', kind: 'vec3' },
+      { key: 'normal', kind: 'vec3' },
+      { key: 'uv', kind: 'vec2' },
     ],
   },
   instanceData: {
     layout: [
-      { name: 'instancePos', kind: 'vec2' },
-      { name: 'instanceColor', kind: 'vec3' },
+      { key: 'instancePos', kind: 'vec2' },
+      { key: 'instanceColor', kind: 'vec3' },
     ],
     instanced: true,
   },
@@ -163,7 +166,7 @@ interleavedAttributes.instanceData.bind()
 Manages generic WebGL buffers for various uses.
 
 ```typescript
-import { bufferView } from 'view.gl'
+import { bufferView } from '@bigmistqke/view.gl'
 
 const buffers = bufferView(gl, {
   indices: { target: 'ELEMENT_ARRAY_BUFFER' },
@@ -221,13 +224,13 @@ gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, instanceCount)
 ### Features
 
 - **Automatic Resource Management**: Buffer creation, disposal, and cleanup
-- **Type Safety**: Compile-time type checking for uniform and attribute operations
+- **Type Safety**: type checking for uniform and attribute operations
 - **WebGL Extensions**: Automatic fallback for instanced arrays and vertex array objects
-- **Memory Management**: AbortSignal support for resource cleanup
+- **Memory Management**: AbortSignal support for scheduling cleanup of resources
 
 ## Tag
 
-The tag system provides GLSL template literal support with embedded resource definitions.
+The tag system provides GLSL template literal support with embedded schema definitions.
 
 ### Template Features
 
@@ -235,6 +238,7 @@ The tag system provides GLSL template literal support with embedded resource def
 - **Type Safety**: Automatic schema generation from template literals
 - **WebGL Version Support**: Automatic syntax conversion for WebGL1/2
 - **Interleaved Attributes**: Multi-attribute layout support
+- **Symbol Support**: Use JavaScript symbols as keys (see [View Features](#symbol-support))
 
 ### Tag Functions
 
@@ -247,7 +251,7 @@ The tag system provides GLSL template literal support with embedded resource def
 ### Basic Usage
 
 ```typescript
-import { glsl, uniform, attribute, compile } from 'view.gl/tag'
+import { glsl, uniform, attribute, compile } from '@bigmistqke/view.gl/tag'
 
 const vertexShader = glsl`
   ${attribute.vec3('position')}
@@ -276,28 +280,81 @@ const fragmentShader = glsl`
 const { program, schema } = compile(gl, vertexShader, fragmentShader)
 ```
 
-## Utils
+### Symbol Support
+
+Symbols are supported as keys for uniforms, attributes, and buffers. When interpolated in glsl templates, they're automatically converted to valid GLSL identifiers. This prevents naming collisions between different shader modules and enables private scoping of shader variables.
+
+```typescript
+const u_time = Symbol('time')
+const a_position = Symbol('position')
+
+const shader = glsl`
+  ${attribute.vec3(a_position)}
+  ${uniform.float(u_time)}
+  
+  void main() {
+    gl_Position = vec4(${a_position}, ${u_time});
+  }
+`
+```
+
+When manually constructing GLSL strings, use `toID()` to convert symbols to valid identifiers:
+
+```typescript
+import { createProgram, view, toID } from 'view.gl'
+
+const u_time = Symbol('time')
+const a_position = Symbol('position')
+
+const vertex = `
+  attribute vec3 ${toID(a_position)};
+  uniform float ${toID(u_time)};
 
-WebGL utilities and helper functions.
+  void main() {
+    gl_Position = vec4(${toID(a_position)}, ${toID(u_time)});
+  }
+`
+
+const fragment = `
+  precision mediump float;
+  uniform float ${toID(u_time)};
+
+  void main() {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, sin(${toID(u_time)}));
+  }
+`
+
+const program = createProgram(gl, vertex, fragment)
+
+const { attributes, uniforms } = view(gl, program, {
+  uniforms: { [u_time]: { kind: 'float' } },
+  attributes: { [a_position]: { kind: 'vec3' } },
+})
+
+attributes[a_position].set(vertexData)
+uniforms[u_time].set(performance.now())
+```
+
+## Utils
 
-### WebGL Utilities
+WebGL utilities.
 
-#### createProgram
+### createProgram
 
 Creates and links a WebGL program from vertex and fragment shader sources.
 
 ```typescript
-import { createProgram } from 'view.gl/utils'
+import { createProgram } from '@bigmistqke/view.gl/utils'
 
 const program = createProgram(gl, vertexShaderSource, fragmentShaderSource)
 ```
 
-#### createTexture
+### createTexture
 
 Creates a WebGL texture with specified parameters.
 
 ```typescript
-import { createTexture } from 'view.gl/utils'
+import { createTexture } from '@bigmistqke/view.gl/utils'
 
 const texture = createTexture(
   gl,
@@ -318,12 +375,12 @@ const texture = createTexture(
 
 Automatically validates WebGL2-only formats and provides fallbacks for WebGL1.
 
-#### createFramebuffer
+### createFramebuffer
 
 Creates a framebuffer with attached texture for render-to-texture operations.
 
 ```typescript
-import { createFramebuffer } from 'view.gl/utils'
+import { createFramebuffer } from '@bigmistqke/view.gl/utils'
 
 const { framebuffer, texture } = createFramebuffer(gl, {
   width: 512,

package/dev/404.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>view.gl</title>
+  <script>
+    // Redirect to index.html with the current path as a query parameter
+    const path = window.location.pathname.slice(1); // Remove leading slash
+    if (path) {
+      window.location.replace(window.location.origin + '/?redirect=' + path);
+    } else {
+      window.location.replace(window.location.origin);
+    }
+  </script>
+</head>
+<body>
+  Redirecting...
+</body>
+</html>

package/dev/dist/404.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>view.gl</title>
+  <script>
+    // Redirect to index.html with the current path as a query parameter
+    const path = window.location.pathname.slice(1); // Remove leading slash
+    if (path) {
+      window.location.replace(window.location.origin + '/?redirect=' + path);
+    } else {
+      window.location.replace(window.location.origin);
+    }
+  </script>
+</head>
+<body>
+  Redirecting...
+</body>
+</html>