@thednp/dommatrix 2.0.0-alpha2 → 2.0.0

package/.eslintrc.cjs

@@ -0,0 +1,224 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "tsconfig.json",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "eslint-plugin-jsdoc",
+        "eslint-plugin-prefer-arrow",
+        // "eslint-plugin-react",
+        "@typescript-eslint",
+        "prettier"
+    ],
+    "root": true,
+    "rules": {
+        "prettier/prettier": "error",
+        "@typescript-eslint/adjacent-overload-signatures": "error",
+        "@typescript-eslint/array-type": [
+            "error",
+            {
+                "default": "array"
+            }
+        ],
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "Object": {
+                        "message": "Avoid using the `Object` type. Did you mean `object`?"
+                    },
+                    "Function": {
+                        "message": "Avoid using the `Function` type. Prefer a specific function type, like `() => void`."
+                    },
+                    "Boolean": {
+                        "message": "Avoid using the `Boolean` type. Did you mean `boolean`?"
+                    },
+                    "Number": {
+                        "message": "Avoid using the `Number` type. Did you mean `number`?"
+                    },
+                    "String": {
+                        "message": "Avoid using the `String` type. Did you mean `string`?"
+                    },
+                    "Symbol": {
+                        "message": "Avoid using the `Symbol` type. Did you mean `symbol`?"
+                    }
+                }
+            }
+        ],
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/indent": "off",
+        "@typescript-eslint/member-delimiter-style": [
+            "off",
+            {
+                "multiline": {
+                    "delimiter": "none",
+                    "requireLast": true
+                },
+                "singleline": {
+                    "delimiter": "semi",
+                    "requireLast": false
+                }
+            }
+        ],
+        // "@typescript-eslint/naming-convention": "error", // keep the original namespace
+        "@typescript-eslint/no-empty-function": "error",
+        "@typescript-eslint/no-empty-interface": "error",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-misused-new": "error",
+        "@typescript-eslint/no-namespace": "error",
+        "@typescript-eslint/no-parameter-properties": "off",
+        "@typescript-eslint/no-shadow": [
+            "error",
+            {
+                "hoist": "all"
+            }
+        ],
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/quotes": "off",
+        "@typescript-eslint/semi": [
+            "off",
+            null
+        ],
+        "@typescript-eslint/triple-slash-reference": [
+            "error",
+            {
+                "path": "always",
+                "types": "prefer-import",
+                "lib": "always"
+            }
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "@typescript-eslint/typedef": "off",
+        "@typescript-eslint/unified-signatures": "error",
+        "arrow-parens": [
+            "off",
+            "always"
+        ],
+        "brace-style": [
+            "off",
+            "off"
+        ],
+        "comma-dangle": "off",
+        "complexity": "off",
+        "constructor-super": "error",
+        "dot-notation": "off",
+        "eol-last": "off",
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
+        "guard-for-in": "error",
+        "id-denylist": [
+            "error",
+            "any",
+            "Number",
+            "number",
+            "String",
+            "string",
+            "Boolean",
+            "boolean",
+            "Undefined",
+            "undefined"
+        ],
+        "id-match": "error",
+        "indent": "off",
+        "jsdoc/check-alignment": "error",
+        "jsdoc/check-indentation": "error",
+        "jsdoc/newline-after-description": "error",
+        "linebreak-style": "off",
+        "max-classes-per-file": [
+            "error",
+            1
+        ],
+        "max-len": "off",
+        "new-parens": "off",
+        "newline-per-chained-call": "off",
+        "no-bitwise": "error",
+        "no-caller": "error",
+        "no-cond-assign": "error",
+        "no-console": "error",
+        "no-debugger": "error",
+        "no-empty": "error",
+        "no-empty-function": "off",
+        "no-eval": "error",
+        "no-extra-semi": "off",
+        "no-fallthrough": "off",
+        "no-invalid-this": "off",
+        "no-irregular-whitespace": "off",
+        "no-multiple-empty-lines": "off",
+        "no-new-wrappers": "error",
+        "no-shadow": "off",
+        "no-throw-literal": "error",
+        "no-trailing-spaces": "off",
+        "no-undef-init": "error",
+        "no-underscore-dangle": "off",
+        "no-unsafe-finally": "error",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "error",
+        "no-use-before-define": "off",
+        "no-var": "error",
+        "object-shorthand": "error",
+        "one-var": [
+            "error",
+            "never"
+        ],
+        "padded-blocks": [
+            "off",
+            {
+                "blocks": "never"
+            },
+            {
+                "allowSingleLineBlocks": true
+            }
+        ],
+        "prefer-arrow/prefer-arrow-functions": "error",
+        "prefer-const": "error",
+        "quote-props": "off",
+        "quotes": "off",
+        "radix": "error",
+        // "react/jsx-curly-spacing": "off",
+        // "react/jsx-equals-spacing": "off",
+        // "react/jsx-tag-spacing": [
+        //     "off",
+        //     {
+        //         "afterOpening": "allow",
+        //         "closingSlash": "allow"
+        //     }
+        // ],
+        // "react/jsx-wrap-multilines": "off",
+        "semi": "off",
+        "space-before-function-paren": "off",
+        "space-in-parens": [
+            "off",
+            "never"
+        ],
+        "spaced-comment": [
+            "error",
+            "always",
+            {
+                "markers": [
+                    "/"
+                ]
+            }
+        ],
+        "use-isnan": "error",
+        "valid-typeof": "off"
+    }
+};

