From 2759e4ca23a9790d7fbee0f03036cf3be731726a Mon Sep 17 00:00:00 2001 From: Dominique Wirz Date: Wed, 18 Oct 2023 21:08:22 +0200 Subject: [PATCH] refactor: patch HTMLElement.observedAttributes with setter function so Stencil.js works without a patch --- README.md | 6 +-- .../lib/server.ts | 13 ++++++- .../patches/@stencil+core+4.4.1.patch | 35 ----------------- ...for-overwritting-observed-attributes.patch | 39 ------------------- 4 files changed, 13 insertions(+), 80 deletions(-) delete mode 100644 patches/@stencil+core+4.4.1+002+use-define-property-for-overwritting-observed-attributes.patch diff --git a/README.md b/README.md index c195c7ba..bffa79ce 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,7 @@ _Disclaimer: The Web Components are copied from a client project and all styles `git apply --ignore-whitespace patches/@stencil+core+4.4.1+001+use-global-this-as-window-fallback.patch` - Now run `npm run app:clean` and restart the app with `npm run app:start`. This problem is gone. Yay... But now we get a `TypeError: Cannot set property observedAttributes...`, which is probably caused of the implementation of `linkedom` which we use as a shim for `window` server-side. So we patch ([#4915](https://github.com/ionic-team/stencil/pull/4915)) this by running - - `git apply --ignore-whitespace patches/@stencil+core+4.4.1+002+use-define-property-for-overwritting-observed-attributes.patch` - - Again run `npm run app:clean` and `npm run app:start`. Voila, everything can be built and started. 🙌 + Now run `npm run app:clean` and `npm run app:start` again. Voila, everything can be built and started. 🙌 1. Now run either: diff --git a/packages/web-components-react-wrapper/lib/server.ts b/packages/web-components-react-wrapper/lib/server.ts index f296fff6..a4f1ac19 100644 --- a/packages/web-components-react-wrapper/lib/server.ts +++ b/packages/web-components-react-wrapper/lib/server.ts @@ -20,11 +20,22 @@ export function shim() { CustomEvent, DocumentFragment, DOMParser, - HTMLElement, + HTMLElement: LinkedomHTMLElement, HTMLTemplateElement, MutationObserver, } = parseHTML('...'); + class HTMLElement extends LinkedomHTMLElement { + private static _observedAttributes: string[] = []; + static get observedAttributes() { + return HTMLElement._observedAttributes; + } + + static set observedAttributes(value) { + HTMLElement._observedAttributes = value; + } + } + class Storage { key() {} getItem() {} diff --git a/packages/web-components-react-wrapper/patches/@stencil+core+4.4.1.patch b/packages/web-components-react-wrapper/patches/@stencil+core+4.4.1.patch index 3411dcbe..65598871 100644 --- a/packages/web-components-react-wrapper/patches/@stencil+core+4.4.1.patch +++ b/packages/web-components-react-wrapper/patches/@stencil+core+4.4.1.patch @@ -2,41 +2,6 @@ diff --git a/node_modules/@stencil/core/internal/client/index.js b/node_modules/ index 8d1fdbb..0ce3cb4 100644 --- a/node_modules/@stencil/core/internal/client/index.js +++ b/node_modules/@stencil/core/internal/client/index.js -@@ -2428,19 +2428,21 @@ const proxyComponent = (Cstr, cmpMeta, flags) => { - // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s). - // As such, there is no way to guarantee type-safety here that a user hasn't entered - // an invalid attribute. -- Cstr.observedAttributes = Array.from(new Set([ -- ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}), -- ...members -- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) -- .map(([propName, m]) => { -- const attrName = m[1] || propName; -- attrNameToPropName.set(attrName, propName); -- if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) { -- cmpMeta.$attrsToReflect$.push([propName, attrName]); -- } -- return attrName; -- }), -- ])); -+ Object.defineProperty(Cstr, "observedAttributes", { -+ get: function () { return Array.from(new Set([ -+ ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}), -+ ...members -+ .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) -+ .map(([propName, m]) => { -+ const attrName = m[1] || propName; -+ attrNameToPropName.set(attrName, propName); -+ if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) { -+ cmpMeta.$attrsToReflect$.push([propName, attrName]); -+ } -+ return attrName; -+ }), -+ ])) }, -+ }); - } - } - return Cstr; @@ -3603,7 +3605,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => { }; const styles = /*@__PURE__*/ new Map(); diff --git a/patches/@stencil+core+4.4.1+002+use-define-property-for-overwritting-observed-attributes.patch b/patches/@stencil+core+4.4.1+002+use-define-property-for-overwritting-observed-attributes.patch deleted file mode 100644 index f13b0ee1..00000000 --- a/patches/@stencil+core+4.4.1+002+use-define-property-for-overwritting-observed-attributes.patch +++ /dev/null @@ -1,39 +0,0 @@ -diff --git a/node_modules/@stencil/core/internal/client/index.js b/node_modules/@stencil/core/internal/client/index.js -index 7b647c2..d107ed9 100644 ---- a/node_modules/@stencil/core/internal/client/index.js -+++ b/node_modules/@stencil/core/internal/client/index.js -@@ -2428,19 +2428,21 @@ const proxyComponent = (Cstr, cmpMeta, flags) => { - // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s). - // As such, there is no way to guarantee type-safety here that a user hasn't entered - // an invalid attribute. -- Cstr.observedAttributes = Array.from(new Set([ -- ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}), -- ...members -- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) -- .map(([propName, m]) => { -- const attrName = m[1] || propName; -- attrNameToPropName.set(attrName, propName); -- if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) { -- cmpMeta.$attrsToReflect$.push([propName, attrName]); -- } -- return attrName; -- }), -- ])); -+ Object.defineProperty(Cstr, "observedAttributes", { -+ get: function () { return Array.from(new Set([ -+ ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}), -+ ...members -+ .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) -+ .map(([propName, m]) => { -+ const attrName = m[1] || propName; -+ attrNameToPropName.set(attrName, propName); -+ if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) { -+ cmpMeta.$attrsToReflect$.push([propName, attrName]); -+ } -+ return attrName; -+ }), -+ ])) }, -+ }); - } - } - return Cstr;