@webtides/element-js 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "module": "index.js",
     "main": "index.js",
     "type": "module",
@@ -37,8 +37,8 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.23.3",
         "@open-wc/testing": "^4.0.0",
-        "@web/dev-server": "^0.4.1",
-        "@web/test-runner": "^0.14.1",
+        "@web/dev-server": "^0.4.6",
+        "@web/test-runner": "^0.19.0",
         "babel-eslint": "^10.1.0",
         "eslint": "8.55.0",
         "eslint-config-prettier": "^9.1.0",

package/src/dom-parts/ChildNodePart.js

@@ -3,31 +3,6 @@ import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { TemplatePart } from './TemplatePart.js';
 
-/**
- * @param {Node | TemplatePart | any[]} node
- * @return {ChildNode}
- */
-const removeChildNodes = (node) => {
-    if (!Array.isArray(node) && !(node instanceof TemplatePart) && !node.hasChildNodes()) {
-        return node;
-    }
-    const range = globalThis.document?.createRange();
-    const firstChild = Array.isArray(node)
-        ? node[0]
-        : node instanceof TemplatePart
-          ? node.childNodes[0]
-          : node.firstChild;
-    const lastChild = Array.isArray(node)
-        ? node[node.length - 1]
-        : node instanceof TemplatePart
-          ? node.childNodes[node.childNodes.length - 1]
-          : node.lastChild;
-    range.setStartAfter(firstChild);
-    range.setEndAfter(lastChild);
-    range.deleteContents();
-    return firstChild;
-};
-
 /**
  * @param {Element} commentNode
  */
@@ -51,31 +26,38 @@ const removeNodesBetweenComments = (commentNode) => {
  * @return {Node[]}
  */
 const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
-    // We always want to have the two arrays (domChildNodes and templateChildNodes) to have the same length.
+    // TODO: when diffing arrays there is sometimes two lists of TemplateParts instead of lists of childNodes
+    const offset = domChildNodes.includes(anchorNode) ? 1 : 0;
+
+    // release first level references to prevent cache mutation
+    const clonedDomChildNodes = [...domChildNodes];
+    const clonedTemplateChildNodes = [...templateChildNodes];
+
+    // We always want to have the two arrays (domChildNodes and cloneTemplateChildNodes) to have the same length.
     // We also don't ever want to replace/diff the last node of the domChildNodes as it will always be the
     // closing comment marker (/template-part) aka the anchorNode. So we push it to the end by inserting undefined items.
-    if (templateChildNodes.length > domChildNodes.length) {
-        const nodesToFill = templateChildNodes.length - domChildNodes.length;
+    if (clonedTemplateChildNodes.length > clonedDomChildNodes.length) {
+        const nodesToFill = clonedTemplateChildNodes.length - clonedDomChildNodes.length;
         for (let i = 0; i < nodesToFill; i++) {
-            domChildNodes.splice(domChildNodes.length - 1, 0, undefined);
+            clonedDomChildNodes.splice(clonedDomChildNodes.length - offset, 0, undefined);
         }
     }
 
-    if (domChildNodes.length > templateChildNodes.length) {
-        const nodesToFill = domChildNodes.length - templateChildNodes.length;
+    if (clonedDomChildNodes.length > clonedTemplateChildNodes.length) {
+        const nodesToFill = clonedDomChildNodes.length - clonedTemplateChildNodes.length;
         for (let i = 0; i < nodesToFill; i++) {
-            templateChildNodes.splice(templateChildNodes.length - 1, 0, undefined);
+            clonedTemplateChildNodes.splice(clonedTemplateChildNodes.length - offset, 0, undefined);
         }
     }
 
-    const length = domChildNodes.length;
+    const length = clonedDomChildNodes.length;
     // Diff each node in the child node lists
     for (let index = 0; index < length; index++) {
-        let domChildNode = domChildNodes[index];
-        let templateChildNode = templateChildNodes[index];
+        let domChildNode = clonedDomChildNodes[index];
+        let templateChildNode = clonedTemplateChildNodes[index];
 
         // If the DOM node doesn't exist, append/copy the template node
-        if (!domChildNode) {
+        if (domChildNode === undefined) {
             if (templateChildNode instanceof TemplatePart) {
                 anchorNode.before(...templateChildNode.childNodes);
             } else if (Array.isArray(templateChildNode)) {
@@ -90,24 +72,47 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
             continue;
         }
 
-        // If the template node doesn't exist, remove the node in the DOM
-        if (!templateChildNode) {
-            parentNode.removeChild(removeChildNodes(domChildNode));
+        if (templateChildNode === undefined) {
+            // If the template node doesn't exist, remove the node in the DOM
+            if ('ELEMENT_NODE' in domChildNode) {
+                // remove dom node
+                parentNode.removeChild(domChildNode);
+            } else if (Array.isArray(domChildNode) || domChildNode instanceof TemplatePart) {
+                // remove childNodes
+                const childNodes = Array.isArray(domChildNode) ? domChildNode : [...domChildNode.childNodes];
+                for (const childNode of childNodes) {
+                    childNode.remove();
+                }
+            } else {
+                console.log('This should not happen... what do we do about this node?!', domChildNode);
+            }
             continue;
         }
 
-        // If DOM node is equal to the template node, don't do anything
+        // If DOM node is equal to the template node, don't do anything in the DOM
         if (
             domChildNode === templateChildNode ||
-            (domChildNode.nodeType === COMMENT_NODE &&
-                templateChildNode.nodeType === COMMENT_NODE &&
-                domChildNode.isEqualNode(templateChildNode))
+            (domChildNode.nodeType && templateChildNode.nodeType && domChildNode.isEqualNode(templateChildNode))
         ) {
+            // but we need to assign the current DOM node into the templateChildNodes
+            // as they will be returned here at the end and become the domNodes for the next diffing.
+            const childIndex = templateChildNodes.indexOf(templateChildNode);
+            templateChildNodes[childIndex] = domChildNode;
             continue;
         }
 
         // Everything else is somehow different and can be replaced
-        parentNode.replaceChild(templateChildNode, domChildNode);
+        if (parentNode.contains(domChildNode)) {
+            parentNode.replaceChild(templateChildNode, domChildNode);
+        } else {
+            console.warn(
+                'This should not happen',
+                parentNode,
+                parentNode.contains(domChildNode),
+                templateChildNode,
+                domChildNode,
+            );
+        }
     }
     return templateChildNodes;
 };
@@ -119,7 +124,7 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
  */
 export const processNodePart = (comment, initialValue) => {
     let nodes = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : [];
-    let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
+    let oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
     // this is for string values to be inserted into the DOM. A cached TextNode will be used so that we don't have to constantly create new DOM nodes.
     let cachedTextNode = undefined;
 
@@ -166,17 +171,16 @@ export const processNodePart = (comment, initialValue) => {
                     oldValue = newValue;
                     break;
                 }
-                // if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
-                if (oldValue !== newValue) {
-                    if ('ELEMENT_NODE' in newValue) {
-                        oldValue = newValue;
-                        nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
-                    } else if (newValue instanceof TemplatePart) {
-                        oldValue = [...newValue.childNodes];
-                        nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
-                    } else {
-                        console.warn('Could not process value', newValue);
-                    }
+
+                if (newValue instanceof TemplatePart && oldValue !== newValue.strings) {
+                    // if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
+                    // static strings have changed in tpl part
+                    oldValue = newValue.strings;
+                    nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
+                } else if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
+                    // DOM Node changed, needs diffing
+                    oldValue = newValue;
+                    nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
                 }
                 break;
             case 'function':
@@ -275,7 +279,9 @@ export class ChildNodePart extends Part {
             this.updateParts(value);
         }
 
-        this.processor?.(parsedValue);
+        if (!(value instanceof TemplateResult)) {
+            this.processor?.(parsedValue);
+        }
     }
 
     /**
@@ -324,6 +330,7 @@ export class ChildNodePart extends Part {
             let value = values[index];
 
             if (value instanceof TemplateResult) {
+                // TODO this is probably wrong. Should only be taken from parts cache if it has the same type (eg. template vs string, mixed types arrays)
                 let templatePart = this.parts[index];
                 if (!templatePart) {
                     const templatePartCommentNodes = this.childNodes?.filter(

package/src/dom-parts/TemplateResult.js

@@ -217,14 +217,18 @@ export class TemplateResult {
      * @param {Element} domNode
      */
     renderInto(domNode) {
-        let serverSideRendered = false;
+        const startNode = Array.from(domNode.childNodes)
+            .filter((node) => node.nodeType === COMMENT_NODE)
+            .find((node) => node.data === 'template-part');
+
+        let serverSideRendered = startNode !== undefined;
+
         let templatePart = templatePartsCache.get(domNode);
-        if (!templatePart) {
-            const startNode = Array.from(domNode.childNodes)
-                .filter((node) => node.nodeType === COMMENT_NODE)
-                .find((node) => node.data === 'template-part');
 
-            serverSideRendered = startNode !== undefined;
+        if (!templatePart || !startNode) {
+            if (!startNode) {
+                domNode.replaceChildren();
+            }
 
             templatePart = new TemplatePart(startNode, this);
             templatePartsCache.set(domNode, templatePart);

package/CHANGELOG.md

@@ -1,402 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres
-to [Semantic Versioning](http://semver.org/).
-
-<!--
-   PRs should document their user-visible changes (if any) in the
-   Unreleased section, uncommenting the header as necessary.
--->
-
-<!-- ## Unreleased -->
-<!-- ### Added -->
-<!-- ### Changed -->
-<!-- ### Removed -->
-<!-- ### Fixed -->
-
-## [1.1.5] - 2024-11-14
-
-### FIXED
-
-- Fixed using special characters in attribute static strings ([#134](https://github.com/webtides/element-js/issues/134))
-
-## [1.1.4] - 2024-11-12
-
-### FIXED
-
-- Fixed rendering interpolations inside textarea nodes ([#133](https://github.com/webtides/element-js/issues/133))
-
-## [1.1.3] - 2024-11-11
-
-### FIXED
-
-- Fixed unsafeHtml having more than one child ([#135](https://github.com/webtides/element-js/issues/135))
-- Fixed early returns from templates and fixes static html changes not reflecting to DOM ([#132](https://github.com/webtides/element-js/issues/132))
-
-
-## [1.1.2] - 2024-10-30
-
-### FIXED
-
-- Fixed rerendering of templates that were initially null, prevent runtime errors
-
-## [1.1.1] - 2024-09-16
-
-### FIXED
-
-- Fixed base url and css rules order in adopted style sheets.
-- Fixed randomUUID not being available in unsecure hosts (like localhost) by adding a helper function
-
-## [1.1.0] - 2024-06-24
-
-### Added
-
-- Added `optionalAttribute` directive to conditionally render attributes (plus value)
-
-### FIXED
-
-- Fixed `spreadAttributes` to not render "null|undefined|NaN" to the attributes value but removing the entire attribute
-  when such values are passed.
-
-## [1.0.0] - 2024-05-24
-
-### Added
-
-- Added our own versions of directives and template helpers ([#67](https://github.com/webtides/element-js/pull/67))
-- Added JSDocs for everything in the codebase. This will especially be helpful when using constructor options.
-- Added state serialization. This improves hydration from SSR a
-  lot. ([#106](https://github.com/webtides/element-js/pull/106))
-- added declarative shadow dom rendering for template elements
-
-### Changed
-
-- _BREAKING_ Uses a new custom renderer for the `TemplateElement`. It replaces the old `lit-html` renderer. The API and
-  usage should be exactly the same. The only thing to do/change is the use of the old `lit-html` directives. For
-  detailed instructions see the upgrade guide. ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ `element-js` will now also trigger the `afterUpdate` hook right after the `connected` hook. This is to
-  reduce the cases where you had to do the same things in `connected` and `afterUpdate`. You can now remove those
-  duplicate calls from the `connected` hook. ([#60](https://github.com/webtides/element-js/pull/60))
-- _BREAKING_ Changed `package.json` type to `module`. This should hopefully not break anything. `element-js` is either
-  used directly from the browser or through a bundler. In both cases the added type: module should not
-  matter. ([#64](https://github.com/webtides/element-js/pull/64))
-- _BRAKING_ Changed the default options when using the `dispatch` helper function. `bubbles`, `cancelable`
-  and `composed` will now be `true` by default.
-- _BRAKING_ Changed adopting global styles to include ALL global styles. Previously only one inline <style> with the ID
-  of '#globalStyles' would be adopted. For more information see the docs.
-
-### Removed
-
-- _BREAKING_ Removed the `lit-html` dependency. `element-js` is now officially dependency
-  free! ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ Removed the deprecated `BaseElement` constructor option `childListUpdate`. Please use the "
-  mutationObserverOptions" dictionary instead. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `hooks` map in the `BaseElement`. Using the hooks() map for lifecycle hooks is deprecated!
-  Please overwrite the existing lifecycle hook functions. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `computed` map in the `BaseElement`. Using the computed() map for computed properties is
-  deprecated! Please use regular JS getters and return the computed value. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed all occurrences of `ShadyCSS`
-  in `StyledElement`. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BRAKING_ Removed the `i18n` helper function. See CHANGELOG how to implement it yourself or use a third party library.
-
-## [1.0.0-alpha.13] - 2024-05-08
-
-### Fixed
-
-- catch security errors when `GlobalStylesStore` tries to read css rules from cross-origin stylesheets.
-
-## [1.0.0-alpha.12] - 2024-03-03
-
-### Added
-
-- added declarative shadow dom rendering for template elements
-
-### Fixed
-
-- fixed issues with whitespace being returned untrimmed in a template result
-
-## [1.0.0-alpha.11] - 2024-03-13
-
-### Fixed
-
-- fixed missing return type `string` for the `template()` function in `TemplateElement`
-- fixed types for the `propertyOptions` option in `BaseElement`
-
-## [1.0.0-alpha.10] - 2024-02-20
-
-### Fixed
-
-- fixed unsafeHTML not rendering anything when toString was called
-- fixed using = sign in attribute positions with interpolations
-- fixed rendering null values in node part positions in SSR
-- fixed missing .js file extensions
-
-## [1.0.0-alpha.9] - 2024-01-05
-
-### Changed
-
-- moved DOM methods into connected callbacks to make it safe for the elements to be created in SSR environments
-
-## [1.0.0-alpha.8] - 2024-01-04
-
-### Fixed
-
-- fixed ChildNodePart not replacing dom nodes from unsafeHTML
-
-## [1.0.0-alpha.7] - 2023-12-19
-
-### Fixed
-
-- fixed wrong attribute parts for the same name on different elements
-
-## [1.0.0-alpha.6] - 2023-12-18
-
-### Fixed
-
-- fixed hyphens in attribute names being split in SSR mode
-
-## [1.0.0-alpha.5] - 2023-12-07
-
-### Added
-
-- Added the /docs directory to the files array in package.json
-- Added part instances as \_\_part to comment nodes
-
-### Fixed
-
-- fixed escaped unsafeHTML in SSR mode
-
-## [1.0.0-alpha.4] - 2023-12-01
-
-### Fixed
-
-- falsy creation of directive parts for non-directive attributes
-- creating parts with wrong comment marker positions
-
-## [1.0.0-alpha.3] - 2023-12-01
-
-### Added
-
-- Added state serialization. This improves hydration from SSR a
-  lot. ([#106](https://github.com/webtides/element-js/pull/106))
-
-### Changed
-
-- _BRAKING_ Changed the default options when using the `dispatch` helper function. `bubbles`, `cancelable`
-  and `composed` will now be `true` by default.
-- _BRAKING_ Changed adopting global styles to include ALL global styles. Previously only one inline <style> with the ID
-  of '#globalStyles' would be adopted. For more information see the docs.
-
-### Removed
-
-- _BRAKING_ Removed `i18n` helper function. See CHANGELOG how to implement it yourself or use a third party library.
-
-## [1.0.0-alpha.2] - 2023-08-23
-
-### Added
-
-- Added JSDocs for everything in the codebase. This will especially be helpful when using constructor options.
-
-## [1.0.0-alpha.1] - 2023-08-15
-
-### Added
-
-- Added our own versions of directives and template helpers ([#67](https://github.com/webtides/element-js/pull/67))
-
-### Changed
-
-- _BRAKING_ Uses a new custom renderer for the `TemplateElement`. It replaces the old `lit-html` renderer. The API and
-  usage should be exactly the same. The only thing to do/change is the use of the old `lit-html` directives. For
-  detailed instructions see the upgrade guide. ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ `element-js` will now also trigger the `afterUpdate` hook right after the `connected` hook. This is to
-  reduce the cases where you had to do the same things in `connected` and `afterUpdate`. You can now remove those
-  duplicate calls from the `connected` hook. ([#60](https://github.com/webtides/element-js/pull/60))
-- _BREAKING_ Changed `package.json` type to `module`. This should hopefully not break anything. `element-js` is either
-  used directly from the browser or through a bundler. In both cases the added type: module should not
-  matter. ([#64](https://github.com/webtides/element-js/pull/64))
-
-### Removed
-
-- _BREAKING_ Removed the `lit-html` dependency. `element-js` is now officially dependency
-  free! ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ Removed the deprecated `BaseElement` constructor option `childListUpdate`. Please use the "
-  mutationObserverOptions" dictionary instead. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `hooks` map in the `BaseElement`. Using the hooks() map for lifecycle hooks is deprecated!
-  Please overwrite the existing lifecycle hook functions. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `computed` map in the `BaseElement`. Using the computed() map for computed properties is
-  deprecated! Please use regular JS getters and return the computed value. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed all occurrences of `ShadyCSS`
-  in `StyledElement`. ([#99](https://github.com/webtides/element-js/pull/99))
-
-## [0.7.4] - 2023-11-24
-
-### Added
-
-- storeception (reactive store properties in parent stores)
-- context injection in shadow elements requests travel though shadow roots
-- defer element connection (disables client side code until called manually)
-
-### Fixed
-
-- late context injection if parent mounts after child (loading order)
-- stores updating elements that want to be updated
-
-## [0.7.3] - 2023-03-07
-
-### Fixed
-
-- last release was tagged wrong
-
-## [0.7.2] - 2023-03-03
-
-### Fixed
-
-- watcher callbacks for injected stores
-
-## [0.7.1] - 2023-03-03
-
-### Added
-
-- Elements are now able to watch Stores
-
-### Fixed
-
-- Injection of falsy values
-
-## [0.7.0] - 2023-02-13
-
-### Added
-
-- Dependency Injection via Context Protocol 💉
-- Provide reactive Properties or entire Stores via: provideProperties() { return { name : value}}
-- Inject / Request them via injectProperties() { return { name : 'defaultValue'}}
-
-### Changed
-
-- docs structure
-
-### Fixed
-
-- Cannot re-render slotted light dom when using the vanilla renderer https://github.com/webtides/element-js/issues/76
-- adds Vanilla Renderer Tests
-
-## [0.6.2] - 2022-11-18
-
-### FIXED
-
-- Store always switching to singleProperty Mode if constructed without any arguments.
-
-## [0.6.1] - 2022-11-18
-
-### ADDED
-
-- Store watch() map to control internal store state scope
-
-## [0.6.0] - 2022-11-17
-
-### ADDED
-
-- StoreProperty for shared application state
-- Directives for Vanilla Renderer
-
-## [0.5.0] - 2022-09-13
-
-### Changed
-
-- improved the performance of the vanilla-renderer
-
-### Removed
-
-- setting attributes as properties during dom diffing for the vanilla renderer. This is potentially a **breaking**
-  change if you used attributes with the "." (dot) notation
-
-## [0.4.3] - 2022-07-06
-
-### ADDED
-
-- parse option to propertyOptions that can be either a boolean OR a function for custom parsing
-- enhance reflect option in propertyOptions that it can also be a function for custom reflection
-
-## [0.4.2] - 2022-02-03
-
-### Fixed
-
-- vanilla-renderer: fixes attribute comparsion
-
-## [0.4.1] - 2022-02-01
-
-### Fixed
-
-- refs="id[]" indexing keys not nodes _rolleyes_
-
-### 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
-
-- i18n fallback values
-
-### Added
-
-- i18n tests
-
-## [0.3.0] - 2020-07-27
-
-### Added
-
-- first batch/draft of the documentation
-- property/attribute reflection via constructor options (see the [Documentation](/docs/README.md#propertyoptions) for
-  more info)
-- mutationObserverOptions to enable observing subtree mutations (see
-  the [Documentation](/docs/README.md#mutationobserveroptions) for more info)
-
-### Removed
-
-- `childListUpdate` constructor option has been deprecated and will be removed before `1.0`
-
-## [0.2.0] - 2020-07-01
-
-### Changed
-
-- uses shady-render instead of render from `lit-html` for rendering templates to be compatible with the shady-css
-  polyfill
-- refactored and simplified `StyledElement`s handling/loading of style sheets
-
-## [0.1.0] - 2020-06-26
-
-- initial release