discourse/app/assets/javascripts/discourse/ember-cli-build.js
Joe 804b8fd9f9
DEV: Defer loading core/plugin/theme JS files (#17063)
This is pre-request work to introduce a splash screen while site assets load.

The only change this commit introduces is that it ensures we add the defer attribute to core/plugin/theme .JS files. This will allow us to insert markup before the browser starts evaluating those scripts later on. It has no visual or functional impact on core.

This will not have any impact on how themes and plugins work. The only exception is themes loading external scripts in the </head> theme field directly via script tags. Everything will work the same but those would need to add the defer attribute if they want to keep the benefits introduced in this PR.
2022-06-20 09:47:37 +08:00

143 lines
4.4 KiB
JavaScript

"use strict";
const EmberApp = require("ember-cli/lib/broccoli/ember-app");
const resolve = require("path").resolve;
const mergeTrees = require("broccoli-merge-trees");
const concat = require("broccoli-concat");
const prettyTextEngine = require("./lib/pretty-text-engine");
const { createI18nTree } = require("./lib/translation-plugin");
const discourseScss = require("./lib/discourse-scss");
const funnel = require("broccoli-funnel");
module.exports = function (defaults) {
let discourseRoot = resolve("../../../..");
let vendorJs = discourseRoot + "/vendor/assets/javascripts/";
const isProduction = EmberApp.env().includes("production");
const isTest = EmberApp.env().includes("test");
let app = new EmberApp(defaults, {
autoRun: false,
"ember-qunit": {
insertContentForTestBody: false,
},
sourcemaps: {
// There seems to be a bug with broccoli-concat when sourcemaps are disabled
// that causes the `app.import` statements below to fail in production mode.
// This forces the use of `fast-sourcemap-concat` which works in production.
enabled: true,
},
autoImport: {
forbidEval: true,
insertScriptsAt: "ember-auto-import-scripts",
},
fingerprint: {
// Handled by Rails asset pipeline
enabled: false,
},
SRI: {
// We don't use SRI in Rails. Disable here to match:
enabled: false,
},
"ember-cli-terser": {
enabled: isProduction,
exclude: [
"**/test-*.js",
"**/core-tests*.js",
"**/highlightjs/*",
"**/javascripts/*",
],
},
// We need to build tests in prod for theme tests
tests: true,
});
// Patching a private method is not great, but there's no other way for us to tell
// Ember CLI that we want the tests alone in a package without helpers/fixtures, since
// we re-use those in the theme tests.
app._defaultPackager.packageApplicationTests = function (tree) {
let appTestTrees = []
.concat(
this.packageEmberCliInternalFiles(),
this.packageTestApplicationConfig(),
tree
)
.filter(Boolean);
appTestTrees = mergeTrees(appTestTrees, {
overwrite: true,
annotation: "TreeMerger (appTestTrees)",
});
let tests = concat(appTestTrees, {
inputFiles: ["**/tests/**/*-test.js"],
headerFiles: ["vendor/ember-cli/tests-prefix.js"],
footerFiles: ["vendor/ember-cli/app-config.js"],
outputFile: "/assets/core-tests.js",
annotation: "Concat: Core Tests",
sourceMapConfig: false,
});
let testHelpers = concat(appTestTrees, {
inputFiles: [
"**/tests/test-boot-ember-cli.js",
"**/tests/helpers/**/*.js",
"**/tests/fixtures/**/*.js",
"**/tests/setup-tests.js",
],
outputFile: "/assets/test-helpers.js",
annotation: "Concat: Test Helpers",
sourceMapConfig: false,
});
if (isTest) {
return mergeTrees([
tests,
testHelpers,
discourseScss(`${discourseRoot}/app/assets/stylesheets`, "testem.scss"),
]);
} else {
return mergeTrees([tests, testHelpers]);
}
};
// WARNING: We should only import scripts here if they are not in NPM.
// For example: our very specific version of bootstrap-modal.
app.import(vendorJs + "bootbox.js");
app.import(vendorJs + "bootstrap-modal.js");
app.import(vendorJs + "caret_position.js");
app.import("node_modules/ember-source/dist/ember-template-compiler.js", {
type: "test",
});
app.import(discourseRoot + "/app/assets/javascripts/polyfills.js");
app.import(
discourseRoot +
"/app/assets/javascripts/discourse/public/assets/scripts/module-shims.js"
);
return mergeTrees([
createI18nTree(discourseRoot, vendorJs),
app.toTree(),
funnel(`${discourseRoot}/public/javascripts`, { destDir: "javascripts" }),
funnel(`${vendorJs}/highlightjs`, {
files: ["highlight-test-bundle.min.js"],
destDir: "assets/highlightjs",
}),
concat(mergeTrees([app.options.adminTree]), {
outputFile: `assets/admin.js`,
}),
concat(mergeTrees([app.options.wizardTree]), {
outputFile: `assets/wizard.js`,
}),
prettyTextEngine(vendorJs, "discourse-markdown"),
concat("public/assets/scripts", {
outputFile: `assets/start-discourse.js`,
headerFiles: [`start-app.js`],
inputFiles: [`discourse-boot.js`],
}),
]);
};