Feature/use proxy

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: Build and release
+name: test and build
 on:
   push:
     branches: [main]
@@ -23,19 +23,21 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
       - uses: actions/cache@v3
         with:
           path: ~/.npm
           key: v1-npm-deps-${{ hashFiles('**/package-lock.json') }}
           restore-keys: v1-npm-deps-
-      - run: npm ci
+      - run: npx --package @rollup/rollup-linux-x64-gnu --package playwright playwright install --with-deps webkit
+      - run: npm install
       - run: npm run lint
       - run: npm run test:ci
       - uses: mikepenz/action-junit-report@v4
         if: success() || failure()
         with:
           check_name: "report"
+          include_passed: true
           report_paths: "**/reports/junit.xml"
 
   build:
@@ -45,7 +47,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
       - uses: actions/cache@v3
         with:
           path: ~/.npm
@@ -95,7 +97,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
           registry-url: https://registry.npmjs.org/
       - uses: actions/download-artifact@v3
         with:

.nvmrc

@@ -1 +1 @@
-18.13.0
+20.16.0

.prettierrc

@@ -1,9 +1,7 @@
 {
   "singleQuote": true,
-  "jsxSingleQuote": false,
   "trailingComma": "all",
   "endOfLine": "auto",
   "arrowParens": "avoid",
-  "tabWidth": 2,
-  "printWidth": 100
+  "tabWidth": 2
 }

README.md

@@ -1,17 +1,14 @@
 # context-filter-polyfill
 
 [![Build Status](https://github.com/davidenke/context-filter-polyfill/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/davidenke/context-filter-polyfill)
+[![NPM Version][npm-version-image]][npm-url]
+[![NPM Install Size][npm-install-size-image]][npm-install-size-url]
 
-https://davidenke.github.io/context-filter-polyfill/
+Examples: https://davidenke.github.io/context-filter-polyfill/
 
 Polyfills [`CanvasRenderingContext2d.filter`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) capability of adopting CSS3 filters to canvas contexts at least partially.
 
-Successfully tested on
-
-- macOS Safari
-- iOS Safari
-- Windows 10 IE11
-- Windows 10 Edge 16-18
+Right now ~~only WebKit [misses an implementation (Bugzilla #198416)](https://bugs.webkit.org/show_bug.cgi?id=198416)~~ all engines support it natively, despite Safari not having shipped it yet in the stable release channel.
 
 ## Installation
 
@@ -35,6 +32,15 @@ npm install context-filter-polyfill
 import 'context-filter-polyfill';
 ```
 
+## Changes in 0.4
+
+Since version 0.4.0 the method of how the polyfill is applied has been reworked.
+It now polyfills the filter on each drawing function call instead of applying it once on the context in the end.
+
+This results in more accurate behavior compared to the native implementation.
+
+The [polyfilled and native results](https://davidenke.github.io/context-filter-polyfill/) can be compared with a non-WebKit browser like Firefox or Chrome.
+
 ## Supported filters
 
 - [`url`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#url()>) ✗
@@ -52,26 +58,13 @@ import 'context-filter-polyfill';
 
 ## See it in action
 
-Just open the [integration demo](https://davidenke.github.io/context-filter-polyfill/) on Safari / iOS or IE11.
-
-## Strategy
-
-The polyfill is applied by the following steps:
-
-1. monkey patching all properties of the `CanvasRenderingContext2d`
-1. monkey patching all getters and setters of the `CanvasRenderingContext2d`
-1. monkey patching all methods of the `CanvasRenderingContext2d`
+Just open the [integration demo](https://davidenke.github.io/context-filter-polyfill/) on Safari / iOS.
 
-These patches are proxying all changes to a **offscreen canvas** which applies the appropriate filter polyfills everytime a _drawing
-function_ is called:
+## License
 
-- `clearRect`
-- `drawImage`
-- `fill`
-- `fillRect`
-- `fillText`
-- `stroke`
-- `strokeRect`
-- `strokeText`
+[MIT](LICENSE)
 
-The contents of the **offscreen canvas** are applied back to the original canvas and is then resetted.
+[npm-install-size-image]: https://badgen.net/packagephobia/install/context-filter-polyfill
+[npm-install-size-url]: https://packagephobia.com/result?p=context-filter-polyfill
+[npm-url]: https://npmjs.org/package/context-filter-polyfill
+[npm-version-image]: https://badgen.net/npm/v/context-filter-polyfill

esbuild.config.ts

@@ -1,6 +1,7 @@
 import { parseArgs } from 'node:util';
-import { type BuildOptions, build, context } from 'esbuild';
-import { dtsPlugin } from 'esbuild-plugin-d.ts';
+
+import { build, type BuildOptions, context } from 'esbuild';
+import copyStaticFiles from 'esbuild-copy-static-files';
 
 const { values } = parseArgs({
   options: {
@@ -11,26 +12,31 @@ const { values } = parseArgs({
 const { port, serve } = values;
 
 const options: BuildOptions = {
-  entryPoints: ['src/index.ts', 'src/index.html', 'src/mocks/mock-1.jpg', 'src/mocks/mock-2.png'],
+  entryPoints: [
+    'src/index.ts',
+    'src/polyfill.ts',
+
+    'src/example.ts',
+    'src/example.css',
+    'src/example.jpg',
+  ],
   outdir: 'dist',
   format: 'esm',
   bundle: true,
   sourcemap: true,
   minify: true,
   splitting: false,
   target: ['es6'],
-  loader: { '.html': 'copy', '.jpg': 'copy', '.png': 'copy' },
-  plugins: [dtsPlugin()],
+  loader: { '.jpg': 'copy' },
+  plugins: [
+    copyStaticFiles({ src: 'src/module.d.ts', dest: 'dist/index.d.ts' }),
+    copyStaticFiles({ src: 'src/example.html', dest: 'dist/index.html' }),
+  ],
 };
 
 try {
   if (serve) {
-    const ctx = await context({
-      ...options,
-      banner: {
-        js: `new EventSource('/esbuild').addEventListener('change', () => location.reload())`,
-      },
-    });
+    const ctx = await context(options);
     await ctx.watch();
     await ctx.serve({ servedir: 'dist', port: Number(port) });
     console.log(`> Serving on http://localhost:${port}`);

eslint.config.js

@@ -0,0 +1,37 @@
+// @ts-check
+
+import eslintJs from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import eslintSimpleImportSort from 'eslint-plugin-simple-import-sort';
+import eslintPluginUnusedImports from 'eslint-plugin-unused-imports';
+import eslintTs from 'typescript-eslint';
+
+export default eslintTs.config(
+  eslintJs.configs.recommended,
+  ...eslintTs.configs.recommended,
+  eslintPluginPrettierRecommended,
+  {
+    ignores: [
+      '**/node_modules/',
+      '**/generated/',
+      '**/dist/',
+      '**/coverage/',
+      '**/reports/',
+    ],
+  },
+  {
+    plugins: {
+      'simple-import-sort': eslintSimpleImportSort,
+      'unused-imports': eslintPluginUnusedImports,
+    },
+    rules: {
+      'linebreak-style': ['error', 'unix'],
+      quotes: ['error', 'single'],
+      semi: ['error', 'always'],
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      'prettier/prettier': ['error'],
+      'unused-imports/no-unused-imports': 'error',
+    },
+  },
+);