chore: convert bublé to babel for es2015 compilation #362

wardpeet · 2019-03-24T10:39:59Z

Remove bublé and use babel instead. This gives us the opportunity to easily move to modern builds. The file sizes are all kept almost the same. The sizes are raw bytes which means gzip and brotli isn't used so the diff is going to be minimal.

I also added 2 scripts so we can generate these tables easier

Latest size report from travis:
https://travis-ci.org/developit/microbundle/builds/537119810#L330-L380

File sizes

file	bublé	babel
alias/alias-mapping.js	42	42
alias/alias-mapping.mjs	42	42
alias/alias-mapping.umd.js	121	121
async-iife-ts/async-iife-ts.js	116	116
async-iife-ts/async-iife-ts.mjs	117	117
async-iife-ts/async-iife-ts.umd.js	199	199
async-iife-ts/index.d.ts	0	0
async-ts/async-ts.js	104	120
async-ts/async-ts.mjs	108	132
async-ts/async-ts.umd.js	287	303
async-ts/index.d.ts	62	62
basic/basic-lib.js	468	502
basic/basic-lib.mjs	468	502
basic/basic-lib.umd.js	643	677
basic-css/basic-css.css	48	48
basic-css/basic-css.js	133	133
basic-css/basic-css.mjs	133	133
basic-css/basic-css.umd.js	308	308
basic-json/basic-json.js	168	113
basic-json/basic-json.mjs	168	113
basic-json/basic-json.umd.js	344	289
basic-multi-source/a.js	53	53
basic-multi-source/a.mjs	54	54
basic-multi-source/a.umd.js	136	136
basic-multi-source/b.js	53	53
basic-multi-source/b.mjs	54	54
basic-multi-source/b.umd.js	136	136
basic-ts/basic-lib-ts.js	130	147
basic-ts/basic-lib-ts.mjs	123	140
basic-ts/basic-lib-ts.umd.js	299	316
basic-ts/car.d.ts	163	163
basic-ts/index.d.ts	78	78
basic-tsx/basic-lib-tsx.js	304	344
basic-tsx/basic-lib-tsx.mjs	305	346
basic-tsx/basic-lib-tsx.umd.js	482	522
basic-tsx/index.d.ts	51	51
basic-with-cwd/basic.js	464	498
basic-with-cwd/basic.mjs	464	498
basic-with-cwd/basic.umd.js	636	670
class-decorators-ts/class-decorators-ts.js	591	591
class-decorators-ts/class-decorators-ts.mjs	588	588
class-decorators-ts/class-decorators-ts.umd.js	771	771
class-decorators-ts/index.d.ts	168	168
class-properties/class-properties.js	127	127
class-properties/class-properties.mjs	122	122
class-properties/class-properties.umd.js	312	312
custom-source/custom-source.js	472	506
custom-source/custom-source.mjs	472	506
custom-source/custom-source.umd.js	651	685
custom-source-with-cwd/custom-src.js	469	503
custom-source-with-cwd/custom-src.mjs	469	503
custom-source-with-cwd/custom-src.umd.js	645	679
default-named/default-named.js	87	87
default-named/default-named.mjs	97	97
default-named/default-named.umd.js	269	269
define/define.js	35	35
define/define.mjs	35	35
define/define.umd.js	114	114
esnext-ts/esnext-ts.js	2095	1997
esnext-ts/esnext-ts.mjs	2096	1998
esnext-ts/esnext-ts.umd.js	2270	2172
esnext-ts/index.d.ts	48	48
jsx/jsx.js	365	405
jsx/jsx.mjs	366	407
jsx/jsx.umd.js	535	575
name-custom-amd/name-custom-amd.js	474	508
name-custom-amd/name-custom-amd.mjs	474	508
name-custom-amd/name-custom-amd.umd.js	654	688
name-custom-cli/name-custom.js	470	504
name-custom-cli/name-custom.mjs	470	504
name-custom-cli/name-custom.umd.js	650	684
no-pkg/no-pkg.js	465	499
no-pkg/no-pkg.mjs	465	499
no-pkg/no-pkg.umd.js	637	671
no-pkg-name/no-pkg-name.js	470	504
no-pkg-name/no-pkg-name.mjs	470	504
no-pkg-name/no-pkg-name.umd.js	646	680
pretty/pretty.js	12522	12522
pretty/pretty.mjs	12534	12534
pretty/pretty.umd.js	12704	12704
raw/raw.js	2960	2960
raw/raw.mjs	2972	2972
raw/raw.umd.js	3139	3139
shebang/shebang.js	101	101
shebang/shebang.mjs	108	108
shebang/shebang.umd.js	284	284
ts-mixed-exports/car.d.ts	163	163
ts-mixed-exports/index.d.ts	95	95
ts-mixed-exports/ts-mixed-exports.js	149	169
ts-mixed-exports/ts-mixed-exports.mjs	144	168
ts-mixed-exports/ts-mixed-exports.umd.js	333	353

developit · 2019-03-24T22:01:44Z

wondering how this fares against the size diffs shown in #263

JoviDeCroock · 2019-03-25T07:14:24Z

We might have to introduce a script that compares file size diffs of the tests on master versus PR that might ease this process up a bit.

wardpeet · 2019-03-25T07:59:39Z

yeah, something like bundlesize might help here. Most files look similar but I still need to do a proper check, also tests are super slow on my machine so need to check that as well.

JoviDeCroock · 2019-03-30T10:26:56Z

It seems to take long due to circular dependencies in core-js.

Also the size diffs stay the same as the previous PR and the esnext-ts lib is not compiling.


const test = fs.readdirSync(`${process.cwd()}/test/fixtures`);
const sizes = {};

test.forEach(folder => {
	if (folder === 'basic-with-cwd' || folder === 'custom-source-with-cwd')
		return;
	try {
		const distContents = fs.readdirSync(
			`${process.cwd()}/test/fixtures/${folder}/dist`,
		);
		const stats = fs.statSync(
			`${process.cwd()}/test/fixtures/${folder}/dist/${distContents[0]}`,
		);
		sizes[folder] = `${stats.size}KB`;
	} catch (e) {}
});

fs.writeFileSync('sizes.json', JSON.stringify(sizes));

Here's a script you can use to see the sizes, remove the try catch to see the ones that can't compile

src/index.js

package.json

src/index.js

test/fixtures/jsx/index.js

wardpeet · 2019-05-14T20:55:53Z

So I think this PR is ready to go. (I need to update the sizes table)

Babel flow & typescript will probably be for the next PR as typescript babel plugin doesn't emit definitions so we'll have to run the compiler ourselves which I guess is better for another PR.

JoviDeCroock · 2019-05-14T20:57:37Z

I don't mind making the TypeScript PR, do you want it to point towards this PR or get this to master first?

wardpeet · 2019-05-14T20:58:59Z

Get this in master first I would say

ForsakenHarmony · 2019-05-19T15:40:10Z

src/index.js

-						// transpile down `async/await`. To prevent conflicts with user
-						// supplied configurations we set this option to false. Note
-						// that we never supported using custom babel configs anyway.
-						babelrc: false,


so if someone has a babelrc in their project dir it now gets included?

Yes, it's actually intentional. I'll add a few tests for it.

This way people can add babel-plugin-macros and other plugins. So it will work with every codebase. I like microbundle so I don't have to configure rollup and such but would love babel configuration. We could put it under an option and warn people.

If you add a .babelrc that would overwrite the default config right? In that case it would be nice to have a way to just extend the default config so you don't need to add preset-env again etc.

Next.js solves this in a neat way imo. And in our case it could look something like this

// .babelrc { "presets": "microbundle/babel", "plugins": [ // my custom plugins ] }

yeah that would be ideal

ForsakenHarmony

Looks good, extendable babel config could possibly be an additional pr

wardpeet · 2019-05-21T17:43:09Z

@ForsakenHarmony should I disable babelrc for now until extendable config is fixed? Do we need more discussion on allowing babelrc?

should I add a few tests to make sure babelrc works? (probably a good idea, just to make sure it works)

ForsakenHarmony · 2019-05-21T17:44:18Z

I think we definitely want to be able to extend/override it

If you want to add some more tests here that would be good too

