Skip to content

Commit 99ba5eb

Browse files
alan-agius4mgechev
alan-agius4
authored and
mgechev
committed
feat(@ngtools/webpack): add support for raw-loader 2 and 3 (#15311)
With this change we add support for raw-loader 1, 2 and 3. In version 2 raw-loader released a breaking change https://github.com/webpack-contrib/raw-loader/releases/tag/v2.0.0 and now they use ES Module export instead of CommonJS. Closes #15286 and closes #15149
1 parent 32449fc commit 99ba5eb

File tree

5 files changed

+67
-37
lines changed

5 files changed

+67
-37
lines changed

‎packages/angular_devkit/build_angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"postcss": "7.0.17",
3838
"postcss-import": "12.0.1",
3939
"postcss-loader": "3.0.0",
40-
"raw-loader": "1.0.0",
40+
"raw-loader": "3.1.0",
4141
"rxjs": "6.4.0",
4242
"sass": "1.22.9",
4343
"sass-loader": "7.1.0",

‎packages/ngtools/webpack/src/resource_loader.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,19 +159,18 @@ export class WebpackResourceLoader {
159159
});
160160
}
161161

162-
private _evaluate({ outputName, source }: CompilationOutput): Promise<string> {
163-
try {
162+
private async _evaluate({ outputName, source }: CompilationOutput): Promise<string> {
164163
// Evaluate code
165164
const evaluatedSource = vm.runInNewContext(source, undefined, { filename: outputName });
165+
if (typeof evaluatedSource === 'object' && typeof evaluatedSource.default === 'string') {
166+
return evaluatedSource.default;
167+
}
166168

167-
if (typeof evaluatedSource == 'string') {
168-
return Promise.resolve(evaluatedSource);
169+
if (typeof evaluatedSource === 'string') {
170+
return evaluatedSource;
169171
}
170172

171-
return Promise.reject('The loader "' + outputName + '" didn\'t return a string.');
172-
} catch (e) {
173-
return Promise.reject(e);
174-
}
173+
throw new Error(`The loader "${outputName}" didn't return a string.`);
175174
}
176175

177176
get(filePath: string): Promise<string> {

‎packages/ngtools/webpack/src/transformers/replace_resources.ts

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8+
import { tags } from '@angular-devkit/core';
89
import * as ts from 'typescript';
910

1011
export function replaceResources(
@@ -37,11 +38,25 @@ export function replaceResources(
3738
return ts.visitEachChild(node, visitNode, context);
3839
};
3940

40-
return (sourceFile: ts.SourceFile) => (
41-
shouldTransform(sourceFile.fileName)
42-
? ts.visitNode(sourceFile, visitNode)
43-
: sourceFile
44-
);
41+
// emit helper for `import Name from "foo"`
42+
const importDefaultHelper: ts.EmitHelper = {
43+
name: 'typescript:commonjsimportdefault',
44+
scoped: false,
45+
text: tags.stripIndent`
46+
var __importDefault = (this && this.__importDefault) || function (mod) {
47+
return (mod && mod.__esModule) ? mod : { "default": mod };
48+
};`,
49+
};
50+
51+
return (sourceFile: ts.SourceFile) => {
52+
if (shouldTransform(sourceFile.fileName)) {
53+
context.requestEmitHelper(importDefaultHelper);
54+
55+
return ts.visitNode(sourceFile, visitNode);
56+
}
57+
58+
return sourceFile;
59+
};
4560
};
4661
}
4762

@@ -171,17 +186,29 @@ function isComponentDecorator(node: ts.Node, typeChecker: ts.TypeChecker): node
171186
return false;
172187
}
173188

174-
function createRequireExpression(node: ts.Expression, loader = ''): ts.Expression {
189+
function createRequireExpression(node: ts.Expression, loader?: string): ts.Expression {
175190
const url = getResourceUrl(node, loader);
176191
if (!url) {
177192
return node;
178193
}
179194

180-
return ts.createCall(
195+
const callExpression = ts.createCall(
181196
ts.createIdentifier('require'),
182197
undefined,
183198
[ts.createLiteral(url)],
184199
);
200+
201+
return ts.createPropertyAccess(
202+
ts.createCall(
203+
ts.setEmitFlags(
204+
ts.createIdentifier('__importDefault'),
205+
ts.EmitFlags.HelperName | ts.EmitFlags.AdviseOnEmitNode,
206+
),
207+
undefined,
208+
[callExpression],
209+
),
210+
'default',
211+
);
185212
}
186213

187214
interface DecoratorOrigin {

‎packages/ngtools/webpack/src/transformers/replace_resources_spec.ts

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ function transform(input: string, shouldTransform = true, directTemplateLoading
2020

2121
// tslint:disable-next-line:no-big-function
2222
describe('@ngtools/webpack transformers', () => {
23+
// tslint:disable:max-line-length
2324
// tslint:disable-next-line:no-big-function
2425
describe('find_resources', () => {
2526
it('should replace resources', () => {
@@ -46,8 +47,8 @@ describe('@ngtools/webpack transformers', () => {
4647
AppComponent = tslib_1.__decorate([
4748
Component({
4849
selector: 'app-root',
49-
template: require("!raw-loader!./app.component.html"),
50-
styles: [require("./app.component.css"), require("./app.component.2.css")]
50+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
51+
styles: [tslib_1.__importDefault(require("./app.component.css")).default, tslib_1.__importDefault(require("./app.component.2.css")).default]
5152
})
5253
], AppComponent);
5354
export { AppComponent };
@@ -64,7 +65,10 @@ describe('@ngtools/webpack transformers', () => {
6465
@Component({
6566
selector: 'app-root',
6667
templateUrl: './app.component.html',
67-
styleUrls: ['./app.component.css', './app.component.2.css']
68+
styleUrls: [
69+
'./app.component.css',
70+
'./app.component.2.css'
71+
]
6872
})
6973
export class AppComponent {
7074
title = 'app';
@@ -81,8 +85,8 @@ describe('@ngtools/webpack transformers', () => {
8185
AppComponent = tslib_1.__decorate([
8286
Component({
8387
selector: 'app-root',
84-
template: require("./app.component.html"),
85-
styles: [require("./app.component.css"), require("./app.component.2.css")]
88+
template: tslib_1.__importDefault(require("./app.component.html")).default,
89+
styles: [tslib_1.__importDefault(require("./app.component.css")).default, tslib_1.__importDefault(require("./app.component.2.css")).default]
8690
})
8791
], AppComponent);
8892
export { AppComponent };
@@ -116,7 +120,7 @@ describe('@ngtools/webpack transformers', () => {
116120
AppComponent = tslib_1.__decorate([
117121
Component({
118122
selector: 'app-root',
119-
template: require("!raw-loader!./app.component.svg")
123+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.svg")).default
120124
})
121125
], AppComponent);
122126
export { AppComponent };
@@ -151,8 +155,8 @@ describe('@ngtools/webpack transformers', () => {
151155
AppComponent = tslib_1.__decorate([
152156
Component({
153157
selector: 'app-root',
154-
template: require("!raw-loader!./app.component.html"),
155-
styles: ["a { color: red }", require("./app.component.css")]
158+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
159+
styles: ["a { color: red }", tslib_1.__importDefault(require("./app.component.css")).default]
156160
})
157161
], AppComponent);
158162
export { AppComponent };
@@ -186,8 +190,8 @@ describe('@ngtools/webpack transformers', () => {
186190
AppComponent = tslib_1.__decorate([
187191
Component({
188192
selector: 'app-root',
189-
template: require("!raw-loader!./app.component.html"),
190-
styles: [require("./app.component.css"), require("./app.component.2.css")]
193+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
194+
styles: [tslib_1.__importDefault(require("./app.component.css")).default, tslib_1.__importDefault(require("./app.component.2.css")).default]
191195
})
192196
], AppComponent);
193197
export { AppComponent };
@@ -221,8 +225,8 @@ describe('@ngtools/webpack transformers', () => {
221225
AppComponent = tslib_1.__decorate([
222226
NgComponent({
223227
selector: 'app-root',
224-
template: require("!raw-loader!./app.component.html"),
225-
styles: [require("./app.component.css"), require("./app.component.2.css")]
228+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
229+
styles: [tslib_1.__importDefault(require("./app.component.css")).default, tslib_1.__importDefault(require("./app.component.2.css")).default]
226230
})
227231
], AppComponent);
228232
export { AppComponent };
@@ -260,8 +264,8 @@ describe('@ngtools/webpack transformers', () => {
260264
AppComponent = tslib_1.__decorate([
261265
ng.Component({
262266
selector: 'app-root',
263-
template: require("!raw-loader!./app.component.html"),
264-
styles: [require("./app.component.css"), require("./app.component.2.css")]
267+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
268+
styles: [tslib_1.__importDefault(require("./app.component.css")).default, tslib_1.__importDefault(require("./app.component.2.css")).default]
265269
})
266270
], AppComponent);
267271
export { AppComponent };
@@ -308,8 +312,8 @@ describe('@ngtools/webpack transformers', () => {
308312
AppComponent = tslib_1.__decorate([
309313
Component({
310314
selector: 'app-root',
311-
template: require("!raw-loader!./app.component.html"),
312-
styles: [require("./app.component.css")]
315+
template: tslib_1.__importDefault(require("!raw-loader!./app.component.html")).default,
316+
styles: [tslib_1.__importDefault(require("./app.component.css")).default]
313317
})
314318
], AppComponent);
315319
export { AppComponent };

‎yarn.lock

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9141,13 +9141,13 @@ [email protected]:
91419141
iconv-lite "0.4.24"
91429142
unpipe "1.0.0"
91439143

9144-
raw-loader@1.0.0:
9145-
version "1.0.0"
9146-
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-1.0.0.tgz#3f9889e73dadbda9a424bce79809b4133ad46405"
9147-
integrity sha512-Uqy5AqELpytJTRxYT4fhltcKPj0TyaEpzJDcGz7DFJi+pQOOi3GjR/DOdxTkTsF+NzhnldIoG6TORaBlInUuqA==
9144+
raw-loader@3.1.0:
9145+
version "3.1.0"
9146+
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
9147+
integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
91489148
dependencies:
91499149
loader-utils "^1.1.0"
9150-
schema-utils "^1.0.0"
9150+
schema-utils "^2.0.1"
91519151

91529152
rc@^1.2.7, rc@^1.2.8:
91539153
version "1.2.8"

0 commit comments

Comments
 (0)