tungsten 0.1.59 → 0.1.61

package/dist/update/integrateUpdateVdom.js

@@ -3,7 +3,7 @@ import { DomRegion } from "../DomRegion.js";
 import { DomPointer } from "../DomPointer.js";
 import { ContentNodeComponentIsClassComponent, ContentNodeIsNonRendered, ContentNodeIsLiteral, ContentNodeIsHtml, ContentNodeIsComponent, ContentNodeIsArray, ContentNodeIsElement, ContentNodeElementHasValidKey } from "../ContentNode.js";
 import { StringIsHtmlEvent, htmlEvents } from "../htmlEvents.js";
-import { warn } from "../appOutput.js";
+import { out, warn } from "../appOutput.js";
 import { getStyledContentFromFunctionComponent } from "../getStyledContentFromFunctionComponent.js";
 import { FunctionElement } from "../FunctionComponentStandIn.js";
 import { jssToCss } from "../style/jssToCss.js";
@@ -17,12 +17,19 @@ import { $key, $props, $routeData, $routeParams, $type } from "../contentNodeSym
 import { printComponentNamesInSource } from "../render/printComponentNameInSource.js";
 import { bindableHtmlElementsNumber, bindableHtmlElementsString } from "../components/bindable/bindableHtmlElements.js";
 import { checkedValueToBoolean } from "../checkedValueToBoolean.js";
+import { setCurrentComponent } from 'tungsten/hooks/setCurrentComponent.js';
+import { clearCurrentComponent } from 'tungsten/hooks/clearCurrentComponent.js';
 function debug(...texts) {
   //console.log(...texts)
   //console.log(getStackTrace().split('\n')[2])
 }
