feat: Use WeakMap to manage list of registered elements

Referring to data attributes is not safe, because the HTML
of the page can be mutated by other code. Using direct reference
to the elements in a weak map should let us safely test for
active widgets, and also allow garbage collection

src/initWidgets.js

@@ -3,6 +3,30 @@ import { extractOptions } from '@g2crowd/extract-options';
 import camelize from './camelize';
 import { strategies } from './strategies';
 
+const widgetTracker = function () {
+  const elements = new WeakMap();
+
+  return {
+    get: function (widgetName, element) {
+      const widgets = elements.get(element);
+
+      return widgets && widgets.get(widgetName);
+    },
+
+    set: function (widgetName, element, value) {
+      if (!elements.has(element)) {
+        elements.set(element, new Map());
+      }
+
+      elements.get(element).set(widgetName, value);
+    },
+
+    has: function (widgetName, element) {
+      return this.get(widgetName, element) !== undefined;
+    }
+  };
+};
+
 function simpleCaste(value) {
   try {
     return JSON.parse(value);
@@ -38,14 +62,14 @@ const wrapPlugin = function wrapPlugin(name, pluginFn, element) {
   };
 };
 
-const loadWidget = function (element, name, widgetQueue, registered) {
-  const existingPlugin = element.dataset[`vvidget_${camelize(name)}`];
+const loadWidget = function (element, name, widgetQueue, registered, initiatedWidgets) {
   const pluginFn = registered[name];
 
   if (!pluginFn) {
     return;
   }
 
+  const existingPlugin = initiatedWidgets.get(name, element);
   const wrapped = wrapPlugin(name, pluginFn, element);
 
   if (!existingPlugin) {
@@ -54,10 +78,12 @@ const loadWidget = function (element, name, widgetQueue, registered) {
     });
     widgetQueue.flush();
 
+    initiatedWidgets.set(name, element, true);
     element.dataset[`vvidget_${camelize(name)}`] = true;
   }
 };
 
+const initiatedWidgets = widgetTracker();
 export const widgetInitiator = function ({ attr, data, registered }, fn = loadWidget) {
   const widgetQueue = queue();
   registered = registered || {};
@@ -69,7 +95,7 @@ export const widgetInitiator = function ({ attr, data, registered }, fn = loadWi
       names
         .split(' ')
         .filter((i) => i)
-        .forEach((name) => fn(element, name, widgetQueue, registered));
+        .forEach((name) => fn(element, name, widgetQueue, registered, initiatedWidgets));
     });
   };
 };

test/index.test.js

@@ -73,7 +73,10 @@ describe('with attr=ue and data=ue-widget', () => {
 
   describe('when two widgets are on the same element', () => {
     beforeEach(() => {
-      document.body.innerHTML += `<div id='three' ue='widget-one widget-two' data-widget-one-x=1></div>`;
+      document.body.insertAdjacentHTML(
+        'beforeend',
+        `<div id='three' ue='widget-one widget-two' data-widget-one-x=1></div>`
+      );
     });
 
     test('does not mark the new widget', (done) => {
@@ -98,7 +101,7 @@ describe('with attr=ue and data=ue-widget', () => {
 
   describe('when unregisted widget is appended', () => {
     beforeEach(() => {
-      document.body.innerHTML += `<div id='three' ue='widget-three'></div>`;
+      document.body.insertAdjacentHTML('beforeend', `<div id='three' ue='widget-three'></div>`);
       trigger(document, 'page-refreshed');
     });
 
@@ -112,7 +115,7 @@ describe('with attr=ue and data=ue-widget', () => {
 
   describe('when another widget is appended', () => {
     beforeEach(() => {
-      document.body.innerHTML += `<div id='three' ue='widget-one' data-widget-one-x=1></div>`;
+      document.body.insertAdjacentHTML('beforeend', `<div id='three' ue='widget-one' data-widget-one-x=1></div>`);
     });
 
     test('does not mark the new widget', (done) => {