Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support using Babel 7 for internal code compilation. #343

Merged
merged 4 commits into from
Aug 19, 2017
Merged

Support using Babel 7 for internal code compilation. #343

merged 4 commits into from
Aug 19, 2017

Conversation

orta
Copy link
Member

@orta orta commented Aug 19, 2017

Well, this was simple. I updated a bunch of our versions, both 6 + 7 exists in Danger's dev dependency stack (as Jest brought 6 in, which is fine.)

This PR means Babel handles both JavaScript, and TypeScript. It's relatively trivial in terms of danger's implementation. Kinda amazing that something that has taken so much time is so trivial to work with as a consumer.

I'm not 100% that I'm getting the default options, don't want to accidentally kick off a project's plugins just to ensure flow/ts is added. However, all tests are passing locally. 👍

@DangerCI
Copy link

DangerCI commented Aug 19, 2017

Warnings
⚠️

New dependencies added: @types/lodash.includes, babel-core, babel-plugin-transform-typescript and babel-traverse.

⚠️

Could not get info from npm on @types/lodash.includes

yarn why @types/lodash.includes output

  • Has been hoisted to "@types/lodash.includes"
  • This module exists because it's specified in "devDependencies".
  • Disk size without dependencies: "16kB"
  • Disk size with unique dependencies: "1.7MB"
  • Disk size with transitive dependencies: "1.7MB"
  • Amount of shared dependencies: 1

babel-core

Author: Sebastian McKenzie

Description: Babel compiler core.

Homepage: https://babeljs.io/

Createdover 2 years ago
Last Updated3 days ago
LicenseMIT
Maintainers5
Releases249
Direct Dependenciesbabel-code-frame, babel-generator, babel-helpers, babel-messages, babel-register, babel-runtime, babel-template, babel-traverse, babel-types, babylon, convert-source-map, debug, json5, lodash, minimatch, path-is-absolute, private, slash and source-map
Keywords6to5, babel, classes, const, es6, harmony, let, modules, transpile, transpiler, var, babel-core and compiler
README # babel-core

Babel compiler core.

var babel = require("babel-core");
import { transform } from 'babel-core';
import * as babel from 'babel-core';

All transformations will use your local configuration files (.babelrc or in package.json). See options to disable it.

babel.transform(code: string, options?: Object)

Transforms the passed in code. Returning an object with the generated code,
source map, and AST.

babel.transform(code, options) // => { code, map, ast }

Example

var result = babel.transform("code();", options);
result.code;
result.map;
result.ast;

babel.transformFile(filename: string, options?: Object, callback: Function)

Asynchronously transforms the entire contents of a file.

babel.transformFile(filename, options, callback)

Example

babel.transformFile("filename.js", options, function (err, result) {
  result; // => { code, map, ast }
});

babel.transformFileSync(filename: string, options?: Object)

Synchronous version of babel.transformFile. Returns the transformed contents of
the filename.

babel.transformFileSync(filename, options) // => { code, map, ast }

Example

babel.transformFileSync("filename.js", options).code;

babel.transformFromAst(ast: Object, code?: string, options?: Object)

Given, an AST, transform it.

const code = "if (true) return;";
const ast = babylon.parse(code, { allowReturnOutsideFunction: true });
const { code, map, ast } = babel.transformFromAst(ast, code, options);

Options

Babel CLI

You can pass these options from the Babel CLI like so:

babel --name=value

Following is a table of the options you can use:

Option Default Description
ast true Include the AST in the returned object
auxiliaryCommentAfter null Attach a comment after all non-user injected code.
auxiliaryCommentBefore null Attach a comment before all non-user injected code.
babelrc true Specify whether or not to use .babelrc and .babelignore files. Not available when using the CLI, use --no-babelrc instead.
code true Enable code generation
comments true Output comments in generated output.
compact "auto" Do not include superfluous whitespace characters and line terminators. When set to "auto" compact is set to true on input sizes of >500KB.
env {} This is an object of keys that represent different environments. For example, you may have: { env: { production: { /* specific options */ } } } which will use those options when the environment variable BABEL_ENV is set to "production". If BABEL_ENV isn't set then NODE_ENV will be used, if it's not set then it defaults to "development"
extends null A path to an .babelrc file to extend
filename "unknown" Filename for use in errors etc.
filenameRelative (filename) Filename relative to sourceRoot.
generatorOpts {} An object containing the options to be passed down to the babel code generator, babel-generator
getModuleId null Specify a custom callback to generate a module id with. Called as getModuleId(moduleName). If falsy value is returned then the generated module id is used.
highlightCode true ANSI highlight syntax error code frames
ignore null Opposite to the only option. ignore is disregarded if only is specified.
inputSourceMap null A source map object that the output source map will be based on.
minified false Should the output be minified (not printing last semicolons in blocks, printing literal string values instead of escaped ones, stripping () from new when safe)
moduleId null Specify a custom name for module ids.
moduleIds false If truthy, insert an explicit id for modules. By default, all modules are anonymous. (Not available for common modules)
moduleRoot (sourceRoot) Optional prefix for the AMD module formatter that will be prepend to the filename on module definitions.
only null A glob, regex, or mixed array of both, matching paths to only compile. Can also be an array of arrays containing paths to explicitly match. When attempting to compile a non-matching file it's returned verbatim.
parserOpts {} An object containing the options to be passed down to the babel parser, babylon
plugins [] List of plugins to load and use.
presets [] List of presets (a set of plugins) to load and use.
retainLines false Retain line numbers. This will lead to wacky code but is handy for scenarios where you can't use source maps. (NOTE: This will not retain the columns)
resolveModuleSource null Resolve a module source ie. import "SOURCE"; to a custom value. Called as resolveModuleSource(source, filename).
shouldPrintComment null An optional callback that controls whether a comment should be output or not. Called as shouldPrintComment(commentContents). NOTE: This overrides the comment option when used.
sourceFileName (filenameRelative) Set sources[0] on returned source map.
sourceMaps false If truthy, adds a map property to returned output. If set to "inline", a comment with a sourceMappingURL directive is added to the bottom of the returned code. If set to "both" then a map property is returned as well as a source map comment appended. This does not emit sourcemap files by itself! To have sourcemaps emitted using the CLI, you must pass it the --source-maps option.
sourceMapTarget (filenameRelative) Set file on returned source map.
sourceRoot (moduleRoot) The root from which all sources are relative.
sourceType "module" Indicate the mode the code should be parsed in. Can be either "script" or "module".
wrapPluginVisitorMethod null An optional callback that can be used to wrap visitor methods. NOTE: This is useful for things like introspection, and not really needed for implementing anything. Called as wrapPluginVisitorMethod(pluginAlias, visitorType, callback).
yarn why babel-core output

  • Has been hoisted to "babel-core"
  • This module exists because it's specified in "devDependencies".
  • Disk size without dependencies: "304kB"
  • Disk size with unique dependencies: "8.33MB"
  • Disk size with transitive dependencies: "9.59MB"
  • Amount of shared dependencies: 38

