@rindo/core 1.17.4 → 2.5.2

package/mock-doc/package.json

@@ -1,9 +1,15 @@
 {
   "name": "@rindo/core/mock-doc",
-  "version": "0.0.0-dev.20221104122636",
+  "version": "2.5.2",
   "description": "Mock window, document and DOM outside of a browser environment.",
-  "main": "index.cjs.js",
-  "module": "index.js",
-  "types": "index.d.ts",
-  "private": true
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.cjs"
+  },
+  "type": "module",
+  "private": true,
+  "sideEffects": false
 }

package/package.json

@@ -1,133 +1,132 @@
-{
-  "name": "@rindo/core",
-  "version": "1.17.4",
-  "license": "MIT",
-  "main": "internal/rindo-core/index.js",
-  "types": "internal/rindo-core/index.d.ts",
-  "bin": {
-    "rindo": "bin/rindo"
-  },
-  "files": [
-    "bin/",
-    "cli/",
-    "compiler/",
-    "dependencies.json",
-    "dev-server/",
-    "internal/",
-    "mock-doc/",
-    "screenshot/",
-    "sys/",
-    "testing/"
-  ],
-  "scripts": {
-    "start": "npm run watch",
-    "changelog": "conventional-changelog -p angular -o -i CHANGELOG.md -s",
-    "build": "node scripts && npm run tsc.prod && npm run rollup.prod.ci",
-    "build.prod": "node scripts && npm run tsc.scripts && npm run tsc.prod && npm run rollup.prod.ci",
-    "watch": "node scripts && npm run tsc && concurrently \"npm run rollup.watch\" \"npm run tsc.watch\"",
-    "release": "node scripts --release --publish --any-branch",
-    "release.prepare": "node scripts --release --prepare --any-branch",
-    "tsc": "tsc --incremental",
-    "tsc.prod": "tsc",
-    "tsc.scripts": "tsc -p scripts/tsconfig.json",
-    "tsc.watch": "tsc --incremental --watch",
-    "rollup": "rollup --config",
-    "rollup.prod": "rollup --config --config-prod",
-    "rollup.prod.ci": "rollup --config --config-prod --config-ci",
-    "rollup.watch": "rollup --watch --config",
-    "license": "node scripts --license",
-    "prettier": "prettier --write \"./src/**/*.{ts,tsx}\""
-  },
-  "dependencies": {
-    "typescript": "3.9.7"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "12.0.0",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "8.4.0",
-    "@rollup/plugin-replace": "2.3.3",
-    "@rollup/pluginutils": "3.1.0",
-    "@types/autoprefixer": "^9.7.2",
-    "@types/exit": "^0.1.31",
-    "@types/fs-extra": "^9.0.1",
-    "@types/glob": "^7.1.2",
-    "@types/graceful-fs": "^4.1.3",
-    "@types/inquirer": "7.3.0",
-    "@types/is-glob": "^4.0.1",
-    "@types/jest": "^26.0.7",
-    "@types/listr": "^0.14.2",
-    "@types/mime-types": "^2.1.0",
-    "@types/node": "^14.0.26",
-    "@types/node-fetch": "^2.5.7",
-    "@types/parse5": "^5.0.3",
-    "@types/pixelmatch": "^4.0.0",
-    "@types/pngjs": "^3.4.2",
-    "@types/prompts": "^2.0.8",
-    "@types/puppeteer": "~3.0.1",
-    "@types/semver": "^7.3.1",
-    "@types/sizzle": "^2.3.2",
-    "@types/webpack": "^4.41.21",
-    "@types/ws": "^7.2.6",
-    "ansi-colors": "4.1.1",
-    "autoprefixer": "9.8.5",
-    "concurrently": "^5.2.0",
-    "conventional-changelog-cli": "^2.0.34",
-    "core-js-builder": "~3.6.5",
-    "css": "^3.0.0",
-    "dts-bundle-generator": "~5.3.0",
-    "execa": "4.0.3",
-    "exit": "^0.1.2",
-    "fast-deep-equal": "3.1.3",
-    "fs-extra": "^9.0.1",
-    "glob": "7.1.6",
-    "graceful-fs": "~4.2.4",
-    "hash.js": "^1.1.7",
-    "inquirer": "^7.3.3",
-    "jest": "^26.1.0",
-    "jest-cli": "^26.1.0",
-    "jest-environment-node": "^26.1.0",
-    "listr": "^0.14.3",
-    "magic-string": "^0.25.7",
-    "mime-db": "^1.44.0",
-    "minimatch": "3.0.4",
-    "node-fetch": "2.6.0",
-    "open": "7.1.0",
-    "open-in-editor": "2.2.0",
-    "parse5": "6.0.1",
-    "path-browserify": "^1.0.1",
-    "pixelmatch": "4.0.2",
-    "postcss": "^7.0.32",
-    "prettier": "^2.0.5",
-    "prompts": "2.3.2",
-    "puppeteer": "~5.2.1",
-    "rollup": "2.23.0",
-    "semiver": "^1.1.0",
-    "semver": "7.3.2",
-    "sizzle": "^2.3.5",
-    "terser": "4.8.0",
-    "tslib": "^2.0.0",
-    "webpack": "^4.44.0",
-    "ws": "7.3.1"
-  },
-  "engines": {
-    "node": ">=10.13.0",
-    "npm": ">=6.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navify/rindo.git"
-  },
-  "author": "Navify Team",
-  "homepage": "https://rindojs.web.app/",
-  "description": "A Compiler for Web Components and Progressive Web Apps",
-  "keywords": [
-    "web components",
-    "components",
-    "rindo",
-    "navify",
-    "webapp",
-    "custom elements",
-    "pwa",
-    "progressive web app"
-  ]
-}
+{
+  "name": "@rindo/core",
+  "version": "2.5.2",
+  "license": "MIT",
+  "main": "./internal/rindo-core/index.cjs",
+  "module": "./internal/rindo-core/index.js",
+  "types": "./internal/rindo-core/index.d.ts",
+  "bin": {
+    "rindo": "bin/rindo"
+  },
+  "files": [
+    "bin/",
+    "cli/",
+    "compiler/",
+    "dependencies.json",
+    "dev-server/",
+    "internal/",
+    "mock-doc/",
+    "screenshot/",
+    "sys/",
+    "testing/"
+  ],
+  "scripts": {
+    "start": "npm run watch",
+    "changelog": "conventional-changelog -p angular -o -i CHANGELOG.md -s",
+    "build": "node scripts && npm run tsc.prod && npm run rollup.prod.ci",
+    "build.prod": "node scripts && npm run tsc.scripts && npm run tsc.prod && npm run rollup.prod.ci",
+    "watch": "node scripts && npm run tsc && concurrently \"npm run rollup.watch\" \"npm run tsc.watch\"",
+    "release": "node scripts --release --publish --any-branch",
+    "release.prepare": "node scripts --release --prepare --any-branch",
+    "tsc": "tsc --incremental",
+    "tsc.prod": "tsc",
+    "tsc.scripts": "tsc -p scripts/tsconfig.json",
+    "tsc.watch": "tsc --incremental --watch",
+    "rollup": "rollup --config",
+    "rollup.prod": "rollup --config --config-prod",
+    "rollup.prod.ci": "rollup --config --config-prod --config-ci",
+    "rollup.watch": "rollup --watch --config",
+    "license": "node scripts --license",
+    "prettier": "prettier --write \"./src/**/*.{ts,tsx}\""
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "15.1.0",
+    "@rollup/plugin-json": "4.1.0",
+    "@rollup/plugin-node-resolve": "9.0.0",
+    "@rollup/plugin-replace": "2.3.4",
+    "@rollup/pluginutils": "4.1.0",
+    "@types/autoprefixer": "^10.2.0",
+    "@types/exit": "^0.1.31",
+    "@types/fs-extra": "^9.0.8",
+    "@types/glob": "^7.1.2",
+    "@types/graceful-fs": "^4.1.5",
+    "@types/inquirer": "^7.3.1",
+    "@types/is-glob": "^4.0.1",
+    "@types/jest": "^26.0.21",
+    "@types/listr": "^0.14.2",
+    "@types/mime-types": "^2.1.0",
+    "@types/node": "^14.14.35",
+    "@types/node-fetch": "^2.5.8",
+    "@types/parse5": "^6.0.0",
+    "@types/pixelmatch": "^4.0.0",
+    "@types/pngjs": "^3.4.2",
+    "@types/prompts": "^2.0.9",
+    "@types/puppeteer": "^5.4.3",
+    "@types/semver": "^7.3.4",
+    "@types/sizzle": "^2.3.2",
+    "@types/webpack": "^4.41.26",
+    "@types/ws": "^7.4.0",
+    "ansi-colors": "4.1.1",
+    "autoprefixer": "10.2.5",
+    "concurrently": "^6.0.0",
+    "conventional-changelog-cli": "^2.1.1",
+    "core-js-builder": "~3.6.5",
+    "css": "^3.0.0",
+    "dts-bundle-generator": "~5.3.0",
+    "execa": "4.1.0",
+    "exit": "^0.1.2",
+    "fast-deep-equal": "3.1.3",
+    "fs-extra": "^9.1.0",
+    "glob": "7.1.6",
+    "graceful-fs": "~4.2.6",
+    "hash.js": "^1.1.7",
+    "inquirer": "^7.3.3",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3",
+    "jest-environment-node": "^26.6.2",
+    "listr": "^0.14.3",
+    "magic-string": "^0.25.7",
+    "mime-db": "^1.46.0",
+    "minimatch": "3.0.4",
+    "node-fetch": "2.6.1",
+    "open": "8.0.4",
+    "open-in-editor": "2.2.0",
+    "parse5": "6.0.1",
+    "path-browserify": "^1.0.1",
+    "pixelmatch": "4.0.2",
+    "postcss": "^8.2.8",
+    "prettier": "^2.2.1",
+    "prompts": "2.4.0",
+    "puppeteer": "~5.5.0",
+    "rollup": "2.42.3",
+    "semiver": "^1.1.0",
+    "semver": "7.3.4",
+    "sizzle": "^2.3.6",
+    "terser": "5.6.1",
+    "tslib": "^2.1.0",
+    "typescript": "4.2.3",
+    "webpack": "^4.46.0",
+    "ws": "7.4.4"
+  },
+  "engines": {
+    "node": ">=12.10.0",
+    "npm": ">=6.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/familyjs/rindo.git"
+  },
+  "author": "Family Team",
+  "homepage": "https://rindojs.web.app/",
+  "description": "A Compiler for Web Components and Progressive Web Apps",
+  "keywords": [
+    "web components",
+    "components",
+    "rindo",
+    "family",
+    "webapp",
+    "custom elements",
+    "pwa",
+    "progressive web app"
+  ]
+}

