@18ways/mdx-translate 0.1.0-alpha.42e08a82e9b3

package/src/runtime.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { createElement, type ReactNode } from 'react';
+import { useT } from '@18ways/react';
+
+type StaticImageLike = {
+  src?: string;
+  width?: number;
+  height?: number;
+};
+
+type TranslatedNodeProps = {
+  component: keyof JSX.IntrinsicElements;
+  translateProps?: string[];
+  children?: ReactNode;
+} & Record<string, unknown>;
+
+const isStaticImageLike = (value: unknown): value is StaticImageLike =>
+  Boolean(
+    value &&
+    typeof value === 'object' &&
+    'src' in value &&
+    typeof (value as StaticImageLike).src === 'string'
+  );
+
+export function TranslatedNode({
+  component,
+  translateProps = [],
+  children,
+  ...props
+}: TranslatedNodeProps) {
+  const t = useT();
+  const translatedProps: Record<string, unknown> = { ...props };
+
+  for (const propName of translateProps) {
+    const value = translatedProps[propName];
+    if (typeof value === 'string' && value.trim()) {
+      translatedProps[propName] = t(value) as string;
+    }
+  }
+
+  if (component === 'img') {
+    const src = translatedProps.src;
+    if (isStaticImageLike(src)) {
+      translatedProps.src = src.src;
+
+      if (translatedProps.width == null && typeof src.width === 'number') {
+        translatedProps.width = src.width;
+      }
+
+      if (translatedProps.height == null && typeof src.height === 'number') {
+        translatedProps.height = src.height;
+      }
+    }
+
+    delete translatedProps.placeholder;
+    delete translatedProps.blurDataURL;
+  }
+
+  return createElement(component, translatedProps, children);
+}

package/tests/remark-mdx-translate.test.ts

@@ -0,0 +1,183 @@
+import { describe, expect, it } from 'vitest';
+import { compile } from '@mdx-js/mdx';
+import { remarkMdxTranslate } from '../src/index';
+
+const compileWithPlugin = async (source: string) =>
+  String(
+    await compile(source, {
+      path: '/virtual/apps/next-site/src/app/blog/post/page.mdx',
+      outputFormat: 'program',
+      providerImportSource: 'next-mdx-import-source-file',
+      remarkPlugins: [
+        [
+          remarkMdxTranslate,
+          {
+            include: /[\\/]src[\\/]app[\\/]blog[\\/]/,
+          },
+        ],
+      ],
+    })
+  );
+
+describe('remarkMdxTranslate', () => {
+  it('wraps headings and paragraphs in T while keeping inline code inside the translated run', async () => {
+    const output = await compileWithPlugin(
+      ['## Hello *world*', '', 'Browsers send the `Accept-Language` header.'].join('\n')
+    );
+
+    expect(output).toContain('import {T} from "@18ways/react";');
+    expect(output).toContain('children: _jsxs(T, {');
+    expect(output).toContain('children: ["Hello "');
+    expect(output).toContain('children: ["Browsers send the "');
+    expect(output).toContain('children: "Accept-Language"');
+    expect(output).toContain('" header."]');
+  });
+
+  it('rewrites markdown images with translatable alt text to TranslatedNode', async () => {
+    const output = await compileWithPlugin('![Hero image](./hero.png "Cover image")');
+
+    expect(output).toContain('import {TranslatedNode} from "@18ways/mdx-translate/runtime";');
+    expect(output).toContain('import __mdxTranslateImg_0 from "./hero.png";');
+    expect(output).toContain('component: "img"');
+    expect(output).toContain('translateProps: ["alt", "title"]');
+    expect(output).toContain('alt: "Hero image"');
+    expect(output).toContain('title: "Cover image"');
+    expect(output).toContain('src: __mdxTranslateImg_0');
+  });
+
+  it('rewrites lowercase JSX nodes with translatable string props', async () => {
+    const output = await compileWithPlugin(
+      '<button title="Open settings" aria-label="Open settings">Settings</button>'
+    );
+
+    expect(output).toContain('import {TranslatedNode} from "@18ways/mdx-translate/runtime";');
+    expect(output).toContain('component: "button"');
+    expect(output).toContain('translateProps: ["title", "aria-label"]');
+    expect(output).toContain('title: "Open settings"');
+    expect(output).toContain('"aria-label": "Open settings"');
+  });
+
+  it('does not nest an existing T wrapper', async () => {
+    const output = await compileWithPlugin(
+      ['import { T } from "@18ways/react"', '', '## <T>Hello world</T>'].join('\n')
+    );
+
+    expect((output.match(/_jsx\(T/g) || []).length).toBe(1);
+    expect((output.match(/import \{T\} from "@18ways\/react";/g) || []).length).toBe(1);
+  });
+
+  it('wraps a whole paragraph even when it contains inline JSX children', async () => {
+    const output = await compileWithPlugin(
+      'Internationalisation (often shortened to <b>i18n</b>) and <Avatar /> examples.'
+    );
+
+    expect(output).toContain('children: _jsxs(T, {');
+    expect(output).toContain('children: ["Internationalisation (often shortened to "');
+    expect(output).toContain('_jsx("b", {');
+    expect(output).toContain('children: "i18n"');
+    expect(output).toContain('_jsx(Avatar, {})');
+    expect(output).toContain('" examples."]');
+  });
+
+  it('wraps table cells as a single T container', () => {
+    const transform = remarkMdxTranslate({
+      include: /[\\/]src[\\/]app[\\/]blog[\\/]/,
+    });
+
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'table',
+          align: [],
+          children: [
+            {
+              type: 'tableRow',
+              children: [
+                {
+                  type: 'tableCell',
+                  children: [
+                    { type: 'text', value: 'Hello ' },
+                    {
+                      type: 'mdxJsxTextElement',
+                      name: 'img',
+                      attributes: [
+                        { type: 'mdxJsxAttribute', name: 'src', value: '/me.png' },
+                        { type: 'mdxJsxAttribute', name: 'alt', value: 'Me' },
+                      ],
+                      children: [],
+                    },
+                    { type: 'text', value: ' there' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    } as any;
+
+    transform(tree, {
+      path: '/virtual/apps/next-site/src/app/blog/post/page.mdx',
+    });
+
+    const table = tree.children.find((child: any) => child.type === 'table');
+    const tableCell = table.children[0].children[0];
+    expect(tableCell.children).toHaveLength(1);
+    expect(tableCell.children[0].type).toBe('mdxJsxTextElement');
+    expect(tableCell.children[0].name).toBe('T');
+    expect(tableCell.children[0].children[0].value).toBe('Hello ');
+    expect(tableCell.children[0].children[1].name).toBe('TranslatedNode');
+    expect(tableCell.children[0].children[2].value).toBe(' there');
+  });
+
+  it('leaves JSX code fences unchanged for whole-block translation at render time', async () => {
+    const output = await compileWithPlugin(
+      [
+        '```jsx',
+        '<h1>Hello world!</h1>',
+        '<p>',
+        '  <a href="#/">Click here</a> to view your <b>{serverResponse.productDescription}</b>',
+        '</p>',
+        '```',
+      ].join('\n')
+    );
+
+    expect(output).toContain('className: "language-jsx"');
+    expect(output).toContain('children: "<h1>Hello world!</h1>');
+    expect(output).toContain('<a href=\\"#/\\">Click here</a> to view your');
+  });
+
+  it('does not inject translation helpers into function code fences', async () => {
+    const output = await compileWithPlugin(
+      [
+        '```jsx',
+        'export function Hero() {',
+        '  return <img alt="Company logo" src="/logo.png" />;',
+        '}',
+        '```',
+      ].join('\n')
+    );
+
+    expect(output).toContain('children: "export function Hero() {');
+    expect(output).toContain('return <img alt=\\"Company logo\\" src=\\"/logo.png\\" />;');
+    expect(output).not.toContain('useT');
+  });
+
+  it('does not rewrite existing T wrappers inside JSX code fences', async () => {
+    const output = await compileWithPlugin(
+      [
+        '```jsx',
+        '<h1><T>Hello world!</T></h1>',
+        '<p>',
+        '  <T vars={{ description: serverResponse.productDescription }}>',
+        '    <a href="#/">Click here</a> to view your <b>{description}</b>',
+        '  </T>',
+        '</p>',
+        '```',
+      ].join('\n')
+    );
+
+    expect(output).toContain('children: "<h1><T>Hello world!</T></h1>');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "lib": ["ES2020", "DOM"],
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@18ways/react": ["./src/react-runtime-shim.d.ts"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "tests"]
+}