@symbo.ls/element 3.14.0

package/index.js

@@ -0,0 +1 @@
+export * from './src/index.js'

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@symbo.ls/element",
+  "version": "3.14.0",
+  "description": "Core element creation, update, and disposal engine for smbls v4",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./src/*": "./src/*"
+  },
+  "dependencies": {
+    "@symbo.ls/signal": "^3.14.0",
+    "@symbo.ls/state": "^3.14.0",
+    "@symbo.ls/utils": "^3.14.0",
+    "css-in-props": "^3.14.0",
+    "attrs-in-props": "^3.14.0"
+  },
+  "files": ["src", "index.js"],
+  "license": "CC-BY-NC-4.0"
+}

package/src/cache.js

@@ -0,0 +1,124 @@
+'use strict'
+
+// Node caching - cloneNode from cached prototypes instead of createElement
+// This is already a v3 optimization that works well -- preserved in v4
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+const SVG_TAGS = new Set([
+  'svg', 'path', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+  'rect', 'g', 'defs', 'use', 'symbol', 'clipPath', 'mask',
+  'pattern', 'image', 'text', 'tspan', 'textPath',
+  'marker', 'linearGradient', 'radialGradient', 'stop',
+  'filter', 'feBlend', 'feColorMatrix', 'feComponentTransfer',
+  'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
+  'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage',
+  'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
+  'feSpecularLighting', 'feTile', 'feTurbulence',
+  'animate', 'animateMotion', 'animateTransform', 'set',
+  'foreignObject', 'desc', 'title', 'metadata'
+])
+
+const VALID_HTML_TAGS = new Set([
+  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio',
+  'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button',
+  'canvas', 'caption', 'cite', 'code', 'col', 'colgroup',
+  'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
+  'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
+  'i', 'iframe', 'img', 'input', 'ins', 'kbd',
+  'label', 'legend', 'li', 'link',
+  'main', 'map', 'mark', 'menu', 'meta', 'meter',
+  'nav', 'noscript',
+  'object', 'ol', 'optgroup', 'option', 'output',
+  'p', 'param', 'picture', 'pre', 'progress',
+  'q', 'rp', 'rt', 'ruby',
+  's', 'samp', 'script', 'search', 'section', 'select', 'slot', 'small',
+  'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup',
+  'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead',
+  'time', 'title', 'tr', 'track',
+  'u', 'ul', 'var', 'video', 'wbr',
+  // special
+  'string', 'fragment', 'shadow'
+])
+
+export function isValidTag(tag) {
+  return VALID_HTML_TAGS.has(tag) || SVG_TAGS.has(tag)
+}
+
+export function isSvgTag(tag) {
+  return SVG_TAGS.has(tag)
+}
+
+export function detectTag(element) {
+  let { tag, key } = element
+
+  if (typeof tag === 'function') tag = tag(element)
+  if (tag === true) tag = key
+
+  if (typeof tag === 'string' && isValidTag(tag)) return tag
+  if (!key || typeof key !== 'string') return 'div'
+
+  // Tags that should never be auto-detected from key names
+  const STRUCTURAL_TAGS = new Set([
+    'html', 'head', 'body', 'meta', 'link', 'script', 'style',
+    'title', 'base', 'noscript', 'template'
+  ])
+
+  // Try key as tag
+  let keyAsTag = key.toLowerCase()
+  if (keyAsTag.includes('.')) keyAsTag = keyAsTag.split('.')[0]
+  if (keyAsTag.includes('_')) keyAsTag = keyAsTag.split('_')[0]
+  if (isValidTag(keyAsTag) && !STRUCTURAL_TAGS.has(keyAsTag)) return keyAsTag
+
+  return 'div'
+}
+
+const nodeCaches = {}
+
+export function createHTMLNode(tag, element) {
+  const doc = element?.context?.document || globalThis.document
+  if (!doc) return null
+
+  if (tag === 'string') return doc.createTextNode(element?.text || '')
+  if (tag === 'fragment') return doc.createDocumentFragment()
+
+  if (isSvgTag(tag)) {
+    const parent = element?.parent
+    const inSvgContext = tag === 'svg' || parent?.node?.namespaceURI === SVG_NS
+    if (inSvgContext) {
+      return doc.createElementNS(SVG_NS, tag)
+    }
+    // SVG child tags outside <svg> context — fall back to div
+    if (tag !== 'svg') return doc.createElement('div')
+  }
+
+  return doc.createElement(tag)
+}
+
+export function cacheNode(element) {
+  const tag = element.tag = detectTag(element)
+
+  const isSvgContext = isSvgTag(tag) &&
+    (tag === 'svg' || element.parent?.node?.namespaceURI === SVG_NS)
+  const cacheKey = isSvgContext ? 'svg:' + tag : tag
+
+  const targetDoc = element?.context?.document || globalThis.document
+
+  let cached = nodeCaches[cacheKey]
+  if (!cached) {
+    cached = nodeCaches[cacheKey] = createHTMLNode(tag, element)
+  }
+
+  if (!cached) return null
+
+  // If target document differs from cached node's document (e.g. iframe),
+  // create a fresh node instead of cloning to ensure correct ownerDocument
+  const cloned = (targetDoc && cached.ownerDocument !== targetDoc)
+    ? createHTMLNode(tag, element)
+    : cached.cloneNode(true)
+  if (tag === 'string') cloned.nodeValue = element.text || ''
+  return cloned
+}
+
+export { SVG_TAGS, SVG_NS }