Skip to content
New issue

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

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

Already on GitHub? # to your account

feat: explicit async loading #212

Merged
merged 12 commits into from
Aug 11, 2021
Merged

feat: explicit async loading #212

merged 12 commits into from
Aug 11, 2021

Conversation

pi0
Copy link
Member

@pi0 pi0 commented Jul 8, 2021

By this change, during development, all components are imported without async loading to be the same as prod loader (resolves #193)

  • To force using async component import , we can add the .async modifier to component names (BigEditor.async.vue)
  • To force disabling async in prod fallback, we can set async to false
  • Async import can be inherited from component dir options (components: { isAsync: true })

Generated components/index.js

dev: (same as the expected loader behavior)

import { wrapFunctional } from './utils'

export const Big = import('../../components/global/Big.async.vue' /* webpackChunkName: "components/big" */).then(c => wrapFunctional(c.default || c))
export { default as Mouse } from '../../components/global/Mouse.vue'

prod: (fallback when the loader is not matching)

export const Big = import('../../components/global/Big.async.vue' /* webpackChunkName: "components/big" */).then(c => wrapFunctional(c.default || c))
export const Mouse = import('../../components/global/Mouse.vue' /* webpackChunkName: "components/mouse" */).then(c => wrapFunctional(c.default || c))

TODO

  • Respect .async suffix in loader
  • Show async flag in markdown
  • Update tests
  • Update docs

@codecov
Copy link

codecov bot commented Jul 8, 2021

Codecov Report

Merging #212 (0e93518) into main (64e10cc) will increase coverage by 0.23%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #212      +/-   ##
==========================================
+ Coverage   86.04%   86.28%   +0.23%     
==========================================
  Files           7        7              
  Lines         172      175       +3     
  Branches       39       41       +2     
==========================================
+ Hits          148      151       +3     
  Misses         24       24              
Impacted Files Coverage Δ
test/fixture/nuxt.config.ts 25.00% <ø> (ø)
src/index.ts 75.71% <100.00%> (+0.35%) ⬆️
src/loader.ts 100.00% <100.00%> (ø)
src/scan.ts 98.18% <100.00%> (+0.06%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 64e10cc...0e93518. Read the comment docs.

@pi0 pi0 changed the title feat: explicit lazy loading by component names feat: explicit lazy loading Jul 8, 2021
@pi0 pi0 changed the title feat: explicit lazy loading feat: explicit async loading Jul 8, 2021
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Alternative to confusing async component loading behavior
1 participant