refactor: patch HTMLElement.observedAttributes with setter function s…

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:
 

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() {}

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();