feat: more hot garbage

packages/website/src/components/Gallery/List.tsx

@@ -1,4 +1,4 @@
-import locales from '@blitzkit/i18n/locales.json';
+import locales from '@blitzkit/i18n/locales.json' with { type: 'json' };
 import { literals } from '@blitzkit/i18n/src/literals';
 import { Flex, Text } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';

packages/website/src/components/HomeHero.astro

@@ -7,10 +7,10 @@ import type { BlitzKitStrings } from 'packages/i18n/src';
 
 interface Props {
   locale: string;
-  strings: BlitzKitStrings;
 }
 
-const { strings, locale } = Astro.props;
+const { locale } = Astro.props;
+const strings = await getStrings(locale);
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
 ---

packages/website/src/components/TanksEmbed.tsx

@@ -6,7 +6,6 @@ import {
   type CompositeStats,
   type CompositeStatsKey,
 } from '@blitzkit/core';
-import strings from '@blitzkit/i18n/strings/en.json';
 import { amberDark, blueDark } from '@radix-ui/colors';
 import { Flex, Text, type FlexProps } from '@radix-ui/themes';
 import { times } from 'lodash-es';
@@ -53,7 +52,7 @@ export function BreakdownEmbedCard({
 }: BreakdownEmbedCardProps) {
   const { useEmbedState, useRichText } =
     useEmbedStateCurry<typeof breakdownConfig>();
-  const { unwrap } = useLocale();
+  const { unwrap, strings } = useLocale();
 
   return (
     <Flex

packages/website/src/components/TestComponent.tsx

@@ -1,3 +1,9 @@
+import { useEffect } from 'react';
+
 export function TestComponent({ data }: { data: any }) {
+  useEffect(() => {
+    console.log(data);
+  }, []);
+
   return 'TestComponent';
 }

packages/website/src/core/blitz/discreteMetadata.ts

@@ -0,0 +1,3 @@
+import { DiscreteMetadataAccessor } from 'packages/core/src';
+
+export const discreteMetadata = new DiscreteMetadataAccessor('/api/catalog');

packages/website/src/core/blitz/unpackedMetadata.ts

@@ -1,11 +1,8 @@
-import {
-  MetadataAccessor,
-  requestAutoProxyClient,
-  unpackMetadata,
-} from '@blitzkit/closed';
+import { requestAutoProxyClient, unpackMetadata } from '@blitzkit/closed';
 import type { GetPackedMetadataAsyncResponse } from '@blitzkit/closed/src/unreal/protos/auto_legacy_proxy_client';
+import { UnpackedMetadataAccessor } from 'packages/core/src';
 
-export const metadata = new MetadataAccessor(
+export const unpackedMetadata = new UnpackedMetadataAccessor(
   await requestAutoProxyClient<GetPackedMetadataAsyncResponse>(
     'GetPackedMetadataAsyncRequest',
   ).then(unpackMetadata),

packages/website/src/core/i18n/getStrings.ts

@@ -1,6 +1,8 @@
-import { STRINGS, type SupportedLocale } from '@blitzkit/i18n';
+import en from '@strings/en.json' with { type: 'json' };
+import { merge } from 'lodash-es';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 
-export function getStrings(locale: string) {
-  if (locale in STRINGS) return STRINGS[locale as SupportedLocale];
-  throw new Error(`Unsupported locale: ${locale}`);
+export async function getStrings(locale: string) {
+  const strings = await import(`../../../../i18n/strings/${locale}.json`);
+  return merge({}, en, strings) as BlitzKitStrings;
 }

packages/website/src/hooks/useLocale.tsx

@@ -1,41 +1,30 @@
-import { type BlitzKitStrings } from '@blitzkit/i18n';
-import { createContext, useContext, type ReactNode } from 'react';
-
-interface LocaleContextContent {
-  locale: string;
-  strings: BlitzKitStrings;
-  gameStrings: Record<string, string>;
-}
-
-type LocaleContextData = Omit<LocaleContextContent, 'gameStrings'> & {
-  gameStrings?: Record<string, string>;
-};
-
-const LocaleContext = createContext<LocaleContextContent | null>(null);
+import locales from '@blitzkit/i18n/locales.json' with { type: 'json' };
+import type { BlitzKitStrings } from 'packages/i18n/src';
+import { createContext, use, useContext } from 'react';
+const LocaleContext = createContext<string | null>(null);
 
 interface LocaleProviderProps {
-  data: LocaleContextData;
-  children: ReactNode;
+  locale: string;
+  children: React.ReactNode;
 }
 
-export function LocaleProvider({ data, children }: LocaleProviderProps) {
+export function LocaleProvider({ locale, children }: LocaleProviderProps) {
+  const isSupported = locales.supported.some(
+    (supported) => supported.locale === locale,
+  );
+
+  if (!isSupported) throw new Error(`Unsupported locale: ${locale}`);
+
   return (
-    <LocaleContext.Provider value={{ gameStrings: {}, ...data }}>
-      {children}
-    </LocaleContext.Provider>
+    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
   );
 }
 
 export function useLocale() {
-  const context = useContext(LocaleContext);
+  const locale = useContext(LocaleContext);
+  const strings = use<BlitzKitStrings>(
+    fetch(`/api/strings/${locale}.json`).then((response) => response.json()),
+  );
 
-  if (!context) {
-    throw new Error('useLocale must be used within a LocaleProvider');
-  }
-
-  return context;
-}
-
-export interface LocaleAcceptorProps {
-  localeContext: LocaleContextContent;
+  return { locale, strings };
 }

packages/website/src/layouts/BaseLayout.astro

@@ -7,16 +7,17 @@ import Navbar from '../components/Navbar.astro';
 import Party3 from '../components/Party3.astro';
 import './base.css';
 import type { BlitzKitStrings } from 'packages/i18n/src';
+import { getStrings } from '../core/i18n/getStrings';
 
 export interface Props {
   noFooter?: boolean;
   noNavbar?: boolean;
   integrated?: boolean;
   locale: string;
-  strings: BlitzKitStrings;
 }
 
-const { noFooter, noNavbar, integrated, locale, strings } = Astro.props;
+const { noFooter, noNavbar, integrated, locale } = Astro.props;
+const strings = await getStrings(locale);
 ---
 
 <html lang={locale}>
@@ -30,25 +31,26 @@ const { noFooter, noNavbar, integrated, locale, strings } = Astro.props;
     <Party3 />
 
     <script>
-      import { SUPPORTED_LOCALES } from '@blitzkit/i18n';
+      import locales from '@blitzkit/i18n/locales.json' with { type: 'json' };
       import { getBestLocale } from '../core/i18n/getBestLocale';
       const isAPI = window.location.pathname.startsWith('/api');
-      const isI18nPath = SUPPORTED_LOCALES.some((locale) =>
+      const isI18nPath = locales.supported.some(({ locale }) =>
         window.location.pathname.startsWith(`/${locale}`),
       );
       const bestLocale = getBestLocale();
-      const currentPathLocale = SUPPORTED_LOCALES.find((locale) =>
+      const currentPathLocale = locales.supported.find(({ locale }) =>
         window.location.pathname.startsWith(`/${locale}`),
       );
 
       if (
         !isAPI && // not an api, duh!
         localStorage.getItem('preferred-locale') !== null && // no preference, so probably google's crawler
-        bestLocale !== currentPathLocale // we need to redirect
+        currentPathLocale &&
+        bestLocale !== currentPathLocale.locale // we need to redirect
       ) {
         window.location.pathname = isI18nPath
           ? window.location.pathname.replace(
-              `/${currentPathLocale}`,
+              `/${currentPathLocale.locale}`,
               bestLocale === undefined ? '' : `/${bestLocale}`,
             )
           : `/${bestLocale}${window.location.pathname}`;

packages/website/src/pages/[...locale]/index.astro

@@ -1,8 +1,7 @@
 ---
 import { AstroSeo } from '@astrolib/seo';
 import { assertSecret } from '@blitzkit/core';
-import { DEFAULT_LOCALE, STRINGS, type SupportedLocale } from '@blitzkit/i18n';
-import locales from '@blitzkit/i18n/locales.json';
+import locales from '@blitzkit/i18n/locales.json' with { type: 'json' };
 import { literals } from '@blitzkit/i18n/src/literals';
 import { Box, Flex, Heading, Link } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
@@ -21,20 +20,18 @@ import {
   tankopediaTool,
   tierListTool,
 } from '../../constants/tools';
+import { getStrings } from '../../core/i18n/getStrings';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH);
-const { strings, locale } = Astro.props;
+const { locale } = Astro.props;
+const strings = await getStrings(locale);
 
 export const getStaticPaths = (() => {
   return locales.supported.map(({ locale, blitz }) => {
     return {
       params: { locale: locale === locales.default ? undefined : locale },
-      props: {
-        locale,
-        strings: STRINGS[locale as SupportedLocale],
-        blitzLocale: blitz ?? locale,
-      },
+      props: { locale, blitzLocale: blitz ?? locale },
     };
   });
 }) satisfies GetStaticPaths;
@@ -53,8 +50,8 @@ export const getStaticPaths = (() => {
   twitter={{ cardType: 'summary_large_image' }}
 />
 
-<BaseLayout {locale} {strings}>
-  <HomeHero {locale} {strings} />
+<BaseLayout {locale}>
+  <HomeHero {locale} />
 
   <!-- <Flex justify="center" py="6" px="4" justify="center">
     <Flex
@@ -73,7 +70,7 @@ export const getStaticPaths = (() => {
   </Flex> -->
 
   {
-    locale !== DEFAULT_LOCALE && (
+    locale !== locales.default && (
       <Flex justify="center" mb="4">
         <Link
           href="https://crowdin.com/project/blitzkrieg"

packages/website/src/pages/[...locale]/tanks-ue/[slug]/index.astro

@@ -5,29 +5,30 @@ import type {
   TankCatalogComponent,
 } from '@blitzkit/closed/src/unreal/protos';
 import { slugify } from '@blitzkit/core';
-import locales from '@blitzkit/i18n/locales.json';
+import locales from '@blitzkit/i18n/locales.json' with { type: 'json' };
 import type { GetStaticPaths } from 'astro';
 import { tankToSet } from 'packages/website/src/core/blitz/tankToSet';
 import type { TankopediaEphemeral_ue } from 'packages/website/src/stores/tankopediaEphemeral_ue';
-import { metadata } from '../../../../core/blitz/metadata';
+import { unpackedMetadata } from '../../../../core/blitz/unpackedMetadata';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
 import { Page } from './_index';
 
 export const getStaticPaths = (async () => {
-  const tanks = await metadata.getComponent<CatalogItemsComponent>(
+  const tanks = await unpackedMetadata.getComponent<CatalogItemsComponent>(
     'CatalogItemsGroupEntity.all_tanks',
     'catalogItemsGroupComponent',
   );
-  const gameStringsDefault = await metadata.stringsSubset(locales.default, [
-    'TankEntity',
-  ]);
+  const gameStringsDefault = await unpackedMetadata.stringsSubset(
+    locales.default,
+    ['TankEntity'],
+  );
   const parentPaths = parentGetStaticPaths();
 
   return (
     await Promise.all(
       tanks.catalog_items.map(async (item) => {
-        const tank = await metadata.get(item).then((components) => {
+        const tank = await unpackedMetadata.get(item).then((components) => {
           return components.get<TankCatalogComponent>('tankCatalogComponent');
         });
         const nameEn = gameStringsDefault[tank.name!.value];
@@ -45,11 +46,11 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 const { entity, locale, strings, blitzLocale } = Astro.props;
-const set = await tankToSet(metadata, entity);
-const gameStrings = await metadata.stringsSubset(blitzLocale, [
+const set = await tankToSet(unpackedMetadata, entity);
+const gameStrings = await unpackedMetadata.stringsSubset(blitzLocale, [
   set.tank_set_ui!.tank_set_displayed_name,
 ]);
-const tankEntity = await metadata.get(entity);
+const tankEntity = await unpackedMetadata.get(entity);
 const tank = await tankEntity.get<TankCatalogComponent>('tankCatalogComponent');
 const compensation = await tankEntity.get<CompensationComponent>(
   'compensationComponent',

packages/website/src/pages/[...locale]/tanks-ue/_index.astro

@@ -0,0 +1,21 @@
+---
+import { CatalogItemsComponent } from '@protos/blitz_static_catalog_items_group_component';
+import { Link } from '@radix-ui/themes';
+import { PageWrapper } from 'packages/website/src/components/PageWrapper';
+import { unpackedMetadata } from 'packages/website/src/core/blitz/unpackedMetadata';
+import BaseLayout from 'packages/website/src/layouts/BaseLayout.astro';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.props;
+
+const allTanks = unpackedMetadata
+  .get('CatalogItemsGroupEntity.all_tanks')
+  .get(CatalogItemsComponent, 'catalogItemsGroupComponent');
+---
+
+<BaseLayout {locale}>
+  <PageWrapper>
+    {allTanks.catalog_items.map((tank) => <Link>{tank}</Link>)}
+  </PageWrapper>
+</BaseLayout>

packages/website/src/pages/[...locale]/tanks-ue/index.astro

@@ -1,52 +1,17 @@
 ---
-import { slugify } from '@blitzkit/core';
-import locales from '@blitzkit/i18n/locales.json';
-import type { CatalogItemsComponent } from '@protos/blitz_static_catalog_items_group_component';
-import { TankCatalogComponent } from '@protos/blitz_static_tank_component';
+import { CatalogItemsComponent } from '@protos/blitz_static_catalog_items_group_component';
 import { TestComponent } from 'packages/website/src/components/TestComponent';
-import { metadata } from '../../../core/blitz/metadata';
+import { unpackedMetadata } from 'packages/website/src/core/blitz/unpackedMetadata';
+import { getStrings } from 'packages/website/src/core/i18n/getStrings';
 
 export { getStaticPaths } from '../index.astro';
 
-const { blitzLocale } = Astro.props;
-const allTanks = await metadata.getComponent<CatalogItemsComponent>(
-  'CatalogItemsGroupEntity.all_tanks',
-  'catalogItemsGroupComponent',
-);
-const gameStrings = await metadata.stringsSubset(blitzLocale, ['TankEntity']);
-const gameStringsDefault = await metadata.stringsSubset(locales.default, [
-  'TankEntity',
-]);
-const tanks: { tank: TankCatalogComponent; slug: string; id: string }[] = [];
+const { locale } = Astro.props;
+const strings = await getStrings(locale);
 
-for (const tankComponentId of allTanks.catalog_items) {
-  const tank = await metadata.getComponent<TankCatalogComponent>(
-    tankComponentId,
-    'tankCatalogComponent',
-  );
-
-  if (tank.name === undefined) {
-    continue;
-  }
-
-  const nameEn = gameStringsDefault[tank.name.value];
-  const slug = slugify(nameEn);
-
-  tanks.push({ tank, slug, id: tankComponentId });
-}
+const allTanks = unpackedMetadata
+  .get('CatalogItemsGroupEntity.all_tanks')
+  .get(CatalogItemsComponent, 'catalogItemsGroupComponent');
 ---
 
-<TestComponent client:load data={metadata} />
-
-{
-  tanks.map(({ tank, slug, id }) => {
-    return (
-      <>
-        <a href={`/tanks-ue/${slug}`}>
-          {gameStrings[tank.name!.value] ?? `MISSING NAME (${id})`}
-        </a>
-        <br />
-      </>
-    );
-  })
-}
+<TestComponent client:load data={allTanks} />

packages/website/src/stores/tankPerformanceSort/constants.ts

@@ -1,4 +1,4 @@
-import en from '@blitzkit/i18n/strings/en.json';
+import en from '@blitzkit/i18n/strings/en.json' with { type: 'json' };
 import type { TankPerformanceSortType } from '.';
 
 export const TankPerformanceSortTypeNamesArray = Object.keys(

packages/website/src/stores/tankPerformanceSort/index.ts

@@ -1,9 +1,9 @@
-import type en from '@blitzkit/i18n/strings/en.json';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 import { create } from 'zustand';
 import { createContextualStore } from '../../core/zustand/createContextualStore';
 
 export type TankPerformanceSortType =
-  keyof typeof en.website.tools.performance.table.stats;
+  keyof BlitzKitStrings['website']['tools']['performance']['table']['stats'];
 
 export interface TankPerformanceSort {
   type: TankPerformanceSortType;

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,10 +1,11 @@
-import type en from '@blitzkit/i18n/strings/en.json';
 import * as lodash from 'lodash-es';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { createContextualStore } from '../../core/zustand/createContextualStore';
 
-export type TankopediaSortBy = keyof typeof en.website.common.tank_search.sort;
+export type TankopediaSortBy =
+  keyof BlitzKitStrings['website']['common']['tank_search']['sort'];
 export type TankopediaSortDirection = 'ascending' | 'descending';
 export type TankopediaTestTankDisplay = 'include' | 'exclude' | 'only';