package/.lgtm.yml

@@ -0,0 +1,9 @@
+extraction:
+  javascript:
+    index:
+      exclude:
+        - coverage
+        - cypress
+        - docs
+        - experiments
+        - node_modules

package/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

package/cypress/e2e/dommatrix.spec.ts

@@ -0,0 +1,299 @@
+/// <reference types="cypress" />
+
+import CSSMatrix from '../../src/index';
+import type { Matrix, Matrix3d } from '../../src/types';
+import testSamples from '../fixtures/testSamples';
+
+describe('DOMMatrix Class Test', () => {
+
+  beforeEach(() => {
+    cy.visit('cypress/test.html')
+  });
+
+  it('Test init with no parameter, expect same output as native DOMMatrix', () => {
+    const css = new CSSMatrix();
+    const css1 = new CSSMatrix().setMatrixValue();
+    const dom = new DOMMatrix();
+    cy.wrap(css).as('css')
+      .get('@css').its('is2D').should('equal', dom.is2D)
+      .get('@css').its('isIdentity').should('equal', dom.isIdentity)
+      .get('@css').should(($this) => {
+        expect(JSON.stringify($this)).to.equal(JSON.stringify(dom));
+        expect(JSON.stringify($this)).to.equal(JSON.stringify(css1));
+      })
+  });
+
+  it('Test init with invalid array, expect error', () => {
+    const test = [0.906308, 0.0839613, -0.414194, 0.00103549, 0, 0.980067, 0.198669, -0.000496673, 0.422618, -0.180056, 0.888242, -0.0022206, 0, 0, 0, 'NaN'];
+    try {
+      // @ts-ignore
+      CSSMatrix.fromArray(test);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: "${test}" must be an array with 6/16 numbers.`);
+    }
+
+    const test1 = [0.9659, 0.25879, -0.2588, 0.9659, -1.53961, 'NaN'];
+    try {
+      // @ts-ignore
+      CSSMatrix.fromArray(test1);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: "${test1}" must be an array with 6/16 numbers.`);
+    }
+
+  });
+
+  it('Test init with incomplete array, expect error', () => {
+    const test = [0.906308, 0.0839613, -0.414194, 0.00103549, 0, 0.980067, 0.198669, -0.000496673, 0.422618, -0.180056, 0.888242, -0.0022206, 0, 0, 0];
+    try {
+      CSSMatrix.fromArray(test);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: "${test}" must be an array with 6/16 numbers.`);
+    }
+  });
+
+  it('Test init with incompatible CSSMatrix, DOMMatrix, JSON object', () => {
+    // const css1 = {a: 0.94, b: 0.25, c: -0.25, d: 0.95, e: 0, f: 0, m11: 0.93, m12: 0.25, m13: -0.25, m14: 0, m21: -0.25, m22: 0.95, m23: 0, m24: 0, m31: 0.2, m32: 0.05, m33: 0.95, m34: 0, m41: 0, m42: 0, m43: 0, m44: 1};
+    const css1 = {a: 0.94, b: 0.25, c: -0.25, d: 0.95, e: 0, f: 0, m11: 0.93, m12: 0.25, m13: -0.25, m14: 0, m21: -0.25, m22: 0.95, m23: 0, m24: 0, m31: 0.2, m32: 0.05, m33: 0.95, m34: 0, m41: 0, m42: 0, m43: 0, m44: 1};
+    const css2 = {m11: 0.93, m12: 0.25, m13: -0.25, m14: 0, m21: -0.25, m22: 0.95, m23: 0, m24: 0, m31: 0.2, m32: 0.05, m33: 0.95, m34: 0, m41: 0, m42: 0, m43: 0, m44: 1};
+    const css3 = {a: 0.94, b: 0.25, c: -0.25, d: 0.95, e: 0, f: 0};
+
+    [css1, css2, css3].forEach((c) => {
+      try {
+        // @ts-ignore
+        new CSSMatrix(c);
+      } catch (err) {
+        expect(err).to.be.instanceOf(TypeError);
+        expect(err).to.have.property('message', `CSSMatrix: "${JSON.stringify(c)}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
+      }
+    })
+  });
+
+  it('Test init compatible CSSMatrix, DOMMatrix, JSON object', () => {
+    const css = new CSSMatrix().rotate(15, 15);
+    const dom = new DOMMatrix().rotate(15, 15);
+
+    cy.wrap(new CSSMatrix(css)).as('cc')
+      .get('@cc').its('is2D').should('equal', css.is2D)
+      .get('@cc').its('is2D').should('equal', new CSSMatrix(dom).is2D)
+      .get('@cc').its('isIdentity').should('equal', css.isIdentity)
+      .get('@cc').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity);
+
+    cy.wrap(css.toJSON()).as('js')
+      .get('@js').its('is2D').should('equal', css.is2D)
+      .get('@js').its('is2D').should('equal', new CSSMatrix(dom).is2D)
+      .get('@js').its('isIdentity').should('equal', css.isIdentity)
+      .get('@js').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity)
+  });
+
+  it('Test specific private methods', () => {
+    cy.log('CSSMatrix.rotateAxisAngle specific error').then(() => {
+      try {
+        // @ts-ignore
+        new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
+      } catch (err) {
+        expect(err).to.be.instanceOf(TypeError);
+        expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
+      }
+    });
+
+    cy.log('CSSMatrix.rotate').then(() => {
+      const d1 = new DOMMatrix().rotate(15);
+      const m1 = new CSSMatrix().rotate(15);
+
+      cy.get('.bg-primary').then(($el) => {
+          $el[0].style.transform = m1.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d1.toString();
+        })
+      expect(m1.isIdentity).to.equal(d1.isIdentity);
+      expect(m1.is2D).to.equal(d1.is2D);
+      expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
+      expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.rotate(x:25, y:15)').then(() => {
+      const d2 = new DOMMatrix().rotate(25,15);
+      const m2 = new CSSMatrix().rotate(25,15);
+      cy.get('.bg-primary').then(($el) => {
+          $el[0].style.transform = m2.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d2.toString();
+        })
+
+      expect(m2.isIdentity).to.equal(d2.isIdentity);
+      expect(m2.is2D).to.equal(d2.is2D);
+      expect(m2.toFloat32Array()).to.deep.equal(d2.toFloat32Array());
+      expect(m2.toFloat64Array()).to.deep.equal(d2.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.translate(x:150)').then(() => {
+      const d3 = new DOMMatrix().translate(150);
+      const m3 = new CSSMatrix().translate(150);
+
+      cy.get('.bg-primary').then(($el) => {
+          $el[0].style.transform = m3.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d3.toString();
+        })
+      expect(m3.isIdentity).to.equal(d3.isIdentity);
+      expect(m3.is2D).to.equal(d3.is2D);
+      expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
+      expect(m3.toFloat64Array()).to.deep.equal(d3.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.skew(x:15, y:-20)').then(() => {
+      const d4 = new DOMMatrix('skew(15deg, -20deg)');
+      const m4 = new CSSMatrix().skew(15, -20);
+      cy.log('In this test we\'re addapting to the output of the native DOMMatrix method since it doesn\'t support the skew() method itself.')
+        .get('.bg-primary').then(($el) => {
+          $el[0].style.transform = m4.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d4.toString();
+        })
+        expect(m4.isIdentity).to.equal(d4.isIdentity);
+        expect(m4.is2D).to.equal(d4.is2D);
+        expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
+        expect(m4.toFloat64Array()).to.deep.equal(d4.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.scale(x:1.3)').then(() => {
+      const d5 = new DOMMatrix().scale(1.3);
+      const m5 = new CSSMatrix().scale(1.3);
+      cy.get('.bg-primary').then(($el) => {
+            $el[0].style.transform = m5.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d5.toString();
+        })
+      expect(m5.isIdentity).to.equal(d5.isIdentity);
+      expect(m5.is2D).to.equal(d5.is2D);
+      expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
+      expect(m5.toFloat64Array()).to.deep.equal(d5.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.scale(x:1.3,y:1.8)').then(() => {
+      const d6 = new DOMMatrix().scale(1.3,1.8);
+      const m6 = new CSSMatrix().scale(1.3,1.8);
+      cy.get('.bg-primary').then(($el) => {
+          $el[0].style.transform = m6.toString();
+        })
+        .get('.bg-secondary').then(($el) => {
+          $el[0].style.transform = d6.toString();
+        })
+      expect(m6.isIdentity).to.equal(d6.isIdentity);
+      expect(m6.is2D).to.equal(d6.is2D);
+      expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
+      expect(m6.toFloat64Array()).to.deep.equal(d6.toFloat64Array());
+    });
+
+    cy.log('CSSMatrix.transformPoint').then(() => {
+      const p1 = new DOMPoint(15, 20, 35, 1);
+      const p2 = { x: 15, y: 20, z: 35, w: 1};
+      const dp = new DOMMatrix().rotate(15).translate(15, 15);
+      const mp = new CSSMatrix().rotate(15).translate(15, 15);
+  
+      cy.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
+      expect(mp.isIdentity).to.equal(dp.isIdentity);
+      expect(mp.is2D).to.equal(dp.is2D);
+      expect(mp.toFloat32Array()).to.deep.equal(dp.toFloat32Array());
+      expect(mp.toFloat64Array()).to.deep.equal(dp.toFloat64Array());
+      expect(mp.transformPoint(p1)).to.deep.equal(dp.transformPoint(p1));
+      expect(mp.transformPoint(p2)).to.deep.equal(dp.transformPoint(p2).toJSON());
+    });
+  });
+
+  it('Test init a 6 values array', () => {
+    const test = [0.9659, 0.25879, -0.2588, 0.9659, -1.53961, -1.53961] as Matrix;
+    const m1 = new CSSMatrix(test);
+    // const m2 = new CSSMatrix(...test);
+    const m3 = new CSSMatrix([...test]);
+    const m4 = new DOMMatrix(test);
+
+    expect(m1.toFloat64Array()).to.deep.equal(m3.toFloat64Array())
+    expect(m1.toFloat64Array()).to.deep.equal(m4.toFloat64Array())
+  });
+
+  it('Test init a 16 values array', () => { 
+    const test = [0.852, 0.153, 0.186, -0.0004, -0.092, 0.869, -0.266, 0.0006, -0.25, 0.258, 0.933, -0.002, 0, 0, 0, 1] as Matrix3d;
+    const m1 = new CSSMatrix(test);
+    // const m2 = new CSSMatrix(...test);
+    const m3 = new CSSMatrix([...test]);
+    const m4 = new DOMMatrix(test);
+
+    expect(m1.toFloat32Array()).to.deep.equal(m3.toFloat32Array())
+    expect(m1.toFloat32Array()).to.deep.equal(m4.toFloat32Array())
+  });
+
+  it('Test static methods', () => {
+    const m = new CSSMatrix();
+    const source = {a: 1};
+    const source1 = 'wombat(1)';
+    const source2 = 'skew()';
+    const source3 = 'translate(wombat)';
+
+    expect(CSSMatrix.fromMatrix(m)).to.deep.equal(m);
+    expect(CSSMatrix.fromMatrix(m.toJSON())).to.deep.equal(m);
+
+    try {
+      // @ts-ignore
+      CSSMatrix.fromString(source);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: "${JSON.stringify(source)}" is not a string.`);
+    }
+
+    try {
+      CSSMatrix.fromString(source1);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: invalid transform string "${source1}"`);
+    }
+
+    try {
+      CSSMatrix.fromString(source2);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: invalid transform string "${source2}"`);
+    }
+
+    try {
+      CSSMatrix.fromString(source3);
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', `CSSMatrix: invalid transform string "${source3}"`);
+    }
+  });
+
+  Object.keys(testSamples).forEach((test) => {
+    it(`Test string input ${test}, expect same output as native DOMMatrix`, () => {
+      const str = testSamples[test];
+      const css = new CSSMatrix(str);
+      const dom = new DOMMatrix(str);
+      
+      cy.get('.bg-primary').then(($el) => {
+        $el[0].style.transform = css.toString();
+      });
+      cy.get('.bg-secondary').then(($el) => {
+        $el[0].style.transform = dom.toString();
+      });
+      cy.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
+
+              expect(Array.from(css.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6))
+      .to.deep.equal(Array.from(dom.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6));
+
+      cy.wrap(css).as('css')
+        .log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`')
+        .get('@css').its('isIdentity').should((isIdentity) => expect(isIdentity).to.equal(dom.isIdentity))
+        .get('@css').its('is2D').should((test === 'rotate3d1' ? 'not.equal' : 'equal'), dom.is2D);
+    });
+  })
+
+
+});