package/readme.md

@@ -1,95 +1,21 @@
-# Rindo
-
-A Compiler for Web Components and PWAs
-
-```bash
-npm init rindo
-```
-
-[Rindo](https://rindojs.web.app/) is a simple compiler for generating Web Components and progressive web apps (PWA). Rindo was built by the [Navify Framework](http://navifyframework.web.app/) team for its next generation of performant mobile and desktop Web Components.
-
-Rindo combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run on both [modern browsers and legacy browsers](#browser-support) back to Internet Explorer 11.
-
-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.
-
-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).
-
-*Note: Rindo and [Navify](https://navifyframework.web.app/) are completely independent projects. Rindo does not prescribe any specific UI framework, but Navify is the largest user of Rindo (today!)*
-
-
-## Getting Started
-
-To create a new project using an interactive cli, run:
-
-```bash
-npm init rindo
-```
-
-To start developing your new Rindo project, run:
-
-```bash
-npm start
-```
-
-
-## Creating components
-
-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.
-
-Create new components by creating files with a `.tsx` extension, such as `my-component.tsx`, and place them in `src/components`.
-
-```tsx
-import { Component, Prop, h } from '@rindo/core';
-
-@Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css'
-})
-export class MyComponent {
-
-  @Prop() first: string;
-
-  @Prop() last: string;
-
-  render() {
-    return (
-      <div>
-        Hello, my name is {this.first} {this.last}
-      </div>
-    );
-  }
-}
-```
-
-Note: the `.tsx` extension is required, as this is the standard for TypeScript classes that use JSX.
-
-To use this component, just use it like any other HTML element:
-
-```html
-<my-component first="Rindo" last="JS"></my-component>
-```
-
-
-## API
-
-The API for rindo closely mirrors the API for Custom Elements v1.
-
-### Components
-
-| Decorator      | Description                             |
-| -------------- | ---                                     |
-| `@Component()` | Indicate a class is a Rindo component. |
-|                |                                         |
-| `@Prop()`      | Creates a property that will exist on the element and be data-bound to this component.  |
-| `@State()`     | Creates a local state variable that will not be placed on the element. |
-| `@Method()`    | Expose specific methods to be publicly accessible. |
-
-### All browsers
-
-Some modern browsers like Edge do not include native support for Web Components. In that case, we conditionally load the [Custom Elements v1](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) polyfill.
-
-
-## License
-
- - [MIT](./LICENSE.md)
-
+# Rindo: A Compiler for Web Components and PWAs
+
+[RindoJS documentation](https://rindojs.web.app/)
+
+## Getting Started
+
+To create a new project using an interactive cli, run:
+
+```bash
+npm init rindo
+```
+
+To start developing your new Rindo project, run:
+
+```bash
+npm start
+```
+
+## License
+
+ - [MIT](./LICENSE.md)

package/screenshot/compare/build/app.js

@@ -1,33 +1,33 @@
-
-(function() {
-  function checkSupport() {
-  if (!document.body) {
-    setTimeout(checkSupport);
-    return;
-  }
-  function supportsDynamicImports() {
-    try {
-    new Function('import("")');
-    return true;
-    } catch (e) {}
-    return false;
-  }
-  var supportsEsModules = !!('noModule' in document.createElement('script'));
-
-  if (!supportsEsModules) {
-    document.body.innerHTML = '\n  \n<style>\nbody {\n  display: block !important;\n  font-family: sans-serif;\n  padding: 20px;\n  line-height:22px;\n}\nh1 {\n  font-size: 18px;\n}\nh2 {\n  font-size: 14px;\n  margin-top: 40px;\n}\n</style>\n\n\n  <h1>This Rindo app is disabled for this browser.</h1>\n\n  <h2>Developers:</h2>\n  <ul>\n  <li>ES5 builds are disabled <strong>during development</strong> to take advantage of 2x faster build times.</li>\n  <li>Please see the example below or our <a href="https://rindojs.com/docs/rindo-config" target="_blank" rel="noopener noreferrer">config docs</a> if you would like to develop on a browser that does not fully support ES2017 and custom elements.</li>\n  <li>Note that by default, ES5 builds and polyfills are enabled during production builds.</li>\n  <li>When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.</li>\n  <li><em>This is only an experiment and if it slows down app development then we will revert this and enable ES5 builds during dev.</em></li>\n  </ul>\n\n\n  <h2>Enabling ES5 builds during development:</h2>\n  <pre>\n  <code>npm run dev --es5</code>\n  </pre>\n  <p>For rindo-component-starter, use:</p>\n  <pre>\n  <code>npm start --es5</code>\n  </pre>\n\n\n  <h2>Enabling full production builds during development:</h2>\n  <pre>\n  <code>npm run dev --prod</code>\n  </pre>\n  <p>For rindo-component-starter, use:</p>\n  <pre>\n  <code>npm start --prod</code>\n  </pre>\n\n  <h2>Current Browser\'s Support:</h2>\n  <ul>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">ES Module Imports</a>: <span id="es-modules-test"></span></li>\n  <li><a href="http://2ality.com/2017/01/import-operator.html">ES Dynamic Imports</a>: <span id="es-dynamic-modules-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements">Custom Elements</a>: <span id="custom-elements-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>: <span id="shadow-dom-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a>: <span id="fetch-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>: <span id="css-variables-test"></span></li>\n  </ul>\n\n  <h2>Current Browser:</h2>\n  <pre>\n  <code id="current-browser-output"></code>\n  </pre>\n';
-
-    document.getElementById('current-browser-output').textContent = window.navigator.userAgent;
-    document.getElementById('es-modules-test').textContent = supportsEsModules;
-    document.getElementById('es-dynamic-modules-test').textContent = supportsDynamicImports();
-    document.getElementById('shadow-dom-test').textContent = !!(document.head.attachShadow);
-    document.getElementById('custom-elements-test').textContent = !!(window.customElements);
-    document.getElementById('css-variables-test').textContent = !!(window.CSS && window.CSS.supports && window.CSS.supports('color', 'var(--c)'));
-    document.getElementById('fetch-test').textContent = !!(window.fetch);
-  } else {
-    document.body.innerHTML = '\n  \n<style>\nbody {\n  display: block !important;\n  font-family: sans-serif;\n  padding: 20px;\n  line-height:22px;\n}\nh1 {\n  font-size: 18px;\n}\nh2 {\n  font-size: 14px;\n  margin-top: 40px;\n}\n</style>\n\n\n  <h1>Update src/index.html</h1>\n\n  <p>Rindo recently changed how scripts are loaded in order to improve performance.</p>\n\n  <h2>BEFORE:</h2>\n  <p>Previously, a single script was included that handled loading the correct JavaScript based on browser support.</p>\n  <pre>\n  <code>&lt;script src=&quot;/build/app.js&quot;&gt;&lt;/script&gt;\n</code>\n  </pre>\n\n  <h2 style="margin-top:0">AFTER:</h2>\n  <p>The index.html should now include two scripts using the modern ES Module script pattern.\n  Note that only one file will actually be requested and loaded based on the browser\'s native support for ES Modules.\n  For more info, please see <a href="https://developers.google.com/web/fundamentals/primers/modules#browser" target="_blank" rel="noopener noreferrer">Using JavaScript modules on the web</a>.\n  </p>\n  <pre>\n  <code>&lt;script <span style="background:yellow">type="module"</span> src="/build/app<span style="background:yellow">.esm</span>.js"&gt;&lt;/script&gt;\n  &lt;script <span style="background:yellow">nomodule</span> src=&quot;/build/app.js&quot;&gt;&lt;/script&gt;</code>\n  </pre>\n';
-  }
-  }
-
-  setTimeout(checkSupport);
-})();
+
+(function() {
+  function checkSupport() {
+  if (!document.body) {
+    setTimeout(checkSupport);
+    return;
+  }
+  function supportsDynamicImports() {
+    try {
+    new Function('import("")');
+    return true;
+    } catch (e) {}
+    return false;
+  }
+  var supportsEsModules = !!('noModule' in document.createElement('script'));
+
+  if (!supportsEsModules) {
+    document.body.innerHTML = '\n  \n<style>\nbody {\n  display: block !important;\n  font-family: sans-serif;\n  padding: 20px;\n  line-height:22px;\n}\nh1 {\n  font-size: 18px;\n}\nh2 {\n  font-size: 14px;\n  margin-top: 40px;\n}\n</style>\n\n\n  <h1>This Rindo app is disabled for this browser.</h1>\n\n  <h2>Developers:</h2>\n  <ul>\n  <li>ES5 builds are disabled <strong>during development</strong> to take advantage of 2x faster build times.</li>\n  <li>Please see the example below or our <a href="https://rindojs.web.app/docs/rindo-config" target="_blank" rel="noopener noreferrer">config docs</a> if you would like to develop on a browser that does not fully support ES2017 and custom elements.</li>\n  <li>Note that by default, ES5 builds and polyfills are enabled during production builds.</li>\n  <li>When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.</li>\n  <li><em>This is only an experiment and if it slows down app development then we will revert this and enable ES5 builds during dev.</em></li>\n  </ul>\n\n\n  <h2>Enabling ES5 builds during development:</h2>\n  <pre>\n  <code>npm run dev --es5</code>\n  </pre>\n  <p>For rindo-component-starter, use:</p>\n  <pre>\n  <code>npm start --es5</code>\n  </pre>\n\n\n  <h2>Enabling full production builds during development:</h2>\n  <pre>\n  <code>npm run dev --prod</code>\n  </pre>\n  <p>For rindo-component-starter, use:</p>\n  <pre>\n  <code>npm start --prod</code>\n  </pre>\n\n  <h2>Current Browser\'s Support:</h2>\n  <ul>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">ES Module Imports</a>: <span id="es-modules-test"></span></li>\n  <li><a href="http://2ality.com/2017/01/import-operator.html">ES Dynamic Imports</a>: <span id="es-dynamic-modules-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements">Custom Elements</a>: <span id="custom-elements-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>: <span id="shadow-dom-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a>: <span id="fetch-test"></span></li>\n  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>: <span id="css-variables-test"></span></li>\n  </ul>\n\n  <h2>Current Browser:</h2>\n  <pre>\n  <code id="current-browser-output"></code>\n  </pre>\n';
+
+    document.getElementById('current-browser-output').textContent = window.navigator.userAgent;
+    document.getElementById('es-modules-test').textContent = supportsEsModules;
+    document.getElementById('es-dynamic-modules-test').textContent = supportsDynamicImports();
+    document.getElementById('shadow-dom-test').textContent = !!(document.head.attachShadow);
+    document.getElementById('custom-elements-test').textContent = !!(window.customElements);
+    document.getElementById('css-variables-test').textContent = !!(window.CSS && window.CSS.supports && window.CSS.supports('color', 'var(--c)'));
+    document.getElementById('fetch-test').textContent = !!(window.fetch);
+  } else {
+    document.body.innerHTML = '\n  \n<style>\nbody {\n  display: block !important;\n  font-family: sans-serif;\n  padding: 20px;\n  line-height:22px;\n}\nh1 {\n  font-size: 18px;\n}\nh2 {\n  font-size: 14px;\n  margin-top: 40px;\n}\n</style>\n\n\n  <h1>Update src/index.html</h1>\n\n  <p>Rindo recently changed how scripts are loaded in order to improve performance.</p>\n\n  <h2>BEFORE:</h2>\n  <p>Previously, a single script was included that handled loading the correct JavaScript based on browser support.</p>\n  <pre>\n  <code>&lt;script src=&quot;/build/app.js&quot;&gt;&lt;/script&gt;\n</code>\n  </pre>\n\n  <h2 style="margin-top:0">AFTER:</h2>\n  <p>The index.html should now include two scripts using the modern ES Module script pattern.\n  Note that only one file will actually be requested and loaded based on the browser\'s native support for ES Modules.\n  For more info, please see <a href="https://developers.google.com/web/fundamentals/primers/modules#browser" target="_blank" rel="noopener noreferrer">Using JavaScript modules on the web</a>.\n  </p>\n  <pre>\n  <code>&lt;script <span style="background:yellow">type="module"</span> src="/build/app<span style="background:yellow">.esm</span>.js"&gt;&lt;/script&gt;\n  &lt;script <span style="background:yellow">nomodule</span> src=&quot;/build/app.js&quot;&gt;&lt;/script&gt;</code>\n  </pre>\n';
+  }
+  }
+
+  setTimeout(checkSupport);
+})();

package/screenshot/compare/build/p-f4745c2f.entry.js

@@ -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}
+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/rindo/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/connector-base.d.ts

@@ -1,4 +1,4 @@
-import * as d from '@rindo/core/internal';
+import type * as d from '@rindo/core/internal';
 export declare class ScreenshotConnector implements d.ScreenshotConnector {
     rootDir: string;
     cacheDir: string;

package/screenshot/connector-local.d.ts

@@ -1,4 +1,4 @@
-import * as d from '@rindo/core/internal';
+import type * as d from '@rindo/core/internal';
 import { ScreenshotConnector } from './connector-base';
 export declare class ScreenshotLocalConnector extends ScreenshotConnector {
     publishBuild(results: d.ScreenshotBuildResults): Promise<d.ScreenshotBuildResults>;