marvinhagemeister

LGTM 🎉

wardpeet · 2019-05-25T10:12:40Z

I added a test for babelrc to accept a stage-2 feature. I also tried to override babel-preset-env but that wasn't possible, so that's actually good as people won't be able to remove presets we set.

i'll work on a follow up to fix this so we can still add a few performance plugins like async-to-promise

Latest size report from travis:
https://travis-ci.org/developit/microbundle/builds/537119810#L330-L380

ForsakenHarmony · 2019-05-25T16:46:51Z

bors r+

362: chore: convert bublé to babel for es2015 compilation r=ForsakenHarmony a=wardpeet Remove bublé and use babel instead. This gives us the opportunity to easily move to modern builds. The file sizes are all kept almost the same. The sizes are raw bytes which means gzip and brotli isn't used so the diff is going to be minimal. I also added 2 scripts so we can generate these tables easier Latest size report from travis: https://travis-ci.org/developit/microbundle/builds/537119810#L330-L380 <details> <summary>File sizes</summary> | file | bublé | babel | |------------------------------------------------|---------|----------| | alias/alias-mapping.js | 42 | 42 | | alias/alias-mapping.mjs | 42 | 42 | | alias/alias-mapping.umd.js | 121 | 121 | | async-iife-ts/async-iife-ts.js | 116 | 116 | | async-iife-ts/async-iife-ts.mjs | 117 | 117 | | async-iife-ts/async-iife-ts.umd.js | 199 | 199 | | async-iife-ts/index.d.ts | 0 | 0 | | async-ts/async-ts.js | **104** | 120 | | async-ts/async-ts.mjs | **108** | 132 | | async-ts/async-ts.umd.js | **287** | 303 | | async-ts/index.d.ts | 62 | 62 | | basic/basic-lib.js | **468** | 502 | | basic/basic-lib.mjs | **468** | 502 | | basic/basic-lib.umd.js | **643** | 677 | | basic-css/basic-css.css | 48 | 48 | | basic-css/basic-css.js | 133 | 133 | | basic-css/basic-css.mjs | 133 | 133 | | basic-css/basic-css.umd.js | 308 | 308 | | basic-json/basic-json.js | 168 | **113** | | basic-json/basic-json.mjs | 168 | **113** | | basic-json/basic-json.umd.js | 344 | **289** | | basic-multi-source/a.js | 53 | 53 | | basic-multi-source/a.mjs | 54 | 54 | | basic-multi-source/a.umd.js | 136 | 136 | | basic-multi-source/b.js | 53 | 53 | | basic-multi-source/b.mjs | 54 | 54 | | basic-multi-source/b.umd.js | 136 | 136 | | basic-ts/basic-lib-ts.js | **130** | 147 | | basic-ts/basic-lib-ts.mjs | **123** | 140 | | basic-ts/basic-lib-ts.umd.js | **299** | 316 | | basic-ts/car.d.ts | 163 | 163 | | basic-ts/index.d.ts | 78 | 78 | | basic-tsx/basic-lib-tsx.js | **304** | 344 | | basic-tsx/basic-lib-tsx.mjs | **305** | 346 | | basic-tsx/basic-lib-tsx.umd.js | **482** | 522 | | basic-tsx/index.d.ts | 51 | 51 | | basic-with-cwd/basic.js | **464** | 498 | | basic-with-cwd/basic.mjs | **464** | 498 | | basic-with-cwd/basic.umd.js | **636** | 670 | | class-decorators-ts/class-decorators-ts.js | 591 | 591 | | class-decorators-ts/class-decorators-ts.mjs | 588 | 588 | | class-decorators-ts/class-decorators-ts.umd.js | 771 | 771 | | class-decorators-ts/index.d.ts | 168 | 168 | | class-properties/class-properties.js | 127 | 127 | | class-properties/class-properties.mjs | 122 | 122 | | class-properties/class-properties.umd.js | 312 | 312 | | custom-source/custom-source.js | **472** | 506 | | custom-source/custom-source.mjs | **472** | 506 | | custom-source/custom-source.umd.js | **651** | 685 | | custom-source-with-cwd/custom-src.js | **469** | 503 | | custom-source-with-cwd/custom-src.mjs | **469** | 503 | | custom-source-with-cwd/custom-src.umd.js | **645** | 679 | | default-named/default-named.js | 87 | 87 | | default-named/default-named.mjs | 97 | 97 | | default-named/default-named.umd.js | 269 | 269 | | define/define.js | 35 | 35 | | define/define.mjs | 35 | 35 | | define/define.umd.js | 114 | 114 | | esnext-ts/esnext-ts.js | 2095 | **1997** | | esnext-ts/esnext-ts.mjs | 2096 | **1998** | | esnext-ts/esnext-ts.umd.js | 2270 | **2172** | | esnext-ts/index.d.ts | 48 | 48 | | jsx/jsx.js | **365** | 405 | | jsx/jsx.mjs | **366** | 407 | | jsx/jsx.umd.js | **535** | 575 | | name-custom-amd/name-custom-amd.js | **474** | 508 | | name-custom-amd/name-custom-amd.mjs | **474** | 508 | | name-custom-amd/name-custom-amd.umd.js | **654** | 688 | | name-custom-cli/name-custom.js | **470** | 504 | | name-custom-cli/name-custom.mjs | **470** | 504 | | name-custom-cli/name-custom.umd.js | **650** | 684 | | no-pkg/no-pkg.js | **465** | 499 | | no-pkg/no-pkg.mjs | **465** | 499 | | no-pkg/no-pkg.umd.js | **637** | 671 | | no-pkg-name/no-pkg-name.js | **470** | 504 | | no-pkg-name/no-pkg-name.mjs | **470** | 504 | | no-pkg-name/no-pkg-name.umd.js | **646** | 680 | | pretty/pretty.js | 12522 | 12522 | | pretty/pretty.mjs | 12534 | 12534 | | pretty/pretty.umd.js | 12704 | 12704 | | raw/raw.js | 2960 | 2960 | | raw/raw.mjs | 2972 | 2972 | | raw/raw.umd.js | 3139 | 3139 | | shebang/shebang.js | 101 | 101 | | shebang/shebang.mjs | 108 | 108 | | shebang/shebang.umd.js | 284 | 284 | | ts-mixed-exports/car.d.ts | 163 | 163 | | ts-mixed-exports/index.d.ts | 95 | 95 | | ts-mixed-exports/ts-mixed-exports.js | **149** | 169 | | ts-mixed-exports/ts-mixed-exports.mjs | **144** | 168 | | ts-mixed-exports/ts-mixed-exports.umd.js | **333** | 353 | </details> Co-authored-by: Ward Peeters <[email protected]>

