Add migration for legacy widget with getInitialState and no getTemplateData (#1385)

* Add migration for data = state

package.json

@@ -62,7 +62,7 @@
         "warp10": "^2.0.1"
     },
     "devDependencies": {
-        "@marko/migrate": "^4.1.1",
+        "@marko/migrate": "^5.1.0",
         "babel-cli": "^6.24.1",
         "babel-core": "^6.24.1",
         "babel-plugin-minprops": "^2.0.1",

scripts/babel-plugin-marko-debug.js

@@ -56,9 +56,7 @@ function replaceMarkoDebug(path, test, consequent, alternate) {
     // If we found a condition that is a string (and isn't "MARKO_DEBUG") it's most likely a mistake.
     if (test.value !== "MARKO_DEBUG") {
         throw new Error(
-            `Found if statement with StringLiteral "${
+            `Found if statement with StringLiteral "${test.value}", did you mean "MARKO_DEBUG".`
-                test.value
-            }", did you mean "MARKO_DEBUG".`
         );
     }
 

src/compiler/Normalizer.js

@@ -75,9 +75,7 @@ class Normalizer {
                                 ROOT_TAGS.includes(node.tagName)
                             ) {
                                 context.addError(
-                                    `"${
+                                    `"${node.tagName}" can only be used at the root of the template.`,
-                                        node.tagName
-                                    }" can only be used at the root of the template.`,
                                     node
                                 );
                             }

src/compiler/ast/CustomTag.js

@@ -729,17 +729,11 @@ class CustomTag extends HtmlElement {
             if (!parentCustomTag) {
                 if (tagDef.parentTagName) {
                     codegen.addError(
-                        `Invalid usage of the <${
+                        `Invalid usage of the <${this.tagName}> nested tag. Tag not nested within a <${tagDef.parentTagName}> tag.`
-                            this.tagName
-                        }> nested tag. Tag not nested within a <${
-                            tagDef.parentTagName
-                        }> tag.`
                     );
                 } else {
                     codegen.addError(
-                        `Invalid usage of the <${
+                        `Invalid usage of the <${this.tagName}> nested tag. Tag not nested within a custom tag.`
-                            this.tagName
-                        }> nested tag. Tag not nested within a custom tag.`
                     );
                 }
 

src/core-tags/migrate/all-tags/params.js

@@ -11,9 +11,7 @@ module.exports = function migrate(el, context) {
 function enableTagParams(el, context) {
     if (el.argument) {
         context.deprecate(
-            `The <${el.tagName}(param)> syntax is deprecated. Please use the <${
+            `The <${el.tagName}(param)> syntax is deprecated. Please use the <${el.tagName}|param|> syntax instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-paren-params`,
-                el.tagName
-            }|param|> syntax instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-paren-params`,
             el
         );
         el.params = context.builder.parseJavaScriptParams(el.argument);

src/core-tags/migrate/all-templates/index.js

@@ -1,6 +1,7 @@
 const commonMigrators = [
     require("./non-standard-template-literals"),
     require("./render-calls"),
+    require("./widget-data-is-state"),
     require("./widget-get-template-data")
 ];
 

src/core-tags/migrate/all-templates/widget-data-is-state.js

@@ -0,0 +1,16 @@
+"use strict";
+
+module.exports = function migrator(el, context) {
+    context.addMigration({
+        name: "dataIsState",
+        description:
+            "Migrate add `data = state` since only `getInitialState` was defined in widget",
+        apply() {
+            context.root.prependChild(
+                context.builder.scriptlet({
+                    value: "var data = state"
+                })
+            );
+        }
+    });
+};

src/runtime/components/legacy/dependencies/index.js

@@ -107,9 +107,7 @@ function getInitModule(path, components) {
             var virtualPath = path + ".init.js";
             var registrations = components.map(
                 component =>
-                    `components.register('${component.id}', require('${
+                    `components.register('${component.id}', require('${component.path}'));`
-                        component.path
-                    }'));`
             );
             var code = `
                 var components = require('marko/components');

test/migrate/fixtures/include-tag/snapshot-expected.marko

@@ -14,9 +14,11 @@ import ExampleH from "../../../hello/example-h/index.marko"
 <!-- Import: duplicated -->
 <${ExampleA} x=1/>
 <!-- Import: with attributes -->
-<${ExampleB} ...{
+<${ExampleB}
-    a: 1
+    ...{
-} b=2/>
+        a: 1
+    }
+    b=2/>
 <!-- Import: index -->
 <${ExampleC}/>
 <!-- Import: name conflict -->
@@ -40,11 +42,14 @@ $ const ExampleD = undefined;
 <!-- Dynamic: with attributes -->
 <if(typeof input.x === "string")>${input.x}</if>
 <else>
-    <${input.x} ...{
+    <${input.x}
-        a: 1
+        ...{
-    } ...{
+            a: 1
-        b: 2
+        }
-    } c=3/>
+        ...{
+            b: 2
+        }
+        c=3/>
 </else>
 <!-- Dynamic: with body -->
 <if(typeof input.x === "string")>${input.x}</if>

test/migrate/fixtures/layout-use/snapshot-expected.marko

@@ -10,9 +10,11 @@ import ExampleD_1 from "./example-d.marko"
     <div/>
 </>
 <!-- Import: with attributes -->
-<${ExampleB} ...{
+<${ExampleB}
-    a: 1
+    ...{
-} b=2>
+        a: 1
+    }
+    b=2>
     <div/>
 </>
 <!-- Import: index -->
@@ -29,8 +31,10 @@ $ const ExampleD = undefined;
     <div/>
 </>
 <!-- Dynamic: with attributes -->
-<${input.x} ...{
+<${input.x}
-    a: 1
+    ...{
-} b=2>
+        a: 1
+    }
+    b=2>
     <div/>
 </>

test/migrate/fixtures/widget-data-is-state/index.js

@@ -0,0 +1,9 @@
+module.exports = require("marko-widgets").defineComponent({
+    template: require("./template"),
+    getInitialState(input) {
+        return {
+            x: input.x,
+            y: input.y
+        };
+    }
+});

test/migrate/fixtures/widget-data-is-state/prompts.js

@@ -0,0 +1,12 @@
+module.exports = [
+    {
+        question:
+            "A widget file was discovered, would you like to migrate that as well?\nNote: widget migrations are not 100% safe and should be tested after migration.",
+        answer: true
+    },
+    {
+        question:
+            "Would you like to rename the component file?\nNote: Marko 4 automatically discovers these files based on the naming convention, you may be able to remove them from a browser.json file after this.",
+        answer: false
+    }
+];

test/migrate/fixtures/widget-data-is-state/snapshot-expected.js

@@ -0,0 +1,10 @@
+// test/migrate/fixtures/widget-data-is-state/index.js
+
+module.exports = {
+    onCreate(input, out) {
+        this.state = {
+            x: input.x,
+            y: input.y
+        };
+    }
+};

test/migrate/fixtures/widget-data-is-state/snapshot-expected.marko

@@ -0,0 +1,4 @@
+<!-- test/migrate/fixtures/widget-data-is-state/template.marko -->
+
+$ var data = state;
+<div/>

test/migrate/fixtures/widget-data-is-state/template.marko

@@ -0,0 +1 @@
+<div w-bind/>