Skip to content

Commit

Permalink
fix(web): convert scripts and styles to extra entry points (nrwl#4471)
Browse files Browse the repository at this point in the history
ISSUES CLOSED: nrwl#3730
  • Loading branch information
armanozak authored Jan 15, 2021
1 parent 9a84179 commit 41f10b5
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 4 deletions.
81 changes: 81 additions & 0 deletions e2e/web/src/web.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
createFile,
newProject,
readFile,
readJson,
runCLI,
runCLIAsync,
uniq,
Expand Down Expand Up @@ -172,3 +173,83 @@ describe('CLI - Environment Variables', () => {
);
});
});

describe('Build Options', () => {
it('should inject/bundle external scripts and styles', () => {
newProject();

const appName = uniq('app');

runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);

const srcPath = `apps/${appName}/src`;
const fooCss = `${srcPath}/foo.css`;
const barCss = `${srcPath}/bar.css`;
const fooJs = `${srcPath}/foo.js`;
const barJs = `${srcPath}/bar.js`;
const fooCssContent = `/* ${uniq('foo')} */`;
const barCssContent = `/* ${uniq('bar')} */`;
const fooJsContent = `/* ${uniq('foo')} */`;
const barJsContent = `/* ${uniq('bar')} */`;

createFile(fooCss);
createFile(barCss);
createFile(fooJs);
createFile(barJs);

// createFile could not create a file with content
updateFile(fooCss, fooCssContent);
updateFile(barCss, barCssContent);
updateFile(fooJs, fooJsContent);
updateFile(barJs, barJsContent);

const workspacePath = `workspace.json`;
const workspaceConfig = readJson(workspacePath);
const buildOptions =
workspaceConfig.projects[appName].targets.build.options;

const barScriptsBundleName = 'bar-scripts';
buildOptions.scripts = [
{
input: fooJs,
inject: true,
},
{
input: barJs,
inject: false,
bundleName: barScriptsBundleName,
},
];

const barStylesBundleName = 'bar-styles';
buildOptions.styles = [
{
input: fooCss,
inject: true,
},
{
input: barCss,
inject: false,
bundleName: barStylesBundleName,
},
];

updateFile(workspacePath, JSON.stringify(workspaceConfig));

runCLI(`build ${appName}`);

const distPath = `dist/apps/${appName}`;
const scripts = readFile(`${distPath}/scripts.js`);
const styles = readFile(`${distPath}/styles.js`);
const barScripts = readFile(`${distPath}/${barScriptsBundleName}.js`);
const barStyles = readFile(`${distPath}/${barStylesBundleName}.js`);

expect(scripts).toContain(fooJsContent);
expect(scripts).not.toContain(barJsContent);
expect(barScripts).toContain(barJsContent);

expect(styles).toContain(fooCssContent);
expect(styles).not.toContain(barCssContent);
expect(barStyles).toContain(barCssContent);
});
});
5 changes: 3 additions & 2 deletions packages/web/src/builders/build/build.impl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { CrossOriginValue } from '../../utils/third-party/cli-files/utilities/in
import { readTsConfig } from '@nrwl/workspace';
import { BuildBrowserFeatures } from '../../utils/third-party/utils/build-browser-features';
import { deleteOutputDir } from '../../utils/delete-output-dir';
import { ExtraEntryPoint } from '../../utils/third-party/browser/schema';

export interface WebBuildBuilderOptions extends BuildBuilderOptions {
index: string;
Expand All @@ -45,8 +46,8 @@ export interface WebBuildBuilderOptions extends BuildBuilderOptions {
polyfills?: string;
es2015Polyfills?: string;

scripts: string[];
styles: string[];
scripts: ExtraEntryPoint[];
styles: ExtraEntryPoint[];

vendorChunk?: boolean;
commonChunk?: boolean;
Expand Down
32 changes: 30 additions & 2 deletions packages/web/src/builders/build/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,14 @@
"type": "array",
"description": "External Scripts which will be included before the main application entry",
"items": {
"type": "string"
"$ref": "#/definitions/extraEntryPoint"
}
},
"styles": {
"type": "array",
"description": "External Styles which will be included with the application",
"items": {
"type": "string"
"$ref": "#/definitions/extraEntryPoint"
}
},
"budgets": {
Expand Down Expand Up @@ -325,6 +325,34 @@
},
"additionalProperties": false,
"required": ["type"]
},
"extraEntryPoint": {
"oneOf": [
{
"type": "object",
"properties": {
"input": {
"type": "string",
"description": "The file to include."
},
"bundleName": {
"type": "string",
"description": "The bundle name for this extra entry point."
},
"inject": {
"type": "boolean",
"description": "If the bundle will be referenced in the HTML file.",
"default": true
}
},
"additionalProperties": false,
"required": ["input"]
},
{
"type": "string",
"description": "The file to include."
}
]
}
}
}

0 comments on commit 41f10b5

Please sign in to comment.