bors · 2019-05-25T16:49:31Z

Build succeeded

continuous-integration/travis-ci/push

Changed because this project no longer utilises Bublé, it was replaced with Babel in developit/microbundle#362.

wardpeet force-pushed the feat/convert-buble branch from 40d345d to dcd4f4f Compare March 24, 2019 10:41

JoviDeCroock suggested changes Mar 30, 2019

View reviewed changes

src/index.js Outdated Show resolved Hide resolved

src/index.js Show resolved Hide resolved

src/index.js Outdated Show resolved Hide resolved

JoviDeCroock reviewed Mar 30, 2019

View reviewed changes

src/index.js Show resolved Hide resolved

JoviDeCroock reviewed Mar 30, 2019

View reviewed changes

src/index.js Outdated Show resolved Hide resolved

maraisr reviewed Apr 1, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

wardpeet force-pushed the feat/convert-buble branch from ae7c136 to 91a4f5b Compare April 25, 2019 12:30

wardpeet force-pushed the feat/convert-buble branch from 91a4f5b to 90ce17b Compare May 6, 2019 13:33

marvinhagemeister reviewed May 7, 2019

View reviewed changes

src/index.js Show resolved Hide resolved

wardpeet marked this pull request as ready for review May 14, 2019 10:02

wardpeet force-pushed the feat/convert-buble branch from 2f51304 to 5ece2b3 Compare May 14, 2019 20:50

wardpeet commented May 14, 2019

View reviewed changes

test/fixtures/jsx/index.js Outdated Show resolved Hide resolved

