Build the package on install.

Author: Hug0-Drelon

.gitignore

@@ -1,5 +1,6 @@
 # Directories
 node_modules/
+build/
 
 # Files
 .DS_Store

README.md

@@ -9,8 +9,6 @@ A unified package of React components, icons, and utilities for Polylang project
 - **API Middlewares** - WordPress REST API filtering utilities
 - **React Hooks** - Custom hooks for language management and state handling
 
-> **Note**: This package distributes **source code** that is processed by consuming projects. No build step is needed.
-
 ## 🚀 Installation
 
 ### From GitHub
@@ -21,6 +19,8 @@ A unified package of React components, icons, and utilities for Polylang project
 npm install github:polylang/polylang-react-library
 ```
 
+The package automatically builds during installation via the `prepare` script. The source code in `src/` is transpiled to `build/` using Babel with WordPress presets.
+
 ## 💻 Usage
 
 ### Components
@@ -130,12 +130,21 @@ function LanguageSelector() {
 npm install
 ```
 
+### Building
+
+The library uses Babel to transpile JSX and modern JavaScript:
+
+```bash
+npm run build         # Build src/ to build/
+```
+
+The `prepare` script runs automatically on `npm install`, ensuring the library is always built when installed as a dependency.
+
 ### Linting
 
 ```bash
 npm run lint          # Check code
 npm run lint:fix      # Fix automatically
-npm run format        # Format code
 ```
 
 ## 📋 Available Exports

babel.config.json

@@ -0,0 +1,3 @@
+{
+	"presets": [ "@wordpress/babel-preset-default" ]
+}

index.js

@@ -1,7 +1,7 @@
 {
   "name": "@wpsyntex/polylang-react-library",
   "version": "1.0.0",
-  "description": "A collection of React components, icons, and utilities for Polylang-related projects. Distributes source code (no build required).",
+  "description": "A collection of React components, icons, and utilities for Polylang-related projects.",
   "keywords": [
     "gutenberg",
     "react",
@@ -21,22 +21,29 @@
   },
   "license": "GPL-3.0+",
   "author": "WP Syntex",
-  "main": "index.js",
+  "main": "build/index.js",
   "sideEffects": false,
   "files": [
-    "index.js",
-    "src/"
+    "build/"
   ],
   "scripts": {
+    "build": "babel src --out-dir build --copy-files",
+    "prepare": "npm run build",
     "lint": "wp-scripts lint-js",
     "lint:fix": "wp-scripts lint-js --fix"
   },
+  "dependencies": {
+    "@babel/cli": "^7.26.5",
+    "@wordpress/babel-preset-default": "^8.10"
+  },
   "peerDependencies": {
     "@wordpress/api-fetch": ">=7.0.0",
     "@wordpress/components": ">=27.0.0",
     "@wordpress/element": ">=6.0.0",
     "@wordpress/i18n": ">=5.0.0",
     "@wordpress/primitives": ">=4.0.0",
+    "@wordpress/data": ">=10.0.0",
+    "@wordpress/editor": ">=14.0.0",
     "lodash": ">=4.17.0",
     "react": ">=17.0.0"
   },

package-lock.json

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+// This package is not found in `@wordpress/scripts` like others (peer dependency).
+// eslint-disable-next-line import/no-unresolved
 import { store as coreEditorStore } from '@wordpress/editor';
 
 /**
@@ -19,7 +21,8 @@ export const useCurrentLanguage = ( languages ) => {
 		return null;
 	}
 
-	const currentLanguageSlug = currentPost.lang ?? pllEditorCurrentLanguageSlug;
+	const currentLanguageSlug =
+		currentPost.lang ?? pllEditorCurrentLanguageSlug; // eslint-disable-line no-undef
 
 	const currentLanguage = languages.find( ( language ) => {
 		return language.slug === currentLanguageSlug;

package.json

@@ -0,0 +1,30 @@
+/**
+ * Polylang React Library
+ *
+ * A collection of React components, icons, and utilities for Polylang projects.
+ */
+
+// Export components
+export { LanguageDropdown } from './components/language-dropdown';
+export { default as LanguageFlag } from './components/language-flag';
+
+// Export icons
+export { default as duplication } from './icons/duplication';
+export { default as pencil } from './icons/pencil';
+export { default as plus } from './icons/plus';
+export { default as synchronization } from './icons/synchronization';
+export { default as translation } from './icons/translation';
+export { default as trash } from './icons/trash';
+export { default as star } from './icons/star';
+export { default as SubmenuIcon } from './icons/submenu';
+export { default as DefaultLangIcon } from './icons/default-lang';
+
+// Export middlewares
+export { default as filterPathMiddleware } from './middlewares/filter-path';
+export { default as editorsRequestsFilter } from './middlewares/editors-requests-filter';
+
+// Export hooks
+export { useCuratedLanguages } from './hooks/use-curated-languages';
+export { useCurrentLanguage } from './hooks/use-current-language';
+export { useLanguagesList } from './hooks/use-languages-list';
+export { useMemoizedSwitcherLabel } from './hooks/use-memoized-switcher-label';