├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── ci.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs ├── CLI.md ├── Dictionary.md ├── FAQ.md ├── Formatting.md ├── Getting Started.md ├── Locale.md ├── Methods.md ├── Migration.md └── Svelte-Kit.md ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── rollup.config.js ├── src ├── cli │ ├── extract.ts │ ├── includes │ │ ├── deepSet.ts │ │ └── getObjFromExpression.ts │ ├── index.ts │ └── types │ │ └── index.ts ├── runtime │ ├── configs.ts │ ├── index.ts │ ├── modules │ │ ├── formatters.ts │ │ ├── loaderQueue.ts │ │ ├── localeGetters.ts │ │ ├── lookup.ts │ │ ├── memoize.ts │ │ └── unwrapFunctionStore.ts │ ├── stores │ │ ├── dictionary.ts │ │ ├── formatters.ts │ │ ├── loading.ts │ │ └── locale.ts │ ├── tsconfig.json │ └── types │ │ └── index.ts └── shared │ └── delve.ts ├── test ├── cli │ └── extract.test.ts ├── fixtures │ ├── CLI │ │ ├── single-file-typescript.svelte │ │ ├── single-file.svelte │ │ └── svelte.config.js │ ├── en-GB.json │ ├── en.json │ ├── es.json │ ├── formats.json │ ├── partials │ │ └── en.json │ ├── pt-BR.json │ ├── pt-PT.json │ └── pt.json └── runtime │ ├── configs.test.ts │ ├── index.test.ts │ ├── modules │ ├── formatters.test.ts │ ├── loaderQueue.test.ts │ ├── lookup.test.ts │ ├── unwrapFunctionStore.test.ts │ └── utils.test.ts │ └── stores │ ├── dictionary.test.ts │ ├── formatters.test.ts │ └── locale.test.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /test/fixtures 2 | dist/ 3 | example/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@kiwi"], 3 | "env": { 4 | "browser": true, 5 | "jest": true 6 | }, 7 | "rules": { 8 | "@typescript-eslint/no-explicit-any": "off", 9 | "line-comment-position": "off" 10 | }, 11 | "overrides": [ 12 | { 13 | "files": ["test/**/*"], 14 | "rules": { 15 | "global-require": "off", 16 | "@typescript-eslint/no-var-requires": "off", 17 | "@typescript-eslint/no-require-imports": "off" 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | Before filing an issue we'd appreciate it if you could take a moment to ensure 3 | there isn't already an open issue or pull-request. 4 | --- 5 | 6 | If there's an existing issue, please add a :+1: reaction to the description of 7 | the issue. One way we prioritize issues is by the number of :+1: reactions on 8 | their descriptions. Please DO NOT add `+1` or :+1: comments. 9 | 10 | ### Feature requests and proposals 11 | 12 | We're excited to hear how we can make Svelte better. Please add as much detail 13 | as you can on your use case. 14 | 15 | ### Bugs 16 | 17 | If you're filing an issue about a bug please include as much information 18 | as you can including the following. 19 | 20 | - Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) 21 | - Your operating system: (e.x. OS X 10, Windows XP, etc) 22 | - `svelte-i18n` version (Please check you can reproduce the issue with the latest release!) 23 | - Whether your project uses Webpack or Rollup 24 | 25 | - _Repeatable steps to reproduce the issue_ 26 | 27 | ## Thanks for being part of Svelte! 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: 'Bug' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **Logs** 13 | Please include browser console and server logs around the time this bug occurred. 14 | 15 | **To Reproduce** 16 | To help us help you, if you've found a bug please consider the following: 17 | 18 | - Please create a small repo that illustrates the problem. 19 | - Reproductions should be small, self-contained, correct examples – http://sscce.org. 20 | 21 | Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that `svelte-preprocess` is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster. 22 | 23 | **Expected behavior** 24 | A clear and concise description of what you expected to happen. 25 | 26 | **Stacktraces** 27 | If you have a stack trace to include, we recommend putting inside a `
` block for the sake of the thread's readability: 28 | 29 |
30 | Stack trace 31 | 32 | Stack trace goes here... 33 | 34 |
35 | 36 | **Information about your project:** 37 | 38 | - Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) 39 | 40 | - Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) 41 | 42 | - `svelte-i18n` version (Please check you can reproduce the issue with the latest release!) 43 | 44 | - Whether your project uses Webpack or Rollup 45 | 46 | **Additional context** 47 | Add any other context about the problem here. 48 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: 'New Feature' 6 | assignees: '' 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. For example: I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **How important is this feature to you?** 19 | Note: the more honest and specific you are here the more we will take you seriously. 20 | 21 | **Additional context** 22 | Add any other context or screenshots about the feature request here. 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Before submitting the PR, please make sure you do the following 2 | 3 | - [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason. 4 | - [ ] This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them. 5 | - [ ] Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!) 6 | 7 | ### Tests 8 | 9 | - [ ] Run the tests tests with `npm test` or `yarn test` 10 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - '**' 10 | 11 | jobs: 12 | Lint: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v3 16 | 17 | - name: Install Node.js 18 | uses: actions/setup-node@v3 19 | with: 20 | node-version: 16 21 | 22 | - name: Install Dependencies 23 | uses: pnpm/action-setup@v2 24 | with: 25 | version: 8 26 | run_install: true 27 | 28 | - run: pnpm run lint 29 | 30 | Tests: 31 | needs: [Lint] 32 | runs-on: ${{ matrix.os }} 33 | strategy: 34 | matrix: 35 | node-version: [16, 18] 36 | os: [ubuntu-latest, windows-latest, macOS-latest] 37 | 38 | steps: 39 | - uses: actions/checkout@v3 40 | 41 | - name: Install Node.js 42 | uses: actions/setup-node@v3 43 | with: 44 | node-version: ${{ matrix.node-version }} 45 | 46 | - name: Install Dependencies 47 | uses: pnpm/action-setup@v2 48 | with: 49 | version: 8 50 | run_install: true 51 | 52 | - run: pnpm run test:ci 53 | env: 54 | CI: true 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | /coverage/ 4 | /dist/ -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | "@kiwi/prettier-config" -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [4.0.1](https://github.com/kaisermann/svelte-i18n/compare/v3.7.4...v4.0.1) (2024-10-21) 2 | 3 | ### Features 4 | 5 | - allow svelte@5 as peer dep ([#253](https://github.com/kaisermann/svelte-i18n/issues/253)) ([79c5fbb](https://github.com/kaisermann/svelte-i18n/commit/79c5fbbaa9bf62ee15c43de2a10fd24530eab5a3)) 6 | 7 | # [4.0.0](https://github.com/kaisermann/svelte-i18n/compare/v3.7.4...v4.0.0) (2023-10-16) 8 | 9 | ### Bug Fixes 10 | 11 | - make package esm-only ([d54ee67](https://github.com/kaisermann/svelte-i18n/commit/d54ee678e14c7fdffe7be9ecda65813742aac95e)) 12 | - remove node 14 from tests ([458a759](https://github.com/kaisermann/svelte-i18n/commit/458a75901824a11d22a6917ffc41448f62cf7449)) 13 | 14 | ### BREAKING CHANGES 15 | 16 | - package is now esm-only 17 | 18 | - chore(deps-dev): bump postcss from 8.4.29 to 8.4.31 19 | 20 | Bumps [postcss](https://github.com/postcss/postcss) from 8.4.29 to 8.4.31. 21 | 22 | - [Release notes](https://github.com/postcss/postcss/releases) 23 | - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) 24 | - [Commits](https://github.com/postcss/postcss/compare/8.4.29...8.4.31) 25 | 26 | ## [3.7.4](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.7.4) (2023-09-04) 27 | 28 | ### Bug Fixes 29 | 30 | - use named import for IntlMessageFormat ([fc837dc](https://github.com/kaisermann/svelte-i18n/commit/fc837dc154903d5dfc68845a9d53a28ee4eb193f)) 31 | 32 | ## [3.7.3](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.7.3) (2023-09-03) 33 | 34 | ### Bug Fixes 35 | 36 | - use IntlMessageFormat.resolveLocale ([2e42e58](https://github.com/kaisermann/svelte-i18n/commit/2e42e58d2f9e30000d3f1eebd98498ec27203528)) 37 | 38 | ## [3.7.2](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.7.2) (2023-09-03) 39 | 40 | ### Chores 41 | 42 | - use esbuild for bundling. 43 | 44 | ## [3.7.1](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.7.1) (2023-09-03) 45 | 46 | ### Bug Fixes 47 | 48 | - validate `initialLocale` before using it ([#217](https://github.com/kaisermann/svelte-i18n/issues/217)) ([ebeec58](https://github.com/kaisermann/svelte-i18n/commit/ebeec58db57b01cd062cc215a14953fd63353e93)) 49 | 50 | # [3.7.0](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.7.0) (2023-07-04) 51 | 52 | ### Features 53 | 54 | - add svelte@4 as peer dep ([c0b9fc0](https://github.com/kaisermann/svelte-i18n/commit/c0b9fc00c9f54412d78221be6050d6dcede22340)) 55 | 56 | # [3.6.0](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.6.0) (2022-11-25) 57 | 58 | ### Features 59 | 60 | - add unwrapFunctionStore utility ([fafa641](https://github.com/kaisermann/svelte-i18n/commit/fafa641c8151c4ceb21a1d9558b535f9eb56dbf9)) 61 | 62 | ## [3.5.2](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.5.2) (2022-11-23) 63 | 64 | ### Bug Fixes 65 | 66 | - require node 16 ([bf622da](https://github.com/kaisermann/svelte-i18n/commit/bf622da160c555180e5f48e407d64d8b6d8ef6d7)) 67 | 68 | ## [3.5.1](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.5.1) (2022-11-22) 69 | 70 | ### Bug Fixes 71 | 72 | - better handling of --config CLI parameter ([124d4b7](https://github.com/kaisermann/svelte-i18n/commit/124d4b7b58adb48292829258db393931306d3fd0)) 73 | - make typescript strict and fix small issues ([7b49a74](https://github.com/kaisermann/svelte-i18n/commit/7b49a74f0fade6aaee42b4d137dc96d22ec55b2b)) 74 | - svelte.config not being loaded properly by CLI ([309896c](https://github.com/kaisermann/svelte-i18n/commit/309896cc7cca9018562eaa7f6845b64253900f54)) 75 | 76 | # [3.5.0](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.5.0) (2022-11-22) 77 | 78 | ### Bug Fixes 79 | 80 | - better handling of --config CLI parameter ([124d4b7](https://github.com/kaisermann/svelte-i18n/commit/124d4b7b58adb48292829258db393931306d3fd0)) 81 | - make typescript strict and fix small issues ([7b49a74](https://github.com/kaisermann/svelte-i18n/commit/7b49a74f0fade6aaee42b4d137dc96d22ec55b2b)) 82 | 83 | ## [3.4.1](https://github.com/kaisermann/svelte-i18n/compare/v3.4.0...v3.4.1) (2022-11-19) 84 | 85 | ### Bug Fixes 86 | 87 | - make typescript strict and fix small issues ([7b49a74](https://github.com/kaisermann/svelte-i18n/commit/7b49a74f0fade6aaee42b4d137dc96d22ec55b2b)) 88 | 89 | # [3.4.0](https://github.com/kaisermann/svelte-i18n/compare/v3.3.13...v3.4.0) (2022-04-05) 90 | 91 | ### Features 92 | 93 | - introduce handleMissingMessage ([#175](https://github.com/kaisermann/svelte-i18n/issues/175)) ([a8b5df0](https://github.com/kaisermann/svelte-i18n/commit/a8b5df0442466ef1d805fbc48b704974b846f52c)) 94 | 95 | ## [3.3.13](https://github.com/kaisermann/svelte-i18n/compare/v3.3.12...v3.3.13) (2021-10-11) 96 | 97 | ### Bug Fixes 98 | 99 | - check modules for defineMessages imports ([#163](https://github.com/kaisermann/svelte-i18n/issues/163)) ([ec939ab](https://github.com/kaisermann/svelte-i18n/commit/ec939ab6c645995312e7f07195532f60165a3e5a)) 100 | 101 | ## [3.3.12](https://github.com/kaisermann/svelte-i18n/compare/v3.3.10...v3.3.12) (2021-09-30) 102 | 103 | ### Bug Fixes 104 | 105 | - fallback delve to undefined for an undefined key ([64e8ae2](https://github.com/kaisermann/svelte-i18n/commit/64e8ae2bd3f9f10e3f3bfed6ef9cb6d8616b0caa)) 106 | 107 | ## [3.3.11](https://github.com/kaisermann/svelte-i18n/compare/v3.3.10...v3.3.11) (2021-09-30) 108 | 109 | ### Bug Fixes 110 | 111 | - fallback delve to undefined for an undefined key ([64e8ae2](https://github.com/kaisermann/svelte-i18n/commit/64e8ae2bd3f9f10e3f3bfed6ef9cb6d8616b0caa)) 112 | 113 | ## [3.3.10](https://github.com/kaisermann/svelte-i18n/compare/v3.3.9...v3.3.10) (2021-08-24) 114 | 115 | ### Bug Fixes 116 | 117 | - enable typescript strictNullChecks ([bf4189a](https://github.com/kaisermann/svelte-i18n/commit/bf4189a862e36b16242aa2bb8c68c6d1b59dc486)) 118 | 119 | ## [3.3.9](https://github.com/kaisermann/svelte-i18n/compare/v3.3.8...v3.3.9) (2021-03-27) 120 | 121 | ### Bug Fixes 122 | 123 | - 🐛 only set lang attr if lang is not nullish ([1c516c9](https://github.com/kaisermann/svelte-i18n/commit/1c516c9cda45e5a25dd466947804a5cc94734d22)), closes [#133](https://github.com/kaisermann/svelte-i18n/issues/133) 124 | 125 | ## [3.3.8](https://github.com/kaisermann/svelte-i18n/compare/v3.3.7...v3.3.8) (2021-03-27) 126 | 127 | ### Bug Fixes 128 | 129 | - 🐛 support more specific fallback locale (i.e en-GB vs en) ([5db1dbc](https://github.com/kaisermann/svelte-i18n/commit/5db1dbc3a40f9a19585f63dbacd42846e599d927)), closes [#137](https://github.com/kaisermann/svelte-i18n/issues/137) 130 | 131 | ## [3.3.7](https://github.com/kaisermann/svelte-i18n/compare/v3.3.6...v3.3.7) (2021-03-17) 132 | 133 | ### Bug Fixes 134 | 135 | - clear locale lookup cache when new messages are added ([#130](https://github.com/kaisermann/svelte-i18n/issues/130)) ([88ad5b2](https://github.com/kaisermann/svelte-i18n/commit/88ad5b21801eb54cbbb6a8cc9a02bb9b76bc1fbe)) 136 | 137 | ## [3.3.6](https://github.com/kaisermann/svelte-i18n/compare/v3.3.4...v3.3.6) (2021-02-25) 138 | 139 | ### Bug Fixes 140 | 141 | - 🐛 generated types directory ([396e181](https://github.com/kaisermann/svelte-i18n/commit/396e181e006819da11438f78a5c7f62cc415b5e0)) 142 | - 🐛 support deep properties keyed with dots ([980bc18](https://github.com/kaisermann/svelte-i18n/commit/980bc18f291e550c0e4acabf7f38c2ef04843987)), closes [#129](https://github.com/kaisermann/svelte-i18n/issues/129) 143 | 144 | ## [3.3.5](https://github.com/kaisermann/svelte-i18n/compare/v3.3.4...v3.3.5) (2021-02-21) 145 | 146 | ### Bug Fixes 147 | 148 | - 🐛 support deep properties keyed with dots ([c13ed35](https://github.com/kaisermann/svelte-i18n/commit/c13ed35e5d735ef9a8dd9390c7646d9f5eda55f2)), closes [#129](https://github.com/kaisermann/svelte-i18n/issues/129) 149 | 150 | ## [3.3.4](https://github.com/kaisermann/svelte-i18n/compare/v3.3.2...v3.3.4) (2021-02-15) 151 | 152 | ### Bug Fixes 153 | 154 | - crash if message has syntax error ([#128](https://github.com/kaisermann/svelte-i18n/issues/128)) ([0d623f9](https://github.com/kaisermann/svelte-i18n/commit/0d623f9884d831bc83b93eb01914628ca834ea1a)) 155 | 156 | ## [3.3.3](https://github.com/kaisermann/svelte-i18n/compare/v3.3.2...v3.3.3) (2021-02-15) 157 | 158 | ## [3.3.2](https://github.com/kaisermann/svelte-i18n/compare/v3.3.1...v3.3.2) (2021-02-11) 159 | 160 | ### Bug Fixes 161 | 162 | - expose intl-messageformat option `ignoreTag` and default to true for backwards compatibility. ([#121](https://github.com/kaisermann/svelte-i18n/issues/121)) ([341ed7f](https://github.com/kaisermann/svelte-i18n/commit/341ed7f3633447294919e4851c9db53b72bc94c3)) 163 | 164 | ## [3.3.1](https://github.com/kaisermann/svelte-i18n/compare/v3.2.7...v3.3.1) (2021-02-11) 165 | 166 | ### Bug Fixes 167 | 168 | - 🐛 default $json type to any ([41d8e4d](https://github.com/kaisermann/svelte-i18n/commit/41d8e4d28b68bb0ec61f2adf3152025086c1cc7c)) 169 | 170 | # [3.3.0](https://github.com/kaisermann/svelte-i18n/compare/v3.2.7...v3.3.0) (2020-11-24) 171 | 172 | ### Features 173 | 174 | - 🎸 add $json method to get raw dictionary values ([52400b5](https://github.com/kaisermann/svelte-i18n/commit/52400b5c51213b45270da101aab6e8ae2bda024c)), closes [#109](https://github.com/kaisermann/svelte-i18n/issues/109) [#83](https://github.com/kaisermann/svelte-i18n/issues/83) 175 | 176 | ## [3.2.7](https://github.com/kaisermann/svelte-i18n/compare/v3.2.6...v3.2.7) (2020-11-23) 177 | 178 | ### Bug Fixes 179 | 180 | - 🐛 message formatter type ([40e6dbe](https://github.com/kaisermann/svelte-i18n/commit/40e6dbe8f7490c57b70dc96f525530f046abcda1)), closes [#109](https://github.com/kaisermann/svelte-i18n/issues/109) 181 | 182 | ## [3.2.6](https://github.com/kaisermann/svelte-i18n/compare/v3.2.5...v3.2.6) (2020-11-20) 183 | 184 | ### Changed 185 | 186 | - Don't minify CLI for better debugging. 187 | 188 | ## [3.2.5](https://github.com/kaisermann/svelte-i18n/compare/v3.2.4...v3.2.5) (2020-11-08) 189 | 190 | ### Bug Fixes 191 | 192 | - 🐛 regression of flat keys separated by dot ([d87caef](https://github.com/kaisermann/svelte-i18n/commit/d87caef0600be10727222a2cfbe7ff391fb8ff4c)) 193 | 194 | ## [3.2.4](https://github.com/kaisermann/svelte-i18n/compare/v3.2.3...v3.2.4) (2020-11-07) 195 | 196 | ### Bug Fixes 197 | 198 | - 🐛 possible interpolation value types ([0caaead](https://github.com/kaisermann/svelte-i18n/commit/0caaead4789a62daef4ea73361506a9f135b80e7)) 199 | 200 | ## [3.2.3](https://github.com/kaisermann/svelte-i18n/compare/v3.2.2...v3.2.3) (2020-11-06) 201 | 202 | ### Bug Fixes 203 | 204 | - 🐛 prevent extraction of non-deterministic message ids ([9b6adb6](https://github.com/kaisermann/svelte-i18n/commit/9b6adb6538329ecba1e32e2acdca2c4761c1d99c)), closes [#89](https://github.com/kaisermann/svelte-i18n/issues/89) 205 | 206 | ## [3.2.2](https://github.com/kaisermann/svelte-i18n/compare/v3.2.1...v3.2.2) (2020-11-05) 207 | 208 | ### Bug Fixes 209 | 210 | - 🐛 update estree-walker and intl-messageformat ([44e71d7](https://github.com/kaisermann/svelte-i18n/commit/44e71d72aba1cb3263ea009932df27dd39d86cb3)) 211 | 212 | ## [3.2.1](https://github.com/kaisermann/svelte-i18n/compare/v3.2.0...v3.2.1) (2020-11-05) 213 | 214 | ### Bug Fixes 215 | 216 | - 🐛 interpolate values for default values and missing keys ([330f20b](https://github.com/kaisermann/svelte-i18n/commit/330f20b7bd55af1e565de7ba0449a03cc24738aa)), closes [#101](https://github.com/kaisermann/svelte-i18n/issues/101) 217 | 218 | # [3.2.0](https://github.com/kaisermann/svelte-i18n/compare/v3.1.0...v3.2.0) (2020-11-05) 219 | 220 | ### Features 221 | 222 | - 🎸 Support getting deep localized objects/arrays ([ff54136](https://github.com/kaisermann/svelte-i18n/commit/ff541367f85a28ad69bb34beb145ce404b1a9240)), closes [#83](https://github.com/kaisermann/svelte-i18n/issues/83) 223 | 224 | # [3.1.0](https://github.com/kaisermann/svelte-i18n/compare/v3.0.4...v3.1.0) (2020-09-20) 225 | 226 | ### Bug Fixes 227 | 228 | - export correct configuration type ([68e8c51](https://github.com/kaisermann/svelte-i18n/commit/68e8c51a636910bbe0619350b7d8ad6fabe13c7d)) 229 | 230 | ## [3.0.4](https://github.com/kaisermann/svelte-i18n/compare/v3.0.3...v3.0.4) (2020-05-31) 231 | 232 | ### Bug Fixes 233 | 234 | - 🐛 also wait for loaders added while loading ([e560514](https://github.com/kaisermann/svelte-i18n/commit/e560514b1d957b2c4fc9b1a4f412ab93cf31d21a)) 235 | 236 | ## [3.0.3](https://github.com/kaisermann/svelte-i18n/compare/v3.0.2...v3.0.3) (2020-03-29) 237 | 238 | ### Bug Fixes 239 | 240 | - 🐛 prevent server from breaking on locale.set ([07ef1da](https://github.com/kaisermann/svelte-i18n/commit/07ef1da6d5177854b4707d5f038f5a14562e6bf5)), closes [#55](https://github.com/kaisermann/svelte-i18n/issues/55) 241 | 242 | ## [3.0.2](https://github.com/kaisermann/svelte-i18n/compare/v3.0.1...v3.0.2) (2020-03-06) 243 | 244 | ### Bug Fixes 245 | 246 | - 🐛 ignore loadingDelay for the initialLocale ([9d82a98](https://github.com/kaisermann/svelte-i18n/commit/9d82a98e8d6ecf25dca12cce88183502e11133fe)), closes [#53](https://github.com/kaisermann/svelte-i18n/issues/53) [#53](https://github.com/kaisermann/svelte-i18n/issues/53) 247 | 248 | ## [3.0.1](https://github.com/kaisermann/svelte-i18n/compare/v2.3.1...v3.0.1) (2020-02-03) 249 | 250 | ### Features 251 | 252 | - 🎸 add runtime typings ([7bf47d8](https://github.com/kaisermann/svelte-i18n/commit/7bf47d879006ffeec51ec112f20c74c72abe87ff)), closes [#43](https://github.com/kaisermann/svelte-i18n/issues/43) 253 | - 🎸 make date,time and number formatters tree-shakeable ([6526245](https://github.com/kaisermann/svelte-i18n/commit/6526245bf9d40d25af14ec1e7acb34772a9f3f0e)) 254 | - 🎸 make getClientLocale tree-shakeable ([31b556b](https://github.com/kaisermann/svelte-i18n/commit/31b556bc3f77bc5b581541976a82f898a398c01a)) 255 | 256 | ### BREAKING CHANGES 257 | 258 | - It's now needed to explicitly import the `getClientLocale` method to use 259 | its heuristics when setting the initial locale. This makes the method 260 | and its helpers to be tree-shakeable. 261 | 262 | ```js 263 | import { init, getClientLocale } from 'svelte-i18n' 264 | 265 | init({ 266 | initialLocale: getClientLocale({ ... }) 267 | }) 268 | ``` 269 | 270 | - Changes completely the API. Now, to format a number, date or time, the 271 | developer must explicitly import the formatter store: 272 | 273 | `import { time, date, number } from 'svelte-i18n'` 274 | 275 | # [3.0.0](https://github.com/kaisermann/svelte-i18n/compare/v2.3.1...v3.0.0) (2020-02-03) 276 | 277 | ### Features 278 | 279 | - 🎸 add runtime typings ([90bf171](https://github.com/kaisermann/svelte-i18n/commit/90bf171139ad6b55faa0e36b3d28d317de538985)), closes [#43](https://github.com/kaisermann/svelte-i18n/issues/43) 280 | - 🎸 make date,time and number formatters tree-shakeable ([fb82a40](https://github.com/kaisermann/svelte-i18n/commit/fb82a400f349d8d997c1d14f8d16b1d5c8da7f3e)) 281 | - 🎸 make getClientLocale tree-shakeable ([4881acb](https://github.com/kaisermann/svelte-i18n/commit/4881acb7b3a9aacd64b0f00f3b85fd736aa53316)) 282 | 283 | ### BREAKING CHANGES 284 | 285 | - It's now needed to explicitly import the `getClientLocale` method to use 286 | its heuristics when setting the initial locale. This makes the method 287 | and its helpers to be tree-shakeable. 288 | 289 | ```js 290 | import { init, getClientLocale } from 'svelte-i18n' 291 | 292 | init({ 293 | initialLocale: getClientLocale({ ... }) 294 | }) 295 | ``` 296 | 297 | - Changes completely the API. Now, to format a number, date or time, the 298 | developer must explicitly import the formatter store: 299 | 300 | `import { time, date, number } from 'svelte-i18n'` 301 | 302 | ## [2.3.1](https://github.com/kaisermann/svelte-i18n/compare/v2.3.0...v2.3.1) (2020-01-29) 303 | 304 | ### Bug Fixes 305 | 306 | - 🐛 types from v3 branch leaking to master branch :shrug: ([88f7762](https://github.com/kaisermann/svelte-i18n/commit/88f7762e96c4eae963722bdedf601afbce4b2f17)) 307 | - memoizing of formatters when no locale is given. ([#47](https://github.com/kaisermann/svelte-i18n/issues/47)) ([27871f9](https://github.com/kaisermann/svelte-i18n/commit/27871f9775a96e0a2627a143635d4f4750b9f945)) 308 | 309 | # [2.3.0](https://github.com/kaisermann/svelte-i18n/compare/v2.2.4...v2.3.0) (2020-01-23) 310 | 311 | ### Features 312 | 313 | - 🎸 add runtime typings ([dadeaa2](https://github.com/kaisermann/svelte-i18n/commit/dadeaa2e7fa0d0447135f76a5c70273238fc1da0)), closes [#43](https://github.com/kaisermann/svelte-i18n/issues/43) 314 | 315 | ## [2.2.4](https://github.com/kaisermann/svelte-i18n/compare/v2.2.2...v2.2.4) (2020-01-21) 316 | 317 | ## [2.2.3](https://github.com/kaisermann/svelte-i18n/compare/v2.2.2...v2.2.3) (2020-01-15) 318 | 319 | ### Refactor 320 | 321 | - 💡 remove deepmerge and dlv dependencies ([270aefa](https://github.com/kaisermann/svelte-i18n/commit/270aefa1998d89215d8bdd1f813bdb9c690a5a2c)) 322 | 323 | ## [2.2.2](https://github.com/kaisermann/svelte-i18n/compare/v2.2.0...v2.2.2) (2020-01-14) 324 | 325 | ### Bug Fixes 326 | 327 | - 🐛 lookup message not caching correctly ([bb8c68f](https://github.com/kaisermann/svelte-i18n/commit/bb8c68f2eb7bbe658a40dc528b471ffadd5f92df)) 328 | - 🐛 mjs causing an elusive bug in webpack module resolution ([b2dc782](https://github.com/kaisermann/svelte-i18n/commit/b2dc7828c55b23be05adb0791816cc7bc9910af2)), closes [#36](https://github.com/kaisermann/svelte-i18n/issues/36) 329 | 330 | ## [2.2.1](https://github.com/kaisermann/svelte-i18n/compare/v2.2.0...v2.2.1) (2020-01-08) 331 | 332 | ### Bug Fixes 333 | 334 | - 🐛 lookup message not caching correctly ([b9b6fa4](https://github.com/kaisermann/svelte-i18n/commit/b9b6fa41ffd99b89fc117c44a5bc636335c63632)) 335 | 336 | # [2.2.0](https://github.com/kaisermann/svelte-i18n/compare/v2.1.1...v2.2.0) (2020-01-07) 337 | 338 | ### Bug Fixes 339 | 340 | - 🐛 make message formatter default to current locale ([0c57b9b](https://github.com/kaisermann/svelte-i18n/commit/0c57b9b568ba60216c4c96931da19dea97d998c4)) 341 | 342 | ### Features 343 | 344 | - add low level API to get access to the formatters ([#31](https://github.com/kaisermann/svelte-i18n/issues/31)) ([86cca99](https://github.com/kaisermann/svelte-i18n/commit/86cca992515809b1767d648293d395562dc2946a)) 345 | 346 | ## [2.1.1](https://github.com/kaisermann/svelte-i18n/compare/v2.1.0...v2.1.1) (2019-12-02) 347 | 348 | ### Bug Fixes 349 | 350 | - 🐛 fix conflict artifacts ([feb7ab9](https://github.com/kaisermann/svelte-i18n/commit/feb7ab9deadc97041e2d8a3364137f1fa13ed89b)) 351 | 352 | # [2.1.0](https://github.com/kaisermann/svelte-i18n/compare/v2.1.0-alpha.2...v2.1.0) (2019-11-30) 353 | 354 | ### Bug Fixes 355 | 356 | - 🐛 allow to wait for initial locale load ([0b7f61c](https://github.com/kaisermann/svelte-i18n/commit/0b7f61c49a1c3206bbb5d9c77dfb5819a85d4bb5)) 357 | - 🐛 fallback behaviour and simplify API contact points ([64e69eb](https://github.com/kaisermann/svelte-i18n/commit/64e69eb3c0f62754570429a87450ff53eb29973a)) 358 | - 🐛 consider generic locales when registering loaders ([1b0138c](https://github.com/kaisermann/svelte-i18n/commit/1b0138c3f3458c4d8f0b30b4550652e8e0317fc7)) 359 | - 🐛 flush use the same promise if it wasn't resolved yet ([66972d4](https://github.com/kaisermann/svelte-i18n/commit/66972d4b1536b53d33c7974eb0fc059c0d0cc46c)) 360 | - client locale parameters typo ([#11](https://github.com/kaisermann/svelte-i18n/issues/11)) ([d1adf4c](https://github.com/kaisermann/svelte-i18n/commit/d1adf4c00a48ed679ae34a2bffc8ca9d709a2d5c)) 361 | 362 | ### Features 363 | 364 | - 🎸 add warnOnMissingMessages ([efbe793](https://github.com/kaisermann/svelte-i18n/commit/efbe793a0f3656b27d050886d85e06e9327ea681)) 365 | 366 | - 🐛 fallback behaviour and simplify API contact points ([6e0df2f](https://github.com/kaisermann/svelte-i18n/commit/6e0df2fb25e1bf9038eb4252ba993541a7fa2b4a) 367 | 368 | - 🎸 `addMessagesTo` method ([d6b8664](https://github.com/kaisermann/svelte-i18n/commit/d6b8664009d738870aa3f0a4bd80e96abf6e6e59)) 369 | - 🎸 add \$loading indicator store ([bd2b350](https://github.com/kaisermann/svelte-i18n/commit/bd2b3501e9caa2e73f64835fedf93dc8939d41de)) 370 | - 🎸 add custom formats support ([d483244](https://github.com/kaisermann/svelte-i18n/commit/d483244a9f2bb5ba63ef8be95f0e87030b5cbc7e)) 371 | - 🎸 add pathname and hostname pattern matching ([b19b690](https://github.com/kaisermann/svelte-i18n/commit/b19b69050e252120016d47540e108f6eea193c37)) 372 | - 🎸 add preloadLocale method ([0a0e4b3](https://github.com/kaisermann/svelte-i18n/commit/0a0e4b3bab74499d684c86e17c949160762ae19b)) 373 | - 🎸 add waitInitialLocale helper ([6ee28e7](https://github.com/kaisermann/svelte-i18n/commit/6ee28e7d279c62060e834699714685567b6ab67c)) 374 | - 🎸 also look for message in generic locale ([e5d7b84](https://github.com/kaisermann/svelte-i18n/commit/e5d7b84241bd7e3fdd833e82dd8a9a8f251f023c)), closes [#19](https://github.com/kaisermann/svelte-i18n/issues/19) 375 | - 🎸 export a store listing all locales available ([f58a20b](https://github.com/kaisermann/svelte-i18n/commit/f58a20b21eb58f891b3f9912cb6fff11eb329083)) 376 | - 🎸 locale change automatically updates the document lang ([64c8e55](https://github.com/kaisermann/svelte-i18n/commit/64c8e55f80636a1185a1797fe486b4189ff56944)) 377 | 378 | ### Performance Improvements 379 | 380 | - ⚡️ delay the \$loading state change for quick loadings ([6573f51](https://github.com/kaisermann/svelte-i18n/commit/6573f51e9b817db0c77f158945572f4ba14c71fc)) 381 | 382 | ### BREAKING CHANGES 383 | 384 | - This PR modifies the formatter method arguments. 385 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Christian Kaisermann 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > :information_source: `svelte-i18n` is due to some reworking, like moving from a singleton to instances. This will be worked on when I find the time and priority :pray: 2 | 3 | [![npm version](https://badge.fury.io/js/svelte-i18n.svg)](https://badge.fury.io/js/svelte-i18n) ![](https://github.com/kaisermann/svelte-i18n/workflows/CI/badge.svg) 4 | 5 | # svelte-i18n 6 | 7 | > Internationalization for Svelte. 8 | 9 | `svelte-i18n` helps you localize your app using the reactive tools Svelte provides. By using [stores](https://svelte.dev/docs#svelte_store) to keep track of the current `locale`, `dictionary` of messages and to `format` messages, we keep everything neat, in sync and easy to use on your svelte files. 10 | 11 | **Requirements** 12 | 13 | - Node: `>= 11.15.0` 14 | - Browsers: `Chrome 38+`, `Edge 16+`, `Firefox 13+`, `Opera 25+`, `Safari 8+`. 15 | 16 | ```svelte 17 | 20 | 21 |

{$_('page.home.title')}

22 | 23 | 28 | ``` 29 | 30 | ```jsonc 31 | // en.json 32 | { 33 | "page": { 34 | "home": { 35 | "title": "Homepage", 36 | "nav": "Home" 37 | }, 38 | "about": { 39 | "title": "About", 40 | "nav": "About" 41 | }, 42 | "contact": { 43 | "title": "Contact", 44 | "nav": "Contact Us" 45 | } 46 | } 47 | } 48 | ``` 49 | 50 | - [Documentation / Getting Started](/docs/Getting%20Started.md) 51 | - [Usage with Svelte Kit](/docs/Svelte-Kit.md) 52 | - [i18n VSCode extension (3rd party)](https://github.com/antfu/i18n-ally) 53 | -------------------------------------------------------------------------------- /docs/CLI.md: -------------------------------------------------------------------------------- 1 | `svelte-i18n` provides a command-line interface to extract all your messages to the `stdout` or to a specific JSON file. 2 | 3 | ```bash 4 | $ svelte-i18n extract [options] [output-file] 5 | ``` 6 | 7 | ### Options 8 | 9 | - `-s, --shallow` - extract all messages to a shallow object, without creating nested objects. Default: `false`. 10 | 11 | - `--overwrite` - overwrite the content of the `output` file instead of just appending missing properties. Default: `false`. 12 | 13 | - `-c, --config` - define the path of a `svelte.config.js` in case your svelte components need to be preprocessed. 14 | -------------------------------------------------------------------------------- /docs/Dictionary.md: -------------------------------------------------------------------------------- 1 | `import { dictionary } from 'svelte-i18n'` 2 | 3 | ### `$dictionary` 4 | 5 | The `$dictionary` store is responsible for holding all loaded message definitions for each locale. A dictionary of messages can be a shallow or deep object: 6 | 7 | ###### `en-shallow.json` 8 | 9 | ```json 10 | { 11 | "title": "Sign up", 12 | "field.name": "Name", 13 | "field.birth": "Date of birth", 14 | "field.genre": "Genre" 15 | } 16 | ``` 17 | 18 | ###### `en-deep.json` 19 | 20 | ```json 21 | { 22 | "title": "Sign up", 23 | "field": { 24 | "name": "Name", 25 | "birth": "Date of birth", 26 | "genre": "Genre" 27 | } 28 | } 29 | ``` 30 | 31 | It's recommended to use the [`addMessages()`](/docs/Methods.md#addmessages) and [`register()`](/docs/Methods.md#register) methods to add new message dictionaries to your app. 32 | -------------------------------------------------------------------------------- /docs/FAQ.md: -------------------------------------------------------------------------------- 1 | ##### `'this' keyword is equivalent to 'undefined'` 2 | 3 | When using `Rollup` as a bundler, you're possibly seeing this warning. It's related to the output of the typescript compiler used to transpile the `intl-messageformat` package. In this case, it's harmless and you can learn to live with it on your terminal or teach your rollup to ignore this kind of warning: 4 | 5 | ```js 6 | // modified version of onwarn provided by sapper projects 7 | const onwarn = (warning, onwarn) => { 8 | if ( 9 | (warning.code === 'CIRCULAR_DEPENDENCY' && 10 | /[/\\]@sapper[/\\]/.test(warning.message)) 11 | ) { 12 | return 13 | } 14 | 15 | // ignores the annoying this is undefined warning 16 | if(warning.code === 'THIS_IS_UNDEFINED') { 17 | return 18 | } 19 | 20 | onwarn(warning) 21 | } 22 | 23 | export default { 24 | client: { 25 | ..., 26 | onwarn, 27 | }, 28 | server: { 29 | ..., 30 | onwarn, 31 | }, 32 | } 33 | 34 | ``` 35 | 36 | ##### `How can I use svelte-i18n with SvelteKit?` 37 | 38 | You can find a guide on how to use `svelte-i18n` with `SvelteKit` [here](/docs/Svelte-Kit.md). 39 | 40 | ##### `Can I use the formatter functions outside of a Svelte component?` 41 | 42 | Yes, you can! Since the exported formatters are stores, you need to subscribe to them to get the value. `svelte-i18n` provides a utility method called `unwrapFunctionStore` to help you with that: 43 | 44 | ```js 45 | // some-file.js 46 | import { unwrapFunctionStore, format, formatNumber } from 'svelte-i18n'; 47 | 48 | const $formatNumber = unwrapFunctionStore(formatNumber); 49 | const $format = unwrapFunctionStore(format); 50 | 51 | console.log( 52 | $formatNumber(1000, 'en-US', { style: 'currency', currency: 'USD' }), 53 | ); // $1,000.00 54 | console.log($format('Hello {name}', { name: 'John' }, 'en-US')); // Hello John 55 | ``` 56 | -------------------------------------------------------------------------------- /docs/Formatting.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | - [Message syntax](#message-syntax) 6 | - [`$format`, `$_` or `$t`](#format-_-or-t) 7 | - [`$time(number: Date, options: MessageObject)`](#timenumber-date-options-messageobject) 8 | - [`$date(date: Date, options: MessageObject)`](#datedate-date-options-messageobject) 9 | - [`$number(number: number, options: MessageObject)`](#numbernumber-number-options-messageobject) 10 | - [`$json(messageId: string)`](#jsonmessageid-string) 11 | - [Formats](#formats) 12 | - [Accessing formatters directly](#accessing-formatters-directly) 13 | 14 | 15 | 16 | ### Message syntax 17 | 18 | Under the hood, `formatjs` is used for localizing your messages. It allows `svelte-i18n` to support the ICU message syntax. It is strongly recommended to read their documentation about it. 19 | 20 | - [Basic Internationalization Principles](https://formatjs.io/docs/core-concepts/basic-internationalization-principles) 21 | - [Runtime Environments](https://formatjs.io/docs/guides/runtime-requirements/) 22 | - [ICU Message Syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) 23 | 24 | ### `$format`, `$_` or `$t` 25 | 26 | `import { _, t, format } from 'svelte-i18n'` 27 | 28 | The `$format` store is the actual formatter method. It's also aliased as `$_` and `$t` for convenience. To format a message is as simple as executing the `$format` method: 29 | 30 | ```svelte 31 | 34 | 35 |

