Update babel to 7 & ava to 1

[chrisdwheatley]

I was having issues using x0 within a project which already had babel 7 as a dependency.

For reference the error was;

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

I took a stab at upgrading as I've found x0 to be the best solutions for documenting React components.

This PR works against my project and also works for x0's own documentation. There are however some issues I've been unable to fix, they are;

• A single test is failing with the error;

Uncaught exception in test/components.js

...

SyntaxError: Unexpected token export

I suspect this is something I've missed in the babel update but couldn't figure out what was missing, hopefully someone can provide some insight.

• There are browsers warnings/errors I haven't managed to look into (if I get chance I'll take a further look into these)

Other than that everything seems to be working as it was but it'd be good to get some confirmation on that.

[ntaylor89]

👍 I also started taking a whack at this, and it looks like more or less what I was doing. I'll check this out and see if I can get any insight about the test failure, browser messages.

[ntaylor89]

I suspect the reason that you got the error about the import in the test is that there's still things missing from the plugins.

It's super confusing based on how the official babel upgrade doc is worded, but I think to get equivalent functionality we need all of the stuff used in stage 0-2. I think all the extras where added by the babel upgarde tool to the package.json already. They probably just need to be added here.

And we might need to add them to mdx loader as plugins as well? Some of those handle the syntax for import.

I could absolutely be wrong about all of this.

[ntaylor89]

FWIW I get three errors in the browser console, but I also get them on master. They have to do with

1. is attribute getting passed a function instead of a string
2. lineHeight getting passed to the DOM
3. borderRadius getting passed to the DOM

I'm fairly certain these are coming from out of date Rebass / styled-components dependencies, but seeing as they're on master, I don't think there a result of your changes.

I think this is on the right track, but I think you need to also

• Add more lines to the package.json for the other dependencies.
• Also add the additional plugins to lib/config.js

Add the plugins to lib/config.js is a bit weird. The current code passed the plugins as an array of strings, and calls .map(require.resolve) on it. But some of the new plugins need options, and are specified as arrays, so it will bomb if you just add them.

I got this working by mapping all to arrays, callling require.resolve on the first option, and spreading the into the array. Here's my code in lib/config.js

const babel = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ].map(require.resolve),
  plugins: [
    'babel-plugin-macros',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-proposal-function-bind',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { 'loose': false }],
    ['@babel/plugin-proposal-pipeline-operator', { 'proposal': 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { 'loose': false }],
    '@babel/plugin-proposal-do-expressions',
    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { 'loose': false }],
    '@babel/plugin-proposal-json-strings'
  ].map(p => [p].flat())
   .map(([p, ...opts]) => ([require.resolve(p), ...opts]))
}

[ntaylor89]

I think you'll also want to nuke the test in test/mdx-fm-loader. It isn't really a valid test anymore.

[nmccready]

bump

[talentlessguy]

Any progress on this? I'd want to use x0