@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.
Files changed (69) hide show
  1. package/cli/index.cjs +98 -35
  2. package/cli/index.js +98 -35
  3. package/cli/package.json +1 -1
  4. package/compiler/lib.dom.d.ts +620 -89
  5. package/compiler/lib.dom.iterable.d.ts +27 -3
  6. package/compiler/lib.es2015.core.d.ts +3 -3
  7. package/compiler/lib.es2015.iterable.d.ts +2 -1
  8. package/compiler/lib.es2015.reflect.d.ts +1 -1
  9. package/compiler/lib.es2020.bigint.d.ts +7 -5
  10. package/compiler/lib.es2020.d.ts +2 -0
  11. package/compiler/lib.es2020.date.d.ts +44 -0
  12. package/compiler/lib.es2020.intl.d.ts +51 -11
  13. package/compiler/lib.es2020.number.d.ts +30 -0
  14. package/compiler/lib.es2021.intl.d.ts +106 -4
  15. package/compiler/lib.es2022.array.d.ts +123 -0
  16. package/compiler/lib.es2022.d.ts +26 -0
  17. package/compiler/lib.es2022.error.d.ts +75 -0
  18. package/compiler/lib.es2022.full.d.ts +25 -0
  19. package/compiler/lib.es2022.intl.d.ts +111 -0
  20. package/compiler/lib.es2022.object.d.ts +28 -0
  21. package/compiler/lib.es2022.string.d.ts +27 -0
  22. package/compiler/lib.es5.d.ts +25 -19
  23. package/compiler/lib.esnext.d.ts +1 -1
  24. package/compiler/lib.esnext.intl.d.ts +4 -1
  25. package/compiler/lib.webworker.d.ts +236 -40
  26. package/compiler/lib.webworker.iterable.d.ts +10 -3
  27. package/compiler/package.json +1 -1
  28. package/compiler/rindo.js +805 -931
  29. package/compiler/rindo.min.js +2 -2
  30. package/compiler/sys/in-memory-fs.d.ts +218 -0
  31. package/dependencies.json +10 -1
  32. package/dev-server/client/index.js +1 -1
  33. package/dev-server/client/package.json +1 -1
  34. package/dev-server/connector.html +2 -2
  35. package/dev-server/index.js +1 -1
  36. package/dev-server/package.json +1 -1
  37. package/dev-server/server-process.js +12 -12
  38. package/internal/app-data/package.json +1 -1
  39. package/internal/client/css-shim.js +1 -1
  40. package/internal/client/dom.js +1 -1
  41. package/internal/client/index.js +338 -158
  42. package/internal/client/package.json +1 -1
  43. package/internal/client/patch-browser.js +1 -1
  44. package/internal/client/patch-esm.js +1 -1
  45. package/internal/client/shadow-css.js +1 -1
  46. package/internal/hydrate/package.json +1 -1
  47. package/internal/hydrate/runner.d.ts +1 -1
  48. package/internal/package.json +1 -1
  49. package/internal/rindo-private.d.ts +2 -106
  50. package/internal/rindo-public-compiler.d.ts +44 -10
  51. package/internal/testing/package.json +1 -1
  52. package/mock-doc/index.cjs +77 -62
  53. package/mock-doc/index.d.ts +13 -12
  54. package/mock-doc/index.js +77 -62
  55. package/mock-doc/package.json +1 -1
  56. package/package.json +10 -12
  57. package/readme.md +44 -31
  58. package/screenshot/compare/build/p-f4745c2f.entry.js +1 -1
  59. package/screenshot/index.js +10 -10
  60. package/screenshot/package.json +1 -1
  61. package/sys/node/autoprefixer.js +5 -5
  62. package/sys/node/glob.js +1 -1
  63. package/sys/node/graceful-fs.js +1 -1
  64. package/sys/node/index.js +2 -2
  65. package/sys/node/package.json +1 -1
  66. package/sys/node/worker.js +1 -1
  67. package/testing/index.js +130 -295
  68. package/testing/package.json +1 -1
  69. 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
- [Rindo](https://rindojs.web.app/) is a simple compiler for generating Web Components and static site generated progressive web apps (PWA). Rindo was built by the [Navify](https://navify.web.app/) team for its next generation of performant mobile and desktop Web Components.
16
-
17
- Rindo combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It combines TypeScript, JSX, an asynchronous rendering pipeline to ensure smooth running animations and lazy-loading, to generate 100% standards-based Web Components that run on both [modern browsers and legacy browsers](https://rindojs.web.app/docs/browser-support).
18
-
19
- Rindo components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Rindo can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.
20
-
21
- Rindo also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
22
-
23
- ## Getting Started
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
- ## Creating components
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
- Rindo components are TypeScript classes with decorator metadata. The decorators themselves are purely build-time annotations so the compiler can read metadata about each component, and removed entirely for smaller efficient components.
37
+ ### Getting Started
40
38
 
41
- Create new components by creating files with a `.tsx` extension, such as `my-component.tsx`, and place them in `src/components`.
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
- To use this component, just use it like any other HTML element:
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
- ## Thanks
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 target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></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/navify/navify/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}
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}
@@ -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;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rindo/core/screenshot",
3
- "version": "2.17.4",
3
+ "version": "2.18.1",
4
4
  "description": "Rindo Screenshot.",
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",