Feat: plugin for intl (#6863)

* feat: plugin for intl * chore: readme * chore: changelog * Update runtime.tsx * Update README.md * feat: support intl in server
alibaba · May 6, 2024 · 8dada9b · 8dada9b
1 parent 5c40dc9
commit 8dada9b
Show file tree

Hide file tree

Showing 28 changed files with 459 additions and 9 deletions.
diff --git a/.changeset/brave-actors-suffer.md b/.changeset/brave-actors-suffer.md
@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+feat: support generator api to inject code in server entry
diff --git a/examples/with-intl/.browserslistrc b/examples/with-intl/.browserslistrc
@@ -0,0 +1 @@
+chrome 55
diff --git a/examples/with-intl/ice.config.mts b/examples/with-intl/ice.config.mts
@@ -0,0 +1,6 @@
+import { defineConfig } from '@ice/app';
+import intl from '@ice/plugin-intl';
+
+export default defineConfig(() => ({
+  plugins: [intl()],
+}));
diff --git a/examples/with-intl/package.json b/examples/with-intl/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/with-intl",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-intl": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.2"
+  }
+}
diff --git a/examples/with-intl/public/favicon.ico b/examples/with-intl/public/favicon.ico
diff --git a/examples/with-intl/src/app.tsx b/examples/with-intl/src/app.tsx
@@ -0,0 +1,8 @@
+import { defineAppConfig } from 'ice';
+import type { LocaleConfig } from '@ice/plugin-intl/types';
+
+export default defineAppConfig(() => ({}));
+
+export const locale: LocaleConfig = {
+  getLocale: () => 'en-US',
+};
diff --git a/examples/with-intl/src/document.tsx b/examples/with-intl/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-intl/src/global.css b/examples/with-intl/src/global.css
@@ -0,0 +1,3 @@
+body {
+  font-size: 14px;
+}
diff --git a/examples/with-intl/src/locales/en-US.ts b/examples/with-intl/src/locales/en-US.ts
@@ -0,0 +1,3 @@
+export default {
+  new: 'New',
+};
diff --git a/examples/with-intl/src/locales/zh-CN.json b/examples/with-intl/src/locales/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "new": "新建"
+}
diff --git a/examples/with-intl/src/pages/index.tsx b/examples/with-intl/src/pages/index.tsx
@@ -0,0 +1,10 @@
+import { intl } from 'ice';
+
+export default function Home() {
+  return (
+    <>
+      <h1>home</h1>
+      <button>{intl.formatMessage({ id: 'new' })}</button>
+    </>
+  );
+}
diff --git a/examples/with-intl/src/typings.d.ts b/examples/with-intl/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/with-intl/tsconfig.json b/examples/with-intl/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/packages/ice/src/createService.ts b/packages/ice/src/createService.ts
@@ -93,8 +93,13 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     addEntryCode: (callback: (originalCode: string) => string) => {
       entryCode = callback(entryCode);
     },
