jaxs 0.2.0 → 0.3.0

package/cypress/e2e/svg-renders.cy.js

@@ -0,0 +1,10 @@
+describe('SVG rendering', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:1234/svg.html')
+  })
+
+  it('has the correct size because it is correctly setup as svg', () => {
+    cy.get('svg').invoke('outerWidth').should('be.eq', 24)
+    cy.get('svg').invoke('outerHeight').should('be.eq', 24)
+  })
+})

package/cypress/jaxs-apps/dist/add-remove-root-children.3bb9b3f5.js

@@ -654,6 +654,19 @@ var normalizeValueForKey = (object, key, defaultValue = "")=>{
     if (object[key] === undefined) return defaultValue;
     return object[key];
 };
+// src/rendering/dom/svg.ts
+var namespace = "http://www.w3.org/2000/svg";
+var isSvgTag = (tagType)=>tagType === "svg";
+var isSvg = (element)=>element.namespaceURI === namespace;
+var createSvgNode = (type, attributes, renderKit)=>{
+    const document = renderKit && renderKit.document || window.document;
+    const node = document.createElementNS(namespace, type);
+    for(const key in attributes){
+        if (key === "__self" || key === "xmlns") continue;
+        node.setAttributeNS(null, key, attributes[key]);
+    }
+    return node;
+};
 // src/rendering/templates/text.ts
 class TextTemplate {
     value;
@@ -697,13 +710,20 @@ var isTextNode = (child)=>{
 var textNode = (content)=>{
     return new TextTemplate(content);
 };
+var withSvgFlag = (isSvg2)=>(template)=>{
+        template && (template.isSvg = template.isSvg || isSvg2);
+        return template;
+    };
 class Children {
     collection;
     parentElement;
-    constructor(jsxChildren){
+    isSvg;
+    constructor(jsxChildren, isSvg2 = false){
         this.collection = ensureArray(jsxChildren);
         this.collection = this.collection.map(replaceTextNodes);
         this.collection = this.collection.flat();
+        this.collection = this.collection.map(withSvgFlag(isSvg2));
+        this.isSvg = isSvg2;
     }
     render(renderKit, parentElement) {
         this.parentElement = parentElement;
@@ -726,12 +746,14 @@ class Tag {
     events;
     attributes;
     children;
-    constructor(tagType, combinedAttributes, children2){
+    isSvg;
+    constructor(tagType, combinedAttributes, children2, isSvg2 = false){
         this.type = tagType;
         const { events, attributes } = separateAttrsAndEvents(combinedAttributes);
         this.events = events;
         this.attributes = attributes;
-        this.children = new Children(children2);
+        this.isSvg = isSvg2 || isSvgTag(this.type);
+        this.children = new Children(children2, this.isSvg);
     }
     render(renderKit) {
         const dom = this.generateDom(renderKit);
@@ -742,10 +764,19 @@ class Tag {
         ];
     }
     generateDom(renderKit) {
+        if (this.isSvg) return this.generateSvnDom(renderKit);
+        else return this.generateHtmlDom(renderKit);
+    }
+    generateHtmlDom(renderKit) {
         const node = createDecoratedNode(this.type, this.attributes, this.events, renderKit);
         node.__jsx = this.key();
         return node;
     }
+    generateSvnDom(renderKit) {
+        const node = createSvgNode(this.type, this.attributes, renderKit);
+        node.__jsx = this.key();
+        return node;
+    }
     key() {
         return this.attributes.key || this.source() || this.createKey();
     }
@@ -1101,7 +1132,7 @@ var createIdMap = (list)=>{
     return map;
 };
 // src/rendering/change/instructions/attributes.ts
-var compileForAttributes = (source, target)=>{
+var compileForAttributes = (source, target, isSvg2 = false)=>{
     const instructions = [];
     const sourceAttributes = source.attributes;
     const sourceLength = sourceAttributes.length;
@@ -1123,11 +1154,13 @@ var compileForAttributes = (source, target)=>{
             }
         }
         if (!matchingAttribute) instructions.push(removeAttribute(source, target, {
-            name: sourceAttribute.name
+            name: sourceAttribute.name,
+            isSvg: isSvg2
         }));
         else if (sourceAttribute.value !== matchingAttribute.value) instructions.push(updateAttribute(source, target, {
             name: sourceAttribute.name,
-            value: matchingAttribute.value
+            value: matchingAttribute.value,
+            isSvg: isSvg2
         }));
     }
     for(index = 0; index < targetLength; index++){
@@ -1144,7 +1177,8 @@ var compileForAttributes = (source, target)=>{
         }
         if (!matchingAttribute) instructions.push(addAttribute(source, target, {
             name: targetAttribute.name,
-            value: targetAttribute.value
+            value: targetAttribute.value,
+            isSvg: isSvg2
         }));
     }
     return instructions;
@@ -1186,6 +1220,9 @@ var compileForElement = (source, target)=>{
     const valueInstructions = compileForInputValue(source, target);
     return attributeInstructions.concat(eventInstructions).concat(valueInstructions);
 };
+var compileForSvg = (source, target)=>{
+    return compileForAttributes(source, target, true);
+};
 var compileForInputValue = (sourceElement, targetElement)=>{
     const instructions = [];
     if (sourceElement.tagName !== "INPUT") return instructions;
@@ -1212,7 +1249,13 @@ var NodeTypes;
 })(NodeTypes || (NodeTypes = {}));
 var compileForNodeGenerator = (compileForCollection)=>(source, target)=>{
         let instructions = [];
-        if (source.nodeType === NodeTypes.ElementNode) {
+        if (source.nodeType === NodeTypes.ElementNode && isSvg(source)) {
+            const sourceElement = source;
+            const targetElement = target;
+            const baseInstructions = compileForSvg(sourceElement, targetElement);
+            const childrenInstructions = compileForCollection(sourceElement.childNodes, targetElement.childNodes, sourceElement);
+            instructions = baseInstructions.concat(childrenInstructions);
+        } else if (source.nodeType === NodeTypes.ElementNode) {
             const sourceElement = source;
             const targetElement = target;
             const baseInstructions = compileForElement(sourceElement, targetElement);
@@ -1221,8 +1264,6 @@ var compileForNodeGenerator = (compileForCollection)=>(source, target)=>{
         } else if (source.nodeType === NodeTypes.TextNode) instructions = compileForText(source, target);
         return instructions;
     };
-// src/debugging.js
-var debug = (...message)=>{};
 // src/rendering/change/instructions/children.ts
 var compileChildren = (sourceList, targetList, parent)=>{
     const baseInstructions = [];
@@ -1234,55 +1275,37 @@ var compileChildren = (sourceList, targetList, parent)=>{
     for(; index < length; index++){
         const source = sourceList[index];
         const target = targetList[index];
-        debug("\n", "loop index", index, source && source.__jsx, target && target.__jsx);
         if (target && targetMap.check(target)) {
-            debug("target", target.__jsx, "index", index);
             const matchingSource = sourceMap.pullMatch(target);
             targetMap.clear(target);
             if (matchingSource.element) {
-                debug("matching source found for target");
-                if (matchingSource.index !== index) {
-                    debug("moving source", matchingSource.element.__jsx, index);
-                    baseInstructions.push(insertNode(matchingSource.element, {
-                        parent,
-                        index
-                    }));
-                }
-                debug("updating to match target", matchingSource.element.__jsx, matchingSource.element.classList, target.__jsx, target.classList);
+                if (matchingSource.index !== index) baseInstructions.push(insertNode(matchingSource.element, {
+                    parent,
+                    index
+                }));
                 nodesPairsToDiff.push({
                     source: matchingSource.element,
                     target
                 });
             } else if (source) {
-                debug("NO matching source for target but source in slot", source.__jsx);
-                if (targetMap.check(source)) {
-                    debug("adding", target.__jsx, "at", index);
-                    baseInstructions.push(insertNode(target, {
-                        parent,
-                        index
-                    }));
-                } else {
-                    debug("replacing", source.__jsx, target.__jsx, "at", index);
-                    sourceMap.clear(source);
-                    baseInstructions.push(replaceNode(source, target));
-                }
-            } else {
-                debug("adding target to end", target.__jsx);
-                baseInstructions.push(insertNode(target, {
+                if (targetMap.check(source)) baseInstructions.push(insertNode(target, {
                     parent,
                     index
                 }));
-            }
+                else {
+                    sourceMap.clear(source);
+                    baseInstructions.push(replaceNode(source, target));
+                }
+            } else baseInstructions.push(insertNode(target, {
+                parent,
+                index
+            }));
         } else if (source) {
             const matchingSource = sourceMap.pullMatch(source);
-            if (matchingSource.element) {
-                debug("removing", source.__jsx);
-                baseInstructions.push(removeNode(source));
-            }
+            if (matchingSource.element) baseInstructions.push(removeNode(source));
         }
     }
     sourceMap.remaining().forEach(({ element: element2 })=>{
-        debug("removing", element2.__jsx);
         baseInstructions.push(removeNode(element2));
     });
     const nodeInstructions = nodesPairsToDiff.reduce((collection, { source, target })=>{
@@ -1304,7 +1327,6 @@ var compileForNode = compileForNodeGenerator(compileChildren);
 // src/rendering/change.ts
 var change = (source, target, parent)=>{
     const instructions = compileChildren(source, target, parent);
-    debug("instructions", instructions.map((instruction)=>instruction.type));
     instructions.forEach((instruction)=>{
         performInstruction(instruction);
     });
@@ -1321,7 +1343,6 @@ var changeText2 = (instruction)=>{
 var removeNode2 = (instruction)=>{
     const { source } = instruction;
     source.remove();
-    debug("removeNode called on", source.nodeName);
 };
 var insertNode2 = (instruction)=>{
     const { target, data } = instruction;
@@ -1333,18 +1354,18 @@ var insertNode2 = (instruction)=>{
 var replaceNode2 = (instruction)=>{
     const { source, target } = instruction;
     source.replaceWith(target);
-    debug("replaceNode called on", source.nodeName, "with", target.nodeName);
-    debug("parent", source.parentElement);
 };
 var removeAttribute2 = (instruction)=>{
     const { source, data } = instruction;
-    const { name } = data;
-    source.removeAttribute(name);
+    const { name, isSvg: isSvg2 } = data;
+    if (isSvg2) source.removeAttributeNS(null, name);
+    else source.removeAttribute(name);
 };
 var addAttribute2 = (instruction)=>{
     const { source, data } = instruction;
-    const { name, value } = data;
-    source.setAttribute(name, value);
+    const { name, value, isSvg: isSvg2 } = data;
+    if (isSvg2) source.setAttributeNS(null, name, value);
+    else source.setAttribute(name, value);
 };
 var updateAttribute2 = (instruction)=>{
     addAttribute2(instruction);