📦 externalized portal locales

apps/portal/src/App.js

@@ -1,3 +1,4 @@
+// @ts-check
 import React from 'react';
 import * as Sentry from '@sentry/react';
 import TriggerButton from './components/TriggerButton';
@@ -15,7 +16,7 @@ import './App.css';
 import {hasRecommendations, allowCompMemberUpgrade, createPopupNotification, hasAvailablePrices, getCurrencySymbol, getFirstpromoterId, getPriceIdFromPageQuery, getProductCadenceFromPrice, getProductFromId, getQueryPrice, getSiteDomain, isActiveOffer, isComplimentaryMember, isInviteOnly, isPaidMember, isRecentMember, isSentryEventAllowed, removePortalLinkFromUrl} from './utils/helpers';
 import {handleDataAttributes} from './data-attributes';
 
-import i18nLib from '@tryghost/i18n';
+import {createAsyncInstance} from '@tryghost/i18n/browser.mjs';
 
 const DEV_MODE_DATA = {
     showPopup: true,
@@ -191,10 +192,18 @@ export default class App extends React.Component {
     /** Initialize portal setup on load, fetch data and setup state*/
     async initSetup() {
         try {
+            // i18n should be initialized in only one location, so create the instance before performing any async operations
+            const baseLocale = (this.props.siteI18nEnabled && this.props.locale) || 'en';
+            const i18n = createAsyncInstance('portal', baseLocale, this.props.localeRoot);
+
             // Fetch data from API, links, preview, dev sources
             const {site, member, page, showPopup, popupNotification, lastPage, pageQuery, pageData} = await this.fetchData();
-            const i18nLanguage = this.props.siteI18nEnabled ? this.props.locale || site.locale || 'en' : 'en';
-            const i18n = i18nLib(i18nLanguage, 'portal');
+
+            const localeWithSite = this.props.siteI18nEnabled && !this.props.locale && site.locale;
+
+            if (localeWithSite && baseLocale !== localeWithSite) {
+                i18n.changeLanguage(localeWithSite);
+            }
 
             const state = {
                 site,
@@ -209,7 +218,7 @@ export default class App extends React.Component {
                 dir: i18n.dir() || 'ltr',
                 action: 'init:success',
                 initStatus: 'success',
-                locale: i18nLanguage
+                locale: localeWithSite || baseLocale
             };
 
             this.handleSignupQuery({site, pageQuery, member});

apps/portal/src/data-attributes.js

@@ -1,7 +1,8 @@
+// @ts-check
 /* eslint-disable no-console */
 import {getCheckoutSessionDataFromPlanAttribute, getUrlHistory} from './utils/helpers';
 import {HumanReadableError, chooseBestErrorMessage} from './utils/errors';
-import i18nLib from '@tryghost/i18n';
+import {getAsyncInstance} from '@tryghost/i18n/browser.mjs';
 
 export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler},
     t = (str) => {
@@ -94,10 +95,7 @@ export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler}
     });
 }
 
-export function planClickHandler({event, el, errorEl, siteUrl, site, member, clickHandler}) {
-    const i18nLanguage = site.locale | 'en';
-    const i18n = i18nLib(i18nLanguage, 'portal');
-    const t = i18n.t;
+export function planClickHandler({event, el, errorEl, siteUrl, site, member, clickHandler, t}) {
     el.removeEventListener('click', clickHandler);
     event.preventDefault();
     let plan = el.dataset.membersPlan;
@@ -178,9 +176,7 @@ export function planClickHandler({event, el, errorEl, siteUrl, site, member, cli
 }
 
 export function handleDataAttributes({siteUrl, site, member}) {
-    const i18nLanguage = site.locale | 'en';
-    const i18n = i18nLib(i18nLanguage, 'portal');
-    const t = i18n.t;
+    const {t} = getAsyncInstance('portal');
     if (!siteUrl) {
         return;
     }
@@ -196,7 +192,7 @@ export function handleDataAttributes({siteUrl, site, member}) {
     Array.prototype.forEach.call(document.querySelectorAll('[data-members-plan]'), function (el) {
         let errorEl = el.querySelector('[data-members-error]');
         function clickHandler(event) {
-            planClickHandler({el, event, errorEl, member, site, siteUrl, clickHandler});
+            planClickHandler({el, event, errorEl, member, site, siteUrl, clickHandler, t});
         }
         el.addEventListener('click', clickHandler);
     });

apps/portal/src/index.js

@@ -22,7 +22,18 @@ function getSiteData() {
         const apiKey = scriptTag.dataset.key;
         const apiUrl = scriptTag.dataset.api;
         const locale = scriptTag.dataset.locale; // not providing a fallback here but will do it within the app.
-        return {siteUrl, apiKey, apiUrl, siteI18nEnabled, locale};
+        let localeRoot = scriptTag.dataset.localeRoot ?? './locales';
+
+        // CASE: The root is based on the current script, resolve it
+        if (localeRoot.startsWith('.')) {
+            const currentPath = import.meta.url.slice(0, import.meta.url.lastIndexOf('/'));
+            localeRoot = new URL(localeRoot, currentPath).href;
+        }
+
+        // Remove the trailing slash since it's not needed by our i18n implementation
+        localeRoot = localeRoot.replace(/\/$/, '');
+
+        return {siteUrl, apiKey, apiUrl, siteI18nEnabled, locale, localeRoot};
     }
     return {};
 }
@@ -42,12 +53,12 @@ function setup() {
 
 function init() {
     // const customSiteUrl = getSiteUrl();
-    const {siteUrl: customSiteUrl, apiKey, apiUrl, siteI18nEnabled, locale} = getSiteData();
+    const {siteUrl: customSiteUrl, apiKey, apiUrl, siteI18nEnabled, locale, localeRoot} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
     ReactDOM.render(
         <React.StrictMode>
-            <App siteUrl={siteUrl} customSiteUrl={customSiteUrl} apiKey={apiKey} apiUrl={apiUrl} siteI18nEnabled={siteI18nEnabled} locale={locale}/>
+            <App siteUrl={siteUrl} customSiteUrl={customSiteUrl} apiKey={apiKey} apiUrl={apiUrl} siteI18nEnabled={siteI18nEnabled} locale={locale} localeRoot={localeRoot} />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );

apps/portal/vite.config.js

@@ -5,11 +5,10 @@ import {defineConfig} from 'vitest/config';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 import reactPlugin from '@vitejs/plugin-react';
 import svgrPlugin from 'vite-plugin-svgr';
+import {ghostI18nPlugin} from '@tryghost/i18n/plugin.js';
 
 import pkg from './package.json';
 
-import {SUPPORTED_LOCALES} from '@tryghost/i18n';
-
 export default defineConfig((config) => {
     const outputFileName = pkg.name[0] === '@' ? pkg.name.slice(pkg.name.indexOf('/') + 1) : pkg.name;
 
@@ -30,7 +29,8 @@ export default defineConfig((config) => {
         plugins: [
             cssInjectedByJsPlugin(),
             reactPlugin(),
-            svgrPlugin()
+            svgrPlugin(),
+            ghostI18nPlugin('portal', 'opt-in'),
         ],
         esbuild: {
             loader: 'jsx',
@@ -69,11 +69,6 @@ export default defineConfig((config) => {
                 output: {
                     manualChunks: false
                 }
-            },
-            commonjsOptions: {
-                include: [/ghost/, /node_modules/],
-                dynamicRequireRoot: '../../',
-                dynamicRequireTargets: SUPPORTED_LOCALES.map(locale => `../../ghost/i18n/locales/${locale}/portal.json`)
             }
         },
         test: {

ghost/core/core/frontend/helpers/ghost_head.js

@@ -69,7 +69,7 @@ function getMembersHelper(data, frontendKey, excludeList) {
             attributes['accent-color'] = colorString;
         }
         const dataAttributes = getDataAttributes(attributes);
-        membersHelper += `<script defer src="${scriptUrl}" ${dataAttributes} crossorigin="anonymous"></script>`;
+        membersHelper += `<script type="module" defer src="${scriptUrl}" ${dataAttributes} crossorigin="anonymous"></script>`;
     }
     if (!excludeList.has('cta_styles')) {
         membersHelper += (`<style id="gh-members-styles">${templateStyles}</style>`);