From ce11df96866a384ce9fd8a7946c54167d9974260 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:28:06 +0100 Subject: [PATCH 1/6] php-wasm: delcare CustomEvent for Node and make it isomorphic --- .../progress/src/lib/progress-tracker.ts | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/php-wasm/progress/src/lib/progress-tracker.ts b/packages/php-wasm/progress/src/lib/progress-tracker.ts index 52dece074d..9342acf44d 100644 --- a/packages/php-wasm/progress/src/lib/progress-tracker.ts +++ b/packages/php-wasm/progress/src/lib/progress-tracker.ts @@ -1,3 +1,18 @@ +class CustomEventNode extends Event { + detail: T; + + constructor(type: string, customEventInit?: CustomEventInit) { + super(type, customEventInit); + this.detail = customEventInit?.detail + ? customEventInit.detail + : ({} as T); + } +} + +const CustomEventIsomorphic = + typeof CustomEvent === 'function' ? CustomEvent : CustomEventNode; +type CustomEventIsomorphic = CustomEvent | CustomEventNode; + /** * Options for customizing the progress tracker. */ @@ -13,7 +28,7 @@ export interface ProgressTrackerOptions { /** * Custom event providing information about a loading process. */ -export type LoadingEvent = CustomEvent<{ +export type LoadingEvent = CustomEventIsomorphic<{ /** The number representing how much was loaded. */ loaded: number; /** The number representing how much needs to loaded in total. */ @@ -23,12 +38,12 @@ export type LoadingEvent = CustomEvent<{ /** * Custom event providing progress details. */ -export type ProgressTrackerEvent = CustomEvent; +export type ProgressTrackerEvent = CustomEventIsomorphic; /** * Custom event providing progress details when the task is done. */ -export type DoneEvent = CustomEvent; +export type DoneEvent = CustomEventIsomorphic; export interface ProgressDetails { /** The progress percentage as a number between 0 and 100. */ @@ -329,7 +344,7 @@ export class ProgressTracker extends EventTarget { // eslint-disable-next-line @typescript-eslint/no-this-alias const self = this; this.dispatchEvent( - new CustomEvent('progress', { + new CustomEventIsomorphic('progress', { detail: { get progress() { return self.progress; @@ -343,6 +358,6 @@ export class ProgressTracker extends EventTarget { } private notifyDone() { - this.dispatchEvent(new CustomEvent('done')); + this.dispatchEvent(new CustomEventIsomorphic('done')); } } From 171c5e009ffebb5d281cb744bdbfa4f65474efd4 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:28:36 +0100 Subject: [PATCH 2/6] blueprints: declare File for Node environment --- .../playground/blueprints/src/lib/steps/common.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/playground/blueprints/src/lib/steps/common.ts b/packages/playground/blueprints/src/lib/steps/common.ts index 0dae687f47..fbdf590b08 100644 --- a/packages/playground/blueprints/src/lib/steps/common.ts +++ b/packages/playground/blueprints/src/lib/steps/common.ts @@ -24,6 +24,18 @@ export async function updateFile( export async function fileToUint8Array(file: File) { return new Uint8Array(await file.arrayBuffer()); } +/** + * File class in NodeJS + * @see https://developer.mozilla.org/en-US/docs/Web/API/File + */ +class FileWithArrayBufferNode { + // NodeJS has no File class +} + +if (typeof File === 'undefined') { + // @ts-expect-error + globalThis.File = FileWithArrayBufferNode; +} /** * Polyfill the File class in JSDOM which lacks arrayBuffer() method @@ -49,6 +61,6 @@ class FilePolyfill extends File { } const FileWithArrayBuffer = - File.prototype.arrayBuffer instanceof Function ? File : FilePolyfill; + File?.prototype.arrayBuffer instanceof Function ? File : FilePolyfill; export { FileWithArrayBuffer as File }; From 9978614eaadabe816578b877194149893aa9c452 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:31:49 +0100 Subject: [PATCH 3/6] php-wasm: update the way to declare CustomEvent --- .../progress/src/lib/progress-tracker.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/php-wasm/progress/src/lib/progress-tracker.ts b/packages/php-wasm/progress/src/lib/progress-tracker.ts index 9342acf44d..154ec17a78 100644 --- a/packages/php-wasm/progress/src/lib/progress-tracker.ts +++ b/packages/php-wasm/progress/src/lib/progress-tracker.ts @@ -9,9 +9,10 @@ class CustomEventNode extends Event { } } -const CustomEventIsomorphic = - typeof CustomEvent === 'function' ? CustomEvent : CustomEventNode; -type CustomEventIsomorphic = CustomEvent | CustomEventNode; +if (typeof CustomEvent === 'undefined') { + // @ts-expect-error + globalThis.CustomEvent = CustomEventNode; +} /** * Options for customizing the progress tracker. @@ -28,7 +29,7 @@ export interface ProgressTrackerOptions { /** * Custom event providing information about a loading process. */ -export type LoadingEvent = CustomEventIsomorphic<{ +export type LoadingEvent = CustomEvent<{ /** The number representing how much was loaded. */ loaded: number; /** The number representing how much needs to loaded in total. */ @@ -38,12 +39,12 @@ export type LoadingEvent = CustomEventIsomorphic<{ /** * Custom event providing progress details. */ -export type ProgressTrackerEvent = CustomEventIsomorphic; +export type ProgressTrackerEvent = CustomEvent; /** * Custom event providing progress details when the task is done. */ -export type DoneEvent = CustomEventIsomorphic; +export type DoneEvent = CustomEvent; export interface ProgressDetails { /** The progress percentage as a number between 0 and 100. */ @@ -344,7 +345,7 @@ export class ProgressTracker extends EventTarget { // eslint-disable-next-line @typescript-eslint/no-this-alias const self = this; this.dispatchEvent( - new CustomEventIsomorphic('progress', { + new CustomEvent('progress', { detail: { get progress() { return self.progress; @@ -358,6 +359,6 @@ export class ProgressTracker extends EventTarget { } private notifyDone() { - this.dispatchEvent(new CustomEventIsomorphic('done')); + this.dispatchEvent(new CustomEvent('done')); } } From 26795af15f6627948b63401b1cb0e45991949354 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:34:00 +0100 Subject: [PATCH 4/6] update doc descriptions --- packages/php-wasm/progress/src/lib/progress-tracker.ts | 4 ++++ packages/playground/blueprints/src/lib/steps/common.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/php-wasm/progress/src/lib/progress-tracker.ts b/packages/php-wasm/progress/src/lib/progress-tracker.ts index 154ec17a78..0e9fb30f35 100644 --- a/packages/php-wasm/progress/src/lib/progress-tracker.ts +++ b/packages/php-wasm/progress/src/lib/progress-tracker.ts @@ -1,3 +1,7 @@ +/** + * CustomEvent class for NodeJS + * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent + */ class CustomEventNode extends Event { detail: T; diff --git a/packages/playground/blueprints/src/lib/steps/common.ts b/packages/playground/blueprints/src/lib/steps/common.ts index fbdf590b08..3a983517ff 100644 --- a/packages/playground/blueprints/src/lib/steps/common.ts +++ b/packages/playground/blueprints/src/lib/steps/common.ts @@ -25,7 +25,7 @@ export async function fileToUint8Array(file: File) { return new Uint8Array(await file.arrayBuffer()); } /** - * File class in NodeJS + * File class for NodeJS * @see https://developer.mozilla.org/en-US/docs/Web/API/File */ class FileWithArrayBufferNode { From e95c57890257a908bd5571e82339bde63960d5c7 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:47:20 +0100 Subject: [PATCH 5/6] blueprints: undo File questionmark --- packages/playground/blueprints/src/lib/steps/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/blueprints/src/lib/steps/common.ts b/packages/playground/blueprints/src/lib/steps/common.ts index 3a983517ff..2efdf98393 100644 --- a/packages/playground/blueprints/src/lib/steps/common.ts +++ b/packages/playground/blueprints/src/lib/steps/common.ts @@ -61,6 +61,6 @@ class FilePolyfill extends File { } const FileWithArrayBuffer = - File?.prototype.arrayBuffer instanceof Function ? File : FilePolyfill; + File.prototype.arrayBuffer instanceof Function ? File : FilePolyfill; export { FileWithArrayBuffer as File }; From d14b9500a808f39920a0497d68347eb11f9238e1 Mon Sep 17 00:00:00 2001 From: sejas Date: Wed, 21 Jun 2023 19:48:28 +0100 Subject: [PATCH 6/6] blueprints: rename File polyfill to FileNode --- packages/playground/blueprints/src/lib/steps/common.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/playground/blueprints/src/lib/steps/common.ts b/packages/playground/blueprints/src/lib/steps/common.ts index 2efdf98393..20bb29147a 100644 --- a/packages/playground/blueprints/src/lib/steps/common.ts +++ b/packages/playground/blueprints/src/lib/steps/common.ts @@ -28,13 +28,13 @@ export async function fileToUint8Array(file: File) { * File class for NodeJS * @see https://developer.mozilla.org/en-US/docs/Web/API/File */ -class FileWithArrayBufferNode { +class FileNode { // NodeJS has no File class } if (typeof File === 'undefined') { // @ts-expect-error - globalThis.File = FileWithArrayBufferNode; + globalThis.File = FileNode; } /**