@webtides/element-js 0.3.2-rc.6 → 0.4.1

package/CHANGELOG.md

@@ -15,6 +15,36 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## [0.4.1] - 2022-02-01
+
+### Fixed
+* vanilla-renderer: fixes attribute comparsion 
+
+### Added
+* refs="id[]" aka possibbility to refrence a list of nodes to the $refs map. 
+
+## [0.4.0] - 2022-01-28
+
+### Added
+* a "vanilla" renderer with support for hydration and no dependencies
+
+### Changed
+* uses new @web/test-runner isntead of karma (#27)
+
+## [0.3.3] - 2021-09-22
+
+### Added
+* optional complex event callback notation to support addEventListener options (i.E. for passive Event Listeners )
+* Example:  {listener: () => {}, options: { passive: true } }
+* docs
+* tests
+
+
+## [0.3.2] - 2021-03-09
+
+### Added
+* bundled version of `element-js` to use from a CDN and be able to prototype in tools like CodePen etc.
+
 ## [0.3.1] - 2020-12-08
 
 ### Fixed 

package/README.md

@@ -77,30 +77,9 @@ To use this element, just import it and use it like any other HTML element
 
 For detailed documentation see the [Docs](docs/README.md).
 
-## Development
+## Contributing & Development
 
-### We use eslint and prettier to ensure good code quality
-
-Prettier will run automatically when staging files via `git`.
-To run the linter manually - simply run `npm run lint`.
-
-### Git Branching
-
-We use a trunk-based development workflow.
-
-> In the trunk-based development model, all developers work on a single branch with open access to it. Often it’s simply the main branch. They commit code to it and run it. It’s super simple.
-> In some cases, they create short-lived feature branches. Once code on their branch compiles and passes all tests, they merge it straight to main. It ensures that development is truly continuous and prevents developers from creating merge conflicts that are difficult to resolve.
-
-As a Release is complete the main branch will be tagged with the new release version.
-
-### Pull Requests 
-
-Pull requests should take place whenever a: 
-
-- FEATURE is about to be finished
-- RELEASE is about to be finished   
-
-When all Reviewers approved a PR the feature/release may be finished locally and pushed to the remote
+For contributions and development see [contributing docs](.github/CONTRIBUTING.md)
 
 ## License
 

package/dist/index.js

@@ -314,9 +314,17 @@ var BaseElement = class extends HTMLElement {
       const eventTargets = whiteListElement ? [whiteListElement] : this.getRoot().querySelectorAll(elementSelector);
       eventTargets.forEach((eventTarget) => {
         Object.keys(events).forEach((eventName) => {
-          const callback = events[eventName].bind(this);
-          eventTarget.addEventListener(eventName, callback);
-          this._registeredEvents.push({eventTarget, eventName, callback});
+          var _a;
+          const notation = events[eventName];
+          if (typeof notation === "function") {
+            const callback = notation.bind(this);
+            eventTarget.addEventListener(eventName, callback);
+            this._registeredEvents.push({eventTarget, eventName, callback});
+          } else if (typeof notation === "object" && typeof notation.listener === "function") {
+            const callback = notation.listener.bind(this);
+            eventTarget.addEventListener(eventName, callback, (_a = notation.options) != null ? _a : {});
+            this._registeredEvents.push({eventTarget, eventName, callback});
+          }
         });
       });
     });
@@ -335,7 +343,19 @@ var BaseElement = class extends HTMLElement {
     const refsMap = {};
     refsArray.forEach((refNode) => {
       const refKey = refNode.getAttribute("ref");
-      refsMap[refKey] = refNode;
+      const isListKey = refKey.endsWith("[]");
+      const cleanKey = isListKey ? refKey.slice(0, -2) : refKey;
+      const hasListRef = Array.isArray(refsMap[cleanKey]);
+      if (isListKey) {
+        if (!refsMap[cleanKey] || !hasListRef) {
+          refsMap[cleanKey] = [];
+        }
+        refsMap[cleanKey].push(cleanKey);
+      } else if (!hasListRef) {
+        refsMap[refKey] = refNode;
+      } else {
+        console.warn(`Did not register singular ref ${refKey}, ${refNode} as a ref list is already registered under the same name.`);
+      }
     });
     this.$refs = refsMap;
   }