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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial Roadmap Suggestions #7192

Closed
wants to merge 5 commits into
base: master
from

Conversation

@hzoo
Copy link
Member

hzoo commented Jan 10, 2018

Rendered markdown link: https://github.com/babel/babel/blob/add-roadmap/ROADMAP.md

I'm interested in questions/feedback and but more importantly people to help!

This isn't just to explain to you the work we are going to do but to ask you to get involved in some ideas that aren't fully thought out yet or started

In this PR we can add more points and details if anyone has questions, or we can create a new issue (if there isn't one already) for further discussion.

Probably can add some more ideas from https://babeljs.io/blog/2016/12/07/the-state-of-babel

Looking forward to some new contributors 馃檶!

EDIT: dang if I edit people's comments become "outdated" in the diff 馃槩


What I'd like to see soon (all related to v6 to v7 support):

  • v7 codemod
  • versioned/translatable docs
  • babel-plugin package that helps with testing/ecosystem health
  • REPL that can run any npm plugin, import/export .babelrc, hook into astexplorer/codesandbox

> This is regarding https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins-usage
- Allow any substitute polyfill instead of `core-js`. You should be able to override anything (custom `Promise`, etc)

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

I'd like to work on this soon-ish

ROADMAP.md Outdated
- Make `"usage"` option the default after it is stable.

### Build/publish workflow
- Guide on compiling/publishing ES2015+, .mjs, etc: https://twitter.com/philwalton/status/908082461799616512

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

And would love to discuss this one, it's the area I'm the most interested in.

ROADMAP.md Outdated

### Build/publish workflow
- Guide on compiling/publishing ES2015+, .mjs, etc: https://twitter.com/philwalton/status/908082461799616512
- Support multi-build/folder outputs?

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

That's interesting and probably useful for some, but I kinda feel that i.e. rollup has this area covered for most of use cases - especially that it understand the dep graph, so it can just nicely output flat bundles and all that jazz.

This comment has been minimized.

@xtuc

xtuc Jan 10, 2018

Member

I agree, it's not so common in JS but CMake is a super tool for emitting multiple binaries from a monorepo-ish project.

One issue is that npm/node doesn't support super good a flat bundle. React-dom for example has to put a lot of files in the root of the project https://unpkg.com/react-dom@16.2.0/.

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

In this regard flat bundles and multi-file directories doesnt really differ that much - if one needs multiple entry points for the package.

But actually many use cases are covered automatically - you just have to output multiple flat bundles and make use of main, module, browser, react-native fields in package.json.

Sven SAULEAU
- Refactor [Lebab](https://github.com/lebab/lebab/issues/138) as Babel transforms (can keep the cli since it's a separate tool)
- Usecase: ES3 -> ES6+ (on source code)
- Usecase: Remove usage of dropped proposals

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

wouldnt this just require something like --write to have your files updated in place?

This comment has been minimized.

@xtuc

xtuc Jan 10, 2018

Member

Maybe just a standalone tool IMO

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

Yeah, sure - encapsulating this in other tool will be much safer for the users. I meant this just as an example and to point out that this one is probably quite a low hanging fruit, beside creating a separate CLI tool actual algorithms etc are pretty much done.

This comment has been minimized.

@hzoo

hzoo Jan 10, 2018

Author Member

Kind of, you still have to run Babel via recast so that it retains the previous formatting which means just run the plugin via babel-codemod (or just run prettier right after which works too). This also requires that those tools are updated to the latest syntax's which they aren't since they are not sync'd with this repo.

Also it maybe easier to write a separate transform because the output from Babel may not be what you are looking for in the source code (or you need to output the loose mode version).

This comment has been minimized.

@hzoo

hzoo Jan 10, 2018

Author Member

I mean to say that lebab already is the standalone + cli tool but it doesn't use Babel yet as the core transform. It's basically the same thing as babel but with the printer being recast instead of babel-generator. This is also related to the idea of combining recast/prettier/babel-generator somehow

This comment has been minimized.

@hzoo

hzoo Jan 11, 2018

Author Member

Yeah it can stay it's own repo but if it uses @babel/core it can stay a cli tool and can be versioned separately. cc @nene @mohebifar on this again for more thoughts?

- Usecase: ES3 -> ES6+ (on source code)
- Usecase: Remove usage of dropped proposals
- Usecase: Auto upgrade to the latest version of a proposal spec (if possible)
- Can we somehow combine forces in: babel-codemod/jscodeshift/lebab, prettier/recast/babel-generator? I really don't want to update all of these: new syntax equals re-writing the printer in all of these places separately/out of sync.

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

that would be sweeeeet, would require major cooperation between projects though

- Possibily implement related plugins in the same "plugin" but just expose a flag out to the end-user.

### Babel Helpers (shared code)
- loader should handle these automatically like rollup

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

maybe actually the easiest way for this is just to publish helpers as a package (they are somewhat already published within @babel/runtime) and encourage transpiling libraries (making it default maybe?) with imports being added to that package instead of inlining them into the source code like now

- Query config for data for other tools
- `babel --settings`
- Validate config better
- Create/expand on new tools like https://github.com/boopathi/babel-time-travel

This comment has been minimized.

@Andarist

Andarist Jan 10, 2018

Member

looked in this tool yesterday and its amazing 馃槏

This comment has been minimized.

@yavorsky

yavorsky Jan 10, 2018

Member

We need to add this to awesome-babel :)

This comment has been minimized.

@rajasekarm

rajasekarm Jan 14, 2018

Contributor

@yavorsky Added in awesome-babel babel/awesome-babel#22

### ASTExplorer

- allow custom version of babel-standalone (same as REPL to allow per PR tests)
- integrate with repl? (both are in react)

This comment has been minimized.

@yavorsky

yavorsky Jan 10, 2018

Member

Would be good to merge:
babel/website#1421

@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Jan 10, 2018

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/6573/

ROADMAP.md Outdated

### `babel-bot`

> [#43](https://github.com/babel/babel-bot/issues/43) Rewrite it with [probot](https://github.com/probot/probot)

This comment has been minimized.

@rajasekarm

rajasekarm Jan 10, 2018

Contributor

I like to work on this,

@rajasekarm

This comment has been minimized.

Copy link
Contributor

rajasekarm commented Jan 10, 2018

Detailed Team page.

@hzoo hzoo changed the title Add initial roadmap suggestions Initial Roadmap Suggestions Jan 14, 2018


### Remake `compat-table` used in preset-env

> https://github.com/kangax/compat-table could use a remake, ideally work with browser vendors on this

This comment has been minimized.

@addyosmani

addyosmani Jan 14, 2018

Is there specific help that would be useful for browser vendors to assist with here? I'd love to see if there's anything we can support to make preset-env + the compat tables easier to rely on over time.

This comment has been minimized.

@hzoo

hzoo Jan 14, 2018

Author Member

I know there is https://github.com/mdn/browser-compat-data which has a javascript section but haven't looked into it that much? I guess it would be nice to be able to query some API from the browser's own status pages to generate data instead of waiting for someone to make a PR? Or if we had a service that ran the test262 tests against browsers we could do it too but that would be a pretty big effort? And maybe we don't need to remake it just change the process of submitting/extraction?

This comment has been minimized.

@addyosmani

addyosmani Jan 14, 2018

Thanks for those details. Vendors maintain their own status pages for features (e.g ChromeStatus) which might get updated more often than the different compat tables. I like the idea of periodically pulling from there in a more automated way, trying to get the MDN tables kept up to date or explore if test262 might be a better path forward. Will have a chat with my team.

cc @nolanlawson @apple-web-evangelist @AdaRoseCannon in case you have ideas too.


### Build/publish workflow

- Guide on compiling/publishing ES2015+, .mjs, etc: https://twitter.com/philwalton/status/908082461799616512

This comment has been minimized.

@jdalton

jdalton Jan 14, 2018

Member

Would this guide include a "you might not need" section? With Node having 99% ES2015+, and nearly all evergreen browsers shipping ESM, it might be nice to avoid unneeded build steps when possible. Maybe something in @babel/env could warn folks if it doesn't find anything to transform.


### Performance table for ES6+ (used in babel-preset-env under new option e.g `perf`)

> Add a new option in `preset-env`: will continue to compile if the native support is *slower*. Can setup a threshold, may need to compare against the size difference.

This comment has been minimized.

@taion

taion Jan 14, 2018

Contributor

How will this interact with loose or spec?

loose is pretty common in the wild: https://github.com/facebook/react/blob/145986ec17cbd136849d8c9ef1157830233e00f0/.babelrc#L12

This comment has been minimized.

@taion

taion Jan 14, 2018

Contributor

(Granted, that's not using env, but people do use env mode)

- Should Babel use type info (from other things like ts/flow/runtime info)
- AST
- Can we just move back to acorn + estree?
- Should we switch to shift?

This comment has been minimized.

@jamiebuilds

jamiebuilds Jan 14, 2018

Contributor

I spent some time documenting what Shift + JSX/Flow/TypeScript would look like https://github.com/thejameskyle/shift-extensions-spec/blob/master/extensions-spec.idl


### Build/publish workflow

- Guide on compiling/publishing ES2015+, .mjs, etc: https://twitter.com/philwalton/status/908082461799616512

This comment has been minimized.

@IgorMinar

IgorMinar Jan 15, 2018

I'd love to see a strong push to make the ES Module output the default via presents as well as documentation. Most developers don't know to opt-in to it, which causes lots of deoptimizations in webpack builds and significantly larger payload sizes.


We haven't updated this in a long time due to Andrew being busy and not setting up the automatic infra on AWS. Switching will make updating actually real so we can add some new features which would save some headache.

References: https://github.com/eslint/eslint-github-bot, https://github.com/open-bot/open-bot

This comment has been minimized.

@orta

orta Jan 15, 2018

Contributor

Peril is also an option we've deprecated a bunch of CocoaPods/Fastlane micro-servers to just a few lines of JS

@stefanpenner
Copy link
Member

stefanpenner left a comment

Source Maps

Another big ticket item would be addressing source maps.

Currently, babel and it's plugins author produce invalid source-maps. Although some manual spot-checks may work, various aspects of the current approach appear fundamentally flawed. This results in breaking downstream tools, and a poor debugging experience (both in dev, and in prod).

More details here: #6008

Original our team hoped to get resources to work on this problem. Unfortunately do to conflicting obligations/resourcing we have been unable to secure the required resourcing.

Plugin Compat / Transition Plan

One the largest pains I had (and continue to have) with the babel 5 to 6 transition, was plugins. If there are planned breaking changes, we should attempt to avoid them, but if they are unavoidable, a proper transition guide and tooling (maybe a code-mod) would really help.

Checking plugin compatibility if breaks occur would be handy, either a version encoded in the plugin or some sort of capability check (or both). Lots of our users had pretty poor experiences, as forgetting to upgrade one plugin or another resulted in very poor errors. X called on undefined or similar.


### Plugin Ordering

- Add `before`/`after` keys for plugins so they can specify order.

This comment has been minimized.

@stefanpenner

stefanpenner Jan 18, 2018

Member

Encoding before/after within a plugin is insufficient, as a user can compose two plugins entirely unaware of each other. In addition to a plugin being able to specific it's own dependencies, it is inevitable that the user will also need to modify/augment those dependencies.

For example:

A user may have two plugins unaware of each other, but with an implicit order dependency.

To address this, the user must also have control over the order dependency. One solution is to allow the user to impose an additional edge, to inform the DAG's topsort output.

I have used https://github.com/krisselden/dag-map to solve this problem in the past, and it worked like a charm.

cc @rwjblue / @krisselden

This comment has been minimized.

@stefanpenner

stefanpenner Jan 18, 2018

Member

More Thoughts on this:

We may be able to identify some common milestones during the transpilation process, these Milestones can serve as mechanism of grouping plugins together without tightly coupling them.

For example, one may want X category of work to always occur before Y category of work.

Specifically, one typically wants to strip assertions/feature flags, before module transpilation, and never after. This should continue to work regardless of the module transpilation strategy be it CJS/AMD/magic bundler or even disabled entirely.

In this case, the feature-flag/assert stripping plugin, shouldn't need to be aware of ALL module transpilation plugins, rather it should be able to simply say. I should be able to add an edge, informing the DAG that it must be run before the module transpilation miletones.

This comment has been minimized.

@hzoo

hzoo Jan 18, 2018

Author Member

Sorry I didn't link to the older prs maybe but I was suggesting allowing a plugin to opt into a "capability" so it wouldn't be hardcoded to a plugin name - like for modules or anything else, I believe that's the same thought you had with a category

This comment has been minimized.

@jedwards1211

jedwards1211 Jan 15, 2019

Contributor

@stefanpenner maybe babel could at least log warnings for plugins that know they're in the wrong order relative to each other though? For instance it sounds doubtful that there will ever be a valid use case for putting proposal-decorators after proposal-class-properties, so a warning there would help a lot of people, especially since it's not at all obvious what's wrong from the errors that can result.

@tbranyen

This comment has been minimized.

Copy link

tbranyen commented Jan 22, 2018

Not sure if this feedback is useful, but I'm working on a tool that consumes .babelrc, gets the AST, and then further modifies the AST using bablyon. There isn't a good way for this to happen. Looking at tools like parcel, which have the exact same aim, I think it'd be great to have babel and babylon take an AST (optionally a map), and then allow further modifications (since both tools already output code/map).

@Andarist

This comment has been minimized.

Copy link
Member

Andarist commented Jan 23, 2018

@tbranyen babylon is a parser, it takes your code and outputs the AST, did you mean that you want to use babel (not babylon) to modify the AST further? Or did I not understand something correctly?

@tbranyen

This comment has been minimized.

Copy link

tbranyen commented Jan 24, 2018

@Andarist You are understanding correctly. I think this is an issue for babel-generator. I'll ping ya on Twitter to take it off this chat.

@hzoo

This comment has been minimized.

Copy link
Member Author

hzoo commented May 14, 2018

I'm going to move this to the website repo, and then link to issues if we create them. babel/website#1657

@hzoo hzoo closed this May 14, 2018

@xtuc xtuc deleted the add-roadmap branch Jun 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment