Merge branch 'ionic-team:main' into bug/run-custom-target

CONTRIBUTING.md

@@ -79,7 +79,9 @@ Using `npm link` is beneficial to the development cycle in that consecutive buil
     "baseUrl": ".",
     "paths": {
       "@stencil/core/internal": ["node_modules/@stencil/core/internal"],
-      "@stencil/core/internal/*": ["node_modules/@stencil/core/internal/*"]
+      "@stencil/core/internal/*": ["node_modules/@stencil/core/internal/*"],
+      "@stencil/core/mock-doc": ["node_modules/@stencil/core/mock-doc"],
+      "@stencil/core/mock-doc/*": ["node_modules/@stencil/core/mock-doc/*"]
     }
   }
 }
@@ -94,6 +96,28 @@ Afterwards, to clean up:
     2. Remove the modifications to your tsconfig.json
 2. In the directory of _stencil core_, run `npm unlink`
 
+> [!NOTE]  
+> Instead of linking, you can reference Stencil from a local directory in the `package.json` after updating your project's `tsconfig.json` file, e.g.
+> ```patch
+> diff --git a/package.json b/package.json
+> index 1a8320a..bb1fa3a 100644
+> --- a/package.json
+> +++ b/package.json
+> @@ -39,11 +39,12 @@
+>      "generate": "stencil generate"
+>    },
+>    "devDependencies": {
+> -    "@stencil/core": "^4.7.0",
+> +    "@stencil/core": "file:/path/to/local/stencil",
+>      "@types/jest": "^29.5.6",
+>      "@types/node": "^16.18.11",
+>      "jest": "^29.7.0",
+>      "jest-cli": "^29.7.0",
+>      "puppeteer": "^21.9.0"
+>    },
+>    "license": "MIT"
+> ```
+
 #### Testing with `npm pack`:
 
 There are some cases where `npm link` may fall short. For instance, when upgrading a minimum/recommended package version where the package in question has changed its typings. Rather than updating `paths` in your project's `tsconfig.json` file, it may be easier to create a tarball of the project and install in manually.

src/mock-doc/serialize-node.ts

@@ -474,6 +474,7 @@ function isWithinWhitespaceSensitive(node: Node) {
   return false;
 }
 
+// TODO(STENCIL-1299): Audit this list, remove unsupported/deprecated elements
 /*@__PURE__*/ export const NON_ESCAPABLE_CONTENT = new Set([
   'STYLE',
   'SCRIPT',
@@ -485,6 +486,7 @@ function isWithinWhitespaceSensitive(node: Node) {
   'PLAINTEXT',
 ]);
 
+// TODO(STENCIL-1299): Audit this list, remove unsupported/deprecated elements
 /**
  * A list of whitespace sensitive tag names, such as `code`, `pre`, etc.
  */
@@ -498,7 +500,8 @@ function isWithinWhitespaceSensitive(node: Node) {
   'TEXTAREA',
 ]);
 
-/*@__PURE__*/ const EMPTY_ELEMENTS = new Set([
+// TODO(STENCIL-1299): Audit this list, remove unsupported/deprecated elements
+/*@__PURE__*/ export const EMPTY_ELEMENTS = new Set([
   'area',
   'base',
   'basefont',
@@ -516,11 +519,14 @@ function isWithinWhitespaceSensitive(node: Node) {
   'param',
   'source',
   'trace',
+  'track',
   'wbr',
 ]);
 
+// TODO(STENCIL-1299): Audit this list, remove unsupported/deprecated attr
 /*@__PURE__*/ const REMOVE_EMPTY_ATTR = new Set(['class', 'dir', 'id', 'lang', 'name', 'title']);
 
+// TODO(STENCIL-1299): Audit this list, remove unsupported/deprecated attr
 /*@__PURE__*/ const BOOLEAN_ATTR = new Set([
   'allowfullscreen',
   'async',

src/mock-doc/test/serialize-node.spec.ts

@@ -1,5 +1,5 @@
 import { MockDocument } from '../document';
-import { serializeNodeToHtml } from '../serialize-node';
+import { EMPTY_ELEMENTS, serializeNodeToHtml } from '../serialize-node';
 
 describe('serializeNodeToHtml', () => {
   let doc: MockDocument;
@@ -278,4 +278,19 @@ describe('serializeNodeToHtml', () => {
     scriptElm.innerHTML = input;
     expect(scriptElm.innerHTML).toBe(input);
   });
+
+  it.each([...EMPTY_ELEMENTS])("does not add a closing tag for '%s'", (voidElm) => {
+    if (voidElm === 'frame') {
+      // 'frame' is a non-HTML5 compatible/deprecated element.
+      // Stencil technically still supports it, but it doesn't get rendered as a child element, so let's just skip it
+      return;
+    }
+
+    const elm = doc.createElement('div');
+
+    elm.innerHTML = `<${voidElm}>`;
+
+    const html = serializeNodeToHtml(elm, { prettyHtml: true });
+    expect(html).toBe(`<${voidElm}>`);
+  });
 });