shaderkit 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,185 @@
1
+ [![Size](https://img.shields.io/bundlephobia/minzip/shaderkit?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/shaderkit)
2
+ [![Version](https://img.shields.io/npm/v/shaderkit?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/shaderkit)
3
+ [![Downloads](https://img.shields.io/npm/dt/shaderkit.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/shaderkit)
4
+
1
5
  # shaderkit
2
6
 
3
- Lightweight compiler for GLSL and WGSL.
7
+ Tools and IntelliSense for GLSL and WGSL.
8
+
9
+ ## Installation
10
+
11
+ To install, use your preferred package manager:
12
+
13
+ ```bash
14
+ npm install shaderkit
15
+ yarn add shaderkit
16
+ pnpm add shaderkit
17
+ ```
18
+
19
+ Or, use a CDN:
20
+
21
+ ```html
22
+ <script type="module">
23
+ import * as shaderkit from 'https://unpkg.com/shaderkit'
24
+ </script>
25
+ ```
26
+
27
+ ## Tokenize
28
+
29
+ Tokenizes a string of GLSL or WGSL code, returning an array of `Token` objects, where each `Token` object represents a single syntax feature in the input code.
30
+
31
+ <details>
32
+ <summary>GLSL Example</summary>
33
+
34
+ <br />
35
+
36
+ ```ts
37
+ import { tokenize } from 'shaderkit'
38
+
39
+ const code = 'void main() { gl_Position = vec4(0, 0, 0, 1); }'
40
+ const tokens = tokenize(code)
41
+
42
+ console.log(tokens)
43
+ ```
44
+
45
+ The output of the above code will be:
46
+
47
+ ```json
48
+ [
49
+ { "type": "keyword", "value": "void" },
50
+ { "type": "whitespace", "value": " " },
51
+ { "type": "identifier", "value": "main" },
52
+ { "type": "symbol", "value": "(" },
53
+ { "type": "symbol", "value": ")" },
54
+ { "type": "whitespace", "value": " " },
55
+ { "type": "symbol", "value": "{" },
56
+ { "type": "whitespace", "value": " " },
57
+ { "type": "keyword", "value": "gl_Position" },
58
+ { "type": "whitespace", "value": " " },
59
+ { "type": "symbol", "value": "=" },
60
+ { "type": "whitespace", "value": " " },
61
+ { "type": "keyword", "value": "vec4" },
62
+ { "type": "symbol", "value": "(" },
63
+ { "type": "int", "value": "0" },
64
+ { "type": "symbol", "value": "," },
65
+ { "type": "whitespace", "value": " " },
66
+ { "type": "int", "value": "0" },
67
+ { "type": "symbol", "value": "," },
68
+ { "type": "whitespace", "value": " " },
69
+ { "type": "int", "value": "0" },
70
+ { "type": "symbol", "value": "," },
71
+ { "type": "whitespace", "value": " " },
72
+ { "type": "int", "value": "1" },
73
+ { "type": "symbol", "value": ")" },
74
+ { "type": "symbol", "value": ";" },
75
+ { "type": "whitespace", "value": " " },
76
+ { "type": "symbol", "value": "}" }
77
+ ]
78
+ ```
79
+
80
+ </details>
81
+
82
+ <details>
83
+ <summary>WGSL Example</summary>
84
+
85
+ <br />
86
+
87
+ ```ts
88
+ import { tokenize } from 'shaderkit'
89
+
90
+ const code = '@vertex fn main() -> @builtin(position) vec4<f32> { return vec4(0, 0, 0, 1); }'
91
+ const tokens = tokenize(code)
92
+
93
+ console.log(tokens)
94
+ ```
95
+
96
+ The output of the above code will be:
97
+
98
+ ```json
99
+ [
100
+ { "type": "symbol", "value": "@" },
101
+ { "type": "keyword", "value": "vertex" },
102
+ { "type": "whitespace", "value": " " },
103
+ { "type": "keyword", "value": "fn" },
104
+ { "type": "whitespace", "value": " " },
105
+ { "type": "identifier", "value": "main" },
106
+ { "type": "symbol", "value": "(" },
107
+ { "type": "symbol", "value": ")" },
108
+ { "type": "whitespace", "value": " " },
109
+ { "type": "symbol", "value": "->" },
110
+ { "type": "whitespace", "value": " " },
111
+ { "type": "symbol", "value": "@" },
112
+ { "type": "keyword", "value": "builtin" },
113
+ { "type": "symbol", "value": "(" },
114
+ { "type": "keyword", "value": "position" },
115
+ { "type": "symbol", "value": ")" },
116
+ { "type": "whitespace", "value": " " },
117
+ { "type": "keyword", "value": "vec4" },
118
+ { "type": "symbol", "value": "<" },
119
+ { "type": "keyword", "value": "f32" },
120
+ { "type": "symbol", "value": ">" },
121
+ { "type": "whitespace", "value": " " },
122
+ { "type": "symbol", "value": "{" },
123
+ { "type": "whitespace", "value": " " },
124
+ { "type": "keyword", "value": "return" },
125
+ { "type": "whitespace", "value": " " },
126
+ { "type": "keyword", "value": "vec4" },
127
+ { "type": "symbol", "value": "(" },
128
+ { "type": "int", "value": "0" },
129
+ { "type": "symbol", "value": "," },
130
+ { "type": "whitespace", "value": " " },
131
+ { "type": "int", "value": "0" },
132
+ { "type": "symbol", "value": "," },
133
+ { "type": "whitespace", "value": " " },
134
+ { "type": "int", "value": "0" },
135
+ { "type": "symbol", "value": "," },
136
+ { "type": "whitespace", "value": " " },
137
+ { "type": "int", "value": "1" },
138
+ { "type": "symbol", "value": ")" },
139
+ { "type": "symbol", "value": ";" },
140
+ { "type": "whitespace", "value": " " },
141
+ { "type": "symbol", "value": "}" }
142
+ ]
143
+ ```
144
+
145
+ </details>
146
+
147
+ The following are the supported token types and their descriptions:
148
+
149
+ | Type | Description |
150
+ | ---------- | ------------------------------------------------------------------------- |
151
+ | whitespace | A sequence of one or more whitespace characters. |
152
+ | comment | A single-line or multi-line comment. |
153
+ | symbol | A symbol, such as an operator or punctuation mark. |
154
+ | bool | A boolean value, either true or false. |
155
+ | float | A floating-point number, represented by a sequence of digits and symbols. |
156
+ | int | An integer number, represented by a sequence of digits. |
157
+ | identifier | A user-defined identifier, such as a variable name or function name. |
158
+ | keyword | A keyword reserved by the language, such as if, else, for, etc. |
159
+
160
+ ## Minify
161
+
162
+ Minifies a string of GLSL or WGSL code, returning a minified version of the input code.
163
+
164
+ ```ts
165
+ const minified: string = minify(code: string, {
166
+ /** Whether to rename variables. Will call a MangleMatcher if specified. Default is `false`. */
167
+ mangle: boolean | ((token: Token, index: number, tokens: Token[]) => boolean)
168
+ /** A map to read and write renamed variables to when mangling. */
169
+ mangleMap: Map<string, string>
170
+ /** Whether to rename external variables such as uniforms or varyings. Default is `false`. */
171
+ mangleExternals: boolean
172
+ })
173
+ ```
174
+
175
+ To shared mangled interfaces when using `mangleExternal`, declare and re-use a `mangleMap` between shaders:
176
+
177
+ ```ts
178
+ const programOpts = { mangle: true, mangleExternals: true, mangleMap: new Map() }
179
+
180
+ // #version 300 es\nin vec2 a;out vec2 b;void main(){b=a;}
181
+ minify(`#version 300 es\nin vec2 uv;out vec2 c;void main(){c=uv;}`, programOpts)
182
+
183
+ // #version 300 es\nin vec2 b;out vec4 c[gl_MaxDrawBuffers];void main(){c[0]=b.sstt;}
184
+ minify(`#version 300 es\nin vec2 c;out vec4 data[gl_MaxDrawBuffers];void main(){data[0]=c.sstt;}`, programOpts)
185
+ ```