Added support for WGSL (#3455)

Author: Dr4gonthree

components.js

@@ -1523,6 +1523,10 @@
 			"alias": "webidl",
 			"owner": "RunDevelopment"
 		},
+		"wgsl": {
+			"title": "WGSL",
+			"owner": "Dr4gonthree"
+		},
 		"wiki": {
 			"title": "Wiki markup",
 			"require": "markup",

components.json

@@ -0,0 +1,69 @@
+Prism.languages.wgsl = {
+	'comment': {
+		pattern: /\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,
+		greedy: true,
+	},
+	'builtin-attribute': {
+		pattern: /(@)builtin\(.*?\)/,
+		lookbehind: true,
+		inside: {
+			'attribute': {
+				pattern: /^builtin/,
+				alias: 'attr-name',
+			},
+			'punctuation': /[(),]/,
+			'built-in-values': {
+				pattern: /\b(?:frag_depth|front_facing|global_invocation_id|instance_index|local_invocation_id|local_invocation_index|num_workgroups|position|sample_index|sample_mask|vertex_index|workgroup_id)\b/,
+				alias: 'attr-value',
+			},
+		},
+	},
+	'attributes': {
+		pattern: /(@)(?:align|binding|compute|const|fragment|group|id|interpolate|invariant|location|size|vertex|workgroup_size)/i,
+		lookbehind: true,
+		alias: 'attr-name',
+	},
+	'functions': {
+		pattern: /\b(fn\s+)[_a-zA-Z]\w*(?=[(<])/,
+		lookbehind: true,
+		alias: 'function',
+	},
+	'keyword': /\b(?:bitcast|break|case|const|continue|continuing|default|discard|else|enable|fallthrough|fn|for|function|if|let|loop|private|return|storage|struct|switch|type|uniform|var|while|workgroup)\b/,
+	'builtin': /\b(?:abs|acos|acosh|all|any|array|asin|asinh|atan|atan2|atanh|atomic|atomicAdd|atomicAnd|atomicCompareExchangeWeak|atomicExchange|atomicLoad|atomicMax|atomicMin|atomicOr|atomicStore|atomicSub|atomicXor|bool|ceil|clamp|cos|cosh|countLeadingZeros|countOneBits|countTrailingZeros|cross|degrees|determinant|distance|dot|dpdx|dpdxCoarse|dpdxFine|dpdy|dpdyCoarse|dpdyFine|exp|exp2|extractBits|f32|f64|faceForward|firstLeadingBit|floor|fma|fract|frexp|fwidth|fwidthCoarse|fwidthFine|i32|i64|insertBits|inverseSqrt|ldexp|length|log|log2|mat[2-4]x[2-4]|max|min|mix|modf|normalize|override|pack2x16float|pack2x16snorm|pack2x16unorm|pack4x8snorm|pack4x8unorm|pow|ptr|quantizeToF16|radians|reflect|refract|reverseBits|round|sampler|sampler_comparison|select|shiftLeft|shiftRight|sign|sin|sinh|smoothstep|sqrt|staticAssert|step|storageBarrier|tan|tanh|textureDimensions|textureGather|textureGatherCompare|textureLoad|textureNumLayers|textureNumLevels|textureNumSamples|textureSample|textureSampleBias|textureSampleCompare|textureSampleCompareLevel|textureSampleGrad|textureSampleLevel|textureStore|texture_1d|texture_2d|texture_2d_array|texture_3d|texture_cube|texture_cube_array|texture_depth_2d|texture_depth_2d_array|texture_depth_cube|texture_depth_cube_array|texture_depth_multisampled_2d|texture_multisampled_2d|texture_storage_1d|texture_storage_2d|texture_storage_2d_array|texture_storage_3d|transpose|trunc|u32|u64|unpack2x16float|unpack2x16snorm|unpack2x16unorm|unpack4x8snorm|unpack4x8unorm|vec[2-4]|workgroupBarrier)\b/,
+	'function-calls': {
+		pattern: /\b[_a-z]\w*(?=\()/i,
+		alias: 'function',
+	},
+	'class-name': /\b(?:[A-Z][A-Za-z0-9]*)\b/,
+	'bool-literal': {
+		pattern: /\b(?:false|true)\b/,
+		alias: 'boolean',
+	},
+	'hex-int-literal': {
+		pattern: /\b0[xX][0-9a-fA-F]+[iu]?\b(?![.pP])/,
+		alias: 'number',
+	},
+	'hex-float-literal': {
+		pattern: /\b0[xX][0-9a-fA-F]*(?:\.[0-9a-fA-F]*)?(?:[pP][+-]?\d+[fh]?)?/, alias: 'number'
+	},
+	'decimal-float-literal': [
+		{ pattern: /\d*\.\d+(?:[eE](?:\+|-)?\d+)?[fh]?/, alias: 'number' },
+		{ pattern: /\d+\.\d*(?:[eE](?:\+|-)?\d+)?[fh]?/, alias: 'number' },
+		{ pattern: /\d+[eE](?:\+|-)?\d+[fh]?/, alias: 'number' },
+		{ pattern: /\b\d+[fh]\b/, alias: 'number' },
+	],
+	'int-literal': {
+		pattern: /\b\d+[iu]?\b/,
+		alias: 'number',
+	},
+	'operator': [
+		{ pattern: /(?:\^|~|\|(?!\|)|\|\||&&|<<|>>|!)(?!=)/ },
+		{ pattern: /&(?![&=])/ },
+		{ pattern: /(?:\+=|-=|\*=|\/=|%=|\^=|&=|\|=|<<=|>>=)/ },
+		{ pattern: /(^|[^<>=!])=(?![=>])/, lookbehind: true },
+		{ pattern: /(?:==|!=|<=|\+\+|--|(^|[^=])>=)/, lookbehind: true },
+		{ pattern: /(?:(?:[+%]|(?:\*(?!\w)))(?!=))|(?:-(?!>))|(?:\/(?!\/))/ },
+		{ pattern: /->/ },
+	],
+	'punctuation': /[@(){}[\],;<>:.]/,
+};

components/prism-wgsl.js

@@ -0,0 +1,60 @@
+<h2>Full example</h2>
+<pre><code>// Vertex shader
+struct CameraUniform {
+    view_proj: mat4x4&lt;f32&gt;;
+};
+[[group(1), binding(0)]]
+var&lt;uniform&gt; camera: CameraUniform;
+
+struct InstanceInput {
+    [[location(5)]] model_matrix_0: vec4&lt;f32&gt;;
+    [[location(6)]] model_matrix_1: vec4&lt;f32&gt;;
+    [[location(7)]] model_matrix_2: vec4&lt;f32&gt;;
+    [[location(8)]] model_matrix_3: vec4&lt;f32&gt;;
+};
+
+struct VertexInput {
+    [[location(0)]] position: vec3&lt;f32&gt;; 
+    [[location(1)]] tex_coords: vec2&lt;f32&gt;;
+};
+
+struct VertexOutput {
+    [[builtin(position)]] clip_position: vec4&lt;f32&gt;;
+    [[location(0)]] tex_coords: vec2&lt;f32&gt;;
+};
+
+@vertex
+[[stage(vertex)]]
+fn vs_main(
+    model: VertexInput,
+    instance: InstanceInput,
+) -&gt; VertexOutput {
+    let model_matrix = mat4x4&lt;f32&gt;(
+        instance.model_matrix_0,
+        instance.model_matrix_1,
+        instance.model_matrix_2,
+        instance.model_matrix_3,
+    );
+
+    bool mybool1 = true;
+    bool mybool2 = false;
+
+    var out: VertexOutput;
+    out.tex_coords = model.tex_coords;
+    out.clip_position = camera.view_proj * model_matrix * vec4&lt;f32&gt;(model.position, 1.0);
+    return out;
+}
+
+// Fragment shader
+
+[[group(0), binding(0)]]
+var t_diffuse: texture_2d&lt;f32&gt;;
+[[group(0), binding(1)]]
+var s_diffuse: sampler;
+
+@fragment
+[[stage(fragment)]]
+fn fs_main(in: VertexOutput) -&gt; [[location(0)]] vec4&lt;f32&gt; {
+    return textureSample(t_diffuse, s_diffuse, in.tex_coords);
+}
+</code></pre>

components/prism-wgsl.min.js

@@ -267,6 +267,7 @@
 		"wasm": "WebAssembly",
 		"web-idl": "Web IDL",
 		"webidl": "Web IDL",
+		"wgsl": "WGSL",
 		"wiki": "Wiki markup",
 		"wolfram": "Wolfram language",
 		"nb": "Mathematica Notebook",