init commit

src/stores/carousel-media-style.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+type Style = 'light' | 'dark' | 'white';
+
+export const carouselMediaStyle = writable<Style>('light');

src/stores/i18n.ts

@@ -0,0 +1,73 @@
+import { readable } from 'svelte/store';
+import I18N from '@amp/web-apps-localization';
+import { getContext } from 'svelte';
+import type { Readable } from 'svelte/store';
+import type { Locale, ILocaleJSON } from '@amp/web-apps-localization';
+import type { Logger, LoggerFactory } from '@amp/web-apps-logger';
+import { isEnabled } from '@amp/web-apps-featurekit';
+
+export type { Locale } from '@amp/web-apps-localization';
+
+import { __FF_SHOW_LOC_KEYS } from '~/utils/features/consts';
+
+const CONTEXT_NAME = 'i18n';
+
+export async function setup(
+    context: Map<string, unknown>,
+    loggerFactory: LoggerFactory,
+    locale: Locale,
+): Promise<I18N> {
+    const log = loggerFactory.loggerFor('i18n');
+
+    let alwaysShowScreamers = false;
+    if (isEnabled(__FF_SHOW_LOC_KEYS)) {
+        alwaysShowScreamers = true;
+    }
+
+    const translations = await getTranslations(log, locale);
+    const i18n = new I18N(log, locale, translations, alwaysShowScreamers);
+    const store = readable(i18n);
+
+    context.set(CONTEXT_NAME, store);
+
+    return i18n;
+}
+
+/**
+ * Gets the current i18n store from the Svelte context.
+ *
+ * @return i18n The i18n store
+ */
+export function getI18n(): Readable<I18N> {
+    const i18n = getContext(CONTEXT_NAME) as Readable<I18N> | undefined;
+
+    if (!i18n) {
+        throw new Error('getI18n called before setup');
+    }
+
+    return i18n;
+}
+
+async function getTranslations(
+    log: Logger,
+    locale: Locale,
+): Promise<ILocaleJSON> {
+    try {
+        // TODO: Shoebox logic here
+        const translations = await importLocale(locale);
+        return translations.default;
+    } catch (err) {
+        log.error('failed to load:', err);
+        throw new Error('i18n failed to load');
+    }
+}
+
+interface IDynamicImportJSON {
+    default: ILocaleJSON;
+}
+
+//TODO: rdar://73157638 (Determine if we can use ES modules based on browser matrix)
+// Possibly switch this to fetch instead of dynamic imports?
+function importLocale(locale: Locale): Promise<IDynamicImportJSON> {
+    return import(`../../tmp/locales/${locale}/translations.json`);
+}

src/stores/modalPage.ts

@@ -0,0 +1,35 @@
+import type { GenericPage } from '@jet-app/app-store/api/models';
+import { type Writable, writable, type Readable } from 'svelte/store';
+
+interface Page {
+    page: GenericPage;
+    pageDetail?: string;
+}
+
+const modalPageStore: Writable<Page | undefined> = (() => {
+    // prevent global store on the server
+    if (typeof window === 'undefined') {
+        return {
+            subscribe: () => {
+                return () => {};
+            },
+            set: () => {},
+            update: () => {},
+        } as unknown as Writable<Page | undefined>;
+    }
+
+    return writable();
+})();
+
+interface ModalPageStore extends Readable<Page | undefined> {
+    setPage: (page: Page) => void;
+    clearPage: () => void;
+}
+
+export const getModalPageStore = (): ModalPageStore => {
+    return {
+        subscribe: modalPageStore.subscribe,
+        setPage: (page) => modalPageStore.set(page),
+        clearPage: () => modalPageStore.set(undefined),
+    };
+};