Merge pull request #4569 from mayteio/feature/translations-to-ts

🏷 convert ra-language-english and ra-language-french to typescript

Makefile

@@ -37,6 +37,14 @@ build-ra-ui-materialui:
 	@echo "Transpiling ra-ui-materialui files...";
 	@cd ./packages/ra-ui-materialui && yarn -s build
 
+build-ra-language-english:
+	@echo "Transpiling ra-language-english files...";
+	@cd ./packages/ra-language-english && yarn -s build
+
+build-ra-language-french:
+	@echo "Transpiling ra-language-french files...";
+	@cd ./packages/ra-language-french && yarn -s build
+
 build-react-admin:
 	@echo "Transpiling react-admin files...";
 	@rm -rf ./packages/react-admin/docs
@@ -80,7 +88,7 @@ build-data-generator:
 	@echo "Transpiling data-generator files...";
 	@cd ./examples/data-generator && yarn -s build
 
-build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-react-admin  ## compile ES6 files to JS
+build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-react-admin  ## compile ES6 files to JS
 
 doc: ## compile doc as html and launch doc web server
 	@yarn -s doc

examples/demo/src/i18n/en.js → examples/demo/src/i18n/en.ts

@@ -1,6 +1,7 @@
+import { TranslationMessages } from 'ra-core';
 import englishMessages from 'ra-language-english';
 
-export default {
+const customEnglishMessages: TranslationMessages = {
     ...englishMessages,
     pos: {
         search: 'Search',
@@ -172,3 +173,5 @@ export default {
         },
     },
 };
+
+export default customEnglishMessages;

examples/demo/src/i18n/fr.js → examples/demo/src/i18n/fr.ts

@@ -1,6 +1,7 @@
+import { TranslationMessages } from 'ra-core';
 import frenchMessages from 'ra-language-french';
 
-export default {
+const customFrenchMessages: TranslationMessages = {
     ...frenchMessages,
     pos: {
         search: 'Rechercher',
@@ -188,3 +189,5 @@ export default {
         },
     },
 };
+
+export default customFrenchMessages;

packages/ra-core/src/i18n/TranslationMessages.ts

@@ -0,0 +1,141 @@
+interface StringMap {
+    [key: string]: StringMap | string | undefined;
+}
+
+export interface TranslationMessages extends StringMap {
+    ra: {
+        action: {
+            // for custom translation strings
+            [key: string]: StringMap | string;
+            add_filter: string;
+            add: string;
+            back: string;
+            bulk_actions: string;
+            cancel: string;
+            clear_input_value: string;
+            clone: string;
+            confirm: string;
+            create: string;
+            delete: string;
+            edit: string;
+            export: string;
+            list: string;
+            refresh: string;
+            remove_filter: string;
+            remove: string;
+            save: string;
+            search: string;
+            show: string;
+            sort: string;
+            undo: string;
+            expand: string;
+            close: string;
+        };
+        boolean: {
+            [key: string]: StringMap | string;
+            true: string;
+            false: string;
+            null: string;
+        };
+        page: {
+            [key: string]: StringMap | string;
+            create: string;
+            dashboard: string;
+            edit: string;
+            error: string;
+            list: string;
+            loading: string;
+            not_found: string;
+            show: string;
+            empty: string;
+            invite: string;
+        };
+        input: {
+            [key: string]: StringMap | string;
+            file: {
+                [key: string]: StringMap | string;
+                upload_several: string;
+                upload_single: string;
+            };
+            image: {
+                [key: string]: StringMap | string;
+                upload_several: string;
+                upload_single: string;
+            };
+            references: {
+                [key: string]: StringMap | string;
+                all_missing: string;
+                many_missing: string;
+                single_missing: string;
+            };
+            password: {
+                [key: string]: StringMap | string;
+                toggle_visible: string;
+                toggle_hidden: string;
+            };
+        };
+        message: {
+            [key: string]: StringMap | string;
+            about: string;
+            are_you_sure: string;
+            bulk_delete_content: string;
+            bulk_delete_title: string;
+            delete_content: string;
+            delete_title: string;
+            details: string;
+            error: string;
+            invalid_form: string;
+            loading: string;
+            no: string;
+            not_found: string;
+            yes: string;
+        };
+        navigation: {
+            [key: string]: StringMap | string;
+            no_results: string;
+            no_more_results: string;
+            page_out_of_boundaries: string;
+            page_out_from_end: string;
+            page_out_from_begin: string;
+            page_range_info: string;
+            page_rows_per_page: string;
+            next: string;
+            prev: string;
+        };
+        auth: {
+            [key: string]: StringMap | string;
+            auth_check_error: string;
+            user_menu: string;
+            username: string;
+            password: string;
+            sign_in: string;
+            sign_in_error: string;
+            logout: string;
+        };
+        notification: {
+            [key: string]: StringMap | string;
+            updated: string;
+            created: string;
+            deleted: string;
+            bad_item: string;
+            item_doesnt_exist: string;
+            http_error: string;
+            data_provider_error: string;
+            i18n_error: string;
+            canceled: string;
+            logged_out: string;
+        };
+        validation: {
+            [key: string]: StringMap | string;
+            required: string;
+            minLength: string;
+            maxLength: string;
+            minValue: string;
+            maxValue: string;
+            number: string;
+            email: string;
+            oneOf: string;
+            regex: string;
+        };
+    };
+}

packages/ra-core/src/i18n/index.ts

@@ -23,3 +23,4 @@ export const DEFAULT_LOCALE = 'en';
 
 export * from './TranslationUtils';
 export * from './TranslationContext';
+export * from './TranslationMessages';

packages/ra-i18n-polyglot/src/index.ts

@@ -1,8 +1,10 @@
 import Polyglot from 'node-polyglot';
 
-import { I18nProvider } from 'ra-core';
+import { I18nProvider, TranslationMessages } from 'ra-core';
 
-type GetMessages = (locale: string) => Object;
+type GetMessages = (
+    locale: string
+) => TranslationMessages | Promise<TranslationMessages>;
 
 /**
  * Build a polyglot-based i18nProvider based on a function returning the messages for a locale
@@ -45,7 +47,7 @@ export default (
                 // so we systematically return a Promise for the messages
                 // i18nProvider may return a Promise for language changes,
                 resolve(getMessages(newLocale as string))
-            ).then((messages: Object) => {
+            ).then((messages: TranslationMessages) => {
                 locale = newLocale;
                 const newPolyglot = new Polyglot({
                     locale: newLocale,

packages/ra-language-english/package.json

@@ -2,11 +2,28 @@
     "name": "ra-language-english",
     "version": "3.2.0",
     "description": "English messages for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services",
-    "main": "index.js",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/marmelab/react-admin.git"
     },
+    "files": [
+        "*.md",
+        "lib",
+        "esm",
+        "src"
+    ],
+    "main": "lib/index.js",
+    "module": "esm/index.js",
+    "types": "esm/index.d.ts",
+    "scripts": {
+        "build": "yarn run build-cjs && yarn run build-esm",
+        "build-cjs": "rimraf ./lib && tsc",
+        "build-esm": "rimraf ./esm && tsc --outDir esm --module es2015",
+        "watch": "tsc --outDir esm --module es2015 --watch"
+    },
+    "dependencies": {
+        "ra-core": "^3.3.2"
+    },
     "keywords": [
         "react",
         "react-admin",

packages/ra-language-english/index.js → packages/ra-language-english/src/index.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import { TranslationMessages } from 'ra-core';
+
+const englishMessages: TranslationMessages = {
     ra: {
         action: {
             add_filter: 'Add filter',
@@ -133,3 +135,5 @@ module.exports = {
         },
     },
 };
+
+export default englishMessages;

packages/ra-language-english/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "src",
+        "declaration": true,
+        "allowJs": false
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
+    "include": ["src"]
+}

packages/ra-language-french/package.json

@@ -2,11 +2,22 @@
     "name": "ra-language-french",
     "version": "3.2.0",
     "description": "French messages for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services",
-    "main": "index.js",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/marmelab/react-admin.git"
     },
+    "main": "lib/index.js",
+    "module": "esm/index.js",
+    "types": "esm/index.d.ts",
+    "scripts": {
+        "build": "yarn run build-cjs && yarn run build-esm",
+        "build-cjs": "rimraf ./lib && tsc",
+        "build-esm": "rimraf ./esm && tsc --outDir esm --module es2015",
+        "watch": "tsc --outDir esm --module es2015 --watch"
+    },
+    "dependencies": {
+        "ra-core": "^3.3.2"
+    },
     "keywords": [
         "react",
         "react-admin",

packages/ra-language-french/index.js → packages/ra-language-french/src/index.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import { TranslationMessages } from 'ra-core';
+
+const frenchMessages: TranslationMessages = {
     ra: {
         action: {
             add_filter: 'Ajouter un filtre',
@@ -138,3 +140,5 @@ module.exports = {
         },
     },
 };
+
+export default frenchMessages;

packages/ra-language-french/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "src",
+        "declaration": true,
+        "allowJs": false
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
+    "include": ["src"]
+}