Skip to content

Commit

Permalink
feat: support import() spec
Browse files Browse the repository at this point in the history
Support the [Dynamic import proposal](https://github.com/tc39/proposal-dynamic-import) [TC39 Stage 3] as a loader (codegen).
The import() construct is supported in webpack from 2.1.0-beta28

Also adds decprecation message then using async-system (System.import) as it will be removed from webpack 3+

BREAKING CHANGES:
Typescript transform `import(...)` syntax into something.
To use `ng-router-loader` with `async-import` code generator the `ng-router-loader` must
 run **AFTER** the TS compiler (e.g: awesome-typescript-loader), that is in a lower index in the loaders array.
 This also requires the code generators to emit ES5 code.
SEE: microsoft/TypeScript#12364
  • Loading branch information
Shlomi Assaf (shlassaf) committed Jan 17, 2017
1 parent 6322274 commit 48b9f0b
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 8 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ng-router-loader",
"version": "1.0.2",
"version": "2.0.0",
"description": "Webpack loader for `NgModule` lazy loading using the angular router",
"author": "Shlomi Assaf <shlomiasaf@gmail.com>",
"license": "MIT",
Expand Down
28 changes: 22 additions & 6 deletions src/builtin_codegens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function getRequireString(file: string, module: string): string {
}

export const syncCodeGen: LoaderCodeGen =
(file: string, module: string) => `loadChildren: () => ${getRequireString(file, module)}`;
(file: string, module: string) => `loadChildren: function() { return ${getRequireString(file, module)}; }`;

export const ensureCodeGen: LoaderCodeGen = (file: string, module: string,
loaderOptions: RouterLoaderOptions,
Expand All @@ -15,27 +15,43 @@ export const ensureCodeGen: LoaderCodeGen = (file: string, module: string,
const webpackChunkName = resourceOptions.chunkName ? `, '${resourceOptions.chunkName}'` : '';

const result = [
`loadChildren: () => new Promise(function (resolve) {`,
` (require as any).ensure([], function (require: any) {`,
`loadChildren: function() { return new Promise(function (resolve) {`,
` require.ensure([], function (require) {`,
` resolve(${requireString});`,
` }${webpackChunkName});`,
`})`
`})}`
];

return loaderOptions.inline ? result.join('') : result.join('\n');
};

export const systemCodeGen: LoaderCodeGen = (file: string, module: string, opts: RouterLoaderOptions) => {
systemCodeGen['deprecated']();
const result = [
`loadChildren: () => System.import('${file}')`,
` .then( (module: any) => module['${module}'] )`
`loadChildren: function() { return System.import('${file}')`,
`.then( function(module) { return module['${module}']; } ); }`
];

return opts.inline ? result.join('') : result.join('\n');
};
systemCodeGen['deprecated'] = () => {
console.warn('\nDEPRECATED: ng-router-loader "async-system" loader use the System.import construct which is deprecated in webpack 2 and will be removed in webpack 3, please use the "async-import" instead. (https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.28)\n');
systemCodeGen['deprecated'] = () => {};
};

export const importCodeGen: LoaderCodeGen = (file: string, module: string, opts: RouterLoaderOptions) => {
const result = [
`loadChildren: function() { return import('${file}')`,
` .then( function(module) { return module['${module}']; } ); }`
];

return opts.inline ? result.join('') : result.join('\n');
};


export const BUILT_IN_CODEGENS: Array<{ name: string, codeGen: LoaderCodeGen }> = [
{ name: 'sync', codeGen: syncCodeGen },
{ name: 'async-require', codeGen: ensureCodeGen },
{ name: 'async-import', codeGen: importCodeGen },
{ name: 'async-system', codeGen: systemCodeGen }
];
15 changes: 14 additions & 1 deletion test/test.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as Path from 'path';
import { expect } from 'chai';
import '../index'; // this will load the built in code generators.
import * as options from '../src/options';
import { syncCodeGen, ensureCodeGen, systemCodeGen } from '../src/builtin_codegens';
import { syncCodeGen, ensureCodeGen, systemCodeGen, importCodeGen } from '../src/builtin_codegens';
import { Loader, ReplaceResult } from '../src/Loader';
import { wpFactory, WebpackMockFactory } from './testing/WebpackMock';

Expand Down Expand Up @@ -394,6 +394,19 @@ describe('Loader', () => {
});
});

it('should output async-import codegen', () => {
const loader = factory
.setOption('loader', 'async-import')
.toLoader();

return loader.replace(`loadChildren: 'app/module-container/child-module#ChildModule'`)
.then(mapToZero)
.then( (result: ReplaceResult) => {
expect(result.replacement).to.eql(importCodeGen(result.filePath, result.moduleName, loader.query, result.resourceQuery));
});
});


it('should output a custom codegen', () => {
const loader = factory.toLoader();
function custom(file: string, module: string): string {
Expand Down

0 comments on commit 48b9f0b

Please sign in to comment.