element-internals-polyfill - npm Package Compare versions

Comparing version 0.1.33 to 0.1.34

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [0.1.34](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.33...v0.1.34) (2021-05-08)
+
+
+### Bug Fixes
+
+* form-associated elements inserted from DocumentFragment now upgrade properly ([cc6e690](https://github.com/calebdwilliams/element-internals-polyfill/commit/cc6e690f173b30e9933c4f68143d9b9e1153ab8d))
+
 ### [0.1.33](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.32...v0.1.33) (2021-05-07)
@@ -7,0 +14,0 @@

dist/index.js

@@ -16,2 +16,3 @@ (function () {
     const validationAnchorMap = new WeakMap();
+    const documentFragmentMap = new WeakMap();
 
@@ -147,2 +148,10 @@ const observerConfig$1 = { attributes: true };
     };
+    const upgradeInternals = (ref) => {
+        if (ref.constructor['formAssociated']) {
+            const internals = internalsMap.get(ref);
+            const { labels, form } = internals;
+            initLabels(ref, labels);
+            initForm(ref, form, internals);
+        }
+    };
 
@@ -289,2 +298,19 @@ const aom = {
     }
+    function fragmentObserverCallback(mutationList) {
+        mutationList.forEach(mutation => {
+            const { removedNodes } = mutation;
+            removedNodes.forEach(node => {
+                const observer = documentFragmentMap.get(mutation.target);
+                if (internalsMap.has(node)) {
+                    upgradeInternals(node);
+                }
+                observer.disconnect();
+            });
+        });
+    }
+    const deferUpgrade = (fragment) => {
+        const observer = new MutationObserver(fragmentObserverCallback);
+        observer.observe(fragment, { childList: true });
+        documentFragmentMap.set(fragment, observer);
+    };
     new MutationObserver(observerCallback);
@@ -301,2 +327,3 @@ const observerConfig = {
             }
+            const rootNode = ref.getRootNode();
             const validity = new ValidityState();
@@ -309,6 +336,5 @@ refMap.set(this, ref);
             Object.seal(this);
-            if (ref.constructor['formAssociated']) {
-                const { labels, form } = this;
-                initLabels(ref, labels);
-                initForm(ref, form, this);
+            upgradeInternals(ref);
+            if (rootNode instanceof DocumentFragment) {
+                deferUpgrade(rootNode);
             }
@@ -315,0 +341,0 @@ }

dist/maps.d.ts

@@ -31,1 +31,3 @@ /**
 export declare const validationAnchorMap: WeakMap<IElementInternals, HTMLElement>;
+/** Map DocumentFragments to their MutationObservers so we can disconnect once elements are removed */
+export declare const documentFragmentMap: WeakMap<DocumentFragment, MutationObserver>;

dist/mutation-observers.d.ts

@@ -1,3 +0,14 @@
-export declare function observerCallback(mutationList: any): void;
+export declare function observerCallback(mutationList: MutationRecord[]): void;
+/**
+ * This observer callback is just for document fragments
+ * it will upgrade an ElementInternals instance if was appended
+ * from a document fragment.
+ */
+export declare function fragmentObserverCallback(mutationList: MutationRecord[]): void;
+/**
+ * Defer the upgrade of nodes withing a DocumentFragment
+ * @param fragment {DocumentFragment}
+ */
+export declare const deferUpgrade: (fragment: DocumentFragment) => void;
 export declare const observer: MutationObserver;
 export declare const observerConfig: MutationObserverInit;

dist/utils.d.ts

@@ -77,1 +77,8 @@ import { ICustomElement, IElementInternals, ILitElement, LabelsList } from './types.js';
 export declare const overrideFormMethod: (form: HTMLFormElement, returnValue: boolean, method: 'checkValidity' | 'reportValidity') => boolean;
+/**
+ * Will upgrade an ElementInternals instance by initializing the
+ * instance's form and labels. This is called when the element is
+ * either constructed or appended from a DocumentFragment
+ * @param ref {ICustomElement} - The custom element to upgrade
+ */
+export declare const upgradeInternals: (ref: ICustomElement) => void;

package.json

 {
   "name": "element-internals-polyfill",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "A polyfill for the element internals specification",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58388

increased by4.09%

Lines of code

814

increased by5.99%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes