feat(localizations): Allow usage of subpath exports

.changeset/selfish-trains-breathe.md

@@ -0,0 +1,20 @@
+---
+'@clerk/localizations': patch
+---
+
+The package now allows for [subpath exports](https://nodejs.org/api/packages.html#subpath-exports). You can now import specific languages like so:
+
+```diff
+# Single language
+- import { frFR } from "@clerk/localizations"
++ import { frFR } from "@clerk/localizations/fr-FR"
+
+# Multiple languages
+- import { enUS, esES } from "@clerk/localizations"
++ import { enUS } from "@clerk/localizations/en-US"
++ import { esES } from "@clerk/localizations/es-ES"
+```
+
+This helps with tree-shaking and will reduce your total bundle size in most cases.
+
+You can continue to use the top-level `@clerk/localizations` import as this is a non-breaking change. You can gradually opt-in to this optimization.

packages/localizations/.gitignore

@@ -0,0 +1,2 @@
+/*/
+!/src/

packages/localizations/package.json

@@ -25,14 +25,63 @@
   "license": "MIT",
   "author": "Clerk",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*.d.mts",
+        "default": "./dist/*.mjs"
+      },
+      "require": {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "ar-SA",
+    "cs-CZ",
+    "da-DK",
+    "de-DE",
+    "el-GR",
+    "en-US",
+    "es-ES",
+    "fr-FR",
+    "he-IL",
+    "it-IT",
+    "ja-JP",
+    "ko-KR",
+    "nb-NO",
+    "nl-NL",
+    "pl-PL",
+    "pt-BR",
+    "pt-PT",
+    "ro-RO",
+    "ru-RU",
+    "sk-SK",
+    "sv-SE",
+    "tr-TR",
+    "uk-UA",
+    "vi-VN",
+    "zh-CN",
+    "zh-TW"
   ],
   "scripts": {
     "build": "tsup --env.NODE_ENV production",
+    "postbuild": "node ../../scripts/subpath-workaround.mjs localizations",
     "clean": "rimraf ./dist",
     "dev": "tsup --watch",
     "lint": "eslint src/"

packages/localizations/subpaths.mjs

@@ -0,0 +1,35 @@
+// This file is a helper for the "subpath-workaround.mjs" script
+// We have to polyfill our "exports" subpaths :cry:
+
+export const subpathNames = [
+  'ar-SA',
+  'cs-CZ',
+  'da-DK',
+  'de-DE',
+  'el-GR',
+  'en-US',
+  'es-ES',
+  'fr-FR',
+  'he-IL',
+  'it-IT',
+  'ja-JP',
+  'ko-KR',
+  'nb-NO',
+  'nl-NL',
+  'pl-PL',
+  'pt-BR',
+  'pt-PT',
+  'ro-RO',
+  'ru-RU',
+  'sk-SK',
+  'sv-SE',
+  'tr-TR',
+  'uk-UA',
+  'vi-VN',
+  'zh-CN',
+  'zh-TW',
+];
+
+export const subpathFoldersBarrel = [];
+
+export const ignoredFolders = [];

packages/localizations/tsup.config.ts

@@ -1,17 +1,18 @@
 import { defineConfig } from 'tsup';
 
-export default defineConfig(() => {
+export default defineConfig(_overrideOptions => {
   const uiRetheme = process.env.CLERK_RETHEME === '1' || process.env.CLERK_RETHEME === 'true';
 
   return {
-    entry: {
-      index: uiRetheme ? 'src/index.retheme.ts' : 'src/index.ts',
-    },
-    minify: false,
+    entry: uiRetheme
+      ? ['src', '!src/index.ts', '!src/en-US.ts']
+      : ['src', '!src/index.retheme.ts', '!src/en-US.retheme.ts'],
+    format: ['cjs', 'esm'],
+    bundle: true,
     clean: true,
+    minify: false,
     sourcemap: true,
-    format: ['cjs', 'esm'],
-    legacyOutput: true,
     dts: true,
+    splitting: false,
   };
 });

packages/shared/subpaths.mjs

@@ -27,3 +27,5 @@ export const subpathNames = [
 ];
 
 export const subpathFoldersBarrel = ['react'];
+
+export const ignoredFolders = ['scripts'];

scripts/subpath-workaround.mjs

@@ -27,8 +27,8 @@ async function run() {
   const allFilesNames = [
     ...subpathHelperFile.subpathNames,
     ...subpathHelperFile.subpathFoldersBarrel,
+    ...subpathHelperFile.ignoredFolders,
     'dist',
-    'scripts',
   ];
   const hasAllSubpathsInFiles = pkgFile.files.every(name => allFilesNames.includes(name));