Skip to content

Commit 5672236

Browse files
kazuponkazupon
committed
update docs
1 parent 2d4d2a3 commit 5672236

File tree

2 files changed

+53
-64
lines changed

2 files changed

+53
-64
lines changed

‎packages/petite-vue-i18n/README.md‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ Small size subset of Vue I18n
77
## :question: What is defference from Vue I18n ?
88

99
- The Size is smaller than vue-i18n
10-
- For CDN or without a Bundler
10+
- CDN or without a Bundler
1111
- Reduce size: runtime + compiler `~36%`, runtime only `~49%`
1212
- `petite-vue-i18n`: runtime + compiler `~7.48KB`, runtime only `~4.07KB` (production build, brotli compression)
1313
- `vue-i18n`: runtime + compiler `~11.71KB`, runtime only `~8.30KB` (production build, brotli compression)
1414
- ES Modules for browser
1515
- Reduce size: runtime + compiler `~35%`, runtime only `~49%`
1616
- `petite-vue-i18n`: runtime + compiler `~7.51KB`, runtime only `~4.09KB` (production build, brotli compression)
1717
- `vue-i18n`: runtime + compiler `~11.73KB`, runtime only `~8.34KB` (production build, brotli compression)
18+
- Bundle size
19+
- Reduce size from `vue-i18n`: runtime + compiler `~14%`, runtime only `~22%` (Code size check measurement of [vue-i18n](https://github.com/intlify/vue-i18n-next/tree/master/packages/size-check-vue-i18n) and [petite-vue-i18n](https://github.com/intlify/vue-i18n-next/tree/master/packages/size-check-petite-vue-i18n))
1820
- The legacy API is not supported, **only the composition API**
1921
- The APIs for the following DateTime Foramts, Number Formats, and utilities aren’t included. **Translation only**
2022
- `n`, `$n`
@@ -150,6 +152,54 @@ app.use(i18n)
150152
app.mount('#app')
151153
```
152154

155+
### Use the same message resolver and locale fallbacker as `vue-i18n`
156+
157+
In `petite-vue-i18n`, the message resolver and locale fallbacker use simple implementations to optimize code size, as described in the [differences section](https://github.com/intlify/vue-i18n-next/tree/master/packages/petite-vue-i18n#question-what-is-defference-from-vue-i18n-), as the belows:
158+
159+
- message resolver
160+
- Resolves key-value style locale messages
161+
- About implementation, see the [here](https://github.com/intlify/vue-i18n-next/blob/2d4d2a342f8bae134665a0b7cd945fb8b638839a/packages/core-base/src/resolver.ts#L305-L307)
162+
- locale fallbacker
163+
- Fallback according to the array order specified in `fallbackLocale`
164+
- If a simple string locale is specified, fallback to that locale
165+
- About implementation, see the [here](https://github.com/intlify/vue-i18n-next/blob/2d4d2a342f8bae134665a0b7cd945fb8b638839a/packages/core-base/src/fallbacker.ts#L40-L58)
166+
167+
If you want to use the same message resolver and locale fallbacker as `vue-i18n`, you can change them using the API.
168+
169+
Note that at this time, only bundlers like vite and webpack are supported.
170+
171+
You need to install `@intlify/core-base` to your project with package manager.
172+
173+
```sh
174+
$ npm install --save @intlify/core-base@alpha
175+
# or
176+
# yarn add @intlify/core-base@alpha
177+
```
178+
179+
Then, at the entry point of the application, configure the message resolver and locale fallbacker using the API as the below:
180+
181+
```js
182+
import { createApp } from 'vue'
183+
import { createI18n } from 'petitle-vue-i18n'
184+
import {
185+
registerMessageResolver, // register the message resolver API
186+
resolveValue, // message resolver of vue-i18n which is used by default
187+
registerLocaleFallbacker, // register the locale fallbacker API
188+
fallbackWithLocaleChain // locale fallbacker of vue-i18n which is used by default
189+
} from '@intlify/core-base'
190+
191+
// register message resolver of vue-i18n
192+
registerMessageResolver(resolveValue)
193+
194+
// register locale fallbacker of vue-i18n
195+
registerLocaleFallbacker(fallbackWithLocaleChain)
196+
197+
// some thing code ...
198+
// ...
199+
```
200+
201+
With the above settings, locale message resolving and locale fallbacking will be handled in the same way as in vue-i18n, note that the code size will increase slightly.
202+
153203
## :copyright: License
154204

155205
[MIT](http://opensource.org/licenses/MIT)

‎packages/vue-i18n-core/README.md‎

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,6 @@
1-
# vue-i18n
1+
# vue-i18n-core
22

3-
Internationalization plugin for Vue.js
4-
5-
## Which dist file to use?
6-
7-
### From CDN or without a Bundler
8-
9-
- **`vue-i18n(.runtime).global(.prod).js`**:
10-
11-
- For direct use via `<script src="...">` in the browser. Exposes the `VueI18n` global
12-
- Note that global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`
13-
- In-browser locale messages compilation:
14-
- **`vue-i18n.global.js`** is the "full" build that includes both the compiler and the runtime so it supports compiling locale messages on the fly
15-
- **`vue-i18n.runtime.global.js`** contains only the runtime and requires locale messages to be pre-compiled during a build step
16-
- Inlines internal the bellow packages - i.e. it’s a single file with no dependencies on other files. This means you **must** import everything from this file and this file only to ensure you are getting the same instance of code
17-
- `@intlify/shared`
18-
- `@intlify/message-compiler`
19-
- `@intlify/core`
20-
- Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `*.prod.js` files for production
21-
22-
- **`vue-i18n(.runtime).esm-browser(.prod).js`**:
23-
- For usage via native ES modules imports (in browser via `<script type="module">`)
24-
- Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build
25-
26-
### With a Bundler
27-
28-
- **`vue-i18n(.runtime).esm-bundler.js`**:
29-
- For use with bundlers like `webpack`, `rollup` and `parcel`
30-
- Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler)
31-
- Does not ship minified builds (to be done together with the rest of the code after bundling)
32-
- Imports dependencies (e.g. `@intlify/core-base`, `@intlify/message-compiler`)
33-
- Imported dependencies are also `esm-bundler` builds and will in turn import their dependencies (e.g. `@intlify/message-compiler` imports `@intlify/shared`)
34-
- This means you **can** install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version
35-
- In-browser locale messages compilation:
36-
- **`vue-i18n.runtime.esm-bundler.js` (default)** is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via `module` field in `package.json`) because when using a bundler templates are typically pre-compiled (e.g. in `*.json` files)
37-
- **`vue-i18n.esm-bundler.js`**: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)
38-
39-
### For Node.js (Server-Side)
40-
41-
- **`vue-i18n.cjs(.prod).js`**:
42-
- For use in Node.js via `require()`
43-
- If you bundle your app with webpack with `target: 'node'` and properly externalize `vue-i18n`, this is the build that will be loaded
44-
- The dev/prod files are pre-built, but the appropriate file is automatically required based on `process.env.NODE_ENV`
45-
46-
## For Bundler feature flags
47-
48-
### Build Feature Flags
49-
50-
The `esm-bundler` builds now exposes global feature flags that can be overwritten at compile time:
51-
52-
- `__VUE_I18N_FULL_INSTALL__` (enable/disable, in addition to vue-i18n APIs, components and directives all fully support installation: `true`)
53-
- `__VUE_I18N_LEGACY_API__` (enable/disable vue-i18n legacy style APIs support, default: `true`)
54-
- `__INTLIFY_PROD_DEVTOOLS__` (enable/disable `@intlify/devtools` support in production, default: `false`)
55-
56-
> NOTE: `__INTLIFY_PROD_DEVTOOLS__` flag is experimental, and `@intlify/devtools` is WIP yet.
57-
58-
The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:
59-
60-
- webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)
61-
- Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
62-
- Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76)
63-
64-
Note: the replacement value **must be boolean literals** and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.
3+
Vue I18n core modules
654

665
## :copyright: License
676

0 commit comments

Comments
 (0)