Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@inlang/paraglide-js
Advanced tools
@inlang/paraglide-js - npm Package Compare versions
Comparing version 1.8.0 to 1.9.0
@@ -5,4 +5,5 @@ export { runCompiler } from './steps/run-compiler.js'; | ||
| export { maybeAddSherlock } from './steps/maybe-add-sherlock.js'; | ||
| export { maybeAddNinja } from './steps/maybe-add-ninja.js'; | ||
| export { promptForOutdir } from './steps/prompt-for-outdir.js'; | ||
| export { updatePackageJson } from './steps/update-package-json.js'; | ||
| export { maybeChangeTsConfig, maybeChangeTsConfigAllowJs, maybeChangeTsConfigModuleResolution, } from './steps/update-ts-config.js'; |
| { | ||
| "name": "@inlang/paraglide-js", | ||
| "type": "module", | ||
| "version": "1.8.0", | ||
| "version": "1.9.0", | ||
| "license": "Apache-2.0", | ||
@@ -65,10 +65,11 @@ "publishConfig": { | ||
| "vitest": "0.34.3", | ||
| "@inlang/cross-sell-sherlock": "0.0.4", | ||
| "@inlang/cross-sell-ninja": "0.0.17", | ||
| "@inlang/env-variables": "0.2.0", | ||
| "@inlang/cross-sell-sherlock": "0.0.4", | ||
| "@inlang/language-tag": "1.5.1", | ||
| "@inlang/telemetry": "0.3.28", | ||
| "@lix-js/client": "1.4.0", | ||
| "@inlang/sdk": "0.34.3", | ||
| "@inlang/sdk": "0.34.9", | ||
| "@inlang/telemetry": "0.3.35", | ||
| "@inlang/plugin-message-format": "2.2.0", | ||
| "@lix-js/fs": "1.0.0", | ||
| "@inlang/plugin-message-format": "2.2.0" | ||
| "@lix-js/client": "1.4.0" | ||
| }, | ||
@@ -75,0 +76,0 @@ "exports": { |
150
README.md
@@ -1,39 +0,1 @@ | ||
| [<img src="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/header.png" alt="Dead Simple i18n. Typesafe, Small Footprint, Treeshsakeable Messages, IDE Integration, Framework Agnostic" width="10000000px" />](https://www.youtube.com/watch?v=-YES3CCAG90) | ||
| # Why Paraglide? | ||
| <doc-features> | ||
| <doc-feature title="Tiny Runtime" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/bundlesize-feature.png"></doc-feature> | ||
| <doc-feature title="Fully Typesafe" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/typesafety-feature.png"></doc-feature> | ||
| <doc-feature title="Only Ship Used Messages" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/unused-translations.png"></doc-feature> | ||
| <doc-feature title="Sherlock VS Code Extension" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/sherlock-preview.png"></doc-feature> | ||
| </doc-features> | ||
| With Paraglide's treeshakeable messages, each page only loads the messages it actually uses. Incremental loading like this would usually take forever to get right, with Paraglide you get it for free. | ||
| # Use it with your Favorite Framework | ||
| Paraglide is framework agnostic, but there are framework-specific libraries available. If there is one for your framework you will want to follow its documentation instead. If there isn't, read on. | ||
| <doc-links> | ||
| <doc-link title="Paraglide-Next" icon="tabler:brand-nextjs" href="/m/osslbuzt/paraglide-next-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Paraglide-SvelteKit" icon="simple-icons:svelte" href="/m/dxnzrydw/paraglide-sveltekit-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Paraglide-Astro" icon="devicon-plain:astro" href="/m/iljlwzfs/paraglide-astro-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Paraglide-SolidStart" icon="tabler:brand-solidjs" href="/m/n860p17j/paraglide-solidstart-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Paraglide-Remix" icon="simple-icons:remix" href="/m/fnhuwzrx/paraglide-remix-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Or write your own" icon="ph:sparkle-fill" href="#writing-a-framework-library" description="Learn How"></doc-link> | ||
| </doc-links> | ||
| # People Love It | ||
| A few recent comments. | ||
| <doc-comments> | ||
| <doc-comment text="Just tried Paraglide JS from @inlangHQ. This is how i18n should be done! Totally new level of DX for both implementation and managing translations! Superb support for SvelteKit as well ⭐" author="Patrik Engborg" icon="mdi:twitter" data-source="https://twitter.com/patrikengborg/status/1747260930873053674"></doc-comment> | ||
| <doc-comment text="I was messing with various i18n frameworks and tools in combination with Astro, and must say that Paraglide was the smoothest experience. I have migrated my website from i18next and it was a breeze. SSG and SSR worked out of the box (which was the first one for me), and overall DX is great. Thanks for your work!" author="Dalibor Hon" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1096039983116202034/1220796380772307004"></doc-comment> | ||
| <doc-comment text="Awesome library 🙂 Thanks so much! 1) The docs were simple and straight forward 2) Everything just worked.. no headaches" author="Dimitry" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1083724234142011392/1225658097016766574"></doc-comment> | ||
| <doc-comment text="Thank you for that huge work you have done and still doing!" author="ZerdoX-x" icon="mdi:github"></doc-comment> | ||
| </doc-comments> | ||
| # Getting started | ||
@@ -286,102 +248,2 @@ | ||
| # Architecture | ||
| Paraglide uses a compiler to generate JS functions from your messages. We call these "message functions". | ||
| Message Functions are fully typed using JSDoc. They are exported individually from the `messages.js` file making them tree-shakable. When called, they return a translated string. Message functions aren't reactive in any way, if you want a translation in another language you will need to re-call them. | ||
| This design avoids many edge cases with reactivity, lazy-loading, and namespacing that other i18n libraries have to work around. | ||
| In addition to the message functions, ParaglideJS also emits a runtime. The runtime is used to set the language tag. It contains less than 50 LOC (lines of code) and is less than 300 bytes minified & gzipped. | ||
|  | ||
| Paraglide consists of four main parts: | ||
| | Part | Description | | ||
| | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | | ||
| | **Compiler** | Compiles messages into tree-shakable message functions | | ||
| | **Messages** | The compiled tree-shakable message functions | | ||
| | **Runtime** | A runtime that resolves the [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) of the current user | | ||
| | **Framework Library** | (optional) A framework library that adjusts the runtime for different frameworks | | ||
| ## Compiler | ||
| The compiler loads an Inlang project and compiles the messages into tree-shakable and typesafe message functions. | ||
| **Input** | ||
| ```js | ||
| // messages/en.json | ||
| { | ||
| "hello": "Hello {name}!" | ||
| } | ||
| ``` | ||
| **Output** | ||
| ```js | ||
| // src/paraglide/messages/en.js | ||
| /** | ||
| * @param {object} params | ||
| * @param {string} params.name | ||
| */ | ||
| export const hello = (params) => `Hello ${params.name}!` | ||
| ``` | ||
| # Writing a Framework Library | ||
| Paraglide-Framework-Library integrates with a framework's lifecycle. It does two things: | ||
| 1. Calls `setLanguageTag()` at appropriate times to set the language | ||
| 2. Reacts to `onSetLanguageTag()`, usually by navigating or relading the page. | ||
| Additionally, it may provide convenience features such as localised routing. | ||
| Many popular frameworks already have libraries available, check out the [list of available framework libraries](#use-it-with-your-favorite-framework). | ||
| If there isn't one for your framework, you can write your own. This example adapts Paraglide to a fictitious full-stack framework. | ||
| ```tsx | ||
| import { | ||
| setLanguageTag, | ||
| onSetLanguageTag, | ||
| type AvailableLanguageTag, | ||
| } from "../paraglide/runtime.js" | ||
| import { isServer, isClient, request, render } from "@example/framework" | ||
| import { detectLanguage } from "./utils.js" | ||
| if (isServer) { | ||
| // On the server the language tag needs to be resolved on a per-request basis. | ||
| // Pass a getter function that resolves the language from the correct request | ||
| const detectLanguage = (request: Request): AvailableLanguageTag => { | ||
| //your logic ... | ||
| } | ||
| setLanguageTag(() => detectLanguage(request)) | ||
| } | ||
| if (isClient) { | ||
| // On the client, the language tag can be resolved from | ||
| // the document's html lang tag. | ||
| setLanguageTag(() => document.documentElement.lang) | ||
| // When the language changes we want to re-render the page in the new language | ||
| // Here we just navigate to the new route | ||
| // Make sure to call `onSetLanguageTag` after `setLanguageTag` to avoid an infinite loop. | ||
| onSetLanguageTag((newLanguageTag) => { | ||
| window.location.pathname = `/${newLanguageTag}${window.location.pathname}` | ||
| }) | ||
| } | ||
| // Render the app once the setup is done | ||
| render((page) => ( | ||
| <html lang={request.languageTag}> | ||
| <body>{page}</body> | ||
| </html> | ||
| )) | ||
| ``` | ||
| # Roadmap | ||
@@ -404,13 +266,1 @@ | ||
| - [Svelte London January 2024](https://www.youtube.com/watch?v=eswNQiq4T2w&t=646s) | ||
| # Complementary Tooling | ||
| Paraglide JS is part of the Inlang ecosystem and integrates nicely with all the other Inlang-compatible tools. | ||
| As a developer, you will love the [Sherlock VS Code extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension). | ||
| If you are working with translators or designers you will find these tools useful: | ||
| - [Fink](https://inlang.com/m/tdozzpar/app-inlang-finkLocalizationEditor) - An Online UI for editing translations. Changes made in Fink are committed to a translation branch or submitted via pull request. | ||
| - [Parrot](https://inlang.com/m/gkrpgoir/app-parrot-figmaPlugin) - A Figma Plugin for previewing translations right in your Figma designs. This avoids any layout issues that might occur due to different text lengths in different languages. | ||
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.62%
1726166
- Number of package files
- increased by1.39%
73
- Lines of code
- increased by4.39%
51280
Worsened metrics
- Dev dependency count
- increased by4.76%
22
- Number of lines in readme file
- decreased by-36.14%
265
No dependency changes