From 333b1dd17b326079f1f22222a2a807cde49f55dd Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Tue, 1 Dec 2020 15:29:52 -0800 Subject: [PATCH 1/3] Conditionally import lazy engine css Fixes: #644 --- packages/core/src/app.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts index 59f410745..96ee80170 100644 --- a/packages/core/src/app.ts +++ b/packages/core/src/app.ts @@ -1,4 +1,4 @@ -import { AppMeta } from './metadata'; +import { AddonMeta, AppMeta } from './metadata'; import { OutputPaths } from './wait-for-trees'; import { compile } from './js-handlebars'; import Package, { V2AddonPackage } from './package'; @@ -1077,9 +1077,14 @@ export class AppBuilder { }); } - styles.push({ - path: explicitRelative(relativePath, engine.package.name + '/' + engine.package.name + '.css'), - }); + let engineMeta = engine.package.meta as AddonMeta; + if (engineMeta && engineMeta['implicit-styles']) { + for (let style of engineMeta['implicit-styles']) { + styles.push({ + path: explicitRelative(relativePath, join(engine.package.name, style)), + }); + } + } } let lazyEngines: { names: string[]; path: string }[] = []; From c82ca133db5ccfecf781d3c7ab8857d653dd53f5 Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Thu, 10 Dec 2020 19:03:48 -0800 Subject: [PATCH 2/3] adding test for engines --- packages/compat/tests/stage2.test.ts | 70 ++++++++++++++++++++++++++++ test-packages/support/project.ts | 64 +++++++++++++++++++++++++ 2 files changed, 134 insertions(+) diff --git a/packages/compat/tests/stage2.test.ts b/packages/compat/tests/stage2.test.ts index e21ad4907..6e861de2b 100644 --- a/packages/compat/tests/stage2.test.ts +++ b/packages/compat/tests/stage2.test.ts @@ -657,4 +657,74 @@ describe('stage2 build', function () { assertFile.matches(/console\.log\(true\)/); }); }); + + describe('engines', function () { + let build: BuildResult; + let expectFile: ExpectFile; + + beforeAll(async function () { + let app = Project.emberNew(); + let buildOptions: Partial = { + stage: 2, + type: 'app', + emberAppOptions: { + tests: false, + babel: { + plugins: [], + }, + }, + embroiderOptions: {}, + }; + + app.linkPackage('ember-engines'); + + let lazyEngine = app.addEngine('lazy-engine', true); + let eagerEngine = app.addEngine('eager-engine', false); + + merge(lazyEngine.files, { + addon: { + styles: { + 'addon.css': `.lazy { background-color: red; }`, + }, + }, + }); + + merge(eagerEngine.files, { + addon: { + styles: { + 'addon.css': `.eager { background-color: blue; }`, + }, + }, + }); + + build = await BuildResult.build(app, buildOptions); + expectFile = expectFilesAt(build.outputPath); + }); + + afterAll(async function () { + await build.cleanup(); + }); + + test('lazy engines appear in _embroiderEngineBundles_', function () { + expectFile('assets/my-app.js').matches(`w._embroiderEngineBundles_ = [ + { + names: ["lazy-engine"], + load: function() { + return import("./_engine_/lazy-engine.js"); + } + }, +]`); + }); + + test('lazy engine css is imported', function () { + expectFile('assets/_engine_/lazy-engine.js') + .matches(` if (macroCondition(!getGlobalConfig().fastboot?.isRunning)) { +i(\"../../../lazy-engine/lazy-engine.css\"); + }`); + }); + + test('eager engine css is merged with vendor.css', function () { + expectFile('assets/vendor.css').matches(`.eager { background-color: blue; }`); + }); + }); }); diff --git a/test-packages/support/project.ts b/test-packages/support/project.ts index 35b4dfd6b..446ebb556 100644 --- a/test-packages/support/project.ts +++ b/test-packages/support/project.ts @@ -119,6 +119,50 @@ export default App; `; } +function engineIndex(lazy = false) { + return ` +const EngineAddon = require('ember-engines/lib/engine-addon'); + +module.exports = EngineAddon.extend({ + name: require('./package').name, + lazyLoading: { + enabled: ${lazy}, + }, +}); +`; +} + +function engineConfig(name: string) { + return ` +module.exports = function(environment) { + const ENV = { + modulePrefix: '${name}', + environment: environment + } + + return ENV; +}; + `; +} + +function engineAddonFile() { + return ` +import Engine from '@ember/engine'; +import loadInitializers from 'ember-load-initializers'; +import Resolver from 'ember-resolver'; +import config from './config/environment'; + +const { modulePrefix } = config; + +export default class YourEngine extends Engine { + modulePrefix = modulePrefix; + Resolver = Resolver; +} + +loadInitializers(YourEngine, modulePrefix); + `; +} + export class Project extends FixturifyProject { // FIXME: update fixturify-project to allow easier customization of `pkg` declare pkg: any; @@ -309,6 +353,26 @@ export class Project extends FixturifyProject { return addon; } + addEngine(name: string, lazy: boolean): Project { + let addonProject = this.addAddon(name); + + addonProject.pkg.keywords.push('ember-engine'); + + merge(addonProject.files, { + 'index.js': engineIndex(lazy), + config: { + 'environment.js': engineConfig(name), + }, + addon: { + 'engine.js': engineAddonFile(), + }, + }); + + addonProject.linkDevPackage('ember-engines'); + + return addonProject; + } + toJSON(): Project['files']; toJSON(key: string): Project['files'] | string; toJSON(key?: string) { From 3f987f0097be209e4676cd6798f86153f5fbb3da Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Thu, 10 Dec 2020 19:11:56 -0800 Subject: [PATCH 3/3] additional tests --- packages/compat/tests/stage2.test.ts | 39 +++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/compat/tests/stage2.test.ts b/packages/compat/tests/stage2.test.ts index 6e861de2b..0fdb86f42 100644 --- a/packages/compat/tests/stage2.test.ts +++ b/packages/compat/tests/stage2.test.ts @@ -658,7 +658,7 @@ describe('stage2 build', function () { }); }); - describe('engines', function () { + describe('engines with css', function () { let build: BuildResult; let expectFile: ExpectFile; @@ -727,4 +727,41 @@ i(\"../../../lazy-engine/lazy-engine.css\"); expectFile('assets/vendor.css').matches(`.eager { background-color: blue; }`); }); }); + + describe('lazy engines without css', function () { + let build: BuildResult; + let expectFile: ExpectFile; + + beforeAll(async function () { + let app = Project.emberNew(); + let buildOptions: Partial = { + stage: 2, + type: 'app', + emberAppOptions: { + tests: false, + babel: { + plugins: [], + }, + }, + embroiderOptions: {}, + }; + + app.linkPackage('ember-engines'); + app.addEngine('lazy-engine', true); + + build = await BuildResult.build(app, buildOptions); + expectFile = expectFilesAt(build.outputPath); + }); + + afterAll(async function () { + await build.cleanup(); + }); + + test('lazy engine css is not imported', function () { + expectFile('assets/_engine_/lazy-engine.js') + .doesNotMatch(` if (macroCondition(!getGlobalConfig().fastboot?.isRunning)) { +i(\"../../../lazy-engine/lazy-engine.css\"); + }`); + }); + }); });