feat: initial

Author: maxprilutskiy

cmp/compiler/package.json

@@ -12,6 +12,10 @@
     "./vite": {
       "types": "./dist/vite.d.ts",
       "import": "./dist/vite.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
     }
   },
   "scripts": {
@@ -32,8 +36,13 @@
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^24.10.1",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",
     "vite": "^7.2.4"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
   }
 }

cmp/compiler/src/react.tsx

@@ -0,0 +1,62 @@
+import {
+  createContext,
+  use,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+
+interface LingoCompilerContextValue {
+  locale: string;
+  translations: Record<string, any>;
+}
+
+const LingoCompilerContext = createContext<LingoCompilerContextValue | null>(null);
+
+interface LingoCompilerProps {
+  locale: string;
+  children: ReactNode;
+}
+
+// Cache to prevent duplicate fetches
+const translationCache = new Map<string, Promise<Record<string, any>>>();
+
+function fetchTranslations(locale: string): Promise<Record<string, any>> {
+  if (translationCache.has(locale)) {
+    return translationCache.get(locale)!;
+  }
+
+  const isDev = process.env.NODE_ENV === 'development';
+  const url = isDev
+    ? `http://localhost:3001/i18n?locale=${locale}`
+    : `/i18n/${locale}.json`;
+
+  const promise = fetch(url).then((res) => {
+    if (!res.ok) {
+      throw new Error(`Failed to fetch translations for locale: ${locale}`);
+    }
+    return res.json();
+  });
+
+  translationCache.set(locale, promise);
+  return promise;
+}
+
+export function LingoCompiler({ locale, children }: LingoCompilerProps) {
+  const i18nPromise = useMemo(() => fetchTranslations(locale), [locale]);
+  const translations = use(i18nPromise);
+
+  return (
+    <LingoCompilerContext.Provider value={{ locale, translations }}>
+      {children}
+    </LingoCompilerContext.Provider>
+  );
+}
+
+export function useLingoCompiler() {
+  const context = useContext(LingoCompilerContext);
+  if (!context) {
+    throw new Error('useLingoCompiler must be used within LingoCompiler');
+  }
+  return context;
+}

cmp/compiler/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

cmp/compiler/tsup.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/vite.ts'],
+  entry: ['src/index.ts', 'src/vite.ts', 'src/react.tsx'],
   format: ['esm'],
   dts: true,
   clean: true,
   sourcemap: true,
+  external: ['react', 'react-dom'],
 });

cmp/demo/src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router';
+import { useLingoCompiler } from '@compiler/core/react';
 
 function Layout() {
   return (
@@ -14,7 +15,14 @@ function Layout() {
 }
 
 function Home() {
-  return <h1>Home Page</h1>;
+  const { locale, translations } = useLingoCompiler();
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <p>Current locale: {locale}</p>
+      <p>Translations loaded: {JSON.stringify(translations)}</p>
+    </div>
+  );
 }
 
 function About() {

cmp/demo/src/main.tsx

@@ -1,9 +1,14 @@
-import { StrictMode } from 'react';
+import { StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
+import { LingoCompiler } from '@compiler/core/react';
 import App from './App';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading translations...</div>}>
+      <LingoCompiler locale="en">
+        <App />
+      </LingoCompiler>
+    </Suspense>
   </StrictMode>
 );

cmp/localizer/index.ts

@@ -1,8 +1,11 @@
 import { Hono } from 'hono';
+import { cors } from 'hono/cors';
 import { serve } from '@hono/node-server';
 
 const app = new Hono();
 
+app.use('*', cors());
+
 app.get('/i18n', (c) => {
   return c.json({});
 });