@codyjasonbennett/shaderkit-bundlephobia-test
Advanced tools
Tools and IntelliSense for GLSL and WGSL.
Tools and IntelliSense for GLSL and WGSL.
To install, use your preferred package manager:
npm install shaderkit
yarn add shaderkit
pnpm add shaderkit
Or, use a CDN:
<script type="module">
import * as shaderkit from 'https://unpkg.com/shaderkit'
</script>
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.
interface Token {
type: 'whitespace' | 'comment' | 'symbol' | 'bool' | 'float' | 'int' | 'identifier' | 'keyword'
value: string
}
import { tokenize } from 'shaderkit'
const code = 'void main() { gl_Position = vec4(0, 0, 0, 1); }'
const tokens = tokenize(code)
console.log(tokens)
The output of the above code will be:
[
{ "type": "keyword", "value": "void" },
{ "type": "whitespace", "value": " " },
{ "type": "identifier", "value": "main" },
{ "type": "symbol", "value": "(" },
{ "type": "symbol", "value": ")" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "{" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "gl_Position" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "=" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "vec4" },
{ "type": "symbol", "value": "(" },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "1" },
{ "type": "symbol", "value": ")" },
{ "type": "symbol", "value": ";" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "}" }
]
import { tokenize } from 'shaderkit'
const code = '@vertex fn main() -> @builtin(position) vec4<f32> { return vec4(0, 0, 0, 1); }'
const tokens = tokenize(code)
console.log(tokens)
The output of the above code will be:
[
{ "type": "symbol", "value": "@" },
{ "type": "keyword", "value": "vertex" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "fn" },
{ "type": "whitespace", "value": " " },
{ "type": "identifier", "value": "main" },
{ "type": "symbol", "value": "(" },
{ "type": "symbol", "value": ")" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "->" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "@" },
{ "type": "keyword", "value": "builtin" },
{ "type": "symbol", "value": "(" },
{ "type": "keyword", "value": "position" },
{ "type": "symbol", "value": ")" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "vec4" },
{ "type": "symbol", "value": "<" },
{ "type": "keyword", "value": "f32" },
{ "type": "symbol", "value": ">" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "{" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "return" },
{ "type": "whitespace", "value": " " },
{ "type": "keyword", "value": "vec4" },
{ "type": "symbol", "value": "(" },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "0" },
{ "type": "symbol", "value": "," },
{ "type": "whitespace", "value": " " },
{ "type": "int", "value": "1" },
{ "type": "symbol", "value": ")" },
{ "type": "symbol", "value": ";" },
{ "type": "whitespace", "value": " " },
{ "type": "symbol", "value": "}" }
]
The following are the supported token types and their descriptions:
| Type | Description |
|---|---|
| whitespace | A sequence of one or more whitespace characters. |
| comment | A single-line or multi-line comment. |
| symbol | A symbol, such as an operator or punctuation mark. |
| bool | A boolean value, either true or false. |
| float | A floating-point number, represented by a sequence of digits and symbols. |
| int | An integer number, represented by a sequence of digits. |
| identifier | A user-defined identifier, such as a variable name or function name. |
| keyword | A keyword reserved by the language, such as if, else, for, etc. |
Minifies a string of GLSL or WGSL code, returning a minified version of the input code.
const minified: string = minify(code: string, {
/** Whether to rename variables. Will call a MangleMatcher if specified. Default is `false`. */
mangle: boolean | ((token: Token, index: number, tokens: Token[]) => boolean)
/** A map to read and write renamed variables to when mangling. */
mangleMap: Map<string, string>
/** Whether to rename external variables such as uniforms or varyings. Default is `false`. */
mangleExternals: boolean
})
To shared mangled interfaces when using mangleExternal, declare and re-use a mangleMap between shaders:
const options = { mangle: true, mangleExternals: true, mangleMap: new Map() }
// #version 300 es\nin vec2 a;out vec2 b;void main(){b=a;}
minify(`#version 300 es\nin vec2 sstt;out vec2 c;void main(){c=sstt;}`, options)
// #version 300 es\nin vec2 b;out vec4 a[gl_MaxDrawBuffers];void main(){a[0]=b.sstt;}
minify(`#version 300 es\nin vec2 c;out vec4 data[gl_MaxDrawBuffers];void main(){data[0]=c.sstt;}`, options)
Parses a string of GLSL (WGSL is WIP) code into an AST.
const ast: Program = parse(code: string)
Generates a string of GLSL (WGSL is WIP) code from an AST.
const code: string = generate(program: Program, {
target: 'GLSL' // | 'WGSL'
})
Recurses through an AST, calling a visitor object on matching nodes.
visit(
program: Program,
visitors: {
Program: {
enter(node, ancestors) {
// Called before any descendant nodes are processed
},
exit(node, ancestors) {
// Called after all nodes are processed
}
},
Identifier(node, ancestors) {
// Called before any descendant nodes are processed (alias to enter)
}
} satisfies Visitors
)
An Abstract Syntax Tree loosely based on ESTree for GLSL and WGSL grammars.
AST nodes extend Node objects which implement the following abstract interface:
interface Node {
type: string
}
The type field is a string representing the AST variant type which can determine the interface a node implements.
A variable identifier.
interface Identifier extends Node {
type: 'Identifier'
name: string
}
A shader literal representing a bool, float, int, or uint type.
interface Literal extends Node {
type: 'Literal'
value: string
}
An array and its dimensions.
interface ArraySpecifier extends Node {
type: 'ArraySpecifier'
typeSpecifier: Identifier
dimensions: (Literal | Identifier | null)[]
}
Represents the root of an AST.
interface Program extends Node {
type: 'Program'
body: Statement[]
}
An expression as a standalone statement.
interface ExpressionStatement extends Node {
type: 'ExpressionStatement'
expression: Expression
}
A block statement.
interface BlockStatement extends Node {
type: 'BlockStatement'
body: Statement[]
}
A discard statement in fragment shaders.
interface DiscardStatement extends Node {
type: 'DiscardStatement'
}
A GLSL preprocessor statement with an optional value.
interface PreprocessorStatement extends Node {
type: 'PreprocessorStatement'
name: string
value: Expression[] | null
}
A GLSL precision statement.
interface PrecisionStatement extends Node {
type: 'PrecisionStatement'
precision: PrecisionQualifier
typeSpecifier: Identifier
}
A return statement with an optional argument.
interface ReturnStatement extends Node {
type: 'ReturnStatement'
argument: Expression | null
}
A break statement.
interface BreakStatement extends Node {
type: 'BreakStatement'
}
A continue statement.
interface ContinueStatement extends Node {
type: 'ContinueStatement'
}
An if-else statement.
interface IfStatement extends Node {
type: 'IfStatement'
test: Expression
consequent: Statement
alternate: Statement | null
}
A switch statement.
interface SwitchStatement extends Node {
type: 'SwitchStatement'
discriminant: Expression
cases: SwitchCase[]
}
A switch-case statement. test is null for a default case.
interface SwitchCase extends Node {
type: 'SwitchCase'
test: Expression | null
consequent: Statement[]
}
A while statement.
interface WhileStatement extends Node {
type: 'WhileStatement'
test: Expression
body: Statement
}
A do-while statement.
interface DoWhileStatement extends Node {
type: 'DoWhileStatement'
body: Statement
test: Expression
}
A for statement.
interface ForStatement extends Node {
type: 'ForStatement'
init: VariableDeclaration | Expression | null
test: Expression | null
update: Expression | null
body: Statement
}
A function declaration. body is null for overloads.
interface FunctionDeclaration extends Node {
type: 'FunctionDeclaration'
id: Identifier
qualifiers: PrecisionQualifier[]
typeSpecifier: Identifier | ArraySpecifier
params: FunctionParameter[]
body: BlockStatement | null
}
A function parameter within a function declaration.
interface FunctionParameter extends Node {
type: 'FunctionParameter'
id: Identifier
qualifiers: (ConstantQualifier | ParameterQualifier | PrecisionQualifier)[]
typeSpecifier: Identifier | ArraySpecifier
}
A variable declaration.
interface VariableDeclaration extends Node {
type: 'VariableDeclaration'
declarations: VariableDeclarator[]
}
A variable declarator within a variable declaration.
interface VariableDeclarator extends Node {
type: 'VariableDeclarator'
id: Identifier
qualifiers: (ConstantQualifier | InterpolationQualifier | StorageQualifier | PrecisionQualifier)[]
typeSpecifier: Identifier | ArraySpecifier
layout: Record<string, string | boolean> | null
init: Expression | null
}
A uniform declaration block with optional layout and qualifiers.
interface UniformDeclarationBlock extends Node {
type: 'UniformDeclarationBlock'
id: Identifier | null
qualifiers: LayoutQualifier[]
typeSpecifier: Identifier | ArraySpecifier
layout: Record<string, string | boolean> | null
members: VariableDeclaration[]
}
A struct declaration. Can be used as a type or constructor.
interface StructDeclaration extends Node {
type: 'StructDeclaration'
id: Identifier
members: VariableDeclaration[]
}
An array initialization expression.
interface ArrayExpression extends Node {
type: 'ArrayExpression'
typeSpecifier: ArraySpecifier
elements: Expression[]
}
A unary expression with a left or right handed operator.
interface UnaryExpression extends Node {
type: 'UnaryExpression'
operator: UnaryOperator
prefix: boolean
argument: Expression
}
type UnaryOperator = '-' | '+' | '!' | '~'
An update expression with an optionally prefixed operator.
interface UpdateExpression extends Node {
type: 'UpdateExpression'
operator: UpdateOperator
argument: Expression
prefix: boolean
}
type UpdateOperator = '++' | '--'
A binary expression with a left and right operand.
interface BinaryExpression extends Node {
type: 'BinaryExpression'
operator: BinaryOperator
left: Expression
right: Expression
}
type BinaryOperator =
| '=='
| '!='
| '<'
| '<='
| '>'
| '>='
| '<<'
| '>>'
| '+'
| '-'
| '*'
| '/'
| '%'
| '|'
| '^'
| '&'
An assignment expression.
interface AssignmentExpression extends Node {
type: 'AssignmentExpression'
operator: AssignmentOperator
left: Expression
right: Expression
}
type AssignmentOperator = '=' | '+=' | '-=' | '*=' | '/=' | '%=' | '<<=' | '>>=' | '>>>=' | '|=' | '^=' | '&='
A logical operation between two expressions.
interface LogicalExpression extends Node {
type: 'LogicalExpression'
operator: LogicalOperator
left: Expression
right: Expression
}
type LogicalOperator = '||' | '&&' | '^^'
A member expression.
interface MemberExpression extends Node {
type: 'MemberExpression'
object: Expression
property: Expression
computed: boolean
}
A conditional expression or ternary.
interface ConditionalExpression extends Node {
type: 'ConditionalExpression'
test: Expression
alternate: Expression
consequent: Expression
}
A function call expression or struct initialization.
interface CallExpression extends Node {
type: 'CallExpression'
callee: Expression
arguments: Expression[]
}
FAQs
Tools and IntelliSense for GLSL and WGSL.
The npm package @codyjasonbennett/shaderkit-bundlephobia-test receives a total of 0 weekly downloads. As such, @codyjasonbennett/shaderkit-bundlephobia-test popularity was classified as not popular.
We found that @codyjasonbennett/shaderkit-bundlephobia-test demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.