@rindo/core 2.17.4 → 2.18.1
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/cli/index.cjs +98 -35
- package/cli/index.js +98 -35
- package/cli/package.json +1 -1
- package/compiler/lib.dom.d.ts +620 -89
- package/compiler/lib.dom.iterable.d.ts +27 -3
- package/compiler/lib.es2015.core.d.ts +3 -3
- package/compiler/lib.es2015.iterable.d.ts +2 -1
- package/compiler/lib.es2015.reflect.d.ts +1 -1
- package/compiler/lib.es2020.bigint.d.ts +7 -5
- package/compiler/lib.es2020.d.ts +2 -0
- package/compiler/lib.es2020.date.d.ts +44 -0
- package/compiler/lib.es2020.intl.d.ts +51 -11
- package/compiler/lib.es2020.number.d.ts +30 -0
- package/compiler/lib.es2021.intl.d.ts +106 -4
- package/compiler/lib.es2022.array.d.ts +123 -0
- package/compiler/lib.es2022.d.ts +26 -0
- package/compiler/lib.es2022.error.d.ts +75 -0
- package/compiler/lib.es2022.full.d.ts +25 -0
- package/compiler/lib.es2022.intl.d.ts +111 -0
- package/compiler/lib.es2022.object.d.ts +28 -0
- package/compiler/lib.es2022.string.d.ts +27 -0
- package/compiler/lib.es5.d.ts +25 -19
- package/compiler/lib.esnext.d.ts +1 -1
- package/compiler/lib.esnext.intl.d.ts +4 -1
- package/compiler/lib.webworker.d.ts +236 -40
- package/compiler/lib.webworker.iterable.d.ts +10 -3
- package/compiler/package.json +1 -1
- package/compiler/rindo.js +805 -931
- package/compiler/rindo.min.js +2 -2
- package/compiler/sys/in-memory-fs.d.ts +218 -0
- package/dependencies.json +10 -1
- package/dev-server/client/index.js +1 -1
- package/dev-server/client/package.json +1 -1
- package/dev-server/connector.html +2 -2
- package/dev-server/index.js +1 -1
- package/dev-server/package.json +1 -1
- package/dev-server/server-process.js +12 -12
- package/internal/app-data/package.json +1 -1
- package/internal/client/css-shim.js +1 -1
- package/internal/client/dom.js +1 -1
- package/internal/client/index.js +338 -158
- package/internal/client/package.json +1 -1
- package/internal/client/patch-browser.js +1 -1
- package/internal/client/patch-esm.js +1 -1
- package/internal/client/shadow-css.js +1 -1
- package/internal/hydrate/package.json +1 -1
- package/internal/hydrate/runner.d.ts +1 -1
- package/internal/package.json +1 -1
- package/internal/rindo-private.d.ts +2 -106
- package/internal/rindo-public-compiler.d.ts +44 -10
- package/internal/testing/package.json +1 -1
- package/mock-doc/index.cjs +77 -62
- package/mock-doc/index.d.ts +13 -12
- package/mock-doc/index.js +77 -62
- package/mock-doc/package.json +1 -1
- package/package.json +10 -12
- package/readme.md +44 -31
- package/screenshot/compare/build/p-f4745c2f.entry.js +1 -1
- package/screenshot/index.js +10 -10
- package/screenshot/package.json +1 -1
- package/sys/node/autoprefixer.js +5 -5
- package/sys/node/glob.js +1 -1
- package/sys/node/graceful-fs.js +1 -1
- package/sys/node/index.js +2 -2
- package/sys/node/package.json +1 -1
- package/sys/node/worker.js +1 -1
- package/testing/index.js +130 -295
- package/testing/package.json +1 -1
- package/testing/testing-utils.d.ts +5 -4
package/readme.md
CHANGED
|
@@ -9,49 +9,53 @@
|
|
|
9
9
|
</h1>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
12
|
-
A compiler for generating <a href="https://www.webcomponents.org/introduction">Web Components</a>
|
|
12
|
+
A compiler for generating <a href="https://www.webcomponents.org/introduction" target="_blank" rel="noopener noref">Web Components</a>, built by the <a href="https://family-js.web.app/">Family team</a>.
|
|
13
|
+
</p>
|
|
14
|
+
<p align="center">
|
|
15
|
+
Rindo allows developers to use technologies like TypeScript and JSX to define components, then generate 100% standards-based Web Components that run on both <a href="https://rindojs.web.app/docs/browser-support" target="_blank" rel="noopener noref">modern browsers and legacy browsers</a>
|
|
13
16
|
</p>
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
To create a new project using an interactive cli, run:
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm init rindo
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
To start developing your new Rindo project, run:
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npm start
|
|
35
|
-
```
|
|
18
|
+
<p align="center">
|
|
19
|
+
<a href="https://www.npmjs.com/package/@rindo/core">
|
|
20
|
+
<img src="https://img.shields.io/npm/v/@rindo/core.svg" alt="RindoJS is released under the MIT license." /></a>
|
|
21
|
+
<a href="https://github.com/familyjs/rindo/blob/main/LICENSE.md">
|
|
22
|
+
<img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="RindoJS is released under the MIT license." />
|
|
23
|
+
</a>
|
|
24
|
+
<a href="https://github.com/familyjs/rindo/blob/main/.github/CONTRIBUTING.md">
|
|
25
|
+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
|
26
|
+
</a>
|
|
27
|
+
</p>
|
|
36
28
|
|
|
37
|
-
|
|
29
|
+
<h2 align="center">
|
|
30
|
+
<a href="https://rindojs.web.app/docs/getting-started#starting-a-new-project">Quick Start</a>
|
|
31
|
+
<span> · </span>
|
|
32
|
+
<a href="https://rindojs.web.app/docs/introduction">Documentation</a>
|
|
33
|
+
<span> · </span>
|
|
34
|
+
<a href="https://github.com/familyjs/rindo/blob/main/.github/CONTRIBUTING.md">Contribute</a>
|
|
35
|
+
</h2>
|
|
38
36
|
|
|
39
|
-
|
|
37
|
+
### Getting Started
|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
Start a new project by following our quick [Getting Started guide](https://rindojs.web.app/docs/getting-started).
|
|
40
|
+
We would love to hear from you!
|
|
41
|
+
If you have any feedback or run into issues using Rindo, please file an [issue](https://github.com/familyjs/rindo/issues/new) on this repository.
|
|
42
42
|
|
|
43
|
+
### Examples
|
|
44
|
+
A Rindo component looks a lot like a class-based React component, with the addition of TypeScript decorators:
|
|
43
45
|
```tsx
|
|
44
46
|
import { Component, Prop, h } from '@rindo/core';
|
|
45
47
|
|
|
46
48
|
@Component({
|
|
47
|
-
tag: 'my-component',
|
|
48
|
-
styleUrl: 'my-component.css'
|
|
49
|
+
tag: 'my-component', // the name of the component's custom HTML tag
|
|
50
|
+
styleUrl: 'my-component.css', // css styles to apply to the component
|
|
51
|
+
shadow: true, // this component uses the ShadowDOM
|
|
49
52
|
})
|
|
50
53
|
export class MyComponent {
|
|
51
|
-
|
|
54
|
+
// The component accepts two arguments:
|
|
52
55
|
@Prop() first: string;
|
|
53
56
|
@Prop() last: string;
|
|
54
57
|
|
|
58
|
+
//The following HTML is rendered when our component is used
|
|
55
59
|
render() {
|
|
56
60
|
return (
|
|
57
61
|
<div>
|
|
@@ -62,13 +66,22 @@ export class MyComponent {
|
|
|
62
66
|
}
|
|
63
67
|
```
|
|
64
68
|
|
|
65
|
-
|
|
69
|
+
The component above can be used like any other HTML element:
|
|
66
70
|
|
|
67
71
|
```html
|
|
68
72
|
<my-component first="Rindo" last="JS"></my-component>
|
|
69
73
|
```
|
|
70
74
|
|
|
71
|
-
|
|
75
|
+
Since Rindo generates web components, they work in any major framework or with no framework at all.
|
|
76
|
+
In many cases, Rindo can be used as a drop in replacement for traditional frontend framework, though using it as such is certainly not required.
|
|
77
|
+
|
|
78
|
+
### Contributing
|
|
79
|
+
|
|
80
|
+
Thanks for your interest in contributing!
|
|
81
|
+
Please take a moment to read up on our guidelines for [contributing](https://github.com/familyjs/rindo/blob/main/.github/CONTRIBUTING.md).
|
|
82
|
+
Please note that this project is released with a [Contributor Code of Conduct](https://github.com/familyjs/rindo/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
|
|
83
|
+
|
|
84
|
+
### Thanks
|
|
72
85
|
Rindo's internal testing suite is supported by the [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
|
|
73
86
|
<br>
|
|
74
|
-
<a
|
|
87
|
+
<a href="https://www.browserstack.com/" target="_blank" rel="noopener noref"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,d as s,h as i,g as e}from"./p-fbbae598.js";import{s as n}from"./p-081b0641.js";const h={threshold:.1,includeAA:!1,alpha:.1,aaColor:[255,255,0],diffColor:[255,0,0],diffColorAlt:null,diffMask:!1};function o(t){return ArrayBuffer.isView(t)&&1===t.constructor.BYTES_PER_ELEMENT}function r(t,s,i,e,n,h){const o=Math.max(s-1,0),r=Math.max(i-1,0),c=Math.min(s+1,e-1),d=Math.min(i+1,n-1),f=4*(i*e+s);let u,p,m,g,w=s===o||s===c||i===r||i===d?1:0,y=0,v=0;for(let n=o;n<=c;n++)for(let h=r;h<=d;h++){if(n===s&&h===i)continue;const o=l(t,t,f,4*(h*e+n),!0);if(0===o){if(w++,w>2)return!1}else o<y?(y=o,u=n,p=h):o>v&&(v=o,m=n,g=h)}return 0!==y&&0!==v&&(a(t,u,p,e,n)&&a(h,u,p,e,n)||a(t,m,g,e,n)&&a(h,m,g,e,n))}function a(t,s,i,e,n){const h=Math.max(s-1,0),o=Math.max(i-1,0),r=Math.min(s+1,e-1),a=Math.min(i+1,n-1),l=4*(i*e+s);let c=s===h||s===r||i===o||i===a?1:0;for(let n=h;n<=r;n++)for(let h=o;h<=a;h++){if(n===s&&h===i)continue;const o=4*(h*e+n);if(t[l]===t[o]&&t[l+1]===t[o+1]&&t[l+2]===t[o+2]&&t[l+3]===t[o+3]&&c++,c>2)return!0}return!1}function l(t,s,i,e,n){let h=t[i+0],o=t[i+1],r=t[i+2],a=t[i+3],l=s[e+0],p=s[e+1],m=s[e+2],g=s[e+3];if(a===g&&h===l&&o===p&&r===m)return 0;a<255&&(a/=255,h=u(h,a),o=u(o,a),r=u(r,a)),g<255&&(g/=255,l=u(l,g),p=u(p,g),m=u(m,g));const w=c(h,o,r),y=c(l,p,m),v=w-y;if(n)return v;const b=d(h,o,r)-d(l,p,m),x=f(h,o,r)-f(l,p,m),M=.5053*v*v+.299*b*b+.1957*x*x;return w>y?-M:M}function c(t,s,i){return.29889531*t+.58662247*s+.11448223*i}function d(t,s,i){return.59597799*t-.2741761*s-.32180189*i}function f(t,s,i){return.21147017*t-.52261711*s+.31114694*i}function u(t,s){return 255+(t-255)*s}function p(t,s,i,e,n){t[s+0]=i,t[s+1]=e,t[s+2]=n,t[s+3]=255}function m(t,s,i,e){const n=u(c(t[s+0],t[s+1],t[s+2]),i*t[s+3]/255);p(e,s,n,n,n)}function g(t,s,i){if(y.has(s))return void i(y.get(s));if(w.has(s))return void w.get(s).push(i);w.set(s,[i]);const e=document.createElement("script");e.src=`${t}screenshot_${s}.js`,document.head.appendChild(e)}window.loadScreenshot=(t,s)=>{const i=w.get(t);i&&(i.forEach(t=>t(s)),w.delete(t)),y.set(t,s)};const w=new Map,y=new Map;class v{constructor(i){t(this,i),this.imageASrc=null,this.imageBSrc=null,this.imageAClass="is-loading",this.imageBClass="is-loading",this.canvasClass="is-loading",this.imagesLoaded=new Set,this.isImageALoaded=!1,this.isImageBLoaded=!1,this.isMismatchInitialized=!1,this.hasCalculatedMismatch=!1,this.compareLoaded=s(this,"compareLoaded",7)}componentWillLoad(){this.loadScreenshots()}componentWillUpdate(){this.loadScreenshots()}loadScreenshots(){if(this.show&&this.diff.hasIntersected)return this.diff.identical?(this.imageASrc=this.imagesUrl+this.diff.imageA,this.isImageALoaded=!0,this.imageAClass="has-loaded",this.imageBSrc=this.imagesUrl+this.diff.imageB,this.isImageBLoaded=!0,void(this.imageBClass="has-loaded")):void(this.isMismatchInitialized||(this.isMismatchInitialized=!0,null!=this.jsonpUrl?(null!=this.diff.imageA&&g(this.jsonpUrl,this.diff.imageA,t=>{this.imageASrc=t}),null!=this.diff.imageB&&g(this.jsonpUrl,this.diff.imageB,t=>{this.imageBSrc=t})):(this.imageASrc=this.imagesUrl+this.diff.imageA,this.imageBSrc=this.imagesUrl+this.diff.imageB)))}async compareImages(){const t=this.diff;this.isImageALoaded&&this.isImageBLoaded&&!this.hasCalculatedMismatch&&t.comparable&&(this.hasCalculatedMismatch=!0,t.mismatchedPixels=await function(t,s,i,e,n,a){let c=-1;try{const d=document.createElement("canvas");d.width=e,d.height=n;const f=document.createElement("canvas");f.width=e,f.height=n;const u=d.getContext("2d");u.drawImage(t,0,0);const g=f.getContext("2d");g.drawImage(s,0,0);const w=document.createElement("canvas").getContext("2d");w.drawImage(t,0,0),w.getImageData(0,0,e,n);const y=u.getImageData(0,0,e,n).data,v=g.getImageData(0,0,e,n).data,b=i.getContext("2d"),x=b.createImageData(e,d.height);c=function(t,s,i,e,n,a){if(!o(t)||!o(s)||i&&!o(i))throw new Error("Image data: Uint8Array, Uint8ClampedArray or Buffer expected.");if(t.length!==s.length||i&&i.length!==t.length)throw new Error("Image sizes do not match.");if(t.length!==e*n*4)throw new Error("Image data size does not match width/height.");a=Object.assign({},h,a);const c=e*n,d=new Uint32Array(t.buffer,t.byteOffset,c),f=new Uint32Array(s.buffer,s.byteOffset,c);let u=!0;for(let t=0;t<c;t++)if(d[t]!==f[t]){u=!1;break}if(u){if(i&&!a.diffMask)for(let s=0;s<c;s++)m(t,4*s,a.alpha,i);return 0}const g=35215*a.threshold*a.threshold;let w=0;for(let h=0;h<n;h++)for(let o=0;o<e;o++){const c=4*(h*e+o),d=l(t,s,c,c);Math.abs(d)>g?a.includeAA||!r(t,o,h,e,n,s)&&!r(s,o,h,e,n,t)?(i&&p(i,c,...d<0&&a.diffColorAlt||a.diffColor),w++):i&&!a.diffMask&&p(i,c,...a.aaColor):i&&(a.diffMask||m(t,c,a.alpha,i))}return w}(y,v,x.data,e,n,{threshold:a}),b.putImageData(x,0,0)}catch(t){console.error(t)}return c}(this.imageA,this.imageB,this.canvas,Math.round(t.width*t.deviceScaleFactor),Math.round(t.height*t.deviceScaleFactor),t.threshold),this.canvasClass="has-loaded",n(t.imageA,t.imageB,t.mismatchedPixels,t.threshold),this.compareLoaded.emit(t))}render(){const t=this.diff,s={width:t.width+"px",height:t.height+"px"};return[i("compare-cell",null,null!=t.imageA?i("a",{href:this.imagesUrl+t.imageA,target:"_blank"},i("img",{src:this.imageASrc,class:this.imageAClass,style:s,onLoad:this.diff.identical?null:()=>{this.isImageALoaded=!0,this.imageAClass="has-loaded",this.compareImages()},ref:t=>this.imageA=t})):i("img",{style:s,class:"is-loading"})),i("compare-cell",null,null!=t.imageB?i("a",{href:this.imagesUrl+t.imageB,target:"_blank"},i("img",{src:this.imageBSrc,class:this.imageBClass,style:s,onLoad:this.diff.identical?null:()=>{this.isImageBLoaded=!0,this.imageBClass="has-loaded",this.compareImages()},ref:t=>this.imageB=t})):i("img",{style:s,class:"is-loading"})),i("compare-cell",null,this.diff.identical?i("img",{style:s,src:this.imageASrc}):i("canvas",{width:Math.round(t.width*t.deviceScaleFactor),height:Math.round(t.height*t.deviceScaleFactor),class:this.canvasClass,style:s,hidden:!t.comparable,ref:t=>this.canvas=t})),i("compare-cell",null,i("compare-analysis",{aId:this.aId,bId:this.bId,mismatchedPixels:this.diff.mismatchedPixels,diff:this.diff}))]}get elm(){return e(this)}}v.style="compare-row img,compare-row canvas{display:block;box-shadow:var(--screenshot-box-shadow);border-radius:var(--screenshot-border-radius)}compare-row a{display:block}.is-loading{visibility:hidden}";class b{constructor(s){t(this,s)}render(){if(!this.a||!this.b||!this.diffs)return;let t=0;this.diffs.forEach(s=>{s.width>t&&(t=s.width)}),t-=6;const s={width:t+"px"};return[i("th-cell",null,i("div",{style:s},i("a",{href:this.a.url,target:"_blank"},this.a.message))),i("th-cell",null,i("div",{style:s},i("a",{href:this.b.url,target:"_blank"},this.b.message))),i("th-cell",null,i("div",{style:s},i("a",{href:`https://github.com/
|
|
1
|
+
import{r as t,d as s,h as i,g as e}from"./p-fbbae598.js";import{s as n}from"./p-081b0641.js";const h={threshold:.1,includeAA:!1,alpha:.1,aaColor:[255,255,0],diffColor:[255,0,0],diffColorAlt:null,diffMask:!1};function o(t){return ArrayBuffer.isView(t)&&1===t.constructor.BYTES_PER_ELEMENT}function r(t,s,i,e,n,h){const o=Math.max(s-1,0),r=Math.max(i-1,0),c=Math.min(s+1,e-1),d=Math.min(i+1,n-1),f=4*(i*e+s);let u,p,m,g,w=s===o||s===c||i===r||i===d?1:0,y=0,v=0;for(let n=o;n<=c;n++)for(let h=r;h<=d;h++){if(n===s&&h===i)continue;const o=l(t,t,f,4*(h*e+n),!0);if(0===o){if(w++,w>2)return!1}else o<y?(y=o,u=n,p=h):o>v&&(v=o,m=n,g=h)}return 0!==y&&0!==v&&(a(t,u,p,e,n)&&a(h,u,p,e,n)||a(t,m,g,e,n)&&a(h,m,g,e,n))}function a(t,s,i,e,n){const h=Math.max(s-1,0),o=Math.max(i-1,0),r=Math.min(s+1,e-1),a=Math.min(i+1,n-1),l=4*(i*e+s);let c=s===h||s===r||i===o||i===a?1:0;for(let n=h;n<=r;n++)for(let h=o;h<=a;h++){if(n===s&&h===i)continue;const o=4*(h*e+n);if(t[l]===t[o]&&t[l+1]===t[o+1]&&t[l+2]===t[o+2]&&t[l+3]===t[o+3]&&c++,c>2)return!0}return!1}function l(t,s,i,e,n){let h=t[i+0],o=t[i+1],r=t[i+2],a=t[i+3],l=s[e+0],p=s[e+1],m=s[e+2],g=s[e+3];if(a===g&&h===l&&o===p&&r===m)return 0;a<255&&(a/=255,h=u(h,a),o=u(o,a),r=u(r,a)),g<255&&(g/=255,l=u(l,g),p=u(p,g),m=u(m,g));const w=c(h,o,r),y=c(l,p,m),v=w-y;if(n)return v;const b=d(h,o,r)-d(l,p,m),x=f(h,o,r)-f(l,p,m),M=.5053*v*v+.299*b*b+.1957*x*x;return w>y?-M:M}function c(t,s,i){return.29889531*t+.58662247*s+.11448223*i}function d(t,s,i){return.59597799*t-.2741761*s-.32180189*i}function f(t,s,i){return.21147017*t-.52261711*s+.31114694*i}function u(t,s){return 255+(t-255)*s}function p(t,s,i,e,n){t[s+0]=i,t[s+1]=e,t[s+2]=n,t[s+3]=255}function m(t,s,i,e){const n=u(c(t[s+0],t[s+1],t[s+2]),i*t[s+3]/255);p(e,s,n,n,n)}function g(t,s,i){if(y.has(s))return void i(y.get(s));if(w.has(s))return void w.get(s).push(i);w.set(s,[i]);const e=document.createElement("script");e.src=`${t}screenshot_${s}.js`,document.head.appendChild(e)}window.loadScreenshot=(t,s)=>{const i=w.get(t);i&&(i.forEach(t=>t(s)),w.delete(t)),y.set(t,s)};const w=new Map,y=new Map;class v{constructor(i){t(this,i),this.imageASrc=null,this.imageBSrc=null,this.imageAClass="is-loading",this.imageBClass="is-loading",this.canvasClass="is-loading",this.imagesLoaded=new Set,this.isImageALoaded=!1,this.isImageBLoaded=!1,this.isMismatchInitialized=!1,this.hasCalculatedMismatch=!1,this.compareLoaded=s(this,"compareLoaded",7)}componentWillLoad(){this.loadScreenshots()}componentWillUpdate(){this.loadScreenshots()}loadScreenshots(){if(this.show&&this.diff.hasIntersected)return this.diff.identical?(this.imageASrc=this.imagesUrl+this.diff.imageA,this.isImageALoaded=!0,this.imageAClass="has-loaded",this.imageBSrc=this.imagesUrl+this.diff.imageB,this.isImageBLoaded=!0,void(this.imageBClass="has-loaded")):void(this.isMismatchInitialized||(this.isMismatchInitialized=!0,null!=this.jsonpUrl?(null!=this.diff.imageA&&g(this.jsonpUrl,this.diff.imageA,t=>{this.imageASrc=t}),null!=this.diff.imageB&&g(this.jsonpUrl,this.diff.imageB,t=>{this.imageBSrc=t})):(this.imageASrc=this.imagesUrl+this.diff.imageA,this.imageBSrc=this.imagesUrl+this.diff.imageB)))}async compareImages(){const t=this.diff;this.isImageALoaded&&this.isImageBLoaded&&!this.hasCalculatedMismatch&&t.comparable&&(this.hasCalculatedMismatch=!0,t.mismatchedPixels=await function(t,s,i,e,n,a){let c=-1;try{const d=document.createElement("canvas");d.width=e,d.height=n;const f=document.createElement("canvas");f.width=e,f.height=n;const u=d.getContext("2d");u.drawImage(t,0,0);const g=f.getContext("2d");g.drawImage(s,0,0);const w=document.createElement("canvas").getContext("2d");w.drawImage(t,0,0),w.getImageData(0,0,e,n);const y=u.getImageData(0,0,e,n).data,v=g.getImageData(0,0,e,n).data,b=i.getContext("2d"),x=b.createImageData(e,d.height);c=function(t,s,i,e,n,a){if(!o(t)||!o(s)||i&&!o(i))throw new Error("Image data: Uint8Array, Uint8ClampedArray or Buffer expected.");if(t.length!==s.length||i&&i.length!==t.length)throw new Error("Image sizes do not match.");if(t.length!==e*n*4)throw new Error("Image data size does not match width/height.");a=Object.assign({},h,a);const c=e*n,d=new Uint32Array(t.buffer,t.byteOffset,c),f=new Uint32Array(s.buffer,s.byteOffset,c);let u=!0;for(let t=0;t<c;t++)if(d[t]!==f[t]){u=!1;break}if(u){if(i&&!a.diffMask)for(let s=0;s<c;s++)m(t,4*s,a.alpha,i);return 0}const g=35215*a.threshold*a.threshold;let w=0;for(let h=0;h<n;h++)for(let o=0;o<e;o++){const c=4*(h*e+o),d=l(t,s,c,c);Math.abs(d)>g?a.includeAA||!r(t,o,h,e,n,s)&&!r(s,o,h,e,n,t)?(i&&p(i,c,...d<0&&a.diffColorAlt||a.diffColor),w++):i&&!a.diffMask&&p(i,c,...a.aaColor):i&&(a.diffMask||m(t,c,a.alpha,i))}return w}(y,v,x.data,e,n,{threshold:a}),b.putImageData(x,0,0)}catch(t){console.error(t)}return c}(this.imageA,this.imageB,this.canvas,Math.round(t.width*t.deviceScaleFactor),Math.round(t.height*t.deviceScaleFactor),t.threshold),this.canvasClass="has-loaded",n(t.imageA,t.imageB,t.mismatchedPixels,t.threshold),this.compareLoaded.emit(t))}render(){const t=this.diff,s={width:t.width+"px",height:t.height+"px"};return[i("compare-cell",null,null!=t.imageA?i("a",{href:this.imagesUrl+t.imageA,target:"_blank"},i("img",{src:this.imageASrc,class:this.imageAClass,style:s,onLoad:this.diff.identical?null:()=>{this.isImageALoaded=!0,this.imageAClass="has-loaded",this.compareImages()},ref:t=>this.imageA=t})):i("img",{style:s,class:"is-loading"})),i("compare-cell",null,null!=t.imageB?i("a",{href:this.imagesUrl+t.imageB,target:"_blank"},i("img",{src:this.imageBSrc,class:this.imageBClass,style:s,onLoad:this.diff.identical?null:()=>{this.isImageBLoaded=!0,this.imageBClass="has-loaded",this.compareImages()},ref:t=>this.imageB=t})):i("img",{style:s,class:"is-loading"})),i("compare-cell",null,this.diff.identical?i("img",{style:s,src:this.imageASrc}):i("canvas",{width:Math.round(t.width*t.deviceScaleFactor),height:Math.round(t.height*t.deviceScaleFactor),class:this.canvasClass,style:s,hidden:!t.comparable,ref:t=>this.canvas=t})),i("compare-cell",null,i("compare-analysis",{aId:this.aId,bId:this.bId,mismatchedPixels:this.diff.mismatchedPixels,diff:this.diff}))]}get elm(){return e(this)}}v.style="compare-row img,compare-row canvas{display:block;box-shadow:var(--screenshot-box-shadow);border-radius:var(--screenshot-border-radius)}compare-row a{display:block}.is-loading{visibility:hidden}";class b{constructor(s){t(this,s)}render(){if(!this.a||!this.b||!this.diffs)return;let t=0;this.diffs.forEach(s=>{s.width>t&&(t=s.width)}),t-=6;const s={width:t+"px"};return[i("th-cell",null,i("div",{style:s},i("a",{href:this.a.url,target:"_blank"},this.a.message))),i("th-cell",null,i("div",{style:s},i("a",{href:this.b.url,target:"_blank"},this.b.message))),i("th-cell",null,i("div",{style:s},i("a",{href:`https://github.com/familyjs/family/compare/${this.a.id}...${this.b.id}`,target:"_blank"},"Compare: ",this.a.id," - ",this.b.id))),i("th-cell",{class:"analysis"},i("div",null,"Analysis"))]}}b.style=":host{display:flex}th-cell{display:block;flex:1;font-weight:500;font-size:12px}th-cell div{padding-left:12px;padding-right:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}th-cell a{color:var(--font-color);text-decoration:none}th-cell a:hover{color:var(--analysis-data-color);text-decoration:underline}.analysis div{width:262px}";export{v as compare_row,b as compare_thead}
|
package/screenshot/index.js
CHANGED
|
@@ -500,18 +500,18 @@ const getEncodedRootLength = (path) => {
|
|
|
500
500
|
return 0;
|
|
501
501
|
const ch0 = path.charCodeAt(0);
|
|
502
502
|
// POSIX or UNC
|
|
503
|
-
if (ch0 === 47 /* slash */ || ch0 === 92 /* backslash */) {
|
|
503
|
+
if (ch0 === 47 /* CharacterCodes.slash */ || ch0 === 92 /* CharacterCodes.backslash */) {
|
|
504
504
|
if (path.charCodeAt(1) !== ch0)
|
|
505
505
|
return 1; // POSIX: "/" (or non-normalized "\")
|
|
506
|
-
const p1 = path.indexOf(ch0 === 47 /* slash */ ? '/' : altDirectorySeparator, 2);
|
|
506
|
+
const p1 = path.indexOf(ch0 === 47 /* CharacterCodes.slash */ ? '/' : altDirectorySeparator, 2);
|
|
507
507
|
if (p1 < 0)
|
|
508
508
|
return path.length; // UNC: "//server" or "\\server"
|
|
509
509
|
return p1 + 1; // UNC: "//server/" or "\\server\"
|
|
510
510
|
}
|
|
511
511
|
// DOS
|
|
512
|
-
if (isVolumeCharacter(ch0) && path.charCodeAt(1) === 58 /* colon */) {
|
|
512
|
+
if (isVolumeCharacter(ch0) && path.charCodeAt(1) === 58 /* CharacterCodes.colon */) {
|
|
513
513
|
const ch2 = path.charCodeAt(2);
|
|
514
|
-
if (ch2 === 47 /* slash */ || ch2 === 92 /* backslash */)
|
|
514
|
+
if (ch2 === 47 /* CharacterCodes.slash */ || ch2 === 92 /* CharacterCodes.backslash */)
|
|
515
515
|
return 3; // DOS: "c:/" or "c:\"
|
|
516
516
|
if (path.length === 2)
|
|
517
517
|
return 2; // DOS: "c:" (but not "c:d")
|
|
@@ -533,7 +533,7 @@ const getEncodedRootLength = (path) => {
|
|
|
533
533
|
isVolumeCharacter(path.charCodeAt(authorityEnd + 1))) {
|
|
534
534
|
const volumeSeparatorEnd = getFileUrlVolumeSeparatorEnd(path, authorityEnd + 2);
|
|
535
535
|
if (volumeSeparatorEnd !== -1) {
|
|
536
|
-
if (path.charCodeAt(volumeSeparatorEnd) === 47 /* slash */) {
|
|
536
|
+
if (path.charCodeAt(volumeSeparatorEnd) === 47 /* CharacterCodes.slash */) {
|
|
537
537
|
// URL: "file:///c:/", "file://localhost/c:/", "file:///c%3a/", "file://localhost/c%3a/"
|
|
538
538
|
return ~(volumeSeparatorEnd + 1);
|
|
539
539
|
}
|
|
@@ -551,15 +551,15 @@ const getEncodedRootLength = (path) => {
|
|
|
551
551
|
// relative
|
|
552
552
|
return 0;
|
|
553
553
|
};
|
|
554
|
-
const isVolumeCharacter = (charCode) => (charCode >= 97 /* a */ && charCode <= 122 /* z */) ||
|
|
555
|
-
(charCode >= 65 /* A */ && charCode <= 90 /* Z */);
|
|
554
|
+
const isVolumeCharacter = (charCode) => (charCode >= 97 /* CharacterCodes.a */ && charCode <= 122 /* CharacterCodes.z */) ||
|
|
555
|
+
(charCode >= 65 /* CharacterCodes.A */ && charCode <= 90 /* CharacterCodes.Z */);
|
|
556
556
|
const getFileUrlVolumeSeparatorEnd = (url, start) => {
|
|
557
557
|
const ch0 = url.charCodeAt(start);
|
|
558
|
-
if (ch0 === 58 /* colon */)
|
|
558
|
+
if (ch0 === 58 /* CharacterCodes.colon */)
|
|
559
559
|
return start + 1;
|
|
560
|
-
if (ch0 === 37 /* percent */ && url.charCodeAt(start + 1) === 51 /* _3 */) {
|
|
560
|
+
if (ch0 === 37 /* CharacterCodes.percent */ && url.charCodeAt(start + 1) === 51 /* CharacterCodes._3 */) {
|
|
561
561
|
const ch2 = url.charCodeAt(start + 2);
|
|
562
|
-
if (ch2 === 97 /* a */ || ch2 === 65 /* A */)
|
|
562
|
+
if (ch2 === 97 /* CharacterCodes.a */ || ch2 === 65 /* CharacterCodes.A */)
|
|
563
563
|
return start + 3;
|
|
564
564
|
}
|
|
565
565
|
return -1;
|