ForsakenHarmony reviewed May 19, 2019

View reviewed changes

sventschui mentioned this pull request May 19, 2019

Introduce renderToNodeStream preactjs/preact-render-to-string#93

Closed

4 tasks

ForsakenHarmony approved these changes May 21, 2019

View reviewed changes

marvinhagemeister approved these changes May 22, 2019

View reviewed changes

developit mentioned this pull request May 22, 2019

for-of output is suboptimal #394

Closed

wardpeet added 5 commits May 25, 2019 10:53

remove bublé and run transpilation on babel

1cf6864

remove debug

a77ca66

update plugins with babel

27d1a8a

add script to generate csv output

ad59f1a

default jsx to h

0633b7f

wardpeet added 5 commits May 25, 2019 10:55

fix snapshots

8f72b14

add esm to package;json

21a6c51

cleanup comments

25e5be7

fix jsx pragmaFrag

34717de

add unit test for babelrc

3483790

wardpeet force-pushed the feat/convert-buble branch from 95ebf52 to 3483790 Compare May 25, 2019 10:10

wardpeet mentioned this pull request May 25, 2019

feat(babel): merges babelrc with microbunde babel config #396

Merged

bors bot merged commit 3483790 into developit:master May 25, 2019

developit mentioned this pull request May 28, 2019

Coud not build js with flow types #379

Closed

i-like-robots mentioned this pull request May 9, 2020

Replace Bublé references in readme with Babel #609

Merged

PatrickMcKenzier pushed a commit to PatrickMcKenzier/microbundle that referenced this pull request Oct 10, 2022

Replace Bublé references in readme with Babel

61782e1

Changed because this project no longer utilises Bublé, it was replaced with Babel in developit/microbundle#362.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: convert bublé to babel for es2015 compilation #362

chore: convert bublé to babel for es2015 compilation #362

wardpeet commented Mar 24, 2019 •

edited

Loading

developit commented Mar 24, 2019

JoviDeCroock commented Mar 25, 2019

wardpeet commented Mar 25, 2019

JoviDeCroock commented Mar 30, 2019 •

edited

Loading

wardpeet commented May 14, 2019 •

edited

Loading

JoviDeCroock commented May 14, 2019

wardpeet commented May 14, 2019

ForsakenHarmony May 19, 2019

wardpeet May 20, 2019

alexandernanberg May 21, 2019

ForsakenHarmony May 21, 2019

ForsakenHarmony left a comment

wardpeet commented May 21, 2019

ForsakenHarmony commented May 21, 2019

marvinhagemeister left a comment

wardpeet commented May 25, 2019 •

edited

Loading

ForsakenHarmony commented May 25, 2019

bors bot commented May 25, 2019

chore: convert bublé to babel for es2015 compilation #362

chore: convert bublé to babel for es2015 compilation #362

Conversation

wardpeet commented Mar 24, 2019 • edited Loading

developit commented Mar 24, 2019

JoviDeCroock commented Mar 25, 2019

wardpeet commented Mar 25, 2019

JoviDeCroock commented Mar 30, 2019 • edited Loading

wardpeet commented May 14, 2019 • edited Loading

JoviDeCroock commented May 14, 2019

wardpeet commented May 14, 2019

ForsakenHarmony May 19, 2019

Choose a reason for hiding this comment

wardpeet May 20, 2019

Choose a reason for hiding this comment

alexandernanberg May 21, 2019

Choose a reason for hiding this comment

ForsakenHarmony May 21, 2019

Choose a reason for hiding this comment

ForsakenHarmony left a comment

Choose a reason for hiding this comment

wardpeet commented May 21, 2019

ForsakenHarmony commented May 21, 2019

marvinhagemeister left a comment

Choose a reason for hiding this comment

wardpeet commented May 25, 2019 • edited Loading

ForsakenHarmony commented May 25, 2019

bors bot commented May 25, 2019

Build succeeded

wardpeet commented Mar 24, 2019 •

edited

Loading

JoviDeCroock commented Mar 30, 2019 •

edited

Loading

wardpeet commented May 14, 2019 •

edited

Loading

wardpeet commented May 25, 2019 •

edited

Loading