jaxs 0.2.1 → 0.3.1

package/src/rendering/change/instructions/node.ts

@@ -1,6 +1,7 @@
 import type { Dom, ExpandedElement, Instructions } from '../../../types';
-import { compileForElement } from './element';
+import { compileForElement, compileForSvg } from './element';
 import { compileForText } from './text';
+import { isSvg } from '../../dom/svg'
 
 enum NodeTypes {
   ElementNode = 1,
@@ -11,7 +12,23 @@ export const compileForNodeGenerator =
   (compileForCollection: any) => (source: Dom, target: Dom) => {
     let instructions = [] as Instructions;
 
-    if (source.nodeType === NodeTypes.ElementNode) {
+    if (source.nodeType === NodeTypes.ElementNode &&
+        isSvg(source as SVGElement)) {
+      const sourceElement = source as ExpandedElement;
+      const targetElement = target as ExpandedElement;
+      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 as ExpandedElement;
       const targetElement = target as ExpandedElement;
 

package/src/rendering/change.ts

@@ -12,7 +12,7 @@ import type {
 } from '../types';
 import {  ChangeInstructions } from '../types'
 import { compileChange } from './change/compile';
-import { debug } from '../debugging';
+// import { debug } from '../debugging';
 
 export const change = (
   source: HtmlChildren,
@@ -21,7 +21,7 @@ export const change = (
 ) => {
   const instructions = compileChange(source, target, parent);
 
-  debug('instructions', instructions.map((instruction) => instruction.type))
+  // debug('instructions', instructions.map((instruction) => instruction.type))
 
   instructions.forEach((instruction) => {
     performInstruction(instruction);
@@ -43,7 +43,7 @@ const changeText: Updater = (instruction: Instruction) => {
 const removeNode: Updater = (instruction: Instruction) => {
   const { source } = instruction;
   source.remove();
-  debug('removeNode called on', source.nodeName)
+  // debug('removeNode called on', source.nodeName)
 };
 
 const insertNode: Updater = (instruction: Instruction) => {
@@ -61,22 +61,30 @@ const insertNode: Updater = (instruction: Instruction) => {
 const replaceNode: Updater = (instruction: Instruction) => {
   const { source, target } = instruction;
   source.replaceWith(target);
-  debug('replaceNode called on', source.nodeName, 'with', target.nodeName)
-  debug('parent', source.parentElement)
+  // debug('replaceNode called on', source.nodeName, 'with', target.nodeName)
+  // debug('parent', source.parentElement)
 };
 
 const removeAttribute: Updater = (instruction: Instruction) => {
   const { source, data } = instruction;
-  const { name } = data as RemoveInstructionData;
+  const { name, isSvg } = data as RemoveInstructionData;
 
-  (source as ExpandedElement).removeAttribute(name);
+  if (isSvg) {
+    (source as SVGElement).removeAttributeNS(null, name)
+  } else {
+    (source as ExpandedElement).removeAttribute(name);
+  }
 };
 
 const addAttribute: Updater = (instruction: Instruction) => {
   const { source, data } = instruction;
-  const { name, value } = data as AttributeInstructionData;
+  const { name, value, isSvg } = data as AttributeInstructionData;
 
-  (source as ExpandedElement).setAttribute(name, value);
+  if (isSvg) {
+    (source as SVGElement).setAttributeNS(null, name, value)
+  } else {
+    (source as ExpandedElement).setAttribute(name, value);
+  }
 };
 
 const updateAttribute: Updater = (instruction: Instruction) => {

package/src/rendering/dom/svg.ts

@@ -1,16 +1,18 @@
 import type { RenderKit, Attributes, ExpandedElement } from "../../types"
 
+export const namespace = 'http://www.w3.org/2000/svg'
 export const isSvgTag = (tagType: string) => tagType === 'svg'
+export const isSvg = (element: SVGElement) => element.namespaceURI === namespace
 
 export const createSvgNode = (type: string, attributes: Attributes, renderKit: RenderKit) => {
   const document = renderKit && renderKit.document || window.document;
-  const xmlns = 'http://www.w3.org/2000/svg'
-  const node = document.createElementNS(xmlns, type, xmlns)
+  const node = document.createElementNS(namespace, type)
 
   for (const key in attributes) {
     if (key === '__self' || key === 'xmlns') continue;
+    // adding namespace in as first argument makes it not really render!
     node.setAttributeNS(null, key, attributes[key]);
   }
 
-  return node as ExpandedElement
+  return node as unknown as ExpandedElement
 }

package/src/rendering/templates/bound.js

@@ -1,10 +1,11 @@
 import { eventName } from '../../state'
 import { change } from '../change'
 
+const passThroughViewModel = (state) => state
 export class Bound {
   constructor (TemplateClass, viewModel, subscriptions, attributes) {
     this.TemplateClass = TemplateClass
-    this.viewModel = viewModel
+    this.viewModel = viewModel || passThroughViewModel
     this.attributes = attributes || {}
     this.subscriptions = subscriptions
     this.dom = []

package/src/types.ts

@@ -20,7 +20,7 @@ export interface InputElement extends ExpandedElement {
   // deno-lint-ignore no-explicit-any
   value: any;
 }
-export type Dom = Text | ExpandedElement;
+export type Dom = Text | ExpandedElement | SVGElement;
 export type DomCollection = Dom[];
 export type HtmlChildren =
   | HTMLCollection
@@ -81,11 +81,13 @@ export type BusListenersMap = Record<BusEventName, BusPayload>;
 // Change instructions
 export type RemoveInstructionData = {
   name: string;
+  isSvg?: boolean;
 };
 
 export type AttributeInstructionData = {
   name: string;
   value: string;
+  isSvg?: boolean;
 };
 
 export type EventInstructionData = {