fix: Add tests, linting, improve output by providing typescript definitions (#2)

* Add integration tests

* update screenshot tests and github actions

* fix inconsitent screenshots names

* update screenshot

* Add flag to enable WebGPU on linux

* fix issue with zero workers

* MORE FLAGS

* Try to run webkit instead of chromium

* test with gpu checker

* fix webkit test run flags

* another shot

* fix command

* try to emulate gpu with CPU

* create env file

* remove unused screenshots, didsable playwright github action, rename itnegration tests command in package.json

* add eslint

* Small linting refactor

* add typescritp definitions to the output, improve linting

Author: mateuszJS

eslint.config.mjs

@@ -10,6 +10,7 @@ export default tseslint.config(
   {
     rules: {
       "no-multiple-empty-lines": "error",
+      "semi": ["error", "never"],
     },
     plugins: {
       "@stylistic/js": stylisticJs,

global.d.ts

@@ -12,14 +12,3 @@ declare module "*.png" {
   const content: string;
   export default content;
 }
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-type Line = [Point, Point];
-
-interface HTMLInputEvent extends Event {
-  target: HTMLInputElement & EventTarget;
-}

integration-tests/index.ts

@@ -7,14 +7,14 @@ async function test() {
 
   const fileInput = document.querySelector<HTMLInputElement>('input')!
   fileInput.addEventListener('change', (event) => {
-    const { files } = (event.target as HTMLInputElement);
-    if (!files) return;
+    const { files } = (event.target as HTMLInputElement)
+    if (!files) return
 
     const img = new Image()
-    img.src = URL.createObjectURL(files[0]);
+    img.src = URL.createObjectURL(files[0])
     img.onload = () => {
       creator.addImage(img)
-    };
+    }
   })
 
   let offset = 100

integration-tests/tests/creator.spec.ts

@@ -1,13 +1,15 @@
-import { test, expect } from '@playwright/test';
-import path from 'path';
+
+import { test, expect } from '@playwright/test'
+import path from 'path'
 
 test('visible image after upload', async ({ page }, testinfo) => {
   if (process.env.CI) {
-    test.skip();
-    return;
+    test.skip()
+    return
   }
 
-  testinfo.snapshotSuffix = ''; // by default is `process.platform`
+  testinfo.snapshotSuffix = '' // by default is `process.platform`
+
   // and it produces different screenshot name base on operating system
   // while we want to make app consistent on all operating systems
 
@@ -17,19 +19,20 @@ test('visible image after upload', async ({ page }, testinfo) => {
 
   await page.goto('http://127.0.0.1:3000')
 
-  const fileInput = page.locator('input[type="file"]');
-  const testImagePath = path.join(__dirname, '../image-sample.png');
-  await fileInput.setInputFiles(testImagePath);
+  const fileInput = page.locator('input[type="file"]')
+  const testImagePath = path.join(__dirname, '../image-sample.png')
+  await fileInput.setInputFiles(testImagePath)
+
+  const canvas = page.locator('canvas')
 
-  const canvas = page.locator('canvas');
   await expect(canvas).toBeVisible()
 
   await expect(canvas).toHaveScreenshot(['after-upload.png'])
 
   const moveImgBtn = page.locator('#img-position')
   await moveImgBtn.click()
   await expect(canvas).toHaveScreenshot('after-move.png')
-});
+})
 
 
 /*

package.json

@@ -10,6 +10,7 @@
     "access": "public",
     "provenance": true
   },
+  "typings": "./lib/main.d.ts",
   "release": {
     "branches": [
       "main",
@@ -21,7 +22,7 @@
   },
   "scripts": {
     "start": "export NODE_ENV=development && webpack serve --open",
-    "build": "export $(grep -v '^#' .env | xargs) && export NODE_ENV=production && webpack",
+    "build": "export $(grep -v '^#' .env | xargs) && export NODE_ENV=production && webpack && tsc --project tsconfig.build.json --emitDeclarationOnly ",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "test-e2e": "npx playwright test",
     "format": "eslint --fix \"src/**/*.{ts,js}\" \"integration-tests/**/*.{ts,js}\""
@@ -52,7 +53,9 @@
   "dependencies": {
     "@wasm-tool/wasm-pack-plugin": "^1.7.0"
   },
-  "main": "webpack.config.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/mateuszJS/magic-render.git"
@@ -63,6 +66,6 @@
   },
   "homepage": "https://github.com/mateuszJS/magic-render#readme",
   "files": [
-    "dist"
+    "dist/**/*"
   ]
 }

src/WebGPU/canvasSizeObserver.ts

@@ -2,11 +2,11 @@ function updateCanvasSize(canvas: HTMLCanvasElement, width: number, height: numb
   canvas.width = Math.max(
     1,
     Math.min(width, device.limits.maxTextureDimension2D)
-  );
+  )
   canvas.height = Math.max(
     1,
     Math.min(height, device.limits.maxTextureDimension2D)
-  );
+  )
 }
 
 export default function canvasSizeObserver(
@@ -17,14 +17,14 @@ export default function canvasSizeObserver(
   // TODO: should we also handle window.devicePixelRatio; ?
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
-      const canvas = entry.target as HTMLCanvasElement;
-      const width = entry.contentBoxSize[0].inlineSize | 0;
-      const height = entry.contentBoxSize[0].blockSize | 0;
+      const canvas = entry.target as HTMLCanvasElement
+      const width = entry.contentBoxSize[0].inlineSize | 0
+      const height = entry.contentBoxSize[0].blockSize | 0
       updateCanvasSize(canvas, width, height, device)
       callback()
     }
-  });
-  observer.observe(canvas);
+  })
+  observer.observe(canvas)
 
   // observer calls it anyway but it just happens late enough that user see a flicker
   updateCanvasSize(canvas, canvas.clientWidth, canvas.clientHeight, device)