package/cypress/fixtures/testSamples.ts

@@ -0,0 +1,32 @@
+export default {
+  skew: 'skew(25deg)',
+  skewX: 'skewX(25deg)',
+  skewY: 'skewY(-25deg)',
+  skew2d: 'skew(15deg, 25deg)',
+  skewsX0: 'skew(15deg, 0)',
+  skews0Y: 'skew(0, 25deg)',
+  skews3: 'skew(35deg, -45deg)',
+  rotate: 'rotate(25deg)',
+  rotateX: 'rotateX(-25deg)',
+  rotateY: 'rotateY(25deg)',
+  rotate3d: 'rotate3d(0.1,1.5,0.7,25deg)',
+  rotate3d1: 'rotate3d(0,0,0,20deg)',
+  translate: 'translate(25px)',
+  translateX: 'translateX(25px)',
+  translateY: 'translateY(25px)',
+  translateZ: 'translateZ(25px)',
+  translate2d: 'translate(25px, 15px)',
+  translate3D: 'translate3d(25px, 15px, 5px)',
+  scale: 'scale(1.25)',
+  scaleX: 'scaleX(1.515)',
+  scaleY: 'scaleY(1.155)',
+  scaleZ: 'scaleZ(1.153)',
+  scale3D: 'scale3d(1.15, 1.51, 2)',
+  regular: 'perspective(400px) translate(150px, 200px) rotateX(0.2rad) rotateY(25deg)',
+  matrix: 'matrix(0.9659, 0.2588, -0.2588, 0.9659, -1.5396, -1.5396) translate(15px)',
+  matrix3d: 'matrix3d(0.852, 0.153, 0.186, -0.0004, -0.092, 0.869, -0.266, 0.0006, -0.25, 0.258, 0.933, -0.002, 0, 0, 0, 1)',
+  combo: 'translate(25px, 15px) matrix(0.984807, -0.173648, 0.173648, 0.984807, 0, 0)',
+  combo1: 'skewX(0.3rad) skewY(10deg) translate3d(15px,15px, -15px) matrix(0.984807, -0.173648, 0.173648, 0.984807, 0, 0)',
+  combo2: 'perspective(800px) scale(0.9,1.1) rotateX(15deg) rotate(-0.125rad) skewX(-5deg) rotate3d(0.1,1.5,0.7,25deg) skewY(-0.2rad)',
+  combo3: 'perspective(1200px) rotateY(-175deg) rotate(-0.125rad) scale3d(0.9,1.1,0.75) skewX(-0.2rad) rotate3d(0.1,1.5,0.7,25deg) skewY(-5deg) matrix(0.9659, 0.2588, -0.2588, 0.9659, -1.5396, -1.5396)'
+}

