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.3.6 to 1.3.7
| import { Command } from "commander"; | ||
| import { type InlangProject } from "@inlang/sdk"; | ||
| import { Logger } from "../../../services/logger/index.js"; | ||
@@ -9,3 +10,7 @@ import { type Repository } from "@lix-js/client"; | ||
| export declare const initCommand: Command; | ||
| export declare const initializeInlangProject: (ctx: Context) => Promise<string>; | ||
| export declare const initializeInlangProject: (ctx: Context) => Promise<{ | ||
| project: InlangProject; | ||
| /** Relative path to the project */ | ||
| projectPath: string; | ||
| }>; | ||
| export declare const maybeAddVsCodeExtension: (args: { | ||
@@ -18,4 +23,4 @@ projectPath: string; | ||
| existingProjectPath: string; | ||
| }, ctx: Context) => Promise<undefined>; | ||
| export declare const createNewProjectFlow: (ctx: Context) => Promise<undefined>; | ||
| }, ctx: Context) => Promise<InlangProject>; | ||
| export declare const createNewProjectFlow: (ctx: Context) => Promise<InlangProject>; | ||
| export declare const checkIfPackageJsonExists: (ctx: Context) => Promise<undefined>; | ||
@@ -25,2 +30,3 @@ export declare const checkIfUncommittedChanges: (ctx: Context) => Promise<void>; | ||
| projectPath: string; | ||
| outdir: string; | ||
| }, ctx: Context) => Promise<undefined>; | ||
@@ -27,0 +33,0 @@ /** |
@@ -14,1 +14,2 @@ /** | ||
| export declare const DEFAULT_PROJECT_PATH = "./project.inlang"; | ||
| export declare const DEFAULT_OUTDIR = "./src/paraglide"; |
| { | ||
| "name": "@inlang/paraglide-js", | ||
| "type": "module", | ||
| "version": "1.3.6", | ||
| "version": "1.3.7", | ||
| "license": "Apache-2.0", | ||
@@ -66,4 +66,4 @@ "publishConfig": { | ||
| "@inlang/cross-sell-sherlock": "0.0.4", | ||
| "@inlang/language-tag": "1.5.1", | ||
| "@inlang/sdk": "0.28.3", | ||
| "@inlang/language-tag": "1.5.1", | ||
| "@inlang/telemetry": "0.3.18", | ||
@@ -70,0 +70,0 @@ "@lix-js/client": "1.2.0", |
136
README.md
@@ -1,32 +0,43 @@ | ||
| [<img src="https://cdn.loom.com/sessions/thumbnails/a8365ec4fa2c4f6bbbf4370cf22dd7f6-with-play.gif" width="100%" /> Watch the demo of Paraglide JS](https://www.youtube.com/watch?v=-YES3CCAG90) | ||
| [<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? | ||
| Get started with: | ||
| <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 VsCode Extension" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/sherlock-preview.png"></doc-feature> | ||
| </doc-features> | ||
| ```bash | ||
| npx @inlang/paraglide-js@latest init | ||
| ``` | ||
| # Features | ||
| With Paraglide's Treeshsakeable 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. | ||
| <doc-features> | ||
| <doc-feature title="Only used translations are shipped" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/unused-translations.png"></doc-feature> | ||
| <doc-feature title="Tiny Bundle-Size" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/reduced-payload.png"></doc-feature> | ||
| <doc-feature title="Typesafe" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/typesafe.png"></doc-feature> | ||
| </doc-features> | ||
| # Use it with your Favorite Framework | ||
| ### Treeshaking | ||
| Paraglide is framework agnostic, but it's even better if you pair it with a framework specific library. If you are using one of these frameworks you will want to follow the framework specific documentation instead. If you aren't, that's fine too! You can read on. | ||
| <doc-figure src="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/tree-shaking.jpg" alt="An illustration explaining the benefits of treeshaking in software" caption="How Paraglide JS treeshaking works"> | ||
| </doc-figure> | ||
| <doc-links> | ||
| <doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="/m/osslbuzt/paraglide-next-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for SvelteKit" icon="simple-icons:svelte" href="/m/dxnzrydw/paraglide-sveltekit-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for Astro" icon="devicon-plain:astro" href="/m/iljlwzfs/paraglide-astro-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="/m/n860p17j/paraglide-solidstart-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for 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-an-adapter" description="Learn How"></doc-link> | ||
| </doc-links> | ||
| Treeshaking gives us superpowers. With it, each page of your app only loads the messages that it actually uses. Incremental loading like this would usually take hours of manual tweaking to get right. With Paraglide-JS you get it for free. Say goodbye to huge bundles. | ||
| # People Love It | ||
| Here are a few comments we've received recently. | ||
| <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 i 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="The lib is great guys!" author="ktarmyshov" icon="mdi:github"></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 | ||
| ### 1. Initialize paraglide-js | ||
| To use Paraglide stanadlone without a framework, run the following command: | ||
| Initialize ParaglideJS whith: | ||
| ```bash | ||
@@ -38,38 +49,33 @@ npx @inlang/paraglide-js@latest init | ||
| 1. Install necessary dependencies | ||
| 2. Add the Paraglide compiler to your `build` script | ||
| 3. Set up configuration files | ||
| - Install necessary dependencies | ||
| - Generate a `messages/` folder where your translation files live | ||
| - Add the Paraglide compiler to your `build` script | ||
| - Create necessary configuration files | ||
| ### 2. Set up an adapter (optional) | ||
| Running the paraglide compiler will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js. | ||
| Adapters are framework-integrations for Paraglide. If you are using a framework, using an adapter is recommended , but not required. | ||
| ## Adding and Editing Messages | ||
| <doc-links> | ||
| <doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="/m/osslbuzt/paraglide-next-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for SvelteKit" icon="simple-icons:svelte" href="/m/dxnzrydw/paraglide-sveltekit-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for Astro" icon="devicon-plain:astro" href="/m/iljlwzfs/paraglide-astro-i18n" description="Go to Library"></doc-link> | ||
| <doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="/m/n860p17j/paraglide-solidstart-i18n" description="Go to Library"></doc-link> | ||
| </doc-links> | ||
| Messages are stored in `messages/{lang}.json`. To add a message simply add a key-value pair. You can add parameters with curly braces. | ||
| #### Alternatively, [you can write your own adapter](#writing-an-adapter) | ||
| ```diff | ||
| // messages/en.json | ||
| { | ||
| "$schema": "https://inlang.com/schema/inlang-message-format", | ||
| + "greeting": "Hello {name}!" | ||
| } | ||
| ``` | ||
| # Usage | ||
| Make sure to re-run the paraglide compiler after editing your messages. | ||
| Running your `build` script will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js. | ||
| ``` | ||
| npx @inlang/paraglide-js compile --project ./project.inlang | ||
| ``` | ||
| ## Adding Messages | ||
| If you are using Vite, you can instead use the [paraglide vite-plugin](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-vite) to do this automatically. | ||
| By default, paraglide expects your messages to be in `messages/{lang}.json`. | ||
| ## Using Messages in Code | ||
| ```json | ||
| { | ||
| "hello": "Hello world!" | ||
| "loginHeader": "Hello {name}, please login to continue." | ||
| } | ||
| ``` | ||
| After running the compiler, you can import messages with `import * as m from "./paraglide/messages"`. | ||
| ## Using Messages | ||
| You can import messages with `import * as m from "./paraglide/messages"`. Don't worry, your bundler will only include the messages that you actually use. | ||
| ```js | ||
@@ -83,3 +89,3 @@ import * as m from "./paraglide/messages.js" | ||
| If you want to choose between messages at runtime, you can create a record of messages and index into it. | ||
| To choose between messages at runtime create a map of messages and index into it. | ||
@@ -99,11 +105,10 @@ ```ts | ||
| ### Using the [Sherlock IDE Extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) (optional) | ||
| ## Configuration | ||
| [Sherlock](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) integrates with paraglide to give you the optimal dev-experience. | ||
| You can configure the languages you intend to support | ||
|  | ||
| ### Languages | ||
| ## Adding Languages | ||
| You can declare which languages you support in `./project.inlang/settings.json`. | ||
| You can declare which languages you support in `./project.inlang/settings.json`. | ||
| ```json | ||
@@ -274,3 +279,7 @@ // project.inlang/settings.json | ||
| ```tsx | ||
| import { setLanguageTag, onSetLanguageTag, type AvailableLanguageTag } from "../paraglide/runtime.js" | ||
| import { | ||
| setLanguageTag, | ||
| onSetLanguageTag, | ||
| type AvailableLanguageTag, | ||
| } from "../paraglide/runtime.js" | ||
| import { isServer, isClient, request, render } from "@example/framework" | ||
@@ -280,6 +289,6 @@ import { detectLanguage } from "./utils.js" | ||
| if (isServer) { | ||
| // On the server the language tag needs to be resolved on a per-request basis. | ||
| // 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 => { | ||
| const detectLanguage = (request: Request): AvailableLanguageTag => { | ||
| //your logic ... | ||
@@ -290,3 +299,3 @@ } | ||
| if(isClient) { | ||
| if (isClient) { | ||
| // On the client, the language tag can be resolved from | ||
@@ -313,16 +322,2 @@ // the document's html lang tag. | ||
| # Community | ||
| We are grateful for all the support we get from the community. Here are a few comments we've received recently. | ||
| If you have any feedback / problems, please let us know on [GitHub](https://github.com/opral/inlang-paraglide-js/issues/new) | ||
| <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 i 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="Dally H" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1096039983116202034/1220796380772307004"></doc-comment> | ||
| <doc-comment text="The lib is great guys!" author="ktarmyshov" icon="mdi:github"></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-comment text="Thanks for all the great work @Samuel Stroschein" author="Willem" icon="mdi:discord"></doc-comment> | ||
| </doc-comments> | ||
| # Roadmap | ||
@@ -335,2 +330,3 @@ | ||
| - [ ] Markup Placeholders ([Join the Discussion](https://github.com/opral/monorepo/discussions/913)) | ||
| - [ ] Even Smaller Output | ||
@@ -348,3 +344,3 @@ # Talks | ||
| As a developer, you will love the [Sherlock IDE extension](http://localhost:4001/m/r7kp499g/app-inlang-ideExtension). | ||
| As a developer, you will love the [Sherlock VsCode extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension). | ||
@@ -351,0 +347,0 @@ If you are working with translators or designers you will find these tools useful: |
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 by0.04%
2077284
- Lines of code
- increased by0.06%
57698
Worsened metrics
- Number of lines in readme file
- decreased by-1.14%
346
No dependency changes