@inlang/paraglide-js 1.3.6 → 1.3.7

package/README.md

@@ -1,33 +1,44 @@
-[<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)
 
-<!-- ![Paraglide JS header image](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/paraglide-js-header.png) -->
+# 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
 
-# Getting started
+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>
 
-### 1. Initialize paraglide-js
+# Getting started
 
-Initialize ParaglideJS whith:
+To use Paraglide stanadlone without a framework, run the following command:
 
 ```bash
 npx @inlang/paraglide-js@latest init
@@ -35,41 +46,36 @@ npx @inlang/paraglide-js@latest init
 
 This will:
 
-1. Install necessary dependencies
-2. Add the Paraglide compiler to your `build` script
-3. Set up configuration files
-
-### 2. Set up an adapter (optional)
-
-Adapters are framework-integrations for Paraglide. If you are using a framework, using an adapter is recommended , but not required.
-
-<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>
-
-#### Alternatively, [you can write your own adapter](#writing-an-adapter)
-
-# Usage
+- Install necessary dependencies
+- Generate a `messages/` folder where your translation files live
+- Add the Paraglide compiler to your `build` script
+- Create necessary configuration files
 
-Running your `build` script will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js.
+Running the paraglide compiler will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js.
 
-## Adding Messages
+## Adding and Editing Messages
 
-By default, paraglide expects your messages to be in `messages/{lang}.json`.
+Messages are stored in `messages/{lang}.json`. To add a message simply add a key-value pair. You can add parameters with curly braces.
 
-```json
+```diff
+// messages/en.json
 {
-	"hello": "Hello world!"
-	"loginHeader": "Hello {name}, please login to continue."
+	"$schema": "https://inlang.com/schema/inlang-message-format",
++ 	"greeting": "Hello {name}!"
 }
 ```
 
-## Using Messages
+Make sure to re-run the paraglide compiler after editing your messages.
+
+```
+npx @inlang/paraglide-js compile --project ./project.inlang
+```
+
+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.
 
-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.
+## Using Messages in Code
+
+After running the compiler, you can import messages with `import * as m from "./paraglide/messages"`.
 
 ```js
 import * as m from "./paraglide/messages.js"
@@ -79,7 +85,7 @@ m.hello() // Hello world!
 m.loginHeader({ name: "Samuel" }) // Hello Samuel, please login to continue.
 ```
 
-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.
 
 ```ts
 import * as m from "./paraglide/messages.js"
@@ -94,15 +100,14 @@ const season = {
 const msg = season["spring"]() // Hello spring!
 ```
 
-### Using the [Sherlock IDE Extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) (optional)
-
-[Sherlock](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) integrates with paraglide to give you the optimal dev-experience.
+## Configuration
 
-![VsCode screenshot showing Sherlock adding inlay hints next to messages and making an "extract message" code action available for hardcoded text](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/sherlock-preview.png)
+You can configure the languages you intend to support
 
-## Adding Languages
+### Languages
 
 You can declare which languages you support in `./project.inlang/settings.json`.
+
 ```json
 // project.inlang/settings.json
 {
@@ -268,21 +273,25 @@ An "Adapter" is a library that integrates with a framework's liefcycle and does
 This example adapts Paraglide to a fictitious fullstack framework.
 
 ```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"
 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 ...
 	}
 	setLanguageTag(() => detectLanguage(request))
 }
 
