fix(translator-default): issue with user defined component var

marko-js · Jun 10, 2021 · a36cfd1 · a36cfd1
1 parent 6afebd2
commit a36cfd1
Show file tree

Hide file tree

Showing 387 changed files with 1,414 additions and 1,390 deletions.
diff --git a/packages/marko/test/api-compiler/fixtures/compileFileForBrowser-callback.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileFileForBrowser-callback.js/expected.js
diff --git a/packages/marko/test/api-compiler/fixtures/compileFileForBrowser.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileFileForBrowser.js/expected.js
diff --git a/packages/marko/test/api-compiler/fixtures/compileForBrowser-callback.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileForBrowser-callback.js/expected.js
diff --git a/packages/marko/test/api-compiler/fixtures/compileForBrowser.js/expected.js b/packages/marko/test/api-compiler/fixtures/compileForBrowser.js/expected.js
diff --git a/packages/marko/test/components-browser/fixtures/redefine-component-var/index.marko b/packages/marko/test/components-browser/fixtures/redefine-component-var/index.marko
@@ -0,0 +1,7 @@
+class {}
+
+$ const component = "World";
+
+<div key="root">
+    Hello ${component}
+</div>
diff --git a/packages/marko/test/components-browser/fixtures/redefine-component-var/test.js b/packages/marko/test/components-browser/fixtures/redefine-component-var/test.js
@@ -0,0 +1,6 @@
+var expect = require("chai").expect;
+
+module.exports = function (helpers) {
+  var component = helpers.mount(require.resolve("./index"), {});
+  expect(component.getEl("root")).to.exist;
+};
diff --git a/packages/translator-default/src/index.js b/packages/translator-default/src/index.js
@@ -166,6 +166,11 @@ export const translate = {
   MarkoScriptlet,
   MarkoClass,
   MarkoComment,
+  ReferencedIdentifier(path) {
+    if (path.node.name === "component" && !path.scope.hasBinding("component")) {
+      path.replaceWith(path.hub.file._componentInstanceIdentifier);
+    }
+  },
   Program: {
     enter(path) {
       const {
@@ -190,6 +195,10 @@ export const translate = {
       }
 
       file._componentDefIdentifier = path.scope.generateUidIdentifier(
+        "componentDef"
+      );
+
+      file._componentInstanceIdentifier = path.scope.generateUidIdentifier(
         "component"
       );
 
@@ -365,7 +374,7 @@ export const translate = {
                   t.identifier("input"),
                   t.identifier("out"),
                   file._componentDefIdentifier,
-                  t.identifier("component"),
+                  file._componentInstanceIdentifier,
                   t.identifier("state")
                 ],
                 renderBlock.node

diff --git a/packages/translator-default/src/placeholder/index[vdom].js b/packages/translator-default/src/placeholder/index[vdom].js
@@ -1,4 +1,3 @@
-import { types as t } from "@marko/compiler";
 import write from "../util/vdom-out-write";
 import withPreviousLocation from "../util/with-previous-location";
 
@@ -13,7 +12,7 @@ export default function (path) {
   } else {
     path.replaceWith(
       withPreviousLocation(
-        write(method, value, t.identifier("component")),
+        write(method, value, path.hub.file._componentInstanceIdentifier),
         node
       )
     );

diff --git a/packages/translator-default/src/tag/native-tag[html]/index.js b/packages/translator-default/src/tag/native-tag[html]/index.js
@@ -152,7 +152,7 @@ export default function (path, isNullable) {
           t.memberExpression(t.identifier("out"), t.identifier("bf")),
           [
             normalizeTemplateString`f_${key}`,
-            t.identifier("component"),
+            file._componentInstanceIdentifier,
             t.numericLiteral(1)
           ]
         )

diff --git a/packages/translator-default/src/tag/native-tag[vdom]/index.js b/packages/translator-default/src/tag/native-tag[vdom]/index.js
@@ -67,7 +67,7 @@ export function tagArguments(path, isStatic) {
     name,
     attrsObj,
     !key && isStatic ? t.nullLiteral() : key,
-    isStatic ? t.nullLiteral() : t.identifier("component"),
+    isStatic ? t.nullLiteral() : file._componentInstanceIdentifier,
     isStatic
       ? t.numericLiteral(body.length)
       : body.length
@@ -173,7 +173,10 @@ export default function (path, isNullable) {
       t.expressionStatement(
         t.callExpression(
           t.memberExpression(t.identifier("out"), t.identifier("bf")),
-          [normalizeTemplateString`f_${key}`, t.identifier("component")]
+          [
+            normalizeTemplateString`f_${key}`,
+            path.hub.file._componentInstanceIdentifier
+          ]
         )
       )
     );

diff --git a/packages/translator-default/src/text/index[vdom].js b/packages/translator-default/src/text/index[vdom].js
@@ -11,7 +11,7 @@ export default function (path) {
       write(
         "t",
         t.stringLiteral(decode(node.value)),
-        t.identifier("component")
+        path.hub.file._componentInstanceIdentifier
       ),
       node
     )

diff --git a/packages/translator-default/src/util/optimize-vdom-create.js b/packages/translator-default/src/util/optimize-vdom-create.js
@@ -133,7 +133,7 @@ export function optimizeStaticVDOM(path) {
     t.variableDeclarator(identifier, state.currentRoot)
   ]);
   file.path.node.body.push(d);
-  path.replaceWith(write("n", identifier, t.identifier("component")));
+  path.replaceWith(write("n", identifier, file._componentInstanceIdentifier));
   path.skip();
 }
 

diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/cjs-expected.js
@@ -19,7 +19,7 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tag-i
 var _default = _marko_template;
 exports.default = _default;
 const _marko_component = {};
-_marko_template._ = (0, _renderer.default)(function (input, out, _component, component, state) {
+_marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state) {
   let _thing = null;
 
   if (x) {
@@ -33,7 +33,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _component, com
 
   (0, _renderTag.default)(_index.default, {
     "thing": _thing
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/html-expected.js
@@ -8,7 +8,7 @@ import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag";
 import _marko_renderer from "marko/src/runtime/components/renderer";
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   let _thing = null;
 
   if (x) {
@@ -22,7 +22,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
 
   _marko_tag(_customTag, {
     "thing": _thing
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/...ranslator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js b/...ranslator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js
@@ -8,7 +8,7 @@ import _customTag from "./components/custom-tag/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag";
 import _marko_renderer from "marko/dist/runtime/components/renderer";
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   let _thing = null;
 
   if (x) {
@@ -22,7 +22,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
 
   _marko_tag(_customTag, {
     "thing": _thing
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true

diff --git a/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js b/packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdom-expected.js
@@ -12,21 +12,21 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   let _thing = null;
 
   if (x) {
     _thing = {
       "x": 1,
       "renderBody": out => {
-        out.t("Hello", component);
+        out.t("Hello", _component);
       }
     };
   }
 
   _marko_tag(_customTag, {
     "thing": _thing
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/...ranslator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js b/...ranslator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js
@@ -12,21 +12,21 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   let _thing = null;
 
   if (x) {
     _thing = {
       "x": 1,
       "renderBody": out => {
-        out.t("Hello", component);
+        out.t("Hello", _component);
       }
     };
   }
 
   _marko_tag(_customTag, {
     "thing": _thing
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true

diff --git a/...ges/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js b/...ges/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/cjs-expected.js
@@ -19,7 +19,7 @@ const _marko_componentType = "packages/translator-default/test/fixtures/at-tags-
 var _default = _marko_template;
 exports.default = _default;
 const _marko_component = {};
-_marko_template._ = (0, _renderer.default)(function (input, out, _component, component, state) {
+_marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state) {
   const _items = [];
 
   for (const a in b) {
@@ -31,7 +31,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _component, com
   (0, _renderTag.default)(_index.default, {
     "items": _items,
     "other": {}
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/...es/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js b/...es/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/html-expected.js
@@ -8,7 +8,7 @@ import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag";
 import _marko_renderer from "marko/src/runtime/components/renderer";
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   const _items = [];
 
   for (const a in b) {
@@ -20,7 +20,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _marko_tag(_hello, {
     "items": _items,
     "other": {}
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/...tor-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js b/...tor-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js
@@ -8,7 +8,7 @@ import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag";
 import _marko_renderer from "marko/dist/runtime/components/renderer";
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   const _items = [];
 
   for (const a in b) {
@@ -20,7 +20,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _marko_tag(_hello, {
     "items": _items,
     "other": {}
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true

diff --git a/...es/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js b/...es/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdom-expected.js
@@ -12,7 +12,7 @@ import { r as _marko_registerComponent } from "marko/src/runtime/components/regi
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   const _items = [];
 
   for (const a in b) {
@@ -24,7 +24,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _marko_tag(_hello, {
     "items": _items,
     "other": {}
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true,

diff --git a/...tor-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js b/...tor-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js
@@ -12,7 +12,7 @@ import { r as _marko_registerComponent } from "marko/dist/runtime/components/reg
 _marko_registerComponent(_marko_componentType, () => _marko_template);
 
 const _marko_component = {};
-_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state) {
   const _items = [];
 
   for (const a in b) {
@@ -24,7 +24,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   _marko_tag(_hello, {
     "items": _items,
     "other": {}
-  }, out, _component, "0");
+  }, out, _componentDef, "0");
 }, {
   t: _marko_componentType,
   i: true