create-middag-ui 0.27.0 → 0.29.0

package/lib/scaffold.js

@@ -101,6 +101,9 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey,
   const deps = {
     "@middag-io/react": `^${getLibVersion()}`,
     "@fontsource-variable/figtree": "^5.0.0",
+    "i18next": "^26.3.1",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "react-i18next": "^17.0.8",
     "react-router": "^7.0.0",
   };
   if (isPro) {
@@ -119,7 +122,7 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey,
     moodleDevDeps["tailwindcss"] = "^4.0.0";
   }
 
-  // PRO: dev harness (host-sim shell, Inertia mocks, i18n) inherited at dev time
+  // PRO: dev harness (host-sim shell, Inertia mocks) inherited at dev time
   // from @middag-io/react-demo. Dev-only — production entry-*.tsx never imports it.
   const proDevDeps = {};
   if (isPro) {

package/lib/templates/pro/app.tsx

@@ -6,14 +6,15 @@
  *   mock/navigation.ts   — sidebar structure
  *   mock/data.ts         — synthetic page props
  *
- * The dev harness (host-sim shell, Inertia mocks, i18n) is inherited from
+ * The dev harness (host-sim shell, Inertia mocks) is inherited from
  * @middag-io/react-demo — not generated locally. Vite aliases @inertiajs/*
  * to it (see vite.config.ts).
  */
 import {useEffect} from "react";
 import {BrowserRouter, Routes, useNavigate} from "react-router";
 import {I18nProvider} from "@middag-io/react";
-import {MockI18nProvider, MockPageProvider, setMockNavigate} from "@middag-io/react-demo";
+import {MockPageProvider, setMockNavigate} from "@middag-io/react-demo";
+import {moodleStringResolver} from "./lib/moodle/strings";
 import {buildNavigation} from "../mock/navigation";
 import {sharedProps} from "../mock/data";
 import {AppRoutes} from "../mock/routes";
@@ -35,20 +36,18 @@ if (typeof window !== "undefined") {
 
 export function App() {
   return (
-    <MockI18nProvider>
-      <MockPageProvider
-        value={{
-          props: { ...sharedProps, contract: null, navigation: buildNavigation("") },
-          url: "/",
-        }}
-      >
-        <I18nProvider>
-          <BrowserRouter>
-            <NavigateBridge />
-            <Routes>{AppRoutes()}</Routes>
-          </BrowserRouter>
-        </I18nProvider>
-      </MockPageProvider>
-    </MockI18nProvider>
+    <MockPageProvider
+      value={{
+        props: { ...sharedProps, contract: null, navigation: buildNavigation("") },
+        url: "/",
+      }}
+    >
+      <I18nProvider asyncResolver={moodleStringResolver}>
+        <BrowserRouter>
+          <NavigateBridge />
+          <Routes>{AppRoutes()}</Routes>
+        </BrowserRouter>
+      </I18nProvider>
+    </MockPageProvider>
   );
 }

package/lib/templates/shared/moodle-strings.ts

@@ -1,62 +1,27 @@
 /**
- * Typed adapter for Moodle's core/str AMD module.
+ * Moodle string resolver for I18nProvider.
  *
- * Wraps the native `get_strings` function with TypeScript types
- * and returns a key→value Record for convenient consumption.
+ * Implements the HostStringResolver contract: resolves one string at a time
+ * via Moodle's core/str AMD module (get_string). Used as the asyncResolver
+ * prop on I18nProvider so i18next fetches translations lazily on demand.
  *
- * Can be used as the asyncResolver for I18nProvider:
+ * Usage:
+ *   import { moodleStringResolver } from "@/lib/moodle/strings";
+ *   <I18nProvider asyncResolver={moodleStringResolver}>
  *
- *   import { getString } from "@/lib/moodle/strings";
- *   <I18nProvider asyncResolver={getString}>
- *
- * Change the default component below to match your plugin's frankenstyle.
+ * Change DEFAULT_COMPONENT below to match your plugin's frankenstyle name.
  */
 
-// @ts-expect-error AMD external — resolved by Moodle's RequireJS at runtime
-import {get_strings} from "core/str";
-
-export interface StringRequest {
-  key: string;
-  component?: string;
-  param?: string | number;
-}
+import type {HostStringResolver} from "@middag-io/react";
 
 // ── CHANGE THIS to your plugin's frankenstyle name ──
 const DEFAULT_COMPONENT = "__PLUGIN_PREFIX__";
 
-/**
- * Load translated strings from Moodle's string manager.
- *
- * @param requests - Array of string requests (key + optional component/param)
- * @returns Record mapping each key to its translated string
- */
-export async function getStrings(
-  requests: StringRequest[],
-): Promise<Record<string, string>> {
-  const moodleRequests = requests.map((r) => ({
-    key: r.key,
-    component: r.component ?? DEFAULT_COMPONENT,
-    param: r.param,
-  }));
-
-  const results: string[] = await get_strings(moodleRequests);
-
-  const out: Record<string, string> = {};
-  results.forEach((translated, index) => {
-    out[requests[index].key] = translated;
+/** Resolve one Moodle string lazily: get_string(key, component). */
+export const moodleStringResolver: HostStringResolver = (key, component) =>
+  new Promise((resolve) => {
+    // @ts-expect-error Moodle AMD global
+    window.require(["core/str"], (str: {get_string: (k: string, c: string) => Promise<string>}) => {
+      str.get_string(key, component ?? DEFAULT_COMPONENT).then(resolve).catch(() => resolve(key));
+    });
   });
-
-  return out;
-}
-
-/**
- * Load a single translated string.
- * Compatible with I18nProvider's AsyncStringResolver signature.
- */
-export async function getString(
-  key: string,
-  component = DEFAULT_COMPONENT,
-): Promise<string> {
-  const result = await getStrings([{key, component}]);
-  return result[key] ?? key;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-middag-ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "scripts": {