@inlang/paraglide-js 1.2.0 → 1.2.2

package/README.md

@@ -1,14 +1,10 @@
-<!-- ![Paraglide JS header image](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/paraglide-js-header.png) -->
-
-[<img src="https://cdn.loom.com/sessions/thumbnails/a8365ec4fa2c4f6bbbf4370cf22dd7f6-with-play.gif" width="100%" /> Watch the pre-release demo of Paraglide JS](https://www.youtube.com/watch?v=-YES3CCAG90)
-
-Attention: The following features are missing and will be added in the upcoming weeks:
+[<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)
 
-- [ ] Support for pluralization
+<!-- ![Paraglide JS header image](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/paraglide-js-header.png) -->
 
-# The i18n library that you can set up within 3 lines of code
+# Simple, adaptable, and tiny i18n library for JS
 
-Type in the following command into your terminal to get started immediately:
+Get started instantly with the following command:
 
 ```bash
 npx @inlang/paraglide-js@latest init
@@ -18,7 +14,7 @@ npx @inlang/paraglide-js@latest init
 
 <doc-features>
   <doc-feature title="No unused translations" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/unused-translations.png"></doc-feature>
-  <doc-feature title="Reduced payload" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/reduced-payload.png"></doc-feature>
+  <doc-feature title="Minimal payload" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/reduced-payload.png"></doc-feature>
   <doc-feature title="Typesafety" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/typesafe.png"></doc-feature>
 </doc-features>
 
@@ -29,7 +25,6 @@ npx @inlang/paraglide-js@latest init
 
 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
 
 ### 1. Initialize paraglide-js
@@ -40,37 +35,28 @@ You can initialize paraglide-js by running the following command in your termina
 npx @inlang/paraglide-js@latest init
 ```
 
-### 2. Select an adapter (if required)
+This will:
+
+1. Install the necessary dependencies
+2. Call the Paraglide compiler in your `build` script
+3. Set up any necessary configuration files
 
-Having an adapter is recommended but not required if you want to use paraglide-js with a framework. If you don't use a framework, you can skip this step.
+### 2. Set up an adapter (optional)
+
+Adapters are framework specific integrations for Paraglide. If you are using a framework, using an adapter is recommended (but not required). If you don't use a framework, you can skip this step.
 
 <doc-links>
-    <doc-link title="Adapter for Svelte" icon="simple-icons:svelte" href="https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-svelte/example" description="Go to GitHub example"></doc-link>
-    <doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="https://inlang.com/m/n860p17j/library-inlang-paraglideJsAdapterSolidStart" description="Go to Adapter"></doc-link>
+    <doc-link title="Adapter for SvelteKit" icon="simple-icons:svelte" href="https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit" description="Go to Library"></doc-link>
+    <doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="https://inlang.com/m/n860p17j/library-inlang-paraglideJsAdapterSolidStart" description="Go to Library"></doc-link>
     <doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="https://github.com/opral/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/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-vite" description="Go to GitHub"></doc-link>
 </doc-links>
 
 #### Alternatively, [you can write your own adapter](#writing-an-adapter)
 
-### 3. Add the `compile` script to your `package.json`
-
-> If you are using `@inlang/paraglide-js-adapter-vite`, you can skip this step.
-
-You can customize the `compile` script to your needs. For example, you can add a `--watch` flag to watch for changes, if you have installed a watcher.
-
-```json
-{
-	"scripts": {
-		"compile": "paraglide-js compile --project ./project.inlang",
-		"watch": "paraglide-js compile --project ./project.inlang --watch"
-	}
-}
-```
-
 # Usage
 
-Running the `compile` script will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js.
+Running your `build` script will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js.
 Throughout this guide, you will see imports from `./paraglide/*`. These are all to this folder.
 
 > Tip: If you are using a bundler, you can set up an alias to `./src/paraglide` to make the imports shorter. We recommend `$paraglide/*`
@@ -83,8 +69,8 @@ The compiled messages are placed in `./paraglide/messages.js`. You can import th
 // m is a namespace that contains all messages of your project
 // a bundler like rollup or webpack only bundles
 // the messages that are used
-import * as m from "./paraglide/messages"
-import { setLanguageTag } from "./paraglide/runtime"
+import * as m from "./paraglide/messages.js"
+import { setLanguageTag } from "./paraglide/runtime.js"
 
 // use a message
 m.hello() // Hello world!
@@ -101,7 +87,7 @@ m.loginHeader({ name: "Samuel" }) // Hallo Samuel, bitte melde dich an, um fortz
 If you want to dynamically choose between a set of messages, you can create a record of messages and index into it. Note that this will not be tree-shaken by your bundler.
 
 ```js
-import * as m from "./paraglide/messages"
+import * as m from "./paraglide/messages.js"
 
 const season = {
 	spring: m.spring,
@@ -113,24 +99,25 @@ const season = {
 const msg = season["spring"]() // Hello spring!
 ```
 
-Paraglide JS provides five exports in `./paraglide/runtime.js`:
+Paraglide JS provides several exports from `./paraglide/runtime.js`:
 
-| 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 |
-| `isAvailableLanguageTag()` | Checks if a value is a valid language tag |
+| Variable                    | Description                                                           |
+| --------------------------- | --------------------------------------------------------------------- |
+| `sourceLanguageTag`         | The source language tag of the project                                |
+| `availableLanguageTags`     | All language tags of the current project                              |
+| `type AvailableLanguageTag` | An Type representing a valid language tag                             |
+| `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 |
+| `isAvailableLanguageTag()`  |  Checks if a value is a valid language tag                            |
 
 ## Setting the language
 
-You can set the current [language tag](/m/8y8sxj09/library-inlang-languageTag) by calling `setLanguageTag()`. Any subsequent calls to either `languageTag()` or a message function will return the new language tag.
+You can set the current [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) by calling `setLanguageTag()`. Any subsequent calls to either `languageTag()` or a message function will return the new language tag.
 
 ```js
-import { setLanguageTag } from "./paraglide/runtime"
-import * as m from "./paraglide/messages"
+import { setLanguageTag } from "./paraglide/runtime.js"
+import * as m from "./paraglide/messages.js"
 
 setLanguageTag("de")
 m.hello() // Hallo Welt!
@@ -139,15 +126,26 @@ setLanguageTag("en")
 m.hello() // Hello world!
 ```
 
-The [language tag](/m/8y8sxj09/library-inlang-languageTag) is global, so you need to be careful with it on the server to make sure multiple requests don't interfere with each other. That's why we recommend using an adapter for your framework. Adapters integrate with the framework's lifecycle and ensure that the language tag is managed correctly.
+The [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) is global, so you need to be careful with it on the server to make sure multiple requests don't interfere with each other. That's why we recommend using an adapter for your framework. Adapters integrate with the framework's lifecycle and ensure that the language tag is managed correctly.
+
+## Adding Languages
+
+You can define which languages you want to support in `./project.inlang/settings.json`. Just edit the `languageTags` array.
+
+```json
+// project.inlang/settings.json
+{
+	"languageTags": ["en", "de"]
+}
+```
 
 ## Reacting to a language change
 
-You can react to a language change by calling `onSetLanguageTag()`. This function is called whenever the [language tag](/m/8y8sxj09/library-inlang-languageTag) changes.
+You can react to a language change by registering a callback using `onSetLanguageTag()`. This function is called whenever the [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) changes.
 
 ```js
-import { setLanguageTag, onSetLanguageTag } from "./paraglide/runtime"
-import * as m from "./paraglide/messages"
+import { setLanguageTag, onSetLanguageTag } from "./paraglide/runtime.js"
+import * as m from "./paraglide/messages.js"
 
 onSetLanguageTag((newLanguageTag) => {
 	console.log(`The language changed to ${newLanguageTag}`)
@@ -166,17 +164,17 @@ The main use case for `onSetLanguageTag()` is to trigger a rerender of your app'
 
 ## 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
+It's common that you need to force a message to be in a certain language, especially on the server and during tests. You can do this by passing an options object to the message function as a
 second parameter.
 
 ```js
-import * as m from "./paraglide/messages"
+import * as m from "./paraglide/messages.js"
 const msg = m.hello({ name: "Samuel" }, { languageTag: "de" }) // Hallo Samuel!
 ```
 
 ## Usage with a Bundler
 
-We provide a few bundler plugins to make it easier to use paraglide-js with a bundler. If you
+We provide bundler plugins to make it easier to use Paraglide with a bundler. If you
 are using one of these bundlers, we recommed using the corresponding plugin.
 
 - [Rollup](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-rollup)
@@ -187,28 +185,29 @@ These plugins make sure to rerun the `compile` script whenever you build your pr
 
 # Playground
 
-You can find many examples for how to use paraglide on codesandbox:
+You can find many examples for how to use paraglide on codesandbox, or in [our GitHub repository](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide).
 
 <doc-links>
-    <doc-link title="Svelte + Paraglide JS" icon="lucide:codesandbox" href="https://dub.sh/paraglide-playground-svelte" description="Play around with Svelte and Paraglide JS"></doc-link>
+    <doc-link title="Svelte + Paraglide JS" icon="lucide:codesandbox" href="https://stackblitz.com/~/github.com/LorisSigrist/paraglide-sveltekit-example" description="Play around with Svelte and Paraglide JS"></doc-link>
+    <doc-link title="Astro + Paraglide JS" icon="lucide:codesandbox" href="https://stackblitz.com/~/github.com/LorisSigrist/paraglide-astro-example" description="Play around with Astro and Paraglide JS"></doc-link>
 </doc-links>
 
 # Architecture
 
 Inlang Paraglide JS leverages a compiler to emit vanilla JavaScript functions.
 
-The emitted functions are often referred to as "message functions". By emitting message functions, inlang Paraglide JS eliminates a class of edge cases while also being simpler, faster, and more reliable than other i18n libraries. The compiled runtime contains less than 50 LOC (lines of code) and is less than 1kb gzipped.
+The emitted functions are referred to as "message functions". By emitting message functions, inlang Paraglide JS eliminates a whole class of edge cases while also being simpler, faster, and more reliable than other i18n libraries. The compiled runtime contains less than 50 LOC (lines of code) and is less than 300 bytes minified & gzipped.
 
 ![paraglide JS architecture](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/architecture.svg)
 
 Inlang Paraglide-JS 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](/m/8y8sxj09/library-inlang-languageTag) 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](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) of the current user |
+| **Adapter**  | (optional) An adapter that adjusts the runtime for different frameworks                                                   |
 
 ## Compiler
 
@@ -229,19 +228,16 @@ The compiler loads an inlang project and compiles the messages into tree-shakabl
 **Output**
 
 ```js
-// src/paraglide/messages.js
+// src/paraglide/messages/en.js
 
 /**
  * @param {object} params
  * @param {string} params.name
  */
-function hello({ name }) {
-	return `Hello ${name}!`
-}
+export const hello = (params) => `Hello ${params.name}!`
 
-function loginButton() {
-	return "Login"
-}
+/** ... */
+export const loginButton = () => "Login"
 ```
 
 ## Messages
@@ -257,25 +253,21 @@ Three compiled message functions exist in an example project.
 ```js
 // src/paraglide/messages.js
 
-export function hello(params) {
-	return `Hello ${params.name}!`
-}
+/** ... */
+export const hello = (params) => `Hello ${params.name}!`
 
-export function loginButton() {
-	return "Login"
-}
+/** ... */
+export const loginButton = () => "Login"
 
-export function loginHeader(params) {
-	return `Hello ${params.name}, please login to continue.`
-}
+/** ... */
+export const loginHeader = (params) => `Hello ${params.name}, please login to continue.`
 ```
 
 Only the message `hello` is used in the source code.
 
 ```js
-// source/index.js
-
-import * as m from "./paraglide/messages"
+// src/my-code.js
+import * as m from "../paraglide/messages.js"
 
 console.log(m.hello({ name: "Samuel" }))
 ```
@@ -283,37 +275,25 @@ console.log(m.hello({ name: "Samuel" }))
 The bundler tree shakes (removes) `loginButton` and `loginHeader` and only includes `hello` in the output.
 
 ```js
-// output/index.js
-
-function hello(params) {
-	return `Hello ${params.name}!`
-}
+// dist/my-code.js
+const hello = (params) => `Hello ${params.name}!`
 
 console.log(hello({ name: "Samuel" }))
 ```
 
-## Runtime
-
-View the source of `./paraglide/runtime.js` to find the latest runtime API and documentation.
-
-## Adapter
-
-Paraglide-JS can be adapted to any framework or environment by calling `setLanguageTag()` and `onSetLanguageTag()`.
-
-1.  `setLanguageTag()` can be used to set a getter function for the [language tag](/m/8y8sxj09/library-inlang-languageTag). The getter function can be used to resolve server-side language tags or to resolve the language tag from a global state management library like Redux or Vuex.
-2.  `onSetLanguageTag()` can be used to trigger side-effects such as updating the UI, or requesting the site in the new language from the server.
-
 # Writing an Adapter
 
+Paraglide can be adapted to any framework or environment by calling `setLanguageTag()` and `onSetLanguageTag()`.
+
 The following example adapts Paraglide-JS to a fictitious metaframework like NextJS, SolidStart, SvelteKit, or Nuxt.
 
-The goal is to provide a high-level understanding of how to adapt Paraglide-JS to a framework. Besides this example, we recommend viewing the source-code of available adapters. In general, only two functions need to be called to adapt Paraglide-JS to a framework:
+The goal is to provide a high-level understanding of how to adapt Paraglide to a framework. Besides this example, we recommend viewing the source-code of available adapters. In general, only two functions need to be called to adapt Paraglide to a framework:
 
-1. `setLanguageTag()`: to set the [language tag](/m/8y8sxj09/library-inlang-languageTag)
-2. `onSetLanguageTag()`: to trigger a side-effect when the language changes
+1.  `setLanguageTag()` can be used to set a getter function for the [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag). The getter function can be used to resolve server-side language tags or to resolve the language tag from a global state management library like Redux or Vuex.
+2.  `onSetLanguageTag()` can be used to trigger side-effects such as updating the UI, or requesting the site in the new language from the server.
 
 ```tsx
-import { setLanguageTag, onSetLanguageTag } from "./paraglide/runtime"
+import { setLanguageTag, onSetLanguageTag } from "../paraglide/runtime.js"
 import { isServer, request, render } from "@example/framework"
 
 // On a server, the language tag needs to be resolved on a
@@ -358,15 +338,28 @@ We are grateful for all the support we get from the community. Here are just a f
 Of course we are open to and value criticism as well. If you have any feedback, please let us know directly on [GitHub](https://github.com/opral/monorepo/discussions/1464)
 
 <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="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="[...] the switch between the sdk-js and paraglide has been pretty great! " author="albbus" icon="mdi:discord"></doc-comment>
 <doc-comment text="Thanks for all the great work @Samuel Stroschein" author="Willem" icon="mdi:discord"></doc-comment>
 </doc-comments>
 
+# Roadmap
+
+Of course, we're not done yet! We plan on adding the following features to Paraglide JS in the upcoming weeks:
+
+- [ ] Pluralization ([Join the Discussion](https://github.com/opral/monorepo/discussions/2025))
+- [ ] Formatting of numbers and dates ([Join the Discussion](https://github.com/opral/monorepo/discussions/992))
+- [ ] Markup Placeholders ([Join the Discussion](https://github.com/opral/monorepo/discussions/913))
+
 # Talks
 
 - [Svelte Summit Spring 2023](https://www.youtube.com/watch?v=Y6IbPfMU1xM)
 - [Svelte Summit Fall 2023](https://www.youtube.com/watch?v=-YES3CCAG90)
 - Web Zurich December 2023
 - [Svelte London January 2024](https://www.youtube.com/watch?v=eswNQiq4T2w&t=646s)
+
+# Pricing 
+
+<doc-dev-tool-pricing></doc-dev-tool-pricing>

package/default/index.d.ts

@@ -0,0 +1 @@
+export {}

package/default/index.js

@@ -0,0 +1 @@
+export {}

package/default/why.txt

@@ -0,0 +1,4 @@
+Paraglide is a CLI at it's heart & therefore doesn't have a real JS entry point. This 
+means that NPM doesn't show the TS icon on the package, which may lead people to believe
+it's not typesafe. To sidestep this we added an empty export. We don't think this is dishonest,
+because both paraglide's source code and it's output are fully typed. 

package/dist/cli/commands/init.d.ts

@@ -1,31 +1,39 @@
 import { Command } from "commander";
 import { type ProjectSettings } from "@inlang/sdk";
 import { Logger } from "../../services/logger/index.js";
+import { type Repository } from "@lix-js/client";
+import type { NodeishFilesystem } from "@lix-js/fs";
+type Context = {
+    logger: Logger;
+    repo: Repository;
+};
 export declare const initCommand: Command;
-export declare const initializeInlangProject: (logger: Logger) => Promise<string>;
+export declare const initializeInlangProject: (ctx: Context) => Promise<string>;
 export declare const maybeAddVsCodeExtension: (args: {
     projectPath: string;
-}, logger: Logger) => Promise<void>;
-export declare const addParaglideJsToDevDependencies: (logger: Logger) => Promise<void>;
-export declare const findExistingInlangProjectPath: () => Promise<string | undefined>;
+}, ctx: Context) => Promise<void>;
+export declare const addParaglideJsToDevDependencies: (ctx: Context) => Promise<void>;
+export declare const findExistingInlangProjectPath: (ctx: Context) => Promise<string | undefined>;
 export declare const existingProjectFlow: (args: {
     existingProjectPath: string;
-}, logger: Logger) => Promise<undefined>;
-export declare const createNewProjectFlow: (logger: Logger) => Promise<undefined>;
+}, ctx: Context) => Promise<undefined>;
+export declare const createNewProjectFlow: (ctx: Context) => Promise<undefined>;
 export declare const newProjectTemplate: ProjectSettings;
-export declare const checkIfPackageJsonExists: (logger: Logger) => Promise<undefined>;
-export declare const checkIfUncommittedChanges: (logger: Logger) => Promise<void>;
+export declare const checkIfPackageJsonExists: (ctx: Context) => Promise<undefined>;
+export declare const checkIfUncommittedChanges: (ctx: Context) => Promise<void>;
 export declare const addCompileStepToPackageJSON: (args: {
     projectPath: string;
-}, logger: Logger) => Promise<undefined>;
+}, ctx: Context) => Promise<undefined>;
 /**
  * Ensures that the moduleResolution compiler option is set to "bundler" or similar in the tsconfig.json.
  *
  * Otherwise, types defined in `package.exports` are not resolved by TypeScript. Leading to type
  * errors with Paraglide-JS.
  */
-export declare const maybeChangeTsConfigModuleResolution: (logger: Logger) => Promise<void>;
+export declare const maybeChangeTsConfigModuleResolution: (ctx: Context) => Promise<void>;
 /**
  * Paraligde JS compiles to JS with JSDoc comments. TypeScript doesn't allow JS files by default.
  */
-export declare const maybeChangeTsConfigAllowJs: (logger: Logger) => Promise<void>;
+export declare const maybeChangeTsConfigAllowJs: (ctx: Context) => Promise<void>;
+export declare function fileExists(filePath: string, nodeishFs: NodeishFilesystem): Promise<boolean>;
+export {};