npm - anylang-dev - Versions diffs - 0.2.0 → 0.2.2 - Mend

anylang-dev 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # anylang-dev
-`anylang-dev` is a bring-your-own-key website translation CLI and Vite plugin. It scans your source code, writes JSON locale files, and can automatically translate static JSX text.
+`anylang-dev` is a bring-your-own-key website translation CLI with Vite and Next.js support. It scans your source code, writes JSON locale files, and can automatically translate static JSX text.
 ```tsx
 <h1>Translate your website with anylang</h1>
@@ -72,6 +72,32 @@ export default defineConfig({
 });
 ```
+For Next.js, use the config wrapper in `next.config.mjs`:
+```js
+import anylang from "anylang-dev/next";
+const nextConfig = {};
+export default anylang({
+  runtimeImport: "@/anylang",
+})(nextConfig);
+```
+If you use `tr="false"`, add the JSX type augmentation once in `src/vite-env.d.ts`:
+```ts
+import "anylang-dev/jsx-runtime";
+```
+That makes this TypeScript-safe:
+```tsx
+<p tr="false">BrandName</p>
+```
+In a Next.js app, you can put the same import in any global declaration file, such as `src/anylang-env.d.ts`.
 `anylang scan` creates locale files without calling a translation provider. To translate for real with Gemini, add your own API key to `.env` in the project where you run `anylang`:
 ```env
@@ -253,6 +279,36 @@ root.render(
 );
 ```
+For the Next.js App Router, create a client provider:
+```tsx
+// app/providers.tsx
+"use client";
+import { AnyLangProvider } from "@/anylang";
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <AnyLangProvider>{children}</AnyLangProvider>;
+}
+```
+Then wrap your layout:
+```tsx
+// app/layout.tsx
+import { Providers } from "./providers";
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+```
 Then use translations in any component:
 ```tsx

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "anylang-dev",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Bring-your-own-key website translation JSON generator.",
   "type": "module",
   "files": [
@@ -18,7 +18,18 @@
       "types": "./src/runtime.d.ts",
       "default": "./src/runtime.js"
     },
-    "./vite": "./src/vite.js"
+    "./vite": {
+      "types": "./src/vite.d.ts",
+      "default": "./src/vite.js"
+    },
+    "./next": {
+      "types": "./src/next.d.ts",
+      "default": "./src/next.js"
+    },
+    "./jsx-runtime": {
+      "types": "./src/jsx-runtime.d.ts",
+      "default": "./src/runtime.js"
+    }
   },
   "scripts": {
     "test": "node --test"

package/src/jsx-runtime.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import "react";
+declare module "react" {
+  interface HTMLAttributes<T> {
+    tr?: boolean | "false";
+  }
+}

package/src/next-loader.cjs ADDED Viewed

@@ -0,0 +1,15 @@
+module.exports = function anylangNextLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions ? this.getOptions() : {};
+  import("./jsx.js")
+    .then(({ transformAutoJsx }) => {
+      const result = transformAutoJsx(source, this.resourcePath, {
+        keyPrefix: options.keyPrefix,
+        runtimeImport: options.runtimeImport || "@/anylang"
+      });
+      callback(null, result.code, null);
+    })
+    .catch((error) => callback(error));
+};

package/src/next.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+export type AnyLangNextOptions = {
+  keyPrefix?: string;
+  runtimeImport?: string;
+};
+export default function anylang(options?: AnyLangNextOptions): (nextConfig?: NextConfig) => NextConfig;

package/src/next.js ADDED Viewed

@@ -0,0 +1,32 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+export default function anylang(options = {}) {
+  return function withAnyLang(nextConfig = {}) {
+    return {
+      ...nextConfig,
+      webpack(config, context) {
+        if (typeof nextConfig.webpack === "function") {
+          config = nextConfig.webpack(config, context);
+        }
+        config.module.rules.unshift({
+          test: /\.[jt]sx$/,
+          exclude: /node_modules/,
+          enforce: "pre",
+          use: {
+            loader: path.join(dirname, "next-loader.cjs"),
+            options: {
+              keyPrefix: options.keyPrefix,
+              runtimeImport: options.runtimeImport || "@/anylang"
+            }
+          }
+        });
+        return config;
+      }
+    };
+  };
+}

package/src/pipeline.js CHANGED Viewed

@@ -158,7 +158,8 @@ function generatedRuntimeSource({ importFrom, localeImports, sourceLocale }) {
     .map((item) => `  '${item.locale}': ${item.identifier}`)
     .join(",\n");
-  return `/* This file is generated by anylang. Do not edit by hand. */
+  return `'use client'
+/* This file is generated by anylang. Do not edit by hand. */
 import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode } from 'react'
 import { $tr as translate, configureAnyLang, setAnyLangLocale } from '${importFrom}'
 ${imports}

package/src/vite.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { Plugin } from "vite";
+export type AnyLangViteOptions = {
+  keyPrefix?: string;
+  runtimeImport?: string;
+};
+export default function anylang(options?: AnyLangViteOptions): Plugin;

package/src/vite.js CHANGED Viewed

@@ -12,7 +12,7 @@ export default function anylang(options = {}) {
       const result = transformAutoJsx(code, id, {
         keyPrefix: options.keyPrefix,
-        runtimeImport: options.runtimeImport || "/src/anylang.ts"
+        runtimeImport: options.runtimeImport || "@/anylang"
       });
       if (!result.changed) return null;