A custom transformer of typescript that is used to add some necessary properties to loadable-components.
npm install maxxton-typescript-loadable-components-pluginnpm install`
2. `npm run build-on-windows` (normal build is made for linux/mac i guess)
3. `npm link`
4. Now in your cms-web repo run: `npm link maxxton-typescript-loadable-components-plugin`
5. Now if you run `npm run webpackClient` in cms-web it will build the js files using this transformation (according to the webpack settings)
6. You will see this code is added in your bundle js files:
`
const MenuView = (0,_loadable_component__WEBPACK_IMPORTED_MODULE_29__["default"])({
chunkName() { return "plugins-menu-menu-view-Menu"; },
isReady(props) { if ( true && Boolean(__webpack_require__.m[this.resolve(props)]))
try {
this.requireSync(props);
return "true" == "true";
}
catch (_a) {
return "true" !== "true";
} return "true" !== "true"; },
requireAsync: () => (0,_utils_loadableComponents_util__WEBPACK_IMPORTED_MODULE_30__.loadableRetry)(() => __webpack_require__.e(/! import() | plugins-menu-menu-view-Menu / "plugins-menu-menu-view-Menu").then(__webpack_require__.bind(__webpack_require__, /! ../plugins/menu/menu-view/Menu / "./src/plugins/menu/menu-view/Menu.tsx"))),
requireSync(props) { return true ? __webpack_require__(this.resolve(props)) : 0; },
resolve() { if (true)
return /require.resolve/(/ webpackChunkName: "plugins-menu-menu-view-Menu" / /! ../plugins/menu/menu-view/Menu / "./src/plugins/menu/menu-view/Menu.tsx");
else
{} }
}, {
resolveComponent: ({ MenuView }) => MenuView,
});
`
7. If you don't see those chunkName, isReady, requireAsync, etc. fields, then the transformation didn't work and loadable components will be broken.
If you need to publish a new version:
1. `npm run build-on-windows`
2. `npm run test`
3. `npm publish`
/MAXXTON README
typescript-loadable-components-plugin
A custom transformer of typescript that is used to add some necessary properties to loadable-components.
This transformer helps you to transform code like:
`typescript jsx
import loadable from '@loadable/component';
export const LazyFoo = loadable(() => import('./input/AsyncDefaultComponent'));
`
to the following format:
`typescript jsx
import loadable from 'loadable-components';
export const LazyFoo = loadable({
chunkName() {
return 'input-AsyncDefaultComponent';
},
isReady(props) {
return (
typeof __webpack_modules__ !== 'undefined' &&
Boolean(__webpack_modules__[this.resolve(props)])
);
},
requireAsync: () =>
import(
/ "webpackChunkName":"input-AsyncDefaultComponent" / './input/AsyncDefaultComponent'
),
requireSync(props) {
return typeof '__webpack_require__' !== 'undefined'
? __webpack_require__(this.resolve(props))
: eval('module.require')(this.resolve(props));
},
resolve() {
if (require.resolveWeak)
return require.resolveWeak(
/ "webpackChunkName":"input-AsyncDefaultComponent" / './input/AsyncDefaultComponent',
);
else
return eval('require.resolve')(
/ "webpackChunkName":"input-AsyncDefaultComponent" / './input/AsyncDefaultComponent',
);
},
});
`
Install
`bash
yarn add typescript-loadable-components-plugin -D
or npm
npm install typescript-loadable-components-plugin -D
`
Usage
$3
you just need add typescript--plugin to your tsconfig.json:
`json
{
"compilerOptions": {
"plugins": [
{
"transform": "typescript-loadable-components-plugin"
}
]
}
}
`
$3
you need to add the following options to your loader:
`js
import { createLoadableComponentsTransformer } from 'typescript-loadable-components-plugin';
export default {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader', // or awesome-typescript-loader
options: {
getCustomTransformers: (program) => ({
before: [createLoadableComponentsTransformer(program, {})],
}),
},
},
],
},
};
`
Options
_No options needed_
Notes
Supported syntax:
1. loadable default component: loadable(() => import(...), [options])
2. loadable lib component: loadable.lib(() => import(...), [options])`