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.0.0-prerelease.14 to 1.0.0-prerelease.15
| /// <reference types="node" resolution-mode="require"/> | ||
| /// <reference types="node" resolution-mode="require"/> | ||
| import type nodeFsPromises from "node:fs/promises"; | ||
| export declare function writeOutput(outputDirectory: string, output: Record<string, string>, fs: typeof nodeFsPromises): Promise<void>; |
| { | ||
| "name": "@inlang/paraglide-js", | ||
| "type": "module", | ||
| "version": "1.0.0-prerelease.14", | ||
| "version": "1.0.0-prerelease.15", | ||
| "license": "Apache-2.0", | ||
@@ -56,4 +56,4 @@ "publishConfig": { | ||
| "vitest": "0.34.3", | ||
| "@inlang/telemetry": "0.2.1", | ||
| "@inlang/env-variables": "0.1.0" | ||
| "@inlang/env-variables": "0.1.0", | ||
| "@inlang/telemetry": "0.2.1" | ||
| }, | ||
@@ -60,0 +60,0 @@ "exports": { |
104
README.md
@@ -25,5 +25,10 @@ <!--  --> | ||
| … and much more | ||
| ### Treeshaking | ||
| <doc-figure src="https://cdn.jsdelivr.net/gh/inlang/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> | ||
| 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. | ||
| # Getting started | ||
@@ -34,2 +39,3 @@ | ||
| You can initialize paraglide-js by running the following command in your terminal: | ||
| ```bash | ||
@@ -46,3 +52,3 @@ npx @inlang/paraglide-js@latest init | ||
| <doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="https://discord.com/channels/897438559458430986/1163823207128776795" description="View progress"></doc-link> | ||
| <doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="https://github.com/inlang/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-next/example" description="Go to GitHub example"></doc-link> | ||
| <doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="https://github.com/inlang/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-next" description="Go to GitHub example"></doc-link> | ||
| <doc-link title="Adapter for Vite" icon="tabler:brand-vite" href="https://github.com/inlang/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-vite" description="Go to GitHub"></doc-link> | ||
@@ -61,5 +67,5 @@ </doc-links> | ||
| { | ||
| "scripts": { | ||
| "compile": "paraglide-js compile" | ||
| } | ||
| "scripts": { | ||
| "compile": "paraglide-js compile" | ||
| } | ||
| } | ||
@@ -100,11 +106,12 @@ ``` | ||
| | Variable | Description | | ||
| | --- | --- | | ||
| | `sourceLanguageTag` | The source language tag of the project | | ||
| | `availableLanguageTags` | All language tags of the current project | | ||
| | `languageTag()` | Returns the language tag of the current user | | ||
| | `setLanguageTag()` | Sets the language tag of the current user | | ||
| | `onSetLanguageTag()` | Registers a listener that is called whenever the language tag changes | | ||
| | Variable | Description | | ||
| | ----------------------- | --------------------------------------------------------------------- | | ||
| | `sourceLanguageTag` | The source language tag of the project | | ||
| | `availableLanguageTags` | All language tags of the current project | | ||
| | `languageTag()` | Returns the language tag of the current user | | ||
| | `setLanguageTag()` | Sets the language tag of the current user | | ||
| | `onSetLanguageTag()` | Registers a listener that is called whenever the language tag changes | | ||
| ## Setting the language | ||
| You can set the current language tag by calling `setLanguageTag()`. Any subsequent calls to either `languageTag()` or a message function will return the new language tag. | ||
@@ -126,2 +133,3 @@ | ||
| ## Reacting to a language change | ||
| You can react to a language change by calling `onSetLanguageTag()`. This function is called whenever the language tag changes. | ||
@@ -134,3 +142,3 @@ | ||
| onSetLanguageTag((newLanguageTag) => { | ||
| console.log(`The language changed to ${newLanguageTag}`) | ||
| console.log(`The language changed to ${newLanguageTag}`) | ||
| }) | ||
@@ -143,2 +151,3 @@ | ||
| There are a few things to know about `onSetLanguageTag()`: | ||
| - You can only register one listener. If you register a second listener it will throw an error. | ||
@@ -150,2 +159,3 @@ - It shouldn't be used on the server. | ||
| ## Forcing a language | ||
| It's common that you need to force a message to be in a certain language, especially on the server. You can do this by passing an options object to the message function as a | ||
@@ -188,8 +198,8 @@ second parameter. | ||
| | 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 of the current user | | ||
| | **Adapter** | (if required) An adapter that adjusts the runtime for different frameworks | | ||
| | 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 of the current user | | ||
| | **Adapter** | (if required) An adapter that adjusts the runtime for different frameworks | | ||
@@ -203,2 +213,3 @@ ## Compiler | ||
| **Input** | ||
| ```js | ||
@@ -213,2 +224,3 @@ // messages/en.json | ||
| **Output** | ||
| ```js | ||
@@ -222,7 +234,7 @@ // src/paraglide/messages.js | ||
| function hello({ name }) { | ||
| return `Hello ${name}!` | ||
| return `Hello ${name}!` | ||
| } | ||
| function loginButton() { | ||
| return "Login" | ||
| return "Login" | ||
| } | ||
@@ -244,17 +256,15 @@ ``` | ||
| export function hello(params) { | ||
| return `Hello ${params.name}!` | ||
| return `Hello ${params.name}!` | ||
| } | ||
| export function loginButton() { | ||
| return "Login" | ||
| return "Login" | ||
| } | ||
| export function loginHeader(params) { | ||
| return `Hello ${params.name}, please login to continue.` | ||
| return `Hello ${params.name}, please login to continue.` | ||
| } | ||
| ``` | ||
| Only the message `hello` is used in the source code. | ||
@@ -276,9 +286,8 @@ | ||
| function hello(params) { | ||
| return `Hello ${params.name}!` | ||
| return `Hello ${params.name}!` | ||
| } | ||
| console.log(hello({ name: "Samuel"})) | ||
| console.log(hello({ name: "Samuel" })) | ||
| ``` | ||
| ## Runtime | ||
@@ -295,3 +304,2 @@ | ||
| # Writing an Adapter | ||
@@ -306,5 +314,2 @@ | ||
| ```tsx | ||
@@ -314,3 +319,2 @@ import { setLanguageTag, onSetLanguageTag } from "./paraglide/runtime" | ||
| // On a server, the language tag needs to be resolved on a | ||
@@ -323,4 +327,4 @@ // per-request basis. Hence, we need to pass a getter | ||
| // is available in the request object. | ||
| if (isServer){ | ||
| setLanguageTag(() => request.languageTag) | ||
| if (isServer) { | ||
| setLanguageTag(() => request.languageTag) | ||
| } | ||
@@ -333,22 +337,20 @@ // On a client, the language tag could be resolved from | ||
| else { | ||
| setLanguageTag(() => document.documentElement.lang) | ||
| setLanguageTag(() => document.documentElement.lang) | ||
| //! Make sure to call `onSetLanguageTag` after | ||
| //! the initial language tag has been set to | ||
| //! avoid an infinite loop. | ||
| //! Make sure to call `onSetLanguageTag` after | ||
| //! the initial language tag has been set to | ||
| //! avoid an infinite loop. | ||
| // route to the page in the new language | ||
| onSetLanguageTag((newLanguageTag) => { | ||
| window.location.pathname = `/${newLanguageTag}${window.location.pathname}` | ||
| }) | ||
| // route to the page in the new language | ||
| onSetLanguageTag((newLanguageTag) => { | ||
| window.location.pathname = `/${newLanguageTag}${window.location.pathname}` | ||
| }) | ||
| } | ||
| // render the app | ||
| render((page) => | ||
| <html lang={request.languageTag}> | ||
| <body> | ||
| {page} | ||
| </body> | ||
| </html> | ||
| ) | ||
| render((page) => ( | ||
| <html lang={request.languageTag}> | ||
| <body>{page}</body> | ||
| </html> | ||
| )) | ||
| ``` | ||
@@ -355,0 +357,0 @@ |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.27%
351252
- Lines of code
- increased by0.02%
8392
- Number of lines in readme file
- increased by0.58%
349
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes