jaxs 0.2.0 → 0.3.0

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/attributesAndEvents.ts

@@ -1,4 +1,4 @@
-import { Attributes, AttributesAndEvents } from '../../types';
+import type { Attributes, AttributesAndEvents } from '../../types';
 
 export const separateAttrsAndEvents = (
   combined: Attributes,

package/src/rendering/dom/create.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Attributes,
   DomEventPublisher,
   EventAttributes,

package/src/rendering/dom/svg.ts

@@ -0,0 +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 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 unknown as ExpandedElement
+}

package/src/rendering/templates/children.ts

@@ -61,14 +61,22 @@ const textNode = (content: TextValue) => {
   return new TextTemplate(content);
 };
 
+const withSvgFlag = (isSvg: boolean) => (template: Template) => {
+  template && (template.isSvg = template.isSvg || isSvg)
+  return template
+}
+
 export class Children implements Template {
   collection: Template[];
   parentElement: Element | undefined;
+  isSvg: boolean;
 
-  constructor(jsxChildren: Template[]) {
-    this.collection = ensureArray(jsxChildren);
+  constructor(jsxChildren: Template[], isSvg = false) {
+    this.collection = ensureArray(jsxChildren)
     this.collection = this.collection.map(replaceTextNodes) as Template[];
     this.collection = this.collection.flat() as Template[];
+    this.collection = this.collection.map(withSvgFlag(isSvg))
+    this.isSvg = isSvg;
   }
 
   render(renderKit: RenderKit, parentElement: Element | undefined) {

package/src/rendering/templates/tag.ts

@@ -8,6 +8,7 @@ import type {
 
 import { createDecoratedNode } from '../dom/create';
 import { separateAttrsAndEvents } from '../dom/attributesAndEvents';
+import { isSvgTag, createSvgNode } from '../dom/svg'
 import { Children } from './children';
 
 export class Tag implements Template {
@@ -15,11 +16,13 @@ export class Tag implements Template {
   events: EventAttributes;
   attributes: Attributes;
   children: Children;
+  isSvg: boolean;
 
   constructor(
     tagType: string,
     combinedAttributes: Attributes,
     children: Template[],
+    isSvg = false
   ) {
     this.type = tagType;
 
@@ -27,7 +30,8 @@ export class Tag implements Template {
     this.events = events;
     this.attributes = attributes;
 
-    this.children = new Children(children);
+    this.isSvg = isSvg || isSvgTag(this.type);
+    this.children = new Children(children, this.isSvg);
   }
 
   render(renderKit: RenderKit): DomCollection {
@@ -39,6 +43,14 @@ export class Tag implements Template {
   }
 
   generateDom(renderKit: RenderKit) {
+    if (this.isSvg) {
+      return this.generateSvnDom(renderKit)
+    } else {
+      return this.generateHtmlDom(renderKit)
+    }
+  }
+
+  generateHtmlDom(renderKit: RenderKit) {
     const node = createDecoratedNode(
       this.type,
       this.attributes,
@@ -49,6 +61,16 @@ export class Tag implements Template {
     return node;
   }
 
+  generateSvnDom(renderKit: RenderKit) {
+    const node = createSvgNode(
+      this.type,
+      this.attributes,
+      renderKit,
+    );
+    node.__jsx = this.key();
+    return node;
+  }
+
   key() {
     return this.attributes.key || this.source() || this.createKey();
   }

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
@@ -45,6 +45,7 @@ export type AttributesAndEvents = {
 export type TemplateEventListeners = Record<string, EventListener>;
 
 export interface Template {
+  isSvg?: boolean,
   render: (
     renderKit: RenderKit,
     parentElement?: Element,
@@ -80,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 = {

package/.parcel-cache/b5686051ae060930.txt

@@ -1,2 +0,0 @@
-536441516
-1705626586315608000