apprun 3.36.0 → 3.37.0

package/src/vdom-my-new.ts

@@ -0,0 +1,311 @@
+import { VDOM, VNode } from './types';
+import directive from './directive';
+export type Element = any; //HTMLElement | SVGSVGElement | SVGElement;
+
+export function Fragment(props, ...children): any[] {
+  return collect(children);
+}
+
+const ATTR_PROPS = '_props';
+
+function collect(children) {
+  const ch = [];
+  const push = (c) => {
+    if (c !== null && c !== undefined && c !== '' && c !== false) {
+      ch.push((typeof c === 'function' || typeof c === 'object') ? c : `${c}`);
+    }
+  }
+  children && children.forEach(c => {
+    if (Array.isArray(c)) {
+      c.forEach(i => push(i));
+    } else {
+      push(c);
+    }
+  });
+  return ch;
+}
+
+export function createElement(tag: string | Function | [], props?: {}, ...children) {
+  const ch = collect(children);
+  if (typeof tag === 'string') return { tag, props, children: ch };
+  else if (Array.isArray(tag)) return tag; // JSX fragments - babel
+  else if (tag === undefined && children) return ch; // JSX fragments - typescript
+  else if (Object.getPrototypeOf(tag).__isAppRunComponent) return { tag, props, children: ch } // createComponent(tag, { ...props, children });
+  else if (typeof tag === 'function') return tag(props, ch);
+  else throw new Error(`Unknown tag in vdom ${tag}`);
+};
+
+const keyCache = {};
+
+export const updateElement = (element: Element | string, nodes: VDOM, component = {}) => {
+  // tslint:disable-next-line
+  if (nodes == null || nodes === false) return;
+  const el = (typeof element === 'string' && element) ?
+    document.getElementById(element) || document.querySelector(element) : element;
+  nodes = directive(nodes, component);
+  render(el, nodes, component);
+}
+
+function render(element: Element, nodes: VDOM, parent = {}) {
+  // tslint:disable-next-line
+  if (nodes == null || nodes === false) return;
+  nodes = createComponent(nodes, parent);
+  if (!element) return;
+  const isSvg = element.nodeName === "SVG";
+  if (Array.isArray(nodes)) {
+    updateChildren(element, nodes, isSvg);
+  } else {
+    updateChildren(element, [nodes], isSvg);
+  }
+}
+
+function same(el: Element, node: VNode) {
+  // if (!el || !node) return false;
+  const key1 = el.nodeName;
+  const key2 = `${node.tag || ''}`;
+  return key1.toUpperCase() === key2.toUpperCase();
+}
+
+function update(element: Element, node: VNode, isSvg: boolean) {
+  // console.assert(!!element);
+  isSvg = isSvg || node.tag === "svg";
+  if (!same(element, node)) {
+    element.parentNode.replaceChild(create(node, isSvg), element);
+    return;
+  }
+  updateChildren(element, node.children, isSvg);
+  updateProps(element, node.props, isSvg);
+}
+
+function updateChildren(element: Element, children: any[], isSvg: boolean) {
+  const old_len = element.childNodes?.length || 0;
+  const new_len = children?.length || 0;
+
+  // Handle key-based reordering first if any children have keys
+  const hasKeysInNewChildren = children?.some(child =>
+    child && typeof child === 'object' && child.props && child.props.key !== undefined
+  );
+
+  if (hasKeysInNewChildren) {
+    // Create a map of existing keyed elements
+    const existingKeyedElements = new Map();
+    for (let i = 0; i < old_len; i++) {
+      const el = element.childNodes[i];
+      if (el && el.key) {
+        existingKeyedElements.set(el.key, el);
+      }
+    }
+
+    // Build new DOM structure
+    const fragment = document.createDocumentFragment();
+    for (let i = 0; i < new_len; i++) {
+      const child = children[i];
+      if (child == null) continue;
+
+      const key = child.props && child.props['key'];
+      if (key && existingKeyedElements.has(key)) {
+        // Reuse existing element
+        const existingEl = existingKeyedElements.get(key);
+        update(existingEl, child as VNode, isSvg);
+        fragment.appendChild(existingEl);
+        existingKeyedElements.delete(key); // Mark as used
+      } else {
+        // Create new element
+        fragment.appendChild(create(child, isSvg));
+      }
+    }
+
+    // Clear current children and append new structure
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+    element.appendChild(fragment);
+    return;
+  }
+
+  // Original non-keyed logic
+  const len = Math.min(old_len, new_len);
+  for (let i = 0; i < len; i++) {
+    const child = children[i];
+    if (child == null) continue;
+    const el = element.childNodes[i];
+    if (!el) continue; // Safety check for undefined childNodes
+    if (typeof child === 'string') {
+      if (el.nodeType === 3) {
+        if (el.nodeValue !== child) {
+          el.nodeValue = child;
+        }
+      } else {
+        element.replaceChild(createText(child), el);
+      }
+    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+      element.replaceChild(child, el);
+    } else if (child && typeof child === 'object') {
+      update(element.childNodes[i], child as VNode, isSvg);
+    }
+  }
+
+  // Remove extra old nodes
+  while (element.childNodes.length > len) {
+    element.removeChild(element.lastChild);
+  }
+
+  if (new_len > len) {
+    const d = document.createDocumentFragment();
+    for (let i = len; i < children.length; i++) {
+      const child = children[i];
+      if (child != null) {
+        d.appendChild(create(child, isSvg));
+      }
+    }
+    element.appendChild(d);
+  }
+}
+
+export const safeHTML = (html: string) => {
+  const div = document.createElement('section');
+  div.insertAdjacentHTML('afterbegin', html)
+  return Array.from(div.children);
+}
+
+function createText(node) {
+  if (node?.indexOf('_html:') === 0) { // ?
+    const div = document.createElement('div');
+    div.insertAdjacentHTML('afterbegin', node.substring(6))
+    return div;
+  } else {
+    return document.createTextNode(node ?? '');
+  }
+}
+
+function create(node: VNode | string | HTMLElement | SVGElement, isSvg: boolean): Element {
+  // console.assert(node !== null && node !== undefined);
+  if ((node instanceof HTMLElement) || (node instanceof SVGElement)) return node;
+  if (typeof node === "string") return createText(node);
+
+  // Type guard for VNode objects - handle invalid node types gracefully
+  if (!node || typeof node !== 'object' || !node.tag || (typeof node.tag === 'function')) {
+    return createText(typeof node === 'object' ? JSON.stringify(node) : String(node ?? ''));
+  }
+
+  isSvg = isSvg || node.tag === "svg";
+  const element = isSvg
+    ? document.createElementNS("http://www.w3.org/2000/svg", node.tag)
+    : document.createElement(node.tag);
+
+  updateProps(element, node.props, isSvg);
+  if (node.children) node.children.forEach(child => element.appendChild(create(child, isSvg)));
+  return element
+}
+
+function mergeProps(oldProps: {}, newProps: {}): {} {
+  newProps['class'] = newProps['class'] || newProps['className'];
+  delete newProps['className'];
+  const props = {};
+  if (oldProps) Object.keys(oldProps).forEach(p => props[p] = null);
+  if (newProps) Object.keys(newProps).forEach(p => props[p] = newProps[p]);
+  return props;
+}
+
+export function updateProps(element: Element, props: {}, isSvg) {
+  // console.assert(!!element);
+  const cached = element[ATTR_PROPS] || {};
+  props = mergeProps(cached, props || {});
+  element[ATTR_PROPS] = props;
+
+  for (const name in props) {
+    const value = props[name];
+    // if (cached[name] === value) continue;
+    // console.log('updateProps', name, value);
+    if (name.startsWith('data-')) {
+      const dname = name.substring(5);
+      const cname = dname.replace(/-(\w)/g, (match) => match[1].toUpperCase());
+      if (element.dataset[cname] !== value) {
+        if (value || value === "") element.dataset[cname] = value;
+        else delete element.dataset[cname];
+      }
+    } else if (name === 'style') {
+      if (element.style.cssText) element.style.cssText = '';
+      if (typeof value === 'string') element.style.cssText = value;
+      else {
+        for (const s in value) {
+          if (element.style[s] !== value[s]) element.style[s] = value[s];
+        }
+      }
+    } else if (name.startsWith('xlink')) {
+      const xname = name.replace('xlink', '').toLowerCase();
+      if (value == null || value === false) {
+        element.removeAttributeNS('http://www.w3.org/1999/xlink', xname);
+      } else {
+        element.setAttributeNS('http://www.w3.org/1999/xlink', xname, value);
+      }
+    } else if (name.startsWith('on')) {
+      if (!value || typeof value === 'function') {
+        element[name] = value;
+      } else if (typeof value === 'string') {
+        if (value) element.setAttribute(name, value);
+        else element.removeAttribute(name);
+      }
+    } else if (/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-|^for$/g.test(name) || isSvg) {
+      if (element.getAttribute(name) !== value) {
+        if (value) element.setAttribute(name, value);
+        else element.removeAttribute(name);
+      }
+    } else if (element[name] !== value) {
+      element[name] = value;
+    }
+    if (name === 'key' && value !== undefined) {
+      keyCache[value] = element;
+      element.key = value; // Set key property on the DOM element
+    }
+  }
+  if (props && typeof props['ref'] === 'function') {
+    window.requestAnimationFrame(() => props['ref'](element));
+  }
+}
+
+function render_component(node, parent, idx) {
+  const { tag, props, children } = node;
+  let key = `_${idx}`;
+  let id = props && props['id'];
+  if (!id) id = `_${idx}${Date.now()}`;
+  else key = id;
+  let asTag = 'section';
+  if (props && props['as']) {
+    asTag = props['as'];
+    delete props['as'];
+  }
+  if (!parent.__componentCache) parent.__componentCache = {};
+  let component = parent.__componentCache[key];
+  if (!component || !(component instanceof tag) || !component.element) {
+    const element = document.createElement(asTag);
+    component = parent.__componentCache[key] = new tag({ ...props, children }).mount(element, { render: true });
+  } else {
+    component.renderState(component.state);
+  }
+  if (component.mounted) {
+    const new_state = component.mounted(props, children, component.state);
+    (typeof new_state !== 'undefined') && component.setState(new_state);
+  }
+  updateProps(component.element, props, false);
+  return component.element;
+}
+
+function createComponent(node, parent, idx = 0) {
+  if (typeof node === 'string') return node;
+  if (Array.isArray(node)) return node.map(child => createComponent(child, parent, idx++));
+  let vdom = node;
+  if (node && typeof node.tag === 'function' && Object.getPrototypeOf(node.tag).__isAppRunComponent) {
+    vdom = render_component(node, parent, idx);
+  }
+  if (vdom && Array.isArray(vdom.children)) {
+    const new_parent = vdom.props?._component;
+    if (new_parent) {
+      let i = 0;
+      vdom.children = vdom.children.map(child => createComponent(child, new_parent, i++));
+    } else {
+      vdom.children = vdom.children.map(child => createComponent(child, parent, idx++));
+    }
+  }
+  return vdom;
+}

package/src/vdom-my-prop-attr.ts

@@ -0,0 +1,241 @@
+/**
+ * VDOM Property and Attribute Handler
+ * Standards-compliant property/attribute handling with caching and special element support
+ * Features: Skip logic for preserving user interactions during VDOM reconciliation
+ * Exports: updateProps - Main function for DOM element property updates
+ * Updated: 2025-01-14 - Added skip logic for focus-sensitive, scroll, and media properties
+ */
+
+import { find, html, svg } from 'property-information';
+
+const ATTR_PROPS = '_props';
+const propertyInfoCache = new Map<string, any>();
+
+// Merge old and new props, handling className -> class conversion and null cleanup
+function mergeProps(oldProps: { [key: string]: any }, newProps: { [key: string]: any }): { [key: string]: any } {
+  if (newProps) {
+    newProps['class'] = newProps['class'] || newProps['className'];
+    delete newProps['className'];
+  }
+
+  if (!oldProps || Object.keys(oldProps).length === 0) return newProps || {};
+  if (!newProps || Object.keys(newProps).length === 0) {
+    const props: { [key: string]: any } = {};
+    Object.keys(oldProps).forEach(p => props[p] = null);
+    return props;
+  }
+
+  const props: { [key: string]: any } = {};
+  Object.keys(oldProps).forEach(p => {
+    if (!(p in newProps)) props[p] = null;
+  });
+  Object.keys(newProps).forEach(p => props[p] = newProps[p]);
+  return props;
+}
+
+// Convert kebab-case to camelCase for dataset keys
+function convertKebabToCamelCase(str: string): string {
+  if (str.length <= 1) return str.toLowerCase();
+  return str.split('-').map((word, index) =>
+    index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+  ).join('');
+}
+
+// Cached property information lookup
+function getPropertyInfo(name: string, isSvg: boolean) {
+  const cacheKey = `${name}:${isSvg}`;
+  let info = propertyInfoCache.get(cacheKey);
+  if (info === undefined) {
+    info = find(isSvg ? svg : html, name) || null;
+    propertyInfoCache.set(cacheKey, info);
+  }
+  return info;
+}
+
+
+// Specialized handlers for different attribute types
+function setDatasetAttribute(element: Element, attributeName: string, value: any): void {
+  const camelKey = convertKebabToCamelCase(attributeName.slice(5));
+  if (value == null) {
+    delete (element as HTMLElement).dataset[camelKey];
+  } else {
+    (element as HTMLElement).dataset[camelKey] = String(value);
+  }
+}
+
+function setEventHandler(element: Element, name: string, value: any): void {
+  if (!name.startsWith('on')) return;
+
+  if (!value || typeof value === 'function') {
+    (element as any)[name] = value;
+  } else if (typeof value === 'string') {
+    if (value) element.setAttribute(name, value);
+    else element.removeAttribute(name);
+  }
+}
+
+function setBooleanAttribute(element: Element, attributeName: string, value: any): void {
+  if (shouldSetBooleanAttribute(value)) {
+    element.setAttribute(attributeName, attributeName);
+  } else {
+    element.removeAttribute(attributeName);
+  }
+}
+
+function setElementProperty(element: Element, propertyName: string, value: any): void {
+  try {
+    (element as any)[propertyName] = value;
+  } catch (error) {
+    setElementAttribute(element, propertyName, value, false);
+  }
+}
+
+function setElementAttribute(element: Element, attributeName: string, value: any, isSvg: boolean): void {
+  if (value == null) {
+    element.removeAttribute(attributeName);
+    return;
+  }
+
+  const stringValue = String(value);
+  if (isSvg && attributeName.includes(':')) {
+    const [prefix] = attributeName.split(':');
+    if (prefix === 'xlink') {
+      element.setAttributeNS('http://www.w3.org/1999/xlink', attributeName, stringValue);
+    } else {
+      element.setAttribute(attributeName, stringValue);
+    }
+  } else {
+    element.setAttribute(attributeName, stringValue);
+  }
+}
+
+function shouldSetBooleanAttribute(value: any): boolean {
+  if (value == null || value === false || value === '') return false;
+  if (value === true) return true;
+  if (typeof value === 'string') {
+    const lowerValue = value.toLowerCase();
+    return lowerValue !== 'false' && value !== '0';
+  }
+  return Boolean(value);
+}
+
+// Core property/attribute setting function - handles all property types with skip logic
+function setAttributeOrProperty(element: Element, name: string, value: any, isSvg: boolean): void {
+  // Check if we should skip this property update to preserve user interaction
+  if (shouldSkipPatch(element as HTMLElement, name)) {
+    return;
+  }
+
+  // Special cases with dedicated handling
+  if (name === 'style') {
+    if ((element as HTMLElement).style.cssText) (element as HTMLElement).style.cssText = '';
+    if (typeof value === 'string') (element as HTMLElement).style.cssText = value;
+    else if (value && typeof value === 'object') {
+      for (const s in value) {
+        if ((element as HTMLElement).style[s] !== value[s]) (element as HTMLElement).style[s] = value[s];
+      }
+    }
+    return;
+  }
+
+  if (name === 'key') {
+    if (value !== undefined && value !== null) (element as any).key = value;
+    return;
+  }
+
+  if (name.startsWith('data-')) {
+    setDatasetAttribute(element, name, value);
+    return;
+  }
+
+  if (name.startsWith('on')) {
+    setEventHandler(element, name, value);
+    return;
+  }
+
+  // Form elements with special property requirements
+  if ((element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') &&
+    (name === 'value' || name === 'selected' || name === 'selectedIndex')) {
+    setElementProperty(element, name, value);
+    return;
+  }
+
+  // Input checked needs both property and attribute
+  if (element.tagName === 'INPUT' && name === 'checked') {
+    setElementProperty(element, name, value);
+    setBooleanAttribute(element, name, value);
+    return;
+  }
+
+  // Use property information for standard attributes
+  const info = getPropertyInfo(name, isSvg);
+  if (info) {
+    if (info.boolean || info.overloadedBoolean) {
+      setBooleanAttribute(element, info.attribute, value);
+    } else if (info.mustUseProperty && !isSvg) {
+      setElementProperty(element, info.property, value);
+    } else {
+      setElementAttribute(element, info.attribute, value, isSvg);
+    }
+  } else {
+    // Fallback handling for unknown attributes
+    if (name.startsWith('aria-') || name === 'role') {
+      setElementAttribute(element, name, value, isSvg);
+    } else if (name in element || (element as any)[name] !== undefined) {
+      setElementProperty(element, name, value);
+    } else {
+      setElementAttribute(element, name, value, isSvg);
+    }
+  }
+}
+
+// Skip logic for preventing user interaction disruption during VDOM reconciliation
+function shouldSkipPatch(dom: HTMLElement, prop: string): boolean {
+  if (document.activeElement === dom) {
+    return ['value', 'selectionStart', 'selectionEnd', 'selectionDirection']
+      .includes(prop);
+  }
+  if (prop === 'scrollTop' || prop === 'scrollLeft') {
+    return true;
+  }
+  if (dom instanceof HTMLMediaElement &&
+    ['currentTime', 'paused', 'playbackRate', 'volume'].includes(prop)) {
+    return true;
+  }
+  return false;           // default: allow normal diff logic
+}
+
+function isValidAttributeName(name: string): boolean {
+  return /^[a-zA-Z_:][\w\-:.]*$/.test(name) &&
+    !name.includes('<') && !name.includes('>') && !name.includes('"') && !name.includes("'");
+}
+
+
+// Main exported function for updating element properties
+export function updateProps(element: Element, props: { [key: string]: any }, isSvg: boolean): void {
+  // console.assert(!!element);
+  const cached = element[ATTR_PROPS] || {};
+  const merged = mergeProps(cached, props);
+  element[ATTR_PROPS] = props || {};
+
+  applyPropertiesToElement(element, merged, props, isSvg);
+}
+
+// Apply merged properties to element with ref handling
+function applyPropertiesToElement(
+  element: Element,
+  mergedProps: { [key: string]: any },
+  originalProps: { [key: string]: any } | null,
+  isSvg: boolean
+): void {
+  for (const name in mergedProps) {
+    if (isValidAttributeName(name)) {
+      setAttributeOrProperty(element, name, mergedProps[name], isSvg);
+    }
+  }
+
+  // Handle ref callback
+  if (mergedProps && typeof mergedProps['ref'] === 'function') {
+    window.requestAnimationFrame(() => mergedProps['ref'](element));
+  }
+}