Example of fabricators in app/static/lib

Things in `static/` are not automatically bundled. That means we can async import them, and webpack will build a separate .js bundle.

app/assets/javascripts/discourse/app/lib/load-fabricators.js

@@ -0,0 +1,17 @@
+let fabricators;
+
+/*
+Plugins & themes are unable to async-import directly.
+This wrapper provides them with a way to use fakerjs, while keeping the `import()` in core's codebase.
+*/
+export async function loadFabricators() {
+  fabricators = await import("discourse/static/lib/fabricators");
+  return fabricators;
+}
+
+/**
+ * Return fabricator syncronously. If loadFabricator was not completed first, will return null.
+ */
+export function getFabricators() {
+  return fabricators;
+}

app/assets/javascripts/discourse/app/lib/load-faker.js

@@ -1,7 +0,0 @@
-/*
-Plugins & themes are unable to async-import npm modules directly.
-This wrapper provides them with a way to use fakerjs, while keeping the `import()` in core's codebase.
-*/
-export default async function loadFaker() {
-  return await import("@faker-js/faker");
-}

app/assets/javascripts/discourse/app/static/lib/fabricators.js

@@ -0,0 +1,9 @@
+// This file should only be async imported
+
+import { faker } from "@faker-js/faker";
+
+export default class Fabricator {
+  static generate() {
+    return faker.lorem.lines(4);
+  }
+}

app/assets/javascripts/discourse/tests/loader-shims.js

@@ -6,4 +6,6 @@ loaderShim("pretender", () => importSync("pretender"));
 loaderShim("qunit", () => importSync("qunit"));
 loaderShim("sinon", () => importSync("sinon"));
 loaderShim("ember-qunit", () => importSync("ember-qunit"));
-loaderShim("@faker-js/faker", () => importSync("@faker-js/faker"));
+loaderShim("discourse/static/lib/fabricators", () =>
+  importSync("discourse/lib/fabricators")
+);

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js

@@ -1,18 +1,16 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import { service } from "@ember/service";
+import { getFabricators } from "discourse/lib/load-fabricators";
 import I18n from "discourse-i18n";
 
 export default class extends Component {
-  @service styleguide;
-
   @tracked inline = true;
   @tracked hideHeader = false;
   @tracked dismissable = true;
   @tracked modalTagName = "div";
   @tracked title = I18n.t("styleguide.sections.modal.header");
-  @tracked body = this.styleguide.faker.lorem.lines(5);
+  @tracked body = getFabricators().default.generate();
   @tracked subtitle = "";
   @tracked flash = "";
   @tracked flashType = "success";

plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js

@@ -1,12 +1,10 @@
 import Route from "@ember/routing/route";
-import { service } from "@ember/service";
+import { loadFabricators } from "discourse/lib/load-fabricators";
 import { allCategories } from "discourse/plugins/styleguide/discourse/lib/styleguide";
 
 export default class Styleguide extends Route {
-  @service styleguide;
-
   async model() {
-    await this.styleguide.ensureFakerLoaded(); // So that it can be used synchronously in styleguide components
+    await loadFabricators(); // So that it can be used synchronously in styleguide components
     return allCategories();
   }
 

plugins/styleguide/assets/javascripts/discourse/services/styleguide.js

@@ -1,10 +0,0 @@
-import Service from "@ember/service";
-import loadFaker from "discourse/lib/load-faker";
-
-export default class StyleguideService extends Service {
-  faker;
-
-  async ensureFakerLoaded() {
-    this.faker ||= (await loadFaker()).faker;
-  }
-}