Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

fix: bundle dependencies inline and fix es build #116

Merged
merged 15 commits into from
May 13, 2020

Conversation

lmiller1990
Copy link
Member

As pointed about by @JessicaSachs, our es build was depending on cjs dependencies.

Although I like the idea of only shipping our code and asking the users to install dependencies like lodash, it does add a bit of complexity. Eg, depending if you are using VTU in a browser/node/es build, you need to include dependencies differently.

In this PR, we now inline some dependencies:

  • lodash/isString, lodash/mergeWith
  • eventTypes (for trigger)

Vue and compiler-sfc and compiler-dom are still peer dependencies, so the user will bring their own version of those.

This does increase the bundle size - from 900 lines to around 4000. That said, mostly you will not be shipping this library to users, and 4000 lines is before minify, so it could be smaller, if the user wants to make it smaller, so I think this trade-off is probably fine. Simple is best!

For comparison, VTU v1 is around 10k lines (also not minified).

@lmiller1990 lmiller1990 requested a review from JessicaSachs May 10, 2020 02:25
rollup.config.js Outdated
@@ -25,8 +25,7 @@ function createEntry(options) {
input,
external: [
'vue',
'lodash/mergeWith',
'lodash/isString'
'@vue/compiler-dom'
Copy link
Member Author

Choose a reason for hiding this comment

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

Not needed in master right now, but will be very soon for this feature when merged, so it's fine to include it here.

@JessicaSachs
Copy link
Contributor

Can we inline a cheap implementation of isString and mergeWith?

isString should be ez to write natively...

For merge with:
https://github.com/vuejs/vue-test-utils-next/blob/1f2a18f8ae11fc53bd131f4b3c0276f22a639cf7/src/utils.ts#L6

Even if we can't get rid of using a deep merge... can we at least write a one-liner reducer or inline a lighter weight deepMerge library that doesn't require ~20 helper files?

@lmiller1990
Copy link
Member Author

lmiller1990 commented May 10, 2020

Yep @JessicaSachs was just thinking the same thing. I tried this with vite and it works great.

I will look into some more simple mergeWith and isString functions.

@lmiller1990
Copy link
Member Author

isString was easy. mergeDeep also easy - but I found a bug in the process with our config.components. It seems the component will always use the locally registered component. Our original test was not actually testing what it should be.

I will investigate. Good thing we uncovered this bug.

const wrapper2 = mount(Component, { props: { msg: 'Wrapper2' } })
expect(wrapper1.text()).toEqual('Wrapper1 Hello world')
expect(wrapper2.text()).toEqual('Wrapper2 Hello world')
const HelloLocal = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we add a test if the locally registered component is overwritten properly?

Copy link
Member Author

Choose a reason for hiding this comment

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

We have this in the other test (I think?)

I will check.

Copy link
Contributor

@dobromir-hristov dobromir-hristov left a comment

Choose a reason for hiding this comment

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

Looks great! I suppose the new merge function can work with arrays?

@lmiller1990
Copy link
Member Author

lmiller1990 commented May 10, 2020

@dobromir-hristov I guess - I just ran the tests in watch mode until they passed. Do we have some tests that use arrays? The mixin tests are passing, which I believe use arrays.

Looks like we might need a tests for globals: { stubs: ['a', 'b'] } to make sure. I can add that.

@dobromir-hristov
Copy link
Contributor

dobromir-hristov commented May 10, 2020

Yeah that plus should we deal with mixins somehow? Are array declaraitons, like mixins concatinated or overwritten?

@dobromir-hristov
Copy link
Contributor

Pushed a test for the mixins, which proved me right unfortunately. Arrays should be concatinated, not merged.
I dont like that the merge method is mutating like that the objects.

Overall we want a more specialized merge function.

mixins and plugins should be concatinated.
config, mocks, provide, components, directives and stubs should be overwritten by key, but not merged.

@lmiller1990
Copy link
Member Author

lmiller1990 commented May 12, 2020

thanks for that @dobromir-hristov, been a bit busy these last few days. I'll will look at this now.

edit: yep, mutation is really the worst thing. I will fix this!

@lmiller1990
Copy link
Member Author

Ok @dobromir-hristov getting closer, this is much cleaner and closer to what we had before - just a few failing tests to fix up.

@lmiller1990
Copy link
Member Author

lmiller1990 commented May 12, 2020

ok @dobromir-hristov we are green! Added all the tests. No more mutation :D

PS couldn't get this one to pass: https://github.com/vuejs/vue-test-utils-next/pull/116/files#diff-9def4df294f4d44655f7400ace7b394bR220

If you have a global stub, is there really a use-case to provide a local, different stub? This seems like a unlikely edge case at best.

Great review on this - found quite a few bugs (config.stubs was not actually working. We now have tests). Let me know if I missed any :) Excited to get this one merged up and released.

@dobromir-hristov
Copy link
Contributor

I will check it out in the morning :)

@lmiller1990
Copy link
Member Author

@dobromir-hristov we good to merge? thanks for refactor/tests.

@dobromir-hristov
Copy link
Contributor

Think so

@lmiller1990 lmiller1990 merged commit 3fa0a19 into master May 13, 2020
@lmiller1990 lmiller1990 deleted the technical/fix-esm-biuld branch May 13, 2020 22:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants