vite-intlayer 4.0.0 → 4.0.2

package/README.md

@@ -1,275 +1,80 @@
 <div align="center">
-  <a href="https://www.npmjs.com/package/react-intlayer">
+  <a href="https://www.npmjs.com/package/vite-intlayer">
     <img src="https://raw.githubusercontent.com/aymericzip/intlayer/572ae9c9acafb74307b81530c1931a8e98990aef/docs/assets/logo.png" width="500" alt="intlayer" />
   </a>
 </div>
 
 <div align="center">
-  <a href="https://www.npmjs.com/package/react-intlayer">
-    <img alt="npm" src="https://img.shields.io/npm/v/react-intlayer.svg?labelColor=49516F&color=8994BC" />
+  <a href="https://www.npmjs.com/package/vite-intlayer">
+    <img alt="npm" src="https://img.shields.io/npm/v/vite-intlayer.svg?labelColor=49516F&color=8994BC" />
   </a>
-  <a href="https://npmjs.org/package/react-intlayer">
-    <img alt="downloads" src="https://badgen.net/npm/dm/react-intlayer?labelColor=49516F&color=8994BC" />
+  <a href="https://npmjs.org/package/vite-intlayer">
+    <img alt="downloads" src="https://badgen.net/npm/dm/vite-intlayer?labelColor=49516F&color=8994BC" />
   </a>
-  <a href="https://npmjs.org/package/react-intlayer">
-    <img alt="types included" src="https://badgen.net/npm/types/react-intlayer?labelColor=49516F&color=8994BC" 
+  <a href="https://npmjs.org/package/vite-intlayer">
+    <img alt="types included" src="https://badgen.net/npm/types/vite-intlayer?labelColor=49516F&color=8994BC" 
   />
   </a>
 </div>
 
-# Intlayer: Next-Level Content Management in JavaScript
+# vite-intlayer: NPM Package to internationalize (i18n) an Vite application
 
-**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make your development stronger and more efficient.
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
 
-## Example of usage
-
-```bash
-.
-├── Component1
-│   ├── index.content.ts
-│   └── index.tsx
-└── Component2
-    ├── index.content.ts
-    └── index.tsx
-```
-
-```tsx
-// ./Component1/index.content.ts
-
-import { type DeclarationContent, t } from "intlayer";
-
-const component1Content = {
-  key: "component1",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      fr: "Bonjour le monde",
-      es: "Hola Mundo",
-    }),
-  },
-} satisfies DeclarationContent;
-```
-
-```tsx
-// ./Component1/index.tsx
-
-import { useIntlayer } from "react-intlayer";
-
-export const Component1 = () => {
-  const { myTranslatedContent } = useIntlayer("component1");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-## Why Choose Intlayer?
-
-- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
-- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
-- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
-- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
-- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
-
-# Getting Started with Intlayer and React Create App
-
-Setting up Intlayer in a Create React App application is straightforward:
-
-## Step 1: Install Dependencies
-
-Install the necessary packages using npm:
-
-```bash
-npm install intlayer react-intlayer
-```
-
-```bash
-yarn add intlayer react-intlayer
-```
-
-```bash
-pnpm add intlayer react-intlayer
-```
-
-## Step 2: Configuration of your project
-
-Create a config file to configure the languages of your application:
+**The `vite-intlayer` package** allows you to internationalize your Vite application. It includes the Vite plugin to set the configuration through environment variables into the [Vite bundler](https://vitejs.dev/guide/why.html#why-bundle-for-production). It also provides middleware to detect the user's preferred locale, and redirect the user to the appropriate URL as specified in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
 
-```typescript
-// intlayer.config.ts
+## Why Internationalize Your Vite Application?
 
-import { Locales, type IntlayerConfig } from "intlayer";
+Internationalizing your Vite application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
 
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
+## Configuration
 
-export default config;
-```
-
-To see all available parameters, refer to the [configuration documentation here](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
+The `vite-intlayer` package works seamlessly with the [`vite-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/vite-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md). Have a look at the relevant documentation for more information.
 
-## Step 3: Integrate Intlayer in Your CRA Configuration
+## Installation
 
-Change your scripts to use react-intlayer
+Install the necessary package using your preferred package manager:
 
-```json
-  "scripts": {
-    "build": "react-intlayer build",
-    "start": "react-intlayer start",
-    "transpile": "intlayer build"
-  },
+```bash packageManager="npm"
+npm install vite-intlayer
 ```
 
-Note: react-intlayer scripts are based on craco. You can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
-
-## Step 4: Declare Your Content
-
-Create and manage your content dictionaries:
-
-```tsx
-// src/app.content.tsx
-import { t, type DeclarationContent } from "intlayer";
-import { type ReactNode } from "react";
-
-const appContent = {
-  key: "app",
-  content: {
-    getStarted: t<ReactNode>({
-      en: (
-        <>
-          Edit <code>src/App.tsx</code> and save to reload
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/App.tsx</code> et enregistrez pour recharger
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/App.tsx</code> y guarda para recargar
-        </>
-      ),
-    }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Learn React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-      }),
-    },
-  },
-} satisfies DeclarationContent;
-
-export default appContent;
+```bash packageManager="yarn"
+yarn add vite-intlayer
 ```
 
