@thednp/dommatrix 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +0 -0
- package/.lgtm.yml +0 -0
- package/.prettierrc.json +0 -0
- package/LICENSE +0 -0
- package/README.md +4 -4
- package/dist/dommatrix.cjs +2 -1
- package/dist/dommatrix.cjs.map +1 -1
- package/dist/dommatrix.d.ts +5 -5
- package/dist/dommatrix.js +2 -1
- package/dist/dommatrix.js.map +1 -1
- package/dist/dommatrix.mjs +3 -3
- package/dist/dommatrix.mjs.map +1 -1
- package/dts.config.ts +0 -0
- package/package.json +79 -74
- package/src/index.ts +1 -0
- package/src/types.ts +0 -0
- package/{cypress/e2e/dommatrix.spec.ts → test/dommatrix.test.ts} +131 -131
- package/{cypress/test.html → test/fixtures/getExampleDom.ts} +38 -35
- package/{cypress → test}/fixtures/testSamples.ts +0 -0
- package/tsconfig.json +3 -3
- package/vite.config.ts +0 -0
- package/vitest.config-ui.ts +21 -0
- package/vitest.config.ts +19 -0
- package/cypress/plugins/esbuild-istanbul.ts +0 -50
- package/cypress/plugins/tsCompile.ts +0 -34
- package/cypress/support/commands.ts +0 -37
- package/cypress/support/e2e.ts +0 -21
- package/cypress.config.ts +0 -29
|
@@ -1,32 +1,36 @@
|
|
|
1
|
-
|
|
1
|
+
import { expect, it, describe, vi, beforeEach, afterEach } from 'vitest';
|
|
2
|
+
import { getExampleDOM } from './fixtures/getExampleDom';
|
|
2
3
|
|
|
3
|
-
import CSSMatrix from '
|
|
4
|
-
import type { Matrix, Matrix3d } from '
|
|
5
|
-
import testSamples from '
|
|
4
|
+
import CSSMatrix from '../src/index';
|
|
5
|
+
import type { Matrix, Matrix3d } from '../src/types';
|
|
6
|
+
import testSamples from './fixtures/testSamples';
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
const roundTo4 = (x: number) => Math.round(x * 10000) / 10000
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
describe('DOMMatrix Class Test', () => {
|
|
11
|
+
let container: HTMLElement;
|
|
12
|
+
beforeEach(async () => {
|
|
13
|
+
container = getExampleDOM();
|
|
14
|
+
await vi.waitUntil(() => container.querySelector('div') !== null, { timeout: 150 });
|
|
15
|
+
});
|
|
16
|
+
afterEach(async () => {
|
|
17
|
+
document.documentElement.innerHTML = '';
|
|
11
18
|
});
|
|
12
19
|
|
|
13
20
|
it('Test init with no parameter, expect same output as native DOMMatrix', () => {
|
|
14
21
|
const css = new CSSMatrix();
|
|
15
22
|
const css1 = new CSSMatrix().setMatrixValue();
|
|
16
23
|
const dom = new DOMMatrix();
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
expect(JSON.stringify($this)).to.equal(JSON.stringify(css1));
|
|
23
|
-
})
|
|
24
|
+
|
|
25
|
+
expect(css.is2D).to.equal(dom.is2D);
|
|
26
|
+
expect(css.isIdentity).to.equal(dom.isIdentity);
|
|
27
|
+
expect(JSON.stringify(css)).to.equal(JSON.stringify(dom));
|
|
28
|
+
expect(JSON.stringify(css)).to.equal(JSON.stringify(css1));
|
|
24
29
|
});
|
|
25
30
|
|
|
26
31
|
it('Test init with invalid array, expect error', () => {
|
|
27
32
|
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'];
|
|
28
33
|
try {
|
|
29
|
-
// @ts-ignore
|
|
30
34
|
CSSMatrix.fromArray(test);
|
|
31
35
|
} catch (err) {
|
|
32
36
|
expect(err).to.be.instanceOf(TypeError);
|
|
@@ -62,7 +66,7 @@ describe('DOMMatrix Class Test', () => {
|
|
|
62
66
|
|
|
63
67
|
[css1, css2, css3].forEach((c) => {
|
|
64
68
|
try {
|
|
65
|
-
// @ts-
|
|
69
|
+
// @ts-expect-error
|
|
66
70
|
new CSSMatrix(c);
|
|
67
71
|
} catch (err) {
|
|
68
72
|
expect(err).to.be.instanceOf(TypeError);
|
|
@@ -75,145 +79,140 @@ describe('DOMMatrix Class Test', () => {
|
|
|
75
79
|
const css = new CSSMatrix().rotate(15, 15);
|
|
76
80
|
const dom = new DOMMatrix().rotate(15, 15);
|
|
77
81
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
cy.wrap(css.toJSON()).as('js')
|
|
85
|
-
.get('@js').its('is2D').should('equal', css.is2D)
|
|
86
|
-
.get('@js').its('is2D').should('equal', new CSSMatrix(dom).is2D)
|
|
87
|
-
.get('@js').its('isIdentity').should('equal', css.isIdentity)
|
|
88
|
-
.get('@js').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity)
|
|
82
|
+
expect(css.is2D).to.equal(dom.is2D)
|
|
83
|
+
expect(css.is2D).to.equal(new CSSMatrix(css).is2D)
|
|
84
|
+
expect(css.isIdentity).to.equal(dom.isIdentity)
|
|
85
|
+
expect(css.isIdentity).to.equal((new CSSMatrix(dom)).isIdentity)
|
|
86
|
+
|
|
89
87
|
});
|
|
90
88
|
|
|
91
89
|
it('Test specific private methods', () => {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
90
|
+
try {
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
|
|
93
|
+
} catch (err) {
|
|
94
|
+
expect(err).to.be.instanceOf(TypeError);
|
|
95
|
+
expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const d1 = new DOMMatrix().rotate(15);
|
|
99
|
+
const m1 = new CSSMatrix().rotate(15);
|
|
100
|
+
|
|
101
|
+
const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
|
|
102
|
+
const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
|
|
103
|
+
|
|
104
|
+
console.log('Some initial testing');
|
|
105
|
+
|
|
106
|
+
cssDiv.style.transform = m1.toString();
|
|
107
|
+
domDiv.style.transform = d1.toString();
|
|
108
|
+
expect(m1.isIdentity).to.equal(d1.isIdentity);
|
|
109
|
+
expect(m1.is2D).to.equal(d1.is2D);
|
|
110
|
+
|
|
111
|
+
// for some reason DOMMatrix in
|
|
112
|
+
// expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
|
|
113
|
+
// expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
|
|
114
|
+
expect(Array.from(m1.toFloat32Array()).map(roundTo4))
|
|
115
|
+
.to.deep.equal(Array.from(d1.toFloat32Array()).map(roundTo4));
|
|
116
|
+
expect(Array.from(m1.toFloat64Array()).map(roundTo4))
|
|
117
|
+
.to.deep.equal(Array.from(d1.toFloat64Array()).map(roundTo4));
|
|
118
|
+
|
|
119
|
+
console.log('CSSMatrix.rotate(x:25, y:15)');
|
|
119
120
|
const d2 = new DOMMatrix().rotate(25,15);
|
|
120
121
|
const m2 = new CSSMatrix().rotate(25,15);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
})
|
|
124
|
-
.get('.bg-secondary').then(($el) => {
|
|
125
|
-
$el[0].style.transform = d2.toString();
|
|
126
|
-
})
|
|
122
|
+
cssDiv.style.transform = m2.toString();
|
|
123
|
+
domDiv.style.transform = d2.toString();
|
|
127
124
|
|
|
128
125
|
expect(m2.isIdentity).to.equal(d2.isIdentity);
|
|
129
126
|
expect(m2.is2D).to.equal(d2.is2D);
|
|
130
|
-
expect(m2.toFloat32Array()).to.deep.equal(d2.toFloat32Array());
|
|
131
|
-
expect(m2.toFloat64Array()).to.deep.equal(d2.toFloat64Array());
|
|
132
|
-
});
|
|
133
127
|
|
|
134
|
-
|
|
128
|
+
// same here
|
|
129
|
+
// expect(m2.toFloat32Array()).to.deep.equal(d2.toFloat32Array());
|
|
130
|
+
// expect(m2.toFloat64Array()).to.deep.equal(d2.toFloat64Array());
|
|
131
|
+
expect(Array.from(m2.toFloat32Array()).map(roundTo4))
|
|
132
|
+
.to.deep.equal(Array.from(d2.toFloat32Array()).map(roundTo4));
|
|
133
|
+
expect(Array.from(m2.toFloat64Array()).map(roundTo4))
|
|
134
|
+
.to.deep.equal(Array.from(d2.toFloat64Array()).map(roundTo4));
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
console.log('CSSMatrix.translate(x:150)');
|
|
135
138
|
const d3 = new DOMMatrix().translate(150);
|
|
136
139
|
const m3 = new CSSMatrix().translate(150);
|
|
137
140
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
})
|
|
141
|
-
.get('.bg-secondary').then(($el) => {
|
|
142
|
-
$el[0].style.transform = d3.toString();
|
|
143
|
-
})
|
|
141
|
+
cssDiv.style.transform = m3.toString();
|
|
142
|
+
domDiv.style.transform = d3.toString();
|
|
144
143
|
expect(m3.isIdentity).to.equal(d3.isIdentity);
|
|
145
144
|
expect(m3.is2D).to.equal(d3.is2D);
|
|
146
|
-
expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
|
|
147
|
-
expect(m3.toFloat64Array()).to.deep.equal(d3.toFloat64Array());
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
145
|
+
// expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
|
|
146
|
+
// expect(m3.toFloat64Array()).to.deep.equal(d3.toFloat64Array());
|
|
147
|
+
expect(Array.from(m3.toFloat32Array()).map(roundTo4))
|
|
148
|
+
.to.deep.equal(Array.from(d3.toFloat32Array()).map(roundTo4));
|
|
149
|
+
expect(Array.from(m3.toFloat64Array()).map(roundTo4))
|
|
150
|
+
.to.deep.equal(Array.from(d3.toFloat64Array()).map(roundTo4));
|
|
151
|
+
|
|
152
|
+
console.log('CSSMatrix.skew(x:15, y:-20)');
|
|
151
153
|
const d4 = new DOMMatrix('skew(15deg, -20deg)');
|
|
152
154
|
const m4 = new CSSMatrix().skew(15, -20);
|
|
153
|
-
|
|
154
|
-
.
|
|
155
|
-
|
|
156
|
-
})
|
|
157
|
-
.get('.bg-secondary').then(($el) => {
|
|
158
|
-
$el[0].style.transform = d4.toString();
|
|
159
|
-
})
|
|
155
|
+
console.log('In this test we\'re addapting to the output of the native DOMMatrix method since it doesn\'t support the skew() method itself.');
|
|
156
|
+
cssDiv.style.transform = m4.toString();
|
|
157
|
+
domDiv.style.transform = d4.toString();
|
|
160
158
|
expect(m4.isIdentity).to.equal(d4.isIdentity);
|
|
161
159
|
expect(m4.is2D).to.equal(d4.is2D);
|
|
162
|
-
expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
|
|
163
|
-
expect(m4.toFloat64Array()).to.deep.equal(d4.toFloat64Array());
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
160
|
+
// expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
|
|
161
|
+
// expect(m4.toFloat64Array()).to.deep.equal(d4.toFloat64Array());
|
|
162
|
+
expect(Array.from(m4.toFloat32Array()).map(roundTo4))
|
|
163
|
+
.to.deep.equal(Array.from(d4.toFloat32Array()).map(roundTo4));
|
|
164
|
+
expect(Array.from(m4.toFloat64Array()).map(roundTo4))
|
|
165
|
+
.to.deep.equal(Array.from(d4.toFloat64Array()).map(roundTo4));
|
|
166
|
+
|
|
167
|
+
console.log('CSSMatrix.scale(x:1.3)');
|
|
167
168
|
const d5 = new DOMMatrix().scale(1.3);
|
|
168
169
|
const m5 = new CSSMatrix().scale(1.3);
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
.get('.bg-secondary').then(($el) => {
|
|
173
|
-
$el[0].style.transform = d5.toString();
|
|
174
|
-
})
|
|
170
|
+
|
|
171
|
+
cssDiv.style.transform = m5.toString();
|
|
172
|
+
domDiv.style.transform = d5.toString();
|
|
175
173
|
expect(m5.isIdentity).to.equal(d5.isIdentity);
|
|
176
174
|
expect(m5.is2D).to.equal(d5.is2D);
|
|
177
|
-
expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
|
|
178
|
-
expect(m5.toFloat64Array()).to.deep.equal(d5.toFloat64Array());
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
175
|
+
// expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
|
|
176
|
+
// expect(m5.toFloat64Array()).to.deep.equal(d5.toFloat64Array());
|
|
177
|
+
expect(Array.from(m5.toFloat32Array()).map(roundTo4))
|
|
178
|
+
.to.deep.equal(Array.from(d5.toFloat32Array()).map(roundTo4));
|
|
179
|
+
expect(Array.from(m5.toFloat64Array()).map(roundTo4))
|
|
180
|
+
.to.deep.equal(Array.from(d5.toFloat64Array()).map(roundTo4));
|
|
181
|
+
|
|
182
|
+
console.log('CSSMatrix.scale(x:1.3,y:1.8)');
|
|
182
183
|
const d6 = new DOMMatrix().scale(1.3,1.8);
|
|
183
184
|
const m6 = new CSSMatrix().scale(1.3,1.8);
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
})
|
|
187
|
-
.get('.bg-secondary').then(($el) => {
|
|
188
|
-
$el[0].style.transform = d6.toString();
|
|
189
|
-
})
|
|
185
|
+
cssDiv.style.transform = m6.toString();
|
|
186
|
+
domDiv.style.transform = d6.toString();
|
|
190
187
|
expect(m6.isIdentity).to.equal(d6.isIdentity);
|
|
191
188
|
expect(m6.is2D).to.equal(d6.is2D);
|
|
192
|
-
expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
|
|
193
|
-
expect(m6.toFloat64Array()).to.deep.equal(d6.toFloat64Array());
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
189
|
+
// expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
|
|
190
|
+
// expect(m6.toFloat64Array()).to.deep.equal(d6.toFloat64Array());
|
|
191
|
+
expect(Array.from(m6.toFloat32Array()).map(roundTo4))
|
|
192
|
+
.to.deep.equal(Array.from(d6.toFloat32Array()).map(roundTo4));
|
|
193
|
+
expect(Array.from(m6.toFloat64Array()).map(roundTo4))
|
|
194
|
+
.to.deep.equal(Array.from(d6.toFloat64Array()).map(roundTo4));
|
|
195
|
+
|
|
196
|
+
console.log('CSSMatrix.transformPoint');
|
|
197
197
|
const p1 = new DOMPoint(15, 20, 35, 1);
|
|
198
198
|
const p2 = { x: 15, y: 20, z: 35, w: 1};
|
|
199
199
|
const dp = new DOMMatrix().rotate(15).translate(15, 15);
|
|
200
200
|
const mp = new CSSMatrix().rotate(15).translate(15, 15);
|
|
201
201
|
|
|
202
|
-
|
|
202
|
+
console.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
|
|
203
203
|
expect(mp.isIdentity).to.equal(dp.isIdentity);
|
|
204
204
|
expect(mp.is2D).to.equal(dp.is2D);
|
|
205
205
|
expect(mp.toFloat32Array()).to.deep.equal(dp.toFloat32Array());
|
|
206
206
|
expect(mp.toFloat64Array()).to.deep.equal(dp.toFloat64Array());
|
|
207
207
|
expect(mp.transformPoint(p1)).to.deep.equal(dp.transformPoint(p1));
|
|
208
208
|
expect(mp.transformPoint(p2)).to.deep.equal(dp.transformPoint(p2).toJSON());
|
|
209
|
-
});
|
|
210
209
|
});
|
|
211
210
|
|
|
212
211
|
it('Test init a 6 values array', () => {
|
|
213
212
|
const test = [0.9659, 0.25879, -0.2588, 0.9659, -1.53961, -1.53961] as Matrix;
|
|
214
213
|
const m1 = new CSSMatrix(test);
|
|
215
214
|
// const m2 = new CSSMatrix(...test);
|
|
216
|
-
const m3 = new CSSMatrix(
|
|
215
|
+
const m3 = new CSSMatrix(test);
|
|
217
216
|
const m4 = new DOMMatrix(test);
|
|
218
217
|
|
|
219
218
|
expect(m1.toFloat64Array()).to.deep.equal(m3.toFloat64Array())
|
|
@@ -242,7 +241,7 @@ describe('DOMMatrix Class Test', () => {
|
|
|
242
241
|
expect(CSSMatrix.fromMatrix(m.toJSON())).to.deep.equal(m);
|
|
243
242
|
|
|
244
243
|
try {
|
|
245
|
-
// @ts-
|
|
244
|
+
// @ts-expect-error
|
|
246
245
|
CSSMatrix.fromString(source);
|
|
247
246
|
} catch (err) {
|
|
248
247
|
expect(err).to.be.instanceOf(TypeError);
|
|
@@ -276,24 +275,25 @@ describe('DOMMatrix Class Test', () => {
|
|
|
276
275
|
const str = testSamples[test];
|
|
277
276
|
const css = new CSSMatrix(str);
|
|
278
277
|
const dom = new DOMMatrix(str);
|
|
278
|
+
const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
|
|
279
|
+
const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
|
|
279
280
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
$el[0].style.transform = dom.toString();
|
|
285
|
-
});
|
|
286
|
-
cy.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
|
|
287
|
-
|
|
288
|
-
expect(Array.from(css.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6))
|
|
289
|
-
.to.deep.equal(Array.from(dom.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6));
|
|
290
|
-
|
|
291
|
-
cy.wrap(css).as('css')
|
|
292
|
-
.log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`')
|
|
293
|
-
.get('@css').its('isIdentity').should((isIdentity) => expect(isIdentity).to.equal(dom.isIdentity))
|
|
294
|
-
.get('@css').its('is2D').should((test === 'rotate3d1' ? 'not.equal' : 'equal'), dom.is2D);
|
|
295
|
-
});
|
|
296
|
-
})
|
|
281
|
+
cssDiv.style.transform = css.toString();
|
|
282
|
+
domDiv.style.transform = dom.toString();
|
|
283
|
+
|
|
284
|
+
console.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
|
|
297
285
|
|
|
286
|
+
expect(Array.from(css.toFloat32Array()).map(roundTo4))
|
|
287
|
+
.to.deep.equal(Array.from(dom.toFloat32Array()).map(roundTo4));
|
|
298
288
|
|
|
299
|
-
|
|
289
|
+
console.log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`');
|
|
290
|
+
|
|
291
|
+
expect(css.isIdentity).to.equal(dom.isIdentity)
|
|
292
|
+
if (test === 'rotate3d1') {
|
|
293
|
+
expect(css.is2D).to.not.equal(dom.is2D)
|
|
294
|
+
} else {
|
|
295
|
+
expect(css.is2D).to.equal(dom.is2D)
|
|
296
|
+
}
|
|
297
|
+
})
|
|
298
|
+
})
|
|
299
|
+
});
|
|
@@ -1,35 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<meta
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
1
|
+
export const getExampleDOM = () => {
|
|
2
|
+
// const CSS = await fetch("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css").then(r => r.text());
|
|
3
|
+
// This is just a raw example of setting up some DOM
|
|
4
|
+
// that we can interact with. Swap this with your UI
|
|
5
|
+
// framework of choice 😉
|
|
6
|
+
// const div = document.createElement('div');
|
|
7
|
+
const HTML = document.documentElement;
|
|
8
|
+
HTML.innerHTML =
|
|
9
|
+
`<head>
|
|
10
|
+
<meta charset="UTF-8">
|
|
11
|
+
<title>DOMMatrix Testing Page</title>
|
|
12
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
|
|
13
|
+
<style>
|
|
14
|
+
.box {height: 200px;}
|
|
15
|
+
#dom, #css {transition: transform 0.5s ease;}
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<bo<body class="container">
|
|
19
|
+
<h1 class="mt-3 mt-md-5"><a class="text-decoration-none" href="https://github.com/thednp/DOMMatrix">DOMMatrix Shim Test</a></h1>
|
|
20
|
+
|
|
21
|
+
<div class="row">
|
|
22
|
+
<div id="css" class="col-12 col-md-6">
|
|
23
|
+
<div class="box bg-primary text-white p-3 my-3 text-center align-self-center rounded">
|
|
24
|
+
<b>CSSMatrix</b><br><span class="row"></span>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<div id="dom" class="col-12 col-md-6">
|
|
28
|
+
<div class="box bg-secondary text-white p-3 my-3 text-center align-self-center rounded">
|
|
29
|
+
<b>DOMMatrix</b><br><span class="row"></span>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
</body>
|
|
35
|
+
`;
|
|
36
|
+
|
|
37
|
+
return HTML;
|
|
38
|
+
};
|
|
File without changes
|
package/tsconfig.json
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
// https://janessagarrow.com/blog/typescript-and-esbuild/
|
|
3
3
|
"compilerOptions": {
|
|
4
4
|
"lib": ["DOM", "ESNext", "DOM.Iterable"],
|
|
5
|
-
|
|
5
|
+
// "types": ["vite", "vite/client", "cypress"],
|
|
6
6
|
"rootDir": "./src",
|
|
7
7
|
"baseUrl": "./",
|
|
8
8
|
"module": "ESNext",
|
|
9
9
|
"target": "ESNext",
|
|
10
|
-
"moduleResolution": "
|
|
10
|
+
"moduleResolution": "Bundler",
|
|
11
11
|
"allowJs": true,
|
|
12
12
|
"forceConsistentCasingInFileNames": true,
|
|
13
13
|
"useDefineForClassFields": true,
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"checkJs": true
|
|
26
26
|
},
|
|
27
27
|
"include": ["src/*"],
|
|
28
|
-
"exclude": ["node_modules", "experiments", "coverage"]
|
|
28
|
+
"exclude": ["node_modules", "experiments", "coverage"]
|
|
29
29
|
}
|
package/vite.config.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { defineConfig } from "vitest/config";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
test: {
|
|
6
|
+
globals: true,
|
|
7
|
+
coverage: {
|
|
8
|
+
provider: "istanbul",
|
|
9
|
+
reporter: ["html", "text", "lcov"],
|
|
10
|
+
enabled: true,
|
|
11
|
+
include: ["src/**/*.{ts,tsx}"],
|
|
12
|
+
},
|
|
13
|
+
browser: {
|
|
14
|
+
provider: 'preview', // or 'webdriverio'
|
|
15
|
+
enabled: true,
|
|
16
|
+
headless: false,
|
|
17
|
+
name: 'chromium', // browser name is required
|
|
18
|
+
// enableUI: true
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
});
|
package/vitest.config.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { defineConfig } from "vitest/config";
|
|
2
|
+
|
|
3
|
+
export default defineConfig({
|
|
4
|
+
test: {
|
|
5
|
+
globals: true,
|
|
6
|
+
coverage: {
|
|
7
|
+
provider: "istanbul",
|
|
8
|
+
reporter: ["html", "text", "lcov"],
|
|
9
|
+
enabled: true,
|
|
10
|
+
include: ["src/**/*.{ts,tsx}"],
|
|
11
|
+
},
|
|
12
|
+
browser: {
|
|
13
|
+
provider: 'playwright', // or 'webdriverio'
|
|
14
|
+
enabled: true,
|
|
15
|
+
headless: true,
|
|
16
|
+
name: 'chromium', // browser name is required
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
});
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
// sources
|
|
2
|
-
// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
|
|
3
|
-
'use strict';
|
|
4
|
-
import esbuild from 'esbuild';
|
|
5
|
-
import { promises } from 'fs';
|
|
6
|
-
import { createInstrumenter } from 'istanbul-lib-instrument';
|
|
7
|
-
import { extname, sep } from 'path';
|
|
8
|
-
import tsCompile from './tsCompile';
|
|
9
|
-
|
|
10
|
-
// import Cypress settings
|
|
11
|
-
const sourceFolder = 'src';
|
|
12
|
-
const [name] = process.cwd().split(sep).slice(-1);
|
|
13
|
-
|
|
14
|
-
const sourceFilter = `${name}${sep}${sourceFolder}`;
|
|
15
|
-
const instrumenter = createInstrumenter({
|
|
16
|
-
compact: false,
|
|
17
|
-
esModules: true,
|
|
18
|
-
preserveComments: true,
|
|
19
|
-
autoWrap: true,
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
|
|
23
|
-
return {
|
|
24
|
-
name: 'istanbul',
|
|
25
|
-
setup(build: esbuild.PluginBuild) {
|
|
26
|
-
build.onLoad(
|
|
27
|
-
{ filter: /\.(ts|tsx)$/ },
|
|
28
|
-
async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
|
|
29
|
-
|
|
30
|
-
if (!path.includes(sourceFilter)) {
|
|
31
|
-
// console.log("> compiling typescript %s for output build", path);
|
|
32
|
-
const contents = await promises.readFile(path, 'utf8');
|
|
33
|
-
return {
|
|
34
|
-
contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// console.log("🧡 instrumenting %s for output coverage", path);
|
|
39
|
-
const { outputText, sourceMap } = tsCompile(path);
|
|
40
|
-
|
|
41
|
-
return {
|
|
42
|
-
contents: instrumenter.instrumentSync(outputText, path, sourceMap),
|
|
43
|
-
};
|
|
44
|
-
},
|
|
45
|
-
);
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export default createEsbuildIstanbulPlugin;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
// compile.ts
|
|
2
|
-
import TypeScript from 'typescript';
|
|
3
|
-
import { basename } from 'path';
|
|
4
|
-
import { RawSourceMap } from 'source-map';
|
|
5
|
-
import { readFileSync } from 'fs';
|
|
6
|
-
|
|
7
|
-
export default function tsCompile(
|
|
8
|
-
path: string,
|
|
9
|
-
ops?: Partial<TypeScript.TranspileOptions>,
|
|
10
|
-
): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
|
|
11
|
-
// Default options -- you could also perform a merge, or use the project tsconfig.json
|
|
12
|
-
const options: TypeScript.TranspileOptions = Object.assign(
|
|
13
|
-
{
|
|
14
|
-
compilerOptions: {
|
|
15
|
-
allowJs: true,
|
|
16
|
-
esModuleInterop: true,
|
|
17
|
-
removeComments: false,
|
|
18
|
-
target: 99, // ESNext
|
|
19
|
-
allowSyntheticDefaultImports: true,
|
|
20
|
-
isolatedModules: true,
|
|
21
|
-
noEmitHelpers: true,
|
|
22
|
-
sourceMap: true,
|
|
23
|
-
} as Partial<TypeScript.CompilerOptions>,
|
|
24
|
-
},
|
|
25
|
-
ops,
|
|
26
|
-
);
|
|
27
|
-
const contents = readFileSync(path, { encoding: 'utf8' });
|
|
28
|
-
const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
|
|
29
|
-
const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
|
|
30
|
-
sourceMap.file = basename(path);
|
|
31
|
-
sourceMap.sources = [basename(path)];
|
|
32
|
-
|
|
33
|
-
return { outputText, sourceMap, sourceMapText };
|
|
34
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/// <reference types="cypress" />
|
|
2
|
-
// ***********************************************
|
|
3
|
-
// This example commands.ts shows you how to
|
|
4
|
-
// create various custom commands and overwrite
|
|
5
|
-
// existing commands.
|
|
6
|
-
//
|
|
7
|
-
// For more comprehensive examples of custom
|
|
8
|
-
// commands please read more here:
|
|
9
|
-
// https://on.cypress.io/custom-commands
|
|
10
|
-
// ***********************************************
|
|
11
|
-
//
|
|
12
|
-
//
|
|
13
|
-
// -- This is a parent command --
|
|
14
|
-
// Cypress.Commands.add('login', (email, password) => { ... })
|
|
15
|
-
//
|
|
16
|
-
//
|
|
17
|
-
// -- This is a child command --
|
|
18
|
-
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
// -- This is a dual command --
|
|
22
|
-
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
|
23
|
-
//
|
|
24
|
-
//
|
|
25
|
-
// -- This will overwrite an existing command --
|
|
26
|
-
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
|
27
|
-
//
|
|
28
|
-
// declare global {
|
|
29
|
-
// namespace Cypress {
|
|
30
|
-
// interface Chainable {
|
|
31
|
-
// login(email: string, password: string): Chainable<void>
|
|
32
|
-
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
|
33
|
-
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
|
34
|
-
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
|
35
|
-
// }
|
|
36
|
-
// }
|
|
37
|
-
// }
|
package/cypress/support/e2e.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
// ***********************************************************
|
|
2
|
-
// This example support/e2e.ts is processed and
|
|
3
|
-
// loaded automatically before your test files.
|
|
4
|
-
//
|
|
5
|
-
// This is a great place to put global configuration and
|
|
6
|
-
// behavior that modifies Cypress.
|
|
7
|
-
//
|
|
8
|
-
// You can change the location of this file or turn off
|
|
9
|
-
// automatically serving support files with the
|
|
10
|
-
// 'supportFile' configuration option.
|
|
11
|
-
//
|
|
12
|
-
// You can read more here:
|
|
13
|
-
// https://on.cypress.io/configuration
|
|
14
|
-
// ***********************************************************
|
|
15
|
-
|
|
16
|
-
// Import commands.js using ES2015 syntax:
|
|
17
|
-
import "./commands";
|
|
18
|
-
|
|
19
|
-
// Alternatively you can use CommonJS syntax:
|
|
20
|
-
// require('./commands')
|
|
21
|
-
import "@cypress/code-coverage/support";
|