src/WebGPU/getDevice.ts

@@ -1,24 +1,24 @@
 export default async function getDevice() {
   if (!navigator.gpu) {
-    throw Error("this browser does not support WebGPU");
+    throw Error("this browser does not support WebGPU")
   }
 
-  const adapter = await navigator.gpu.requestAdapter();
+  const adapter = await navigator.gpu.requestAdapter()
 
 
   if (!adapter) {
-    throw Error("this browser supports webgpu but it appears disabled");
+    throw Error("this browser supports webgpu but it appears disabled")
   }
 
-  const device = await adapter.requestDevice();
+  const device = await adapter.requestDevice()
   device.lost.then((info) => {
-    console.error(`WebGPU device was lost: ${info.message}`);
+    console.error(`WebGPU device was lost: ${info.message}`)
 
     if (info.reason !== "destroyed") {
       // reprot issue to the tracking system
       // getDevice(callback);
     }
-  });
+  })
 
   return device
 }

src/WebGPU/getTexture/createCheckedImageData.ts

@@ -13,19 +13,19 @@ const FAKE_MIPMAPS_COLORS = [
   '#FFBC00',
 ]
 
-const ctx = document.createElement('canvas').getContext('2d', {willReadFrequently: true})!;
+const ctx = document.createElement('canvas').getContext('2d', {willReadFrequently: true})!
 
 export default function createCheckedImageData(size: number, index: number): ImageData {
-  ctx.canvas.width = size;
-  ctx.canvas.height = size;
-  ctx.fillStyle = index & 1 ? '#000' : '#fff';
-  ctx.fillRect(0, 0, size, size);
-  ctx.fillStyle = FAKE_MIPMAPS_COLORS[index % FAKE_MIPMAPS_COLORS.length];
-  ctx.fillRect(0, 0, size / 2, size / 2);
-  ctx.fillRect(size / 2, size / 2, size / 2, size / 2);
+  ctx.canvas.width = size
+  ctx.canvas.height = size
+  ctx.fillStyle = index & 1 ? '#000' : '#fff'
+  ctx.fillRect(0, 0, size, size)
+  ctx.fillStyle = FAKE_MIPMAPS_COLORS[index % FAKE_MIPMAPS_COLORS.length]
+  ctx.fillRect(0, 0, size / 2, size / 2)
+  ctx.fillRect(size / 2, size / 2, size / 2, size / 2)
 
-  ctx.fillStyle = index & 1 ? '#FFFFFF' : '#000000';
-  ctx.font = `${size * 0.3}px serif`;
+  ctx.fillStyle = index & 1 ? '#FFFFFF' : '#000000'
+  ctx.font = `${size * 0.3}px serif`
   ctx.textAlign = 'center'
   ctx.textBaseline = 'middle'
   ;[
@@ -34,9 +34,9 @@ export default function createCheckedImageData(size: number, index: number): Ima
     { x: 0.75, y: 0.75 },
     { x: 0.75, y: 0.25 },
   ].forEach(p => {
-    ctx.fillText(index.toString(), p.x * size, p.y * size);
+    ctx.fillText(index.toString(), p.x * size, p.y * size)
   })
 
 
-  return ctx.getImageData(0, 0, size, size);
-};
+  return ctx.getImageData(0, 0, size, size)
+}