-[See how to declare your Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/en/content_declaration/get_started.md)
-
-## Step 5: Utilize Intlayer in Your Code
-
-Access your content dictionaries throughout your application:
-
-```tsx
-import logo from "./logo.svg";
-import "./App.css";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
-
-function AppContent() {
-  const content = useIntlayer("app");
-
-  return (
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-
-      {content.getStarted}
-      <a
-        className="App-link"
-        href={content.reactLink.href.value}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {content.reactLink.content}
-      </a>
-    </header>
-  );
-}
-
-function App() {
-  return (
-    <IntlayerProvider>
-      <div className="App">
-        {/* To use the useIntlayer hook properly, you should access your data in a children component */}
-        <AppContent />
-      </div>
-      <div className="absolute bottom-5 right-5 z-50">
-        <LocaleSwitcher />
-      </div>
-    </IntlayerProvider>
-  );
-}
-
-export default App;
+```bash packageManager="pnpm"
+pnpm add vite-intlayer
 ```
 
-> Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
->
-> ```tsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> ```
-
-## (Optional) Step 6: Change the language of your content
-
-To change the language of your content, you can use the `setLocale` function provided by the `useLocale` hook. This function allows you to set the locale of the application and update the content accordingly.
+## Example of usage
 
-```tsx
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+See an example of how to include the plugins into your vite configuration.
 
-const MyComponent = () => {
-  const { setLocale } = useLocale();
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
 
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Change Language to English
-    </button>
-  );
-};
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayerPlugin(), intLayerMiddlewarePlugin()],
+});
 ```
 
-## Configure TypeScript
+> The `intlayerPlugin()` Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.
 
-Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
+> The `intLayerMiddlewarePlugin()` add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+## Mastering the internationalization of your Vite application
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+Intlayer provides a lot of features to help you internationalize your Vite application.
 
-Ensure your TypeScript configuration includes the autogenerated types.
+**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application.**
 
-```json5
-// tsconfig.json
-
-{
-  // your custom config
-  "include": [
-    "src",
-    "types", // <- Include the auto generated types
-  ],
-}
-```
+## Read about Intlayer
 
-# Getting Started with Intlayer and Vite + React
+- [Intlayer Website](https://intlayer.org)
+- [Intlayer Documentation](https://intlayer.org/docs)
+- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
 
-For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite_react.md)
+- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-intlayer",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "private": false,
   "description": "Intlayer for vite application",
   "keywords": [
@@ -40,31 +40,6 @@
       "require": "./dist/cjs/index.cjs",
       "import": "./dist/esm/index.mjs"
     },
-    "./server": {
-      "types": "./dist/types/server/index.d.ts",
-      "require": "./dist/cjs/server/index.cjs",
-      "import": "./dist/esm/server/index.mjs"
-    },
-    "./craco-plugin": {
-      "types": "./dist/types/craco/intlayerCracoPlugin.d.ts",
-      "require": "./dist/cjs/craco/intlayerCracoPlugin.cjs",
-      "import": "./dist/esm/craco/intlayerCracoPlugin.mjs"
-    },
-    "./craco-config": {
-      "types": "./dist/types/craco/craco.config.d.ts",
-      "require": "./dist/cjs/craco/craco.config.cjs",
-      "import": "./dist/esm/craco/craco.config.mjs"
-    },
-    "./vite": {
-      "types": "./dist/types/vite/index.d.ts",
-      "require": "./dist/cjs/vite/index.cjs",
-      "import": "./dist/esm/vite/index.mjs"
-    },
-    "./editor": {
-      "types": "./dist/types/editor/index.d.ts",
-      "require": "./dist/cjs/editor/index.cjs",
-      "import": "./dist/esm/editor/index.mjs"
-    },
     "./package.json": "./package.json"
   },
   "main": "dist/cjs/index.cjs",
@@ -83,9 +58,9 @@
   ],
   "dependencies": {
     "vite": "^6.0.7",
-    "@intlayer/config": "4.0.0",
-    "@intlayer/core": "4.0.0",
-    "@intlayer/chokidar": "4.0.0"
+    "@intlayer/config": "4.0.2",
+    "@intlayer/core": "4.0.2",
+    "@intlayer/chokidar": "4.0.2"
   },
   "devDependencies": {
     "@types/node": "^22.10.6",
@@ -97,16 +72,16 @@
     "tsc-alias": "^1.8.10",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@utils/eslint-config": "1.0.4",
     "@utils/tsup-config": "1.0.4",
     "@utils/ts-config": "1.0.4",
-    "@utils/ts-config-types": "1.0.4"
+    "@utils/ts-config-types": "1.0.4",
+    "@utils/eslint-config": "1.0.4"
   },
   "peerDependencies": {
     "vite": ">=4.0.0",
-    "@intlayer/chokidar": "4.0.0",
-    "@intlayer/core": "4.0.0",
-    "@intlayer/config": "4.0.0"
+    "@intlayer/chokidar": "4.0.2",
+    "@intlayer/config": "4.0.2",
+    "@intlayer/core": "4.0.2"
   },
   "engines": {
     "node": ">=14.18"