@srfnstack/fntags 0.3.7 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "author": "Robert Kempton <r@snow87.com>",
   "private": false,
   "homepage": "https://github.com/srfnstack/fntags",
@@ -30,12 +30,12 @@
     "state-management"
   ],
   "devDependencies": {
-    "cypress": "^9.2.0",
+    "cypress": "10.3.0",
     "pre-commit": "^1.2.2",
     "standard": "^16.0.4"
   },
   "scripts": {
-    "test": "npm run lint && cypress run --spec test/** --headless -b chrome",
+    "test": "cp src/* docs/lib/ && npm run lint && cypress run --spec test/** --headless -b chrome",
     "cypress": "cypress run --spec test/** -b chrome",
     "lint": "standard --env browser src && standard --env browser --env jest --global Prism --global cy test docs",
     "lint:fix": "standard --env browser --fix src && standard --env browser --env jest --global Prism --global cy --fix test docs"

package/src/fnelements.mjs

@@ -6,17 +6,17 @@ import { h, styled } from './fntags.mjs'
 export const a = (...children) => h('a', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const abbr = (...children) => h('abbr', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const acronym = (...children) => h('acronym', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const address = (...children) => h('address', ...children)
 
@@ -26,12 +26,12 @@ export const address = (...children) => h('address', ...children)
 export const area = (...children) => h('area', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const article = (...children) => h('article', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const aside = (...children) => h('aside', ...children)
 
@@ -41,7 +41,7 @@ export const aside = (...children) => h('aside', ...children)
 export const audio = (...children) => h('audio', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const b = (...children) => h('b', ...children)
 
@@ -51,17 +51,17 @@ export const b = (...children) => h('b', ...children)
 export const base = (...children) => h('base', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const bdi = (...children) => h('bdi', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const bdo = (...children) => h('bdo', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const big = (...children) => h('big', ...children)
 
@@ -70,6 +70,11 @@ export const big = (...children) => h('big', ...children)
  */
 export const blockquote = (...children) => h('blockquote', ...children)
 
+/**
+ * @type {function(...[*]=): HTMLBodyElement}
+ */
+export const body = (...children) => h('body', ...children)
+
 /**
  * @type {function(...[*]=): HTMLBRElement}
  */
@@ -91,12 +96,12 @@ export const canvas = (...children) => h('canvas', ...children)
 export const caption = (...children) => h('caption', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const cite = (...children) => h('cite', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const code = (...children) => h('code', ...children)
 
@@ -121,7 +126,7 @@ export const data = (...children) => h('data', ...children)
 export const datalist = (...children) => h('datalist', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const dd = (...children) => h('dd', ...children)
 
@@ -136,7 +141,7 @@ export const del = (...children) => h('del', ...children)
 export const details = (...children) => h('details', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const dfn = (...children) => h('dfn', ...children)
 
@@ -145,6 +150,11 @@ export const dfn = (...children) => h('dfn', ...children)
  */
 export const dialog = (...children) => h('dialog', ...children)
 
+/**
+ * @type {function(...[*]=): HTMLDirectoryElement}
+ */
+export const dir = (...children) => h('dir', ...children)
+
 /**
  * @type {function(...[*]=): HTMLDivElement}
  */
@@ -156,12 +166,12 @@ export const div = (...children) => h('div', ...children)
 export const dl = (...children) => h('dl', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const dt = (...children) => h('dt', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const em = (...children) => h('em', ...children)
 
@@ -176,12 +186,12 @@ export const embed = (...children) => h('embed', ...children)
 export const fieldset = (...children) => h('fieldset', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const figcaption = (...children) => h('figcaption', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const figure = (...children) => h('figure', ...children)
 
@@ -236,7 +246,12 @@ export const flexCenteredRow = (...children) => styled(
 )
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLFontElement}
+ */
+export const font = (...children) => h(font, ...children)
+
+/**
+ * @type {function(...[*]=): HTMLElement}
  */
 export const footer = (...children) => h('footer', ...children)
 
@@ -286,17 +301,32 @@ export const h5 = (...children) => h('h5', ...children)
 export const h6 = (...children) => h('h6', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLHeadElement}
+ */
+export const head = (...children) => h('head', ...children)
+
+/**
+ * @type {function(...[*]=): HTMLElement}
  */
 export const header = (...children) => h('header', ...children)
 
+/**
+ * @type {function(...[*]=): HTMLElement}
+ */
+export const hgroup = (...children) => h('hgroup', ...children)
+
 /**
  * @type {function(...[*]=): HTMLHRElement}
  */
 export const hr = (...children) => h('hr', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLHtmlElement}
+ */
+export const html = (...children) => h('html', ...children)
+
+/**
+ * @type {function(...[*]=): HTMLElement}
  */
 export const i = (...children) => h('i', ...children)
 
@@ -321,7 +351,7 @@ export const input = (...children) => h('input', ...children)
 export const ins = (...children) => h('ins', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const kbd = (...children) => h('kbd', ...children)
 
@@ -346,7 +376,7 @@ export const li = (...children) => h('li', ...children)
 export const link = (...children) => h('link', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const main = (...children) => h('main', ...children)
 
@@ -356,13 +386,13 @@ export const main = (...children) => h('main', ...children)
 export const map = (...children) => h('map', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const mark = (...children) => h('mark', ...children)
 
 /**
  * The best html element for every occasion.
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLMarqueeElement}
  */
 export const marquee = (...children) => h('marquee', ...children)
 
@@ -382,17 +412,17 @@ export const meta = (...children) => h('meta', ...children)
 export const meter = (...children) => h('meter', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const nav = (...children) => h('nav', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const noframes = (...children) => h('noframes', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const noscript = (...children) => h('noscript', ...children)
 
@@ -452,22 +482,27 @@ export const progress = (...children) => h('progress', ...children)
 export const q = (...children) => h('q', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const rp = (...children) => h('rp', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const rt = (...children) => h('rt', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const ruby = (...children) => h('ruby', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
+ */
+export const s = (...children) => h('s', ...children)
+
+/**
+ * @type {function(...[*]=): HTMLElement}
  */
 export const samp = (...children) => h('samp', ...children)
 
@@ -477,7 +512,7 @@ export const samp = (...children) => h('samp', ...children)
 export const script = (...children) => h('script', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const section = (...children) => h('section', ...children)
 
@@ -487,7 +522,12 @@ export const section = (...children) => h('section', ...children)
 export const select = (...children) => h('select', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLSlotElement}
+ */
+export const slot = (...children) => h('slot', ...children)
+
+/**
+ * @type {function(...[*]=): HTMLElement}
  */
 export const small = (...children) => h('small', ...children)
 
@@ -502,7 +542,7 @@ export const source = (...children) => h('source', ...children)
 export const span = (...children) => h('span', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const strong = (...children) => h('strong', ...children)
 
@@ -512,25 +552,20 @@ export const strong = (...children) => h('strong', ...children)
 export const style = (...children) => h('style', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const sub = (...children) => h('sub', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const summary = (...children) => h('summary', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const sup = (...children) => h('sup', ...children)
 
-/**
- * @type {function(...[*]=): ( ...children) => h}
- */
-export const svg = (...children) => h('ns=http://www.w3.org/2000/svg|svg', ...children)
-
 /**
  * @type {function(...[*]=): HTMLTableElement}
  */
@@ -592,24 +627,26 @@ export const tr = (...children) => h('tr', ...children)
 export const track = (...children) => h('track', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const tt = (...children) => h('tt', ...children)
 
 /**
- * @type {function(...[*]=): HTMLUListElement}
+ * @type {function(...[*]=): HTMLElement}
  */
-export const ul = (...children) => h('ul', ...children)
+export const u = (...children) => h('u', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLUListElement}
  */
-export const use = (...children) => h('ns=http://www.w3.org/2000/svg|use', ...children)
+export const ul = (...children) => h('ul', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * name conflicts with js syntax
+ *
+ * @type {function(...[*]=): HTMLElement}
  */
-export const _var = (...children) => h('var', ...children)
+export const var_ = (...children) => h('var', ...children)
 
 /**
  * @type {function(...[*]=): HTMLVideoElement}
@@ -617,6 +654,6 @@ export const _var = (...children) => h('var', ...children)
 export const video = (...children) => h('video', ...children)
 
 /**
- * @type {function(...[*]=): ( ...children) => h}
+ * @type {function(...[*]=): HTMLElement}
  */
 export const wbr = (...children) => h('wbr', ...children)

package/src/fntags.mjs

@@ -20,8 +20,11 @@
 export function h (tag, ...children) {
   let firstChildIdx = 0
   let element
-  if (tag.startsWith('ns=')) {
-    element = document.createElementNS(...(tag.slice(3).split('|')))
+  const nsIndex = hasNs(tag)
+  if (nsIndex > -1) {
+    const { ns, val } = splitNs(tag, nsIndex)
+    console.log(ns, val)
+    element = document.createElementNS(ns, val)
   } else {
     element = document.createElement(tag)
   }
@@ -29,9 +32,21 @@ export function h (tag, ...children) {
   if (isAttrs(children[firstChildIdx])) {
     const attrs = children[firstChildIdx]
     firstChildIdx += 1
+    let hasValue = false
     for (const a in attrs) {
+      // set value last to ensure value constraints are set before trying to set the value to avoid modification
+      // For example, when using a range and specifying a min and max
+      //  if the value is set first and is outside the default 1 to 100 range
+      //  the value will be adjusted to be within the range, even though the value attribute will be set correctly
+      if (a === 'value') {
+        hasValue = true
+        continue
+      }
       setAttribute(a, attrs[a], element)
     }
+    if (hasValue) {
+      setAttribute('value', attrs.value, element)
+    }
   }
   for (let i = firstChildIdx; i < children.length; i++) {
     const child = children[i]
@@ -46,6 +61,14 @@ export function h (tag, ...children) {
   return element
 }
 
+function splitNs (val, i) {
+  return { ns: val.slice(0, i), val: val.slice(i + 1) }
+}
+
+function hasNs (val) {
+  return val.lastIndexOf(':')
+}
+
 /**
  * Create a compiled template function. The returned function takes a single object that contains the properties
  * defined in the template.
@@ -488,7 +511,7 @@ function keyMapper (mapKey, value) {
 }
 
 function arrangeElements (ctx, bindContext, oldState) {
-  if (ctx.currentValue.length === 0) {
+  if (!ctx?.currentValue?.length) {
     bindContext.parent.textContent = ''
     bindContext.boundElementByKey = {}
     ctx.selectObservers = {}
@@ -661,13 +684,9 @@ const setAttribute = function (attrName, attr, element) {
     for (const style in attr) {
       setStyle(style, attr[style], element)
     }
-  } else if (attrName === 'class') {
+  } else if (element.__fnselector && element.className && attrName === 'class') {
     // special handling for class to ensure the selector classes from fntemplate don't get overwritten
-    if (element.__fnselector && element.className) {
-      element.className += ` ${attr}`
-    } else {
-      element.className = attr
-    }
+    element.className += ` ${attr}`
   } else if (attrName === 'value') {
     element.setAttribute('value', attr)
     // html5 nodes like range don't update unless the value property on the object is set
@@ -675,11 +694,14 @@ const setAttribute = function (attrName, attr, element) {
   } else if (booleanAttributes[attrName]) {
     element[attrName] = !!attr
   } else {
-    if (attrName.startsWith('ns=')) {
-      element.setAttributeNS(...(attrName.slice(3).split('|')), attr)
-    } else {
-      element.setAttribute(attrName, attr)
+    let ns = null
+    const nsIndex = hasNs(attrName)
+    if (nsIndex > -1) {
+      const split = splitNs(attrName, nsIndex)
+      ns = split.ns
+      attrName = split.val
     }
+    element.setAttributeNS(ns, attrName, attr)
   }
 }
 

package/src/svgelements.mjs

@@ -0,0 +1,294 @@
+import { h } from './fntags.mjs'
+
+/**
+ * name conflicts with html a
+ *
+ * @type {function(...[*]=): SVGAElement}
+ */
+export const a_ = (...children) => h('http://www.w3.org/2000/svg:a', ...children)
+
+/**
+ * @type {function(...[*]=): SVGCircleElement}
+ */
+export const circle = (...children) => h('http://www.w3.org/2000/svg:circle', ...children)
+
+/**
+ * @type {function(...[*]=): SVGClipPathElement}
+ */
+export const clipPath = (...children) => h('http://www.w3.org/2000/svg:clipPath', ...children)
+
+/**
+ * @type {function(...[*]=): SVGDefsElement}
+ */
+export const defs = (...children) => h('http://www.w3.org/2000/svg:defs', ...children)
+
+/**
+ * @type {function(...[*]=): SVGDescElement}
+ */
+export const desc = (...children) => h('http://www.w3.org/2000/svg:desc', ...children)
+
+/**
+ * @type {function(...[*]=): SVGEllipseElement}
+ */
+export const ellipse = (...children) => h('http://www.w3.org/2000/svg:ellipse', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEBlendElement}
+ */
+export const feBlend = (...children) => h('http://www.w3.org/2000/svg:feBlend', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEColorMatrixElement}
+ */
+export const feColorMatrix = (...children) => h('http://www.w3.org/2000/svg:feColorMatrix', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEComponentTransferElement}
+ */
+export const feComponentTransfer = (...children) => h('http://www.w3.org/2000/svg:feComponentTransfer', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFECompositeElement}
+ */
+export const feComposite = (...children) => h('http://www.w3.org/2000/svg:feComposite', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEConvolveMatrixElement}
+ */
+export const feConvolveMatrix = (...children) => h('http://www.w3.org/2000/svg:feConvolveMatrix', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEDiffuseLightingElement}
+ */
+export const feDiffuseLighting = (...children) => h('http://www.w3.org/2000/svg:feDiffuseLighting', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEDisplacementMapElement}
+ */
+export const feDisplacementMap = (...children) => h('http://www.w3.org/2000/svg:feDisplacementMap', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEDistantLightElement}
+ */
+export const feDistantLight = (...children) => h('http://www.w3.org/2000/svg:feDistantLight', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEFloodElement}
+ */
+export const feFlood = (...children) => h('http://www.w3.org/2000/svg:feFlood', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEFuncAElement}
+ */
+export const feFuncA = (...children) => h('http://www.w3.org/2000/svg:feFuncA', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEFuncBElement}
+ */
+export const feFuncB = (...children) => h('http://www.w3.org/2000/svg:feFuncB', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEFuncGElement}
+ */
+export const feFuncG = (...children) => h('http://www.w3.org/2000/svg:feFuncG', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEFuncRElement}
+ */
+export const feFuncR = (...children) => h('http://www.w3.org/2000/svg:feFuncR', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEGaussianBlurElement}
+ */
+export const feGaussianBlur = (...children) => h('http://www.w3.org/2000/svg:feGaussianBlur', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEImageElement}
+ */
+export const feImage = (...children) => h('http://www.w3.org/2000/svg:feImage', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEMergeElement}
+ */
+export const feMerge = (...children) => h('http://www.w3.org/2000/svg:feMerge', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEMergeNodeElement}
+ */
+export const feMergeNode = (...children) => h('http://www.w3.org/2000/svg:feMergeNode', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEMorphologyElement}
+ */
+export const feMorphology = (...children) => h('http://www.w3.org/2000/svg:feMorphology', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEOffsetElement}
+ */
+export const feOffset = (...children) => h('http://www.w3.org/2000/svg:feOffset', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFEPointLightElement}
+ */
+export const fePointLight = (...children) => h('http://www.w3.org/2000/svg:fePointLight', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFESpecularLightingElement}
+ */
+export const feSpecularLighting = (...children) => h('http://www.w3.org/2000/svg:feSpecularLighting', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFESpotLightElement}
+ */
+export const feSpotLight = (...children) => h('http://www.w3.org/2000/svg:feSpotLight', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFETileElement}
+ */
+export const feTile = (...children) => h('http://www.w3.org/2000/svg:feTile', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFETurbulenceElement}
+ */
+export const feTurbulence = (...children) => h('http://www.w3.org/2000/svg:feTurbulence', ...children)
+
+/**
+ * @type {function(...[*]=): SVGFilterElement}
+ */
+export const filter = (...children) => h('http://www.w3.org/2000/svg:filter', ...children)
+
+/**
+ * @type {function(...[*]=): SVGForeignObjectElement}
+ */
+export const foreignObject = (...children) => h('http://www.w3.org/2000/svg:foreignObject', ...children)
+
+/**
+ * @type {function(...[*]=): SVGGElement}
+ */
+export const g = (...children) => h('http://www.w3.org/2000/svg:g', ...children)
+
+/**
+ * @type {function(...[*]=): SVGImageElement}
+ */
+export const image = (...children) => h('http://www.w3.org/2000/svg:image', ...children)
+
+/**
+ * @type {function(...[*]=): SVGLineElement}
+ */
+export const line = (...children) => h('http://www.w3.org/2000/svg:line', ...children)
+
+/**
+ * @type {function(...[*]=): SVGLinearGradientElement}
+ */
+export const linearGradient = (...children) => h('http://www.w3.org/2000/svg:linearGradient', ...children)
+
+/**
+ * @type {function(...[*]=): SVGMarkerElement}
+ */
+export const marker = (...children) => h('http://www.w3.org/2000/svg:marker', ...children)
+
+/**
+ * @type {function(...[*]=): SVGMaskElement}
+ */
+export const mask = (...children) => h('http://www.w3.org/2000/svg:mask', ...children)
+
+/**
+ * @type {function(...[*]=): SVGMetadataElement}
+ */
+export const metadata = (...children) => h('http://www.w3.org/2000/svg:metadata', ...children)
+
+/**
+ * @type {function(...[*]=): SVGPathElement}
+ */
+export const path = (...children) => h('http://www.w3.org/2000/svg:path', ...children)
+
+/**
+ * @type {function(...[*]=): SVGPatternElement}
+ */
+export const pattern = (...children) => h('http://www.w3.org/2000/svg:pattern', ...children)
+
+/**
+ * @type {function(...[*]=): SVGPolygonElement}
+ */
+export const polygon = (...children) => h('http://www.w3.org/2000/svg:polygon', ...children)
+
+/**
+ * @type {function(...[*]=): SVGPolylineElement}
+ */
+export const polyline = (...children) => h('http://www.w3.org/2000/svg:polyline', ...children)
+
+/**
+ * @type {function(...[*]=): SVGRadialGradientElement}
+ */
+export const radialGradient = (...children) => h('http://www.w3.org/2000/svg:radialGradient', ...children)
+
+/**
+ * @type {function(...[*]=): SVGRectElement}
+ */
+export const rect = (...children) => h('http://www.w3.org/2000/svg:rect', ...children)
+
+/**
+ * name conflicts with html script
+ *
+ * @type {function(...[*]=): SVGScriptElement}
+ */
+export const script_ = (...children) => h('http://www.w3.org/2000/svg:script', ...children)
+
+/**
+ * @type {function(...[*]=): SVGStopElement}
+ */
+export const stop = (...children) => h('http://www.w3.org/2000/svg:stop', ...children)
+
+/**
+ * name conflicts with html style
+ *
+ * @type {function(...[*]=): SVGStyleElement}
+ */
+export const style_ = (...children) => h('http://www.w3.org/2000/svg:style', ...children)
+
+/**
+ * @type {function(...[*]=): SVGElement}
+ */
+export const svg = (...children) => h('http://www.w3.org/2000/svg:svg', ...children)
+
+/**
+ * name conflicts with js syntax
+ *
+ * @type {function(...[*]=): SVGSwitchElement}
+ */
+export const switch_ = (...children) => h('http://www.w3.org/2000/svg:switch', ...children)
+
+/**
+ * @type {function(...[*]=): SVGSymbolElement}
+ */
+export const symbol = (...children) => h('http://www.w3.org/2000/svg:symbol', ...children)
+
+/**
+ * @type {function(...[*]=): SVGTextElement}
+ */
+export const text = (...children) => h('http://www.w3.org/2000/svg:text', ...children)
+
+/**
+ * @type {function(...[*]=): SVGTextPathElement}
+ */
+export const textPath = (...children) => h('http://www.w3.org/2000/svg:textPath', ...children)
+
+/**
+ * @type {function(...[*]=): SVGTitleElement}
+ */
+export const title = (...children) => h('http://www.w3.org/2000/svg:title', ...children)
+
+/**
+ * @type {function(...[*]=): SVGTSpanElement}
+ */
+export const tspan = (...children) => h('http://www.w3.org/2000/svg:tspan', ...children)
+
+/**
+ * @type {function(...[*]=): SVGUseElement}
+ */
+export const use = (...children) => h('http://www.w3.org/2000/svg:use', ...children)
+
+/**
+ * @type {function(...[*]=): SVGViewElement}
+ */
+export const view = (...children) => h('http://www.w3.org/2000/svg:view', ...children)