Skip to content

Commit

Permalink
refactor(@ngtools/webpack): remove deprecated inlineStyleMimeType o…
Browse files Browse the repository at this point in the history 
…ption

BREAKING CHANGE: Deprecated `inlineStyleMimeType` option has been removed from `AngularWebpackPluginOptions`. Use `inlineStyleFileExtension` instead.
  • Loading branch information
@alan-agius4
alan-agius4 committed Aug 27, 2021
1 parent 76d6d88 commit 8ce8e4e
Show file tree
Hide file tree
Showing 7 changed files with 2 additions and 76 deletions.
2 changes: 0 additions & 2 deletions goldens/public-api/ngtools/webpack/src/index.md
View file
Expand Up @@ -38,8 +38,6 @@ export interface AngularWebpackPluginOptions {
fileReplacements: Record<string, string>;
// (undocumented)
inlineStyleFileExtension?: string;
// @deprecated (undocumented)
inlineStyleMimeType?: string;
// (undocumented)
jitMode: boolean;
// (undocumented)
Expand Down
4 changes: 1 addition & 3 deletions packages/ngtools/webpack/src/ivy/host.ts
View file
Expand Up @@ -20,7 +20,6 @@ export function augmentHostWithResources(
resourceLoader: WebpackResourceLoader,
options: {
directTemplateLoading?: boolean;
inlineStyleMimeType?: string;
inlineStyleFileExtension?: string;
} = {},
) {
Expand Down Expand Up @@ -60,10 +59,9 @@ export function augmentHostWithResources(
return null;
}

if (options.inlineStyleMimeType || options.inlineStyleFileExtension) {
if (options.inlineStyleFileExtension) {
const content = await resourceLoader.process(
data,
options.inlineStyleMimeType,
options.inlineStyleFileExtension,
context.type,
context.containingFile,
Expand Down
3 changes: 0 additions & 3 deletions packages/ngtools/webpack/src/ivy/plugin.ts
View file
Expand Up @@ -51,8 +51,6 @@ export interface AngularWebpackPluginOptions {
emitClassMetadata: boolean;
emitNgModuleScope: boolean;
jitMode: boolean;
/** @deprecated use `inlineStyleFileExtension` instead. */
inlineStyleMimeType?: string;
inlineStyleFileExtension?: string;
}

Expand Down Expand Up @@ -237,7 +235,6 @@ export class AngularWebpackPlugin {
resourceLoader.update(compilation, changedFiles);
augmentHostWithResources(host, resourceLoader, {
directTemplateLoading: this.pluginOptions.directTemplateLoading,
inlineStyleMimeType: this.pluginOptions.inlineStyleMimeType,
inlineStyleFileExtension: this.pluginOptions.inlineStyleFileExtension,
});

Expand Down
2 changes: 0 additions & 2 deletions packages/ngtools/webpack/src/ivy/transformation.ts
View file
Expand Up @@ -38,7 +38,6 @@ export function createJitTransformers(
builder: ts.BuilderProgram,
options: {
directTemplateLoading?: boolean;
inlineStyleMimeType?: string;
inlineStyleFileExtension?: string;
},
): ts.CustomTransformers {
Expand All @@ -50,7 +49,6 @@ export function createJitTransformers(
() => true,
getTypeChecker,
options.directTemplateLoading,
options.inlineStyleMimeType,
options.inlineStyleFileExtension,
),
constructorParametersDownlevelTransform(builder.getProgram()),
Expand Down
7 changes: 0 additions & 7 deletions packages/ngtools/webpack/src/resource_loader.ts
View file
Expand Up @@ -102,7 +102,6 @@ export class WebpackResourceLoader {
private async _compile(
filePath?: string,
data?: string,
mimeType?: string,
fileExtension?: string,
resourceType?: 'style' | 'template',
containingFile?: string,
Expand Down Expand Up @@ -169,10 +168,6 @@ export class WebpackResourceLoader {
resourceData.resource = filePath;
}

if (mimeType) {
resourceData.data.mimetype = mimeType;
}

return true;
});
NormalModule.getCompilationHooks(compilation)
Expand Down Expand Up @@ -334,7 +329,6 @@ export class WebpackResourceLoader {

async process(
data: string,
mimeType: string | undefined,
fileExtension: string | undefined,
resourceType: 'template' | 'style',
containingFile?: string,
Expand All @@ -346,7 +340,6 @@ export class WebpackResourceLoader {
const compilationResult = await this._compile(
undefined,
data,
mimeType,
fileExtension,
resourceType,
containingFile,
Expand Down
14 changes: 1 addition & 13 deletions packages/ngtools/webpack/src/transformers/replace_resources.ts
View file
Expand Up @@ -14,13 +14,8 @@ export function replaceResources(
shouldTransform: (fileName: string) => boolean,
getTypeChecker: () => ts.TypeChecker,
directTemplateLoading = false,
inlineStyleMimeType?: string,
inlineStyleFileExtension?: string,
): ts.TransformerFactory<ts.SourceFile> {
if (inlineStyleMimeType && !/^text\/[-.\w]+$/.test(inlineStyleMimeType)) {
throw new Error('Invalid inline style MIME type.');
}

return (context: ts.TransformationContext) => {
const typeChecker = getTypeChecker();
const resourceImportDeclarations: ts.ImportDeclaration[] = [];
Expand All @@ -38,7 +33,6 @@ export function replaceResources(
directTemplateLoading,
resourceImportDeclarations,
moduleKind,
inlineStyleMimeType,
inlineStyleFileExtension,
)
: node,
Expand Down Expand Up @@ -90,7 +84,6 @@ function visitDecorator(
directTemplateLoading: boolean,
resourceImportDeclarations: ts.ImportDeclaration[],
moduleKind?: ts.ModuleKind,
inlineStyleMimeType?: string,
inlineStyleFileExtension?: string,
): ts.Decorator {
if (!isComponentDecorator(node, typeChecker)) {
Expand Down Expand Up @@ -121,7 +114,6 @@ function visitDecorator(
directTemplateLoading,
resourceImportDeclarations,
moduleKind,
inlineStyleMimeType,
inlineStyleFileExtension,
)
: node,
Expand Down Expand Up @@ -155,7 +147,6 @@ function visitComponentMetadata(
directTemplateLoading: boolean,
resourceImportDeclarations: ts.ImportDeclaration[],
moduleKind?: ts.ModuleKind,
inlineStyleMimeType?: string,
inlineStyleFileExtension?: string,
): ts.ObjectLiteralElementLike | undefined {
if (!ts.isPropertyAssignment(node) || ts.isComputedPropertyName(node.name)) {
Expand Down Expand Up @@ -205,10 +196,7 @@ function visitComponentMetadata(

let url;
if (isInlineStyle) {
if (inlineStyleMimeType) {
const data = Buffer.from(node.text).toString('base64');
url = `data:${inlineStyleMimeType};charset=utf-8;base64,${data}`;
} else if (inlineStyleFileExtension) {
if (inlineStyleFileExtension) {
const data = Buffer.from(node.text).toString('base64');
const containingFile = node.getSourceFile().fileName;
url = `${containingFile}.${inlineStyleFileExtension}!=!${InlineAngularResourceLoaderPath}?data=${encodeURIComponent(
Expand Down
46 changes: 0 additions & 46 deletions packages/ngtools/webpack/src/transformers/replace_resources_spec.ts
View file
Expand Up @@ -18,7 +18,6 @@ function transform(
directTemplateLoading = true,
importHelpers = true,
module: ts.ModuleKind = ts.ModuleKind.ES2020,
inlineStyleMimeType?: string,
) {
const { program, compilerHost } = createTypescriptContext(input, undefined, undefined, {
importHelpers,
Expand All @@ -29,7 +28,6 @@ function transform(
() => shouldTransform,
getTypeChecker,
directTemplateLoading,
inlineStyleMimeType,
);

return transformTypescript(input, [transformer], program, compilerHost);
Expand Down Expand Up @@ -226,50 +224,6 @@ describe('@ngtools/webpack transformers', () => {
expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
});

it('should create data URIs for inline styles when inlineStyleMimeType is set', () => {
const input = tags.stripIndent`
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['a { color: red }'],
})
export class AppComponent {
title = 'app';
}
`;
const output = tags.stripIndent`
import { __decorate } from "tslib";
import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html";
import __NG_CLI_RESOURCE__1 from "data:text/css;charset=utf-8;base64,YSB7IGNvbG9yOiByZWQgfQ==";
import { Component } from '@angular/core';
let AppComponent = class AppComponent {
constructor() {
this.title = 'app';
}
};
AppComponent = __decorate([
Component({
selector: 'app-root',
template: __NG_CLI_RESOURCE__0,
styles: [__NG_CLI_RESOURCE__1]
})
], AppComponent);
export { AppComponent };
`;

const result = transform(input, true, true, true, ts.ModuleKind.ESNext, 'text/css');
expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
});

it('should throw error if inlineStyleMimeType value has invalid format', () => {
expect(() =>
transform('', true, true, true, ts.ModuleKind.ESNext, 'asdfsd;sdfsd//sdfsdf'),
).toThrowError('Invalid inline style MIME type.');
});

it('should replace resources with backticks', () => {
const input = `
import { Component } from '@angular/core';
Expand Down

0 comments on commit 8ce8e4e

Please sign in to comment.