-    addEntryImportAhead: (declarationData: Pick<DeclarationData, 'source'>) => {
-      generator.addDeclaration('entry', declarationData);
+    addEntryImportAhead: (declarationData: Pick<DeclarationData, 'source'>, type = 'client') => {
+      if (type === 'both' || type === 'server') {
+        generator.addDeclaration('entryServer', declarationData);
+      }
+      if (type === 'both' || type === 'client') {
+        generator.addDeclaration('entry', declarationData);
+      }
     },
     modifyRenderData: generator.modifyRenderData,
     addDataLoaderImport: (declarationData: DeclarationData) => {

diff --git a/packages/ice/src/service/runtimeGenerator.ts b/packages/ice/src/service/runtimeGenerator.ts
@@ -141,7 +141,7 @@ export default class Generator {
     this.rerender = false;
     this.renderTemplates = [];
     this.renderDataRegistration = [];
-    this.contentTypes = ['framework', 'frameworkTypes', 'routeConfigTypes', 'dataLoaderImport', 'runtimeOptions', 'entry'];
+    this.contentTypes = ['framework', 'frameworkTypes', 'routeConfigTypes', 'dataLoaderImport', 'runtimeOptions', 'entry', 'entryServer'];
     // empty .ice before render
     fse.emptyDirSync(path.join(rootDir, targetDir));
     // add initial templates

diff --git a/packages/ice/src/types/plugin.ts b/packages/ice/src/types/plugin.ts
@@ -13,7 +13,7 @@ export type { CreateLoggerReturnType } from '../utils/logger.js';
 
 type AddExport = (exportData: DeclarationData) => void;
 type AddEntryCode = (callback: (code: string) => string) => void;
-type AddEntryImportAhead = (exportData: Pick<DeclarationData, 'source'>) => void;
+type AddEntryImportAhead = (exportData: Pick<DeclarationData, 'source'>, type?: string) => void;
 type RemoveExport = (removeSource: string | string[]) => void;
 type EventName = 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir';
 type GetExportList = (key: string, target?: string) => DeclarationData[];

diff --git a/packages/ice/templates/core/entry.server.ts.ejs b/packages/ice/templates/core/entry.server.ts.ejs
@@ -1,4 +1,5 @@
 import './env.server';
+<%- entryServer.imports %>
 import * as runtime from '@ice/runtime/server';
 <% if (hydrate) {-%>
 import { commons, statics } from './runtime-modules';
@@ -21,6 +22,7 @@ import routesManifest from './route-manifest.json';
 import routesConfig from './routes-config.bundle.mjs';
 <% if (dataLoaderImport.imports) {-%><%-dataLoaderImport.imports%><% } -%>
 <% if (hydrate) {-%><%- runtimeOptions.imports %><% } -%>
+
 <% if (!hydrate) {-%>
 // Do not inject runtime modules when render mode is document only.
 const commons = [];

diff --git a/packages/plugin-intl/CHANGELOG.md b/packages/plugin-intl/CHANGELOG.md
@@ -0,0 +1,5 @@
+# @ice/plugin-intl
+
+## 1.0.0
+
+- Initial release
diff --git a/packages/plugin-intl/README.md b/packages/plugin-intl/README.md
@@ -0,0 +1,73 @@
+# @ice/plugin-intl
+
+`@ice/plugin-intl` is a ice.js plugin. It provides a simple way to add internationalization support to your application.
+
+> `@ice/plugin-intl` is based on `react-intl`.
+
+## Install
+
+```bash
+$ npm i @ice/plugin-intl --save-dev
+```
+
+## Usage
+
+Define the plugin in `ice.config.mts`:
+
+```ts
+import { defineConfig } from '@ice/app';
+import intl from '@ice/plugin-intl';
+
+export default defineConfig({
+  plugins: [
+    intl(),
+  ],
+});
+```
+
+Define locale config in `src/app.ts`:
+
+```ts
+import { defineAppConfig } from 'ice';
+import type { LocaleConfig } from '@ice/plugin-intl/types';
+
+export default defineAppConfig(() => ({}));
+
+export const locale: LocaleConfig = {
+  // Cutomize getLocale method and other options supported by react-intl.
+  getLocale: () => 'en-US',
+};
+```
+
+## Locales
+
+Locales are defined in the `src/locales` directory. Each locale is defined in a separate file, with the locale name as the file name. For example, `en-US.ts`:
+
+```ts
+export default {
+  'app.title': 'My Application',
+  'app.welcome': 'Welcome to my application!',
+};
+```
+
+Use the `useIntl` hook to access the current locale:
+
+```tsx
+import { useIntl } from 'ice';
+
+export default function Home() {
+  const intl = useIntl();
+  console.log(intl.formatMessage({ id: 'new' }));
+  return <h1>home</h1>;
+}
+```
+
+Use the `intl` function to access the current locale:
+
+```tsx
+import { intl } from 'ice';
+
+function alertMessage() {
+  alert(intl.formatMessage({ id: 'app.welcome' }));
+}
+```
diff --git a/packages/plugin-intl/package.json b/packages/plugin-intl/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@ice/plugin-intl",
+  "version": "1.0.0",
+  "description": "react intl plugin for ice.js 3.",
+  "files": [
+    "esm",
+    "!esm/**/*.map",
+    "*.d.ts",
+    "templates"
+  ],
+  "type": "module",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "exports": {
+    ".": "./esm/index.js",
+    "./runtime": "./esm/runtime.js",
+    "./types": "./esm/types.js"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "watch": "tsc -w --sourceMap",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "react-intl": "^6.0.0",
+    "fast-glob": "^3.3.2"
+  },
+  "devDependencies": {
+    "@ice/app": "^3.3.2",
+    "@ice/runtime": "^1.2.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/alibaba/ice/tree/master/packages/plugin-intl"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/plugin-intl/runtime.d.ts b/packages/plugin-intl/runtime.d.ts
@@ -0,0 +1 @@
+export * from './esm/runtime';
diff --git a/packages/plugin-intl/src/index.ts b/packages/plugin-intl/src/index.ts
@@ -0,0 +1,73 @@
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+import fg from 'fast-glob';
+import type { Plugin } from '@ice/app/types';
+
+const _dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const plugin: Plugin = () => ({
+  name: 'plugin-intl',
+  setup: ({ generator, context, createLogger, watch }) => {
+    const { rootDir } = context;
+    const logger = createLogger('plugin-intl');
+
+    const renderLocaleEntry = (localeFiles: string[]) => {
+      const locales = [];
+      let localeExport = [];
+      localeFiles.forEach((file) => {
+        const filename = path.basename(file, path.extname(file));
+        // `-` is not allowed in import specifier.
+        const specifier = filename.replace('-', '_');
+        locales.push(`import ${specifier} from '@/locales/${filename}';`);
+        localeExport.push(`'${filename}': ${specifier},`);
+      });
+
+      generator.addRenderFile(
+        path.join(_dirname, '../templates/locales.ts.ejs'),
+        'locales.ts',
+        {
+          localeImport: locales.join('\n'),
+          localeExport: localeExport.join('\n  '),
+        },
+      );
+    };
+    const globRule = 'src/locales/*.{ts,js,json}';
+    // Glob all locale files, and generate runtime options.
+    const localeFiles = fg.sync(globRule, { cwd: rootDir });
+    if (localeFiles.length > 0) {
+      // Filter the entry of locale files.
+      const mainEntry = localeFiles.find((file) => file.match(/index\.(ts|js|json)$/));
+      let runtimeSource = '';
+      if (mainEntry) {
+        runtimeSource = `@/locales/${path.basename(mainEntry)}`;
+      } else {
+        // Create a locale entry file to export all locale files.
+        renderLocaleEntry(localeFiles);
+
+        // Add watch event for locale files added or removed.
+        watch.addEvent([/src\/locales/, (event) => {
+          if (event === 'unlink' || event === 'add') {
+            const files = fg.sync(globRule, { cwd: rootDir });
+            renderLocaleEntry(files);
+          }
+        }]);
+        runtimeSource = './locales';
+
+        generator.addEntryImportAhead({
+          source: runtimeSource,
+        }, 'both');
+      }
+    } else {
+      logger.warn('No locale files found, please check the `src/locales` folder.');
+    }
+
+    // Add intl export from ice.
+    generator.addExport({
+      specifier: ['useIntl', 'intl'],
+      source: '@ice/plugin-intl/runtime',
+    });
+  },
+  runtime: '@ice/plugin-intl/runtime',
+});
+
+export default plugin;