From 1df97e86c13374d1de865a26394acfac5da2481a Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 5 Apr 2024 16:57:17 +0100
Subject: [PATCH] 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 |  7 +++++++
 app/assets/javascripts/discourse/package.json          |  1 +
 app/assets/javascripts/discourse/tests/loader-shims.js |  1 +
 .../discourse/components/sections/organisms/modal.js   |  5 ++++-
 .../assets/javascripts/discourse/routes/styleguide.js  |  6 +++++-
 .../javascripts/discourse/services/styleguide.js       | 10 ++++++++++
 yarn.lock                                              |  5 +++++
 7 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/lib/load-faker.js
 create mode 100644 plugins/styleguide/assets/javascripts/discourse/services/styleguide.js

diff --git a/app/assets/javascripts/discourse/app/lib/load-faker.js b/app/assets/javascripts/discourse/app/lib/load-faker.js
new file mode 100644
index 00000000000..beb128de591
--- /dev/null
+++ b/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");
+}
diff --git a/app/assets/javascripts/discourse/package.json b/app/assets/javascripts/discourse/package.json
index 1ad676851ae..f869dfc084e 100644
--- a/app/assets/javascripts/discourse/package.json
+++ b/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",
diff --git a/app/assets/javascripts/discourse/tests/loader-shims.js b/app/assets/javascripts/discourse/tests/loader-shims.js
index 39ccb753492..57023568f68 100644
--- a/app/assets/javascripts/discourse/tests/loader-shims.js
+++ b/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"));
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js
index 433808a3c27..b0ebcea4496 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js
+++ b/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";
diff --git a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
index cdbd22d54bb..abb5a486b0a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
+++ b/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();
   }
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/services/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/services/styleguide.js
new file mode 100644
index 00000000000..c4688eb6149
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e5d741565fd..046e175cc56 100644
--- a/yarn.lock
+++ b/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"