Bug 1788798 - Support fluent in storybook r=hjones

Depends on D156241

Differential Revision: https://phabricator.services.mozilla.com/D156244

.eslintignore

@@ -42,6 +42,9 @@ browser/components/enterprisepolicies/schemas/schema.jsm
 browser/components/pocket/content/panels/js/tmpl.js
 browser/components/pocket/content/panels/js/vendor.bundle.js
 browser/components/pocket/content/panels/js/main.bundle.js
+# Include the Storybook config files.
+!browser/components/storybook/.storybook/
+!browser/components/storybook/.storybook/*.js
 
 # Ignore newtab files
 browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

browser/components/storybook/.storybook/main.js

@@ -1,32 +1,37 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* eslint-env node */
 
-const path = require('path');
+const path = require("path");
 
 // ./mach environment --format json
 // topobjdir should be the build location
 
 module.exports = {
-  "stories": [
+  stories: [
     "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ],
-  "framework": "@storybook/web-components",
-  "webpackFinal": async (config, { configType }) => {
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: "@storybook/web-components",
+  webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
 
     // Make whatever fine-grained changes you need
     const projectRoot = path.resolve(__dirname, "../../../../");
-    config.resolve.alias["browser"] = `${projectRoot}/browser`;
-    config.resolve.alias["toolkit"] = `${projectRoot}/toolkit`;
-    config.resolve.alias["toolkit-widgets"] = `${projectRoot}/toolkit/content/widgets/`;
+    config.resolve.alias.browser = `${projectRoot}/browser`;
+    config.resolve.alias.toolkit = `${projectRoot}/toolkit`;
+    config.resolve.alias[
+      "toolkit-widgets"
+    ] = `${projectRoot}/toolkit/content/widgets/`;
+
+    config.module.rules.push({
+      test: /\.ftl$/,
+      type: "asset/source",
+    });
 
     config.optimization = {
       splitChunks: false,
@@ -40,7 +45,7 @@ module.exports = {
     // Return the altered config
     return config;
   },
-  "core": {
-    "builder": "webpack5"
-  }
-}
+  core: {
+    builder: "webpack5",
+  },
+};

browser/components/storybook/.storybook/preview.js

@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { DOMLocalization } from "@fluent/dom";
+import { FluentBundle, FluentResource } from "@fluent/bundle";
+
+// Base Fluent set up.
+let storybookBundle = new FluentBundle("en-US");
+let loadedResources = new Set();
+function* generateBundles() {
+  yield* [storybookBundle];
+}
+document.l10n = new DOMLocalization([], generateBundles);
+document.l10n.connectRoot(document.documentElement);
+
+// Any fluent imports should go through MozXULElement.insertFTLIfNeeded.
+window.MozXULElement = {
+  async insertFTLIfNeeded(name) {
+    if (loadedResources.has(name)) {
+      return;
+    }
+
+    // This should be browser or toolkit.
+    let root = name.split("/")[0];
+    let ftlContents;
+    //
+    // TODO(mstriemer): These seem like they could be combined but I don't want
+    // to fight with webpack anymore.
+    if (root == "toolkit") {
+      // eslint-disable-next-line no-unsanitized/method
+      let imported = await import(
+        /* webpackInclude: /.*[\/\\].*\.ftl/ */
+        `toolkit/locales/en-US/${name}`
+      );
+      ftlContents = imported.default;
+    } else if (root == "browser") {
+      // eslint-disable-next-line no-unsanitized/method
+      let imported = await import(
+        /* webpackInclude: /.*[\/\\].*\.ftl/ */
+        `browser/locales/en-US/${name}`
+      );
+      ftlContents = imported.default;
+    }
+
+    if (loadedResources.has(name)) {
+      // Seems possible we've attempted to load this twice before the first call
+      // resolves, so once the first load is complete we can abandon the others.
+      return;
+    }
+
+    let ftlResource = new FluentResource(ftlContents);
+    storybookBundle.addResource(ftlResource);
+    loadedResources.add(name);
+    document.l10n.translateRoots();
+  },
+};
+
+// Most companion elements expect this to be on the page already.
+window.MozXULElement.insertFTLIfNeeded("browser/companion.ftl");

browser/components/storybook/package.json

@@ -12,6 +12,8 @@
   "license": "MPL-2.0",
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@fluent/bundle": "^0.17.1",
+    "@fluent/dom": "^0.8.1",
     "@storybook/addon-actions": "^6.4.8",
     "@storybook/addon-essentials": "^6.4.8",
     "@storybook/addon-links": "^6.4.8",

browser/components/storybook/stories/message-bar.stories.js

@@ -2,14 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// TODO(mstriemer): These stubs should be moved somewhere central, or ideally
-// they wouldn't be needed.
-window.MozXULElement = { insertFTLIfNeeded() {} };
-document.l10n = {
-  connectRoot() {},
-  setAttributes() {},
-};
-
 import { html } from "lit";
 
 import "toolkit-widgets/message-bar.js";