discourse/app/assets/javascripts/discourse-common/addon/resolver.js
David Taylor cbc28e8e33
Enable Embroider/Webpack code spliting for Wizard (#24919)
(extracted from #23678)

* Move Wizard back into main app, remove Wizard addon
* Remove Wizard-related resolver or build hacks
* Install and enable `@embroider/router`
* Add "wizard" to `splitAtRoutes`

In a fully optimized Embroider app, route-based code splitting more
or less Just Work™ – install `@embroider/router`, subclass from it,
configure which routes you want to split and that's about it.

However, our app is not "fully optimized", by which I mean we are
not able to turn on all the `static*` flags.

In Embroider, "static" means "statically analyzable". Specifically
it means that all inter-dependencies between modules (files) are
explicitly expressed as `import`s, as opposed to `{{i18n ...}}`
magically means "look for the default export in app/helpers/i18n.js"
or something even more dynamic with the resolver.

Without turning on those flags, Embroider behaves conservatively,
slurps up all `app` files eagerly into the primary bundle/chunks.
So, while you _could_ turn on route-based code splitting, there
won't be much to split.

The commits leading up to this involves a bunch of refactors and
cleanups that 1) works perfectly fine in the classic build, 2) are
good and useful in their own right, but also 3) re-arranged things
such that most dependencies are now explicit.

With those in place, I was able to move all the wizard code into
the "app/static" folder. Embroider does not eagerly pull things from
this folder into any bundle, unless something explicitly "asks" for
them via `imports`. Conversely, things from this folder are not
registered with the resolver and are not added to the `loader.js`
registry.

In conjunction with route-based code splitting, we now have the
ability to split out islands of on-demand functionalities from the
main app bundle.

When you split a route in Embroider, it automatically creates a
bundle/entrypoint with the relevant routes/templates/controllers
matching that route prefix. Anything they import will be added to
the bundle as well, assuming they are not already in the main app
bundle, which is where the "app/static" folder comes into play.

The "app/static" folder name is not special. It is configured in
ember-cli-build.js. Alternatively, we could have left everything
in their normal locations, and add more fine-grained paths to the
`staticAppPaths` array. I just thought it would be easy to manage
and scale, and less error-prone to do it this way.

Note that putting things in `app/static` does not guarantee that
it would not be part of the main app bundle. For example, if we
were to add an `import ... from "app/static/wizard/...";` in a
main bundle file (say, `app.js`), then that chunk of the module
graph would be pulled in. (Consider using `await import(...)`?)

Overtime, we can build better tooling (e.g. lint rules and babel
macros to make things less repetitive) as we expand the use of
this pattern, but this is a start.

Co-authored-by: Godfrey Chan <godfreykfc@gmail.com>
2023-12-20 13:15:06 +00:00

383 lines
12 KiB
JavaScript

import { dasherize, decamelize } from "@ember/string";
import Resolver from "ember-resolver";
import deprecated from "discourse-common/lib/deprecated";
import DiscourseTemplateMap from "discourse-common/lib/discourse-template-map";
import { findHelper } from "discourse-common/lib/helpers";
import SuffixTrie from "discourse-common/lib/suffix-trie";
let _options = {};
let moduleSuffixTrie = null;
const DEPRECATED_MODULES = new Map(
Object.entries({
"controller:discovery.categoryWithID": {
newName: "controller:discovery.category",
since: "2.6.0",
},
"controller:discovery.parentCategory": {
newName: "controller:discovery.category",
since: "2.6.0",
},
"controller:tags-show": { newName: "controller:tag-show", since: "2.6.0" },
"controller:tags.show": { newName: "controller:tag.show", since: "2.6.0" },
"controller:tagsShow": { newName: "controller:tagShow", since: "2.6.0" },
"route:discovery.categoryWithID": {
newName: "route:discovery.category",
since: "2.6.0",
},
"route:discovery.parentCategory": {
newName: "route:discovery.category",
since: "2.6.0",
},
"route:tags-show": { newName: "route:tag-show", since: "2.6.0" },
"route:tags.show": { newName: "route:tag.show", since: "2.6.0" },
"route:tagsShow": { newName: "route:tagShow", since: "2.6.0" },
"app-events:main": {
newName: "service:app-events",
since: "2.4.0",
dropFrom: "2.9.0.beta1",
},
// Deprecations below are silenced because they're in widespread use, and upgrading
// themes/plugins right now would break their compatibility with the stable branch.
// These should be unsilenced for the release of 2.9.0 stable.
"store:main": {
newName: "service:store",
since: "2.8.0.beta8",
dropFrom: "2.9.0.beta1",
silent: true,
},
"search-service:main": {
newName: "service:search",
since: "2.8.0.beta8",
dropFrom: "2.9.0.beta1",
silent: true,
},
"key-value-store:main": {
newName: "service:key-value-store",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"pm-topic-tracking-state:main": {
newName: "service:pm-topic-tracking-state",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"message-bus:main": {
newName: "service:message-bus",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"site-settings:main": {
newName: "service:site-settings",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"capabilities:main": {
newName: "service:capabilities",
since: "3.1.0.beta4",
dropFrom: "3.2.0.beta1",
silent: true,
},
"current-user:main": {
newName: "service:current-user",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"session:main": {
newName: "service:session",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"site:main": {
newName: "service:site",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"topic-tracking-state:main": {
newName: "service:topic-tracking-state",
since: "2.9.0.beta7",
dropFrom: "3.0.0",
silent: true,
},
"controller:composer": {
newName: "service:composer",
since: "3.1.0.beta3",
dropFrom: "3.2.0",
silent: true,
},
})
);
export function setResolverOption(name, value) {
_options[name] = value;
}
export function getResolverOption(name) {
return _options[name];
}
export function clearResolverOptions() {
_options = {};
}
function lookupModuleBySuffix(suffix) {
if (!moduleSuffixTrie) {
moduleSuffixTrie = new SuffixTrie("/");
const searchPaths = [
"discourse/", // Includes themes/plugins
"discourse-common/",
"select-kit/",
"admin/",
"truth-helpers/",
];
Object.keys(requirejs.entries).forEach((name) => {
if (
searchPaths.some((s) => name.startsWith(s)) &&
!name.includes("/templates/")
) {
moduleSuffixTrie.add(name);
}
});
}
return (
moduleSuffixTrie.withSuffix(suffix, 1)[0] ||
moduleSuffixTrie.withSuffix(`${suffix}/index`, 1)[0]
);
}
export function expireModuleTrieCache() {
moduleSuffixTrie = null;
}
export function buildResolver(baseName) {
return class extends Resolver {
resolveRouter(/* parsedName */) {
const routerPath = `${baseName}/router`;
if (requirejs.entries[routerPath]) {
const module = requirejs(routerPath, null, null, true);
return module.default;
}
}
// We overwrite this instead of `normalize` so we still get the benefits of the cache.
_normalize(fullName) {
const deprecationInfo = DEPRECATED_MODULES.get(fullName);
if (deprecationInfo) {
if (!deprecationInfo.silent) {
deprecated(
`"${fullName}" is deprecated, use "${deprecationInfo.newName}" instead`,
{
since: deprecationInfo.since,
dropFrom: deprecationInfo.dropFrom,
id: "discourse.resolver-resolutions",
}
);
}
fullName = deprecationInfo.newName;
}
const split = fullName.split(":");
const type = split[0];
let normalized;
if (type === "template" && split[1]?.includes("connectors/")) {
// The default normalize implementation will skip dasherizing component template names
// We need the same for our connector templates names
normalized = "template:" + split[1].replace(/_/g, "-");
} else {
normalized = super._normalize(fullName);
}
// This is code that we don't really want to keep long term. The main situation where we need it is for
// doing stuff like `controllerFor('adminWatchedWordsAction')` where the real route name
// is actually `adminWatchedWords.action`. The default behavior for the former is to
// normalize to `adminWatchedWordsAction` where the latter becomes `adminWatchedWords.action`.
// While these end up looking up the same file ultimately, they are treated as different
// items and so we can end up with two distinct version of the controller!
if (
split.length > 1 &&
(type === "controller" || type === "route" || type === "template")
) {
let corrected;
// This should only apply when there's a dot or slash in the name
if (split[1].includes(".") || split[1].includes("/")) {
// Check to see if the dasherized version exists. If it does we want to
// normalize to that eagerly so the normalized versions of the dotted/slashed and
// dotless/slashless match.
const dashed = dasherize(split[1].replace(/[\.\/]/g, "-"));
const adminBase = `admin/${type}s/`;
if (
lookupModuleBySuffix(`${type}s/${dashed}`) ||
requirejs.entries[adminBase + dashed] ||
requirejs.entries[adminBase + dashed.replace(/^admin[-]/, "")] ||
requirejs.entries[
adminBase + dashed.replace(/^admin[-]/, "").replace(/-/g, "_")
]
) {
corrected = type + ":" + dashed;
}
}
if (corrected && corrected !== normalized) {
normalized = corrected;
}
}
return normalized;
}
chooseModuleName(moduleName, parsedName) {
let resolved = super.chooseModuleName(moduleName, parsedName);
if (resolved) {
return resolved;
}
const standard = parsedName.fullNameWithoutType;
let variants = [standard];
if (standard.includes("/")) {
variants.push(parsedName.fullNameWithoutType.replace(/\//g, "-"));
}
for (let name of variants) {
// If we end with the name we want, use it. This allows us to define components within plugins.
const suffix = parsedName.type + "s/" + name;
resolved = lookupModuleBySuffix(dasherize(suffix));
if (resolved) {
return resolved;
}
}
}
resolveHelper(parsedName) {
return findHelper(parsedName.fullNameWithoutType);
}
// If no match is found here, the resolver falls back to `resolveOther`.
resolveRoute(parsedName) {
if (parsedName.fullNameWithoutType === "basic") {
return requirejs("discourse/routes/discourse", null, null, true)
.default;
}
}
resolveTemplate(parsedName) {
return (
this.findMobileTemplate(parsedName) ||
this.findTemplate(parsedName) ||
this.findAdminTemplate(parsedName) ||
this.findLoadingTemplate(parsedName) ||
this.findConnectorTemplate(parsedName) ||
this.discourseTemplateModule("not_found")
);
}
findLoadingTemplate(parsedName) {
if (parsedName.fullNameWithoutType.match(/loading$/)) {
return this.discourseTemplateModule("loading");
}
}
findConnectorTemplate(parsedName) {
if (parsedName.fullName.startsWith("template:connectors/")) {
const connectorParsedName = this.parseName(
parsedName.fullName
.replace("template:connectors/", "template:")
.replace("components/", "")
);
return this.findTemplate(connectorParsedName);
}
}
findMobileTemplate(parsedName) {
if (_options.mobileView) {
return this.findTemplate(parsedName, "mobile/");
}
}
/**
* Given a template path, this function will return a template, taking into account
* priority rules for theme and plugin overrides. See `lib/discourse-template-map.js`
*/
discourseTemplateModule(name) {
const resolvedName = DiscourseTemplateMap.resolve(name);
if (resolvedName) {
return require(resolvedName).default;
}
}
findTemplate(parsedName, prefix) {
prefix = prefix || "";
const withoutType = parsedName.fullNameWithoutType,
underscored = decamelize(withoutType).replace(/-/g, "_"),
segments = withoutType.split("/");
return (
// Convert dots and dashes to slashes
this.discourseTemplateModule(
prefix + withoutType.replace(/[\.-]/g, "/")
) ||
// Default unmodified behavior of original resolveTemplate.
this.discourseTemplateModule(prefix + withoutType) ||
// Underscored without namespace
this.discourseTemplateModule(prefix + underscored) ||
// Underscored with first segment as directory
this.discourseTemplateModule(prefix + underscored.replace("_", "/")) ||
// Underscore only the last segment
this.discourseTemplateModule(
`${prefix}${segments.slice(0, -1).join("/")}/${segments[
segments.length - 1
].replace(/-/g, "_")}`
) ||
// All dasherized
this.discourseTemplateModule(prefix + withoutType.replace(/\//g, "-"))
);
}
// Try to find a template within a special admin namespace, e.g. adminEmail => admin/templates/email
// (similar to how discourse lays out templates)
findAdminTemplate(parsedName) {
if (parsedName.fullNameWithoutType === "admin") {
return this.discourseTemplateModule("admin/templates/admin");
}
let namespaced, match;
if (parsedName.fullNameWithoutType.startsWith("components/")) {
return (
this.findTemplate(parsedName, "admin/templates/") ||
this.findTemplate(parsedName, "admin/") // Nested under discourse/templates/admin (e.g. from plugins)
);
} else if (/^admin[_\.-]/.test(parsedName.fullNameWithoutType)) {
namespaced = parsedName.fullNameWithoutType.slice(6);
} else if (
(match = parsedName.fullNameWithoutType.match(/^admin([A-Z])(.+)$/))
) {
namespaced = `${match[1].toLowerCase()}${match[2]}`;
}
let resolved;
if (namespaced) {
let adminParsedName = this.parseName(`template:${namespaced}`);
resolved =
this.findTemplate(adminParsedName, "admin/templates/") ||
this.findTemplate(parsedName, "admin/templates/") ||
this.findTemplate(adminParsedName, "admin/"); // Nested under discourse/templates/admin (e.g. from plugin)
}
return resolved;
}
};
}