+const timing = true; // eslint-disable-line no-type-assertion/no-type-assertion
 // need to be adapted to work for func components?
 export async function integrateElementUpdateVdom(element, newContent) {
+  let startTime = 0;
+  if (timing) startTime = new Date().getMilliseconds();
+  debug(`integrateElementUpdateVdom`, element);
+  debug(`integrateElementUpdateVdom`, newContent);
   //console.log('***** integrateElementUpdateVdom', element.constructor.name, '*****')
   //console.log(newContent, element.__currentContent)
   // if (element.constructor.name === 'ViewpointComponent') return { 
@@ -33,7 +40,7 @@ export async function integrateElementUpdateVdom(element, newContent) {
   const instance = element.__instance;
   // get the content tree that was previous rendered
   if (element.__currentContent === $contentNull) {
-    throwError('integrateElementContent()', '__currentContent is $noContent (element that is updating is missing info for current content)');
+    throwError('integrateElementContent()', '__currentContent is $contentNull (element that is updating is missing info for current content)');
   }
   const currentContent = element.__currentContent;
   debug(`${element.constructor.name} currentContent`, currentContent);
@@ -49,8 +56,8 @@ export async function integrateElementUpdateVdom(element, newContent) {
   debug(`get position of first element for '${element.constructor.name}'`);
   debug('dom region', domRegion);
   const previousPositionOfFirstElement = domRegion.positionOfFirst();
-  const previousPositionOfLastElement = domRegion.positionOfLast();
-  const previousNodesLength = previousPositionOfFirstElement >= 0 ? 1 + previousPositionOfLastElement - previousPositionOfFirstElement : 0;
+  //const previousPositionOfLastElement = domRegion.positionOfLast()
+  //const previousNodesLength = (previousPositionOfFirstElement >= 0) ? 1 + previousPositionOfLastElement - previousPositionOfFirstElement : 0
   //console.log('previousPositionOfFirstElement', previousPositionOfFirstElement)
   //console.log('previousPositionOfLastElement', previousPositionOfLastElement)
   const domPointer = new DomPointer(domRegion.parent, previousPositionOfFirstElement);
@@ -89,6 +96,7 @@ export async function integrateElementUpdateVdom(element, newContent) {
   const newPositionOfLastElement = domRegion.positionOfLast();
   const newNodesLength = newPositionOfFirstElement >= 0 ? 1 + newPositionOfLastElement - newPositionOfFirstElement : 0;
   //console.log('finished updating element. ', element.constructor.name, ' El positions:', newPositionOfFirstElement, newPositionOfLastElement)
+  if (timing) out(`Updated ${element.constructor.name} in ${new Date().getMilliseconds() - startTime}ms`);
   // newNodesLength previousNodesLength
   return {
     renderedContent: renderedTree,
@@ -115,10 +123,14 @@ async function applyUpdate({
   domPointer,
   parentNode
 }) {
-  //console.log('applyUpdate', newNode)
+  //console.log('applyUpdate')
+  //console.log('newNode', newNode)
+  //console.log('oldNode', oldNode)
+  //console.log('parentNode', parentNode)
   //console.log('domPointer.index', domPointer.index)
   debug('existing node', oldNode);
   if (ContentNodeIsNonRendered(newNode)) {
+    console.log('DD delete node because current node is non rendered');
     debug('DD delete node because current node is non rendered');
     deleteNodeIfRendered(oldNode);
     return makeRenderedContentNodeNonRendered();
@@ -238,6 +250,7 @@ async function applyUpdate({
         // trim
         for (const oldChild of tempOldChildren) {
           if (oldChild) {
+            console.log('deleting old child', oldChild);
             deleteNodeIfRendered(oldChild);
           }
         }
@@ -269,12 +282,14 @@ async function applyUpdate({
           i++;
         }
         while (i < oldNode.length) {
+          console.log('deleting old child 2', oldNode[i]);
           deleteNodeIfRendered(oldNode[i]);
           i++;
         }
         return renderedNodes;
       }
     } else {
+      console.log('DD delete node because current node is array and existing node is not', oldNode);
       debug('DD delete node because current node is array and existing node is not');
       deleteNodeIfRendered(oldNode);
       // insert
@@ -309,7 +324,7 @@ async function applyUpdate({
       debug(`!!!!dom pointer index is`, domPointer.index, 'after updating literal  node');
       return makeRenderedContentNodeLiteral(newNode, oldNode.domNode);
     } else {
-      //console.log('deleting old node and creating literal')
+      console.log('DD delete node because current node is literal and existing node is not', oldNode);
       debug('DD delete node because current node is literal and existing node is not');
       deleteNodeIfRendered(oldNode);
       // insert text node
@@ -323,13 +338,18 @@ async function applyUpdate({
     //console.log('comparing html el', newNode, 'to', oldNode)
     //console.log('applying an html node', newNode)
     processHtmlNode(newNode, parentNode);
+    debug('old node is html', WideRenderedContentNodeIsHtml(oldNode));
+    if (WideRenderedContentNodeIsHtml(oldNode)) {
+      debug('node types', newNode[$type].toLocaleLowerCase(), oldNode[$type].toLocaleLowerCase(), newNode[$type].toLocaleLowerCase() === oldNode[$type].toLocaleLowerCase());
+    }
     if (WideRenderedContentNodeIsHtml(oldNode) && newNode[$type].toLocaleLowerCase() === oldNode[$type].toLocaleLowerCase()) {
       //newNode[$props].it = it
       //console.log('updating html node', newNode[$type])
+      //console.log('old node', oldNode[$type])
       debug('updating html node', newNode[$type]);
       // !!!! update
       const domNode = oldNode.domNode;
-      updateAttributes(newNode, domNode);
+      updateAttributes(newNode, oldNode, domNode);
       domPointer.increment();
       debug(`!!!!dom pointer index is`, domPointer.index, 'after updating html node');
       // !!! handle children
@@ -356,44 +376,21 @@ async function applyUpdate({
       return renderedHtmlElement;
     }
   } else if (ContentNodeIsComponent(newNode)) {
-    //console.log('comparing component node', newNode, 'to', oldNode)
-    //console.log('Comp A', WideRenderedContentNodeIsComponent(oldNode))
-    //if (WideRenderedContentNodeIsComponent(oldNode)) {
-    //console.log('Comp B', newNode[$type] === oldNode[$type])
-    //console.log('Comp C', oldNode[$key] !== undefined)
-    //console.log('Comp D', newNode[$key] !== undefined)
-    //console.log('Comp E', (oldNode[$key] !== undefined && newNode[$key] !== undefined))
-    //console.log('Comp F', oldNode[$key] === newNode[$key])SW
-    //}
     //console.log('Comp A', WideRenderedContentNodeIsComponent(oldNode))
     if (WideRenderedContentNodeIsComponent(oldNode) && newNode[$type] === oldNode[$type] && (oldNode[$key] !== undefined && newNode[$key] !== undefined || oldNode[$key] === newNode[$key])) {
       //console.log('updating tu el', newNode, oldNode[$key], newNode[$key])
       // update
-      if (ContentNodeComponentIsClassComponent(newNode)) {
-        debug('updating component', newNode[$type].name);
-        return await updateClassComponent({
-          parent: tungstenElement,
-          instance,
-          newNode,
-          oldNode: oldNode,
-          // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be class comp, because type is the same as newNode
-          domPointer
-        });
-      } else {
-        debug('updating function component', newNode[$type].name);
-        return await updateFunctionComponent({
-          parent: tungstenElement,
-          instance,
-          newNode,
-          oldNode: oldNode,
-          // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be function comp, because type is the same as newNode
-          domPointer
-        });
-      }
+      return updateComponent({
+        newNode,
+        parent: tungstenElement,
+        instance,
+        oldNode,
+        domPointer
+      });
     } else {
       //console.log('deleting and replacing node', oldNode)
-      //console.log('new Comp El', newNode)
-      debug('deletin node and creating component', newNode[$type].constructor.name, oldNode);
+      console.log('deleting node and creating component', newNode[$type].constructor.name, oldNode);
+      debug('deleting node and creating component', newNode[$type].constructor.name, oldNode);
       deleteNodeIfRendered(oldNode);
       // insert new
       //console.log('Creating tung comp in applyUpdate')
@@ -411,6 +408,35 @@ async function applyUpdate({
   const n = newNode; // eslint-disable-line @typescript-eslint/no-unused-vars
   return makeRenderedContentNodeNonRendered();
 }
+async function updateComponent({
+  newNode,
+  parent,
+  instance,
+  oldNode,
+  domPointer
+}) {
+  if (ContentNodeComponentIsClassComponent(newNode)) {
+    debug('updating component', newNode[$type].name);
+    return await updateClassComponent({
+      parent,
+      instance,
+      newNode,
+      oldNode: oldNode,
+      // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be class comp, because type is the same as newNode
+      domPointer
+    });
+  } else {
+    debug('updating function component', newNode[$type].name);
+    return await updateFunctionComponent({
+      parent,
+      instance,
+      newNode,
+      oldNode: oldNode,
+      // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be function comp, because type is the same as newNode
+      domPointer
+    });
+  }
+}
 function moveRenderedContent(renderedContent, domPointer) {
   //console.log('moving, index', domPointer.index, renderedContent)
   if (RenderedContentNodeIsArray(renderedContent)) {
@@ -458,6 +484,7 @@ function moveDomNode(domNode, domPointer) {
   domPointer.increment();
 }
 function deleteNodeIfRendered(node) {
+  //console.log('-deleteNodeIfRendered', node)
   debug('-deleteNodeIfRendered', node);
   if (node !== $contentNull && !RenderedContentNodeIsNonRendered(node)) {
     //node
@@ -648,7 +675,7 @@ export function processHtmlNode(node, parentNode) {
     const [bindObject, bindKey] = props.bindRadio;
     props.checked = bindObject[bindKey] === props.value;
     const handler = event => {
-      console.log('bound radio changed 3', event.target.value);
+      //console.log('bound radio changed 3', (event.target as HTMLCheckedBindableElement).value)
       bindObject[bindKey] = event.target.value;
     };
     if (eventName in props) {
@@ -722,6 +749,11 @@ async function createHtmlElement(tungstenElement, instance, node, domPointer, pa
       htmlEl.appendChild(el.cloneNode(true));
     }
   }
+  //console.log('creating hmtl node', node[$type])
+  //console.log('has ref?', 'ref' in node[$props])
+  if ('ref' in node[$props]) {
+    node[$props].ref.current = htmlEl;
+  }
   debug('dom parent', domPointer.parent);
   debug('dom parent children length', domPointer.parent.childNodes.length);
   debug('domPointer.index', domPointer.index);
@@ -773,6 +805,7 @@ function addAttributes(node, domNode) {
       domNode.addEventListener(eventName, handler);
       domNode[htmlEventHandlerKey(eventName)] = handler;
     } else {
+      //if (! (key in ignoreAttributes)) {
       //console.log('add attr', key, attributes[key])
       if (typeof attributes[key] === 'boolean') {
         //console.log('bool attr', attributes[key])
@@ -781,39 +814,60 @@ function addAttributes(node, domNode) {
         //console.log('string attr', String(attributes[key]))
         domNode.setAttribute(key, String(attributes[key]));
       }
+      //}
     }
   }
+  domNode.__tungsten_oldAttributes = attributes;
+  return attributes;
 }
 const clickEvents = [['onClick', 'click']];
-function updateAttributes(node, domNodeHTMLElement) {
+function updateAttributes(node, oldNode, domNodeHTMLElement) {
+  //console.log('-updateAttributes node', node)
+  //console.log('domNodeHTMLElement', domNodeHTMLElement)
   const domNode = domNodeHTMLElement;
+  //console.log('-updateAttributes', node)
   debug('-updateAttributes', node);
-  const attributes = processAttributes(node);
-  debug('attributes', attributes);
-  for (const attr of domNode.attributes) {
-    if (!(attr.name in attributes)) {
-      debug('remove attr', attr.name);
-      removeAttribute(domNode, attr.name);
+  const newAttributes = processAttributes(node);
+  // are re-process the old node attribs here to we can see what we applied last time.
+  // would be better to save this and then grab it later
+  //const oldAttributes = processAttributes(oldNode)
+  const oldAttributes = domNode.__tungsten_oldAttributes;
+  //console.log('newAttributes', newAttributes)
+  //console.log('oldAttributes', oldAttributes)
+  debug('attributes', newAttributes);
+  debug('oldAttributes', oldAttributes);
+  for (const attr in oldAttributes) {
+    if (!(attr in newAttributes)) {
+      debug('remove attr', attr);
+      removeAttribute(domNode, attr);
     }
   }
+  // for (const attr of domNode.attributes) {
+  //     if ( ! (attr.name in newAttributes) ) {
+  //         debug('remove attr', attr.name)
+  //         removeAttribute(domNode, attr.name)
+  //     }
+  // }
   //if (attributes.onClick !== undefined)
   for (const [event, eventName] of clickEvents) {
-    if (attributes[event] === undefined) {
+    if (newAttributes[event] === undefined) {
       debug('remove event', eventName);
       //!!
       domNode.removeEventListener(eventName, domNode[htmlEventHandlerKey(eventName)]);
     }
   }
-  for (const key in attributes) {
+  for (const key in newAttributes) {
     switch (key) {
       case 'onClick':
         {
           debug('add onclick');
           const clickHandlerKey = htmlEventHandlerKey('click');
           debug('domNode.' + clickHandlerKey, domNode[clickHandlerKey]);
-          if (domNode[clickHandlerKey]) domNode.removeEventListener('click', domNode[clickHandlerKey]);
+          if (domNode[clickHandlerKey]) {
+            domNode.removeEventListener('click', domNode[clickHandlerKey]);
+          }
           // if its a button without type="submit", prevent default to stop it from submitting forms
-          const handler = attributes[key];
+          const handler = newAttributes[key];
           // const handler = (key === 'onClick' && node[$type] === 'button' && node[$props].type !== 'submit')
           //     ? (event: Event) => { event.preventDefault(); return (attributes[key] as EventListener)(event) } 
           //     : attributes[key] as EventListener
@@ -829,20 +883,26 @@ function updateAttributes(node, domNodeHTMLElement) {
           //if (domNode.tagName === 'input' || domNode.tagName === 'INPUT') continue
           // try to set value directly for inputs that aren't updating with the below code
           if (key === 'value') {
-            domNode.value = String(attributes[key]);
+            domNode.value = String(newAttributes[key]);
           } else {
-            if (typeof attributes[key] === 'boolean') {
-              if (attributes[key]) domNode.setAttribute(key, '');else removeAttribute(domNode, key);
-            } else if (attributes[key] === undefined || attributes[key] === null) {
+            if (typeof newAttributes[key] === 'boolean') {
+              if (newAttributes[key]) domNode.setAttribute(key, '');else removeAttribute(domNode, key);
+            } else if (newAttributes[key] === undefined || newAttributes[key] === null) {
               removeAttribute(domNode, key);
             } else {
-              domNode.setAttribute(key, String(attributes[key]));
+              domNode.setAttribute(key, String(newAttributes[key]));
             }
           }
         }
     }
   }
+  domNode.__tungsten_oldAttributes = newAttributes;
+  return newAttributes;
 }
+// const ignoreAttributes = {
+//     'ref': true,
+//     //'key': true
+// }
 function processAttributes(node) {
   const {
     [$props]: props
@@ -852,6 +912,7 @@ function processAttributes(node) {
   const attributes = {
     ...props
   };
+  delete attributes.ref;
   delete attributes.class;
   if (attributes.className !== undefined) attributes.class = attributes.className;
   delete attributes.className;
@@ -907,7 +968,7 @@ function processAttributes(node) {
   }
   return attributes;
 }
-async function createTungstenComponent({
+export async function createTungstenComponent({
   parent,
   instance,
   node,
@@ -923,7 +984,7 @@ async function createTungstenComponent({
   // need to set a domRegion
   // element.__domRegion = domRegion
 }
-let cc = 0;
+let cc = 0; // debugging aid
 async function createTungstenClassComponent(parent, instance, node, domPointer) {
   //console.log('creating tung class comp', node[$type].name)
   //console.log('domPointer', domPointer)
@@ -938,7 +999,7 @@ async function createTungstenClassComponent(parent, instance, node, domPointer)
     routeParams: node[$routeParams],
     routeData: node[$routeData],
     instance,
-    parentComponent: parent
+    parentElement: parent
   });
   await element.__init();
   const content = await element.__initialContent();
@@ -995,11 +1056,11 @@ async function createTungstenFunctionComponent(parent, instance, node, domPointe
   debug(`[${x}]`, 'domPointer.parent', domPointer.parent);
   debug(`[${x}]`, 'dom index', domPointer.index);
   const element = new FunctionElement(node[$type], node[$props], node[$routeParams], node[$routeData], instance, parent);
-  // MC? setCurrentComponent(element)
+  setCurrentComponent(element);
   const content = await getStyledContentFromFunctionComponent(element);
   debug('new func comp content', content);
   //const content = await getStyledContentFromFunctionComponent(node.type, node.props)
-  // MC? clearCurrentComponent()
+  clearCurrentComponent();
   debug('content', content);
   const compName = node[$type].name; // should take into account other factors // maybe in render too
   const openingComment = createComment({

package/dist/update/integrateUpdateVdomPrebuild.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=integrateUpdateVdomPrebuild.d.ts.map

package/dist/update/integrateUpdateVdomPrebuild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrateUpdateVdomPrebuild.d.ts","sourceRoot":"","sources":["../../src/update/integrateUpdateVdomPrebuild.ts"],"names":[],"mappings":""}