babel-plugin-transform-typescript

Author: Unknown

Description: Transform TypeScript into ES.next

Homepage: http://npmjs.com/package/babel-plugin-transform-typescript

Created12 days ago
Last Updated12 days ago
LicenseMIT
Maintainers1
Releases1
Direct Dependenciesbabel-plugin-syntax-typescript
Keywordsbabel-plugin and typescript
README # babel-plugin-transform-typescript

Transform TypeScript into ES.next.

Does not type-check its input. For that, you will need to install and set up TypeScript.

Does not support namespaces or const enums because those require type information to transpile.
Also does not support export = and import =, because those cannot be transpiled to ES.next.

Example

In

const x: number = 0;

Out

const x = 0;

Installation

npm install --save-dev babel-plugin-transform-typescript

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-typescript"]
}

Via CLI

babel --plugins transform-typescript script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-typescript"]
});
yarn why babel-plugin-transform-typescript output

  • Has been hoisted to "babel-plugin-transform-typescript"
  • This module exists because it's specified in "devDependencies".
  • Disk size without dependencies: "36kB"
  • Disk size with unique dependencies: "56kB"
  • Disk size with transitive dependencies: "56kB"
  • Amount of shared dependencies: 1

Generated by 🚫 dangerJS

@orta orta force-pushed the babel7 branch 2 times, most recently from 1ec3339 to 9cf2d56 Compare August 19, 2017 11:22
import * as includesOriginal from "lodash.includes"
const includes = includesOriginal as Function

import includes from "lodash.includes"
const sentence = danger.utils.sentence
Copy link
Member Author

@orta orta Aug 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The above was a hack because the inferred type for lodash.includes was object: collection, target: any, fromIndex?:any, somethingElse:any having a extra mandatory 4th param.

By adding @types/lodash.include it went to object: collection, target: any, fromIndex?:any.

if (changelogDiff && !includes(changelogDiff, contributorName)) {
warn("Please add your GitHub name to the changelog entry, so we can attribute you correctly.")
// Politely ask for their name on the entry too
const changelogDiff = await danger.git.diffForFile("changelog.md")
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing the types above from includes highlighted that danger.git.diffForFile("changelog.md") actually returns a Promise. An older pre-release version of the API was probably synchronous. A good catch 👍

try {
require.resolve("babel-core") // tslint:disable-line
require("babel-polyfill") // tslint:disable-line
hasBabel = true

try {
require.resolve("babel-plugin-transform-typescript") // tslint:disable-line
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this require dangerfile.ts users to include a .babelrc with this transform in order for the TypeScript dangerfile to be evaluated?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before this PR, all that was needed was a project to include the typescript dependency, and the dangerfile.ts could be parsed, right? My question is, is this no longer the case?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh, I thought about this for a bit, and came to the same conclusion. So I started work on bringing back the original typescript optional dep also - so you can have TypeScript via tsc, or Babel, and then optionally babel for JS. All depending on if the deps exist.

"transform-regenerator"
]
"presets": ["es2015", "stage-3"],
"plugins": ["syntax-async-functions", "transform-regenerator"]
Copy link

@hzoo hzoo Aug 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside: you can use preset-env and remove es2015, syntax,transform-regenerator (you'll need 2.0.0-alpha.19 since it's another repo still)

@orta
Copy link
Member Author

orta commented Aug 19, 2017

Thanks @hzoo - going to call this an atomic PR for now, I've made an issue about updating to the env preset ( I gave it a shot and it didn't pass tests, so I'll give myself a bit more time to figure it out later. )

@orta orta merged commit 9dba62f into master Aug 19, 2017
@orta orta deleted the babel7 branch August 19, 2017 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants