Deploy

[kanaabe]

A bunch of stuff. @eessex mind taking a second look at staging and merge if all looks well to you?

[artsy-peril]

	Warnings
⚠️	New dependencies added: @artsy/express-reloadable, babel-cli, babel-core, babel-plugin-inline-react-svg, babel-plugin-module-resolver, babel-plugin-rewire, babel-plugin-transform-class-properties, babel-plugin-transform-runtime, babel-preset-es2015, babel-preset-react, babel-preset-stage-3, babel-runtime, babelify, envify, react-styled-flexboxgrid and styled-components.
⚠️	Could not get info from npm on @artsy/express-reloadable
⚠️	New dependencies added: babel-eslint, babel-plugin-styled-components, babel-preset-env, babel-template, babel-types, chokidar, eslint-config-standard-react, eslint-plugin-import, eslint-plugin-node and eslint-plugin-react.

Typos for README.md

Line	Typo
34	ed Docker instance that boots MongoDB, ElasticSearch and Node. Chan
34	instance that boots MongoDB, ElasticSearch and Node. Changes made to sou
61	- Positron uses MongoDB as a database. To install Mon
61	oDB as a database. To install MongoDB using homebrew do the followi
61	ase. To install MongoDB using homebrew do the following, if you woul
61	y check the documentation at [MongoDB](http://docs.mongodb.org/manu
67	- Start the MongoDB database
73	- Install and run elasticsearch
85	artner gallery channel (David Zwirner).

babel-cli

Author: Sebastian McKenzie

Description: Babel command line.

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	70
Direct Dependencies	babel-core, babel-polyfill, babel-register, babel-runtime, commander, convert-source-map, fs-readdir-recursive, glob, lodash, output-file-sync, path-is-absolute, slash, source-map, v8flags and chokidar
Keywords	6to5, babel, es6, transpile, transpiler, babel-cli and compiler

README

# babel-cli

Babel command line.

In addition, various entry point scripts live in the top-level package at babel-cli/bin.

There are some shell-executable utility scripts, babel-external-helpers.js and babel-node.js, and the main Babel cli script, babel.js.

Install

npm install --save-dev babel-cli

Usage

babel script.js

For more in depth documentation see: http://babeljs.io/docs/usage/cli/

babel-core

Author: Sebastian McKenzie

Description: Babel compiler core.

Homepage: https://babeljs.io/

Created	over 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	249
Direct Dependencies	babel-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
Keywords	6to5, 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).

babel-plugin-inline-react-svg

Author: Jordan Gensler

Description: A babel plugin that optimizes and inlines SVGs for your react components.

Homepage: https://github.com/kesne/babel-plugin-inline-react-svg#readme

Created	11 months ago
Last Updated	13 days ago
License	MIT
Maintainers	1
Releases	7
Direct Dependencies	babel-template, babel-traverse, babylon, lodash.isplainobject, resolve-from and svgo
Keywords	babel, plugin, react, svg and inline

README

# babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with SVGO.

For example, the following code...

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSvg />;

will be transformed into...

import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSvg />;

Installation

npm install --save-dev babel-plugin-inline-react-svg

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    "inline-react-svg"
  ]
}

Options

• ignorePattern - A pattern that imports will be tested against to selectively ignore imports.
• svgo - svgo options. Example:

{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "removeAttrs": { "attrs": "(data-name)" }
            },
            {
              "cleanupIds": true
            }
          ]

        }
      }
    ]
  ]
}

Via CLI

$ babel --plugins inline-react-svg script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['inline-react-svg']
}) // => { code, map, ast };

---

Inspired by and code foundation provided by react-svg-loader.

babel-plugin-module-resolver

Author: Tommy Leunen

Description: Module resolver plugin for Babel

Homepage: https://github.com/tleunen/babel-plugin-module-resolver#readme

Created	about 1 year ago
Last Updated	5 days ago
License	MIT
Maintainers	1
Releases	17
Direct Dependencies	find-babel-config, glob and resolve
Keywords	babel, babel-plugin, module, resolver, alias, rewrite, resolve, rename, mapping, require and import

README

# babel-plugin-module-resolver [![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status Linux][circleci-image]][circleci-url] [![Build Status Windows][appveyor-image]][appveyor-url] [![Coverage Status][coverage-image]][coverage-url]

A babel plugin to add a new resolver for your modules when compiling your code using Babel. The plugin allows you to add new "root" directories that contains your modules. It also allows you to setup custom alias which can also be directories or specific files, or even other npm modules.

Description

The reason of this plugin is to simplify the require/import paths in your project. Therefore, instead of using complex relative paths like ../../../../utils/my-utils, you would be able to write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');

Usage

If you're coming from babel-plugin-module-alias, please read this section: Updating from babel-plugin-module-alias.

Install the plugin

$ npm install --save-dev babel-plugin-module-resolver

Specify the plugin in your .babelrc with the custom root or alias. Here's an example:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "test": "./test",
        "underscore": "lodash"
      }
    }]
  ]
}

Options

• root: Array of root directories. Specify the paths or a glob path (eg. ./src/**/components)
• alias: Map of alias. You can also alias node_modules dependencies, not just local files.
• extensions: Array of extensions used in the resolver. Override the default extensions (['.js', '.jsx', '.es', '.es6']).
• cwd: By default, the working directory is the one used for the resolver, but you can override it for your project.
  • The custom value babelrc will make the plugin look for the closest babelrc configuration based on the file to parse.

Updating from babel-plugin-module-alias

babel-plugin-module-resolver is a new version of the old babel-plugin-module-alias. Therefore, you also need to make a few modifications to your plugin configuration to make it work with this new plugin.

Updating is very easy, so for example if you had this configuration:

// This configuration is outdated, this is just an example
{
  "plugins": [
    ["module-alias", [
      { "src": "./src/utils", "expose": "utils" },
      { "src": "./src/components", "expose": "components" },
      { "src": "./src/actions", "expose": "actions" },
      { "src": "npm:lodash", "expose": "underscore" }
    ]]
  ]
}

You ony have to update the plugin options to be like this:

{
  "plugins": [
      ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "underscore": "lodash"
        }
      }]
    ]
}

ESLint plugin

If you're using ESLint, you should use the eslint-plugin-import, and this eslint-import-resolver-babel-module in order to remove falsy unresolved modules.

Editors autocompletion

• Atom: Uses atom-autocomplete-modules and enable the babel-plugin-module-resolver option.
• IntelliJ/WebStorm: You can add custom resources root directories, make sure it matches what you have in this plugin.

License

MIT, see LICENSE.md for details.

babel-plugin-rewire

Author: [email protected]

Description: A babel plugin adding the ability to rewire module dependencies. This enables to mock modules for testing purposes.

Homepage: https://github.com/speedskater/babel-plugin-rewire#readme

Created	over 2 years ago
Last Updated	4 months ago
License	ISC
Maintainers	1
Releases	40
Keywords	babel, plugin, rewire, es6 and modules

This README is too long to show.

babel-plugin-transform-class-properties

Author: Unknown

Description: This plugin transforms static class properties as well as properties declared with the property initializer syntax

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

Created	almost 2 years ago
Last Updated	15 days ago
License	MIT
Maintainers	5
Releases	43
Direct Dependencies	babel-helper-function-name, babel-plugin-syntax-class-properties, babel-runtime and babel-template
Keywords	babel-plugin

README

# babel-plugin-transform-class-properties

This plugin transforms es2015 static class properties as well as properties declared with the es2016 property initializer syntax.

Example

Below is a class with four class properties which will be transformed.

  class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
      return this.instanceProperty;
    }

    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function() {
      return Bork.staticProperty;
    }
  }

  let myBork = new Bork;

  //Property initializers are not on the prototype.
  console.log(myBork.prototype.boundFunction); // > undefined

  //Bound functions are bound to the class instance.
  console.log(myBork.boundFunction.call(undefined)); // > "bork"

  //Static function exists on the class.
  console.log(Bork.staticFunction()); // > "babelIsCool"

Installation

npm install --save-dev babel-plugin-transform-class-properties

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["transform-class-properties"]
}

// with options
{
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

Via CLI

babel --plugins transform-class-properties script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-class-properties"]
});

Options

spec

boolean, defaults to false.

Class properties are compiled to use Object.defineProperty. Static fields are now defined even if they are not initialized.

References

• Proposal: ES Class Fields & Static Properties

babel-plugin-transform-runtime

Author: Unknown

Description: Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals

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

Created	almost 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	36
Direct Dependencies	babel-runtime
Keywords	babel-plugin

README

# babel-plugin-transform-runtime

Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals

Installation

$ npm install babel-plugin-transform-runtime

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

$ babel --plugins transform-runtime script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-runtime"]
});

babel-preset-es2015

Author: Sebastian McKenzie

Description: Babel preset for all es2015 plugins.

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	39
Direct Dependencies	babel-plugin-check-es2015-constants, babel-plugin-transform-es2015-arrow-functions, babel-plugin-transform-es2015-block-scoped-functions, babel-plugin-transform-es2015-block-scoping, babel-plugin-transform-es2015-classes, babel-plugin-transform-es2015-computed-properties, babel-plugin-transform-es2015-destructuring, babel-plugin-transform-es2015-duplicate-keys, babel-plugin-transform-es2015-for-of, babel-plugin-transform-es2015-function-name, babel-plugin-transform-es2015-literals, babel-plugin-transform-es2015-modules-amd, babel-plugin-transform-es2015-modules-commonjs, babel-plugin-transform-es2015-modules-systemjs, babel-plugin-transform-es2015-modules-umd, babel-plugin-transform-es2015-object-super, babel-plugin-transform-es2015-parameters, babel-plugin-transform-es2015-shorthand-properties, babel-plugin-transform-es2015-spread, babel-plugin-transform-es2015-sticky-regex, babel-plugin-transform-es2015-template-literals, babel-plugin-transform-es2015-typeof-symbol, babel-plugin-transform-es2015-unicode-regex and babel-plugin-transform-regenerator

README

# babel-preset-es2015

Babel preset for all es2015 plugins.

Install

npm install --save-dev babel-preset-es2015

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["es2015"]
}

Via CLI

babel script.js --presets es2015

Via Node API

require("babel-core").transform("code", {
  presets: ["es2015"]
});

Options

loose

boolean, defaults to false.

Enable "loose" transformations for any plugins in this preset that allow them.

modules

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

spec

boolean, defaults to false.

Enable "spec" transformations for any plugins in this preset that allow them.

babel-preset-react

Author: Sebastian McKenzie

Description: Babel preset for all React plugins.

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	32
Direct Dependencies	babel-preset-flow, babel-plugin-syntax-jsx, babel-plugin-transform-react-display-name, babel-plugin-transform-react-jsx, babel-plugin-transform-react-jsx-source and babel-plugin-transform-react-jsx-self

README

# babel-preset-react

Babel preset for all React plugins.

This preset includes the following plugins/presets:

• preset-flow
• syntax-jsx
• transform-react-jsx
• transform-react-display-name

Install

You can also check out the React Getting Started page

For more info, check out the setup page on the cli and the usage docs.

Install the CLI and this preset

npm install --save-dev babel-cli babel-preset-react

Make a .babelrc config file with the preset

echo '{ "presets": ["react"] }' > .babelrc

Create a file to run on

echo '<h1>Hello, world!</h1>' > index.js

View the output

./node_modules/.bin/babel index.js

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["react"]
}

Via CLI

babel script.js --presets react 

Via Node API

require("babel-core").transform("code", {
  presets: ["react"]
});

babel-preset-stage-3

Author: Sebastian McKenzie

Description: Babel preset for stage 3 plugins

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	7 days ago
License	MIT
Maintainers	5
Releases	28
Direct Dependencies	babel-plugin-syntax-trailing-function-commas, babel-plugin-transform-async-generator-functions, babel-plugin-transform-async-to-generator, babel-plugin-transform-exponentiation-operator and babel-plugin-transform-object-rest-spread

README

# babel-preset-stage-3

Babel preset for stage 3 plugins.

The gist of Stage 3 is:

Stage 3: candidate

What is it? The proposal is mostly finished and now needs feedback from implementations and users to progress further.

What’s required? The spec text must be complete. Designated reviewers (appointed by TC39, not by the champion) and the ECMAScript spec editor must sign off on the spec text. There must be at least two spec-compliant implementations (which don’t have to be enabled by default).

What’s next? Henceforth, changes should only be made in response to critical issues raised by the implementations and their use.

Install

npm install --save-dev babel-preset-stage-3

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["stage-3"]
}

Via CLI

babel script.js --presets stage-3

Via Node API

require("babel-core").transform("code", {
  presets: ["stage-3"]
});

References

• Chapter "The TC39 process for ECMAScript features" in "Exploring ES2016 and ES2017" by Axel Rauschmayer

babel-runtime

Author: Sebastian McKenzie

Description: babel selfContained runtime

Homepage: http://npmjs.com/package/babel-runtime

Created	over 2 years ago
Last Updated	1 day ago
License	MIT
Maintainers	5
Releases	186
Direct Dependencies	core-js and regenerator-runtime

README

# babel-runtime

babelify

Author: Sebastian McKenzie

Description: Babel browserify transform

Homepage: https://github.com/babel/babelify

Created	over 2 years ago
Last Updated	about 2 months ago
License	MIT
Maintainers	2
Releases	21
Direct Dependencies	babel-core and object-assign

README

# babelify [](https://travis-ci.org/babel/babelify)

Babel browserify transform.

As of Babel 6.0.0 there are no plugins included by default. For babelify to be useful, you must also include some presets and/or plugins.

Installation

$ npm install --save-dev babelify

Usage

CLI

  $ browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

Node

var fs = require("fs");
var browserify = require("browserify");
browserify("./script.js")
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));

NOTE: Presets and plugins need to be installed as separate modules. For the above examples to work, you'd need to also install babel-preset-es2015 and babel-preset-react:

$ npm install --save-dev babel-preset-es2015 babel-preset-react

Options

Selected options are discussed below. See the babel docs for the complete list of options.

Options may be passed in via standard browserify ways:

$ browserify -t [ babelify --presets [ es2015 react ] ]

browserify().transform("babelify", {presets: ["es2015", "react"]});

var babelify = require("babelify");
browserify().transform(babelify, {presets: ["es2015", "react"]});

Or, with the configure method:

browserify().transform(babelify.configure({
  presets: ["es2015", "react"]
}));

Customizing extensions

By default, all files with the extensions .js, .es, .es6 and .jsx are compiled. You can change this by passing an array of extensions.

NOTE: This will override the default ones so if you want to use any of them
you have to add them back.

browserify().transform("babelify", {extensions: [".babel"]});

$ browserify -t [ babelify --extensions .babel ]

Now you can use:

import NavBar from "nav-bar.babel";
var Panels = require("panels.babel");

NOTE: By default, Browserify will only lookup .js and .json files when the extension is ommited (like node's require). To lookup additional extensions, use browserify's extensions option.

browserify({
  extensions: [".babel"]
}).transform("babelify", {
  extensions: [".babel"]
});

$ browserify --extensions=.babel -t [ babelify --extensions .babel ]

Now you can omit the extension and compile .babel files:

import NavBar from "nav-bar";
var Panels = require("panels");

Source maps

By default, browserify sets the source map sources paths relative to the basedir (or to process.cwd() if not set). To make the sources paths absolute, set the sourceMapsAbsolute option on babelify:

browserify().transform("babelify", {
  sourceMapsAbsolute: true
});

$ browserify -t [ babelify --sourceMapsAbsolute ]

Additional options

browserify().transform(babelify.configure({
  // Optional ignore regex - if any filenames **do** match this regex then
  // they aren't compiled
  ignore: /regex/,

  // Optional only regex - if any filenames **don't** match this regex
  // then they aren't compiled
  only: /my_es6_folder/
}))

$ browserify -t [ babelify --ignore regex --only my_es6_folder ]

Babel result (metadata and others)

Babelify emits a babelify event with Babel's full result object as the first
argument, and the filename as the second. Browserify doesn't pass-through the
events emitted by a transform, so it's necessary to get a reference to the
transform instance before you can attach a listener for the event:

var b = browserify().transform(babelify);

b.on("transform", function(tr) {
  if (tr instanceof babelify) {
    tr.once("babelify", function(result, filename) {
      result; // => { code, map, ast, metadata }
    });
  }
});

FAQ

Why aren't files in node_modules being transformed?

This is the default browserify behavior.

A possible solution is to add:

{
  "browserify": {
    "transform": ["babelify"]
  }
}

to the root of all your modules package.json that you want to be transformed. If you'd like to
specify options then you can use:

{
  "browserify": {
    "transform": [["babelify", { "presets": ["es2015"] }]]
  }
}

Another solution (proceed with caution!) is to run babelify as a global transform. Use the babel ignore option to narrow the number of files transformed:

browserify().transform(babelify, {
  global: true,
  ignore: /\/node_modules\/(?!app\/)/
});

The above example will transform all files except those in the node_modules directory that are not in node_modules/app.

Why am I not getting source maps?

To use source maps, enable them in browserify with the debug option:

browserify({debug: true}).transform("babelify");

$ browserify -d -t [ babelify ]

If you want the source maps to be of the post-transpiled code, then leave debug on, but turn off babelify's sourceMaps:

browserify({debug: true}).transform("babelify", {sourceMaps: false});

$ browserify -d -t [ babelify --no-sourceMaps ]

envify

Author: Hugh Kennedy

Description: Selectively replace Node-style environment variables with plain strings.

Homepage: https://github.com/hughsk/envify#readme

Created	about 4 years ago
Last Updated	about 2 months ago
License	MIT
Maintainers	4
Releases	19
Direct Dependencies	esprima and through
Keywords	environment, variables, browserify, browserify-transform, transform, source and configuration

README

# envify [](http://travis-ci.org/hughsk/envify) [](http://github.com/hughsk/stability-badges) #

Selectively replace Node-style environment variables with plain strings.
Available as a standalone CLI tool and a
Browserify v2 transform.

Works best in combination with uglifyify.

Installation

If you're using the module with Browserify:

npm install envify browserify

Or, for the CLI:

sudo npm install -g envify

Usage

envify will replace your environment variable checks with ordinary strings -
only the variables you use will be included, so you don't have to worry about,
say, AWS_SECRET_KEY leaking through either. Take this example script:

if (process.env.NODE_ENV === "development") {
  console.log('development only')
}

After running it through envify with NODE_ENV set to production, you'll
get this:

if ("production" === "development") {
  console.log('development only')
}

By running this through a good minifier (e.g.
UglifyJS2), the above code would be
stripped out completely.

However, if you bundled the same script with NODE_ENV set to development:

if ("development" === "development") {
  console.log('development only')
}

The if statement will evaluate to true, so the code won't be removed.

CLI Usage

With browserify:

browserify index.js -t envify > bundle.js

Or standalone:

envify index.js > bundle.js

You can also specify additional custom environment variables using
browserify's subarg syntax, which is
available in versions 3.25.0 and above:

browserify index.js -t [ envify --NODE_ENV development ] > bundle.js
browserify index.js -t [ envify --NODE_ENV production  ] > bundle.js

Module Usage

require('envify')

Returns a transform stream that updates based on the Node process'
process.env object.

require('envify/custom')([environment])

If you want to stay away from your environment variables, you can supply
your own object to use in its place:

var browserify = require('browserify')
  , envify = require('envify/custom')
  , fs = require('fs')

var b = browserify('main.js')
  , output = fs.createWriteStream('bundle.js')

b.transform(envify({
  NODE_ENV: 'development'
}))
b.bundle().pipe(output)

Purging process.env

By default, environment variables that are not defined will be left untouched.
This is because in some cases, you might want to run an envify transform over
your source more than once, and removing these values would make that
impossible.

However, if any references to process.env are remaining after transforming
your source with envify, browserify will automatically insert its shim for
Node's process object, which will increase the size of your bundle. This weighs
in at around 2KB, so if you're trying to be conservative with your bundle size
you can "purge" these remaining variables such that any missing ones are simply
replaced with undefined.

To do so through the command-line, simply use the subarg syntax and include
purge after envify, e.g.:

browserify index.js -t [ envify purge --NODE_ENV development ]

Or if you're using the module API, you can pass _: "purge" into your
arguments like so:

b.transform(envify({
    _: 'purge'
  , NODE_ENV: 'development'
}))

Contributors

• hughsk
• benjamn
• zag2art
• bjoerge
• andreypopp
• jupl

react-styled-flexboxgrid

Author: Loic Mahieu

Description: Grid system based on styled-components and flexbox for React

Homepage: https://github.com/LoicMahieu/react-styled-flexboxgrid

Created	7 months ago
Last Updated	2 months ago
License	MIT
Maintainers	1
Releases	10
Direct Dependencies	lodash.isinteger
Keywords	react, grid, flexbox, styled and styled-components

README

# react-styled-flexboxgrid

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width...

Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

Demo

Usage

Installation

npm i -S react-styled-flexboxgrid

react-styled-flexboxgrid depends on 2 peer dependencies:

• react@^0.14.0 || ^15.0.0-0
• prop-types@^15.0.0-0
• styled-components@2

You should install them in your project.

Basic

import React from 'react'

import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const App = props =>
  <Grid>
    <Row>
      <Col xs={6} md={3}>Hello, world!</Col>
    </Row>
  </Grid>

Grid

The <Grid> component is optional and can help to wrap children in a fixed/fluid container. Use the configuration container for fixed width value.

Props

• fluid (Boolean): Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false

Row

Props

• reverse (Boolean): Use flex-direction: row-reverse. Default: false
• start
• center
• end
• top
• middle
• bottom
• around
• between
• first
• last (String(xs|sm|md|lg): Align elements to the start or end of row as well as the top, bottom, or center of a column.

Col

Props

• reverse (Boolean): Use flex-direction: column-reverse. Default: false
• xs
• sm
• md
• lg (Boolean|Integer):
  • When true, enable auto sizing column.
  • When false, hide colomn for the breakpoint.
  • When interger value, it specify the column size on the grid. (1 to 12)
• xsOffset
• smOffset
• mdOffset
• lgOffset (Integer): Offset the column.

Configuration

The grid use same defaults than flexboxgrid.css.

You can customize values using <ThemeProvider> component from styled-components.
react-styled-flexboxgrid will looks at the flexboxgrid property in the theme.

import React from 'react'

import {ThemeProvider} from 'styled-components'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const theme = {
  flexboxgrid: {
    // Defaults
    gutterWidth: 1, // rem
    outerMargin: 2, // rem
    container: {
      sm: 46, // rem
      md: 61, // rem
      lg: 76  // rem
    },
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75  // em
    }
  }
}

const App = props =>
  <ThemeProvider theme={theme}>
    <Grid>
      <Row>
        <Col xs={6} md={3}>Hello, world!</Col>
      </Row>
    </Grid>
  </ThemeProvider>

Related projects

• styled-components
• hedron

License

MIT

babel-eslint

Author: Sebastian McKenzie

Description: Custom parser for ESLint

Homepage: https://github.com/babel/babel-eslint

Created	over 2 years ago
Last Updated	27 days ago
License	MIT
Maintainers	5
Releases	109
Direct Dependencies	babel-code-frame, babel-traverse, babel-types and babylon

README

# babel-eslint [](https://www.npmjs.com/package/babel-eslint) [](https://travis-ci.org/babel/babel-eslint) [](https://www.npmjs.com/package/babel-eslint)

babel-eslint allows you to lint ALL valid Babel code with the fantastic
ESLint.

Why Use babel-eslint

You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don't have to use it just because you are using Babel).

---

If there is an issue, first check if it can be reproduced with the regular parser or with the latest versions of eslint and babel-eslint!

For questions and support please visit the #linting babel slack channel (sign up here)!

Note that the ecmaFeatures config property may still be required for ESLint to work properly with features not in ECMAScript 5 by default. Examples are globalReturn and modules).

Known Issues

Flow:

Check out eslint-plugin-flowtype: An eslint plugin that makes flow type annotations global variables and marks declarations as used. Solves the problem of false positives with no-undef and no-unused-vars.

• no-undef for global flow types: ReactElement, ReactClass #130
  • Workaround: define types as globals in .eslintrc or define types and import them import type ReactElement from './types'
• no-unused-vars/no-undef with Flow declarations (declare module A {}) #132

Modules/strict mode

• no-unused-vars: [2, {vars: local}] #136

Please check out eslint-plugin-react for React/JSX issues

• no-unused-vars with jsx

Please check out eslint-plugin-babel for other issues

How does it work?

ESLint allows custom parsers. This is great but some of the syntax nodes that Babel supports
aren't supported by ESLint. When using this plugin, ESLint is monkeypatched and your code is
transformed into code that ESLint can understand. All location info such as line numbers,
columns is also retained so you can track down errors with ease.

Basically babel-eslint exports an index.js that a linter can use.
It just needs to export a parse method that takes in a string of code and outputs an AST.

Usage

ESLint 1.x | Use <= 5.x

ESLint 2.x | Use >= 6.x

Supported ESLint versions

ESLint	babel-eslint
3.x	>= 6.x

Install

$ npm install [email protected] babel-eslint@6 --save-dev

Setup

.eslintrc

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

Check out the ESLint docs for all possible rules.

Configuration

sourceType can be set to 'module'(default) or 'script' if your code isn't using ECMAScript modules.
allowImportExportEverywhere can be set to true to allow import and export declarations to appear anywhere a statement is allowed if your build environment supports that. By default, import and export declarations can only appear at a program's top level.
codeFrame can be set to false to disable the code frame in the reporter. This is useful since some eslint formatters don't play well with it.

.eslintrc

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": false,
    "codeFrame": false
  }
}

Run

$ eslint your-files-here

babel-plugin-styled-components

Author: Unknown

Description: Improve the debugging experience and add server-side rendering support to styled-components

Homepage: https://github.com/styled-components/babel-plugin-styled-components#readme

Created	9 months ago
Last Updated	about 2 months ago
License	MIT
Maintainers	2
Releases	13
Direct Dependencies	stylis
Keywords	styled-components, css-in-js, babel-plugin, server-side rendering, ssr and displayName

README

# `babel-plugin-styled-components`

This plugin adds support for server-side rendering, for minification of styles and gives you a nicer debugging experience when using styled-components.

⚠️ This plugin is only necessary if you're server-side rendering, you can use styled-components perfectly fine without it! ⚠️

⚠️ This plugin only works with styled-components v2 ⚠️

Usage

npm install --save-dev babel-plugin-styled-components

Then in your babel configuration (probably .babelrc):

{
  "plugins": ["styled-components"]
}

Features

• Server-side rendering
• Better debugging
• Minification

Server-side rendering

This option is turned off by default

By adding a unique identifier to every styled component this plugin avoids checksum mismatches due to different class generation on the client and on the server. If you do not use this plugin and try to server-side render styled-components React will complain.

If you want server-side rendering support you can enable it with the ssr option:

{
  "plugins": [
    ["styled-components", {
      "ssr": true
    }]
  ]
}

Better debugging

This babel plugin adds the components' name to the class name attached to the DOM node. In your browsers DevTools you'll see <button class="sc-Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

This also adds support for showing your components' real name in the React DevTools. They will normally show <styled.button> for all of your components, but with this plugin they show <MyButton />.

This makes it easier to find your components and to figure out where they live in your app.

If you don't need this feature, you can disable it with the displayName option:

{
  "plugins": [
    ["styled-components", {
      "displayName": false
    }]
  ]
}

Preprocessing (Experimental ⚠️ )

This plugin preprocesses your styles with stylis and uses the no-parser.js entrypoint on styled-components.

This effectively removes stylis from your runtime bundle and should slightly improve runtime performance and shrink your bundle size.

It automatically disables the minify option, since stylis already does some minifcation on your CSS.

This is experimental and we don't yet know of all limitations and bugs! Consider this non-production ready for now.

You can enable preprocessing with the preprocess option:

{
  "plugins": [
    ["styled-components", {
      "preprocess": true
    }]
  ]
}

Minification

This option is turned on by default! If you experience mangled CSS results, turn it off and open an issue please.

This plugin minifies your styles in the tagged template literals, giving you big bundle size savings. (note that you will not see the effect of minification in generated <style> tags, it solely affects the style strings inside your JS bundle)

This operation may potentially break your styles in some rare cases, so we recommend to keep this option enabled in development if it's enabled in the production build.

You can disable minification with the minify option:

{
  "plugins": [
    ["styled-components", {
      "minify": false
    }]
  ]
}

We also transpile styled-components tagged template literals down to a smaller representation than what Babel normally does, because styled-components template literals don't need to be 100% spec compliant. (see minification.md for more information about that) You can use the transpileTemplateLiterals option to turn this feature off.

License

Licensed under the MIT License, Copyright © 2016 Vladimir Danchenkov and Maximilian Stoiber.

See LICENSE.md for more information.

babel-preset-env

Author: Henry Zhu

Description: A Babel preset for each environment.

Homepage: https://babeljs.io/

Created	12 months ago
Last Updated	7 days ago
License	MIT
Maintainers	6
Releases	49
Direct Dependencies	babel-plugin-check-es2015-constants, babel-plugin-syntax-trailing-function-commas, babel-plugin-transform-async-to-generator, babel-plugin-transform-es2015-arrow-functions, babel-plugin-transform-es2015-block-scoped-functions, babel-plugin-transform-es2015-block-scoping, babel-plugin-transform-es2015-classes, babel-plugin-transform-es2015-computed-properties, babel-plugin-transform-es2015-destructuring, babel-plugin-transform-es2015-duplicate-keys, babel-plugin-transform-es2015-for-of, babel-plugin-transform-es2015-function-name, babel-plugin-transform-es2015-literals, babel-plugin-transform-es2015-modules-amd, babel-plugin-transform-es2015-modules-commonjs, babel-plugin-transform-es2015-modules-systemjs, babel-plugin-transform-es2015-modules-umd, babel-plugin-transform-es2015-object-super, babel-plugin-transform-es2015-parameters, babel-plugin-transform-es2015-shorthand-properties, babel-plugin-transform-es2015-spread, babel-plugin-transform-es2015-sticky-regex, babel-plugin-transform-es2015-template-literals, babel-plugin-transform-es2015-typeof-symbol, babel-plugin-transform-es2015-unicode-regex, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-regenerator, browserslist, invariant and semver

This README is too long to show.

babel-template

Author: Sebastian McKenzie

Description: Generate an AST from a string template.

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	6 days ago
License	MIT
Maintainers	5
Releases	41
Direct Dependencies	babel-runtime, babel-traverse, babel-types, babylon and lodash

README

# babel-template

Generate an AST from a string template.

In computer science, this is known as an implementation of quasiquotes.

Install

npm install --save-dev babel-template

Usage

import template from "babel-template";
import generate from "babel-generator";
import * as t from "babel-types";

const buildRequire = template(`
  var IMPORT_NAME = require(SOURCE);
`);

const ast = buildRequire({
  IMPORT_NAME: t.identifier("myModule"),
  SOURCE: t.stringLiteral("my-module")
});

console.log(generate(ast).code);

const myModule = require("my-module");

API

template(code, [opts])

code

Type: string

options

babel-template accepts all of the options from babylon, and specifies
some defaults of its own:

• allowReturnOutsideFunction is set to true by default.
• allowSuperOutsideMethod is set to true by default.

preserveComments

Type: boolean
Default: false

Set this to true to preserve any comments from the code parameter.

Return value

babel-template returns a function which is invoked with an optional object
of replacements. See the usage section for an example.

babel-types

Author: Sebastian McKenzie

Description: Babel Types is a Lodash-esque utility library for AST nodes

Homepage: https://babeljs.io/

Created	almost 2 years ago
Last Updated	6 days ago
License	MIT
Maintainers	5
Releases	70
Direct Dependencies	babel-runtime, esutils, lodash and to-fast-properties

This README is too long to show.

chokidar

Author: Paul Miller

Description: A neat wrapper around node.js fs.watch / fs.watchFile / fsevents.

Homepage: https://github.com/paulmillr/chokidar

Created	over 5 years ago
Last Updated	15 days ago
License	MIT
Maintainers	2
Releases	71
Direct Dependencies	anymatch, async-each, glob-parent, inherits, is-binary-path, is-glob, path-is-absolute, readdirp and fsevents
Keywords	fs, watch, watchFile, watcher, watching, file and fsevents

This README is too long to show.

eslint-config-standard-react

Author: Feross Aboukhadijeh

Description: JavaScript Standard Style React/JSX support - ESLint Shareable Config

Homepage: https://github.com/feross/eslint-config-standard-react

Created	about 2 years ago
Last Updated	about 1 month ago
License	MIT
Maintainers	7
Releases	24
Direct Dependencies	eslint-config-standard-jsx
Keywords	JavaScript Standard Style, check, checker, code, code checker, code linter, code standards, code style, enforce, eslint, eslintconfig, hint, jscs, jshint, jsx, lint, policy, quality, react, simple, standard, standard style, style, style checker, style linter and verify

README

# eslint-config-standard-react [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]

An ESLint Shareable Config for React/JSX support in JavaScript Standard Style

Install

This module is for advanced users. You probably want to use standard instead :)

npm install eslint-config-standard-react

Usage

Shareable configs are designed to work with the extends feature of .eslintrc files.
You can learn more about
Shareable Configs on the
official ESLint website.

This Shareable Config adds React and JSX to the baseline JavaScript Standard Style rules
provided in eslint-config-standard.

Here's how to install everything you need:

npm install --save-dev eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

Then, add this to your .eslintrc file:

{
  "extends": ["standard", "standard-react"]
}

Note: We omitted the eslint-config- prefix since it is automatically assumed by ESLint.

You can override settings from the shareable config by adding them directly into your
.eslintrc file.

Looking for something easier than this?

The easiest way to use JavaScript Standard Style to check your code is to use the
standard package. This comes with a global
Node command line program (standard) that you can run or add to your npm test script
to quickly check your style.

Badge

Use this in one of your projects? Include one of these badges in your readme to
let people know that your code is using the standard style.

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/feross/standard)

Learn more

For the full listing of rules, editor plugins, FAQs, and more, visit the main
JavaScript Standard Style repo.

License

MIT. Copyright (c) Feross Aboukhadijeh.

eslint-plugin-import

Author: Ben Mosher

Description: Import with sanity.

Homepage: https://github.com/benmosher/eslint-plugin-import

Created	over 2 years ago
Last Updated	4 days ago
License	MIT
Maintainers	3
Releases	79
Direct Dependencies	builtin-modules, contains-path, debug, doctrine, eslint-import-resolver-node, eslint-module-utils, has, lodash.cond, minimatch and read-pkg-up
Keywords	eslint, eslintplugin, es6, jsnext, modules, import and export

This README is too long to show.

eslint-plugin-node

Author: Toru Nagashima

Description: Additional ESLint's rules for Node.js

Homepage: https://github.com/mysticatea/eslint-plugin-node#readme

Created	over 1 year ago
Last Updated	3 days ago
License	MIT
Maintainers	1
Releases	44
Direct Dependencies	ignore, minimatch, resolve and semver
Keywords	eslint, eslintplugin, eslint-plugin, node, nodejs, ecmascript, shebang, file, path, import and require

README

# eslint-plugin-node

Additional ESLint's rules for Node.js

💿 Install & Usage

$ npm install --save-dev eslint eslint-plugin-node

• Requires Node.js ^4.0.0 || >=6.0.0
• Requires ESLint >=3.1.0

Note: It recommends a use of the "engines" field of package.json. The "engines" field is used by no-unsupported-features rule.

.eslintrc.json (An example)

{
    "plugins": ["node"],
    "extends": ["eslint:recommended", "plugin:node/recommended"],
    "rules": {
        "node/exports-style": ["error", "module.exports"],
    }
}

package.json (An example)

{
    "name": "your-module",
    "version": "1.0.0",
    "engines": {
        "node": ">=4.0.0"
    }
}

📖 Rules

• ⭐️ - the mark of recommended rules.
• ✒️ - the mark of fixable rules.

Possible Errors

	Rule ID	Description
	no-extraneous-import	disallow import declarations of extraneous packages
⭐️	no-extraneous-require	disallow require() expressions of extraneous packages
	no-missing-import	disallow import declarations of missing files
⭐️	no-missing-require	disallow require() expressions of missing files
⭐️	no-unpublished-bin	disallow 'bin' files which are ignored by npm
	no-unpublished-import	disallow import declarations of private things
⭐️	no-unpublished-require	disallow require() expressions of private things
⭐️	no-unsupported-features	disallow unsupported ECMAScript features on the specified version
⭐️	process-exit-as-throw	make process.exit() expressions the same code path as throw
⭐️✒️	shebang	enforce the correct usage of shebang

Best Practices

	Rule ID	Description
⭐️	no-deprecated-api	disallow deprecated APIs

Stylistic Issues

	Rule ID	Description
	exports-style	enforce either module.exports or exports

🔧 Configs

This plugin provides plugin:node/recommended preset config.
This preset config:

• enables the environment of ES2015 (ES6) and Node.js.
• enables rules which are given ⭐ in the above table.
• enables no-process-exit rule because the official document does not recommend a use of process.exit().
• adds {ecmaVersion: 8} into parserOptions.

👫 FAQ

• Q: The no-missing-import / no-missing-require rules don't work with nested folders in SublimeLinter-eslint
• A: See context.getFilename() in rule returns relative path in the SublimeLinter-eslint FAQ.

🚥 Semantic Versioning Policy

eslint-plugin-node follows semantic versioning and ESLint's Semantic Versioning Policy.

• Patch release (intended to not break your lint build)
  • A bug fix in a rule that results in it reporting fewer errors.
  • Improvements to documentation.
  • Non-user-facing changes such as refactoring code, adding, deleting, or modifying tests, and increasing test coverage.
  • Re-releasing after a failed release (i.e., publishing a release that doesn't work for anyone).
• Minor release (might break your lint build)
  • A bug fix in a rule that results in it reporting more errors.
  • A new rule is created.
  • A new option to an existing rule is created.
  • An existing rule is deprecated.
• Major release (likely to break your lint build)
  • A support for old Node version is dropped.
  • A support for old ESLint version is dropped.
  • An existing rule is changed in it reporting more errors.
  • An existing rule is removed.
  • An existing option of a rule is removed.
  • An existing config is updated.

📰 Changelog

• GitHub Releases

💎 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

• npm test runs tests and measures coverage.
• npm run coverage shows the coverage result of npm test command.
• npm run clean removes the coverage result of npm test command.

Generated by 🚫 dangerJS