Skip to content

Commit 4b78f56

Browse files
fiskerfisker
authored
Add paintWorklet environment (#323)
1 parent 59ceff8 commit 4b78f56

4 files changed

Lines changed: 220 additions & 1 deletion

File tree

‎data/paintWorklet.mjs‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import {sortObject} from '../utilities.mjs';
2+
import esBuiltinGlobals from './builtin.mjs';
3+
4+
/*
5+
Steps to update `paintWorklet` globals:
6+
7+
1. Start `node scripts/browser/start.mjs`
8+
1. Navigate to `http://127.0.0.1:3000` in browser
9+
1. Click `Get 'paintWorklet' globals` button
10+
1. Copy properties from console and paste to `globalProperties`
11+
1. Run `npm run build`
12+
*/
13+
14+
const globalProperties = [
15+
'Object',
16+
'Function',
17+
'Array',
18+
'Number',
19+
'parseFloat',
20+
'parseInt',
21+
'Infinity',
22+
'NaN',
23+
'undefined',
24+
'Boolean',
25+
'String',
26+
'Symbol',
27+
'Date',
28+
'Promise',
29+
'RegExp',
30+
'Error',
31+
'AggregateError',
32+
'EvalError',
33+
'RangeError',
34+
'ReferenceError',
35+
'SyntaxError',
36+
'TypeError',
37+
'URIError',
38+
'globalThis',
39+
'JSON',
40+
'Math',
41+
'Intl',
42+
'ArrayBuffer',
43+
'Atomics',
44+
'Uint8Array',
45+
'Int8Array',
46+
'Uint16Array',
47+
'Int16Array',
48+
'Uint32Array',
49+
'Int32Array',
50+
'BigUint64Array',
51+
'BigInt64Array',
52+
'Uint8ClampedArray',
53+
'Float32Array',
54+
'Float64Array',
55+
'DataView',
56+
'Map',
57+
'BigInt',
58+
'Set',
59+
'Iterator',
60+
'WeakMap',
61+
'WeakSet',
62+
'Proxy',
63+
'Reflect',
64+
'FinalizationRegistry',
65+
'WeakRef',
66+
'decodeURI',
67+
'decodeURIComponent',
68+
'encodeURI',
69+
'encodeURIComponent',
70+
'escape',
71+
'unescape',
72+
'eval',
73+
'isFinite',
74+
'isNaN',
75+
'console',
76+
'QuotaExceededError',
77+
'WritableStreamDefaultWriter',
78+
'WritableStreamDefaultController',
79+
'WritableStream',
80+
'WorkletGlobalScope',
81+
'TransformStreamDefaultController',
82+
'TransformStream',
83+
'StylePropertyMapReadOnly',
84+
'ReadableStreamDefaultReader',
85+
'ReadableStreamDefaultController',
86+
'ReadableStreamBYOBRequest',
87+
'ReadableStreamBYOBReader',
88+
'ReadableStream',
89+
'ReadableByteStreamController',
90+
'Path2D',
91+
'PaintWorkletGlobalScope',
92+
'PaintSize',
93+
'PaintRenderingContext2D',
94+
'CountQueuingStrategy',
95+
'CSSVariableReferenceValue',
96+
'CSSUnparsedValue',
97+
'CSSUnitValue',
98+
'CSSTranslate',
99+
'CSSTransformValue',
100+
'CSSTransformComponent',
101+
'CSSStyleValue',
102+
'CSSSkewY',
103+
'CSSSkewX',
104+
'CSSSkew',
105+
'CSSScale',
106+
'CSSRotate',
107+
'CSSPositionValue',
108+
'CSSPerspective',
109+
'CSSNumericValue',
110+
'CSSNumericArray',
111+
'CSSMatrixComponent',
112+
'CSSMathValue',
113+
'CSSMathSum',
114+
'CSSMathProduct',
115+
'CSSMathNegate',
116+
'CSSMathMin',
117+
'CSSMathMax',
118+
'CSSMathInvert',
119+
'CSSMathClamp',
120+
'CSSKeywordValue',
121+
'CSSImageValue',
122+
'ByteLengthQueuingStrategy',
123+
'devicePixelRatio',
124+
'registerPaint',
125+
'Temporal',
126+
'SuppressedError',
127+
'DisposableStack',
128+
'AsyncDisposableStack',
129+
'Float16Array',
130+
'WebAssembly',
131+
];
132+
133+
export default sortObject(Object.fromEntries(
134+
globalProperties
135+
.filter(name => !Object.hasOwn(esBuiltinGlobals, name))
136+
.map(name => [name, false]),
137+
));

‎globals.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2487,6 +2487,63 @@
24872487
"WritableStreamDefaultController": false,
24882488
"WritableStreamDefaultWriter": false
24892489
},
2490+
"paintWorklet": {
2491+
"AsyncDisposableStack": false,
2492+
"ByteLengthQueuingStrategy": false,
2493+
"console": false,
2494+
"CountQueuingStrategy": false,
2495+
"CSSImageValue": false,
2496+
"CSSKeywordValue": false,
2497+
"CSSMathClamp": false,
2498+
"CSSMathInvert": false,
2499+
"CSSMathMax": false,
2500+
"CSSMathMin": false,
2501+
"CSSMathNegate": false,
2502+
"CSSMathProduct": false,
2503+
"CSSMathSum": false,
2504+
"CSSMathValue": false,
2505+
"CSSMatrixComponent": false,
2506+
"CSSNumericArray": false,
2507+
"CSSNumericValue": false,
2508+
"CSSPerspective": false,
2509+
"CSSPositionValue": false,
2510+
"CSSRotate": false,
2511+
"CSSScale": false,
2512+
"CSSSkew": false,
2513+
"CSSSkewX": false,
2514+
"CSSSkewY": false,
2515+
"CSSStyleValue": false,
2516+
"CSSTransformComponent": false,
2517+
"CSSTransformValue": false,
2518+
"CSSTranslate": false,
2519+
"CSSUnitValue": false,
2520+
"CSSUnparsedValue": false,
2521+
"CSSVariableReferenceValue": false,
2522+
"devicePixelRatio": false,
2523+
"DisposableStack": false,
2524+
"PaintRenderingContext2D": false,
2525+
"PaintSize": false,
2526+
"PaintWorkletGlobalScope": false,
2527+
"Path2D": false,
2528+
"QuotaExceededError": false,
2529+
"ReadableByteStreamController": false,
2530+
"ReadableStream": false,
2531+
"ReadableStreamBYOBReader": false,
2532+
"ReadableStreamBYOBRequest": false,
2533+
"ReadableStreamDefaultController": false,
2534+
"ReadableStreamDefaultReader": false,
2535+
"registerPaint": false,
2536+
"StylePropertyMapReadOnly": false,
2537+
"SuppressedError": false,
2538+
"Temporal": false,
2539+
"TransformStream": false,
2540+
"TransformStreamDefaultController": false,
2541+
"WebAssembly": false,
2542+
"WorkletGlobalScope": false,
2543+
"WritableStream": false,
2544+
"WritableStreamDefaultController": false,
2545+
"WritableStreamDefaultWriter": false
2546+
},
24902547
"phantomjs": {
24912548
"console": true,
24922549
"exports": true,

‎scripts/browser/assets/main.mjs‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const environments = [
66
{environment: 'serviceworker', getGlobals: getServiceWorkerGlobals},
77
{environment: 'sharedWorker', getGlobals: getSharedWorkerGlobals},
88
{environment: 'audioWorklet', getGlobals: getAudioWorkletGlobals},
9+
{environment: 'paintWorklet', getGlobals: getPaintWorkletGlobals},
910
];
1011

1112
function getGlobalThisProperties({expectSecureContext = true} = {}) {
@@ -144,6 +145,26 @@ function initAudioWorklet() {
144145
});
145146
}
146147

148+
const PAINT_WORKLET_PAINT_NAME = `${EXECUTE_COMMAND_SIGNAL}-paint`;
149+
function getPaintWorkletGlobals() {
150+
CSS.paintWorklet.addModule('./assets/paint-worklet.mjs');
151+
Object.assign(document.body.style, {
152+
backgroundImage: `paint(${PAINT_WORKLET_PAINT_NAME})`,
153+
});
154+
// eslint-disable-next-line no-alert
155+
alert('Open console to see the collected globals.');
156+
}
157+
158+
function initPaintWorklet() {
159+
globalThis.registerPaint(PAINT_WORKLET_PAINT_NAME, class PaintWorkletGetGlobalsPaint {
160+
paint(/* context, geom, properties */) {
161+
console.log({
162+
paintWorkletGlobals: getGlobalThisProperties({expectSecureContext: false}),
163+
});
164+
}
165+
});
166+
}
167+
147168
function initPage() {
148169
// Exposed for Node.js to call
149170
Object.defineProperty(globalThis, '__getGlobals', {
@@ -190,6 +211,7 @@ export {
190211
initPage,
191212
initWebWorker,
192213
initServiceWorker,
193-
initAudioWorklet,
194214
initSharedWorker,
215+
initAudioWorklet,
216+
initPaintWorklet,
195217
};

‎scripts/browser/assets/paint-worklet.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {initPaintWorklet} from './main.mjs';
2+
3+
initPaintWorklet();

0 commit comments

Comments
 (0)