From 91a8f8f6939058e9f8afae10c4ddcf9ccd141208 Mon Sep 17 00:00:00 2001 From: Leo Zurbriggen Date: Fri, 24 Feb 2023 15:49:36 +0100 Subject: [PATCH 01/36] "type": "module"/esm and package updates --- dev/components/DemoDateFormat.vue | 8 +- dev/i18n.ts | 2 +- docs/.vuepress/config.ts | 4 +- docs/.vuepress/tsconfig.json | 6 + docs/README.md | 2 +- docs/setup.md | 4 +- docs/zh/README.md | 30 +- docs/zh/setup.md | 7 +- gettext.config.js => gettext.config.cjs | 0 package-lock.json | 5908 +++++++++-------------- package.json | 7 +- scripts/attributeEmbeddedJsExtractor.ts | 6 +- scripts/config.ts | 2 +- scripts/embeddedJsExtractor.ts | 12 +- scripts/extract.ts | 10 +- scripts/gettext_compile.ts | 8 +- scripts/gettext_extract.ts | 17 +- scripts/tsconfig.json | 11 + scripts/utils.ts | 2 +- tsconfig.json | 5 +- 20 files changed, 2381 insertions(+), 3670 deletions(-) create mode 100644 docs/.vuepress/tsconfig.json rename gettext.config.js => gettext.config.cjs (100%) create mode 100644 scripts/tsconfig.json diff --git a/dev/components/DemoDateFormat.vue b/dev/components/DemoDateFormat.vue index fb221c9..964f849 100644 --- a/dev/components/DemoDateFormat.vue +++ b/dev/components/DemoDateFormat.vue @@ -7,10 +7,10 @@ diff --git a/dev/tsconfig.json b/dev/tsconfig.json index fa70732..5828749 100644 --- a/dev/tsconfig.json +++ b/dev/tsconfig.json @@ -5,10 +5,7 @@ "resolveJsonModule": true, "esModuleInterop": true, "baseUrl": "./", - "skipLibCheck": true, - "paths": { - "vue3-gettext": ["../src/index"] - } + "skipLibCheck": true }, "include": ["./**/*"] } diff --git a/dev/vite.config.ts b/dev/vite.config.ts index 1077556..4be9f9b 100644 --- a/dev/vite.config.ts +++ b/dev/vite.config.ts @@ -4,9 +4,4 @@ import { defineConfig } from "vite"; export default defineConfig({ plugins: [vue()], - resolve: { - alias: { - "vue3-gettext": path.resolve(__dirname, "../src/index"), - }, - }, }); diff --git a/dev2/.vitepress/config.ts b/dev2/.vitepress/config.ts new file mode 100644 index 0000000..d016e79 --- /dev/null +++ b/dev2/.vitepress/config.ts @@ -0,0 +1,44 @@ +import { defineConfig } from "vitepress"; + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + title: "vue3-gettext", + description: "TODO", + + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + nav: [ + { text: "Home", link: "/" }, + { text: "Examples", link: "/markdown-examples" }, + ], + + sidebar: [ + { + text: "Examples", + items: [ + { link: "/demo.md", text: "Demo" }, + { + text: "Setup", + link: "/setup.md", + items: [ + { link: "/setup.md", text: "Installation" }, + { link: "/extraction.md", text: "Message extraction" }, + { link: "/configuration.md", text: "Configuration" }, + ], + }, + { + text: "Usage", + link: "/functions.md", + items: [{ link: "/functions.md", text: "Functions" }], + }, + { + text: "Translation", + link: "/translation.md", + }, + ], + }, + ], + + socialLinks: [{ icon: "github", link: "https://github.com/vuejs/vitepress" }], + }, +}); diff --git a/dev2/.vitepress/theme/index.ts b/dev2/.vitepress/theme/index.ts new file mode 100644 index 0000000..1a9f8bb --- /dev/null +++ b/dev2/.vitepress/theme/index.ts @@ -0,0 +1,12 @@ +import DefaultTheme from "vitepress/theme"; +import { Theme } from "vitepress"; +import Demo from "../../../dev/App.vue"; +import { gettext } from "../../../dev/i18n"; + +export default { + ...DefaultTheme, + enhanceApp({ app }) { + app.use(gettext); + app.component("Demo", Demo); + }, +}; diff --git a/dev2/.vitepress/tsconfig.json b/dev2/.vitepress/tsconfig.json new file mode 100644 index 0000000..bc7aac6 --- /dev/null +++ b/dev2/.vitepress/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../dev/tsconfig.json", + "include": ["./**/*.vue", "./**/*.ts"] +} diff --git a/dev2/README.md b/dev2/README.md new file mode 100644 index 0000000..469dd7b --- /dev/null +++ b/dev2/README.md @@ -0,0 +1,53 @@ +--- +home: true +heroText: Vue 3 Gettext +tagline: Translate your Vue 3 applications with Gettext +actions: + - text: Demo + link: /demo.html + type: primary + - text: Setup + link: /setup.html + type: secondary + - text: Docs + link: /setup.html + type: secondary +footer: MIT Licensed | Copyright © 2020-present JOSHMARTIN GmbH +--- + +# Quick Start + +```sh +npm i vue3-gettext +``` + +Set up gettext in your `main.ts`/`main.js`: + +```javascript {main.ts/main.js} +import { createGettext } from "vue3-gettext"; +import { createApp } from "vue"; +import translations from "./src/language/translations.json"; + +const app = createApp(App); +app.use(createGettext({ translations })); +``` + +Use gettext functions in your application: + +```jsx +{{ $gettext("Translate me") }} +``` + +Add scripts to your `package.json`: + +```json { package.json } +"scripts": { + ... + "gettext:extract": "vue-gettext-extract", + "gettext:compile": "vue-gettext-compile", +} +``` + +`npm run gettext:extract` extracts translation keys from your code and creates `.po` files to translate. + +`npm run gettext:compile` compiles the translated messages from the `.po` files to a `.json` to be used in your application. diff --git a/dev2/api-examples.md b/dev2/api-examples.md new file mode 100644 index 0000000..6bd8bb5 --- /dev/null +++ b/dev2/api-examples.md @@ -0,0 +1,49 @@ +--- +outline: deep +--- + +# Runtime API Examples + +This page demonstrates usage of some of the runtime APIs provided by VitePress. + +The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files: + +```md + + +## Results + +### Theme Data +
{{ theme }}
+ +### Page Data +
{{ page }}
+ +### Page Frontmatter +
{{ frontmatter }}
+``` + + + +## Results + +### Theme Data +
{{ theme }}
+ +### Page Data +
{{ page }}
+ +### Page Frontmatter +
{{ frontmatter }}
+ +## More + +Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata). diff --git a/dev2/configuration.md b/dev2/configuration.md new file mode 100644 index 0000000..6735fb8 --- /dev/null +++ b/dev2/configuration.md @@ -0,0 +1,67 @@ +# Configuration + +Once you have extracted your messages and compiled a `.json` file, you are ready to set up the gettext plugin in your `main.ts`/`main.js`: + +```ts +import { createGettext } from "vue3-gettext"; +import translations from "./language/translations.json"; + +const gettext = createGettext({ + availableLanguages: { + en: "English", + de: "Deutsch", + }, + defaultLanguage: "en", + translations: translations, +}); + +const app = createApp(App); +app.use(gettext); +``` + +All the available options can be found in the `GetTextOptions` type, these are the default values: + +```ts +{ + availableLanguages: { en: "English" }, + defaultLanguage: "en", + mutedLanguages: [], + silent: false, + translations: {}, + setGlobalProperties: true, + globalProperties: { // custom global properties name + language: ['$language'], // the plugin instance + gettext: ['$gettext'], // ['$gettext', '__'] + pgettext: ['$pgettext'], // ['$pgettext', '_n'] + ngettext: ['$ngettext'], // ['$ngettext','_x'] + npgettext: ['$npgettext'], // ['$npgettext', '_nx'] + interpolate: ['$gettextInterpolate'],// deprecated + }, + provideDirective: true, + provideComponent: true, +} +``` + +## Gotchas + +### Using gettext functions outside of components + +If you need to have plain typescript/javascript files that must access gettext, you may simple move and export gettext from a separate file: + +`gettext.ts` + +```ts +export default createGettext({ + ... +}); +``` + +Then import and use the functions: + +```ts +import gettext from "./gettext"; + +const { $gettext } = gettext; + +const myTest = $gettext("My translation message"); +``` diff --git a/dev2/demo.md b/dev2/demo.md new file mode 100644 index 0000000..a180e47 --- /dev/null +++ b/dev2/demo.md @@ -0,0 +1,14 @@ +# Demo + + + + + + diff --git a/dev2/extraction.md b/dev2/extraction.md new file mode 100644 index 0000000..642491f --- /dev/null +++ b/dev2/extraction.md @@ -0,0 +1,109 @@ +# Message extraction + +To extract all the messages that you want translated from your application code, a bit of setup is required. + +## Scripts + +First, add scripts to your `package.json`: + +```json { package.json } +"scripts": { + ... + "gettext:extract": "vue-gettext-extract", + "gettext:compile": "vue-gettext-compile", +} +``` + +`npm run gettext:extract` extracts messages from your code and creates `.po` files. + +`npm run gettext:compile` compiles the translated messages from the `.po` files to a `.json` to be used in your application. + +Using these scripts is _theoretically_ optional if you have other means of extraction or may even want to write message files yourself. + +## Configuration + +Before running the scripts, create a file `gettext.config.js` in your application root. This is a configuration _only_ for the scripts above. A minimal configuration may look like this: + +```js +module.exports = { + output: { + locales: ["en", "de"], + }, +}; +``` + +You can also use a `gettext.config.mjs` file with the Ecmascript module format: + +```js +export default { + output: { + locales: ["en", "de"], + }, +}; +``` + +Here are all the available configuration options and their defaults: + + + +```js +module.exports = { + input: { + path: "./src", // only files in this directory are considered for extraction + include: ["**/*.js", "**/*.ts", "**/*.vue"], // glob patterns to select files for extraction + exclude: [], // glob patterns to exclude files from extraction + jsExtractorOpts: [ + // custom extractor keyword. default empty. + { + keyword: "__", // only extractor default keyword such as $gettext,use keyword to custom + options: { + // see https://github.com/lukasgeiter/gettext-extractor + content: { + replaceNewLines: "\n", + }, + arguments: { + text: 0, + }, + }, + }, + { + keyword: "_n", // $ngettext + options: { + content: { + replaceNewLines: "\n", + }, + arguments: { + text: 0, + textPlural: 1, + }, + }, + }, + ], + compileTemplate: false, // do not compile