Showing preview only (419K chars total). Download the full file or copy to clipboard to get everything.
Repository: gregberge/loadable-components
Branch: main
Commit: 18544decdd0e
Files: 252
Total size: 364.2 KB
Directory structure:
gitextract_pnucyiln/
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.md
│ │ ├── feature.md
│ │ ├── question.md
│ │ └── regression.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── SUPPORT.md
│ ├── opencollective.yml
│ └── stale.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── BACKERS.md
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── examples/
│ ├── client-side/
│ │ ├── .eslintrc.json
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── A.js
│ │ │ ├── B.js
│ │ │ ├── Hello.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── razzle/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── About/
│ │ │ └── index.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── Contact/
│ │ │ └── index.js
│ │ ├── Home/
│ │ │ ├── Home.css
│ │ │ ├── Intro.js
│ │ │ ├── Logo.js
│ │ │ ├── Welcome.js
│ │ │ └── index.js
│ │ ├── NotFound/
│ │ │ └── index.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── server-side-rendering/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── Y/
│ │ │ │ │ └── file.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ ├── D.js
│ │ │ │ │ ├── E.js
│ │ │ │ │ ├── F.js
│ │ │ │ │ ├── G.js
│ │ │ │ │ └── Z/
│ │ │ │ │ └── file.js
│ │ │ │ ├── main-node.js
│ │ │ │ ├── main-web.js
│ │ │ │ └── main.css
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ ├── server-side-rendering-async-node/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── Y/
│ │ │ │ │ └── file.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ ├── D.js
│ │ │ │ │ ├── E.js
│ │ │ │ │ ├── F.js
│ │ │ │ │ ├── G.js
│ │ │ │ │ └── Z/
│ │ │ │ │ └── file.js
│ │ │ │ ├── main-async-node.js
│ │ │ │ ├── main-web.js
│ │ │ │ └── main.css
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ ├── suspense/
│ │ ├── .eslintrc.json
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Hello.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── typescript/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.tsx
│ │ │ │ ├── Page.tsx
│ │ │ │ ├── PageWithParam.tsx
│ │ │ │ ├── main-node.js
│ │ │ │ └── main-web.js
│ │ │ └── server/
│ │ │ └── main.js
│ │ ├── tsconfig.json
│ │ └── webpack.config.babel.js
│ └── webpack/
│ ├── README.md
│ ├── webpack4/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ └── D.js
│ │ │ │ ├── main-node.js
│ │ │ │ └── main-web.js
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ └── webpack5/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── nodemon.json
│ ├── package.json
│ ├── src/
│ │ ├── client/
│ │ │ ├── App.js
│ │ │ ├── letters/
│ │ │ │ ├── A.css
│ │ │ │ ├── A.js
│ │ │ │ ├── B.js
│ │ │ │ ├── C.js
│ │ │ │ └── D.js
│ │ │ ├── main-node.js
│ │ │ └── main-web.js
│ │ └── server/
│ │ └── main.js
│ └── webpack.config.babel.js
├── lerna.json
├── netlify.toml
├── package.json
├── packages/
│ ├── babel-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── __snapshots__/
│ │ │ └── index.test.js.snap
│ │ ├── index.js
│ │ ├── index.test.js
│ │ ├── properties/
│ │ │ ├── chunkName.js
│ │ │ ├── importAsync.js
│ │ │ ├── isReady.js
│ │ │ ├── requireAsync.js
│ │ │ ├── requireSync.js
│ │ │ ├── resolve.js
│ │ │ └── state.js
│ │ └── util.js
│ ├── codemod/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ ├── main.js
│ │ │ └── utils/
│ │ │ └── CodemodError.js
│ │ ├── package.json
│ │ └── transforms/
│ │ ├── __testfixtures__/
│ │ │ ├── react-loadable-to-loadable-component_arrow-no-params.input.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-no-params.output.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-w-params.input.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-w-params.output.js
│ │ │ ├── react-loadable-to-loadable-component_expr.input.js
│ │ │ └── react-loadable-to-loadable-component_expr.output.js
│ │ ├── __tests__/
│ │ │ └── react-loadable-to-loadable-component-test.js
│ │ └── react-loadable-to-loadable-component.js
│ ├── component/
│ │ ├── .npmignore
│ │ ├── .size-snapshot.json
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ └── src/
│ │ ├── Context.js
│ │ ├── createLoadable.js
│ │ ├── index.js
│ │ ├── library.js
│ │ ├── loadable.js
│ │ ├── loadable.test.js
│ │ ├── loadableReady.js
│ │ ├── resolvers.js
│ │ ├── shared.js
│ │ ├── sharedInternals.js
│ │ └── util.js
│ ├── server/
│ │ ├── .npmignore
│ │ ├── .size-snapshot.json
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── __fixtures__/
│ │ │ └── stats.json
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ └── src/
│ │ ├── ChunkExtractor.js
│ │ ├── ChunkExtractor.test.js
│ │ ├── ChunkExtractorManager.js
│ │ ├── index.js
│ │ ├── sharedInternals.js
│ │ ├── util.js
│ │ └── util.test.js
│ └── webpack-plugin/
│ ├── .npmignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── resources/
│ └── loadable-components.sketch
├── scripts/
│ ├── copy-stats-fixture.js
│ ├── git-release.sh
│ └── prepare.sh
└── website/
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── README.md
├── _redirects
├── gatsby-config.js
├── gatsby-node.js
├── package.json
└── src/
└── pages/
├── docs/
│ ├── api-loadable-component.mdx
│ ├── api-loadable-server.mdx
│ ├── api-loadable-webpack-plugin.mdx
│ ├── babel-plugin.mdx
│ ├── code-splitting.mdx
│ ├── component-splitting.mdx
│ ├── delay.mdx
│ ├── dynamic-import.mdx
│ ├── error-boundaries.mdx
│ ├── fallback.mdx
│ ├── faq.mdx
│ ├── getting-started.mdx
│ ├── library-splitting.mdx
│ ├── loadable-vs-react-lazy.mdx
│ ├── migrate-from-react-loadable.mdx
│ ├── prefetching.mdx
│ ├── server-side-rendering.mdx
│ ├── support.mdx
│ ├── suspense.mdx
│ └── timeout.mdx
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
node_modules/
/coverage/
dist/
lib/
build/
/website/.cache/
/website/public/
__testfixtures__/
================================================
FILE: .eslintrc.json
================================================
{
"root": true,
"parser": "babel-eslint",
"extends": ["airbnb", "prettier"],
"env": {
"jest": true
},
"rules": {
"react/jsx-one-expression-per-line": "off",
"no-plusplus": "off",
"no-param-reassign": "off",
"no-nested-ternary": "off",
"react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
"react/jsx-wrap-multilines": "off",
"react/no-unused-state": "off",
"react/destructuring-assignment": "off",
"react/prop-types": "off",
"react/sort-comp": "off",
"react/jsx-props-no-spreading": "off",
"react/state-in-constructor": "off",
"import/extensions": "off",
"import/prefer-default-export": "off"
}
}
================================================
FILE: .github/FUNDING.yml
================================================
github: gregberge
open_collective: loadable
================================================
FILE: .github/ISSUE_TEMPLATE/bug.md
================================================
---
name: 🐛 Bug report
about: Create a report to help us improve
---
## 🐛 Bug Report
A clear and concise description of what the bug is.
## To Reproduce
Steps to reproduce the behavior:
## Expected behavior
A clear and concise description of what you expected to happen.
## Link to repl or repo (highly encouraged)
Please provide a minimal repository on GitHub.
Issues without a reproduction link are likely to stall.
## Run `npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard`
Paste the results here:
```bash
```
================================================
FILE: .github/ISSUE_TEMPLATE/feature.md
================================================
---
name: 🚀 Feature Proposal
about: Submit a proposal for a new feature
---
## 🚀 Feature Proposal
A clear and concise description of what the feature is.
## Motivation
Please outline the motivation for the proposal.
## Example
Please provide an example for how this feature would be used.
## Pitch
Why does this feature belong in the Loadable Component ecosystem?
================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: 💬 Questions / Help
about: If you have questions, please read full readme first
---
## 💬 Questions and Help
Loadable Components project is young, but please before asking your question:
- Read carefully the README of the project
- Search if your answer has already been answered in old issues
After you can submit your question and we will be happy to help you!
================================================
FILE: .github/ISSUE_TEMPLATE/regression.md
================================================
---
name: 💥 Regression Report
about: Report unexpected behavior that worked in previous versions
---
## 💥 Regression Report
A clear and concise description of what the regression is.
## Last working version
Worked up to version:
Stopped working in version:
## To Reproduce
Steps to reproduce the behavior:
## Expected behavior
A clear and concise description of what you expected to happen.
## Link to repl or repo (highly encouraged)
Please provide a minimal repository on GitHub.
Issues without a reproduction link are likely to stall.
## Run `npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard`
Paste the results here:
```bash
```
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
## 👉 [Please follow one of these issue templates](https://github.com/gregberge/loadable-components/issues/new/choose) 👈
Note: to keep the backlog clean and actionable, issues may be immediately closed if they do not follow one of the above issue templates.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. The two fields below are mandatory. -->
## Summary
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
## Test plan
<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. -->
================================================
FILE: .github/SUPPORT.md
================================================
Please read carefully the README before asking questions.
================================================
FILE: .github/opencollective.yml
================================================
collective: loadable
tiers:
- tiers: '*'
labels: ['backer']
message: |
Hey <author> :wave:,
Thank you so much for supporting us on [Open Collective](<link>) :heart:.
We'll give a special attention to this issue.
<link>
invitation: |
Hey <author> :wave:,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on [Open Collective](<link>). We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us :heart:.
<link>
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
================================================
FILE: .gitignore
================================================
node_modules/
dist/
lib/
/coverage/
examples/*/yarn.lock
================================================
FILE: .npmignore
================================================
/*
!/babel.js
!/server.js
!/server.d.ts
!/dist/**/*.js
!/src/**/*.js
!/types/index.d.ts
!/types/tsconfig.json
__fixtures__
*.test.js
.size-snapshot.json
================================================
FILE: .npmrc
================================================
registry=https://registry.npmjs.org
================================================
FILE: .nvmrc
================================================
20
registry=https://registry.npmjs.org
================================================
FILE: .prettierignore
================================================
node_modules/
/coverage/
/dist/
__fixtures__/
CHANGELOG.md
package.json
lerna.json
/website/.cache/
/website/public/
__testfixtures__/
examples/*/public
**/dist/
**/lib/
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"trailingComma": "all",
"semi": false
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 12
notifications:
email: false
cache:
yarn: true
directories:
- '.eslintcache'
- 'node_modules'
git:
depth: 5
branches:
only:
- master
- stable
script:
- yarn ci
- yarn --cwd examples/typescript && yarn --cwd examples/typescript build
- yarn --cwd examples/webpack/webpack4 && yarn --cwd examples/webpack/webpack4 build
- yarn --cwd examples/webpack/webpack5 && yarn --cwd examples/webpack/webpack5 build
notifications:
email: false
================================================
FILE: BACKERS.md
================================================
# Sponsors & Backers
<p class="description">Support Loadable Components development through donations.</p>
Loadable Components is an MIT-licensed open source project. It is created an maintained by a single person: Greg Bergé.
- [Sponsor me on GitHub ❤️](https://github.com/sponsors/gregberge).
================================================
FILE: CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [5.16.7](https://github.com/gregberge/loadable-components/compare/v5.16.6...v5.16.7) (2025-05-18)
**Note:** Version bump only for package loadable-components
## [5.16.6](https://github.com/gregberge/loadable-components/compare/v5.16.5...v5.16.6) (2025-05-18)
**Note:** Version bump only for package loadable-components
## [5.16.5](https://github.com/smooth-code/loadable-components/compare/v5.16.4...v5.16.5) (2024-04-20)
**Note:** Version bump only for package loadable-components
## [5.16.4](https://github.com/smooth-code/loadable-components/compare/v5.16.3...v5.16.4) (2024-04-20)
### Bug Fixes
* correct esm configuration for loadable/server, fixes: [#999](https://github.com/smooth-code/loadable-components/issues/999) ([#1004](https://github.com/smooth-code/loadable-components/issues/1004)) ([114cea2](https://github.com/smooth-code/loadable-components/commit/114cea2b61ef644d3b794a9b5f48df69f0f5400b))
## [5.16.3](https://github.com/smooth-code/loadable-components/compare/v5.16.2...v5.16.3) (2023-12-26)
### Bug Fixes
* correct react-is for mjs export; remove isValidComponent check ([#991](https://github.com/smooth-code/loadable-components/issues/991)) ([9d381c3](https://github.com/smooth-code/loadable-components/commit/9d381c35b7fc1f8f9122caac25e8e255871ebab6))
## [5.16.2](https://github.com/smooth-code/loadable-components/compare/v5.16.1...v5.16.2) (2023-12-15)
### Bug Fixes
* add esm exports to package.json and change esm bundle extension to .mjs to allow node.js to properly import esm version of package. ([#989](https://github.com/smooth-code/loadable-components/issues/989)) ([e4a3718](https://github.com/smooth-code/loadable-components/commit/e4a37188b804e6a5bc66f39c23c738006bc0e284))
## [5.16.1](https://github.com/smooth-code/loadable-components/compare/v5.16.0...v5.16.1) (2023-07-20)
### Bug Fixes
* correct babel plugin default signature to allow any source of 'loadable' ([#972](https://github.com/smooth-code/loadable-components/issues/972)) ([19849b6](https://github.com/smooth-code/loadable-components/commit/19849b6ba738fe19c18e61ed3402ee82ba934760)), closes [#971](https://github.com/smooth-code/loadable-components/issues/971)
# [5.16.0](https://github.com/smooth-code/loadable-components/compare/v5.15.3...v5.16.0) (2023-07-09)
### Features
* Allow additional identifiers to be passed in to the babel plugin ([#966](https://github.com/smooth-code/loadable-components/issues/966)) ([e18e37a](https://github.com/smooth-code/loadable-components/commit/e18e37afd8b30455d3a786b9b0dae5f3bd0d442b))
## [5.15.3](https://github.com/smooth-code/loadable-components/compare/v5.15.2...v5.15.3) (2023-01-28)
### Bug Fixes
* add React 17 and 18 to package dependencies, fixes [#718](https://github.com/smooth-code/loadable-components/issues/718) ([66edc37](https://github.com/smooth-code/loadable-components/commit/66edc37a731a8ec655deffd3ad454fd96e909ba3))
## [5.15.2](https://github.com/smooth-code/loadable-components/compare/v5.15.1...v5.15.2) (2021-12-12)
### Bug Fixes
* Clear correct cache when compiling with Webpack ([#838](https://github.com/smooth-code/loadable-components/issues/838)) ([3b9cb20](https://github.com/smooth-code/loadable-components/commit/3b9cb202a09365e67c08ec18455d82bedf62f4db))
* loadAsync Loadable should copy statics ([#839](https://github.com/smooth-code/loadable-components/issues/839)) ([9ff6693](https://github.com/smooth-code/loadable-components/commit/9ff66939ee6fd622922f71128a30b5d3f43f63b0))
* use stable promises for load/preload/React ([#858](https://github.com/smooth-code/loadable-components/issues/858)) ([45f2d91](https://github.com/smooth-code/loadable-components/commit/45f2d9133c8234fec9cbe36e5a162a61f24e4aae))
## [5.15.1](https://github.com/smooth-code/loadable-components/compare/v5.15.0...v5.15.1) (2021-08-17)
### Bug Fixes
* add cachedAssets to stats options ([#779](https://github.com/smooth-code/loadable-components/issues/779)) ([73b17fd](https://github.com/smooth-code/loadable-components/commit/73b17fd067579b1c5d38eba00e157964e0930a94)), closes [#770](https://github.com/smooth-code/loadable-components/issues/770)
* SubResourceIntegrity ([#803](https://github.com/smooth-code/loadable-components/issues/803)) ([9b34195](https://github.com/smooth-code/loadable-components/commit/9b34195627c65372a7c834311c32dfcbd5b7fedd))
# [5.15.0](https://github.com/smooth-code/loadable-components/compare/v5.14.2...v5.15.0) (2021-05-08)
### Bug Fixes
* add displayNames to generated components ([#731](https://github.com/smooth-code/loadable-components/issues/731)) ([b640c82](https://github.com/smooth-code/loadable-components/commit/b640c82a742ffbccc423439e2e205d1becdf5491))
### Features
* support multiple Webpack runtimes ([#701](https://github.com/smooth-code/loadable-components/issues/701)) ([d351367](https://github.com/smooth-code/loadable-components/commit/d3513679ed680e46967ca18555116c06e5a4b341))
* webpack plugin doesn't need all chunk info ([#735](https://github.com/smooth-code/loadable-components/issues/735)) ([cea9f24](https://github.com/smooth-code/loadable-components/commit/cea9f249f7550a1154cf88bcfa3812ebb78a500f))
## [5.14.2](https://github.com/smooth-code/loadable-components/compare/v5.14.1...v5.14.2) (2021-01-31)
### Bug Fixes
* ignore css chunk ([#689](https://github.com/smooth-code/loadable-components/issues/689)) ([6926e19](https://github.com/smooth-code/loadable-components/commit/6926e190c80f525467980fffbbded0bf933f27ed))
* remove main asset path query ([#686](https://github.com/smooth-code/loadable-components/issues/686)) ([dde2252](https://github.com/smooth-code/loadable-components/commit/dde2252136a2d7f3ff635f85deff429948130883))
* update hooks for webpack 5 ([#676](https://github.com/smooth-code/loadable-components/issues/676)) ([671ef52](https://github.com/smooth-code/loadable-components/commit/671ef527e7a37c459df616ee74dc92e106e8245e))
## [5.14.1](https://github.com/smooth-code/loadable-components/compare/v5.14.0...v5.14.1) (2020-10-22)
**Note:** Version bump only for package loadable-components
# [5.14.0](https://github.com/smooth-code/loadable-components/compare/v5.13.2...v5.14.0) (2020-10-20)
### Bug Fixes
* add key to chunks script elements ([#631](https://github.com/smooth-code/loadable-components/issues/631)) ([25b532e](https://github.com/smooth-code/loadable-components/commit/25b532eb53a2841229dbc8a9c91f24112a46b93f)), closes [#628](https://github.com/smooth-code/loadable-components/issues/628)
* do not derive cache key if component is static, fixes [#629](https://github.com/smooth-code/loadable-components/issues/629) ([#630](https://github.com/smooth-code/loadable-components/issues/630)) ([b4151d8](https://github.com/smooth-code/loadable-components/commit/b4151d85b3ba0f57e9fab48ec88f5e57e4d0b544))
* treat mjs as script ([575fe2b](https://github.com/smooth-code/loadable-components/commit/575fe2b3f58b18c17416f238780b9bab85110706))
### Features
* make packages webpack 5 compatible ([#638](https://github.com/smooth-code/loadable-components/issues/638)) ([e882e4d](https://github.com/smooth-code/loadable-components/commit/e882e4d812e714066eba19a11dd119193e7a9e01))
## [5.13.2](https://github.com/smooth-code/loadable-components/compare/v5.13.1...v5.13.2) (2020-09-14)
### Bug Fixes
* Fixed lazy usage with Suspense and Error Boundary together ([#521](https://github.com/smooth-code/loadable-components/issues/521)) ([42fbdd0](https://github.com/smooth-code/loadable-components/commit/42fbdd0d552551b18ed0781383bb0073e1cd8640))
* human readable errors ([b86bb82](https://github.com/smooth-code/loadable-components/commit/b86bb82417ad098ed73037159886c4d0481ba34e))
* spread nested required chunks array ([95e6ecb](https://github.com/smooth-code/loadable-components/commit/95e6ecb0dd9be3cf18ded934cca433a660fa3543))
* typo ([bebb828](https://github.com/smooth-code/loadable-components/commit/bebb82811e25475e91f9fadf64fda004b6b649b0))
## [5.13.1](https://github.com/smooth-code/loadable-components/compare/v5.13.0...v5.13.1) (2020-07-02)
### Bug Fixes
* expose used chunkNames from a server. Fixes [#587](https://github.com/smooth-code/loadable-components/issues/587) ([831aec0](https://github.com/smooth-code/loadable-components/commit/831aec03154ab16007db0d78fbf3559583c000fe))
# [5.13.0](https://github.com/smooth-code/loadable-components/compare/v5.12.0...v5.13.0) (2020-06-29)
### Bug Fixes
* allow webpack cache is ready only for initial chunks, fixes [#558](https://github.com/smooth-code/loadable-components/issues/558) ([61f8b75](https://github.com/smooth-code/loadable-components/commit/61f8b75b54612368c88807d73abb7dc7add720ad))
* memory leak in module cache management, fixes [#560](https://github.com/smooth-code/loadable-components/issues/560) ([6c11703](https://github.com/smooth-code/loadable-components/commit/6c11703cbc5446fc61d10c47b64e84a00cf899c3))
* use make-dir instead of mkdirp ([#544](https://github.com/smooth-code/loadable-components/issues/544)) ([5a9c33b](https://github.com/smooth-code/loadable-components/commit/5a9c33b222fecb320dc02b643122fbe717aa6fc8))
* **babel-plugin:** add missing peer dependency ([#524](https://github.com/smooth-code/loadable-components/issues/524)) ([03a79b6](https://github.com/smooth-code/loadable-components/commit/03a79b66defc78f150436acd6a9d3e029bb1d470))
### Features
* add `resolveComponent` option ([a47d3d9](https://github.com/smooth-code/loadable-components/commit/a47d3d9021ee6b12c1209bf41069dc133cb1fa7c))
# [5.12.0](https://github.com/gregberge/loadable-components/compare/v5.11.0...v5.12.0) (2020-01-09)
### Bug Fixes
* apply loadable transformations before any other, fixes [#466](https://github.com/gregberge/loadable-components/issues/466) ([ac5ba45](https://github.com/gregberge/loadable-components/commit/ac5ba45862bad68b971a969e6e8713874add51a6))
### Features
* add codemods to migrate from react-loadable ([#463](https://github.com/gregberge/loadable-components/issues/463)) ([a82d5ad](https://github.com/gregberge/loadable-components/commit/a82d5ad1e17cd64d3579aa207abfc18346ff0107))
* avoid synchronous loading on client if options.ssr is false ([#346](https://github.com/gregberge/loadable-components/issues/346)) ([338bf55](https://github.com/gregberge/loadable-components/commit/338bf555adc68986b12c8dd4e304875425119ca2))
* loadable-components.com ([e515b0e](https://github.com/gregberge/loadable-components/commit/e515b0e1a73a240fae1ab32f5abd6df23d35efcf))
### Performance Improvements
* avoid calling stats.toJson if possible ([87698de](https://github.com/gregberge/loadable-components/commit/87698de079cb742317a4f6570430ccd5cd526d3e))
# [5.11.0](https://github.com/smooth-code/loadable-components/compare/v5.10.3...v5.11.0) (2019-12-02)
### Bug Fixes
* fix isReady problem ([#445](https://github.com/smooth-code/loadable-components/issues/445)) ([3024348](https://github.com/smooth-code/loadable-components/commit/30243482be917e89515d057e2368e7278e34696c)), closes [#400](https://github.com/smooth-code/loadable-components/issues/400)
* **server:** use require instead of module.require ([#457](https://github.com/smooth-code/loadable-components/issues/457)) ([064b4f8](https://github.com/smooth-code/loadable-components/commit/064b4f83b291e8a7d73bc44fe4196dc9ddc81fe8)), closes [#455](https://github.com/smooth-code/loadable-components/issues/455)
### Features
* add support for SRI (integrity) (with webpack-subresource-integrity) ([#436](https://github.com/smooth-code/loadable-components/issues/436)) ([586ad0a](https://github.com/smooth-code/loadable-components/commit/586ad0af6e172e3a0bffdbe0c8ab682c0d8b0eab))
## [5.10.3](https://github.com/smooth-code/loadable-components/compare/v5.10.2...v5.10.3) (2019-09-24)
### Bug Fixes
* empty cache on each server reload ([#431](https://github.com/smooth-code/loadable-components/issues/431)) ([d4428c6](https://github.com/smooth-code/loadable-components/commit/d4428c6)), closes [#230](https://github.com/smooth-code/loadable-components/issues/230)
* support IE 11 without polyfill ([#416](https://github.com/smooth-code/loadable-components/issues/416)) ([80ee809](https://github.com/smooth-code/loadable-components/commit/80ee809)), closes [#397](https://github.com/smooth-code/loadable-components/issues/397)
* **babel-plugin:** fix bug when using + concatenation instead of a template literal ([#425](https://github.com/smooth-code/loadable-components/issues/425)) ([d98dd27](https://github.com/smooth-code/loadable-components/commit/d98dd27))
## [5.10.2](https://github.com/smooth-code/loadable-components/compare/v5.10.1...v5.10.2) (2019-07-15)
### Bug Fixes
* use === instead of Object.is ([c88cd82](https://github.com/smooth-code/loadable-components/commit/c88cd82)), closes [#371](https://github.com/smooth-code/loadable-components/issues/371)
### Performance Improvements
* use more performant url join impl ([#353](https://github.com/smooth-code/loadable-components/issues/353)) ([c3fbbef](https://github.com/smooth-code/loadable-components/commit/c3fbbef))
## [5.10.1](https://github.com/smooth-code/loadable-components/compare/v5.10.0...v5.10.1) (2019-05-14)
### Bug Fixes
* add @babel/preset-env in rollup config ([#336](https://github.com/smooth-code/loadable-components/issues/336)) ([8b50c94](https://github.com/smooth-code/loadable-components/commit/8b50c94)), closes [#335](https://github.com/smooth-code/loadable-components/issues/335)
# [5.10.0](https://github.com/smooth-code/loadable-components/compare/v5.9.0...v5.10.0) (2019-05-13)
### Bug Fixes
* fix chunkname mismatch ([#332](https://github.com/smooth-code/loadable-components/issues/332)) ([7ffaa4c](https://github.com/smooth-code/loadable-components/commit/7ffaa4c)), closes [#331](https://github.com/smooth-code/loadable-components/issues/331)
### Features
* add `load` method that returns a Promise ([#329](https://github.com/smooth-code/loadable-components/issues/329)) ([a10a9d5](https://github.com/smooth-code/loadable-components/commit/a10a9d5)), closes [#226](https://github.com/smooth-code/loadable-components/issues/226)
* support reactive dynamic loadable ([#330](https://github.com/smooth-code/loadable-components/issues/330)) ([d65c5bb](https://github.com/smooth-code/loadable-components/commit/d65c5bb)), closes [#284](https://github.com/smooth-code/loadable-components/issues/284)
### Performance Improvements
* optimize rollup config ([c94760b](https://github.com/smooth-code/loadable-components/commit/c94760b))
# [5.9.0](https://github.com/smooth-code/loadable-components/compare/v5.8.0...v5.9.0) (2019-04-23)
### Features
* support multiple react apps ([#317](https://github.com/smooth-code/loadable-components/issues/317)) ([dc54050](https://github.com/smooth-code/loadable-components/commit/dc54050)), closes [#311](https://github.com/smooth-code/loadable-components/issues/311)
* **server:** authorize custom filesystem ([#318](https://github.com/smooth-code/loadable-components/issues/318)) ([f2a6bbd](https://github.com/smooth-code/loadable-components/commit/f2a6bbd)), closes [#315](https://github.com/smooth-code/loadable-components/issues/315)
# [5.8.0](https://github.com/smooth-code/loadable-components/compare/v5.7.2...v5.8.0) (2019-04-10)
### Bug Fixes
* **babel-plugin:** Use require.resolve instead of relative path resolution ([#303](https://github.com/smooth-code/loadable-components/issues/303)) ([bad7f1f](https://github.com/smooth-code/loadable-components/commit/bad7f1f))
### Features
* **ChunkExtractor:** support publicPath override ([#292](https://github.com/smooth-code/loadable-components/issues/292)) ([9731e9c](https://github.com/smooth-code/loadable-components/commit/9731e9c))
* **server:** support function in attributes ([#277](https://github.com/smooth-code/loadable-components/issues/277)) ([c172324](https://github.com/smooth-code/loadable-components/commit/c172324))
### Performance Improvements
* **server:** improve lodash imports for serverless bundles ([#298](https://github.com/smooth-code/loadable-components/issues/298)) ([96841f2](https://github.com/smooth-code/loadable-components/commit/96841f2))
## [5.7.2](https://github.com/smooth-code/loadable-components/compare/v5.7.1...v5.7.2) (2019-03-20)
### Bug Fixes
* **babel-plugin:** handle "-" at the end of request ([c0f325b](https://github.com/smooth-code/loadable-components/commit/c0f325b))
## [5.7.1](https://github.com/smooth-code/loadable-components/compare/v5.7.0...v5.7.1) (2019-03-19)
### Bug Fixes
* **babel-plugin:** handle special chars in file names ([#279](https://github.com/smooth-code/loadable-components/issues/279)) ([4da39ff](https://github.com/smooth-code/loadable-components/commit/4da39ff))
* **webpack-plugin:** create output folder with mkdirp ([#273](https://github.com/smooth-code/loadable-components/issues/273)) ([3767f28](https://github.com/smooth-code/loadable-components/commit/3767f28))
# [5.7.0](https://github.com/smooth-code/loadable-components/compare/v5.6.1...v5.7.0) (2019-03-14)
### Bug Fixes
* **component:** fix warning message about babel ([#255](https://github.com/smooth-code/loadable-components/issues/255)) ([7cb68a1](https://github.com/smooth-code/loadable-components/commit/7cb68a1)), closes [#253](https://github.com/smooth-code/loadable-components/issues/253)
* **server:** fix loading order of assets ([#266](https://github.com/smooth-code/loadable-components/issues/266)) ([4c8ae60](https://github.com/smooth-code/loadable-components/commit/4c8ae60))
### Features
* use inline JSON to enabling CSP without `unsafe-inline` ([05e5500](https://github.com/smooth-code/loadable-components/commit/05e5500))
### Performance Improvements
* **build:** add build target for Node ([#267](https://github.com/smooth-code/loadable-components/issues/267)) ([97ff6ac](https://github.com/smooth-code/loadable-components/commit/97ff6ac))
## [5.6.1](https://github.com/smooth-code/loadable-components/compare/v5.6.0...v5.6.1) (2019-02-25)
### Bug Fixes
* **component:** better ES Modules handling ([#228](https://github.com/smooth-code/loadable-components/issues/228)) ([3628363](https://github.com/smooth-code/loadable-components/commit/3628363))
* **server:** allow query-param cache busting in chunk names ([#229](https://github.com/smooth-code/loadable-components/issues/229)) ([71f7bcd](https://github.com/smooth-code/loadable-components/commit/71f7bcd))
* **server:** use `eval` to prevent webpack warning ([#240](https://github.com/smooth-code/loadable-components/issues/240)) ([948165d](https://github.com/smooth-code/loadable-components/commit/948165d)), closes [#234](https://github.com/smooth-code/loadable-components/issues/234)
* **suspense:** fix suspense mode in React v16.8+ ([#251](https://github.com/smooth-code/loadable-components/issues/251)) ([d04e1c9](https://github.com/smooth-code/loadable-components/commit/d04e1c9))
# [5.6.0](https://github.com/smooth-code/loadable-components/compare/v5.5.0...v5.6.0) (2019-02-05)
### Bug Fixes
* Add extra props option for links ([#212](https://github.com/smooth-code/loadable-components/issues/212)) ([6714d2a](https://github.com/smooth-code/loadable-components/commit/6714d2a))
* **server:** fix chunkName resolving ([#219](https://github.com/smooth-code/loadable-components/issues/219)) ([ef11e11](https://github.com/smooth-code/loadable-components/commit/ef11e11))
### Features
* **babel-plugin:** transform code annotated with magic comment ([4f832dc](https://github.com/smooth-code/loadable-components/commit/4f832dc)), closes [#192](https://github.com/smooth-code/loadable-components/issues/192)
* **component:** add preload method ([#224](https://github.com/smooth-code/loadable-components/issues/224)) ([4a67ace](https://github.com/smooth-code/loadable-components/commit/4a67ace)), closes [#196](https://github.com/smooth-code/loadable-components/issues/196)
* **server:** add option to disable SSR ([#223](https://github.com/smooth-code/loadable-components/issues/223)) ([4cab4f9](https://github.com/smooth-code/loadable-components/commit/4cab4f9)), closes [#195](https://github.com/smooth-code/loadable-components/issues/195)
# [5.5.0](https://github.com/smooth-code/loadable-components/compare/v5.4.0...v5.5.0) (2019-01-22)
### Features
* allow to specify extra attributes in getScriptTags & others ([#210](https://github.com/smooth-code/loadable-components/issues/210)) ([8a3d067](https://github.com/smooth-code/loadable-components/commit/8a3d067))
# [5.4.0](https://github.com/smooth-code/loadable-components/compare/v5.3.0...v5.4.0) (2019-01-17)
### Features
* **webpack-plugin:** support custom path in writeToDisk option ([#187](https://github.com/smooth-code/loadable-components/issues/187)) ([4a6f84f](https://github.com/smooth-code/loadable-components/commit/4a6f84f))
# [5.3.0](https://github.com/smooth-code/loadable-components/compare/v5.2.2...v5.3.0) (2019-01-11)
### Features
* support inline CSS ([#190](https://github.com/smooth-code/loadable-components/issues/190)) ([2caf676](https://github.com/smooth-code/loadable-components/commit/2caf676))
## [5.2.2](https://github.com/smooth-code/loadable-components/compare/v5.2.1...v5.2.2) (2018-12-12)
### Bug Fixes
* **babel-plugin:** fix chunkName with aggressive code splitting ([e974933](https://github.com/smooth-code/loadable-components/commit/e974933)), closes [#182](https://github.com/smooth-code/loadable-components/issues/182)
* ensure that component is mounted before calling `setState` ([#184](https://github.com/smooth-code/loadable-components/issues/184)) ([fe0f47f](https://github.com/smooth-code/loadable-components/commit/fe0f47f)), closes [#180](https://github.com/smooth-code/loadable-components/issues/180)
* **server:** fix usage when compiled using webpack ([#185](https://github.com/smooth-code/loadable-components/issues/185)) ([5e28870](https://github.com/smooth-code/loadable-components/commit/5e28870)), closes [#181](https://github.com/smooth-code/loadable-components/issues/181)
## [5.2.1](https://github.com/smooth-code/loadable-components/compare/v5.2.0...v5.2.1) (2018-11-27)
### Bug Fixes
* **webpack-plugin:** fix TypeError when set writeToDisk true ([#170](https://github.com/smooth-code/loadable-components/issues/170)) ([2d1fb11](https://github.com/smooth-code/loadable-components/commit/2d1fb11))
* upgrade hoist-non-react-statics@3.2.0 ([122b1ce](https://github.com/smooth-code/loadable-components/commit/122b1ce))
# [5.2.0](https://github.com/smooth-code/loadable-components/compare/v5.1.3...v5.2.0) (2018-11-23)
### Bug Fixes
* **server:** fix url join ([#166](https://github.com/smooth-code/loadable-components/issues/166)) ([ba90289](https://github.com/smooth-code/loadable-components/commit/ba90289))
* **server:** support protocol free paths ([#163](https://github.com/smooth-code/loadable-components/issues/163)) ([3b5b115](https://github.com/smooth-code/loadable-components/commit/3b5b115))
### Features
* **webpack-plugin:** add writeToDisk option ([#161](https://github.com/smooth-code/loadable-components/issues/161)) ([6b5ba21](https://github.com/smooth-code/loadable-components/commit/6b5ba21))
## [5.1.3](https://github.com/smooth-code/loadable-components/compare/v5.1.2...v5.1.3) (2018-11-20)
### Bug Fixes
* **server:** exclude http and https from regex ([#155](https://github.com/smooth-code/loadable-components/issues/155)) ([0bb2ad9](https://github.com/smooth-code/loadable-components/commit/0bb2ad9)), closes [#153](https://github.com/smooth-code/loadable-components/issues/153)
* **server:** ignore *.hot-update.js ([edcd2c8](https://github.com/smooth-code/loadable-components/commit/edcd2c8)), closes [#148](https://github.com/smooth-code/loadable-components/issues/148)
## [5.1.2](https://github.com/smooth-code/loadable-components/compare/v5.1.1...v5.1.2) (2018-11-13)
### Bug Fixes
* fix ref handler in `loadable.lib` ([da05d87](https://github.com/smooth-code/loadable-components/commit/da05d87))
## [5.1.1](https://github.com/smooth-code/loadable-components/compare/v5.1.0...v5.1.1) (2018-11-13)
### Bug Fixes
* **server:** ignore source maps ([9991bbd](https://github.com/smooth-code/loadable-components/commit/9991bbd)), closes [#128](https://github.com/smooth-code/loadable-components/issues/128)
# [5.1.0](https://github.com/smooth-code/loadable-components/compare/v5.0.2...v5.1.0) (2018-11-10)
### Features
* **server:** add outputPath option in ChunkExtractor ([aac26b3](https://github.com/smooth-code/loadable-components/commit/aac26b3))
## [5.0.2](https://github.com/smooth-code/loadable-components/compare/v5.0.1...v5.0.2) (2018-11-10)
### Bug Fixes
* update peer dependencies ([b0363dc](https://github.com/smooth-code/loadable-components/commit/b0363dc))
# [5.0.0](https://github.com/smooth-code/loadable-components/compare/v4.0.5...v5.0.0) (2018-11-10)
### Bug Fixes
* fix loadableReady ([59693bb](https://github.com/smooth-code/loadable-components/commit/59693bb))
### Features
* improve SSR support ([eb1cfe8](https://github.com/smooth-code/loadable-components/commit/eb1cfe8))
### BREAKING CHANGES
* - SSR has been rewritten from scratch, if you use it, please follow the
new guide.
- Prefetch component and prefetch functions have been removed, please
use `webpackPrefetch` instead.
## [4.0.5](https://github.com/smooth-code/loadable-components/compare/v4.0.4...v4.0.5) (2018-11-01)
### Bug Fixes
* **server:** fix getScriptElements ([ba424e0](https://github.com/smooth-code/loadable-components/commit/ba424e0))
## [4.0.4](https://github.com/smooth-code/loadable-components/compare/v4.0.3...v4.0.4) (2018-10-31)
### Bug Fixes
* fix peer dependencies ([6816e8c](https://github.com/smooth-code/loadable-components/commit/6816e8c))
## [4.0.3](https://github.com/smooth-code/loadable-components/compare/v4.0.2...v4.0.3) (2018-10-31)
### Bug Fixes
* **server:** disable common chunks optim ([78e7b28](https://github.com/smooth-code/loadable-components/commit/78e7b28))
## [4.0.2](https://github.com/smooth-code/loadable-components/compare/v4.0.1...v4.0.2) (2018-10-31)
### Bug Fixes
* **babel-plugin:** transform into friendly chunk name ([54422cb](https://github.com/smooth-code/loadable-components/commit/54422cb))
* **component:** fix lazy usage ([d711ee0](https://github.com/smooth-code/loadable-components/commit/d711ee0))
## [4.0.1](https://github.com/smooth-code/loadable-components/compare/v4.0.0...v4.0.1) (2018-10-30)
### Bug Fixes
* **component:** do not call ref several times ([8cf3190](https://github.com/smooth-code/loadable-components/commit/8cf3190))
# [4.0.0](https://github.com/smooth-code/loadable-components/compare/v3.0.2...v4.0.0) (2018-10-30)
### Features
* add new loadable.lib, change API ([94b2e87](https://github.com/smooth-code/loadable-components/commit/94b2e87))
### BREAKING CHANGES
* - `ErrorComponent` is ignored, please use Error Boundaries to handle errors.
- `lazy` is no longer exported
- `LoadingComponent` is replaced by `fallback` option
- `ref` are now forwarded
## [3.0.2](https://github.com/smooth-code/loadable-components/compare/v3.0.1...v3.0.2) (2018-10-30)
### Bug Fixes
* **component:** fix loadComponent (typo) ([a410cb2](https://github.com/smooth-code/loadable-components/commit/a410cb2))
## [3.0.1](https://github.com/smooth-code/loadable-components/compare/v3.0.0...v3.0.1) (2018-10-30)
### Bug Fixes
* **component:** fix loadComponents ([bd2220c](https://github.com/smooth-code/loadable-components/commit/bd2220c))
# [3.0.0](https://github.com/smooth-code/loadable-components/compare/v2.2.3...v3.0.0) (2018-10-29)
### Bug Fixes
* **typescript:** restore types ([#113](https://github.com/smooth-code/loadable-components/issues/113)) ([240bb8f](https://github.com/smooth-code/loadable-components/commit/240bb8f))
### Features
* welcome loadable ([4dffad7](https://github.com/smooth-code/loadable-components/commit/4dffad7))
### BREAKING CHANGES
* API has completely changed, see documentation.
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="2.2.3"></a>
## [2.2.3](https://github.com/smooth-code/loadable-components/compare/v2.2.2...v2.2.3) (2018-08-16)
### Bug Fixes
* fix type definitions (#95) ([8402c19](https://github.com/smooth-code/loadable-components/commit/8402c19)), closes [#95](https://github.com/smooth-code/loadable-components/issues/95)
* support non-ES modules (#104) ([2a82314](https://github.com/smooth-code/loadable-components/commit/2a82314))
<a name="2.2.2"></a>
## [2.2.2](https://github.com/smooth-code/loadable-components/compare/v2.2.1...v2.2.2) (2018-05-25)
### Bug Fixes
* fix error handling in loadComponents (#87) ([d32c74c](https://github.com/smooth-code/loadable-components/commit/d32c74c)), closes [#87](https://github.com/smooth-code/loadable-components/issues/87)
<a name="2.2.1"></a>
## [2.2.1](https://github.com/smooth-code/loadable-components/compare/v2.2.0...v2.2.1) (2018-05-23)
<a name="2.2.0"></a>
# [2.2.0](https://github.com/smooth-code/loadable-components/compare/v2.1.0...v2.2.0) (2018-05-23)
### Bug Fixes
* fix SSR with HMR #85 ([20138e1](https://github.com/smooth-code/loadable-components/commit/20138e1)), closes [#85](https://github.com/smooth-code/loadable-components/issues/85)
### Features
* experimental suspense 🤩 ([57ce712](https://github.com/smooth-code/loadable-components/commit/57ce712))
<a name="2.1.0"></a>
# [2.1.0](https://github.com/smooth-code/loadable-components/compare/v2.0.1...v2.1.0) (2018-05-13)
### Features
* add TypeScript definitions (#80) ([db19796](https://github.com/smooth-code/loadable-components/commit/db19796))
<a name="2.0.1"></a>
## [2.0.1](https://github.com/smooth-code/loadable-components/compare/v2.0.0...v2.0.1) (2018-05-12)
### Bug Fixes
* fix module resolving ([10318b0](https://github.com/smooth-code/loadable-components/commit/10318b0)), closes [#59](https://github.com/smooth-code/loadable-components/issues/59)
<a name="2.0.0"></a>
# [2.0.0](https://github.com/smooth-code/loadable-components/compare/v1.4.0...v2.0.0) (2018-05-10)
### Bug Fixes
* do not propagate componentId ([fff1248](https://github.com/smooth-code/loadable-components/commit/fff1248))
### Code Refactoring
* remove HMR relative code ([ef0817c](https://github.com/smooth-code/loadable-components/commit/ef0817c))
### BREAKING CHANGES
* `setConfig` is no longer available.
<a name="1.4.0"></a>
# [1.4.0](https://github.com/smooth-code/loadable-components/compare/v1.3.0...v1.4.0) (2018-04-18)
### Bug Fixes
* set correct loading state if component is already loaded. (#64) ([9b0cae2](https://github.com/smooth-code/loadable-components/commit/9b0cae2))
### Features
* support React.createContext API (#65) ([289ad67](https://github.com/smooth-code/loadable-components/commit/289ad67))
<a name="1.3.0"></a>
# [1.3.0](https://github.com/smooth-code/loadable-components/compare/v1.2.0...v1.3.0) (2018-04-06)
### Bug Fixes
* circular structure in error object (#60) ([96333ca](https://github.com/smooth-code/loadable-components/commit/96333ca))
* React 16.3 compatibility ([abd7963](https://github.com/smooth-code/loadable-components/commit/abd7963)), closes [#57](https://github.com/smooth-code/loadable-components/issues/57)
### Features
* attach static properties on load ([d383fab](https://github.com/smooth-code/loadable-components/commit/d383fab)), closes [#58](https://github.com/smooth-code/loadable-components/issues/58)
<a name="1.2.0"></a>
# [1.2.0](https://github.com/smooth-code/loadable-components/compare/v1.1.1...v1.2.0) (2018-03-25)
### Features
* add Hot Reload support ([c79085e](https://github.com/smooth-code/loadable-components/commit/c79085e))
<a name="1.1.1"></a>
## [1.1.1](https://github.com/smooth-code/loadable-components/compare/v1.1.0...v1.1.1) (2018-02-06)
### Bug Fixes
* **snapshot:** fix snap usage ([3445bea](https://github.com/smooth-code/loadable-components/commit/3445bea)), closes [#40](https://github.com/smooth-code/loadable-components/issues/40)
<a name="1.1.0"></a>
# [1.1.0](https://github.com/smooth-code/loadable-components/compare/v1.0.2...v1.1.0) (2018-02-04)
### Features
* ship a single js file ([99e08c0](https://github.com/smooth-code/loadable-components/commit/99e08c0))
<a name="1.0.2"></a>
## [1.0.2](https://github.com/smooth-code/loadable-components/compare/v1.0.1...v1.0.2) (2018-02-04)
### Bug Fixes
* state could have no children ([a47c410](https://github.com/smooth-code/loadable-components/commit/a47c410)), closes [#36](https://github.com/smooth-code/loadable-components/issues/36)
<a name="1.0.1"></a>
## [1.0.1](https://github.com/smooth-code/loadable-components/compare/v1.0.0...v1.0.1) (2018-02-03)
### Bug Fixes
* fix loadComponents without valid state ([35f81a6](https://github.com/smooth-code/loadable-components/commit/35f81a6)), closes [#34](https://github.com/smooth-code/loadable-components/issues/34)
<a name="1.0.0"></a>
# [1.0.0](https://github.com/smooth-code/loadable-components/compare/v0.4.0...v1.0.0) (2018-02-02)
### Features
* stable version 1 ([601bd34](https://github.com/smooth-code/loadable-components/commit/601bd34))
### BREAKING CHANGES
* loadable-components/babel is now required if you do server side rendering.
* ErrorComponent now receive `ownProps` instead of `props`.
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project author at hey@gregberge.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# How to Contribute
Loadable Components is a small project, it is widely used but has not a lot of contributors. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
## [Code of Conduct](https://github.com/gregberge/loadable-components/blob/master/CODE_OF_CONDUCT.md)
We expect project participants to adhere to our Code of Conduct. Please read [the full text](https://github.com/gregberge/loadable-components/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## Open Development
All work on Loadable Components happens directly on [GitHub](/). Both core team members and external contributors send pull requests which go through the same review process.
### Workflow and Pull Requests
_Before_ submitting a pull request, please make sure the following is done…
1. Fork the repo and create your branch from `master`. A guide on how to fork a repository: https://help.github.com/articles/fork-a-repo/
Open terminal (e.g. Terminal, iTerm, Git Bash or Git Shell) and type:
```sh-session
$ git clone https://github.com/<your_username>/loadable-components
$ cd loadable-components
$ git checkout -b my_branch
```
Note: Replace `<your_username>` with your GitHub username
2. Loadable Components uses [Yarn](https://code.fb.com/web/yarn-a-new-package-manager-for-javascript/) for running development scripts. If you haven't already done so, please [install yarn](https://yarnpkg.com/en/docs/install).
3. Run `yarn install`. On Windows: To install [Yarn](https://yarnpkg.com/en/docs/install#windows-tab) on Windows you may need to download either node.js or Chocolatey<br />
```sh
yarn install
```
To check your version of Yarn and ensure it's installed you can type:
```sh
yarn --version
```
4. Run `yarn build` to bootstrap packages.
```sh
yarn build
```
5. If you've added code that should be tested, add tests. You can use watch mode that continuously transforms changed files to make your life easier.
```sh
# in the background
yarn run dev
```
6. If you've changed APIs, update the documentation.
7. Ensure the linting is good via `yarn lint`.
```sh-session
$ yarn lint
```
8. Ensure the test suite passes via `yarn test`.
```sh-session
$ yarn test:prepare # build example and generate fixtures before running tests
$ yarn test
```
#### Testing with your own project
You can use `yarn run release-to-git` to create releases as tags on github. This requires that:
- Your git remote (where you want to publish the tags) is `origin`
- Your commit messages follow the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. For example: `feat: add timeout option`.
## Bugs
### Where to Find Known Issues
We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new issue, try to make sure your problem doesn't already exist.
### Reporting New Issues
The best way to get your bug fixed is to provide a reduced test case. Please provide a public repository with a runnable example.
## Code Conventions
Please follow the `.prettierrc` in the project.
## License
By contributing to Loadable Components, you agree that your contributions will be licensed under its MIT license.
================================================
FILE: LICENSE
================================================
Copyright 2019 Greg Bergé
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
<h1 align="center">
<img src="https://raw.githubusercontent.com/gregberge/loadable-components/master/resources/loadable-components.png" alt="loadable-components" title="loadable-components" width="300">
</h1>
<p align="center" style="font-size: 1.2rem;">React code splitting made easy. Reduce your bundle size without stress ✂️✨.</p>
[](https://github.com/gregberge/loadable-components/blob/master/LICENSE)
[](https://www.npmjs.com/package/@loadable/component)
[](https://www.npmjs.com/package/@loadable/component)
[](https://travis-ci.org/gregberge/loadable-components)
[](https://david-dm.org/gregberge/loadable-components?path=packages/component)
[](https://david-dm.org/gregberge/loadable-components?type=dev)
[](https://unpkg.com/@loadable/component/dist/loadable.min.js)
```bash
npm install @loadable/component
```
## [Docs](https://loadable-components.com)
**See the documentation at [loadable-components.com](https://loadable-components.com)** for more information about using Loadable Components!
Quicklinks to some of the most-visited pages:
- [**Getting started**](https://loadable-components.com/docs/getting-started/)
- [Comparison with React.lazy](https://loadable-components.com/docs/loadable-vs-react-lazy/)
- [Server Side Rendering](https://loadable-components.com/docs/server-side-rendering/)
## Example
```js
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
)
}
```
## Supporting Loadable Components
Loadable Components is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:
- [Sponsor me on GitHub ❤️](https://github.com/sponsors/gregberge).
## License
Licensed under the MIT License, Copyright © 2017-present Greg Bergé.
See [LICENSE](./LICENSE) for more information.
================================================
FILE: babel.config.js
================================================
function getTargets() {
if (process.env.BUILD_TARGET === 'node') {
return { node: '8' }
}
return undefined
}
function getModules() {
if (process.env.MODULE_TARGET === 'cjs') {
return 'cjs'
}
if (process.env.MODULE_TARGET === 'esm') {
return false
}
return 'auto'
}
module.exports = {
presets: [
['@babel/preset-react', { useBuiltIns: true }],
[
'@babel/preset-env',
{ loose: true, targets: getTargets(), modules: getModules() },
],
],
plugins: ['@babel/plugin-proposal-class-properties'],
}
================================================
FILE: examples/client-side/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off"
}
}
================================================
FILE: examples/client-side/README.md
================================================
# Get the client-side example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/client-side
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run
```bash
yarn dev
# or
yarn start
```
================================================
FILE: examples/client-side/babel.config.js
================================================
module.exports = {
presets: ['@babel/preset-react'],
plugins: ['@babel/plugin-syntax-dynamic-import'],
}
================================================
FILE: examples/client-side/package.json
================================================
{
"private": true,
"scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dev-server"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-react": "^7.6.3",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"@loadable/component": "^5.10.3",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/client-side/src/A.js
================================================
export default () => 'A'
================================================
FILE: examples/client-side/src/B.js
================================================
export default () => 'B'
================================================
FILE: examples/client-side/src/Hello.js
================================================
export default () => 'Hello'
================================================
FILE: examples/client-side/src/index.js
================================================
import React, { useState } from 'react'
import { render } from 'react-dom'
import loadable from '@loadable/component'
const Hello = loadable(() => import('./Hello'))
const Dynamic = loadable(p => import(`./${p.name}`), {
cacheKey: p => p.name,
})
const Moment = loadable.lib(() => import('moment'))
function App() {
const [name, setName] = useState(null)
return (
<div>
<button type="button" onClick={() => setName('A')}>
Go to A
</button>
<button type="button" onClick={() => setName('B')}>
Go to B
</button>
{name && <Dynamic name={name} />}
<Hello />
<Moment>{({ default: moment }) => moment().format('HH:mm')}</Moment>
</div>
)
}
const root = document.createElement('div')
document.body.append(root)
render(<App />, root)
================================================
FILE: examples/client-side/webpack.config.js
================================================
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [new HtmlWebpackPlugin()],
}
================================================
FILE: examples/razzle/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/razzle/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/razzle/README.md
================================================
# Get the razzle example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/razzle
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run locally or build and serve
```bash
yarn dev
# or
yarn build
yarn start:prod
```
================================================
FILE: examples/razzle/package.json
================================================
{
"private": true,
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"@babel/runtime": "^7.1.5",
"@loadable/component": "^5.10.2",
"@loadable/server": "^5.10.2",
"@reach/router": "^1.2.1",
"babel-jest": "^24.8.0",
"common-tags": "^1.8.0",
"express": "^4.16.2",
"normalize.css": "^8.0.1",
"razzle": "^3.0.0-alpha.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"@babel/template": "^7.4.4",
"@loadable/babel-plugin": "^5.10.0",
"@loadable/webpack-plugin": "^5.7.1",
"check-prop-types": "^1.1.2"
}
}
================================================
FILE: examples/razzle/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/razzle/razzle.config.js
================================================
/* eslint-disable prefer-object-spread */
const path = require('path')
const LoadableWebpackPlugin = require('@loadable/webpack-plugin')
const LoadableBabelPlugin = require('@loadable/babel-plugin')
const babelPresetRazzle = require('razzle/babel')
module.exports = {
modify: (config, { dev, target }) => {
const appConfig = Object.assign({}, config)
if (target === 'web') {
const filename = path.resolve(__dirname, 'build')
appConfig.plugins = [
...appConfig.plugins,
new LoadableWebpackPlugin({
outputAsset: false,
writeToDisk: { filename },
}),
]
appConfig.output.filename = dev
? 'static/js/[name].js'
: 'static/js/[name].[chunkhash:8].js'
appConfig.node = { fs: 'empty' } // fix "Cannot find module 'fs'" problem.
appConfig.optimization = Object.assign({}, appConfig.optimization, {
runtimeChunk: true,
splitChunks: {
chunks: 'all',
name: dev,
},
})
}
return appConfig
},
modifyBabelOptions: () => ({
babelrc: false,
presets: [babelPresetRazzle],
plugins: [LoadableBabelPlugin],
}),
}
================================================
FILE: examples/razzle/src/About/index.js
================================================
import React from 'react'
const About = () => <div>About page</div>
export default About
================================================
FILE: examples/razzle/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
================================================
FILE: examples/razzle/src/App.js
================================================
import React from 'react'
import { Router, Link } from '@reach/router'
import loadable from '@loadable/component'
import './App.css'
const NotFound = loadable(() => import('./NotFound'))
const Home = loadable(() => import('./Home'))
const About = loadable(() => import('./About'))
const Contact = loadable(() => import('./Contact'))
const App = () => (
<>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
<Router>
<NotFound default fallback={<div>loading...</div>} />
<Home path="/" fallback={<div>loading...</div>} />
<About path="/about" fallback={<div>loading...</div>} />
<Contact path="/contact" fallback={<div>loading...</div>} />
</Router>
</>
)
export default App
================================================
FILE: examples/razzle/src/Contact/index.js
================================================
import React from 'react'
const Contact = () => <div>Contact page</div>
export default Contact
================================================
FILE: examples/razzle/src/Home/Home.css
================================================
.Home {
text-align: center;
}
.Home-logo {
animation: Home-logo-spin infinite 20s linear;
height: 80px;
}
.Home-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.Home-intro {
font-size: large;
}
.Home-resources {
list-style: none;
}
.Home-resources > li {
display: inline-block;
padding: 1rem;
}
@keyframes Home-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
================================================
FILE: examples/razzle/src/Home/Intro.js
================================================
/* eslint-disable react/jsx-one-expression-per-line */
import React from 'react'
const Intro = () => (
<p className="Home-intro">
To get started, edit <code>src/App.js</code> or <code>src/Home.js</code> and
save to reload.
</p>
)
export default Intro
================================================
FILE: examples/razzle/src/Home/Logo.js
================================================
import React from 'react'
import logo from './react.svg'
const Logo = () => <img src={logo} className="Home-logo" alt="logo" />
export default Logo
================================================
FILE: examples/razzle/src/Home/Welcome.js
================================================
import React from 'react'
const Welcome = () => <h2>Welcome to Razzle</h2>
export default Welcome
================================================
FILE: examples/razzle/src/Home/index.js
================================================
import React from 'react'
import loadable from '@loadable/component'
import './Home.css'
const Intro = loadable(() => import('./Intro'))
const Welcome = loadable(() => import('./Welcome'))
const Logo = loadable(() => import('./Logo'))
const Home = () => (
<div className="Home">
<div className="Home-header">
<Logo />
<Welcome />
</div>
<Intro />
<ul className="Home-resources">
<li>
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
</li>
<li>
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
</li>
<li>
<a href="https://palmer.chat">Community Slack</a>
</li>
</ul>
</div>
)
export default Home
================================================
FILE: examples/razzle/src/NotFound/index.js
================================================
import React from 'react'
const NotFound = () => <div>Page could not be found</div>
export default NotFound
================================================
FILE: examples/razzle/src/client.js
================================================
import 'normalize.css'
import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'
const root = document.getElementById('root')
loadableReady(() => {
hydrate(<App />, root)
})
if (module.hot) {
module.hot.accept()
}
================================================
FILE: examples/razzle/src/index.js
================================================
/* eslint-disable no-console, global-require */
import http from 'http'
let app = require('./server').default
const server = http.createServer(app)
let currentApp = app
server.listen(process.env.PORT || 3000, error => {
if (error) {
console.log(error)
}
console.log('🚀 started')
})
if (module.hot) {
console.log('✅ Server-side HMR Enabled!')
module.hot.accept('./server', () => {
console.log('🔁 HMR Reloading `./server`...')
try {
app = require('./server').default
server.removeListener('request', currentApp)
server.on('request', app)
currentApp = app
} catch (error) {
console.error(error)
}
})
}
================================================
FILE: examples/razzle/src/server.js
================================================
import path from 'path'
import React from 'react'
import express from 'express'
import { html as htmlTemplate, oneLineTrim } from 'common-tags'
import { renderToString } from 'react-dom/server'
import { ServerLocation } from '@reach/router'
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
import App from './App'
const server = express()
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const extractor = new ChunkExtractor({
statsFile: path.resolve('build/loadable-stats.json'),
entrypoints: ['client'],
})
const html = renderToString(
<ChunkExtractorManager extractor={extractor}>
<ServerLocation url={req.url}>
<App />
</ServerLocation>
</ChunkExtractorManager>,
)
res.status(200).send(
oneLineTrim(htmlTemplate`
<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${extractor.getLinkTags()}
${extractor.getStyleTags()}
</head>
<body>
<div id="root">${html}</div>
${extractor.getScriptTags()}
</body>
</html>
`),
)
})
export default server
================================================
FILE: examples/server-side-rendering/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/server-side-rendering/.gitignore
================================================
public/dist
================================================
FILE: examples/server-side-rendering/README.md
================================================
# Get the SSR example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. Install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
3. Install libary dependencies and build library
```bash
yarn
yarn build
```
4. Move into example directory
```bash
cd ./loadable-components/examples/server-side-rendering
```
5. Install project dependencies
```bash
yarn
```
5. Run locally or build and serve
```bash
yarn dev
# Or
yarn build
yarn start
```
🍻
================================================
FILE: examples/server-side-rendering/babel.config.js
================================================
function isWebTarget(caller) {
return Boolean(caller && caller.target === 'web')
}
function isWebpack(caller) {
return Boolean(caller && caller.name === 'babel-loader')
}
module.exports = api => {
const web = api.caller(isWebTarget)
const webpack = api.caller(isWebpack)
return {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'entry' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : undefined,
modules: webpack ? false : 'commonjs',
},
],
],
plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
}
}
================================================
FILE: examples/server-side-rendering/nodemon.json
================================================
{
"ignore": ["client", "public"],
"execMap": {
"js": "babel-node"
}
}
================================================
FILE: examples/server-side-rendering/package.json
================================================
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "rm -Rf ./public && NODE_ENV=production yarn build:webpack && yarn build:lib",
"build:webpack": "webpack",
"build:lib": "babel -d lib src",
"start": "NODE_ENV=production node lib/server/main.js",
"link:all": "yarn link @loadable/babel-plugin && yarn link @loadable/server && yarn link @loadable/component"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@loadable/babel-plugin": "file:./../../packages/babel-plugin",
"@loadable/component": "file:./../../packages/component",
"@loadable/server": "file:./../../packages/server",
"@loadable/webpack-plugin": "file:./../../packages/webpack-plugin",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.19.0",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"core-js": "^3.0.1",
"express": "^4.16.4",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/server-side-rendering/src/client/App.js
================================================
import React from 'react'
// eslint-disable-next-line import/no-extraneous-dependencies
import loadable from '@loadable/component'
import './main.css'
const A = loadable(() => import('./letters/A'))
const B = loadable(() => import('./letters/B'))
const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
const E = loadable(() => import('./letters/E?param'), { ssr: false })
const X = loadable(props => import(`./letters/${props.letter}`))
const Sub = loadable(props => import(`./letters/${props.letter}/file`))
const RootSub = loadable(props => import(`./${props.letter}/file`))
// Load the 'G' component twice: once in SSR and once fully client-side
const GClient = loadable(() => import('./letters/G'), {
ssr: false,
fallback: <span className="loading-state">ssr: false - Loading...</span>,
})
const GServer = loadable(() => import('./letters/G'), {
ssr: true,
fallback: <span className="loading-state">ssr: true - Loading...</span>,
})
// We keep some references to prevent uglify remove
A.C = C
A.D = D
const Moment = loadable.lib(() => import('moment'), {
resolveComponent: moment => moment.default || moment,
})
const App = () => (
<div>
<A />
<br />
<B />
<br />
<X letter="A" />
<br />
<X letter="F" />
<br />
<E />
<br />
<GClient prefix="ssr: false" />
<br />
<GServer prefix="ssr: true" />
<br />
<Sub letter="Z" />
<br />
<RootSub letter="Y" />
<br />
<Moment>{moment => moment().format('HH:mm')}</Moment>
</div>
)
export default App
================================================
FILE: examples/server-side-rendering/src/client/Y/file.js
================================================
export default () => 'Y'
================================================
FILE: examples/server-side-rendering/src/client/letters/A.css
================================================
/* A CSS */
body {
background: pink;
}
================================================
FILE: examples/server-side-rendering/src/client/letters/A.js
================================================
// We simulate that "moment" is called in "A" and "B"
import moment from 'moment'
import './A.css'
const A = () => 'A'
// We keep a reference to prevent uglify remove
A.moment = moment
export default A
================================================
FILE: examples/server-side-rendering/src/client/letters/B.js
================================================
// We simulate that "moment" is called in "A" and "B"
import moment from 'moment'
const B = () => 'B'
// We keep a reference to prevent uglify remove
B.moment = moment
export default B
================================================
FILE: examples/server-side-rendering/src/client/letters/C.js
================================================
export default () => 'C'
================================================
FILE: examples/server-side-rendering/src/client/letters/D.js
================================================
export default () => 'D'
================================================
FILE: examples/server-side-rendering/src/client/letters/E.js
================================================
export default () => 'E'
================================================
FILE: examples/server-side-rendering/src/client/letters/F.js
================================================
export default () => 'F'
================================================
FILE: examples/server-side-rendering/src/client/letters/G.js
================================================
import React from 'react'
const G = ({ prefix }) => <span className="my-cool-class">{prefix} - G</span>
export default G
================================================
FILE: examples/server-side-rendering/src/client/letters/Z/file.js
================================================
export default () => 'Z'
================================================
FILE: examples/server-side-rendering/src/client/main-node.js
================================================
export { default } from './App'
export const hello = 'hello'
================================================
FILE: examples/server-side-rendering/src/client/main-web.js
================================================
import 'core-js'
import React from 'react'
import { hydrate } from 'react-dom'
// eslint-disable-next-line import/no-extraneous-dependencies
import { loadableReady } from '@loadable/component'
import App from './App'
loadableReady(() => {
const root = document.getElementById('main')
hydrate(<App />, root)
})
================================================
FILE: examples/server-side-rendering/src/client/main.css
================================================
/* Main CSS */
h1 {
color: cyan;
}
================================================
FILE: examples/server-side-rendering/src/server/main.js
================================================
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const app = express()
app.use(express.static(path.join(__dirname, '../../public')))
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require, import/no-extraneous-dependencies */
const { default: webpackConfig } = require('../../webpack.config.babel')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
/* eslint-enable global-require, import/no-extraneous-dependencies */
const compiler = webpack(webpackConfig)
app.use(
webpackDevMiddleware(compiler, {
logLevel: 'silent',
publicPath: '/dist/web',
writeToDisk(filePath) {
return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
},
}),
)
}
const nodeStats = path.resolve(
__dirname,
'../../public/dist/node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
${webExtractor.getScriptTags()}
</body>
</html>
`)
})
// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))
================================================
FILE: examples/server-side-rendering/webpack.config.babel.js
================================================
import path from 'path'
import nodeExternals from 'webpack-node-externals'
import LoadablePlugin from '@loadable/webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const DIST_PATH = path.resolve(__dirname, 'public/dist')
const production = process.env.NODE_ENV === 'production'
const development =
!process.env.NODE_ENV || process.env.NODE_ENV === 'development'
const getConfig = target => ({
name: target,
mode: development ? 'development' : 'production',
target,
entry: `./src/client/main-${target}.js`,
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
caller: { target },
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
optimization: {
moduleIds: 'named',
chunkIds: 'named',
},
externals:
target === 'node' ? ['@loadable/component', nodeExternals()] : undefined,
output: {
path: path.join(DIST_PATH, target),
// filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
filename: production ? '[name].js' : '[name].js',
publicPath: `/dist/${target}/`,
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
},
plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
})
export default [getConfig('web'), getConfig('node')]
================================================
FILE: examples/server-side-rendering-async-node/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/server-side-rendering-async-node/.gitignore
================================================
public/dist
================================================
FILE: examples/server-side-rendering-async-node/README.md
================================================
> WORK IN PROGRESS
# Get the SSR example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/server-side-rendering-async-node
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run locally or build and serve
```bash
yarn dev
# Or
yarn build
yarn start
```
🍻
================================================
FILE: examples/server-side-rendering-async-node/babel.config.js
================================================
function isWebTarget(caller) {
return Boolean(caller && caller.target === 'web')
}
function isWebpack(caller) {
return Boolean(caller && caller.name === 'babel-loader')
}
module.exports = api => {
const web = api.caller(isWebTarget)
const webpack = api.caller(isWebpack)
return {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'entry' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : undefined,
modules: webpack ? false : 'commonjs',
},
],
],
plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
}
}
================================================
FILE: examples/server-side-rendering-async-node/nodemon.json
================================================
{
"ignore": ["client", "public"],
"execMap": {
"js": "babel-node"
}
}
================================================
FILE: examples/server-side-rendering-async-node/package.json
================================================
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
"build:webpack": "webpack",
"build:lib": "babel -d lib src",
"start": "NODE_ENV=production node lib/server/main.js"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@loadable/babel-plugin": "^5.10.3",
"@loadable/component": "^5.10.3",
"@loadable/server": "^5.10.3",
"@loadable/webpack-plugin": "^5.7.1",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.19.0",
"webpack": "^5.0.0-beta.16",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"core-js": "^3.0.1",
"express": "^4.16.4",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/server-side-rendering-async-node/src/client/App.js
================================================
import React from 'react'
// eslint-disable-next-line import/no-extraneous-dependencies
import loadable from '@loadable/component'
import './main.css'
const A = loadable(() => import('./letters/A'))
const B = loadable(() => import('./letters/B'))
const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
const E = loadable(() => import('./letters/E'), { ssr: false })
const X = loadable(props => import(`./letters/${props.letter}`))
const Sub = loadable(props => import(`./letters/${props.letter}/file`))
const RootSub = loadable(props => import(`./${props.letter}/file`))
// Load the 'G' component twice: once in SSR and once fully client-side
const GClient = loadable(() => import('./letters/G'), {
ssr: false,
fallback: <span className="loading-state">ssr: false - Loading...</span>,
})
const GServer = loadable(() => import('./letters/G'), {
ssr: true,
fallback: <span className="loading-state">ssr: true - Loading...</span>,
})
// We keep some references to prevent uglify remove
A.C = C
A.D = D
const Moment = loadable.lib(() => import('moment'))
const App = () => (
<div>
<A />
<br />
<B />
<br />
<X letter="A" />
<br />
<X letter="F" />
<br />
<E />
<br />
<GClient prefix="ssr: false" />
<br />
<GServer prefix="ssr: true" />
<br />
<Sub letter="Z" />
<br />
<RootSub letter="Y" />
<br />
<Moment>{moment => moment().format('HH:mm')}</Moment>
</div>
)
export default App
================================================
FILE: examples/server-side-rendering-async-node/src/client/Y/file.js
================================================
export default () => 'Y'
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/A.css
================================================
/* A CSS */
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/A.js
================================================
// We simulate that "moment" is called in "A" and "B"
import moment from 'moment'
import './A.css'
const A = () => 'A'
// We keep a reference to prevent uglify remove
A.moment = moment
export default A
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/B.js
================================================
// We simulate that "moment" is called in "A" and "B"
import moment from 'moment'
const B = () => 'B'
// We keep a reference to prevent uglify remove
B.moment = moment
export default B
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/C.js
================================================
export default () => 'C'
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/D.js
================================================
export default () => 'D'
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/E.js
================================================
export default () => 'E'
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/F.js
================================================
export default () => 'F'
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/G.js
================================================
import React from 'react'
const G = ({ prefix }) => <span className="my-cool-class">{prefix} - G</span>
export default G
================================================
FILE: examples/server-side-rendering-async-node/src/client/letters/Z/file.js
================================================
export default () => 'Z'
================================================
FILE: examples/server-side-rendering-async-node/src/client/main-async-node.js
================================================
export { default } from './App'
================================================
FILE: examples/server-side-rendering-async-node/src/client/main-web.js
================================================
import 'core-js'
import React from 'react'
import { hydrate } from 'react-dom'
// eslint-disable-next-line import/no-extraneous-dependencies
import { loadableReady } from '@loadable/component'
import App from './App'
loadableReady(() => {
const root = document.getElementById('main')
hydrate(<App />, root)
})
================================================
FILE: examples/server-side-rendering-async-node/src/client/main.css
================================================
/* Main CSS */
================================================
FILE: examples/server-side-rendering-async-node/src/server/main.js
================================================
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const app = express()
app.use(express.static(path.join(__dirname, '../../public')))
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require, import/no-extraneous-dependencies */
const { default: webpackConfig } = require('../../webpack.config.babel')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
/* eslint-enable global-require, import/no-extraneous-dependencies */
const compiler = webpack(webpackConfig)
app.use(
webpackDevMiddleware(compiler, {
logLevel: 'silent',
publicPath: '/dist/web',
writeToDisk(filePath) {
return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
},
}),
)
}
const nodeStats = path.resolve(
__dirname,
'../../public/dist/async-node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
${webExtractor.getScriptTags()}
</body>
</html>
`)
})
// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))
================================================
FILE: examples/server-side-rendering-async-node/webpack.config.babel.js
================================================
import path from 'path'
import nodeExternals from 'webpack-node-externals'
import LoadablePlugin from '@loadable/webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const DIST_PATH = path.resolve(__dirname, 'public/dist')
const production = process.env.NODE_ENV === 'production'
const development =
!process.env.NODE_ENV || process.env.NODE_ENV === 'development'
const getConfig = target => ({
name: target,
mode: development ? 'development' : 'production',
target,
entry: `./src/client/main-${target}.js`,
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
caller: { target },
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
externals:
target === 'async-node'
? ['@loadable/component', nodeExternals()]
: undefined,
output: {
path: path.join(DIST_PATH, target),
filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
publicPath: `/dist/${target}/`,
libraryTarget: target === 'async-node' ? 'commonjs2' : undefined,
},
plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
})
export default [getConfig('web'), getConfig('async-node')]
================================================
FILE: examples/suspense/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off"
}
}
================================================
FILE: examples/suspense/README.md
================================================
# Get the suspense example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/suspense
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run
```bash
yarn dev
# or
yarn start
```
================================================
FILE: examples/suspense/babel.config.js
================================================
module.exports = {
presets: ['@babel/preset-react'],
plugins: ['@babel/plugin-syntax-dynamic-import'],
}
================================================
FILE: examples/suspense/package.json
================================================
{
"private": true,
"scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dev-server"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-react": "^7.6.3",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
},
"dependencies": {
"@loadable/component": "^5.10.3",
"moment": "^2.24.0",
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}
================================================
FILE: examples/suspense/src/Hello.js
================================================
export default () => 'Hello'
================================================
FILE: examples/suspense/src/index.js
================================================
import React, { Suspense } from 'react'
import { render } from 'react-dom'
import { lazy } from '@loadable/component'
const Hello = lazy(() => import('./Hello'))
const Moment = lazy.lib(() => import('moment'))
const App = () => (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Hello />
<Moment>{({ default: moment }) => moment().format('HH:mm')}</Moment>
</Suspense>
</div>
)
const root = document.createElement('div')
document.body.append(root)
render(<App />, root)
================================================
FILE: examples/suspense/webpack.config.js
================================================
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [new HtmlWebpackPlugin()],
}
================================================
FILE: examples/typescript/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/typescript/.gitignore
================================================
public/dist
================================================
FILE: examples/typescript/README.md
================================================
# Get the SSR example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/server-side-rendering
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run locally or build and serve
```bash
yarn dev
# Or
yarn build
yarn start
```
🍻
================================================
FILE: examples/typescript/babel.config.js
================================================
function isWebTarget(caller) {
return Boolean(caller && caller.target === 'web')
}
function isWebpack(caller) {
return Boolean(caller && caller.name === 'babel-loader')
}
module.exports = api => {
const web = api.caller(isWebTarget)
const webpack = api.caller(isWebpack)
return {
presets: [
'@babel/preset-typescript',
'@babel/preset-react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'entry' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : undefined,
modules: webpack ? false : 'commonjs',
},
],
],
plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
}
}
================================================
FILE: examples/typescript/nodemon.json
================================================
{
"ignore": ["client", "public"],
"execMap": {
"js": "babel-node"
}
}
================================================
FILE: examples/typescript/package.json
================================================
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
"build:dev": "NODE_ENV=development yarn build:webpack && yarn build:lib",
"build:webpack": "webpack",
"build:lib": "babel -d lib src",
"start": "NODE_ENV=production node lib/server/main.js",
"start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.12.1",
"@types/loadable__component": "^5.13.1",
"@types/react": "^16.9.53",
"@types/react-router-dom": "^5.1.6",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.19.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"typescript": "^4.0.3",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"@babel/register": "^7.12.1",
"@loadable/babel-plugin": "file:./../../packages/babel-plugin",
"@loadable/component": "file:./../../packages/component",
"@loadable/server": "file:./../../packages/server",
"@loadable/webpack-plugin": "file:./../../packages/webpack-plugin",
"core-js": "^3.0.1",
"express": "^4.16.4",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/typescript/src/client/App.tsx
================================================
import * as React from 'react'
import loadable from '@loadable/component'
import {StaticRouter, Switch, Route} from 'react-router-dom';
const X = loadable(() => import(`./Page`))
const Y = loadable(() => import(`./PageWithParam`))
const App = () => (
<div>
<p>
Components loaded directly:
<X/>
<Y x={42}/>
</p>
<hr/>
<div>
<StaticRouter>
<Switch>
<Route component={X}/>
<Route path="route-accepts-any" component={Y}/>
<Route
path="otherPath"
render={routeProperties =>
// @ts-expect-error routeProperties do not exists on X - it accepts no props at all
<X {...routeProperties} />
}
/>
</Switch>
<hr/>
<Switch>
<Route component={Y}/>
</Switch>
</StaticRouter>
</div>
</div>
)
export default App
================================================
FILE: examples/typescript/src/client/Page.tsx
================================================
import * as React from 'react';
const Page:React.FC<{}> = () => (<span>I am lazy page</span>);
export default Page;
================================================
FILE: examples/typescript/src/client/PageWithParam.tsx
================================================
import * as React from 'react';
const PageWithParam:React.FC<{x: number}> = ({x}) => (<span>I am lazy page2 -{x||"missed prop"}-</span>);
export default PageWithParam;
================================================
FILE: examples/typescript/src/client/main-node.js
================================================
export { default } from './App.tsx'
================================================
FILE: examples/typescript/src/client/main-web.js
================================================
import 'core-js'
import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App.tsx'
console.log('waiting for application ready...')
loadableReady(() => {
console.log('application is ready...')
const root = document.getElementById('main')
hydrate(<App />, root)
})
================================================
FILE: examples/typescript/src/server/main.js
================================================
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const app = express()
// https://github.com/gregberge/loadable-components/issues/634
// app.use('*/runtime~main.js', async (req, res, next) => {
// console.log('delaying runtime chunk');
// await new Promise(resolve => setTimeout(resolve, 2000));
// next();
// });
app.use(express.static(path.join(__dirname, '../../public')))
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require, import/no-extraneous-dependencies */
const { default: webpackConfig } = require('../../webpack.config.babel')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
/* eslint-enable global-require, import/no-extraneous-dependencies */
const compiler = webpack(webpackConfig)
app.use(
webpackDevMiddleware(compiler, {
logLevel: 'silent',
publicPath: '/dist/web',
writeToDisk(filePath) {
return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
},
}),
)
}
const nodeStats = path.resolve(
__dirname,
'../../public/dist/node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
<script>console.log('html is loaded')</script>
${webExtractor.getScriptTags()}
<script>console.log('html is ready')</script>
</body>
</html>
`)
})
// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))
================================================
FILE: examples/typescript/tsconfig.json
================================================
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true,
/* Disallow inconsistently-cased references to the same file. */
"jsx": "react"
}
}
================================================
FILE: examples/typescript/webpack.config.babel.js
================================================
import path from 'path'
import nodeExternals from 'webpack-node-externals'
import LoadablePlugin from '@loadable/webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const DIST_PATH = path.resolve(__dirname, 'public/dist')
const production = process.env.NODE_ENV === 'production'
const development = !production
const getConfig = target => ({
name: target,
mode: development ? 'development' : 'production',
target,
entry: `./src/client/main-${target}.js`,
module: {
rules: [
{
test: /\.([jt])sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
caller: { target },
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
externals:
target === 'node' ? ['@loadable/component', nodeExternals()] : undefined,
optimization: {
runtimeChunk: target !== 'node',
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.css'],
},
output: {
path: path.join(DIST_PATH, target),
filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
publicPath: `/dist/${target}/`,
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
},
plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
})
export default [getConfig('web'), getConfig('node')]
================================================
FILE: examples/webpack/README.md
================================================
these examples are also **tests**
================================================
FILE: examples/webpack/webpack4/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/webpack/webpack4/.gitignore
================================================
public/dist
================================================
FILE: examples/webpack/webpack4/README.md
================================================
# Get the SSR example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/server-side-rendering
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run locally or build and serve
```bash
yarn dev
# Or
yarn build
yarn start
```
🍻
================================================
FILE: examples/webpack/webpack4/babel.config.js
================================================
function isWebTarget(caller) {
return Boolean(caller && caller.target === 'web')
}
function isWebpack(caller) {
return Boolean(caller && caller.name === 'babel-loader')
}
module.exports = api => {
const web = api.caller(isWebTarget)
const webpack = api.caller(isWebpack)
return {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'entry' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : undefined,
modules: webpack ? false : 'commonjs',
},
],
],
plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
}
}
================================================
FILE: examples/webpack/webpack4/nodemon.json
================================================
{
"ignore": ["client", "public"],
"execMap": {
"js": "babel-node"
}
}
================================================
FILE: examples/webpack/webpack4/package.json
================================================
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
"build:dev": "NODE_ENV=development yarn build:webpack && yarn build:lib",
"build:webpack": "webpack",
"build:lib": "babel -d lib src",
"start": "NODE_ENV=production node lib/server/main.js",
"start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js",
"update": "rm ./node_modules/.yarn-integrity && yarn"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.19.0",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"@babel/register": "^7.12.1",
"@loadable/babel-plugin": "file:./../../../packages/babel-plugin",
"@loadable/component": "file:./../../../packages/component",
"@loadable/server": "file:./../../../packages/server",
"@loadable/webpack-plugin": "file:./../../../packages/webpack-plugin",
"core-js": "^3.0.1",
"express": "^4.16.4",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/webpack/webpack4/src/client/App.js
================================================
import React from 'react'
import loadable from '@loadable/component'
const X = loadable(props => import(`./letters/${props.letter}`))
const ClientSideOnly = loadable(props => import(`./letters/${props.letter}`), {
ssr: false,
})
const Moment = loadable.lib(() => import('moment'), {
resolveComponent: moment => moment.default || moment,
})
const App = () => (
<div>
<p>
Lazy load letter A:
<X letter="A" />
</p>
<p>
Lazy load letter B:
<X letter="B" />
</p>
<p>
Lazy load letter <strong>only on Client</strong> C and D:
<ClientSideOnly letter="C" /> +
<ClientSideOnly letter="D" />
</p>
<p>
lazy load momentjs and format date:
<Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
</p>
</div>
)
export default App
================================================
FILE: examples/webpack/webpack4/src/client/letters/A.css
================================================
/* A CSS */
================================================
FILE: examples/webpack/webpack4/src/client/letters/A.js
================================================
import './A.css'
const A = () => 'Lazy-Letter-A'
export default A
================================================
FILE: examples/webpack/webpack4/src/client/letters/B.js
================================================
const B = () => 'Lazy-Letter-B'
export default B
================================================
FILE: examples/webpack/webpack4/src/client/letters/C.js
================================================
const C = () => 'Lazy-Letter-C'
export default C
================================================
FILE: examples/webpack/webpack4/src/client/letters/D.js
================================================
// named as C
const C = () => 'and-D'
export default C
================================================
FILE: examples/webpack/webpack4/src/client/main-node.js
================================================
export { default } from './App'
================================================
FILE: examples/webpack/webpack4/src/client/main-web.js
================================================
import 'core-js'
import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'
console.log('waiting for application ready...')
loadableReady(() => {
console.log('application is ready...')
const root = document.getElementById('main')
hydrate(<App />, root)
})
================================================
FILE: examples/webpack/webpack4/src/server/main.js
================================================
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const app = express()
// https://github.com/gregberge/loadable-components/issues/634
app.use('*/runtime~main*.js', async (req, res, next) => {
console.log('delaying runtime chunk')
await new Promise(resolve => setTimeout(resolve, 2000))
next()
})
app.use('*/letters*.js', async (req, res, next) => {
console.log('delaying letters chunk')
await new Promise(resolve => setTimeout(resolve, 1000))
next()
})
app.use(express.static(path.join(__dirname, '../../public')))
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require, import/no-extraneous-dependencies */
const { default: webpackConfig } = require('../../webpack.config.babel')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
/* eslint-enable global-require, import/no-extraneous-dependencies */
const compiler = webpack(webpackConfig)
app.use(
webpackDevMiddleware(compiler, {
logLevel: 'silent',
publicPath: '/dist/web',
writeToDisk(filePath) {
return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
},
}),
)
}
const nodeStats = path.resolve(
__dirname,
'../../public/dist/node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
<script>console.log('html is loaded')</script>
${webExtractor.getScriptTags()}
<script>console.log('html is ready')</script>
</body>
</html>
`)
})
// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))
================================================
FILE: examples/webpack/webpack4/webpack.config.babel.js
================================================
import path from 'path'
import nodeExternals from 'webpack-node-externals'
import LoadablePlugin from '@loadable/webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const DIST_PATH = path.resolve(__dirname, 'public/dist')
const production = process.env.NODE_ENV === 'production'
const development = !production
const getConfig = target => ({
name: target,
mode: development ? 'development' : 'production',
target,
entry: `./src/client/main-${target}.js`,
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
caller: { target },
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
externals:
target === 'node' ? ['@loadable/component', nodeExternals()] : undefined,
optimization: {
runtimeChunk: target !== 'node',
},
output: {
path: path.join(DIST_PATH, target),
filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
publicPath: `/dist/${target}/`,
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
},
plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
})
export default [getConfig('web'), getConfig('node')]
================================================
FILE: examples/webpack/webpack5/.eslintrc.json
================================================
{
"env": {
"browser": true
},
"rules": {
"import/no-unresolved": "off",
"import/no-extraneous-dependencies": "off"
}
}
================================================
FILE: examples/webpack/webpack5/.gitignore
================================================
public/dist
================================================
FILE: examples/webpack/webpack5/README.md
================================================
# Get the SSR example running
Steps:
1. Download repository
```bash
git clone https://github.com/gregberge/loadable-components.git
```
2. move into example directory
```bash
cd ./loadable-components/examples/server-side-rendering
```
3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
4. install project dependencies
```bash
yarn
```
5. run locally or build and serve
```bash
yarn dev
# Or
yarn build
yarn start
```
🍻
================================================
FILE: examples/webpack/webpack5/babel.config.js
================================================
function isWebTarget(caller) {
return Boolean(caller && caller.target === 'web')
}
function isWebpack(caller) {
return Boolean(caller && caller.name === 'babel-loader')
}
module.exports = api => {
const web = api.caller(isWebTarget)
const webpack = api.caller(isWebpack)
return {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'entry' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : undefined,
modules: webpack ? false : 'commonjs',
},
],
],
plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
}
}
================================================
FILE: examples/webpack/webpack5/nodemon.json
================================================
{
"ignore": ["client", "public"],
"execMap": {
"js": "babel-node"
}
}
================================================
FILE: examples/webpack/webpack5/package.json
================================================
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
"build:dev": "NODE_ENV=development yarn build:webpack && yarn build:lib",
"build:webpack": "webpack",
"build:lib": "babel -d lib src",
"start": "NODE_ENV=production node lib/server/main.js",
"start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js",
"update": "rm ./node_modules/.yarn-integrity && yarn"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"mini-css-extract-plugin": "^1.1.0",
"nodemon": "^1.19.0",
"webpack": "^5.17.0",
"webpack-cli": "^4.1.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"@babel/register": "^7.12.1",
"@loadable/babel-plugin": "file:./../../../packages/babel-plugin",
"@loadable/component": "file:./../../../packages/component",
"@loadable/server": "file:./../../../packages/server",
"@loadable/webpack-plugin": "file:./../../../packages/webpack-plugin",
"core-js": "^3.0.1",
"express": "^4.16.4",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
================================================
FILE: examples/webpack/webpack5/src/client/App.js
================================================
import React from 'react'
import loadable from '@loadable/component'
const X = loadable(props => import(`./letters/${props.letter}`))
const ClientSideOnly = loadable(props => import(`./letters/${props.letter}`), {
ssr: false,
})
const Moment = loadable.lib(() => import('moment'), {
resolveComponent: moment => moment.default || moment,
})
const App = () => (
<div>
<p>
Lazy load letter A:
<X letter="A" />
</p>
<p>
Lazy load letter B:
<X letter="B" />
</p>
<p>
Lazy load letter <strong>only on Client</strong> C and D:
<ClientSideOnly letter="C" /> +
<ClientSideOnly letter="D" />
</p>
<p>
lazy load momentjs and format date:
<Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
</p>
</div>
)
export default App
================================================
FILE: examples/webpack/webpack5/src/client/letters/A.css
================================================
/* A CSS */
================================================
FILE: examples/webpack/webpack5/src/client/letters/A.js
================================================
import './A.css'
const A = () => 'Lazy-Letter-A'
export default A
================================================
FILE: examples/webpack/webpack5/src/client/letters/B.js
================================================
const B = () => 'Lazy-Letter-B'
export default B
================================================
FILE: examples/webpack/webpack5/src/client/letters/C.js
================================================
const C = () => 'Lazy-Letter-C'
export default C
================================================
FILE: examples/webpack/webpack5/src/client/letters/D.js
================================================
// named as C
const C = () => 'and-D'
export default C
================================================
FILE: examples/webpack/webpack5/src/client/main-node.js
================================================
export { default } from './App'
================================================
FILE: examples/webpack/webpack5/src/client/main-web.js
================================================
import 'core-js'
import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'
console.log('waiting for application ready...')
loadableReady(() => {
console.log('application is ready...')
const root = document.getElementById('main')
hydrate(<App />, root)
})
================================================
FILE: examples/webpack/webpack5/src/server/main.js
================================================
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const app = express()
// https://github.com/gregberge/loadable-components/issues/634
// app.use('*/runtime~main.js', async (req, res, next) => {
// console.log('delaying runtime chunk');
// await new Promise(resolve => setTimeout(resolve, 2000));
// next();
// });
app.use(express.static(path.join(__dirname, '../../public')))
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require, import/no-extraneous-dependencies */
const { default: webpackConfig } = require('../../webpack.config.babel')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
/* eslint-enable global-require, import/no-extraneous-dependencies */
const compiler = webpack(webpackConfig)
app.use(
webpackDevMiddleware(compiler, {
logLevel: 'silent',
publicPath: '/dist/web',
writeToDisk(filePath) {
return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
},
}),
)
}
const nodeStats = path.resolve(
__dirname,
'../../public/dist/node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
<script>console.log('html is loaded')</script>
${webExtractor.getScriptTags()}
<script>console.log('html is ready')</script>
</body>
</html>
`)
})
// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))
================================================
FILE: examples/webpack/webpack5/webpack.config.babel.js
================================================
import path from 'path'
import nodeExternals from 'webpack-node-externals'
import LoadablePlugin from '@loadable/webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const DIST_PATH = path.resolve(__dirname, 'public/dist')
const production = process.env.NODE_ENV === 'production'
const development = !production
const getConfig = target => ({
name: target,
mode: development ? 'development' : 'production',
target,
entry: `./src/client/main-${target}.js`,
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
caller: { target },
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
externals:
target === 'node' ? ['@loadable/component', nodeExternals()] : undefined,
optimization: {
// this will lead to runtime error
runtimeChunk: target !== 'node',
},
output: {
path: path.join(DIST_PATH, target),
filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
publicPath: `/dist/${target}/`,
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
},
plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
})
export default [getConfig('web'), getConfig('node')]
================================================
FILE: lerna.json
================================================
{
"lerna": "2.9.0",
"packages": [
"packages/*"
],
"version": "5.16.7",
"npmClient": "yarn",
"useWorkspaces": true
}
================================================
FILE: netlify.toml
================================================
[build]
base = "website"
command = "yarn build"
publish = "website/public"
================================================
FILE: package.json
================================================
{
"name": "loadable-components",
"private": true,
"workspaces": [
"packages/*"
],
"bundlesize": [
{
"path": "./packages/component/dist/loadable.min.js",
"maxSize": "3.5 kB"
},
{
"path": "./packages/component/dist/loadable.esm.js",
"maxSize": "4.5 kB"
}
],
"scripts": {
"build": "lerna run build",
"ci": "yarn build && yarn lint && yarn test:prepare && yarn test --ci",
"dev": "WATCH_MODE=true lerna run build --parallel -- --watch",
"format": "prettier --write \"**/*.{js,json,md}\"",
"lint": "eslint .",
"release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
"release-to-git": "./scripts/git-release.sh",
"test:prepare": "./scripts/prepare.sh",
"test": "jest"
},
"devDependencies": {
"@babel/cli": "^7.7.7",
"@babel/core": "^7.7.7",
"@babel/node": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"@hedgepigdaniel/npm-publish-git": "^0.1.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"conventional-github-releaser": "^3.1.2",
"cross-env": "^6.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.17.0",
"jest": "^24.9.0",
"lerna": "^3.20.2",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"regenerator-runtime": "^0.13.3",
"rollup": "^1.29.0",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.0.1",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^5.1.3",
"shx": "^0.3.2"
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
================================================
FILE: packages/babel-plugin/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [5.16.1](https://github.com/gregberge/loadable-components/compare/v5.16.0...v5.16.1) (2023-07-20)
### Bug Fixes
* correct babel plugin default signature to allow any source of 'loadable' ([#972](https://github.com/gregberge/loadable-components/issues/972)) ([19849b6](https://github.com/gregberge/loadable-components/commit/19849b6ba738fe19c18e61ed3402ee82ba934760)), closes [#971](https://github.com/gregberge/loadable-components/issues/971)
# [5.16.0](https://github.com/gregberge/loadable-components/compare/v5.15.3...v5.16.0) (2023-07-09)
### Features
* Allow additional identifiers to be passed in to the babel plugin ([#966](https://github.com/gregberge/loadable-components/issues/966)) ([e18e37a](https://github.com/gregberge/loadable-components/commit/e18e37afd8b30455d3a786b9b0dae5f3bd0d442b))
## [5.15.3](https://github.com/gregberge/loadable-components/compare/v5.15.2...v5.15.3) (2023-01-28)
**Note:** Version bump only for package @loadable/babel-plugin
## [5.13.2](https://github.com/gregberge/loadable-components/compare/v5.13.1...v5.13.2) (2020-09-14)
**Note:** Version bump only for package @loadable/babel-plugin
# [5.13.0](https://github.com/gregberge/loadable-components/compare/v5.12.0...v5.13.0) (2020-06-29)
### Bug Fixes
* allow webpack cache is ready only for initial chunks, fixes [#558](https://github.com/gregberge/loadable-components/issues/558) ([61f8b75](https://github.com/gregberge/loadable-components/commit/61f8b75b54612368c88807d73abb7dc7add720ad))
* **babel-plugin:** add missing peer dependency ([#524](https://github.com/gregberge/loadable-components/issues/524)) ([03a79b6](https://github.com/gregberge/loadable-components/commit/03a79b66defc78f150436acd6a9d3e029bb1d470))
# [5.12.0](https://github.com/gregberge/loadable-components/compare/v5.11.0...v5.12.0) (2020-01-09)
### Bug Fixes
* apply loadable transformations before any other, fixes [#466](https://github.com/gregberge/loadable-components/issues/466) ([ac5ba45](https://github.com/gregberge/loadable-components/commit/ac5ba45862bad68b971a969e6e8713874add51a6))
# [5.11.0](https://github.com/smooth-code/loadable-components/compare/v5.10.3...v5.11.0) (2019-12-02)
### Bug Fixes
* fix isReady problem ([#445](https://github.com/smooth-code/loadable-components/issues/445)) ([3024348](https://github.com/smooth-code/loadable-components/commit/30243482be917e89515d057e2368e7278e34696c)), closes [#400](https://github.com/smooth-code/loadable-components/issues/400)
## [5.10.3](https://github.com/smooth-code/loadable-components/compare/v5.10.2...v5.10.3) (2019-09-24)
### Bug Fixes
* **babel-plugin:** fix bug when using + concatenation instead of a template literal ([#425](https://github.com/smooth-code/loadable-components/issues/425)) ([d98dd27](https://github.com/smooth-code/loadable-components/commit/d98dd27))
# [5.10.0](https://github.com/smooth-code/loadable-components/compare/v5.9.0...v5.10.0) (2019-05-13)
### Bug Fixes
* fix chunkname mismatch ([#332](https://github.com/smooth-code/loadable-components/issues/332)) ([7ffaa4c](https://github.com/smooth-code/loadable-components/commit/7ffaa4c)), closes [#331](https://github.com/smooth-code/loadable-components/issues/331)
# [5.8.0](https://github.com/smooth-code/loadable-components/compare/v5.7.2...v5.8.0) (2019-04-10)
### Bug Fixes
* **babel-plugin:** Use require.resolve instead of relative path resolution ([#303](https://github.com/smooth-code/loadable-components/issues/303)) ([bad7f1f](https://github.com/smooth-code/loadable-components/commit/bad7f1f))
## [5.7.2](https://github.com/smooth-code/loadable-components/compare/v5.7.1...v5.7.2) (2019-03-20)
### Bug Fixes
* **babel-plugin:** handle "-" at the end of request ([c0f325b](https://github.com/smooth-code/loadable-components/commit/c0f325b))
## [5.7.1](https://github.com/smooth-code/loadable-components/compare/v5.7.0...v5.7.1) (2019-03-19)
### Bug Fixes
* **babel-plugin:** handle special chars in file names ([#279](https://github.com/smooth-code/loadable-components/issues/279)) ([4da39ff](https://github.com/smooth-code/loadable-components/commit/4da39ff))
# [5.7.0](https://github.com/smooth-code/loadable-components/compare/v5.6.1...v5.7.0) (2019-03-14)
### Performance Improvements
* **build:** add build target for Node ([#267](https://github.com/smooth-code/loadable-components/issues/267)) ([97ff6ac](https://github.com/smooth-code/loadable-components/commit/97ff6ac))
# [5.6.0](https://github.com/smooth-code/loadable-components/compare/v5.5.0...v5.6.0) (2019-02-05)
### Bug Fixes
* **server:** fix chunkName resolving ([#219](https://github.com/smooth-code/loadable-components/issues/219)) ([ef11e11](https://github.com/smooth-code/loadable-components/commit/ef11e11))
### Features
* **babel-plugin:** transform code annotated with magic comment ([4f832dc](https://github.com/smooth-code/loadable-components/commit/4f832dc)), closes [#192](https://github.com/smooth-code/loadable-components/issues/192)
# [5.5.0](https://github.com/smooth-code/loadable-components/compare/v5.4.0...v5.5.0) (2019-01-22)
**Note:** Version bump only for package @loadable/babel-plugin
## [5.2.2](https://github.com/smooth-code/loadable-components/compare/v5.2.1...v5.2.2) (2018-12-12)
### Bug Fixes
* **babel-plugin:** fix chunkName with aggressive code splitting ([e974933](https://github.com/smooth-code/loadable-components/commit/e974933)), closes [#182](https://github.com/smooth-code/loadable-components/issues/182)
# [5.0.0](https://github.com/smooth-code/loadable-components/compare/v4.0.5...v5.0.0) (2018-11-10)
### Features
* improve SSR support ([eb1cfe8](https://github.com/smooth-code/loadable-components/commit/eb1cfe8))
### BREAKING CHANGES
* - SSR has been rewritten from scratch, if you use it, please follow the
new guide.
- Prefetch component and prefetch functions have been removed, please
use `webpackPrefetch` instead.
## [4.0.5](https://github.com/smooth-code/loadable-components/compare/v4.0.4...v4.0.5) (2018-11-01)
**Note:** Version bump only for package @loadable/babel-plugin
## [4.0.3](https://github.com/smooth-code/loadable-components/compare/v4.0.2...v4.0.3) (2018-10-31)
### Bug Fixes
* **server:** disable common chunks optim ([78e7b28](https://github.com/smooth-code/loadable-components/commit/78e7b28))
## [4.0.2](https://github.com/smooth-code/loadable-components/compare/v4.0.1...v4.0.2) (2018-10-31)
### Bug Fixes
* **babel-plugin:** transform into friendly chunk name ([54422cb](https://github.com/smooth-code/loadable-components/commit/54422cb))
# [4.0.0](https://github.com/smooth-code/loadable-components/compare/v3.0.2...v4.0.0) (2018-10-30)
### Features
* add new loadable.lib, change API ([94b2e87](https://github.com/smooth-code/loadable-components/commit/94b2e87))
### BREAKING CHANGES
* - `ErrorComponent` is ignored, please use Error Boundaries to handle errors.
- `lazy` is no longer exported
- `LoadingComponent` is replaced by `fallback` option
- `ref` are now forwarded
# [3.0.0](https://github.com/smooth-code/loadable-components/compare/v2.2.3...v3.0.0) (2018-10-29)
### Features
* welcome loadable ([4dffad7](https://github.com/smooth-code/loadable-components/commit/4dffad7))
### BREAKING CHANGES
* API has completely changed, see documentation.
================================================
FILE: packages/babel-plugin/README.md
================================================
# @loadable/babel-plugin
This plugin is required only if you use Server Side Rendering in your application. [See `@loadable/server` for more information](https://loadable-components.com/docs/api-loadable-server/).
## Install
```
npm install --save-dev @loadable/babel-plugin
```
## Documentation
👉 [See full documentation](https://loadable-components.com/)
## License
MIT
================================================
FILE: packages/babel-plugin/package.json
================================================
{
"name": "@loadable/babel-plugin",
"description": "Babel plugin for loadable (required for SSR).",
"version": "5.16.1",
"main": "lib/index.js",
"repository": "git@github.com:gregberge/loadable-components.git",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"loadable"
],
"engines": {
"node": ">=8"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"scripts": {
"prebuild": "shx rm -rf lib",
"build": "BUILD_TARGET=node babel --config-file ../../babel.config.js -d lib --ignore \"**/*.test.js\" src",
"prepublishOnly": "yarn run build"
},
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.7.4"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
}
================================================
FILE: packages/babel-plugin/src/__snapshots__/index.test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`plugin Magic comment should remove only needed comments 1`] = `
"const load =
/* IMPORTANT! */
{
resolved: {},
chunkName() {
return \\"moment\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"moment\\" */
'moment'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"moment\\");
}
return eval('require.resolve')(\\"moment\\");
}
};"
`;
exports[`plugin Magic comment should transpile arrow functions 1`] = `
"const load = {
resolved: {},
chunkName() {
return \\"moment\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"moment\\" */
'moment'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"moment\\");
}
return eval('require.resolve')(\\"moment\\");
}
};"
`;
exports[`plugin Magic comment should transpile function expression 1`] = `
"const load = {
resolved: {},
chunkName() {
return \\"moment\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: function () {
return import(
/* webpackChunkName: \\"moment\\" */
'moment');
},
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"moment\\");
}
return eval('require.resolve')(\\"moment\\");
}
};"
`;
exports[`plugin Magic comment should transpile shortand properties 1`] = `
"const obj = {
load: {
resolved: {},
chunkName() {
return \\"moment\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => {
return import(
/* webpackChunkName: \\"moment\\" */
'moment');
},
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"moment\\");
}
return eval('require.resolve')(\\"moment\\");
}
}
};"
`;
exports[`plugin aggressive import should work with destructuration 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName({
foo
}) {
return \`\${foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: ({
foo
}) => import(
/* webpackChunkName: \\"[request]\\" */
\`./\${foo}\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve({
foo
}) {
if (require.resolveWeak) {
return require.resolveWeak(\`./\${foo}\`);
}
return eval('require.resolve')(\`./\${foo}\`);
}
});"
`;
exports[`plugin aggressive import with "webpackChunkName" should keep it 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName(props) {
return \\"pages/\\" + props.path.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: props => import(
/* webpackChunkName: \\"pages/[request]\\" */
\`./pages/\${props.path}\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve(props) {
if (require.resolveWeak) {
return require.resolveWeak(\`./pages/\${props.path}\`);
}
return eval('require.resolve')(\`./pages/\${props.path}\`);
}
});"
`;
exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName(props) {
return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: props => import(
/* webpackChunkName: \\"[request]\\" */
\`./\${props.foo}\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve(props) {
if (require.resolveWeak) {
return require.resolveWeak(\`./\${props.foo}\`);
}
return eval('require.resolve')(\`./\${props.foo}\`);
}
});"
`;
exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName(props) {
return \`dir-\${props.foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: props => import(
/* webpackChunkName: \\"dir-[request]\\" */
\`./dir/\${props.foo}/test\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve(props) {
if (require.resolveWeak) {
return require.resolveWeak(\`./dir/\${props.foo}/test\`);
}
return eval('require.resolve')(\`./dir/\${props.foo}/test\`);
}
});"
`;
exports[`plugin aggressive import without "webpackChunkName" should support destructuring 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName({
foo
}) {
return \`dir-\${foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: ({
foo
}) => import(
/* webpackChunkName: \\"dir-[request]\\" */
\`./dir/\${foo}/test\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve({
foo
}) {
if (require.resolveWeak) {
return require.resolveWeak(\`./dir/\${foo}/test\`);
}
return eval('require.resolve')(\`./dir/\${foo}/test\`);
}
});"
`;
exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName(props) {
return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: props => import(
/* webpackChunkName: \\"[request]\\" */
\`./\${props.foo}\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve(props) {
if (require.resolveWeak) {
return require.resolveWeak(\`./\${props.foo}\`);
}
return eval('require.resolve')(\`./\${props.foo}\`);
}
});"
`;
exports[`plugin custom signatures (default) should support old named import 1`] = `
"import loadable from './loadable-utils';
loadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin custom signatures named signature should not match default import 1`] = `
"import myLoadable from 'myLoadablePackage';
myLoadable(() => import(\`./ModA\`));"
`;
exports[`plugin custom signatures should match custom default signature 1`] = `
"import myLoadable from 'myLoadablePackage';
myLoadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin custom signatures should match custom named signature 1`] = `
"import { myLoadable } from 'myLoadablePackage';
myLoadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin custom signatures should match renamed default import 1`] = `
"import renamedLoadable from '@loadable/component';
renamedLoadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin custom signatures should match simple default import 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin custom signatures should not match on undeclared specifiers 1`] = `
"import myLoadable from 'myLoadablePackage';
myLoadable(() => import(\`./ModA\`));"
`;
exports[`plugin loadable.lib should be transpiled too 1`] = `
"import loadable from '@loadable/component';
loadable.lib({
resolved: {},
chunkName() {
return \\"moment\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"moment\\" */
'moment'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"moment\\");
}
return eval('require.resolve')(\\"moment\\");
}
});"
`;
exports[`plugin simple import in a complex promise should work 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"ModA\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => timeout(import(
/* webpackChunkName: \\"ModA\\" */
'./ModA'), 2000),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"./ModA\\");
}
return eval('require.resolve')(\\"./ModA\\");
}
});"
`;
exports[`plugin simple import should transform path into "chunk-friendly" name 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"foo-bar\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"foo-bar\\" */
'../foo/bar'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"../foo/bar\\");
}
return eval('require.resolve')(\\"../foo/bar\\");
}
});"
`;
exports[`plugin simple import should work with * in name 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \`foo\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"foo\\" */
\`./foo*\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./foo*\`);
}
return eval('require.resolve')(\`./foo*\`);
}
});"
`;
exports[`plugin simple import should work with + concatenation 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"\\" */
'./Mod' + 'A'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak('./Mod' + 'A');
}
return eval('require.resolve')('./Mod' + 'A');
}
});"
`;
exports[`plugin simple import should work with lazy if imported 1`] = `
"import { lazy } from '@loadable/component';
lazy({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin simple import should work with renamed lazy specifier 1`] = `
"import { lazy as renamedLazy } from '@loadable/component';
renamedLazy({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin simple import should work with renamed specifier by default 1`] = `
"import renamedLoadable from '@loadable/component';
renamedLoadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin simple import should work with template literal 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
\`./ModA\`),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\`./ModA\`);
}
return eval('require.resolve')(\`./ModA\`);
}
});"
`;
exports[`plugin simple import with "webpackChunkName" comment should use it 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"ChunkA\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ChunkA\\" */
'./ModA'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"./ModA\\");
}
return eval('require.resolve')(\\"./ModA\\");
}
});"
`;
exports[`plugin simple import with "webpackChunkName" comment should use it even if comment is separated by "," 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"ChunkA\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackPrefetch: true, webpackChunkName: \\"ChunkA\\" */
'./ModA'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"./ModA\\");
}
return eval('require.resolve')(\\"./ModA\\");
}
});"
`;
exports[`plugin simple import without "webpackChunkName" comment should add it 1`] = `
"import loadable from '@loadable/component';
loadable({
resolved: {},
chunkName() {
return \\"ModA\\";
},
isReady(props) {
const key = this.resolve(props);
if (this.resolved[key] !== true) {
return false;
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!__webpack_modules__[key];
}
return false;
},
importAsync: () => import(
/* webpackChunkName: \\"ModA\\" */
'./ModA'),
requireAsync(props) {
const key = this.resolve(props);
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
return resolved;
});
},
requireSync(props) {
const id = this.resolve(props);
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id);
}
return eval('module.require')(id);
},
resolve() {
if (require.resolveWeak) {
return require.resolveWeak(\\"./ModA\\");
}
return eval('require.resolve')(\\"./ModA\\");
}
});"
`;
================================================
FILE: packages/babel-plugin/src/index.js
================================================
import { declare } from "@babel/helper-plugin-utils";
import syntaxDynamicImport from '@babel/plugin-syntax-dynamic-import'
import chunkNameProperty from './properties/chunkName'
import isReadyProperty from './properties/isReady'
import importAsyncProperty from './properties/importAsync'
import requireAsyncProperty from './properties/requireAsync'
import requireSyncProperty from './properties/requireSync'
import resolveProperty from './properties/resolve'
import stateProperty from './properties/state'
const properties = [
stateProperty,
chunkNameProperty,
isReadyProperty,
importAsyncProperty,
requireAsyncProperty,
requireSyncProperty,
resolveProperty,
]
const LOADABLE_COMMENT = '#__LOADABLE__'
const DEFAULT_SIGNATURE = [{name: 'default', from: '@loadable/component'}];
const loadablePlugin = declare((api, {
signatures = DEFAULT_SIGNATURE
}) => {
const { types: t } = api
function collectImportCallPaths(startPath) {
const imports = []
startPath.traverse({
Import(importPath) {
imports.push(importPath.parentPath)
},
})
return imports
}
const propertyFactories = properties.map(init => init(api))
function isValidIdentifier(path, loadableImportSpecifiers, lazyImportSpecifier) {
// loadable signatures
if (loadableImportSpecifiers.find(specifier => path.get('callee').isIdentifier({ name: specifier }))) {
return true
}
// `lazy()`
if (lazyImportSpecifier && path.get('callee').isIdentifier({ name: lazyImportSpecifier })) {
return true
}
// `loadable.lib()`
return (
path.get('callee').isMemberExpression() &&
loadableImportSpecifiers.find(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
path.get('callee.property').isIdentifier({ name: 'lib' })
)
}
function hasLoadableComment(path) {
const comments = path.get('leadingComments')
const comment = comments.find(
({ node }) =>
node && node.value && String(node.value).includes(LOADABLE_COMMENT),
)
if (!comment) return false
comment.remove()
return true
}
function getFuncPath(path) {
const funcPath = path.isCallExpression() ? path.get('arguments.0') : path
if (
!funcPath.isFunctionExpression() &&
!funcPath.isArrowFunctionExpression() &&
!funcPath.isObjectMethod()
) {
return null
}
return funcPath
}
function transformImport(path) {
const callPaths = collectImportCallPaths(path)
// Ignore loadable function that does not have any "import" call
if (callPaths.length === 0) return
// Multiple imports call is not supported
if (callPaths.length > 1) {
throw new Error(
'loadable: multiple import calls inside `loadable()` function are not supported.',
)
}
const [callPath] = callPaths
const funcPath = getFuncPath(path)
if (!funcPath) return
funcPath.node.params = funcPath.node.params || []
const object = t.objectExpression(
propertyFactories.map(getProperty =>
getProperty({ path, callPath, funcPath }),
),
)
if (funcPath.isObjectMethod()) {
funcPath.replaceWith(
t.objectProperty(funcPath.node.key, object, funcPath.node.computed),
)
} else {
funcPath.replaceWith(object)
}
}
return {
inherits: syntaxDynamicImport,
visitor: {
Program: {
enter(programPath) {
let lazyImportSpecifier = false
// default to "loadable" detection. Remove defaults if signatures are configured
const loadableSpecifiers = signatures === DEFAULT_SIGNATURE ? ['loadable']: [];
programPath.traverse({
ImportDefaultSpecifier(path) {
const { parent } = path
const { local } = path.node
if (local && signatures.find(signature => signature.name === 'default' && parent.source.value === signature.from)) {
loadableSpecifiers.push(local.name)
}
},
ImportSpecifier(path) {
const { parent } = path
const { imported, local } = path.node
if (!lazyImportSpecifier) {
lazyImportSpecifier = parent.source.value == '@loadable/component' &&
imported && imported.name == 'lazy' && local && local.name
}
if (local && imported && signatures.find(signature => imported.name === signature.name && parent.source.value === signature.from)) {
loadableSpecifiers.push(local.name)
}
},
CallExpression(path) {
if (!isValidIdentifier(path, loadableSpecifiers, lazyImportSpecifier)) return
transformImport(path)
},
'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {
if (!hasLoadableComment(path)) return
transformImport(path)
},
})
},
},
},
}
})
export default loadablePlugin
================================================
FILE: packages/babel-plugin/src/index.test.js
================================================
/* eslint-disable import/no-extraneous-dependencies */
import { transform } from '@babel/core'
import plugin from '.'
const testPlugin = (code, options) => {
const result = transform(code, {
plugins: [[plugin, options]],
configFile: false,
})
return result.code
}
describe('plugin', () => {
describe('simple import', () => {
it('should work with template literal', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
})
it('should work with lazy if imported', () => {
const result = testPlugin(`
import { lazy } from '@loadable/component'
lazy(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
})
it('should not work with lazy if not imported', () => {
const result = testPlugin(`
import React, { lazy } from 'react'
lazy(() => import(\`./ModA\`))
`)
expect(result).toMatchInlineSnapshot(`
"import React, { lazy } from 'react';
lazy(() => import(\`./ModA\`));"
`)
})
it('should work with renamed specifier by default', () => {
const result = testPlugin(`
import renamedLoadable from '@loadable/component'
renamedLoadable(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
})
it('should work with renamed lazy specifier', () => {
const result = testPlugin(`
import { lazy as renamedLazy } from '@loadable/component'
renamedLazy(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
})
it('should work with + concatenation', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import('./Mod' + 'A'))
`)
expect(result).toMatchSnapshot()
})
it('should work with * in name', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import(\`./foo*\`))
`)
expect(result).toMatchSnapshot()
})
it('should transform path into "chunk-friendly" name', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import('../foo/bar'))
`)
expect(result).toMatchSnapshot()
})
describe('with "webpackChunkName" comment', () => {
it('should use it', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import(/* webpackChunkName: "ChunkA" */ './ModA'))
`)
expect(result).toMatchSnapshot()
})
it('should use it even if comment is separated by ","', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "ChunkA" */ './ModA'))
`)
expect(result).toMatchSnapshot()
})
})
describe('without "webpackChunkName" comment', () => {
it('should add it', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import('./ModA'))
`)
expect(result).toMatchSnapshot()
})
})
describe('in a complex promise', () => {
it('should work', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => timeout(import('./ModA'), 2000))
`)
expect(result).toMatchSnapshot()
})
})
})
describe('aggressive import', () => {
it('should work with destructuration', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(({ foo }) => import(/* webpackChunkName: "Pages" */ \`./\${foo}\`))
`)
expect(result).toMatchSnapshot()
})
describe('with "webpackChunkName"', () => {
it('should replace it', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(props => import(/* webpackChunkName: "Pages" */ \`./\${props.foo}\`))
`)
expect(result).toMatchSnapshot()
})
it('should keep it', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(props => import(/* webpackChunkName: "pages/[request]" */ \`./pages/\${props.path}\`))
`)
expect(result).toMatchSnapshot()
expect(result).toEqual(
expect.stringContaining('return "pages/" + props.path.replace'),
)
expect(result).toEqual(
expect.stringContaining('/* webpackChunkName: "pages/[request]"'),
)
})
})
describe('without "webpackChunkName"', () => {
it('should support simple request', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(props => import(\`./\${props.foo}\`))
`)
expect(result).toMatchSnapshot()
})
it('should support complex request', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(props => import(\`./dir/\${props.foo}/test\`))
`)
expect(result).toMatchSnapshot()
})
it('should support destructuring', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(({ foo }) => import(\`./dir/\${foo}/test\`))
`)
expect(result).toMatchSnapshot()
})
})
})
describe('loadable.lib', () => {
it('should be transpiled too', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable.lib(() => import('moment'))
`)
expect(result).toMatchSnapshot()
})
})
describe('custom signatures', () => {
it('(default) should support old named import', () => {
const result = testPlugin(`
import loadable from './loadable-utils'
loadable(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
});
it('should match simple default import', () => {
const result = testPlugin(`
import loadable from '@loadable/component'
loadable(() => import(\`./ModA\`))
`, { signatures: [{ name: 'default', from: '@loadable/component' }]})
expect(result).toMatchSnapshot()
})
it('should match renamed default import', () => {
const result = testPlugin(`
import renamedLoadable from '@loadable/component'
renamedLoadable(() => import(\`./ModA\`))
`, { signatures: [{ name: 'default', from: '@loadable/component' }]})
expect(result).toMatchSnapshot()
})
it('should match custom default signature', () => {
const result = testPlugin(`
import myLoadable from 'myLoadablePackage'
myLoadable(() => import(\`./ModA\`))
`, { signatures: [{ name: 'default', from: 'myLoadablePackage' }]})
expect(result).toMatchSnapshot()
})
it('should match custom named signature', () => {
const result = testPlugin(`
import { myLoadable } from 'myLoadablePackage'
myLoadable(() => import(\`./ModA\`))
`, { signatures: [{ name: 'myLoadable', from: 'myLoadablePackage' }]})
expect(result).toMatchSnapshot()
})
it('named signature should not match default import', () => {
const result = testPlugin(`
import myLoadable from 'myLoadablePackage'
myLoadable(() => import(\`./ModA\`))
`, { signatures: [{ name: 'myLoadable', from: 'myLoadablePackage' }]})
expect(result).toMatchSnapshot()
})
it('should not match on undeclared specifiers', () => {
const result = testPlugin(`
import myLoadable from 'myLoadablePackage'
myLoadable(() => import(\`./ModA\`))
`)
expect(result).toMatchSnapshot()
})
})
describe('Magic comment', () => {
it('should transpile shortand properties', () => {
const result = testPlugin(`
const obj = {
/* #__LOADABLE__ */
load() {
return import('moment')
}
}
`)
expect(result).toMatchSnapshot()
})
it('should transpile arrow functions', () => {
const result = testPlugin(`
const load = /* #__LOADABLE__ */ () => import('moment')
`)
expect(result).toMatchSnapshot()
})
it('should transpile function expression', () => {
const result = testPlugin(`
const load = /* #__LOADABLE__ */ function () {
return import('moment')
}
`)
expect(result).toMatchSnapshot()
})
it('should remove only needed comments', () => {
const result = testPlugin(`
const load = /* #__LOADABLE__ */ /* IMPORTANT! */ () => import('moment')
`)
expect(result).toMatchSnapshot()
})
})
})
================================================
FILE: packages/babel-plugin/src/properties/chunkName.js
================================================
import vm from 'vm'
import { getImportArg } from '../util'
const JS_PATH_REGEXP = /^[./]+|(\.js$)/g
const MATCH_LEFT_HYPHENS_REPLACE_REGEX = /^-/g
// https://github.com/webpack/webpack/blob/master/lib/Template.js
const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g
const WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g
function readWebpackCommentValues(str) {
try {
const values = vm.runInNewContext(`(function(){return {${str}};})()`)
return values
} catch (e) {
throw Error(`compilation error while processing: /*${str}*/: ${e.message}`)
}
}
function writeWebpackCommentValues(values) {
try {
const str = Object.keys(values)
.map(key => `${key}: ${JSON.stringify(values[key])}`)
.join(', ')
return ` ${str} `
} catch (e) {
throw Error(
`compilation error while processing: /*${values}*/: ${e.message}`,
)
}
}
function getChunkNameComment(importArg) {
if (!importArg.has('leadingComments')) return null
return importArg
.get('leadingComments')
.find(comment => comment.node.value.match(WEBPACK_CHUNK_NAME_REGEXP))
}
function getRawChunkNameFromCommments(importArg) {
const chunkNameComment = getChunkNameComment(importArg)
if (!chunkNameComment) return null
return readWebpackCommentValues(chunkNameComment.node.value)
}
function moduleToChunk(str) {
if (typeof str !== 'string') return ''
return str
.replace(JS_PATH_REGEXP, '')
.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-')
.replace(WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX, '')
}
function replaceQuasi(str, stripLeftHyphen) {
if (!str) return ''
const result = str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-')
if (!stripLeftHyphen) return result
return result.replace(MATCH_LEFT_HYPHENS_REPLACE_REGEX, '')
}
export default function chunkNameProperty({ types: t }) {
function transformQuasi(quasi, first, single) {
return t.templateElement(
{
raw: single
? moduleToChunk(quasi.value.raw)
: replaceQuasi(quasi.value.raw, first),
cooked: single
? moduleToChunk(quasi.value.cooked)
: replaceQuasi(quasi.value.cooked, first),
},
quasi.tail,
)
}
function sanitizeChunkNameTemplateLiteral(node) {
return t.callExpression(t.memberExpression(node, t.identifier('replace')), [
t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'),
t.stringLiteral('-'),
])
}
function combineExpressions(node) {
const { expressions } = node
const { length } = expressions
if (length === 1) {
return expressions[0]
}
return expressions
.slice(1)
.reduce((r, p) => t.binaryExpression('+', r, p), expressions[0])
}
function generateChunkNameNode(callPath, prefix) {
const importArg = getImportArg(callPath)
if (importArg.isTemplateLiteral()) {
return prefix
? t.binaryExpression(
'+',
t.stringLiteral(prefix),
sanitizeChunkNameTemplateLiteral(
combineExpressions(importArg.node),
),
)
: t.templateLiteral(
importArg.node.quasis.map((quasi, index) =>
transformQuasi(
quasi,
index === 0,
importArg.node.quasis.length === 1,
),
),
importArg.node.expressions,
)
}
return t.stringLiteral(moduleToChunk(importArg.node.value))
}
function getExistingChunkNameComment(callPath) {
const importArg = getImportArg(callPath)
const values = getRawChunkNameFromCommments(importArg)
return values
}
function isAgressiveImport(callPath) {
const importArg = getImportArg(callPath)
return (
importArg.isTemplateLiteral() && importArg.node.expressions.length > 0
)
}
function addOrReplaceChunkNameComment(callPath, values) {
const importArg = getImportArg(callPath)
const chunkNameComment = getChunkNameComment(importArg)
if (chunkNameComment) {
chunkNameComment.remove()
}
importArg.addComment('leading', writeWebpackCommentValues(values))
}
function chunkNameFromTemplateLiteral(node) {
const [q1] = node.quasis
const v1 = q1 ? q1.value.cooked : ''
if (!node.expressions.length) return v1
return `${v1}[request]`
}
function getChunkNamePrefix(chunkName) {
if (typeof chunkName !== 'string') return ''
const match = chunkName.match(/(.+?)\[(request|index)\]$/)
return match ? match[1] : ''
}
function replaceChunkName(callPath) {
const agressiveImport = isAgressiveImport(callPath)
const values = getExistingChunkNameComment(callPath)
let { webpackChunkName } = values || {}
if (!agressiveImport && values) {
addOrReplaceChunkNameComment(callPath, values)
return t.stringLiteral(webpackChunkName)
}
let chunkNameNode = generateChunkNameNode(
callPath,
getChunkNamePrefix(webpackChunkName),
)
if (t.isTemplateLiteral(chunkNameNode)) {
webpackChunkName = chunkNameFromTemplateLiteral(chunkNameNode)
chunkNameNode = sanitizeChunkNameTemplateLiteral(chunkNameNode)
} else if (t.isStringLiteral(chunkNameNode)) {
webpackChunkName = chunkNameNode.value
}
addOrReplaceChunkNameComment(callPath, { ...values, webpackChunkName })
return chunkNameNode
}
return ({ callPath, funcPath }) => {
const chunkName = replaceChunkName(callPath)
return t.objectMethod(
'method',
t.identifier('chunkName'),
funcPath.node.params,
t.blockStatement([t.returnStatement(chunkName)]),
)
}
}
================================================
FILE: packages/babel-plugin/src/properties/importAsync.js
================================================
export default function requireAsyncProperty({ types: t }) {
function getFunc(funcPath) {
if (funcPath.isObjectMethod()) {
const { params, body, async } = funcPath.node
return t.arrowFunctionExpression(params, body, async)
}
return funcPath.node
}
return ({ funcPath }) =>
t.objectProperty(t.identifier('importAsync'), getFunc(funcPath))
}
================================================
FILE: packages/babel-plugin/src/properties/isReady.js
================================================
export default function isReadyProperty({ types: t, template }) {
const statements = template.ast(`
const key=this.resolve(props)
if (this.resolved[key] !== true) {
return false
}
if (typeof __webpack_modules__ !== 'undefined') {
return !!(__webpack_modules__[key])
}
return false
`)
return () =>
t.objectMethod(
'method',
t.identifier('isReady'),
[t.identifier('props')],
t.blockStatement(statements),
)
}
================================================
FILE: packages/babel-plugin/src/properties/requireAsync.js
================================================
export default function requireAsyncProperty({ types: t, template }) {
const tracking = template.ast(`
const key = this.resolve(props)
this.resolved[key] = false
return this.importAsync(props).then(resolved => {
this.resolved[key] = true
return resolved;
});
`)
return () =>
t.objectMethod(
'method',
t.identifier('requireAsync'),
[t.identifier('props')],
t.blockStatement(tracking),
)
}
================================================
FILE: packages/babel-plugin/src/properties/requireSync.js
================================================
export default function requireSyncProperty({ types: t, template }) {
const statements = template.ast(`
const id = this.resolve(props)
if (typeof __webpack_require__ !== 'undefined') {
return __webpack_require__(id)
}
return eval('module.require')(id)
`)
return () =>
t.objectMethod(
'method',
t.identifier('requireSync'),
[t.identifier('props')],
t.blockStatement(statements),
)
}
================================================
FILE: packages/babel-plugin/src/properties/resolve.js
================================================
import { getImportArg } from '../util'
export default function resolveProperty({ types: t, template }) {
const buildStatements = template`
if (require.resolveWeak) {
return require.resolveWeak(ID)
}
retur
gitextract_pnucyiln/
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.md
│ │ ├── feature.md
│ │ ├── question.md
│ │ └── regression.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── SUPPORT.md
│ ├── opencollective.yml
│ └── stale.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── BACKERS.md
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── examples/
│ ├── client-side/
│ │ ├── .eslintrc.json
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── A.js
│ │ │ ├── B.js
│ │ │ ├── Hello.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── razzle/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── About/
│ │ │ └── index.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── Contact/
│ │ │ └── index.js
│ │ ├── Home/
│ │ │ ├── Home.css
│ │ │ ├── Intro.js
│ │ │ ├── Logo.js
│ │ │ ├── Welcome.js
│ │ │ └── index.js
│ │ ├── NotFound/
│ │ │ └── index.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── server-side-rendering/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── Y/
│ │ │ │ │ └── file.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ ├── D.js
│ │ │ │ │ ├── E.js
│ │ │ │ │ ├── F.js
│ │ │ │ │ ├── G.js
│ │ │ │ │ └── Z/
│ │ │ │ │ └── file.js
│ │ │ │ ├── main-node.js
│ │ │ │ ├── main-web.js
│ │ │ │ └── main.css
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ ├── server-side-rendering-async-node/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── Y/
│ │ │ │ │ └── file.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ ├── D.js
│ │ │ │ │ ├── E.js
│ │ │ │ │ ├── F.js
│ │ │ │ │ ├── G.js
│ │ │ │ │ └── Z/
│ │ │ │ │ └── file.js
│ │ │ │ ├── main-async-node.js
│ │ │ │ ├── main-web.js
│ │ │ │ └── main.css
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ ├── suspense/
│ │ ├── .eslintrc.json
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Hello.js
│ │ │ └── index.js
│ │ └── webpack.config.js
│ ├── typescript/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.tsx
│ │ │ │ ├── Page.tsx
│ │ │ │ ├── PageWithParam.tsx
│ │ │ │ ├── main-node.js
│ │ │ │ └── main-web.js
│ │ │ └── server/
│ │ │ └── main.js
│ │ ├── tsconfig.json
│ │ └── webpack.config.babel.js
│ └── webpack/
│ ├── README.md
│ ├── webpack4/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── nodemon.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── client/
│ │ │ │ ├── App.js
│ │ │ │ ├── letters/
│ │ │ │ │ ├── A.css
│ │ │ │ │ ├── A.js
│ │ │ │ │ ├── B.js
│ │ │ │ │ ├── C.js
│ │ │ │ │ └── D.js
│ │ │ │ ├── main-node.js
│ │ │ │ └── main-web.js
│ │ │ └── server/
│ │ │ └── main.js
│ │ └── webpack.config.babel.js
│ └── webpack5/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── nodemon.json
│ ├── package.json
│ ├── src/
│ │ ├── client/
│ │ │ ├── App.js
│ │ │ ├── letters/
│ │ │ │ ├── A.css
│ │ │ │ ├── A.js
│ │ │ │ ├── B.js
│ │ │ │ ├── C.js
│ │ │ │ └── D.js
│ │ │ ├── main-node.js
│ │ │ └── main-web.js
│ │ └── server/
│ │ └── main.js
│ └── webpack.config.babel.js
├── lerna.json
├── netlify.toml
├── package.json
├── packages/
│ ├── babel-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── __snapshots__/
│ │ │ └── index.test.js.snap
│ │ ├── index.js
│ │ ├── index.test.js
│ │ ├── properties/
│ │ │ ├── chunkName.js
│ │ │ ├── importAsync.js
│ │ │ ├── isReady.js
│ │ │ ├── requireAsync.js
│ │ │ ├── requireSync.js
│ │ │ ├── resolve.js
│ │ │ └── state.js
│ │ └── util.js
│ ├── codemod/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ ├── main.js
│ │ │ └── utils/
│ │ │ └── CodemodError.js
│ │ ├── package.json
│ │ └── transforms/
│ │ ├── __testfixtures__/
│ │ │ ├── react-loadable-to-loadable-component_arrow-no-params.input.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-no-params.output.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-w-params.input.js
│ │ │ ├── react-loadable-to-loadable-component_arrow-w-params.output.js
│ │ │ ├── react-loadable-to-loadable-component_expr.input.js
│ │ │ └── react-loadable-to-loadable-component_expr.output.js
│ │ ├── __tests__/
│ │ │ └── react-loadable-to-loadable-component-test.js
│ │ └── react-loadable-to-loadable-component.js
│ ├── component/
│ │ ├── .npmignore
│ │ ├── .size-snapshot.json
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ └── src/
│ │ ├── Context.js
│ │ ├── createLoadable.js
│ │ ├── index.js
│ │ ├── library.js
│ │ ├── loadable.js
│ │ ├── loadable.test.js
│ │ ├── loadableReady.js
│ │ ├── resolvers.js
│ │ ├── shared.js
│ │ ├── sharedInternals.js
│ │ └── util.js
│ ├── server/
│ │ ├── .npmignore
│ │ ├── .size-snapshot.json
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── __fixtures__/
│ │ │ └── stats.json
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ └── src/
│ │ ├── ChunkExtractor.js
│ │ ├── ChunkExtractor.test.js
│ │ ├── ChunkExtractorManager.js
│ │ ├── index.js
│ │ ├── sharedInternals.js
│ │ ├── util.js
│ │ └── util.test.js
│ └── webpack-plugin/
│ ├── .npmignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ └── src/
│ └── index.js
├── resources/
│ └── loadable-components.sketch
├── scripts/
│ ├── copy-stats-fixture.js
│ ├── git-release.sh
│ └── prepare.sh
└── website/
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── README.md
├── _redirects
├── gatsby-config.js
├── gatsby-node.js
├── package.json
└── src/
└── pages/
├── docs/
│ ├── api-loadable-component.mdx
│ ├── api-loadable-server.mdx
│ ├── api-loadable-webpack-plugin.mdx
│ ├── babel-plugin.mdx
│ ├── code-splitting.mdx
│ ├── component-splitting.mdx
│ ├── delay.mdx
│ ├── dynamic-import.mdx
│ ├── error-boundaries.mdx
│ ├── fallback.mdx
│ ├── faq.mdx
│ ├── getting-started.mdx
│ ├── library-splitting.mdx
│ ├── loadable-vs-react-lazy.mdx
│ ├── migrate-from-react-loadable.mdx
│ ├── prefetching.mdx
│ ├── server-side-rendering.mdx
│ ├── support.mdx
│ ├── suspense.mdx
│ └── timeout.mdx
└── index.js
SYMBOL INDEX (134 symbols across 39 files)
FILE: babel.config.js
function getTargets (line 1) | function getTargets() {
function getModules (line 8) | function getModules() {
FILE: examples/client-side/src/index.js
function App (line 11) | function App() {
FILE: examples/server-side-rendering-async-node/babel.config.js
function isWebTarget (line 1) | function isWebTarget(caller) {
function isWebpack (line 5) | function isWebpack(caller) {
FILE: examples/server-side-rendering-async-node/src/server/main.js
method writeToDisk (line 24) | writeToDisk(filePath) {
FILE: examples/server-side-rendering-async-node/webpack.config.babel.js
constant DIST_PATH (line 6) | const DIST_PATH = path.resolve(__dirname, 'public/dist')
FILE: examples/server-side-rendering/babel.config.js
function isWebTarget (line 1) | function isWebTarget(caller) {
function isWebpack (line 5) | function isWebpack(caller) {
FILE: examples/server-side-rendering/src/server/main.js
method writeToDisk (line 24) | writeToDisk(filePath) {
FILE: examples/server-side-rendering/webpack.config.babel.js
constant DIST_PATH (line 6) | const DIST_PATH = path.resolve(__dirname, 'public/dist')
FILE: examples/typescript/babel.config.js
function isWebTarget (line 1) | function isWebTarget(caller) {
function isWebpack (line 5) | function isWebpack(caller) {
FILE: examples/typescript/src/server/main.js
method writeToDisk (line 31) | writeToDisk(filePath) {
FILE: examples/typescript/webpack.config.babel.js
constant DIST_PATH (line 6) | const DIST_PATH = path.resolve(__dirname, 'public/dist')
FILE: examples/webpack/webpack4/babel.config.js
function isWebTarget (line 1) | function isWebTarget(caller) {
function isWebpack (line 5) | function isWebpack(caller) {
FILE: examples/webpack/webpack4/src/server/main.js
method writeToDisk (line 37) | writeToDisk(filePath) {
FILE: examples/webpack/webpack4/webpack.config.babel.js
constant DIST_PATH (line 6) | const DIST_PATH = path.resolve(__dirname, 'public/dist')
FILE: examples/webpack/webpack5/babel.config.js
function isWebTarget (line 1) | function isWebTarget(caller) {
function isWebpack (line 5) | function isWebpack(caller) {
FILE: examples/webpack/webpack5/src/server/main.js
method writeToDisk (line 31) | writeToDisk(filePath) {
FILE: examples/webpack/webpack5/webpack.config.babel.js
constant DIST_PATH (line 6) | const DIST_PATH = path.resolve(__dirname, 'public/dist')
FILE: packages/babel-plugin/src/index.js
constant LOADABLE_COMMENT (line 21) | const LOADABLE_COMMENT = '#__LOADABLE__'
constant DEFAULT_SIGNATURE (line 23) | const DEFAULT_SIGNATURE = [{name: 'default', from: '@loadable/component'}];
function collectImportCallPaths (line 30) | function collectImportCallPaths(startPath) {
function isValidIdentifier (line 42) | function isValidIdentifier(path, loadableImportSpecifiers, lazyImportSpe...
function hasLoadableComment (line 61) | function hasLoadableComment(path) {
function getFuncPath (line 72) | function getFuncPath(path) {
function transformImport (line 84) | function transformImport(path) {
method enter (line 124) | enter(programPath) {
FILE: packages/babel-plugin/src/properties/chunkName.js
constant JS_PATH_REGEXP (line 4) | const JS_PATH_REGEXP = /^[./]+|(\.js$)/g
constant MATCH_LEFT_HYPHENS_REPLACE_REGEX (line 5) | const MATCH_LEFT_HYPHENS_REPLACE_REGEX = /^-/g
constant WEBPACK_CHUNK_NAME_REGEXP (line 7) | const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
constant WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX (line 8) | const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^...
constant WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX (line 9) | const WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g
function readWebpackCommentValues (line 11) | function readWebpackCommentValues(str) {
function writeWebpackCommentValues (line 20) | function writeWebpackCommentValues(values) {
function getChunkNameComment (line 33) | function getChunkNameComment(importArg) {
function getRawChunkNameFromCommments (line 40) | function getRawChunkNameFromCommments(importArg) {
function moduleToChunk (line 46) | function moduleToChunk(str) {
function replaceQuasi (line 54) | function replaceQuasi(str, stripLeftHyphen) {
function chunkNameProperty (line 61) | function chunkNameProperty({ types: t }) {
FILE: packages/babel-plugin/src/properties/importAsync.js
function requireAsyncProperty (line 1) | function requireAsyncProperty({ types: t }) {
FILE: packages/babel-plugin/src/properties/isReady.js
function isReadyProperty (line 1) | function isReadyProperty({ types: t, template }) {
FILE: packages/babel-plugin/src/properties/requireAsync.js
function requireAsyncProperty (line 1) | function requireAsyncProperty({ types: t, template }) {
FILE: packages/babel-plugin/src/properties/requireSync.js
function requireSyncProperty (line 1) | function requireSyncProperty({ types: t, template }) {
FILE: packages/babel-plugin/src/properties/resolve.js
function resolveProperty (line 3) | function resolveProperty({ types: t, template }) {
FILE: packages/babel-plugin/src/properties/state.js
function requireAsyncProperty (line 1) | function requireAsyncProperty({ types: t }) {
FILE: packages/babel-plugin/src/util.js
function getImportArg (line 3) | function getImportArg(callPath) {
FILE: packages/codemod/bin/utils/CodemodError.js
class CodemodError (line 1) | class CodemodError extends Error {
method constructor (line 2) | constructor(args) {
FILE: packages/component/src/createLoadable.js
constant STATUS_PENDING (line 8) | const STATUS_PENDING = 'PENDING'
constant STATUS_RESOLVED (line 9) | const STATUS_RESOLVED = 'RESOLVED'
constant STATUS_REJECTED (line 10) | const STATUS_REJECTED = 'REJECTED'
function resolveConstructor (line 12) | function resolveConstructor(ctor) {
function createLoadable (line 42) | function createLoadable({
FILE: packages/component/src/library.js
method onLoad (line 5) | onLoad(result, props) {
method render (line 14) | render({ result, props }) {
FILE: packages/component/src/loadable.js
method render (line 8) | render({ result: Component, props }) {
FILE: packages/component/src/loadable.test.js
function mockDelayedResolvedValueOnce (line 16) | function mockDelayedResolvedValueOnce(fn, resolvedValue) {
class Catch (line 25) | class Catch extends React.Component {
method getDerivedStateFromError (line 28) | static getDerivedStateFromError() {
method render (line 32) | render() {
class ErrorBoundary (line 37) | class ErrorBoundary extends React.Component {
method constructor (line 38) | constructor(props) {
method componentDidCatch (line 47) | componentDidCatch() {
method render (line 54) | render() {
FILE: packages/component/src/loadableReady.js
constant BROWSER (line 7) | const BROWSER = typeof window !== 'undefined'
function loadableReady (line 9) | function loadableReady(
FILE: packages/component/src/resolvers.js
function defaultResolveComponent (line 1) | function defaultResolveComponent(loadedModule) {
FILE: packages/component/src/shared.js
constant LOADABLE_SHARED (line 1) | const LOADABLE_SHARED = {
FILE: packages/component/src/sharedInternals.js
constant LOADABLE_REQUIRED_CHUNKS_KEY (line 3) | const LOADABLE_REQUIRED_CHUNKS_KEY = '__LOADABLE_REQUIRED_CHUNKS__'
function getRequiredChunkKey (line 4) | function getRequiredChunkKey(namespace) {
FILE: packages/component/src/util.js
function invariant (line 3) | function invariant(condition, message) {
function warn (line 11) | function warn(message) {
FILE: packages/server/src/ChunkExtractor.js
constant EXTENSION_SCRIPT_TYPES (line 12) | const EXTENSION_SCRIPT_TYPES = {
function extensionToScriptType (line 18) | function extensionToScriptType(extension) {
function cleanFileName (line 27) | function cleanFileName(name) {
function getFileScriptType (line 31) | function getFileScriptType(fileName) {
function isScriptFile (line 37) | function isScriptFile(fileName) {
function getAssets (line 41) | function getAssets(chunks, getAsset) {
function handleExtraProps (line 48) | function handleExtraProps(asset, extraProps) {
function extraPropsToString (line 52) | function extraPropsToString(asset, extraProps) {
function getSriHtmlAttributes (line 59) | function getSriHtmlAttributes(asset) {
function assetToScriptTag (line 66) | function assetToScriptTag(asset, extraProps) {
function assetToScriptElement (line 75) | function assetToScriptElement(asset, extraProps) {
function assetToStyleString (line 87) | function assetToStyleString(asset, { inputFileSystem }) {
function assetToStyleTag (line 99) | function assetToStyleTag(asset, extraProps) {
function assetToStyleTagInline (line 105) | function assetToStyleTagInline(asset, extraProps, { inputFileSystem }) {
function assetToStyleElement (line 124) | function assetToStyleElement(asset, extraProps) {
function assetToStyleElementInline (line 136) | function assetToStyleElementInline(asset, extraProps, { inputFileSystem ...
constant LINK_ASSET_HINTS (line 155) | const LINK_ASSET_HINTS = {
function assetToLinkTag (line 160) | function assetToLinkTag(asset, extraProps) {
function assetToLinkElement (line 170) | function assetToLinkElement(asset, extraProps) {
function joinTags (line 183) | function joinTags(tags) {
constant HOT_UPDATE_REGEXP (line 187) | const HOT_UPDATE_REGEXP = /\.hot-update\.js$/
function isValidChunkAsset (line 189) | function isValidChunkAsset(chunkAsset) {
function checkIfChunkIncludesJs (line 193) | function checkIfChunkIncludesJs(chunkInfo) {
class ChunkExtractor (line 197) | class ChunkExtractor {
method constructor (line 198) | constructor({
method resolvePublicUrl (line 217) | resolvePublicUrl(filename) {
method getChunkGroup (line 221) | getChunkGroup(chunk) {
method getChunkInfo (line 227) | getChunkInfo(chunkId) {
method createChunkAsset (line 233) | createChunkAsset({ filename, chunk, type, linkType }) {
method getChunkAssets (line 253) | getChunkAssets(chunks) {
method getChunkChildAssets (line 275) | getChunkChildAssets(chunks, type) {
method getChunkDependencies (line 298) | getChunkDependencies(chunks) {
method getRequiredChunksScriptContent (line 321) | getRequiredChunksScriptContent() {
method getRequiredChunksNamesScriptContent (line 325) | getRequiredChunksNamesScriptContent() {
method getRequiredChunksScriptTag (line 331) | getRequiredChunksScriptTag(extraProps) {
method getRequiredChunksScriptElements (line 343) | getRequiredChunksScriptElements(extraProps) {
method addChunk (line 374) | addChunk(chunk) {
method collectChunks (line 379) | collectChunks(app) {
method requireEntrypoint (line 385) | requireEntrypoint(entrypoint) {
method getEntrypointPath (line 396) | getEntrypointPath(entrypoint) {
method getAllScriptAssetsPaths (line 404) | getAllScriptAssetsPaths() {
method getMainAssets (line 414) | getMainAssets(scriptType) {
method getScriptTags (line 423) | getScriptTags(extraProps = {}) {
method getScriptElements (line 432) | getScriptElements(extraProps = {}) {
method getCssString (line 443) | getCssString() {
method getStyleTags (line 451) | getStyleTags(extraProps = {}) {
method getInlineStyleTags (line 456) | getInlineStyleTags(extraProps = {}) {
method getStyleElements (line 464) | getStyleElements(extraProps = {}) {
method getInlineStyleElements (line 469) | getInlineStyleElements(extraProps = {}) {
method getPreAssets (line 479) | getPreAssets() {
method getLinkTags (line 489) | getLinkTags(extraProps = {}) {
method getLinkElements (line 495) | getLinkElements(extraProps = {}) {
FILE: packages/webpack-plugin/src/index.js
class LoadablePlugin (line 7) | class LoadablePlugin {
method constructor (line 8) | constructor({
method source (line 66) | source() {
method size (line 69) | size() {
method apply (line 101) | apply(compiler) {
FILE: website/src/pages/index.js
function Index (line 8) | function Index() {
Condensed preview — 252 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (409K chars).
[
{
"path": ".eslintignore",
"chars": 94,
"preview": "node_modules/\n/coverage/\ndist/\nlib/\nbuild/\n/website/.cache/\n/website/public/\n__testfixtures__/"
},
{
"path": ".eslintrc.json",
"chars": 687,
"preview": "{\n \"root\": true,\n \"parser\": \"babel-eslint\",\n \"extends\": [\"airbnb\", \"prettier\"],\n \"env\": {\n \"jest\": true\n },\n \"r"
},
{
"path": ".github/FUNDING.yml",
"chars": 44,
"preview": "github: gregberge\nopen_collective: loadable\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug.md",
"chars": 630,
"preview": "---\nname: 🐛 Bug report\nabout: Create a report to help us improve\n---\n\n## 🐛 Bug Report\n\nA clear and concise description o"
},
{
"path": ".github/ISSUE_TEMPLATE/feature.md",
"chars": 372,
"preview": "---\nname: 🚀 Feature Proposal\nabout: Submit a proposal for a new feature\n---\n\n## 🚀 Feature Proposal\n\nA clear and concise "
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"chars": 375,
"preview": "---\nname: 💬 Questions / Help\nabout: If you have questions, please read full readme first\n---\n\n## 💬 Questions and Help\n\nL"
},
{
"path": ".github/ISSUE_TEMPLATE/regression.md",
"chars": 753,
"preview": "---\nname: 💥 Regression Report\nabout: Report unexpected behavior that worked in previous versions\n---\n\n## 💥 Regression Re"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 258,
"preview": "## 👉 [Please follow one of these issue templates](https://github.com/gregberge/loadable-components/issues/new/choose) 👈\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 448,
"preview": "<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request"
},
{
"path": ".github/SUPPORT.md",
"chars": 58,
"preview": "Please read carefully the README before asking questions.\n"
},
{
"path": ".github/opencollective.yml",
"chars": 578,
"preview": "collective: loadable\ntiers:\n - tiers: '*'\n labels: ['backer']\n message: |\n Hey <author> :wave:,\n Thank "
},
{
"path": ".github/stale.yml",
"chars": 496,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a "
},
{
"path": ".gitignore",
"chars": 56,
"preview": "node_modules/\ndist/\nlib/\n/coverage/\nexamples/*/yarn.lock"
},
{
"path": ".npmignore",
"chars": 153,
"preview": "/*\n!/babel.js\n!/server.js\n!/server.d.ts\n!/dist/**/*.js\n!/src/**/*.js\n!/types/index.d.ts\n!/types/tsconfig.json\n__fixtures"
},
{
"path": ".npmrc",
"chars": 35,
"preview": "registry=https://registry.npmjs.org"
},
{
"path": ".nvmrc",
"chars": 38,
"preview": "20\nregistry=https://registry.npmjs.org"
},
{
"path": ".prettierignore",
"chars": 169,
"preview": "node_modules/\n/coverage/\n/dist/\n__fixtures__/\nCHANGELOG.md\npackage.json\nlerna.json\n/website/.cache/\n/website/public/\n__t"
},
{
"path": ".prettierrc",
"chars": 69,
"preview": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"semi\": false\n}\n"
},
{
"path": ".travis.yml",
"chars": 504,
"preview": "language: node_js\n\nnode_js:\n - 12\n\nnotifications:\n email: false\n\ncache:\n yarn: true\n directories:\n - '.eslintcach"
},
{
"path": "BACKERS.md",
"chars": 298,
"preview": "# Sponsors & Backers\n\n<p class=\"description\">Support Loadable Components development through donations.</p>\n\nLoadable Co"
},
{
"path": "CHANGELOG.md",
"chars": 33890,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3216,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 3616,
"preview": "# How to Contribute\n\nLoadable Components is a small project, it is widely used but has not a lot of contributors. We're "
},
{
"path": "LICENSE",
"chars": 1050,
"preview": "Copyright 2019 Greg Bergé\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software"
},
{
"path": "README.md",
"chars": 2682,
"preview": "<h1 align=\"center\">\n <img src=\"https://raw.githubusercontent.com/gregberge/loadable-components/master/resources/loadabl"
},
{
"path": "babel.config.js",
"chars": 551,
"preview": "function getTargets() {\n if (process.env.BUILD_TARGET === 'node') {\n return { node: '8' }\n }\n return undefined\n}\n\n"
},
{
"path": "examples/client-side/.eslintrc.json",
"chars": 91,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\"\n }\n}\n"
},
{
"path": "examples/client-side/README.md",
"chars": 413,
"preview": "# Get the client-side example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/lo"
},
{
"path": "examples/client-side/babel.config.js",
"chars": 109,
"preview": "module.exports = {\n presets: ['@babel/preset-react'],\n plugins: ['@babel/plugin-syntax-dynamic-import'],\n}\n"
},
{
"path": "examples/client-side/package.json",
"chars": 552,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"webpack-dev-server\",\n \"dev\": \"webpack-dev-server\"\n },\n \"devDepend"
},
{
"path": "examples/client-side/src/A.js",
"chars": 25,
"preview": "export default () => 'A'\n"
},
{
"path": "examples/client-side/src/B.js",
"chars": 25,
"preview": "export default () => 'B'\n"
},
{
"path": "examples/client-side/src/Hello.js",
"chars": 29,
"preview": "export default () => 'Hello'\n"
},
{
"path": "examples/client-side/src/index.js",
"chars": 805,
"preview": "import React, { useState } from 'react'\nimport { render } from 'react-dom'\nimport loadable from '@loadable/component'\n\nc"
},
{
"path": "examples/client-side/webpack.config.js",
"chars": 280,
"preview": "const HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n mode: 'development',\n module: {\n rule"
},
{
"path": "examples/razzle/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/razzle/.gitignore",
"chars": 136,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\n.env.local\n.env.development.local\n.env.test.local\n.env."
},
{
"path": "examples/razzle/README.md",
"chars": 446,
"preview": "# Get the razzle example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loadabl"
},
{
"path": "examples/razzle/package.json",
"chars": 736,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"razzle start\",\n \"build\": \"razzle build\",\n \"test\": \"razzle test -"
},
{
"path": "examples/razzle/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/razzle/razzle.config.js",
"chars": 1180,
"preview": "/* eslint-disable prefer-object-spread */\nconst path = require('path')\nconst LoadableWebpackPlugin = require('@loadable/"
},
{
"path": "examples/razzle/src/About/index.js",
"chars": 91,
"preview": "import React from 'react'\n\nconst About = () => <div>About page</div>\n\nexport default About\n"
},
{
"path": "examples/razzle/src/App.css",
"chars": 62,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}"
},
{
"path": "examples/razzle/src/App.js",
"chars": 765,
"preview": "import React from 'react'\nimport { Router, Link } from '@reach/router'\nimport loadable from '@loadable/component'\nimport"
},
{
"path": "examples/razzle/src/Contact/index.js",
"chars": 97,
"preview": "import React from 'react'\n\nconst Contact = () => <div>Contact page</div>\n\nexport default Contact\n"
},
{
"path": "examples/razzle/src/Home/Home.css",
"chars": 455,
"preview": ".Home {\n text-align: center;\n}\n\n.Home-logo {\n animation: Home-logo-spin infinite 20s linear;\n height: 80px;\n}\n\n.Home-"
},
{
"path": "examples/razzle/src/Home/Intro.js",
"chars": 265,
"preview": "/* eslint-disable react/jsx-one-expression-per-line */\nimport React from 'react'\n\nconst Intro = () => (\n <p className=\""
},
{
"path": "examples/razzle/src/Home/Logo.js",
"chars": 150,
"preview": "import React from 'react'\nimport logo from './react.svg'\n\nconst Logo = () => <img src={logo} className=\"Home-logo\" alt=\""
},
{
"path": "examples/razzle/src/Home/Welcome.js",
"chars": 100,
"preview": "import React from 'react'\n\nconst Welcome = () => <h2>Welcome to Razzle</h2>\n\nexport default Welcome\n"
},
{
"path": "examples/razzle/src/Home/index.js",
"chars": 719,
"preview": "import React from 'react'\nimport loadable from '@loadable/component'\nimport './Home.css'\n\nconst Intro = loadable(() => i"
},
{
"path": "examples/razzle/src/NotFound/index.js",
"chars": 110,
"preview": "import React from 'react'\n\nconst NotFound = () => <div>Page could not be found</div>\n\nexport default NotFound\n"
},
{
"path": "examples/razzle/src/client.js",
"chars": 301,
"preview": "import 'normalize.css'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\nimport { loadableReady } from '@loa"
},
{
"path": "examples/razzle/src/index.js",
"chars": 672,
"preview": "/* eslint-disable no-console, global-require */\n\nimport http from 'http'\n\nlet app = require('./server').default\n\nconst s"
},
{
"path": "examples/razzle/src/server.js",
"chars": 1425,
"preview": "import path from 'path'\nimport React from 'react'\nimport express from 'express'\nimport { html as htmlTemplate, oneLineTr"
},
{
"path": "examples/server-side-rendering/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/server-side-rendering/.gitignore",
"chars": 11,
"preview": "public/dist"
},
{
"path": "examples/server-side-rendering/README.md",
"chars": 537,
"preview": "# Get the SSR example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loadable-c"
},
{
"path": "examples/server-side-rendering/babel.config.js",
"chars": 700,
"preview": "function isWebTarget(caller) {\n return Boolean(caller && caller.target === 'web')\n}\n\nfunction isWebpack(caller) {\n ret"
},
{
"path": "examples/server-side-rendering/nodemon.json",
"chars": 80,
"preview": "{\n \"ignore\": [\"client\", \"public\"],\n \"execMap\": {\n \"js\": \"babel-node\"\n }\n}\n"
},
{
"path": "examples/server-side-rendering/package.json",
"chars": 1273,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nodemon src/server/main.js\",\n \"build\": \"rm -Rf ./public && NODE_ENV=p"
},
{
"path": "examples/server-side-rendering/src/client/App.js",
"chars": 1636,
"preview": "import React from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport loadable from '@loadable/"
},
{
"path": "examples/server-side-rendering/src/client/Y/file.js",
"chars": 25,
"preview": "export default () => 'Y'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/A.css",
"chars": 42,
"preview": "/* A CSS */\nbody {\n background: pink;\n}"
},
{
"path": "examples/server-side-rendering/src/client/letters/A.js",
"chars": 205,
"preview": "// We simulate that \"moment\" is called in \"A\" and \"B\"\nimport moment from 'moment'\nimport './A.css'\n\nconst A = () => 'A'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/B.js",
"chars": 188,
"preview": "// We simulate that \"moment\" is called in \"A\" and \"B\"\nimport moment from 'moment'\n\nconst B = () => 'B'\n\n// We keep a ref"
},
{
"path": "examples/server-side-rendering/src/client/letters/C.js",
"chars": 25,
"preview": "export default () => 'C'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/D.js",
"chars": 25,
"preview": "export default () => 'D'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/E.js",
"chars": 25,
"preview": "export default () => 'E'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/F.js",
"chars": 25,
"preview": "export default () => 'F'\n"
},
{
"path": "examples/server-side-rendering/src/client/letters/G.js",
"chars": 123,
"preview": "import React from 'react'\n\nconst G = ({ prefix }) => <span className=\"my-cool-class\">{prefix} - G</span>\n\nexport default"
},
{
"path": "examples/server-side-rendering/src/client/letters/Z/file.js",
"chars": 25,
"preview": "export default () => 'Z'\n"
},
{
"path": "examples/server-side-rendering/src/client/main-node.js",
"chars": 62,
"preview": "export { default } from './App'\n\nexport const hello = 'hello'\n"
},
{
"path": "examples/server-side-rendering/src/client/main-web.js",
"chars": 315,
"preview": "import 'core-js'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\n// eslint-disable-next-line import/no-ext"
},
{
"path": "examples/server-side-rendering/src/client/main.css",
"chars": 38,
"preview": "/* Main CSS */\nh1 {\n color: cyan;\n}"
},
{
"path": "examples/server-side-rendering/src/server/main.js",
"chars": 1868,
"preview": "import path from 'path'\nimport express from 'express'\nimport React from 'react'\nimport { renderToString } from 'react-do"
},
{
"path": "examples/server-side-rendering/webpack.config.babel.js",
"chars": 1514,
"preview": "import path from 'path'\nimport nodeExternals from 'webpack-node-externals'\nimport LoadablePlugin from '@loadable/webpack"
},
{
"path": "examples/server-side-rendering-async-node/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/server-side-rendering-async-node/.gitignore",
"chars": 11,
"preview": "public/dist"
},
{
"path": "examples/server-side-rendering-async-node/README.md",
"chars": 489,
"preview": "> WORK IN PROGRESS\n\n# Get the SSR example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/"
},
{
"path": "examples/server-side-rendering-async-node/babel.config.js",
"chars": 700,
"preview": "function isWebTarget(caller) {\n return Boolean(caller && caller.target === 'web')\n}\n\nfunction isWebpack(caller) {\n ret"
},
{
"path": "examples/server-side-rendering-async-node/nodemon.json",
"chars": 80,
"preview": "{\n \"ignore\": [\"client\", \"public\"],\n \"execMap\": {\n \"js\": \"babel-node\"\n }\n}\n"
},
{
"path": "examples/server-side-rendering-async-node/package.json",
"chars": 1044,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nodemon src/server/main.js\",\n \"build\": \"NODE_ENV=production yarn buil"
},
{
"path": "examples/server-side-rendering-async-node/src/client/App.js",
"chars": 1569,
"preview": "import React from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport loadable from '@loadable/"
},
{
"path": "examples/server-side-rendering-async-node/src/client/Y/file.js",
"chars": 25,
"preview": "export default () => 'Y'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/A.css",
"chars": 12,
"preview": "/* A CSS */\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/A.js",
"chars": 205,
"preview": "// We simulate that \"moment\" is called in \"A\" and \"B\"\nimport moment from 'moment'\nimport './A.css'\n\nconst A = () => 'A'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/B.js",
"chars": 188,
"preview": "// We simulate that \"moment\" is called in \"A\" and \"B\"\nimport moment from 'moment'\n\nconst B = () => 'B'\n\n// We keep a ref"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/C.js",
"chars": 25,
"preview": "export default () => 'C'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/D.js",
"chars": 25,
"preview": "export default () => 'D'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/E.js",
"chars": 25,
"preview": "export default () => 'E'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/F.js",
"chars": 25,
"preview": "export default () => 'F'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/G.js",
"chars": 123,
"preview": "import React from 'react'\n\nconst G = ({ prefix }) => <span className=\"my-cool-class\">{prefix} - G</span>\n\nexport default"
},
{
"path": "examples/server-side-rendering-async-node/src/client/letters/Z/file.js",
"chars": 25,
"preview": "export default () => 'Z'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/main-async-node.js",
"chars": 32,
"preview": "export { default } from './App'\n"
},
{
"path": "examples/server-side-rendering-async-node/src/client/main-web.js",
"chars": 315,
"preview": "import 'core-js'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\n// eslint-disable-next-line import/no-ext"
},
{
"path": "examples/server-side-rendering-async-node/src/client/main.css",
"chars": 15,
"preview": "/* Main CSS */\n"
},
{
"path": "examples/server-side-rendering-async-node/src/server/main.js",
"chars": 1874,
"preview": "import path from 'path'\nimport express from 'express'\nimport React from 'react'\nimport { renderToString } from 'react-do"
},
{
"path": "examples/server-side-rendering-async-node/webpack.config.babel.js",
"chars": 1417,
"preview": "import path from 'path'\nimport nodeExternals from 'webpack-node-externals'\nimport LoadablePlugin from '@loadable/webpack"
},
{
"path": "examples/suspense/.eslintrc.json",
"chars": 91,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\"\n }\n}\n"
},
{
"path": "examples/suspense/README.md",
"chars": 407,
"preview": "# Get the suspense example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loada"
},
{
"path": "examples/suspense/babel.config.js",
"chars": 109,
"preview": "module.exports = {\n presets: ['@babel/preset-react'],\n plugins: ['@babel/plugin-syntax-dynamic-import'],\n}\n"
},
{
"path": "examples/suspense/package.json",
"chars": 552,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"webpack-dev-server\",\n \"dev\": \"webpack-dev-server\"\n },\n \"devDepend"
},
{
"path": "examples/suspense/src/Hello.js",
"chars": 29,
"preview": "export default () => 'Hello'\n"
},
{
"path": "examples/suspense/src/index.js",
"chars": 500,
"preview": "import React, { Suspense } from 'react'\nimport { render } from 'react-dom'\nimport { lazy } from '@loadable/component'\n\nc"
},
{
"path": "examples/suspense/webpack.config.js",
"chars": 280,
"preview": "const HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n mode: 'development',\n module: {\n rule"
},
{
"path": "examples/typescript/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/typescript/.gitignore",
"chars": 11,
"preview": "public/dist"
},
{
"path": "examples/typescript/README.md",
"chars": 458,
"preview": "# Get the SSR example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loadable-c"
},
{
"path": "examples/typescript/babel.config.js",
"chars": 734,
"preview": "function isWebTarget(caller) {\n return Boolean(caller && caller.target === 'web')\n}\n\nfunction isWebpack(caller) {\n ret"
},
{
"path": "examples/typescript/nodemon.json",
"chars": 80,
"preview": "{\n \"ignore\": [\"client\", \"public\"],\n \"execMap\": {\n \"js\": \"babel-node\"\n }\n}\n"
},
{
"path": "examples/typescript/package.json",
"chars": 1588,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nodemon src/server/main.js\",\n \"build\": \"NODE_ENV=production yarn buil"
},
{
"path": "examples/typescript/src/client/App.tsx",
"chars": 905,
"preview": "import * as React from 'react'\nimport loadable from '@loadable/component'\nimport {StaticRouter, Switch, Route} from 'rea"
},
{
"path": "examples/typescript/src/client/Page.tsx",
"chars": 117,
"preview": "import * as React from 'react';\n\nconst Page:React.FC<{}> = () => (<span>I am lazy page</span>);\n\nexport default Page;"
},
{
"path": "examples/typescript/src/client/PageWithParam.tsx",
"chars": 169,
"preview": "import * as React from 'react';\n\nconst PageWithParam:React.FC<{x: number}> = ({x}) => (<span>I am lazy page2 -{x||\"misse"
},
{
"path": "examples/typescript/src/client/main-node.js",
"chars": 36,
"preview": "export { default } from './App.tsx'\n"
},
{
"path": "examples/typescript/src/client/main-web.js",
"chars": 346,
"preview": "import 'core-js'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\nimport { loadableReady } from '@loadable/"
},
{
"path": "examples/typescript/src/server/main.js",
"chars": 2249,
"preview": "import path from 'path'\nimport express from 'express'\nimport React from 'react'\nimport { renderToString } from 'react-do"
},
{
"path": "examples/typescript/tsconfig.json",
"chars": 5986,
"preview": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig.json to read more about this file */\n\n /* Basic Options"
},
{
"path": "examples/typescript/webpack.config.babel.js",
"chars": 1468,
"preview": "import path from 'path'\nimport nodeExternals from 'webpack-node-externals'\nimport LoadablePlugin from '@loadable/webpack"
},
{
"path": "examples/webpack/README.md",
"chars": 34,
"preview": "these examples are also **tests**\n"
},
{
"path": "examples/webpack/webpack4/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/webpack/webpack4/.gitignore",
"chars": 11,
"preview": "public/dist"
},
{
"path": "examples/webpack/webpack4/README.md",
"chars": 458,
"preview": "# Get the SSR example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loadable-c"
},
{
"path": "examples/webpack/webpack4/babel.config.js",
"chars": 700,
"preview": "function isWebTarget(caller) {\n return Boolean(caller && caller.target === 'web')\n}\n\nfunction isWebpack(caller) {\n ret"
},
{
"path": "examples/webpack/webpack4/nodemon.json",
"chars": 80,
"preview": "{\n \"ignore\": [\"client\", \"public\"],\n \"execMap\": {\n \"js\": \"babel-node\"\n }\n}\n"
},
{
"path": "examples/webpack/webpack4/package.json",
"chars": 1406,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nodemon src/server/main.js\",\n \"build\": \"NODE_ENV=production yarn buil"
},
{
"path": "examples/webpack/webpack4/src/client/App.js",
"chars": 827,
"preview": "import React from 'react'\nimport loadable from '@loadable/component'\n\nconst X = loadable(props => import(`./letters/${pr"
},
{
"path": "examples/webpack/webpack4/src/client/letters/A.css",
"chars": 12,
"preview": "/* A CSS */\n"
},
{
"path": "examples/webpack/webpack4/src/client/letters/A.js",
"chars": 68,
"preview": "import './A.css'\n\nconst A = () => 'Lazy-Letter-A'\n\nexport default A\n"
},
{
"path": "examples/webpack/webpack4/src/client/letters/B.js",
"chars": 50,
"preview": "const B = () => 'Lazy-Letter-B'\n\nexport default B\n"
},
{
"path": "examples/webpack/webpack4/src/client/letters/C.js",
"chars": 50,
"preview": "const C = () => 'Lazy-Letter-C'\n\nexport default C\n"
},
{
"path": "examples/webpack/webpack4/src/client/letters/D.js",
"chars": 56,
"preview": "// named as C\nconst C = () => 'and-D'\n\nexport default C\n"
},
{
"path": "examples/webpack/webpack4/src/client/main-node.js",
"chars": 32,
"preview": "export { default } from './App'\n"
},
{
"path": "examples/webpack/webpack4/src/client/main-web.js",
"chars": 342,
"preview": "import 'core-js'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\nimport { loadableReady } from '@loadable/"
},
{
"path": "examples/webpack/webpack4/src/server/main.js",
"chars": 2395,
"preview": "import path from 'path'\nimport express from 'express'\nimport React from 'react'\nimport { renderToString } from 'react-do"
},
{
"path": "examples/webpack/webpack4/webpack.config.babel.js",
"chars": 1395,
"preview": "import path from 'path'\nimport nodeExternals from 'webpack-node-externals'\nimport LoadablePlugin from '@loadable/webpack"
},
{
"path": "examples/webpack/webpack5/.eslintrc.json",
"chars": 139,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependen"
},
{
"path": "examples/webpack/webpack5/.gitignore",
"chars": 11,
"preview": "public/dist"
},
{
"path": "examples/webpack/webpack5/README.md",
"chars": 458,
"preview": "# Get the SSR example running\n\nSteps:\n\n1. Download repository\n\n```bash\ngit clone https://github.com/gregberge/loadable-c"
},
{
"path": "examples/webpack/webpack5/babel.config.js",
"chars": 700,
"preview": "function isWebTarget(caller) {\n return Boolean(caller && caller.target === 'web')\n}\n\nfunction isWebpack(caller) {\n ret"
},
{
"path": "examples/webpack/webpack5/nodemon.json",
"chars": 80,
"preview": "{\n \"ignore\": [\"client\", \"public\"],\n \"execMap\": {\n \"js\": \"babel-node\"\n }\n}\n"
},
{
"path": "examples/webpack/webpack5/package.json",
"chars": 1406,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nodemon src/server/main.js\",\n \"build\": \"NODE_ENV=production yarn buil"
},
{
"path": "examples/webpack/webpack5/src/client/App.js",
"chars": 827,
"preview": "import React from 'react'\nimport loadable from '@loadable/component'\n\nconst X = loadable(props => import(`./letters/${pr"
},
{
"path": "examples/webpack/webpack5/src/client/letters/A.css",
"chars": 12,
"preview": "/* A CSS */\n"
},
{
"path": "examples/webpack/webpack5/src/client/letters/A.js",
"chars": 68,
"preview": "import './A.css'\n\nconst A = () => 'Lazy-Letter-A'\n\nexport default A\n"
},
{
"path": "examples/webpack/webpack5/src/client/letters/B.js",
"chars": 50,
"preview": "const B = () => 'Lazy-Letter-B'\n\nexport default B\n"
},
{
"path": "examples/webpack/webpack5/src/client/letters/C.js",
"chars": 50,
"preview": "const C = () => 'Lazy-Letter-C'\n\nexport default C\n"
},
{
"path": "examples/webpack/webpack5/src/client/letters/D.js",
"chars": 56,
"preview": "// named as C\nconst C = () => 'and-D'\n\nexport default C\n"
},
{
"path": "examples/webpack/webpack5/src/client/main-node.js",
"chars": 32,
"preview": "export { default } from './App'\n"
},
{
"path": "examples/webpack/webpack5/src/client/main-web.js",
"chars": 342,
"preview": "import 'core-js'\nimport React from 'react'\nimport { hydrate } from 'react-dom'\nimport { loadableReady } from '@loadable/"
},
{
"path": "examples/webpack/webpack5/src/server/main.js",
"chars": 2249,
"preview": "import path from 'path'\nimport express from 'express'\nimport React from 'react'\nimport { renderToString } from 'react-do"
},
{
"path": "examples/webpack/webpack5/webpack.config.babel.js",
"chars": 1434,
"preview": "import path from 'path'\nimport nodeExternals from 'webpack-node-externals'\nimport LoadablePlugin from '@loadable/webpack"
},
{
"path": "lerna.json",
"chars": 132,
"preview": "{\n \"lerna\": \"2.9.0\",\n \"packages\": [\n \"packages/*\"\n ],\n \"version\": \"5.16.7\",\n \"npmClient\": \"yarn\",\n \"useWorkspac"
},
{
"path": "netlify.toml",
"chars": 87,
"preview": "[build]\t\n base = \"website\"\t\n command = \"yarn build\"\t\n publish = \"website/public\" "
},
{
"path": "package.json",
"chars": 2252,
"preview": "{\n \"name\": \"loadable-components\",\n \"private\": true,\n \"workspaces\": [\n \"packages/*\"\n ],\n \"bundlesize\": [\n {\n "
},
{
"path": "packages/babel-plugin/CHANGELOG.md",
"chars": 7570,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin/README.md",
"chars": 380,
"preview": "# @loadable/babel-plugin\n\nThis plugin is required only if you use Server Side Rendering in your application. [See `@load"
},
{
"path": "packages/babel-plugin/package.json",
"chars": 849,
"preview": "{\n \"name\": \"@loadable/babel-plugin\",\n \"description\": \"Babel plugin for loadable (required for SSR).\",\n \"version\": \"5."
},
{
"path": "packages/babel-plugin/src/__snapshots__/index.test.js.snap",
"chars": 31729,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin Magic comment should remove only needed comments 1`] = `\n\"co"
},
{
"path": "packages/babel-plugin/src/index.js",
"chars": 5062,
"preview": "import { declare } from \"@babel/helper-plugin-utils\";\nimport syntaxDynamicImport from '@babel/plugin-syntax-dynamic-impo"
},
{
"path": "packages/babel-plugin/src/index.test.js",
"chars": 9020,
"preview": "/* eslint-disable import/no-extraneous-dependencies */\nimport { transform } from '@babel/core'\nimport plugin from '.'\n\nc"
},
{
"path": "packages/babel-plugin/src/properties/chunkName.js",
"chars": 5747,
"preview": "import vm from 'vm'\nimport { getImportArg } from '../util'\n\nconst JS_PATH_REGEXP = /^[./]+|(\\.js$)/g\nconst MATCH_LEFT_HY"
},
{
"path": "packages/babel-plugin/src/properties/importAsync.js",
"chars": 376,
"preview": "export default function requireAsyncProperty({ types: t }) {\n function getFunc(funcPath) {\n if (funcPath.isObjectMet"
},
{
"path": "packages/babel-plugin/src/properties/isReady.js",
"chars": 484,
"preview": "export default function isReadyProperty({ types: t, template }) {\n const statements = template.ast(`\n const key=this"
},
{
"path": "packages/babel-plugin/src/properties/requireAsync.js",
"chars": 461,
"preview": "export default function requireAsyncProperty({ types: t, template }) {\n const tracking = template.ast(`\n const key ="
},
{
"path": "packages/babel-plugin/src/properties/requireSync.js",
"chars": 445,
"preview": "export default function requireSyncProperty({ types: t, template }) {\n const statements = template.ast(`\n const id ="
},
{
"path": "packages/babel-plugin/src/properties/resolve.js",
"chars": 944,
"preview": "import { getImportArg } from '../util'\n\nexport default function resolveProperty({ types: t, template }) {\n const buildS"
},
{
"path": "packages/babel-plugin/src/properties/state.js",
"chars": 149,
"preview": "export default function requireAsyncProperty({ types: t }) {\n return () =>\n t.objectProperty(t.identifier('resolved'"
},
{
"path": "packages/babel-plugin/src/util.js",
"chars": 131,
"preview": "/* eslint-disable import/prefer-default-export */\n\nexport function getImportArg(callPath) {\n return callPath.get('argum"
},
{
"path": "packages/codemod/.npmignore",
"chars": 48,
"preview": "transforms/__testfixtures__\ntransforms/__tests__"
},
{
"path": "packages/codemod/CHANGELOG.md",
"chars": 1183,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/codemod/README.md",
"chars": 815,
"preview": "# @loadable/codemod\n\nThis package is a collection of codemod that can be used to help making big changes easier to a pro"
},
{
"path": "packages/codemod/bin/main.js",
"chars": 1858,
"preview": "#!/usr/bin/env node\n\n/* eslint-disable no-console */\nconst yargs = require('yargs')\nconst execa = require('execa')\nconst"
},
{
"path": "packages/codemod/bin/utils/CodemodError.js",
"chars": 168,
"preview": "class CodemodError extends Error {\n constructor(args) {\n super(args)\n this.type = args.type\n this.payload = ar"
},
{
"path": "packages/codemod/package.json",
"chars": 782,
"preview": "{\n \"name\": \"loadable-codemod\",\n \"description\": \"Various codemods related to @loadable/components for easier migration/"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_arrow-no-params.input.js",
"chars": 250,
"preview": "/* eslint-disable */\nimport Loadable from 'react-loadable'\n\nconst CustomLinkLoadable = Loadable({\n loader: () =>\n im"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_arrow-no-params.output.js",
"chars": 236,
"preview": "/* eslint-disable */\nimport loadable from '@loadable/component'\n\nconst CustomLinkLoadable = loadable(() =>\n import(/* w"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_arrow-w-params.input.js",
"chars": 412,
"preview": "/* eslint-disable */\nimport Loadable from 'react-loadable'\n\nconst CustomLinkLoadable = Loadable({\n loader: () =>\n im"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_arrow-w-params.output.js",
"chars": 461,
"preview": "/* eslint-disable */\nimport loadable from '@loadable/component'\n\nconst CustomLinkLoadable = loadable(() =>\n import(/* w"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_expr.input.js",
"chars": 386,
"preview": "/* eslint-disable */\nimport Loadable from 'react-loadable'\n\nconst Loading = props => {\n if (props.error || props.timedO"
},
{
"path": "packages/codemod/transforms/__testfixtures__/react-loadable-to-loadable-component_expr.output.js",
"chars": 435,
"preview": "/* eslint-disable */\nimport loadable from '@loadable/component'\n\nconst Loading = props => {\n if (props.error || props.t"
},
{
"path": "packages/codemod/transforms/__tests__/react-loadable-to-loadable-component-test.js",
"chars": 475,
"preview": "jest.autoMockOff()\n\nconst { defineTest } = require('jscodeshift/dist/testUtils')\n\ndefineTest(\n __dirname,\n 'react-load"
},
{
"path": "packages/codemod/transforms/react-loadable-to-loadable-component.js",
"chars": 4586,
"preview": "/* eslint-disable no-param-reassign */\n/* eslint-disable no-console */\nconst chalk = require('chalk')\n\nconst invokeWithM"
},
{
"path": "packages/component/.npmignore",
"chars": 24,
"preview": "src/\n.*\nrollup.config.js"
},
{
"path": "packages/component/.size-snapshot.json",
"chars": 362,
"preview": "{\n \"dist/cjs/loadable.cjs.js\": {\n \"bundled\": 16900,\n \"minified\": 7226,\n \"gzipped\": 2545\n },\n \"dist/esm/loada"
},
{
"path": "packages/component/CHANGELOG.md",
"chars": 13605,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/component/README.md",
"chars": 223,
"preview": "# @loadable/component\n\nEnable Code Splitting in your React application.\n\n## Install\n\n```\b\nnpm install @loadable/componen"
},
{
"path": "packages/component/package.json",
"chars": 1358,
"preview": "{\n \"name\": \"@loadable/component\",\n \"description\": \"React code splitting made easy.\",\n \"version\": \"5.16.7\",\n \"main\": "
},
{
"path": "packages/component/rollup.config.js",
"chars": 2089,
"preview": "/* eslint-disable import/no-extraneous-dependencies */\nimport nodeResolve from 'rollup-plugin-node-resolve'\nimport babel"
},
{
"path": "packages/component/src/Context.js",
"chars": 64,
"preview": "import React from 'react'\n\nexport default React.createContext()\n"
},
{
"path": "packages/component/src/createLoadable.js",
"chars": 9924,
"preview": "/* eslint-disable no-use-before-define, react/no-multi-comp, no-underscore-dangle */\nimport React from 'react'\nimport ho"
},
{
"path": "packages/component/src/index.js",
"chars": 510,
"preview": "/* eslint-disable no-underscore-dangle */\nimport * as sharedInternals from './sharedInternals'\nimport * as loadableExpor"
},
{
"path": "packages/component/src/library.js",
"chars": 517,
"preview": "/* eslint-disable no-use-before-define, react/no-multi-comp */\nimport createLoadable from './createLoadable'\n\nexport con"
},
{
"path": "packages/component/src/loadable.js",
"chars": 353,
"preview": "/* eslint-disable no-use-before-define, react/no-multi-comp */\nimport React from 'react'\nimport createLoadable from './c"
},
{
"path": "packages/component/src/loadable.test.js",
"chars": 13596,
"preview": "/* eslint-disable max-classes-per-file */\n/* eslint-disable import/no-extraneous-dependencies, react/no-multi-comp */\nim"
},
{
"path": "packages/component/src/loadableReady.js",
"chars": 2029,
"preview": "/* eslint-disable no-underscore-dangle, camelcase */\n/* eslint-env browser */\nimport { warn } from './util'\nimport { get"
},
{
"path": "packages/component/src/resolvers.js",
"chars": 212,
"preview": "export function defaultResolveComponent(loadedModule) {\n // eslint-disable-next-line no-underscore-dangle\n return load"
},
{
"path": "packages/component/src/shared.js",
"chars": 56,
"preview": "export const LOADABLE_SHARED = {\n initialChunks: {},\n}\n"
},
{
"path": "packages/component/src/sharedInternals.js",
"chars": 256,
"preview": "export { invariant } from './util'\nexport { default as Context } from './Context'\nconst LOADABLE_REQUIRED_CHUNKS_KEY = '"
},
{
"path": "packages/component/src/util.js",
"chars": 365,
"preview": "/* eslint-disable import/prefer-default-export */\n\nexport function invariant(condition, message) {\n if (condition) retu"
}
]
// ... and 52 more files (download for full content)
About this extraction
This page contains the full source code of the gregberge/loadable-components GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 252 files (364.2 KB), approximately 103.9k tokens, and a symbol index with 134 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.