@symbiotejs/symbiote 3.6.0 → 3.7.0

package/README.md

@@ -330,6 +330,7 @@ CSS values are parsed automatically - quoted strings become strings, numbers bec
 ## Best for
 
 - **Complex widgets** embedded in any host application
+- **Low-code HTML-based solutions** - simple declarative everything
 - **Micro frontends** - standard custom elements, no framework coupling
 - **Reusable component libraries** - works in React, Vue, Angular, or plain HTML
 - **SSR-powered apps** - lightweight server rendering without framework lock-in
@@ -359,6 +360,13 @@ All modern browsers: Chrome, Firefox, Safari, Edge, Opera.
 - [AI Reference](https://github.com/symbiotejs/symbiote.js/blob/main/AI_REFERENCE.md)
 - [Changelog](https://github.com/symbiotejs/symbiote.js/blob/main/CHANGELOG.md)
 
+## Related articles
+
+- [Symbiote.js: superpowers for Web Components](https://dev.to/foxeyes/symbiotejs-superpowers-for-web-components-1gid)
+- [Symbiote.js: v3 highlights](https://dev.to/foxeyes/symbiotejs-v3-web-components-with-ssr-in-6kb-10n6)
+- [Symbiote.js vs Lit](https://dev.to/foxeyes/lit-vs-symbiotejs-22gj)
+- [JSDA Stack - A Revolutionary Simple Approach to Build Modern Web](https://dev.to/foxeyes/jsda-kit-a-revolutionary-simple-approach-to-build-modern-web-1dip)
+
 **Questions or proposals? Welcome to [Symbiote Discussions](https://github.com/symbiotejs/symbiote.js/discussions)!** ❤️
 
 ---

package/core/html.js

@@ -10,6 +10,35 @@ export const RESERVED_ATTRIBUTES = [
   DICT.CTX_NAME_ATTR,
 ];
 
+const RESERVED_ATTRIBUTES_SET = new Set(RESERVED_ATTRIBUTES);
+const SELF_CLOSING_CUSTOM_ELEMENT_RE = /<([a-z][.0-9_a-z]*-[\-.0-9_a-z]*)(\s+(?:"[^"]*"|'[^']*'|[^'"<>])*)?\/>/gi;
+
+function hasImmediateClosingTag(htmlString, startIdx, tagName) {
+  let idx = startIdx;
+  let len = htmlString.length;
+  while (idx < len) {
+    let code = htmlString.charCodeAt(idx);
+    if (code !== 32 && code !== 9 && code !== 10 && code !== 12 && code !== 13) break;
+    idx++;
+  }
+  if (htmlString.charCodeAt(idx) !== 60 || htmlString.charCodeAt(idx + 1) !== 47) return false;
+  let tagStart = idx + 2;
+  if (htmlString.charCodeAt(tagStart + tagName.length) !== 62) return false;
+  let closingTagName = htmlString.slice(tagStart, tagStart + tagName.length);
+  return closingTagName === tagName || closingTagName.toLowerCase() === tagName.toLowerCase();
+}
+
+function closeSelfClosingCustomElements(resultHtml) {
+  if (resultHtml.indexOf('/>') === -1) return resultHtml;
+  return resultHtml.replace(SELF_CLOSING_CUSTOM_ELEMENT_RE, (match, tagName, attrs = '', offset, htmlString) => {
+    let openTag = `<${tagName}${attrs && attrs.trimEnd()}>`;
+    if (hasImmediateClosingTag(htmlString, offset + match.length, tagName)) {
+      return openTag;
+    }
+    return `${openTag}</${tagName}>`;
+  });
+}
+
 /** @typedef {Record<keyof import('./Symbiote.js').Symbiote, String>} BindDescriptor */
 
 /**
@@ -20,19 +49,20 @@ export const RESERVED_ATTRIBUTES = [
  */
 export function html(parts, ...props) {
   let resultHtml = '';
-  parts.forEach((part, idx) => {
-    resultHtml += part;
-    if (idx >= props.length) return;
+  let propsLength = props.length;
+  for (let idx = 0; idx < parts.length; idx++) {
+    resultHtml += parts[idx];
+    if (idx >= propsLength) continue;
     let val = props[idx];
     if (val === undefined || val === null) {
       errMsg(15, val);
-      return;
+      continue;
     }
-    if (val?.constructor === Object) {
+    if (val.constructor === Object) {
       let bindStr = '';
       // @ts-expect-error
       for (let key in val) {
-        if (RESERVED_ATTRIBUTES.includes(key)) {
+        if (RESERVED_ATTRIBUTES_SET.has(key)) {
           resultHtml += ` ${key}="${val[key]}"`;
         } else {
           bindStr += `${key}:${val[key]};`;
@@ -42,8 +72,8 @@ export function html(parts, ...props) {
     } else {
       resultHtml += val;
     }
-  });
-  return resultHtml;
+  }
+  return closeSelfClosingCustomElements(resultHtml);
 }
 
 export default html;

package/core/tpl-processors.js

@@ -105,17 +105,25 @@ function getTextNodesWithTokens(el) {
   let isCustomEl = el instanceof HTMLElement && el.localName?.includes('-');
   let node;
   let result = [];
-  let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
-    acceptNode: (txt) => {
-      if (isCustomEl && !isOwnNode(txt, el)) return NodeFilter.FILTER_REJECT;
-      return !txt.parentElement?.hasAttribute(DICT.TEXT_NODE_SKIP_ATTR) 
-        && txt.textContent.includes(DICT.TEXT_NODE_OPEN_TOKEN) 
-        && txt.textContent.includes(DICT.TEXT_NODE_CLOSE_TOKEN) 
-        && 1;
-    },
-  });
-  while ((node = walk.nextNode())) {
-    result.push(node);
+  let acceptNode = (txt) => {
+    if (isCustomEl && !isOwnNode(txt, el)) return NodeFilter.FILTER_REJECT;
+    return !txt.parentElement?.hasAttribute(DICT.TEXT_NODE_SKIP_ATTR)
+      && txt.textContent.includes(DICT.TEXT_NODE_OPEN_TOKEN)
+      && txt.textContent.includes(DICT.TEXT_NODE_CLOSE_TOKEN)
+      ? NodeFilter.FILTER_ACCEPT
+      : NodeFilter.FILTER_REJECT;
+  };
+  let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, acceptNode);
+  if (globalThis.__SYMBIOTE_SSR) {
+    while ((node = walk.nextNode())) {
+      if (acceptNode(node) === NodeFilter.FILTER_ACCEPT) {
+        result.push(node);
+      }
+    }
+  } else {
+    while ((node = walk.nextNode())) {
+      result.push(node);
+    }
   }
   return result;
 }

package/node/SSR.js

@@ -304,11 +304,36 @@ export class SSR {
   static async init() {
     // @ts-ignore
     let { parseHTML } = /** @type {any} */ (await import('linkedom'));
-    let { document, window, HTMLElement, customElements, DocumentFragment, NodeFilter, MutationObserver } = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
+    let { document, window, HTMLElement, customElements, DocumentFragment, NodeFilter, MutationObserver, Text } = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
 
     SSR.#doc = document;
     SSR.#win = window;
 
+    // Polyfill splitText for linkedom:
+    if (!Text.prototype.splitText) {
+      Text.prototype.splitText = function(offset) {
+        let nextNode = document.createTextNode(this.textContent.substring(offset));
+        this.textContent = this.textContent.substring(0, offset);
+        if (this.parentNode) {
+          this.parentNode.insertBefore(nextNode, this.nextSibling);
+        }
+        return nextNode;
+      };
+    }
+
+    // Polyfill textContent on DocumentFragment for linkedom:
+    if (!('textContent' in DocumentFragment.prototype) || !Object.getOwnPropertyDescriptor(DocumentFragment.prototype, 'textContent')?.get) {
+      Object.defineProperty(DocumentFragment.prototype, 'textContent', {
+        get() {
+          return this.childNodes.map(n => n.nodeType === 3 ? n.textContent : (n.textContent || '')).join('');
+        },
+        set(val) {
+          while (this.firstChild) this.removeChild(this.firstChild);
+          this.appendChild(document.createTextNode(val));
+        }
+      });
+    }
+
     // Polyfill CSSStyleSheet for linkedom:
     if (!window.CSSStyleSheet || !('replaceSync' in (window.CSSStyleSheet?.prototype || {}))) {
       class SSRStyleSheet {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Symbiote.js - zero-dependency close-to-platform frontend library to build super-powered web components",
   "author": "team@rnd-pro.com",
   "license": "MIT",

package/types/core/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../core/html.js"],"names":[],"mappings":"AAoBA,qBALa,CAAC,SACH,oBAAoB,YACpB,CAAC;QAAO,MAAM;CAAS,GAAG,cAAc,YAAY,CAAC,CAAC,EAAE,UA6BlE;AA1CD,kCADW,QAAQ,CAOjB;;6BAEY,MAAM,CAAC,MAAM,qCAAgC,SAAS"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../core/html.js"],"names":[],"mappings":"AAiDA,qBALa,CAAC,SACH,oBAAoB,YACpB,CAAC;QAAO,MAAM;CAAS,GAAG,cAAc,YAAY,CAAC,CAAC,EAAE,UA8BlE;AAxED,kCADW,QAAQ,CAOjB;;6BA+BY,MAAM,CAAC,MAAM,qCAAgC,SAAS"}

package/types/core/tpl-processors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":";0BA2HgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC;;iCAzHqB,uBAAuB"}
+{"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":";0BAmIgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC;;iCAjIqB,uBAAuB"}

package/types/node/SSR.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SSR.d.ts","sourceRoot":"","sources":["../../node/SSR.js"],"names":[],"mappings":"AAsSA;IAEE,8BAAmB;IACnB,8BAAmB;IAMnB;;;OAkEC;IAMD,uBAYC;IAkBD,yBAZW,MAAM,YACN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,OAAO,CAAC,MAAM,CAAC,CAgC3B;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,MAAM,CAwBlB;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,cAAc,CAAC,MAAM,CAAC,CAqBlC;CACF"}
+{"version":3,"file":"SSR.d.ts","sourceRoot":"","sources":["../../node/SSR.js"],"names":[],"mappings":"AAsSA;IAEE,8BAAmB;IACnB,8BAAmB;IAMnB;;;OA2FC;IAMD,uBAYC;IAkBD,yBAZW,MAAM,YACN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,OAAO,CAAC,MAAM,CAAC,CAgC3B;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,MAAM,CAwBlB;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,cAAc,CAAC,MAAM,CAAC,CAqBlC;CACF"}