patch(): node build follow up

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [next]
 
-- patch(): Node entry point follow up [#8652](https://github.com/fabricjs/fabric.js/pull/8652)
+- patch(): Added WebGLProbe to env, removed isLikelyNode, added specific env dispose ( instead of cleanup JSDOM ) [#8652](https://github.com/fabricjs/fabric.js/pull/8652)
 - ci(): Removed the browser publish script [#8656](https://github.com/fabricjs/fabric.js/pull/8656)
 - feat(): Node entry point [#8632](https://github.com/fabricjs/fabric.js/pull/8632)
 - chore(): Change import and export strategy [#8622](https://github.com/fabricjs/fabric.js/pull/8622)

fabric.ts

@@ -353,7 +353,7 @@ import { Textbox } from './src/shapes/Textbox';
 import { Group } from './src/shapes/Group';
 import { ActiveSelection } from './src/shapes/ActiveSelection';
 import { Image } from './src/shapes/Image';
-import { getEnv, getDocument, getWindow, setEnv } from './src/env';
+import { getEnv, getDocument, getWindow, setEnvForTests } from './src/env';
 import { createCollectionMixin } from './src/Collection';
 import { parseAttributes } from './src/parser/parseAttributes';
 import { parseElements } from './src/parser/parseElements';
@@ -416,7 +416,7 @@ export {
   getEnv,
   getDocument,
   getWindow,
-  setEnv,
+  setEnvForTests,
   parseStyleAttribute,
   parsePointsAttribute,
   parseFontDeclaration,

src/env/browser.ts

@@ -23,7 +23,7 @@ export const getEnv = (): TFabricEnv => {
     document,
     window,
     isTouchSupported,
-    GLProbe: new WebGLProbe(),
+    WebGLProbe: new WebGLProbe(),
     dispose() {
       // noop
     },

src/env/index.ts

@@ -9,6 +9,7 @@
 
 import { TFabricEnv } from './types';
 import { getEnv as getBrowserEnv } from './browser';
+import type { DOMWindow } from 'jsdom';
 
 let env: TFabricEnv;
 
@@ -20,4 +21,9 @@ export const getEnv = () => env || getBrowserEnv();
 
 export const getDocument = (): Document => getEnv().document;
 
-export const getWindow = (): Window => getEnv().window;
+export const getWindow = (): Window | DOMWindow => getEnv().window;
+
+export const setEnvForTests = (window: Window | DOMWindow) => {
+  env.document = window.document;
+  env.window = window;
+};

src/env/node.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-globals */
 import type { Canvas as NodeCanvas } from 'canvas';
 import { JSDOM } from 'jsdom';
+// @ts-ignore
 import utils from 'jsdom/lib/jsdom/living/generated/utils.js';
 import { config } from '../config';
 import { NodeGLProbe } from '../filters/GLProbes/NodeGLProbe';
@@ -16,9 +17,6 @@ const { window: JSDOMWindow } = new JSDOM(
     '%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'
   ),
   {
-    features: {
-      FetchExternalResources: ['img'],
-    },
     resources: 'usable',
     // needed for `requestAnimationFrame`
     pretendToBeVisual: true,
@@ -39,7 +37,7 @@ export const getEnv = (): TFabricEnv => {
     document: JSDOMWindow.document,
     window: JSDOMWindow,
     isTouchSupported: false,
-    GLProbe: new NodeGLProbe(),
+    WebGLProbe: new NodeGLProbe(),
     dispose(element) {
       const impl = jsdomImplForWrapper(element);
       if (impl) {

src/env/types.ts

@@ -1,14 +1,15 @@
 import { GLProbe } from '../filters/GLProbes/GLProbe';
+import type { DOMWindow } from 'jsdom';
 
 export type TCopyPasteData = {
   copiedText?: string;
   copiedStyle?: Record<string, string>;
 };
 export type TFabricEnv = {
   document: Document;
-  window: Window;
+  window: Window | DOMWindow;
   isTouchSupported: boolean;
-  GLProbe: GLProbe;
+  WebGLProbe: GLProbe;
   dispose(element: Element): void;
   copyPasteData: TCopyPasteData;
 };

src/filters/BaseFilter.ts

@@ -72,11 +72,11 @@ export abstract class AbstractBaseFilter<T> {
     fragmentSource: string = this.getFragmentSource(),
     vertexSource: string = this.vertexSource
   ) {
-    const { GLProbe } = getEnv();
-    if (GLProbe.GLPrecision && GLProbe.GLPrecision !== GLPrecision.high) {
+    const { WebGLProbe } = getEnv();
+    if (WebGLProbe.GLPrecision && WebGLProbe.GLPrecision !== GLPrecision.high) {
       fragmentSource = fragmentSource.replace(
         new RegExp(highPsourceCode, 'g'),
-        highPsourceCode.replace(GLPrecision.high, GLProbe.GLPrecision)
+        highPsourceCode.replace(GLPrecision.high, WebGLProbe.GLPrecision)
       );
     }
     const vertexShader = gl.createShader(gl.VERTEX_SHADER);

src/filters/FilterBackend.ts

@@ -11,9 +11,9 @@ let filterBackend: FilterBackend;
  * Verifies if it is possible to initialize webgl or fallback on a canvas2d filtering backend
  */
 export function initFilterBackend(): FilterBackend {
-  const { GLProbe } = getEnv();
-  GLProbe.queryGL();
-  if (config.enableGLFiltering && GLProbe.isSupported(config.textureSize)) {
+  const { WebGLProbe } = getEnv();
+  WebGLProbe.queryWebGL();
+  if (config.enableGLFiltering && WebGLProbe.isSupported(config.textureSize)) {
     return new WebGLFilterBackend({ tileSize: config.textureSize });
   } else {
     return new Canvas2dFilterBackend();

src/filters/GLProbes/GLProbe.ts

@@ -6,6 +6,6 @@ export enum GLPrecision {
 
 export abstract class GLProbe {
   declare GLPrecision: GLPrecision | undefined;
-  abstract queryGL(): void;
+  abstract queryWebGL(): void;
   abstract isSupported(textureSize: number): boolean;
 }

src/filters/GLProbes/NodeGLProbe.ts

@@ -6,7 +6,7 @@ import { GLProbe } from './GLProbe';
  * - https://github.com/akira-cn/node-canvas-webgl
  */
 export class NodeGLProbe extends GLProbe {
-  queryGL() {
+  queryWebGL() {
     // noop
   }
   isSupported() {

src/filters/GLProbes/WebGLProbe.ts

@@ -30,7 +30,7 @@ export class WebGLProbe extends GLProbe {
   /**
    * query browser for WebGL
    */
-  queryGL() {
+  queryWebGL() {
     const canvas = createCanvasElement();
     const gl = canvas.getContext('webgl');
     if (gl) {

src/util/dom_misc.ts

@@ -7,7 +7,7 @@ import { getDocument } from '../env';
  * @param {Object} [attributes] Attributes to set on a wrapper
  * @return {HTMLElement} wrapper
  */
-export function wrapElement(element: HTMLElement, wrapper: HTMLElement) {
+export function wrapElement(element: HTMLElement, wrapper: HTMLDivElement) {
   if (element.parentNode) {
     element.parentNode.replaceChild(wrapper, element);
   }
@@ -33,10 +33,12 @@ export function getScrollLeftTop(element: HTMLElement) {
   //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
   //  but the .parentNode of a root ShadowDOM node will always be null, instead
   //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
+  // @ts-ignore
   while (element && (element.parentNode || element.host)) {
     // Set element to element parent, or 'host' in case of ShadowDOM
+    // @ts-ignore
     element = element.parentNode || element.host;
-
+    // @ts-expect-error because element is typed as HTMLElement but it can go up to document
     if (element === getDocument()) {
       left = body.scrollLeft || docElement.scrollLeft || 0;
       top = body.scrollTop || docElement.scrollTop || 0;

test/node_test_setup.js

@@ -82,7 +82,7 @@ var virtualWindow = new jsdom.JSDOM(
     resources: new CustomResourceLoader(),
     pretendToBeVisual: true
   }).window;
-fabric.setEnv({ ...fabric.getEnv(), window: virtualWindow, document: virtualWindow.document });
+fabric.setEnvForTests(virtualWindow);
 
 
 //  QUnit Logging