From 9c7298c59ddb527c690b03437ba66b798c8dd922 Mon Sep 17 00:00:00 2001 From: Chris Sauve Date: Mon, 30 May 2016 12:06:46 -0400 Subject: [PATCH] Add a simple warning system for common issues --- packages/esify/README.md | 10 ++++++++++ packages/esify/index.js | 32 ++++++++++++++++++++++++++++++++ packages/esify/package.json | 1 + 3 files changed, 43 insertions(+) diff --git a/packages/esify/README.md b/packages/esify/README.md index 071c0ba..08ba804 100644 --- a/packages/esify/README.md +++ b/packages/esify/README.md @@ -8,6 +8,16 @@ npm install -g esify ``` +## Limitations + +The tools on which `esify` is build have certain limitations that prevent us from providing the ideal conversion in some cases. We strongly recommend you have our linting configuration, [`eslint-plugin-shopify`](../eslint-plugin-shopify), set up for your project before beginning to translate in order to easily identify small translation errors (unused or missing references, indentation, etc). Below is a list of limitations that you should check for in the code you are converting: + +- All comments will be removed in the transformed output (including Sprockets directives) +- CoffeeScript soak calls with embedded methods (e.g., `foo.bar()?.baz`) will compile to JavaScript that is hard to read +- Assignment to a global outside of the file creating that global will result in incorrect exports (e.g., `Shopify.UIPopover.foo = 'bar'` outside the file declaring `Shopify.UIPopover.foo`) +- Strings and regular expressions with complex escapes might be converted improperly +- Multiline CoffeeScript strings become a single-line string with newlines inserted as needed + ## Usage From the root of the Shopify directory, run this script with a single, relative CoffeeScript file, or a glob pattern. Wait for it to finish, and marvel at the clean ESNext code that is spit out beside the original file! Note this script does not delete the original CoffeeScript file — you should review the output before pushing any changes. diff --git a/packages/esify/index.js b/packages/esify/index.js index 2cddaab..7d2689d 100644 --- a/packages/esify/index.js +++ b/packages/esify/index.js @@ -1,5 +1,6 @@ var path = require('path'); var decaf = require('shopify-decaf'); +var chalk = require('chalk'); var jscodeshift = require('jscodeshift'); require('babel-register')({ignore: false}); @@ -114,8 +115,39 @@ function runTransform(code, name) { return newCode == null ? code : newCode; } +function warn(message) { + console.log(chalk.yellow('[warning]') + ' ' + message); +} + +var WARNING_CHECKS = [ + function checkForComments(source) { + if (/#[^=]/.test(source)) { + warn('Your file contains comments. Unfortunately, the CoffeeScript compiler does not expose these comments. Make sure to copy over any important comments to the appropriate place in your new JavaScript file'); + } + }, + function checkForSprocketsDirective(source) { + if (/#=/.test(source)) { + warn('Your file contains Sprockets directives. If these directives are requiring additional files, you must translate them into `import` statements if this command failed to do so automatically. Other directives will need to be copied over to the new JavaScript file.'); + } + }, + function checkForGlobalClass(source) { + var match = source.match(/class\s((?:@|this\.)\w+)/); + if (match) { + warn('Your file contains a class exposed to `window` using the form `' + match[1] + '`. These are not supported by `esify` and will not do what you expect when bundled with Sprockets commoner. Expose this to some other global namespace before trying again.'); + } + }, + function checkForMultilineStrings(source) { + if (/"""/.test(source)) { + warn('Your file contains multiline strings. These get compiled down to a single-line string with spaces added; you may want to update the formatting to use an ES6 multiline string instead.'); + } + }, +]; + module.exports = function transform(source, options) { var testTransforms = options.testTransforms == null ? false : options.testTransforms; + + WARNING_CHECKS.forEach(function(warningCheck) { warningCheck(source); }); + var code = decaf.compile(source, OPTIONS.printOptions); TRANSFORMS.forEach(function(transformer) { diff --git a/packages/esify/package.json b/packages/esify/package.json index 0084fd0..72c9b7c 100644 --- a/packages/esify/package.json +++ b/packages/esify/package.json @@ -17,6 +17,7 @@ "bin": "./bin/esify", "dependencies": { "babel-register": "^6.9.0", + "chalk": "^1.1.3", "glob": "7.0.3", "js-codemod": "cpojer/js-codemod", "jscodeshift": "^0.3.20",