package/cypress/plugins/esbuild-istanbul.ts

@@ -0,0 +1,50 @@
+// sources
+// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
+'use strict';
+import esbuild from 'esbuild';
+import { promises } from 'fs';
+import { createInstrumenter } from 'istanbul-lib-instrument';
+import { extname, sep } from 'path';
+import tsCompile from './tsCompile';
+
+// import Cypress settings
+const sourceFolder = 'src';
+const [name] = process.cwd().split(sep).slice(-1);
+
+const sourceFilter = `${name}${sep}${sourceFolder}`;
+const instrumenter = createInstrumenter({
+  compact: false,
+  esModules: true,
+  preserveComments: true,
+  autoWrap: true,
+});
+
+const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
+  return {
+    name: 'istanbul',
+    setup(build: esbuild.PluginBuild) {
+      build.onLoad(
+        { filter: /\.(ts|tsx)$/ },
+        async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
+          
+          if (!path.includes(sourceFilter)) {
+            // console.log("> compiling typescript %s for output build", path);
+            const contents = await promises.readFile(path, 'utf8');
+            return {
+              contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
+            };
+          }
+
+          // console.log("🧡 instrumenting %s for output coverage", path);
+          const { outputText, sourceMap } = tsCompile(path);
+
+          return {
+            contents: instrumenter.instrumentSync(outputText, path, sourceMap),
+          };
+        },
+      );
+    },
+  };
+};
+
+export default createEsbuildIstanbulPlugin;

package/cypress/plugins/tsCompile.ts

@@ -0,0 +1,34 @@
+// compile.ts
+import TypeScript from 'typescript';
+import { basename } from 'path';
+import { RawSourceMap } from 'source-map';
+import { readFileSync } from 'fs';
+
+export default function tsCompile(
+  path: string,
+  ops?: Partial<TypeScript.TranspileOptions>,
+): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
+  // Default options -- you could also perform a merge, or use the project tsconfig.json
+  const options: TypeScript.TranspileOptions = Object.assign(
+    {
+      compilerOptions: {
+        allowJs: true,
+        esModuleInterop: true,
+        removeComments: false,
+        target: 99, // ESNext
+        allowSyntheticDefaultImports: true,
+        isolatedModules: true,
+        noEmitHelpers: true,
+        sourceMap: true,
+      } as Partial<TypeScript.CompilerOptions>,
+    },
+    ops,
+  );
+  const contents = readFileSync(path, { encoding: 'utf8' });
+  const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
+  const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
+  sourceMap.file = basename(path);
+  sourceMap.sources = [basename(path)];
+
+  return { outputText, sourceMap, sourceMapText };
+}