Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@inlang/paraglide-js

Package Overview
Dependencies
Maintainers
2
Versions
67
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@inlang/paraglide-js - npm Package Compare versions

Comparing version 1.3.7 to 1.4.0

dist/cli/commands/init/cli-utils.d.ts
dist/index-10a745f0.js

3

dist/cli/commands/compile/command.d.ts

@@ -1,2 +0,3 @@

import { Command } from "commander";
import { Command } from 'commander';
export declare const compileCommand: Command;

77

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

@@ -1,11 +0,12 @@

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 = {
import { CliStep } from './cli-utils.js';
import { Repository } from '@lix-js/client';
import { Logger } from '~/services/logger/index.js';
import { InlangProject } from '@inlang/sdk';
import { Command } from 'commander';
export declare const initCommand: Command;
export declare const initializeInlangProject: CliStep<{
repo: Repository;
logger: Logger;
repo: Repository;
};
export declare const initCommand: Command;
export declare const initializeInlangProject: (ctx: Context) => Promise<{
}, {
project: InlangProject;

@@ -15,17 +16,40 @@ /** Relative path to the project */

}>;
export declare const maybeAddVsCodeExtension: (args: {
projectPath: string;
}, 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: {
export declare const maybeAddVsCodeExtension: CliStep<{
repo: Repository;
logger: Logger;
project: InlangProject;
}, unknown>;
export declare const addParaglideJsToDevDependencies: CliStep<{
repo: Repository;
logger: Logger;
}, unknown>;
export declare const findExistingInlangProjectPath: (repo: Repository) => Promise<string | undefined>;
export declare const determineOutdir: CliStep<{
logger: Logger;
}, {
/** Relative path to the output directory */
outdir: string;
}>;
export declare const existingProjectFlow: (ctx: {
existingProjectPath: string;
}, 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: {
repo: Repository;
logger: Logger;
}) => Promise<InlangProject>;
export declare const createNewProjectFlow: (ctx: {
repo: Repository;
logger: Logger;
}) => Promise<InlangProject>;
export declare const checkIfPackageJsonExists: CliStep<{
logger: Logger;
repo: Repository;
}, unknown>;
export declare const checkIfUncommittedChanges: CliStep<{
logger: Logger;
}, unknown>;
export declare const addCompileStepToPackageJSON: CliStep<{
repo: Repository;
logger: Logger;
projectPath: string;
outdir: string;
}, ctx: Context) => Promise<undefined>;
}, unknown>;
/**

@@ -37,7 +61,12 @@ * Ensures that the moduleResolution compiler option is set to "bundler" or similar in the tsconfig.json.

*/
export declare const maybeChangeTsConfigModuleResolution: (ctx: Context) => Promise<void>;
export declare const maybeChangeTsConfigModuleResolution: CliStep<{
repo: Repository;
logger: Logger;
}, unknown>;
/**
* Paraligde JS compiles to JS with JSDoc comments. TypeScript doesn't allow JS files by default.
*/
export declare const maybeChangeTsConfigAllowJs: (ctx: Context) => Promise<void>;
export {};
export declare const maybeChangeTsConfigAllowJs: CliStep<{
repo: Repository;
logger: Logger;
}, unknown>;

3

dist/cli/main.d.ts

@@ -1,2 +0,3 @@

import { Command } from "commander";
import { Command } from 'commander';
export declare const cli: Command;

3

dist/compiler/compile.d.ts

@@ -1,2 +0,3 @@

import { ProjectSettings, type Message } from "@inlang/sdk";
import { ProjectSettings, Message } from '@inlang/sdk';
/**

@@ -3,0 +4,0 @@ * A compile function takes a list of messages and project settings and returns

3

dist/compiler/compileMessage.d.ts

@@ -1,2 +0,3 @@

import { LanguageTag, type Message } from "@inlang/sdk";
import { LanguageTag, Message } from '@inlang/sdk';
type Resource = {

@@ -3,0 +4,0 @@ index: string;

8

dist/index.d.ts

@@ -1,4 +0,4 @@

export { cli } from "./cli/main.js";
export { compile } from "./compiler/compile.js";
export { writeOutput } from "./services/file-handling/write-output.js";
export { Logger, type LoggerOptions } from "./services/logger/index.js";
export { cli } from './cli/main.js';
export { compile } from './compiler/compile.js';
export { writeOutput } from './services/file-handling/write-output.js';
export { Logger, type LoggerOptions } from './services/logger/index.js';

3

dist/services/environment/package.d.ts

@@ -1,2 +0,3 @@

import type { NodeishFilesystem } from "@lix-js/fs";
import { NodeishFilesystem } from '@lix-js/fs';
/**

@@ -3,0 +4,0 @@ * Attempts to find the package.json file that's closest to the current working directory.

3

dist/services/file-handling/exists.d.ts

@@ -1,2 +0,3 @@

import type { NodeishFilesystem } from "@lix-js/fs";
import { NodeishFilesystem } from '@lix-js/fs';
/**

@@ -3,0 +4,0 @@ * Returns true if the path exists (file or directory), false otherwise.

3

dist/services/file-handling/write-output.d.ts

@@ -1,2 +0,3 @@

import type { NodeishFilesystem } from "@lix-js/fs";
import { NodeishFilesystem } from '@lix-js/fs';
export declare function writeOutput(outputDirectory: string, output: Record<string, string>, fs: NodeishFilesystem): Promise<void>;

5

dist/services/telemetry/implementation.d.ts

@@ -1,3 +0,4 @@

import { PostHog } from "posthog-node";
import type { TelemetryEvents } from "./events.js";
import { TelemetryEvents } from './events.js';
import { PostHog } from 'posthog-node';
/**

@@ -4,0 +5,0 @@ * Telmetry for the CLI.

2

dist/services/telemetry/index.d.ts

@@ -1,1 +0,1 @@

export { telemetry } from "./implementation.js";
export { telemetry } from './implementation.js';

3

dist/utils/git.d.ts

@@ -1,2 +0,3 @@

import type { NodeishFilesystem } from "@lix-js/fs";
import { NodeishFilesystem } from '@lix-js/fs';
/**

@@ -3,0 +4,0 @@ * Gets the git origin url of the current repository.

21

package.json
{
"name": "@inlang/paraglide-js",
"type": "module",
"version": "1.3.7",
"version": "1.4.0",
"license": "Apache-2.0",

@@ -58,16 +58,17 @@ "publishConfig": {

"@vitest/coverage-v8": "0.34.3",
"cross-env": "^7.0.3",
"esbuild": "^0.20.2",
"memfs": "4.6.0",
"rollup": "3.29.1",
"typescript": "5.2.2",
"vite": "4.5.2",
"vite-plugin-dts": "^3.8.1",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "0.34.3",
"@inlang/cross-sell-sherlock": "0.0.4",
"@inlang/env-variables": "0.2.0",
"@inlang/cross-sell-sherlock": "0.0.4",
"@inlang/plugin-message-format": "2.1.1",
"@inlang/language-tag": "1.5.1",
"@inlang/sdk": "0.28.3",
"@inlang/telemetry": "0.3.18",
"@lix-js/client": "1.2.0",
"@inlang/sdk": "0.29.0",
"@inlang/telemetry": "0.3.19",
"@lix-js/fs": "1.0.0",
"@inlang/plugin-message-format": "2.1.1"
"@lix-js/client": "1.2.0"
},

@@ -85,4 +86,4 @@ "exports": {

"scripts": {
"dev": "node ./build.js",
"build": "cross-env NODE_ENV=production node ./build.js && tsc",
"dev": "vite build --mode development --watch",
"build": "vite build --mode production",
"test": "tsc --noEmit --emitDeclarationOnly false && vitest run --coverage ./src/**/*",

@@ -89,0 +90,0 @@ "lint": "eslint ./src --fix",

106

README.md

@@ -9,11 +9,11 @@ [<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)

<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-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 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.
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 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.
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.

@@ -31,8 +31,8 @@ <doc-links>

Here are a few comments we've received recently.
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 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="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>

@@ -43,3 +43,3 @@ </doc-comments>

To use Paraglide stanadlone without a framework, run the following command:
To use Paraglide standalone without a framework, run the following command:

@@ -54,6 +54,6 @@ ```bash

- Generate a `messages/` folder where your translation files live
- Add the Paraglide compiler to your `build` script
- Add the Paraglide compiler to your `build` script in `package.json`
- Create necessary configuration files
Running the paraglide compiler 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 will use in your app.

@@ -74,7 +74,7 @@ ## Adding and Editing Messages

```bash
npx @inlang/paraglide-js compile --project ./project.inlang --outdir ./src/paraglide
```
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.
If you are using Bundler, you can use one of the [Bundler Plugins](#usage-with-a-bundler) to recompile automatically.

@@ -108,19 +108,2 @@ ## Using Messages in Code

## Configuration
You can configure the languages you intend to support
### Languages
You can declare which languages you support in `./project.inlang/settings.json`.
```json
// project.inlang/settings.json
{
"languageTags": ["en", "de"]
}
```
Then create another `messages/{lang}.json` file and get translating!
## Setting the language

@@ -143,3 +126,3 @@

You will need to call `setLanguageTag` on both the server and the client, since they run in separate processes.
You will need to call `setLanguageTag` on both the server and the client since they run in separate processes.

@@ -150,3 +133,3 @@ ## Reacting to language changes

If you are using an adapter this is likely done for you.
If you are using a [framework-specific library](#use-it-with-your-favorite-framework) this is done for you.

@@ -165,6 +148,6 @@ ```js

There are a few things to know about `onSetLanguageTag()`:
A few things to know about `onSetLanguageTag()`:
- You can only register one listener. If you register a second listener it will throw an error.
- `setLanguageTag` shouldn't be used on the server.
- `onSetLanguageTag` shouldn't be used on the server.

@@ -190,5 +173,5 @@ ## Getting a message in a specific language

Paraglide consciously discourages lazy-loading translations since it seriously hurts
your web-vitals. Learn more about why lazy-loading is bad & what to do instead in [this blog post](https://inlang.com/g/mqlyfa7l/guide-lorissigrist-dontlazyload).
your Web Vitals. Learn more about why lazy-loading is bad & what to do instead in [our blog post on lazy-loading](https://inlang.com/g/mqlyfa7l/guide-lorissigrist-dontlazyload).
If you _really_ want to do it anway, you can lazily import the language-specific message files. Be careful with this.
If you want to do it anyway, lazily import the language-specific message files. Be careful with this.

@@ -202,3 +185,3 @@ ```ts

If you are using a bundler you should use the corresponding plugin. The plugin will keep your message-functions up-to-date by compiling whenever your messages change and before build.
If you are using a bundler you should use the corresponding plugin. The plugin will keep your Message Functions up-to-date by compiling whenever your messages change and before building your app.

@@ -211,5 +194,40 @@ <doc-links>

## Configuration
Most of the configuration is done in `./project.inlang/settings.json`, except for paraglide's output directory, which needs to be passed in when calling the compiler.
### Languages
You can declare which languages you support in the `languageTags` array.
```json
// project.inlang/settings.json
{
"languageTags": ["en", "de"]
}
```
Create the corresponding `messages/{lang}.json` files and get translating!
### Moving the Translation Files
If you want your language files to be in a different location you can change the `pathPattern` of the [Inlang-Message-Format plugin](https://inlang.com/m/reootnfj/plugin-inlang-messageFormat).
```diff
// project.inlang/settings.json
"plugin.inlang.messageFormat": {
- "pathPattern": "./messages/{languageTag}.json"
+ "pathPattern": "./i18n/{languageTag}.json"
},
```
### Lint Rules
If you're using the [Sherlock VS Code extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) you might see warnings about certain messages. Perhaps they're duplicates, perhaps they're missing in one language.
You can configure which lint-rules are active in `./project.inlang/settings.json`. Simply add or remove them from the `modules` array.
# Playground
Find examples for how to use paraglide on codesandbox or in [our GitHub repository](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide).
Find examples of how to use Paraglide on CodeSandbox or in [our GitHub repository](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide).

@@ -228,7 +246,7 @@ <doc-links>

This avoids many edge cases associated with reactivity, lazy-loading and namespacing that other i18n libraries have to work around.
This avoids many edge cases associated 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 JS architecture](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/architecture.svg)
![Diagram of the Paraglide Compiler Architecture](https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/architecture.svg)

@@ -271,3 +289,3 @@ Paraglide consists of four main parts:

By convention we import the compiled funcitions with a wildcard import.
By convention, we import the compiled functions with a wildcard import.

@@ -282,3 +300,3 @@ ```js

An "Adapter" is a library that integrates with a framework's liefcycle and does two things:
An "Adapter" is a library that integrates with a framework's lifecycle and does two things:

@@ -288,3 +306,3 @@ 1. Calls `setLanguageTag()` at appropriate times to set the language

This example adapts Paraglide to a fictitious fullstack framework.
This example adapts Paraglide to a fictitious full-stack framework.

@@ -350,5 +368,5 @@ ```tsx

Paraglide JS is part of the Inlang ecosystem and integrates nicely with all the other Inlang compatible tools.
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 VsCode extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension).
As a developer, you will love the [Sherlock VS Code extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension).

@@ -355,0 +373,0 @@ If you are working with translators or designers you will find these tools useful:

dist/cli/state.d.ts
dist/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc