mirror of
https://github.com/discourse/discourse.git
synced 2024-12-12 12:23:46 +08:00
cbc28e8e33
(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>
103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
const pluginRegex = /^discourse\/plugins\/([^\/]+)\/(.*)$/;
|
|
const themeRegex = /^discourse\/theme-([^\/]+)\/(.*)$/;
|
|
|
|
function appendToCache(cache, key, value) {
|
|
let cachedValue = cache.get(key);
|
|
cachedValue ??= [];
|
|
cachedValue.push(value);
|
|
cache.set(key, cachedValue);
|
|
}
|
|
|
|
const NAMESPACES = ["discourse/", "admin/"];
|
|
|
|
function isInRecognisedNamespace(moduleName) {
|
|
for (const ns of NAMESPACES) {
|
|
if (moduleName.startsWith(ns)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function isTemplate(moduleName) {
|
|
return moduleName.includes("/templates/");
|
|
}
|
|
|
|
/**
|
|
* This class provides takes set of core/plugin/theme modules, finds the template modules,
|
|
* and makes an efficient lookup table for the resolver to use. It takes care of sourcing
|
|
* component/route templates from themes/plugins, and also handles template overrides.
|
|
*/
|
|
class DiscourseTemplateMap {
|
|
coreTemplates = new Map();
|
|
pluginTemplates = new Map();
|
|
themeTemplates = new Map();
|
|
prioritizedCaches = [
|
|
this.themeTemplates,
|
|
this.pluginTemplates,
|
|
this.coreTemplates,
|
|
];
|
|
|
|
/**
|
|
* Reset the TemplateMap to use the supplied module names. It is expected that the list
|
|
* will be generated using `Object.keys(requirejs.entries)`.
|
|
*/
|
|
setModuleNames(moduleNames) {
|
|
this.coreTemplates.clear();
|
|
this.pluginTemplates.clear();
|
|
this.themeTemplates.clear();
|
|
for (const moduleName of moduleNames) {
|
|
if (isInRecognisedNamespace(moduleName) && isTemplate(moduleName)) {
|
|
this.#add(moduleName);
|
|
}
|
|
}
|
|
}
|
|
|
|
#add(originalPath) {
|
|
let path = originalPath;
|
|
|
|
let pluginMatch, themeMatch, cache;
|
|
if ((pluginMatch = path.match(pluginRegex))) {
|
|
path = pluginMatch[2];
|
|
cache = this.pluginTemplates;
|
|
} else if ((themeMatch = path.match(themeRegex))) {
|
|
path = themeMatch[2];
|
|
cache = this.themeTemplates;
|
|
} else {
|
|
cache = this.coreTemplates;
|
|
}
|
|
|
|
path = path.replace(/^discourse\/templates\//, "");
|
|
|
|
appendToCache(cache, path, originalPath);
|
|
}
|
|
|
|
/**
|
|
* Resolve a template name to a module name, taking into account
|
|
* theme/plugin namespaces and overrides.
|
|
*/
|
|
resolve(name) {
|
|
for (const cache of this.prioritizedCaches) {
|
|
const val = cache.get(name);
|
|
if (val) {
|
|
return val[val.length - 1];
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* List all available template keys, after theme/plugin namespaces have
|
|
* been stripped.
|
|
*/
|
|
keys() {
|
|
const uniqueKeys = new Set([
|
|
...this.coreTemplates.keys(),
|
|
...this.pluginTemplates.keys(),
|
|
...this.themeTemplates.keys(),
|
|
]);
|
|
return [...uniqueKeys];
|
|
}
|
|
}
|
|
|
|
export default new DiscourseTemplateMap();
|