align with dom-expressions

Author: titoBouzout

CHANGELOG.md

@@ -460,7 +460,7 @@ Example: https://codesandbox.io/s/solid-stale-resource-y3fy4l
 The Babel plugin now allows configuring multiple custom renderers at the same time. The primary case it is so a developer can still lever Solid's optimized DOM compilation while using their custom renderer. To make this work specify the tags each renderer is reponsible for. It will try to resolve them in order.
 
 ```js
-import { HTMLElements, SVGElements } from "solid-js/web";
+import { HTMLElements, SVGElements, MathMLElements } from "solid-js/web";
 let solidConfig = {
   moduleName: "solid-js/web",
   // @ts-ignore
@@ -469,7 +469,7 @@ let solidConfig = {
     {
       name: "dom",
       moduleName: "solid-js/web",
-      elements: [...HTMLElements, ...SVGElements]
+      elements: [...HTMLElements, ...SVGElements, ...MathMLElements]
     },
     {
       name: "universal",

packages/solid-h/src/index.ts

@@ -6,7 +6,9 @@ import {
   insert,
   createComponent,
   dynamicProperty,
-  SVGElements
+  SVGElements,
+  MathMLElements,
+  Namespaces
 } from "@solidjs/web";
 
 const h: HyperScript = createHyperScript({
@@ -15,7 +17,9 @@ const h: HyperScript = createHyperScript({
   insert,
   createComponent,
   dynamicProperty,
-  SVGElements
+  SVGElements,
+  MathMLElements,
+  Namespaces
 });
 
 export default h;

packages/solid-html/src/index.ts

@@ -14,11 +14,11 @@ import {
   setAttribute,
   setAttributeNS,
   addEventListener,
-  Properties,
   ChildProperties,
   DelegatedEvents,
   SVGElements,
-  SVGNamespace
+  MathMLElements,
+  Namespaces,
 } from "@solidjs/web";
 
 const html: HTMLTag = createHTML({
@@ -35,11 +35,11 @@ const html: HTMLTag = createHTML({
   setAttribute,
   setAttributeNS,
   addEventListener,
-  Properties,
   ChildProperties,
   DelegatedEvents,
   SVGElements,
-  SVGNamespace
+  MathMLElements,
+  Namespaces,
 });
 
 export default html;

packages/solid-web/src/index.ts

@@ -3,6 +3,8 @@ import {
   insert,
   spread,
   SVGElements,
+  MathMLElements,
+  Namespaces,
   hydrate as hydrateCore,
   render as renderCore
 } from "./client.js";
@@ -47,12 +49,13 @@ export * from "./server-mock.js";
 
 export const isServer: boolean = false;
 export const isDev: boolean = "_SOLID_DEV_" as unknown as boolean;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 
-function createElement(tagName: string, isSVG = false, is = undefined): HTMLElement | SVGElement {
-  return isSVG
-    ? document.createElementNS(SVG_NAMESPACE, tagName)
-    : document.createElement(tagName, { is });
+function createElement(tagName: string, is = undefined): HTMLElement | SVGElement | MathMLElement{
+  return SVGElements.has(tagName)
+    ? document.createElementNS(Namespaces.svg, tagName)
+    : MathMLElements.has(tagName)
+      ? document.createElementNS(Namespaces.mathml, tagName)
+      : document.createElement(tagName, { is });
 }
 
 export const hydrate: typeof hydrateCore = (...args) => {
@@ -144,15 +147,13 @@ export function createDynamic<T extends ValidComponent>(
         return untrack(() => component(props));
 
       case "string":
-        const isSvg = SVGElements.has(component);
         const el = sharedConfig.hydrating
           ? getNextElement()
           : createElement(
               component,
-              isSvg,
               untrack(() => props.is)
             );
-        spread(el, props, isSvg);
+        spread(el, props);
         return el;
 
       default: