Split babel transformers into separate transform-js and transform-jsx

.changeset/config.json

@@ -4,13 +4,15 @@
   "commit": false,
   "fixed": [
     [
-      "saykit",
-      "@saykit/react",
-      "@saykit/carbon",
       "@saykit/config",
       "@saykit/format-po",
-      "@saykit/babel-plugin",
-      "unplugin-saykit"
+      "saykit",
+      "@saykit/carbon",
+      "@saykit/react",
+      "babel-plugin-saykit",
+      "unplugin-saykit",
+      "@saykit/transform-js",
+      "@saykit/transform-jsx"
     ]
   ],
   "linked": [],

.changeset/nine-zebras-greet.md

@@ -4,7 +4,7 @@
 "saykit": patch
 "@saykit/carbon": patch
 "@saykit/react": patch
-"@saykit/babel-plugin": patch
+"babel-plugin-saykit": patch
 "unplugin-saykit": patch
 ---
 

.changeset/silent-moose-wish.md

@@ -0,0 +1,11 @@
+---
+"@saykit/react": patch
+"unplugin-saykit": patch
+"@saykit/transform-jsx": patch
+"babel-plugin-saykit": patch
+"@saykit/transform-js": patch
+"@saykit/format-po": patch
+"@saykit/config": patch
+---
+
+Split babel transformers into separate transform-js and transform-jsx packages

.github/labeller.yml

@@ -41,3 +41,11 @@
 'package: unplugin':
   - changed-files:
       - any-glob-to-any-file: ['packages/unplugin/**']
+
+'package: transform-js':
+  - changed-files:
+      - any-glob-to-any-file: ['packages/transform-js/**']
+
+'package: transform-jsx':
+  - changed-files:
+      - any-glob-to-any-file: ['packages/transform-jsx/**']

.github/labels.yml

@@ -49,13 +49,21 @@
   color: 84cc16
 
 - name: 'package: babel-plugin'
-  description: Related to @saykit/babel-plugin
+  description: Related to babel-plugin-saykit
   color: f59e0b
 
 - name: 'package: unplugin'
   description: Related to unplugin-saykit
   color: 06b6d4
 
+- name: 'package: transform-js'
+  description: Related to @saykit/transform-js
+  color: 8b5cf6
+
+- name: 'package: transform-jsx'
+  description: Related to @saykit/transform-jsx
+  color: ec4899
+
 # Labels primarily for both issues and pull requests
 
 - name: blocked

.oxfmtrc.json

@@ -1,5 +1,5 @@
 {
-  "ignorePatterns": [".changeset/*.md"],
+  "ignorePatterns": [".changeset/*.md", "*.gen.ts"],
   "singleQuote": true,
   "experimentalSortImports": {
     "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "unknown"],

examples/carbon-tsdown/package.json → examples/carbon/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "carbon-tsdown-example",
+  "name": "carbon-example",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,17 +10,18 @@
     "dev": "wrangler dev"
   },
   "dependencies": {
-    "@buape/carbon": "0.14.0",
+    "@buape/carbon": "0.16.0",
     "@sapphire/snowflake": "^3.5.5",
     "@saykit/carbon": "workspace:^",
     "saykit": "workspace:^"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20260210.0",
+    "@cloudflare/workers-types": "^4.20260417.1",
     "@saykit/config": "workspace:^",
     "@saykit/format-po": "workspace:^",
-    "typescript": "^5.9.3",
+    "@saykit/transform-js": "workspace:^",
+    "typescript": "^6.0.3",
     "unplugin-saykit": "workspace:^",
-    "wrangler": "^4.64.0"
+    "wrangler": "^4.83.0"
   }
 }

examples/nextjs-babel/saykit.config.ts → examples/carbon/saykit.config.ts

@@ -1,14 +1,16 @@
 import { defineConfig } from '@saykit/config';
-import createFormatter from '@saykit/format-po';
+import createPoFormatter from '@saykit/format-po';
+import createJsTransformer from '@saykit/transform-js';
 
 export default defineConfig({
   sourceLocale: 'en',
   locales: ['en', 'fr'],
   buckets: [
     {
-      include: ['src/**/*.{ts,tsx}'],
+      include: ['src/**/*.ts'],
       output: 'src/locales/{locale}/messages.{extension}',
-      formatter: createFormatter(),
+      formatter: createPoFormatter(),
+      transformer: createJsTransformer(),
     },
   ],
 });

examples/nextjs/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["saykit"]
+}

examples/nextjs-babel/next-env.d.ts → examples/nextjs/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts';
+import './.next/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/nextjs-babel/package.json → examples/nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-babel-example",
+  "name": "nextjs-example",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,15 +12,20 @@
   },
   "dependencies": {
     "@saykit/react": "workspace:^",
-    "next": "^16.1.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "saykit": "workspace:^"
+    "next": "16.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "saykit": "workspace:^",
+    "server-only": "^0.0.1"
   },
   "devDependencies": {
-    "@saykit/babel-plugin": "workspace:^",
     "@saykit/config": "workspace:^",
     "@saykit/format-po": "workspace:^",
-    "@types/react": "^19.2.13"
+    "@saykit/transform-js": "workspace:^",
+    "@saykit/transform-jsx": "workspace:^",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "babel-plugin-saykit": "workspace:^"
   }
 }

examples/nextjs/saykit.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@saykit/config';
+import createPoFormatter from '@saykit/format-po';
+import createJsTransformer from '@saykit/transform-js';
+import createJsxTransformer from '@saykit/transform-jsx';
+
+export default defineConfig({
+  sourceLocale: 'en',
+  locales: ['en', 'fr'],
+  buckets: [
+    {
+      include: ['src/**/*.{ts,tsx}'],
+      output: 'src/locales/{locale}/messages.{extension}',
+      formatter: createPoFormatter(),
+      transformer: [createJsTransformer(), createJsxTransformer()],
+    },
+  ],
+});

examples/nextjs-babel/src/proxy.ts → examples/nextjs/src/proxy.ts

@@ -1,14 +1,16 @@
 // TODO: abstract this away into @saykit/react/server, @saykit/next or something
 
 import { type NextRequest, NextResponse } from 'next/server';
-import saykitConfig from '../saykit.config';
+
+const SOURCE_LOCALE = 'en';
+const LOCALES = ['en', 'fr'];
 
 export default function proxy(request: NextRequest) {
   let respondWith = NextResponse.next();
 
-  const defaultLocale = saykitConfig.sourceLocale;
+  const defaultLocale = SOURCE_LOCALE;
   let pathLocale = fromUrlPathname(request.nextUrl.pathname);
-  if (pathLocale && !saykitConfig.locales.includes(pathLocale)) pathLocale = undefined;
+  if (pathLocale && !LOCALES.includes(pathLocale)) pathLocale = undefined;
 
   if (pathLocale === defaultLocale) {
     // Redirect /{defaultLocale} to /
@@ -19,7 +21,7 @@ export default function proxy(request: NextRequest) {
   //
   else if (!pathLocale) {
     let cookieLocale = fromRequestCookies(request.cookies) ?? defaultLocale;
-    if (!saykitConfig.locales.includes(cookieLocale)) cookieLocale = defaultLocale;
+    if (!LOCALES.includes(cookieLocale)) cookieLocale = defaultLocale;
 
     request.nextUrl.pathname = `/${cookieLocale}${request.nextUrl.pathname}`;
     if (cookieLocale === defaultLocale) {

examples/nextjs/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*", ".next/dev/types/**/*.ts", "next-env.d.ts"],
+  "compilerOptions": { "paths": { "~/*": ["./src/*"] } }
+}

examples/tanstack-start/.gitignore

@@ -0,0 +1,3 @@
+.tanstack/
+node_modules/
+src/locales/*/*.json

examples/tanstack-start/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tanstack-start-example",
+  "private": true,
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "check": "tsc --noEmit",
+    "extract": "saykit extract",
+    "compile": "saykit compile",
+    "build": "vite build && tsc --noEmit",
+    "dev": "vite dev"
+  },
+  "dependencies": {
+    "@saykit/react": "workspace:^",
+    "@tanstack/react-router": "^1.168.22",
+    "@tanstack/react-router-devtools": "^1.166.13",
+    "@tanstack/react-start": "^1.167.41",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "saykit": "workspace:^"
+  },
+  "devDependencies": {
+    "@saykit/config": "workspace:^",
+    "@saykit/format-po": "workspace:^",
+    "@saykit/transform-js": "workspace:^",
+    "@saykit/transform-jsx": "workspace:^",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "unplugin-saykit": "workspace:^",
+    "vite": "^8.0.8"
+  }
+}

examples/tanstack-start/saykit.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@saykit/config';
+import createPoFormatter from '@saykit/format-po';
+import createJsTransformer from '@saykit/transform-js';
+import createJsxTransformer from '@saykit/transform-jsx';
+
+export default defineConfig({
+  sourceLocale: 'en',
+  locales: ['en', 'fr'],
+  buckets: [
+    {
+      include: ['src/**/*.{ts,tsx}'],
+      output: 'src/locales/{locale}/messages.{extension}',
+      formatter: createPoFormatter(),
+      transformer: [createJsTransformer(), createJsxTransformer()],
+    },
+  ],
+});

examples/tanstack-start/src/i18n.ts

@@ -0,0 +1,11 @@
+import { Say } from 'saykit';
+
+const say = new Say({
+  locales: ['en', 'fr'],
+  messages: {
+    en: await import('./locales/en/messages.json').then((m) => m.default),
+    fr: await import('./locales/fr/messages.json').then((m) => m.default),
+  },
+});
+
+export default say;

examples/tanstack-start/src/locales/en/messages.po

@@ -0,0 +1,15 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Language: en\n"
+"X-Generator: saykit\n"
+
+msgid "Count: {count}"
+msgstr "Count: {count}"
+
+msgid "Increment"
+msgstr "Increment"
+
+msgid "Reset"
+msgstr "Reset"

examples/tanstack-start/src/locales/fr/messages.po

@@ -0,0 +1,15 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Language: fr\n"
+"X-Generator: saykit\n"
+
+msgid "Count: {count}"
+msgstr "Compteur : {count}"
+
+msgid "Increment"
+msgstr "Incrémenter"
+
+msgid "Reset"
+msgstr "Réinitialiser"