@stencil/core 2.17.4 → 2.18.1

package/mock-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/mock-doc",
-  "version": "2.17.4",
+  "version": "2.18.1",
   "description": "Mock window, document and DOM outside of a browser environment.",
   "main": "./index.cjs",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "2.17.4",
+  "version": "2.18.1",
   "license": "MIT",
   "main": "./internal/stencil-core/index.cjs",
   "module": "./internal/stencil-core/index.js",
@@ -30,7 +30,7 @@
     "license": "node scripts --license",
     "lint": "eslint \"src/*.ts\" \"src/**/*.ts\" \"src/**/*.tsx\"",
     "prettier": "npm run prettier.base -- --write",
-    "prettier.base": "prettier \"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil\"",
+    "prettier.base": "prettier \"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil|.github/(**/)?*.(yml|yaml)|*.js\"",
     "prettier.dry-run": "npm run prettier.base -- --list-different",
     "release": "node scripts --release --publish",
     "release.prepare": "node scripts --release --prepare",
@@ -54,8 +54,7 @@
     "tsc": "tsc --incremental",
     "tsc.prod": "tsc",
     "tsc.scripts": "tsc -p scripts/tsconfig.json",
-    "tsc.watch": "tsc --incremental --watch",
-    "watch": "node scripts && npm run tsc && concurrently \"npm run rollup.watch\" \"npm run tsc.watch\""
+    "tsc.watch": "tsc --incremental --watch"
   },
   "devDependencies": {
     "@ionic/prettier-config": "^2.0.0",
@@ -64,47 +63,40 @@
     "@rollup/plugin-node-resolve": "9.0.0",
     "@rollup/plugin-replace": "2.3.4",
     "@rollup/pluginutils": "4.1.0",
-    "@types/autoprefixer": "^10.2.0",
-    "@types/eslint": "^8.4.2",
+    "@types/eslint": "^8.4.6",
     "@types/exit": "^0.1.31",
     "@types/fs-extra": "^9.0.8",
-    "@types/glob": "^7.1.2",
+    "@types/glob": "^8.0.0",
     "@types/graceful-fs": "^4.1.5",
     "@types/inquirer": "^7.3.1",
-    "@types/is-glob": "^4.0.1",
     "@types/jest": "^27.0.3",
-    "@types/listr": "^0.14.2",
-    "@types/mime-types": "^2.1.0",
+    "@types/listr": "^0.14.4",
     "@types/node": "^14.14.35",
-    "@types/node-fetch": "^2.5.8",
     "@types/parse5": "^6.0.0",
-    "@types/pixelmatch": "^4.0.0",
+    "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^3.4.2",
     "@types/prompts": "^2.0.9",
-    "@types/semver": "^7.3.4",
+    "@types/semver": "^7.3.12",
     "@types/sizzle": "^2.3.2",
     "@types/webpack": "^4.41.26",
     "@types/ws": "^7.4.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
     "@yarnpkg/lockfile": "^1.1.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",
-    "eslint": "^8.13.0",
+    "conventional-changelog-cli": "^2.2.2",
+    "dts-bundle-generator": "~6.12.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^27.0.4",
     "eslint-plugin-jsdoc": "^39.3.1",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "execa": "4.1.0",
     "exit": "^0.1.2",
-    "fast-deep-equal": "3.1.3",
-    "fs-extra": "^9.1.0",
-    "glob": "7.1.6",
+    "fs-extra": "^10.1.0",
+    "glob": "8.0.3",
     "graceful-fs": "~4.2.6",
     "hash.js": "^1.1.7",
     "inquirer": "^7.3.3",
@@ -112,27 +104,26 @@
     "jest-cli": "^27.4.5",
     "jest-environment-node": "^27.4.4",
     "listr": "^0.14.3",
-    "magic-string": "^0.25.7",
+    "magic-string": "^0.26.3",
     "merge-source-map": "^1.1.0",
     "mime-db": "^1.46.0",
     "minimatch": "3.0.4",
     "node-fetch": "2.6.7",
-    "open": "8.2.1",
+    "open": "^8.4.0",
     "open-in-editor": "2.2.0",
     "parse5": "6.0.1",
     "path-browserify": "^1.0.1",
-    "pixelmatch": "4.0.2",
+    "pixelmatch": "5.3.0",
     "postcss": "^8.2.8",
-    "prettier": "2.5.1",
+    "prettier": "2.7.1",
     "prompts": "2.4.0",
     "puppeteer": "~10.0.0",
     "rollup": "2.42.3",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "semver": "7.3.4",
+    "semver": "^7.3.7",
     "sizzle": "^2.3.6",
     "terser": "5.6.1",
-    "tslib": "^2.1.0",
-    "typescript": "4.5.4",
+    "typescript": "4.7.4",
     "webpack": "^4.46.0",
     "ws": "7.4.6"
   },

