react-scripts-intlayer 4.0.0 → 4.0.2

package/README.md

@@ -1,275 +1,84 @@
 <div align="center">
-  <a href="https://www.npmjs.com/package/react-intlayer">
+  <a href="https://www.npmjs.com/package/react-scripts-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/react-scripts-intlayer">
+    <img alt="npm" src="https://img.shields.io/npm/v/react-scripts-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/react-scripts-intlayer">
+    <img alt="downloads" src="https://badgen.net/npm/dm/react-scripts-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/react-scripts-intlayer">
+    <img alt="types included" src="https://badgen.net/npm/types/react-scripts-intlayer?labelColor=49516F&color=8994BC" 
   />
   </a>
 </div>
 
-# Intlayer: Next-Level Content Management in JavaScript
+# react-scripts-intlayer: NPM Package to use Intlayer in a React Create App 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
+**The `react-scripts-intlayer` package** Includes the `react-scripts-intlayer` commands and plugins for integrating Intlayer with the Create React App based application. These plugins are based on [craco](https://craco.js.org/) and includes additional configuration for the [Webpack](https://webpack.js.org/) bundler.
 
-```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.
+## Configuration
 
-# Getting Started with Intlayer and React Create App
+The `react-scripts-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-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.
 
-Setting up Intlayer in a Create React App application is straightforward:
+## Installation
 
-## Step 1: Install Dependencies
+Install the necessary package using your preferred package manager:
 
-Install the necessary packages using npm:
-
-```bash
-npm install intlayer react-intlayer
+```bash packageManager="npm"
+npm install react-scripts-intlayer
 ```
 
-```bash
-yarn add intlayer react-intlayer
+```bash packageManager="yarn"
+yarn add react-scripts-intlayer
 ```
 
-```bash
-pnpm add intlayer react-intlayer
+```bash packageManager="pnpm"
+pnpm add react-scripts-intlayer
 ```
 
-## Step 2: Configuration of your project
-
-Create a config file to configure the languages of your application:
-
-```typescript
-// intlayer.config.ts
+## Usage
 
-import { Locales, type IntlayerConfig } from "intlayer";
+### CLI Commands
 
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
+The `react-scripts-intlayer` package provides the following CLI commands:
 
-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).
+- `npx react-scripts-intlayer build`: Builds React application with the Intlayer configuration.
+- `npx react-scripts-intlayer start`: Starts the development server with the Intlayer configuration.
 
-## Step 3: Integrate Intlayer in Your CRA Configuration
+### Replace package.json scripts
 
-Change your scripts to use react-intlayer
+To use the `react-scripts-intlayer` package, you need to replace the `package.json` scripts with the following commands:
 
-```json
+```json fileName="package.json"
+{
   "scripts": {
-    "build": "react-intlayer build",
-    "start": "react-intlayer start",
-    "transpile": "intlayer build"
-  },
-```
-
-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;
-```
-
-[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>
-  );
+    "start": "react-scripts-intlayer start",
+    "build": "react-scripts-intlayer build"
+  }
 }
-
-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;
 ```
 
-> 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} />
-> ```
+## Use custom Webpack configuration
 
-## (Optional) Step 6: Change the language of your content
+`react-scripts-intlayer` is based on [craco](https://craco.js.org/), which allows you to customize the Webpack configuration.
+If you need to customize the Webpack configuration, 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).
 
-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.
+## Read the full Intlayer guide for React Create App
 
-```tsx
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+Intlayer provides a lot of features to help you internationalize your React application.
+[See how to use intlayer with React Create App](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md).
 
-const MyComponent = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Change Language to English
-    </button>
-  );
-};
-```
-
-## Configure TypeScript
-
-Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
-
-Ensure your TypeScript configuration includes the autogenerated types.
-
-```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": "react-scripts-intlayer",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "private": false,
   "description": "Script for create react app application with intlayer",
   "keywords": [
@@ -40,16 +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"
-    },
-    "./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",
@@ -73,12 +63,8 @@
     "@craco/craco": "^7.1.0",
     "node-loader": "^2.1.0",
     "webpack": "^5.97.1",
-    "@intlayer/chokidar": "4.0.0",
-    "@intlayer/api": "4.0.0",
-    "@intlayer/config": "4.0.0",
-    "@intlayer/webpack": "4.0.0",
-    "@intlayer/dictionaries-entry": "4.0.0",
-    "@intlayer/core": "4.0.0"
+    "@intlayer/config": "4.0.2",
+    "@intlayer/webpack": "4.0.2"
   },
   "devDependencies": {
     "@craco/types": "^7.1.0",
@@ -95,23 +81,18 @@
     "tsc-alias": "^1.8.10",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@intlayer/backend": "4.0.0",
-    "@utils/eslint-config": "1.0.4",
-    "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
-    "@utils/tsup-config": "1.0.4"
+    "@utils/ts-config": "1.0.4",
+    "@intlayer/backend": "4.0.2",
+    "@utils/tsup-config": "1.0.4",
+    "@utils/eslint-config": "1.0.4"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
-    "vite": ">=4.0.0",
     "webpack": ">=5.0.0",
-    "@intlayer/chokidar": "4.0.0",
-    "@intlayer/config": "4.0.0",
-    "@intlayer/core": "4.0.0",
-    "@intlayer/dictionaries-entry": "4.0.0",
-    "@intlayer/webpack": "4.0.0",
-    "intlayer": "4.0.0"
+    "@intlayer/config": "4.0.2",
+    "@intlayer/webpack": "4.0.2"
   },
   "engines": {
     "node": ">=14.18"