{$_('page_title')}

36 | ``` 37 | 38 | The formatter can be called with two different signatures: 39 | 40 | - `format(messageId: string, options?: MessageObject): string` 41 | - `format(options: MessageObject): string` 42 | 43 | ```ts 44 | interface MessageObject { 45 | id?: string; 46 | locale?: string; 47 | format?: string; 48 | default?: string; 49 | values?: Record; 50 | } 51 | ``` 52 | 53 | - `id`: represents the path to a specific message; 54 | - `locale`: forces a specific locale; 55 | - `default`: the default value in case of message not found in the current locale; 56 | - `format`: the format to be used. See [#formats](#formats); 57 | - `values`: properties that should be interpolated in the message; 58 | 59 | You can pass a `string` as the first parameter for a less verbose way of formatting a message. It is also possible to inject values into the translation like so: 60 | 61 | ```jsonc 62 | // en.json 63 | { 64 | "awesome": "{name} is awesome!" 65 | } 66 | ``` 67 | 68 | ```svelte 69 |

{$_("awesome", { values: { name: "svelte-i18n" } })}

70 | ``` 71 | 72 | If the message id literal value is not in the root of the dicitonary, `.` (dots) are interpreted as a path: 73 | 74 | ```jsonc 75 | // en.json 76 | { 77 | "shallow.prop": "Shallow property", 78 | "deep": { 79 | "property": "Deep property" 80 | } 81 | } 82 | ``` 83 | 84 | ```svelte 85 |
{$_('shallow.prop')}
86 |
{$_('deep.property')}
87 | ``` 88 | 89 | ### `$time(number: Date, options: MessageObject)` 90 | 91 | `import { time } from 'svelte-i18n'` 92 | 93 | Formats a date object into a time string with the specified format. Please refer to the [#formats](#formats) section to see available formats. 94 | 95 | ```html 96 |
{$time(new Date(2019, 3, 24, 23, 45))}
97 | 98 | 99 |
{$time(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}
100 | 101 | ``` 102 | 103 | ### `$date(date: Date, options: MessageObject)` 104 | 105 | `import { date } from 'svelte-i18n'` 106 | 107 | Formats a date object into a string with the specified format. Please refer to the [#formats](#formats) section to see available formats. 108 | 109 | ```html 110 |
{$date(new Date(2019, 3, 24, 23, 45))}
111 | 112 | 113 |
{$date(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}
114 | 115 | ``` 116 | 117 | ### `$number(number: number, options: MessageObject)` 118 | 119 | `import { number } from 'svelte-i18n'` 120 | 121 | Formats a number with the specified locale and format. Please refer to the [#formats](#formats) section to see available formats. 122 | 123 | ```html 124 |
{$number(100000000)}
125 | 126 | 127 |
{$number(100000000, { locale: 'pt' })}
128 | 129 | ``` 130 | 131 | ### `$json(messageId: string)` 132 | 133 | `import { json } from 'svelte-i18n'` 134 | 135 | Returns the raw JSON value of the specified `messageId` for the current locale. While [`$format`](#format-_-or-t) always returns a string, `$json` can be used to get an object relative to the current locale. 136 | 137 | ```html 138 |
    139 | {#each $json('list.items') as item} 140 |
  • {item.name}
    • 141 | {/each} 142 |
143 | ``` 144 | 145 | ### Formats 146 | 147 | `svelte-i18n` comes with a default set of `number`, `time` and `date` formats: 148 | 149 | **Number:** 150 | 151 | - `currency`: `{ style: 'currency' }` 152 | - `percent`: `{ style: 'percent' }` 153 | - `scientific`: `{ notation: 'scientific' }` 154 | - `engineering`: `{ notation: 'engineering' }` 155 | - `compactLong`: `{ notation: 'compact', compactDisplay: 'long' }` 156 | - `compactShort`: `{ notation: 'compact', compactDisplay: 'short' }` 157 | 158 | **Date:** 159 | 160 | - `short`: `{ month: 'numeric', day: 'numeric', year: '2-digit' }` 161 | - `medium`: `{ month: 'short', day: 'numeric', year: 'numeric' }` 162 | - `long`: `{ month: 'long', day: 'numeric', year: 'numeric' }` 163 | - `full`: `{ weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }` 164 | 165 | **Time:** 166 | 167 | - `short`: `{ hour: 'numeric', minute: 'numeric' }` 168 | - `medium`: `{ hour: 'numeric', minute: 'numeric', second: 'numeric' }` 169 | - `long`: `{ hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' }` 170 | - `full`: `{ hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' }` 171 | 172 | ### Accessing formatters directly 173 | 174 | `svelte-i18n` also provides a low-level API to access its formatter methods: 175 | 176 | ```js 177 | import { 178 | getDateFormatter, 179 | getNumberFormatter, 180 | getTimeFormatter, 181 | getMessageFormatter, 182 | } from 'svelte-i18n'; 183 | ``` 184 | 185 | By using these methods, it's possible to manipulate values in a more specific way that fits your needs. For example, it's possible to create a method which receives a `date` and returns its relevant date related parts: 186 | 187 | ```js 188 | import { getDateFormatter } from 'svelte-i18n'; 189 | 190 | const getDateParts = (date) => 191 | getDateFormatter() 192 | .formatToParts(date) 193 | .filter(({ type }) => type !== 'literal') 194 | .reduce((acc, { type, value }) => { 195 | acc[type] = value; 196 | return acc; 197 | }, {}); 198 | 199 | getDateParts(new Date(2020, 0, 1)); // { month: '1', day: '1', year: '2020' } 200 | ``` 201 | 202 | Check the [methods documentation](/docs/Methods.md#low-level-api) for more information. 203 | -------------------------------------------------------------------------------- /docs/Getting Started.md: -------------------------------------------------------------------------------- 1 | ### Getting started 2 | 3 | 4 | 5 | 6 | 7 | - [1. Installing](#1-installing) 8 | - [1.1 VSCode extension](#11-vscode-extension) 9 | - [2. Locale dictionaries](#2-locale-dictionaries) 10 | - [3. Adding locale dictionaries](#3-adding-locale-dictionaries) 11 | - [3.1 Synchronous](#31-synchronous) 12 | - [3.2 Asynchronous](#32-asynchronous) 13 | - [4. Initializing](#4-initializing) 14 | - [5. Localizing your app](#5-localizing-your-app) 15 | 16 | 17 | 18 | #### 1. Installing 19 | 20 | First things first, let's install the necessary dependencies: 21 | 22 | ```sh 23 | yarn add svelte-i18n 24 | 25 | # if using rollup so we can import json files 26 | yarn add -D @rollup/plugin-json 27 | ``` 28 | 29 | ##### 1.1 VSCode extension 30 | 31 | If you're using `VSCode` and want to have your messages previewed alongside your components, checkout the [i18n-ally](https://github.com/antfu/i18n-ally) and their [FAQ](https://github.com/antfu/i18n-ally/wiki/FAQ) to see how to set it up. 32 | 33 | #### 2. Locale dictionaries 34 | 35 | A locale dictionary is a regular JSON object which contains message definitions for a certain language. 36 | 37 | ```jsonc 38 | // en.json 39 | { 40 | "page_title": "Page title", 41 | "sign_in": "Sign in", 42 | "sign_up": "Sign up" 43 | } 44 | 45 | // pt.json 46 | { 47 | "page_title": "Título da página", 48 | "sign_in": "Entrar", 49 | "sign_up": "Registrar" 50 | } 51 | ``` 52 | 53 | #### 3. Adding locale dictionaries 54 | 55 | There are two different ways of adding a new dictionary of messages to a certain locale: 56 | 57 | ##### 3.1 Synchronous 58 | 59 | Just `import`/`require` your locale `.json` files and pass them to the [`addMessages(locale, dict)`](/docs/Methods.md#addmessage) method. 60 | 61 | ```js 62 | // src/i18n.js 63 | import { addMessages } from 'svelte-i18n'; 64 | 65 | import en from './en.json'; 66 | import enUS from './en-US.json'; 67 | import pt from './pt.json'; 68 | 69 | addMessages('en', en); 70 | addMessages('en-US', enUS); 71 | addMessages('pt', pt); 72 | 73 | // en, en-US and pt are available 74 | ``` 75 | 76 | ##### 3.2 Asynchronous 77 | 78 | A more performant way to load your dictionaries is to register `loader` methods. This way, only the files registered to the current locale will be loaded. A `loader` is a method which must return a `Promise` that resolves to a `JSON` object. A [`$locale`](/docs/Locale.md#locale) value change will automatically load the registered loaders for the new locale. 79 | 80 | ```js 81 | // src/i18n.js 82 | import { register } from 'svelte-i18n'; 83 | 84 | register('en', () => import('./en.json')); 85 | register('en-US', () => import('./en-US.json')); 86 | register('pt', () => import('./pt.json')); 87 | 88 | // en, en-US and pt are not available yet 89 | ``` 90 | 91 | #### 4. Initializing 92 | 93 | After populating your [`$dictionary`](/docs/Dictionary.md) with [`addMessages()`](/docs/Methods.md#addmessages) or registering loaders via [`register()`](/docs/Methods.md#register), you are ready to bootstrap the library. You can use [`init()`](/docs/Methods.md#init) to define the fallback locale, initial locale and other options of your app. 94 | 95 | ```js 96 | // src/i18n.js 97 | import { register, init, getLocaleFromNavigator } from 'svelte-i18n'; 98 | 99 | register('en', () => import('./en.json')); 100 | register('en-US', () => import('./en-US.json')); 101 | register('pt', () => import('./pt.json')); 102 | // en, en-US and pt are not available yet 103 | 104 | init({ 105 | fallbackLocale: 'en', 106 | initialLocale: getLocaleFromNavigator(), 107 | }); 108 | // starts loading 'en-US' and 'en' 109 | ``` 110 | 111 | _Note_: Make sure to call your `i18n.js` file on your app's entry-point. If you're using Sapper, remember to also call `init()` on your server-side code (`server.js`). 112 | 113 | Since we're using `register`, and not `addMessages`, we need to wait for it's loaders to finish before rendering your app. 114 | 115 | In **Svelte**, the [`$isLoading`](/docs/Locale.md#loading) store can help to only show your app after the initial load as shown in [Locale](/docs/Locale.md#loading). 116 | 117 | In **Sapper**, you can use the `preload` static method together with `waitLocale`: 118 | 119 | ```svelte 120 | 121 | 129 | ``` 130 | 131 | Please note that the `fallbackLocale` is always loaded, independent of the current locale, since only some messages can be missing. 132 | 133 | #### 5. Localizing your app 134 | 135 | After having the initial locale set, you're ready to start localizing your app. Import the [`$format`](/docs/Formatting.md) method, or any of its aliases, to any component that needs to be translated. Then, just call [`$format`](/docs/Formatting.md) passing the message `id` on your layout and voila! 🎉 136 | 137 | ```svelte 138 | 141 | 142 | 143 | {$_('page_title')} 144 | 145 | 146 | 150 | ``` 151 | 152 | See [Formatting](/docs/Formatting.md) to read about the supported message syntax and all the available formatters. 153 | -------------------------------------------------------------------------------- /docs/Locale.md: -------------------------------------------------------------------------------- 1 | `import { locale } from 'svelte-i18n'` 2 | 3 | 4 | 5 | ### `$locale` 6 | 7 | The `locale` store defines what is the current locale. When its value is changed, before updating the actual stored value, `svelte-i18n` sees if there's any message loaders registered for the new locale: 8 | 9 | - If yes, changing the `locale` is an async operation. 10 | - If no, the locale's dictionary is fully loaded and changing the locale is a sync operation. 11 | 12 | The `` attribute is automatically updated to the current locale. 13 | 14 | #### Usage on component 15 | 16 | To change the locale inside a component is as simple as assinging it a new value. 17 | 18 | ```svelte 19 | 22 | 23 | 28 | 29 | ``` 30 | 31 | #### Usage on regular script 32 | 33 | ```js 34 | import { locale } from 'svelte-i18n' 35 | 36 | // Set the current locale to en-US 37 | locale.set('en-US') 38 | 39 | // This is a store, so we can subscribe to its changes 40 | locale.subscribe(() => console.log('locale change')) 41 | ``` 42 | 43 | ### `$isLoading` 44 | 45 | While changing the `$locale`, the `$isLoading` store can be used to detect if the app is currently fetching any enqueued message definitions. 46 | 47 | ```svelte 48 | 51 | 52 | {#if $isLoading} 53 | Please wait... 54 | {:else} 55 |