Namespace fixes (#1333)

* Calculate namespace on actualize
marko-js · May 20, 2019 · e065c14 · e065c14
1 parent 3a9ddbd
commit e065c14
Show file tree

Hide file tree

Showing 67 changed files with 354 additions and 337 deletions.
diff --git a/src/compiler/CompileContext.js b/src/compiler/CompileContext.js
@@ -22,11 +22,9 @@ const markoPkgVersion = require("../../package.json").version;
 const rootDir = path.join(__dirname, "../");
 const isDebug = require("../build.json").isDebug;
 
-// const FLAG_IS_SVG = 1;
-// const FLAG_IS_TEXTAREA = 2;
-// const FLAG_SIMPLE_ATTRS = 4;
-// const FLAG_PRESERVE = 8;
-const FLAG_CUSTOM_ELEMENT = 16;
+// const FLAG_SIMPLE_ATTRS = 1;
+// const FLAG_PRESERVE = 2;
+const FLAG_CUSTOM_ELEMENT = 4;
 
 const FLAG_PRESERVE_WHITESPACE = "PRESERVE_WHITESPACE";
 

diff --git a/src/compiler/ast/HtmlElement/index.js b/src/compiler/ast/HtmlElement/index.js
@@ -11,12 +11,6 @@ function beforeGenerateCode(event) {
     var tagName = event.node.tagName;
     var context = event.context;
 
-    var tagDef =
-        typeof tagName === "string" ? context.getTagDef(tagName) : undefined;
-    if (tagDef && tagDef.htmlType === "svg") {
-        context.pushFlag("SVG");
-    }
-
     if (tagName === "script") {
         context.pushFlag("SCRIPT_BODY");
     }
@@ -29,13 +23,6 @@ function afterGenerateCode(event) {
     var tagName = event.node.tagName;
     var context = event.context;
 
-    var tagDef =
-        typeof tagName === "string" ? context.getTagDef(tagName) : undefined;
-
-    if (tagDef && tagDef.htmlType === "svg") {
-        context.popFlag("SVG");
-    }
-
     if (tagName === "script") {
         context.popFlag("SCRIPT_BODY");
     }

diff --git a/src/compiler/ast/HtmlElement/vdom/HtmlElementVDOM.js b/src/compiler/ast/HtmlElement/vdom/HtmlElementVDOM.js
@@ -3,11 +3,9 @@
 const Node = require("../../Node");
 const vdomUtil = require("../../../util/vdom");
 
-const FLAG_IS_SVG = 1;
-const FLAG_IS_TEXTAREA = 2;
-const FLAG_SIMPLE_ATTRS = 4;
-// const FLAG_PRESERVE = 8;
-// const FLAG_CUSTOM_ELEMENT = 16;
+const FLAG_SIMPLE_ATTRS = 1;
+// const FLAG_PRESERVE = 2;
+// const FLAG_CUSTOM_ELEMENT = 4;
 
 let CREATE_ARGS_COUNT = 0;
 const INDEX_TAG_NAME = CREATE_ARGS_COUNT++;
@@ -44,13 +42,6 @@ function finalizeCreateArgs(createArgs, builder) {
     return createArgs;
 }
 
-const MAYBE_SVG = {
-    a: true,
-    script: true,
-    style: true,
-    title: true
-};
-
 const SIMPLE_ATTRS = {
     class: true,
     style: true,
@@ -86,8 +77,6 @@ class HtmlElementVDOM extends Node {
         this.runtimeFlags = def.runtimeFlags;
         this.isAutoKeyed = def.isAutoKeyed;
 
-        this.isSVG = false;
-        this.isTextArea = false;
         this.hasAttributes = false;
         this.hasSimpleAttrs = false; // This will be set to true if the HTML element
         // only attributes in the following set:
@@ -105,30 +94,15 @@ class HtmlElementVDOM extends Node {
 
         vdomUtil.registerOptimizer(context);
 
-        let tagName = this.tagName;
+        const tagName = this.tagName;
 
         if (tagName.type === "Literal" && typeof tagName.value === "string") {
-            let tagDef = context.getTagDef(tagName.value);
-            if (tagDef) {
-                if (tagDef.htmlType === "svg") {
-                    this.isSVG = true;
-                } else {
-                    if (MAYBE_SVG[tagName.value] && context.isFlagSet("SVG")) {
-                        this.isSVG = true;
-                    } else {
-                        this.tagName = tagName = builder.literal(
-                            tagName.value.toUpperCase()
-                        );
-
-                        if (tagName.value === "TEXTAREA") {
-                            this.isTextArea = true;
-                        }
-                    }
-                }
-            }
+            const tagDef = context.getTagDef(tagName.value);
             this.isLiteralTag = true;
-        } else if (context.isFlagSet("SVG")) {
-            this.isSVG = true;
+
+            if (tagDef && tagDef.html && !tagDef.htmlType) {
+                tagName.value = tagName.value.toLowerCase();
+            }
         }
 
         let attributes = this.attributes;
@@ -273,14 +247,6 @@ class HtmlElementVDOM extends Node {
 
         var flags = 0;
 
-        if (this.isSVG) {
-            flags |= FLAG_IS_SVG;
-        }
-
-        if (this.isTextArea) {
-            flags |= FLAG_IS_TEXTAREA;
-        }
-
         if (this.hasSimpleAttrs) {
             flags |= FLAG_SIMPLE_ATTRS;
         }
@@ -316,27 +282,21 @@ class HtmlElementVDOM extends Node {
             writer.write(".");
 
             funcCall = builder.functionCall(
-                builder.identifier(
-                    this.isLiteralTag || this.isSVG ? "e" : "ed"
-                ),
+                builder.identifier("e"),
                 createArgs
             );
         } else if (this.isStatic && this.createElementId) {
             funcCall = builder.functionCall(this.createElementId, createArgs);
         } else if (this.isHtmlOnly) {
             writer.write("out.");
             funcCall = builder.functionCall(
-                builder.identifier(
-                    this.isLiteralTag || this.isSVG ? "e" : "ed"
-                ),
+                builder.identifier("e"),
                 createArgs
             );
         } else {
             writer.write("out.");
             funcCall = builder.functionCall(
-                builder.identifier(
-                    this.isLiteralTag || this.isSVG ? "be" : "bed"
-                ),
+                builder.identifier("be"),
                 createArgs
             );
         }

diff --git a/src/core-tags/components/preserve-tag-browser.js b/src/core-tags/components/preserve-tag-browser.js
@@ -36,7 +36,7 @@ module.exports = function render(input, out) {
                             key,
                             null,
                             0,
-                            8 /* FLAG_PRESERVE */
+                            2 /* FLAG_PRESERVE */
                         );
                         globalComponentsContext.___preservedEls[
                             component.id + "-" + key

diff --git a/src/core-tags/marko.json b/src/core-tags/marko.json
@@ -5,6 +5,7 @@
         "./core/marko.json",
         "./html/marko.json",
         "./migrate/marko.json",
-        "./svg/marko.json"
+        "./svg/marko.json",
+        "./math/marko.json"
     ]
 }
diff --git a/src/core-tags/math/marko.json b/src/core-tags/math/marko.json
@@ -0,0 +1,45 @@
+{
+    "taglib-id": "marko-math",
+    "<math>": { "html": true, "htmlType": "math" },
+    "<maction>": { "html": true, "htmlType": "math" },
+    "<maligngroup>": { "html": true, "htmlType": "math" },
+    "<malignmark>": { "html": true, "htmlType": "math" },
+    "<menclose>": { "html": true, "htmlType": "math" },
+    "<merror>": { "html": true, "htmlType": "math" },
+    "<mfenced>": { "html": true, "htmlType": "math" },
+    "<mfrac>": { "html": true, "htmlType": "math" },
+    "<mglyph>": { "html": true, "htmlType": "math" },
+    "<mi>": { "html": true, "htmlType": "math" },
+    "<mlabeledtr>": { "html": true, "htmlType": "math" },
+    "<mlongdiv>": { "html": true, "htmlType": "math" },
+    "<mmultiscripts>": { "html": true, "htmlType": "math" },
+    "<mn>": { "html": true, "htmlType": "math" },
+    "<mo>": { "html": true, "htmlType": "math" },
+    "<mover>": { "html": true, "htmlType": "math" },
+    "<mpadded>": { "html": true, "htmlType": "math" },
+    "<mphantom>": { "html": true, "htmlType": "math" },
+    "<mroot>": { "html": true, "htmlType": "math" },
+    "<mrow>": { "html": true, "htmlType": "math" },
+    "<ms>": { "html": true, "htmlType": "math" },
+    "<mscarries>": { "html": true, "htmlType": "math" },
+    "<mscarry>": { "html": true, "htmlType": "math" },
+    "<msgroup>": { "html": true, "htmlType": "math" },
+    "<mstack>": { "html": true, "htmlType": "math" },
+    "<msline>": { "html": true, "htmlType": "math" },
+    "<mspace>": { "html": true, "htmlType": "math" },
+    "<msqrt>": { "html": true, "htmlType": "math" },
+    "<msrow>": { "html": true, "htmlType": "math" },
+    "<mstyle>": { "html": true, "htmlType": "math" },
+    "<msub>": { "html": true, "htmlType": "math" },
+    "<msup>": { "html": true, "htmlType": "math" },
+    "<msubsup>": { "html": true, "htmlType": "math" },
+    "<mtable>": { "html": true, "htmlType": "math" },
+    "<mtd>": { "html": true, "htmlType": "math" },
+    "<mtext>": { "html": true, "htmlType": "math" },
+    "<mtr>": { "html": true, "htmlType": "math" },
+    "<munder>": { "html": true, "htmlType": "math" },
+    "<munderover>": { "html": true, "htmlType": "math" },
+    "<semantics>": { "html": true, "htmlType": "math" },
+    "<mprescripts>": { "html": true, "htmlType": "math" },
+    "<none>": { "html": true, "htmlType": "math" }
+}
diff --git a/src/runtime/vdom/AsyncVDOMBuilder.js b/src/runtime/vdom/AsyncVDOMBuilder.js
@@ -106,7 +106,7 @@ var proto = (AsyncVDOMBuilder.prototype = {
         flags,
         props
     ) {
-        var element = VElement.___createElementDynamicTag(
+        return this.element(
             tagName,
             attrsHelper(attrs),
             key,
@@ -115,7 +115,6 @@ var proto = (AsyncVDOMBuilder.prototype = {
             flags,
             props
         );
-        return this.___beginNode(element, childCount);
     },
 
     n: function(node, component) {
@@ -196,7 +195,7 @@ var proto = (AsyncVDOMBuilder.prototype = {
         flags,
         props
     ) {
-        var element = VElement.___createElementDynamicTag(
+        return this.beginElement(
             tagName,
             attrsHelper(attrs),
             key,
@@ -205,8 +204,6 @@ var proto = (AsyncVDOMBuilder.prototype = {
             flags,
             props
         );
-        this.___beginNode(element, childCount, true);
-        return this;
     },
 
     ___beginFragment: function(key, component, preserve) {
@@ -427,7 +424,7 @@ var proto = (AsyncVDOMBuilder.prototype = {
             var vdomTree = this.___getOutput();
             // Create the root document fragment node
             doc = doc || this.___document || document;
-            this.___vnode = node = vdomTree.___actualize(doc);
+            this.___vnode = node = vdomTree.___actualize(doc, null);
             morphdom(node, vdomTree, doc, this.___components);
         }
         return node;