package/readme.md

@@ -9,7 +9,10 @@
 </h1>
 
 <p align="center">
-  A compiler for generating <a href="https://www.webcomponents.org/introduction">Web Components</a> 
+  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://ionic.io/">Ionic team</a>.
+</p>
+<p align="center">
+  Stencil 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://stenciljs.com/docs/browser-support" target="_blank" rel="noopener noref">modern browsers and legacy browsers</a>
 </p>
 
 <p align="center">
@@ -43,46 +46,28 @@
   <a href="https://twitter.com/stenciljs">Twitter</a>
 </h2>
 
-[Stencil](https://stenciljs.com/) is a simple compiler for generating Web Components and static site generated progressive web apps (PWA). Stencil was built by the [Ionic](https://ionic.io/) team for its next generation of performant mobile and desktop Web Components.
-
-Stencil 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://stenciljs.com/docs/browser-support).
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil 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.
-
-Stencil 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).
-
-## Getting Started
-
-To create a new project using an interactive cli, run:
-
-```bash
-npm init stencil
-```
-
-To start developing your new Stencil project, run:
-
-```bash
-npm start
-```
-
-## Creating components
-
-Stencil 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.
+### Getting Started
 
-Create new components by creating files with a `.tsx` extension, such as `my-component.tsx`, and place them in `src/components`.
+Start a new project by following our quick [Getting Started guide](https://stenciljs.com/docs/getting-started).
+We would love to hear from you!
+If you have any feedback or run into issues using Stencil, please file an [issue](https://github.com/ionic-team/stencil/issues/new) on this repository.
 
+### Examples
+A Stencil component looks a lot like a class-based React component, with the addition of TypeScript decorators:
 ```tsx
 import { Component, Prop, h } from '@stencil/core';
 
 @Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css'
+  tag: 'my-component',            // the name of the component's custom HTML tag
+  styleUrl: 'my-component.css',   // css styles to apply to the component
+  shadow: true,                   // this component uses the ShadowDOM
 })
 export class MyComponent {
-
+  // The component accepts two arguments:
   @Prop() first: string;
   @Prop() last: string;
 
+   //The following HTML is rendered when our component is used
   render() {
     return (
       <div>
@@ -93,13 +78,22 @@ export class MyComponent {
 }
 ```
 
-To use this component, just use it like any other HTML element:
+The component above can be used like any other HTML element:
 
 ```html
 <my-component first="Stencil" last="JS"></my-component>
 ```
 
-## Thanks
+Since Stencil generates web components, they work in any major framework or with no framework at all.
+In many cases, Stencil can be used as a drop in replacement for traditional frontend framework, though using it as such is certainly not required.
+
+### Contributing
+
+Thanks for your interest in contributing!
+Please take a moment to read up on our guidelines for [contributing](https://github.com/ionic-team/stencil/blob/main/.github/CONTRIBUTING.md).
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/stencil/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+
+### Thanks
 Stencil's internal testing suite is supported by the [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
 <br>
-<a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a>
+<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>

package/screenshot/index.d.ts

@@ -1,3 +1,3 @@
 export { ScreenshotConnector } from './connector-base';
 export { ScreenshotLocalConnector } from './connector-local';
-export { ScreenshotBuild, Screenshot, ScreenshotCompareResults, ScreenshotDiff } from '@stencil/core/internal';
+export { Screenshot, ScreenshotBuild, ScreenshotCompareResults, ScreenshotDiff } from '@stencil/core/internal';

package/screenshot/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
 const os = require('os');
+const path = require('path');
+const fs = require('fs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
 function fileExists(filePath) {
     return new Promise((resolve) => {
@@ -500,18 +500,18 @@ const getEncodedRootLength = (path) => {
         return 0;
     const ch0 = path.charCodeAt(0);
     // POSIX or UNC
-    if (ch0 === 47 /* slash */ || ch0 === 92 /* backslash */) {
+    if (ch0 === 47 /* CharacterCodes.slash */ || ch0 === 92 /* CharacterCodes.backslash */) {
         if (path.charCodeAt(1) !== ch0)
             return 1; // POSIX: "/" (or non-normalized "\")
-        const p1 = path.indexOf(ch0 === 47 /* slash */ ? '/' : altDirectorySeparator, 2);
+        const p1 = path.indexOf(ch0 === 47 /* CharacterCodes.slash */ ? '/' : altDirectorySeparator, 2);
         if (p1 < 0)
             return path.length; // UNC: "//server" or "\\server"
         return p1 + 1; // UNC: "//server/" or "\\server\"
     }
     // DOS
-    if (isVolumeCharacter(ch0) && path.charCodeAt(1) === 58 /* colon */) {
+    if (isVolumeCharacter(ch0) && path.charCodeAt(1) === 58 /* CharacterCodes.colon */) {
         const ch2 = path.charCodeAt(2);
-        if (ch2 === 47 /* slash */ || ch2 === 92 /* backslash */)
+        if (ch2 === 47 /* CharacterCodes.slash */ || ch2 === 92 /* CharacterCodes.backslash */)
             return 3; // DOS: "c:/" or "c:\"
         if (path.length === 2)
             return 2; // DOS: "c:" (but not "c:d")
@@ -533,7 +533,7 @@ const getEncodedRootLength = (path) => {
                 isVolumeCharacter(path.charCodeAt(authorityEnd + 1))) {
                 const volumeSeparatorEnd = getFileUrlVolumeSeparatorEnd(path, authorityEnd + 2);
                 if (volumeSeparatorEnd !== -1) {
-                    if (path.charCodeAt(volumeSeparatorEnd) === 47 /* slash */) {
+                    if (path.charCodeAt(volumeSeparatorEnd) === 47 /* CharacterCodes.slash */) {
                         // URL: "file:///c:/", "file://localhost/c:/", "file:///c%3a/", "file://localhost/c%3a/"
                         return ~(volumeSeparatorEnd + 1);
                     }
@@ -551,15 +551,15 @@ const getEncodedRootLength = (path) => {
     // relative
     return 0;
 };
-const isVolumeCharacter = (charCode) => (charCode >= 97 /* a */ && charCode <= 122 /* z */) ||
-    (charCode >= 65 /* A */ && charCode <= 90 /* Z */);
+const isVolumeCharacter = (charCode) => (charCode >= 97 /* CharacterCodes.a */ && charCode <= 122 /* CharacterCodes.z */) ||
+    (charCode >= 65 /* CharacterCodes.A */ && charCode <= 90 /* CharacterCodes.Z */);
 const getFileUrlVolumeSeparatorEnd = (url, start) => {
     const ch0 = url.charCodeAt(start);
-    if (ch0 === 58 /* colon */)
+    if (ch0 === 58 /* CharacterCodes.colon */)
         return start + 1;
-    if (ch0 === 37 /* percent */ && url.charCodeAt(start + 1) === 51 /* _3 */) {
+    if (ch0 === 37 /* CharacterCodes.percent */ && url.charCodeAt(start + 1) === 51 /* CharacterCodes._3 */) {
         const ch2 = url.charCodeAt(start + 2);
-        if (ch2 === 97 /* a */ || ch2 === 65 /* A */)
+        if (ch2 === 97 /* CharacterCodes.a */ || ch2 === 65 /* CharacterCodes.A */)
             return start + 3;
     }
     return -1;

package/screenshot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/screenshot",
-  "version": "2.17.4",
+  "version": "2.18.1",
   "description": "Stencil Screenshot.",
   "main": "./index.js",
   "types": "./index.d.ts",