DEV: Introduce faker.js for use in tests & styleguide (#26533)

Available as a normal synchronous module in tests
Available as an async import in core, or via the `loadFaker` helper in themes/plugins (which cannot use async import directly)

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

@@ -0,0 +1,7 @@
+/*
+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/package.json

@@ -16,6 +16,7 @@
     "postinstall": "../run-patch-package"
   },
   "dependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@glimmer/syntax": "^0.91.1",
     "@highlightjs/cdn-assets": "^11.9.0",
     "discourse-hbr": "1.0.0",

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

@@ -6,3 +6,4 @@ 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"));

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

@@ -1,15 +1,18 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 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.args.dummy.shortLorem;
+  @tracked body = this.styleguide.faker.lorem.lines(5);
   @tracked subtitle = "";
   @tracked flash = "";
   @tracked flashType = "success";

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

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

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

@@ -0,0 +1,10 @@
+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;
+  }
+}

yarn.lock

@@ -1577,6 +1577,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@faker-js/faker@^8.4.1":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.4.1.tgz#5d5e8aee8fce48f5e189bf730ebd1f758f491451"
+  integrity sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
+
 "@floating-ui/core@^1.0.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"