-if(isClient) {
+if (isClient) {
 	// On the client, the language tag can be resolved from
 	// the document's html lang tag.
 	setLanguageTag(() => document.documentElement.lang)
@@ -304,20 +313,6 @@ render((page) => (
 ))
 ```
 
-# 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
 
 Of course, we're not done yet! We plan on adding the following features to Paraglide JS soon:
@@ -325,6 +320,7 @@ Of course, we're not done yet! We plan on adding the following features to Parag
 - [ ] 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))
+- [ ] Even Smaller Output
 
 # Talks
 
@@ -337,7 +333,7 @@ Of course, we're not done yet! We plan on adding the following features to Parag
 
 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 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).
 
 If you are working with translators or designers you will find these tools useful:
 

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

@@ -1,4 +1,5 @@
 import { Command } from "commander";
+import { type InlangProject } from "@inlang/sdk";
 import { Logger } from "../../../services/logger/index.js";
 import { type Repository } from "@lix-js/client";
 type Context = {
@@ -6,7 +7,11 @@ type Context = {
     repo: Repository;
 };
 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: {
     projectPath: string;
 }, ctx: Context) => Promise<void>;
@@ -14,12 +19,13 @@ export declare const addParaglideJsToDevDependencies: (ctx: Context) => Promise<
 export declare const findExistingInlangProjectPath: (ctx: Context) => Promise<string | undefined>;
 export declare const existingProjectFlow: (args: {
     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>;
 export declare const checkIfUncommittedChanges: (ctx: Context) => Promise<void>;
 export declare const addCompileStepToPackageJSON: (args: {
     projectPath: string;
+    outdir: string;
 }, ctx: Context) => Promise<undefined>;
 /**
  * Ensures that the moduleResolution compiler option is set to "bundler" or similar in the tsconfig.json.

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

@@ -11,3 +11,4 @@ export declare function getNewProjectTemplate(): {
     };
 };
 export declare const DEFAULT_PROJECT_PATH = "./project.inlang";
+export declare const DEFAULT_OUTDIR = "./src/paraglide";

package/dist/index.js

@@ -57179,6 +57179,7 @@ function getNewProjectTemplate() {
   return structuredClone(newProjectTemplate);
 }
 var DEFAULT_PROJECT_PATH = "./project.inlang";
+var DEFAULT_OUTDIR = "./src/paraglide";
 
 // src/cli/commands/init/command.ts
 var ADAPTER_LINKS = {
@@ -57204,15 +57205,23 @@ var initCommand = new Command2().name("init").summary("Initializes inlang Paragl
   telemetry.capture({ event: "PARAGLIDE-JS init started" });
   await checkIfUncommittedChanges(ctx);
   await checkIfPackageJsonExists(ctx);
-  const projectPath = await initializeInlangProject(ctx);
+  const { projectPath, project } = await initializeInlangProject(ctx);
   telemetry.capture({ event: "PARAGLIDE-JS init project initialized" });
   await addParaglideJsToDevDependencies(ctx);
   telemetry.capture({ event: "PARAGLIDE-JS init added to devDependencies" });
-  await addCompileStepToPackageJSON({ projectPath }, ctx);
+  await addCompileStepToPackageJSON({ projectPath, outdir: DEFAULT_OUTDIR }, ctx);
   telemetry.capture({ event: "PARAGLIDE-JS init added compile commands" });
   await maybeChangeTsConfigModuleResolution(ctx);
   await maybeChangeTsConfigAllowJs(ctx);
   await maybeAddVsCodeExtension({ projectPath }, ctx);
+  try {
+    await executeCompilation2(project, DEFAULT_OUTDIR, ctx.repo.nodeishFs);
+    ctx.logger.success("Run paraglide compiler");
+  } catch (e) {
+    ctx.logger.warn(
+      "Failed to compile project automatically. You will need to run the compiler manually"
+    );
+  }
   telemetry.capture({ event: "PARAGLIDE-JS init finished" });
   const absoluteSettingsPath = nodePath.resolve(projectPath, "settings.json");
   const relativeSettingsFilePath = absoluteSettingsPath.replace(process.cwd(), ".");
@@ -57239,18 +57248,25 @@ var initCommand = new Command2().name("init").summary("Initializes inlang Paragl
   }
   successMessage += "\n\n";
   successMessage += dedent2`
-			For questions and feedback, visit https://github.com/inlang/monorepo/discussions.
+			For questions and feedback, visit 
+			https://github.com/opral/monorepo/discussions.
 		`;
   ctx.logger.box(successMessage);
 });
 var initializeInlangProject = async (ctx) => {
   const existingProjectPath = await findExistingInlangProjectPath(ctx);
   if (existingProjectPath) {
-    await existingProjectFlow({ existingProjectPath }, ctx);
-    return existingProjectPath;
+    const project = await existingProjectFlow({ existingProjectPath }, ctx);
+    return {
+      project,
+      projectPath: existingProjectPath
+    };
   } else {
-    await createNewProjectFlow(ctx);
-    return DEFAULT_PROJECT_PATH;
+    const project = await createNewProjectFlow(ctx);
+    return {
+      project,
+      projectPath: DEFAULT_PROJECT_PATH
+    };
   }
 };
 var maybeAddVsCodeExtension = async (args, ctx) => {
@@ -57342,6 +57358,7 @@ var existingProjectFlow = async (args, ctx) => {
     }
     process.exit(1);
   }
+  return project;
 };
 function parseLanguageTagInput(input) {
   const languageTags = input.replaceAll(/[,:\s]/g, " ").split(" ").filter(Boolean).map((tag2) => tag2.toLowerCase());
@@ -57419,6 +57436,7 @@ var createNewProjectFlow = async (ctx) => {
   } else {
     ctx.logger.success("Successfully created a new inlang project.");
   }
+  return project;
 };
 var checkIfPackageJsonExists = async (ctx) => {
   const packageJsonPath = await findPackageJson(ctx.repo.nodeishFs, process.cwd());
@@ -57464,14 +57482,14 @@ var addCompileStepToPackageJSON = async (args, ctx) => {
     pkg2.scripts = {};
   }
   if (!pkg2.scripts.postinstall) {
-    pkg2.scripts.postinstall = `paraglide-js compile --project ${args.projectPath}`;
+    pkg2.scripts.postinstall = `paraglide-js compile --project ${args.projectPath} --outdir ${args.outdir}`;
   } else if (pkg2.scripts.postinstall.includes("paraglide-js compile") === false) {
-    pkg2.scripts.postinstall = `paraglide-js compile --project ${args.projectPath} && ${pkg2.scripts.postinstall}`;
+    pkg2.scripts.postinstall = `paraglide-js compile --project ${args.projectPath} --outdir ${args.outdir} && ${pkg2.scripts.postinstall}`;
   }
   if (((_a = pkg2 == null ? void 0 : pkg2.scripts) == null ? void 0 : _a.build) === void 0) {
-    pkg2.scripts.build = `paraglide-js compile --project ${args.projectPath}`;
+    pkg2.scripts.build = `paraglide-js compile --project ${args.projectPath} --outdir ${args.outdir}`;
   } else if (((_b = pkg2 == null ? void 0 : pkg2.scripts) == null ? void 0 : _b.build.includes("paraglide-js compile")) === false) {
-    pkg2.scripts.build = `paraglide-js compile --project ${args.projectPath} && ${pkg2.scripts.build}`;
+    pkg2.scripts.build = `paraglide-js compile --project ${args.projectPath} --outdir ${args.outdir} && ${pkg2.scripts.build}`;
   } else {
     ctx.logger.warn(`The "build" script in the \`package.json\` already contains a "paraglide-js compile" command.
 
@@ -57600,6 +57618,14 @@ var maybeChangeTsConfigAllowJs = async (ctx) => {
     }
   }
 };
+async function executeCompilation2(project, outputDirectory, fs3) {
+  const output = await compile({
+    messages: project.query.messages.getAll(),
+    settings: project.settings(),
+    projectId: project.id
+  });
+  await writeOutput(outputDirectory, output, fs3);
+}
 async function promtStack() {
   return await promptSelection("Which tech stack are you using?", {
     options: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inlang/paraglide-js",
   "type": "module",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
@@ -63,8 +63,8 @@
     "vitest": "0.34.3",
     "@inlang/env-variables": "0.2.0",
     "@inlang/cross-sell-sherlock": "0.0.4",
-    "@inlang/sdk": "0.28.3",
     "@inlang/language-tag": "1.5.1",
+    "@inlang/sdk": "0.28.3",
     "@inlang/telemetry": "0.3.18",
     "@lix-js/client": "1.2.0",
     "@lix-js/fs": "1.0.0",