src/WebGPU/getTexture/generateMimapsArray.ts

@@ -51,12 +51,12 @@ export default function generateMips(
           return textureSample(ourTexture, ourSampler, fsInput.texcoord, 0);
         }
       `,
-    });
+    })
 
     sampler = device.createSampler({
       minFilter: 'linear',
       magFilter: 'linear',
-    });
+    })
   }
 
   if (!pipelineByFormat[texture.format]) {
@@ -72,30 +72,30 @@ export default function generateMips(
         entryPoint: 'fs',
         targets: [{ format: texture.format }],
       },
-    });
+    })
   }
-  const pipeline = pipelineByFormat[texture.format]!;
+  const pipeline = pipelineByFormat[texture.format]!
 
   const encoder = device.createCommandEncoder({
     label: 'mip gen encoder',
-  });
+  })
 
-  let width = texture.width;
-  let height = texture.height;
-  let baseMipLevel = 0;
+  let width = texture.width
+  let height = texture.height
+  let baseMipLevel = 0
   while (width > 1 || height > 1) {
-    width = Math.max(1, width / 2 | 0);
-    height = Math.max(1, height / 2 | 0);
+    width = Math.max(1, width / 2 | 0)
+    height = Math.max(1, height / 2 | 0)
 
     const bindGroup = device.createBindGroup({
       layout: pipeline.getBindGroupLayout(0),
       entries: [
         { binding: 0, resource: sampler },
         { binding: 1, resource: texture.createView({baseMipLevel, mipLevelCount: 1, ...textureOptions}) },
       ],
-    });
+    })
 
-    ++baseMipLevel;
+    ++baseMipLevel
 
     // jsut testign if mipmaps are correctly using previous mimap to render next one
     // if (baseMipLevel === 3) {
@@ -118,15 +118,15 @@ export default function generateMips(
           storeOp: 'store',
         },
       ],
-    } as const;
+    } as const
 
-    const pass = encoder.beginRenderPass(renderPassDescriptor);
-    pass.setPipeline(pipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.draw(6);  // call our vertex shader 6 times
-    pass.end();
+    const pass = encoder.beginRenderPass(renderPassDescriptor)
+    pass.setPipeline(pipeline)
+    pass.setBindGroup(0, bindGroup)
+    pass.draw(6)  // call our vertex shader 6 times
+    pass.end()
   }
 
-  const commandBuffer = encoder.finish();
-  device.queue.submit([commandBuffer]);
-};
+  const commandBuffer = encoder.finish()
+  device.queue.submit([commandBuffer])
+}