```
├── .changeset/
├── README.md (100 tokens)
├── bright-timers-hear.md (100 tokens)
├── config.json (100 tokens)
├── sixty-meteors-appear.md
├── violet-rats-hug.md
├── .claude/
├── agents/
├── code-architect-reviewer.md (700 tokens)
├── commands/
├── analyze-bucket-type.md (600 tokens)
├── create-bucket-docs.md (1600 tokens)
├── .editorconfig (omitted)
├── .github/
├── ISSUE_TEMPLATE/
├── bug_report.yml (300 tokens)
├── documentation.yml (200 tokens)
├── feature_request.yml (100 tokens)
├── dependabot.yml
├── pull_request_template.md (100 tokens)
├── workflows/
├── docker.yml (200 tokens)
├── lingodotdev.yml (400 tokens)
├── pr-assignment-check.yml (300 tokens)
├── pr-check.yml (600 tokens)
├── pr-lint.yml (100 tokens)
├── pr-merge-conflict-check.yml (500 tokens)
├── pr-stale-check.yml (500 tokens)
├── release.yml (600 tokens)
├── .gitignore (100 tokens)
├── .husky/
├── commit-msg
├── .npmrc
├── .prettierrc
├── .syncpackrc.json
├── .vscode/
├── extensions.json
├── launch.json (200 tokens)
├── settings.json
├── CLAUDE.md (100 tokens)
├── CODE_OF_CONDUCT.md (1000 tokens)
├── CONTRIBUTING.md (500 tokens)
├── DEBUGGING.md (500 tokens)
├── Dockerfile (100 tokens)
├── LICENSE.md (2.2k tokens)
├── action.yml (400 tokens)
├── commitlint.config.js
├── composer.json (100 tokens)
├── content/
├── banner.compiler.png
├── banner.dark.png
├── banner.launch.png
├── demo/
├── new-compiler-next16/
├── .gitignore (100 tokens)
├── CHANGELOG.md (200 tokens)
├── README.md (300 tokens)
├── app/
├── .lingo/
├── cache/
├── de.json (700 tokens)
├── en.json (600 tokens)
├── es.json (700 tokens)
├── ru.json (600 tokens)
├── favicon.ico
├── globals.css (100 tokens)
├── layout.tsx (200 tokens)
├── page.tsx (600 tokens)
├── test/
├── page.tsx (700 tokens)
├── components/
├── ClientChildWrapper.tsx
├── Counter.tsx (100 tokens)
├── CounterClientChild.tsx (100 tokens)
├── ServerChild.tsx
├── eslint.config.mjs (100 tokens)
├── next.config.ts (100 tokens)
├── package.json (100 tokens)
├── postcss.config.mjs
├── public/
├── file.svg (100 tokens)
├── globe.svg (200 tokens)
├── next.svg (300 tokens)
├── vercel.svg
├── window.svg (100 tokens)
├── tsconfig.json (100 tokens)
├── new-compiler-vite-react-spa/
├── .cta.json
├── .gitignore
├── README.md (1600 tokens)
├── analyze-bundle.sh (400 tokens)
├── index.html (100 tokens)
├── package-lock.json (36.4k tokens)
├── package.json (200 tokens)
├── public/
├── favicon.ico
├── logo192.png
├── logo512.png
├── manifest.json (100 tokens)
├── robots.txt
├── tanstack-circle-logo.png
├── tanstack-word-logo-white.svg (3k tokens)
├── translations/
├── de.json (400 tokens)
├── en.json (300 tokens)
├── es.json (400 tokens)
├── fr.json (400 tokens)
├── src/
├── .lingo/
├── cache/
├── de.json (900 tokens)
├── en.json (900 tokens)
├── es.json (900 tokens)
├── fr.json (900 tokens)
├── components/
├── Header.tsx (300 tokens)
├── logo.svg (3.9k tokens)
├── main.tsx (200 tokens)
├── reportWebVitals.ts (100 tokens)
├── routeTree.gen.ts (400 tokens)
├── routes/
├── __root.tsx (100 tokens)
├── about.tsx (300 tokens)
├── index.tsx (300 tokens)
├── styles.css (100 tokens)
├── tsconfig.json (100 tokens)
├── vite.config.ts (200 tokens)
├── docs/
├── svelte-integration-guide.md (1200 tokens)
├── vue-integration-guide.md (1600 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── integrations/
├── directus/
├── .gitignore
├── CHANGELOG.md (500 tokens)
├── Dockerfile
├── README.md (900 tokens)
├── docker-compose.yml (100 tokens)
├── package.json (200 tokens)
├── src/
├── api.ts (1800 tokens)
├── app.ts (400 tokens)
├── index.spec.ts
├── tsconfig.json (100 tokens)
├── tsconfig.test.json
├── tsup.config.ts (100 tokens)
├── legacy/
├── cli/
├── CHANGELOG.md (7.8k tokens)
├── bin/
├── cli.mjs (200 tokens)
├── package.json (100 tokens)
├── readme.md
├── sdk/
├── CHANGELOG.md (1600 tokens)
├── README.md
├── index.d.ts (omitted)
├── index.js (100 tokens)
├── package.json (100 tokens)
├── mcp.md (400 tokens)
├── package.json (200 tokens)
├── packages/
├── cli/
├── CHANGELOG.md (20.5k tokens)
├── README.md (1300 tokens)
├── WATCH_MODE.md (1100 tokens)
├── assets/
├── failure.mp3
├── success.mp3
├── bin/
├── cli.mjs
├── demo/
├── ail/
├── example.ail (1300 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── android/
├── en/
├── example.xml (800 tokens)
├── es/
├── example.xml (400 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── csv/
├── example.csv (100 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── demo.spec.ts (500 tokens)
├── ejs/
├── en/
├── example.ejs (300 tokens)
├── es/
├── example.ejs (300 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── flutter/
├── en/
├── example.arb (300 tokens)
├── es/
├── example.arb (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── html/
├── en/
├── advanced-example.html (6.7k tokens)
├── example.html (300 tokens)
├── es/
├── advanced-example.html (7.1k tokens)
├── example.html (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── json-dictionary/
├── example.json (200 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── json/
├── en/
├── example.json (100 tokens)
├── es/
├── example.json (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── json5/
├── en/
├── example.json5 (200 tokens)
├── es/
├── example.json5 (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── jsonc/
├── en/
├── example.jsonc (100 tokens)
├── es/
├── example.jsonc (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── ru/
├── example.jsonc (100 tokens)
├── markdoc/
├── en/
├── example.markdoc (600 tokens)
├── es/
├── example.markdoc (700 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── markdown/
├── en/
├── example.md (200 tokens)
├── es/
├── example.md (200 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── mdx/
├── en/
├── example.mdx (300 tokens)
├── es/
├── example.mdx (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── mjml/
├── en/
├── example.mjml (600 tokens)
├── es/
├── example.mjml (600 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── php/
├── en/
├── example.php (200 tokens)
├── es/
├── example.php (200 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── po/
├── en/
├── example.po (200 tokens)
├── es/
├── example.po (200 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── properties/
├── en/
├── example.properties (100 tokens)
├── es/
├── example.properties (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── run_i18n.sh (100 tokens)
├── srt/
├── en/
├── example.srt (100 tokens)
├── es/
├── example.srt (100 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── twig/
├── en/
├── example.html.twig (500 tokens)
├── es/
├── example.html.twig (500 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── txt/
├── en/
├── example.txt
├── es/
├── example.txt
├── i18n.json
├── i18n.lock (omitted)
├── typescript/
├── en/
├── example.ts (100 tokens)
├── es/
├── example.ts (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── vtt/
├── en/
├── example.vtt (100 tokens)
├── es/
├── example.vtt (100 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── vue-json/
├── example.vue (200 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── xcode-strings/
├── en/
├── example.strings (400 tokens)
├── es/
├── example.strings (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── xcode-stringsdict/
├── en/
├── example.stringsdict (200 tokens)
├── es/
├── example.stringsdict (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── xcode-xcstrings-v2/
├── complex-example.xcstrings (5.2k tokens)
├── example.xcstrings (900 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── xcode-xcstrings/
├── example.xcstrings (300 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── xliff/
├── en/
├── example-v1.2.xliff (200 tokens)
├── example-v2.xliff (200 tokens)
├── es/
├── example-v1.2.xliff (300 tokens)
├── example-v2.xliff (200 tokens)
├── example.xliff (200 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── xml/
├── en/
├── example.xml (200 tokens)
├── es/
├── example.xml (100 tokens)
├── i18n.json
├── i18n.lock (omitted)
├── yaml-root-key/
├── en/
├── example.yml (200 tokens)
├── es/
├── example.yml (200 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── yaml/
├── en/
├── example.yml (100 tokens)
├── es/
├── example.yml (100 tokens)
├── i18n.json (100 tokens)
├── i18n.lock (omitted)
├── i18n.json (600 tokens)
├── i18n.lock (omitted)
├── package.json (1400 tokens)
├── src/
├── cli/
├── cmd/
├── auth.ts (300 tokens)
├── ci/
├── flows/
├── _base.ts (200 tokens)
├── in-branch.ts (800 tokens)
├── pull-request.ts (1500 tokens)
├── index.ts (900 tokens)
├── platforms/
├── _base.ts (500 tokens)
├── bitbucket.ts (800 tokens)
├── github.ts (700 tokens)
├── gitlab.ts (700 tokens)
├── index.ts (100 tokens)
├── cleanup.ts (1100 tokens)
├── config/
├── get.ts (300 tokens)
├── index.ts (100 tokens)
├── set.ts (300 tokens)
├── unset.ts (400 tokens)
├── i18n.ts (5.8k tokens)
├── init.ts (1600 tokens)
├── lockfile.ts (400 tokens)
├── login.ts (400 tokens)
├── logout.ts (200 tokens)
├── may-the-fourth.ts (500 tokens)
├── mcp.ts (400 tokens)
├── purge.ts (1600 tokens)
├── run/
├── _const.ts (100 tokens)
├── _types.ts (300 tokens)
├── _utils.ts (100 tokens)
├── execute.spec.ts (2.1k tokens)
├── execute.ts (2.4k tokens)
├── frozen.ts (1300 tokens)
├── index.ts (1300 tokens)
├── plan.ts (1000 tokens)
├── setup.ts (1000 tokens)
├── watch.ts (1000 tokens)
├── show/
├── _shared-key-command.ts (600 tokens)
├── config.ts (200 tokens)
├── files.ts (500 tokens)
├── ignored-keys.ts (200 tokens)
├── index.ts (100 tokens)
├── locale.ts (200 tokens)
├── locked-keys.ts (200 tokens)
├── status.ts (5k tokens)
├── constants.ts
├── index.spec.ts
├── index.ts (400 tokens)
├── loaders/
├── _types.ts (100 tokens)
├── _utils.ts (800 tokens)
├── ail.spec.ts (2.7k tokens)
├── ail.ts (900 tokens)
├── android.spec.ts (6.1k tokens)
├── android.ts (7.8k tokens)
├── csv.spec.ts (600 tokens)
├── csv.ts (600 tokens)
├── dato/
├── _base.ts (200 tokens)
├── _utils.ts (1700 tokens)
├── api.ts (1500 tokens)
├── extract.ts (1900 tokens)
├── filter.ts (400 tokens)
├── index.ts (200 tokens)
├── ejs.spec.ts (1200 tokens)
├── ejs.ts (1100 tokens)
├── ensure-key-order.spec.ts (600 tokens)
├── ensure-key-order.ts (200 tokens)
├── flat.spec.ts (1700 tokens)
├── flat.ts (1300 tokens)
├── flutter.spec.ts (700 tokens)
├── flutter.ts (200 tokens)
├── formatters/
├── _base.ts (200 tokens)
├── biome.ts (700 tokens)
├── index.ts (200 tokens)
├── prettier.ts (400 tokens)
├── html.ts (2.4k tokens)
├── ignored-keys-buckets.spec.ts (3.7k tokens)
├── ignored-keys.spec.ts (1100 tokens)
├── ignored-keys.ts (200 tokens)
├── index.spec.ts (23.7k tokens)
├── index.ts (3.7k tokens)
├── inject-locale.spec.ts (1300 tokens)
├── inject-locale.ts (400 tokens)
├── json-dictionary.spec.ts (700 tokens)
├── json-dictionary.ts (900 tokens)
├── json-sorting.test.ts (500 tokens)
├── json-sorting.ts (200 tokens)
├── json.ts (100 tokens)
├── json5.spec.ts (800 tokens)
├── json5.ts (100 tokens)
├── jsonc.spec.ts (1400 tokens)
├── jsonc.ts (2.1k tokens)
├── locked-keys.spec.ts (1100 tokens)
├── locked-keys.ts (100 tokens)
├── locked-patterns.spec.ts (1600 tokens)
├── locked-patterns.ts (600 tokens)
├── markdoc.spec.ts (3.5k tokens)
├── markdoc.ts (1400 tokens)
├── markdown.ts (400 tokens)
├── mdx.spec.ts (800 tokens)
├── mdx.ts (700 tokens)
├── mdx2/
├── _types.ts (100 tokens)
├── _utils.ts (100 tokens)
├── code-placeholder.spec.ts (6k tokens)
├── code-placeholder.ts (1200 tokens)
├── frontmatter-split.spec.ts (300 tokens)
├── frontmatter-split.ts (300 tokens)
├── localizable-document.spec.ts (200 tokens)
├── localizable-document.ts (100 tokens)
├── section-split.spec.ts (500 tokens)
├── section-split.ts (2.9k tokens)
├── sections-split-2.ts (200 tokens)
├── mjml.spec.ts (4.8k tokens)
├── mjml.ts (1800 tokens)
├── passthrough.ts (100 tokens)
├── php.ts (500 tokens)
├── plutil-json-loader.ts (100 tokens)
├── po/
├── _types.ts
├── index.spec.ts (2.3k tokens)
├── index.ts (1500 tokens)
├── properties.ts (200 tokens)
├── root-key.ts (100 tokens)
├── srt.ts (200 tokens)
├── sync.ts (100 tokens)
├── text-file.ts (400 tokens)
├── twig.spec.ts (3.2k tokens)
├── twig.ts (2.8k tokens)
├── txt.ts (100 tokens)
├── typescript/
├── cjs-interop.ts (500 tokens)
├── index.spec.ts (1700 tokens)
├── index.ts (2.1k tokens)
├── unlocalizable.spec.ts (500 tokens)
├── unlocalizable.ts (400 tokens)
├── variable/
├── index.spec.ts (1800 tokens)
├── index.ts (700 tokens)
├── vtt.ts (300 tokens)
├── vue-json.ts (200 tokens)
├── xcode-strings.spec.ts (1000 tokens)
├── xcode-strings.ts (200 tokens)
├── xcode-strings/
├── escape.ts (300 tokens)
├── parser.ts (400 tokens)
├── tokenizer.ts (900 tokens)
├── types.ts (100 tokens)
├── xcode-stringsdict.ts (200 tokens)
├── xcode-xcstrings-lock-compatibility.spec.ts (900 tokens)
├── xcode-xcstrings-v2.spec.ts (9k tokens)
├── xcode-xcstrings-v2.ts (2.6k tokens)
├── xcode-xcstrings.spec.ts (4k tokens)
├── xcode-xcstrings.ts (1200 tokens)
├── xliff.spec.ts (700 tokens)
├── xliff.ts (3.4k tokens)
├── xml.ts (300 tokens)
├── yaml.spec.ts (2.5k tokens)
├── yaml.ts (1700 tokens)
├── localizer/
├── _types.ts (200 tokens)
├── explicit.ts (1500 tokens)
├── index.ts (200 tokens)
├── lingodotdev-vnext.ts (1400 tokens)
├── lingodotdev.ts (400 tokens)
├── pseudo.ts (200 tokens)
├── processor/
├── _base.ts (100 tokens)
├── basic.ts (800 tokens)
├── index.ts (800 tokens)
├── lingo.ts (200 tokens)
├── utils/
├── auth.ts (500 tokens)
├── buckets.spec.ts (1000 tokens)
├── buckets.ts (1200 tokens)
├── cache.ts (400 tokens)
├── cloudflare-status.ts (200 tokens)
├── config.ts (200 tokens)
├── delta.spec.ts (1500 tokens)
├── delta.ts (700 tokens)
├── ensure-patterns.ts (500 tokens)
├── errors.ts (1300 tokens)
├── exec.spec.ts (700 tokens)
├── exec.ts (500 tokens)
├── exit-gracefully.spec.ts (1100 tokens)
├── exit-gracefully.ts (400 tokens)
├── exp-backoff.ts (100 tokens)
├── find-locale-paths.spec.ts (800 tokens)
├── find-locale-paths.ts (700 tokens)
├── fs.ts (100 tokens)
├── init-ci-cd.ts (700 tokens)
├── key-matching.spec.ts (700 tokens)
├── key-matching.ts (200 tokens)
├── lockfile.ts (500 tokens)
├── md5.ts
├── observability.ts (600 tokens)
├── plutil-formatter.spec.ts (500 tokens)
├── plutil-formatter.ts (400 tokens)
├── repository-id.spec.ts (800 tokens)
├── repository-id.ts (500 tokens)
├── settings.ts (1400 tokens)
├── ui.ts (900 tokens)
├── update-gitignore.ts (200 tokens)
├── compiler/
├── index.ts
├── locale-codes/
├── index.ts
├── react/
├── client.ts
├── index.ts
├── react-router.ts
├── rsc.ts
├── sdk/
├── index.ts
├── spec/
├── index.ts
├── utils/
├── pseudo-localize.spec.ts (700 tokens)
├── pseudo-localize.ts (700 tokens)
├── tests/
├── mock-storage.ts (200 tokens)
├── troubleshooting.md (100 tokens)
├── tsconfig.json (100 tokens)
├── tsconfig.test.json
├── tsup.config.ts (200 tokens)
├── types/
├── vtt.d.ts (omitted)
├── xliff.d.ts (omitted)
├── vitest.config.ts
├── compiler/
├── CHANGELOG.md (4k tokens)
├── README.md
├── package.json (400 tokens)
├── src/
├── _base.ts (1100 tokens)
├── _const.ts (100 tokens)
├── _loader-utils.spec.ts (1000 tokens)
├── _loader-utils.ts (700 tokens)
├── _utils.spec.ts (400 tokens)
├── _utils.ts (100 tokens)
├── babel-interop.ts (100 tokens)
├── client-dictionary-loader.ts (300 tokens)
├── i18n-directive.spec.ts (300 tokens)
├── i18n-directive.ts (100 tokens)
├── index.spec.ts (300 tokens)
├── index.ts (3k tokens)
├── jsx-attribute-flag.spec.ts (900 tokens)
├── jsx-attribute-flag.ts (200 tokens)
├── jsx-attribute-scope-inject.spec.ts (1000 tokens)
├── jsx-attribute-scope-inject.ts (700 tokens)
├── jsx-attribute-scopes-export.spec.ts (400 tokens)
├── jsx-attribute-scopes-export.ts (300 tokens)
├── jsx-attribute.spec.ts (200 tokens)
├── jsx-attribute.ts
├── jsx-fragment.spec.ts (1000 tokens)
├── jsx-fragment.ts (600 tokens)
├── jsx-html-lang.spec.ts (200 tokens)
├── jsx-html-lang.ts (200 tokens)
├── jsx-provider.spec.ts (200 tokens)
├── jsx-provider.ts (700 tokens)
├── jsx-remove-attributes.spec.ts (300 tokens)
├── jsx-remove-attributes.ts (200 tokens)
├── jsx-root-flag.spec.ts (300 tokens)
├── jsx-root-flag.ts (100 tokens)
├── jsx-scope-flag.spec.ts (700 tokens)
├── jsx-scope-flag.ts (100 tokens)
├── jsx-scope-inject.spec.ts (2.9k tokens)
├── jsx-scope-inject.ts (800 tokens)
├── jsx-scopes-export.spec.ts (300 tokens)
├── jsx-scopes-export.ts (400 tokens)
├── lib/
├── lcp/
├── api.spec.ts (1100 tokens)
├── api/
├── index.ts (3.8k tokens)
├── prompt.spec.ts (300 tokens)
├── prompt.ts (400 tokens)
├── provider-details.spec.ts (100 tokens)
├── provider-details.ts (400 tokens)
├── shots.ts (200 tokens)
├── xml2obj.spec.ts (600 tokens)
├── xml2obj.ts (800 tokens)
├── cache.spec.ts (2.2k tokens)
├── cache.ts (1200 tokens)
├── index.spec.ts (800 tokens)
├── index.ts (1200 tokens)
├── schema.ts (300 tokens)
├── server.spec.ts (3.1k tokens)
├── server.ts (1700 tokens)
├── lingo-turbopack-loader.ts (200 tokens)
├── react-router-dictionary-loader.ts (400 tokens)
├── rsc-dictionary-loader.ts (300 tokens)
├── utils/
├── ast-key.spec.ts (300 tokens)
├── ast-key.ts (400 tokens)
├── create-locale-import-map.spec.ts (400 tokens)
├── create-locale-import-map.ts (100 tokens)
├── env.spec.ts (200 tokens)
├── env.ts (100 tokens)
├── hash.spec.ts (200 tokens)
├── hash.ts (100 tokens)
├── index.spec.ts (800 tokens)
├── index.ts (1300 tokens)
├── invokations.spec.ts (600 tokens)
├── invokations.ts (400 tokens)
├── jsx-attribute-scope.ts (700 tokens)
├── jsx-attribute.spec.ts (900 tokens)
├── jsx-attribute.ts (800 tokens)
├── jsx-content-whitespace.spec.ts (600 tokens)
├── jsx-content.spec.ts (2k tokens)
├── jsx-content.ts (1400 tokens)
├── jsx-element.spec.ts (700 tokens)
├── jsx-element.ts (400 tokens)
├── jsx-expressions.test.ts (600 tokens)
├── jsx-expressions.ts (200 tokens)
├── jsx-functions.spec.ts (600 tokens)
├── jsx-functions.ts (400 tokens)
├── jsx-scope.spec.ts (700 tokens)
├── jsx-scope.ts (400 tokens)
├── jsx-variables.spec.ts (1100 tokens)
├── jsx-variables.ts (300 tokens)
├── llm-api-key.ts (500 tokens)
├── llm-api-keys.spec.ts (300 tokens)
├── locales.spec.ts (300 tokens)
├── locales.ts (300 tokens)
├── module-params.spec.ts (300 tokens)
├── module-params.ts
├── observability.spec.ts (300 tokens)
├── observability.ts (600 tokens)
├── rc.spec.ts (200 tokens)
├── rc.ts (100 tokens)
├── repository-id.ts (500 tokens)
├── tsconfig.json (100 tokens)
├── tsup.config.ts (100 tokens)
├── vitest.config.ts
├── locales/
├── CHANGELOG.md (500 tokens)
├── README.md (1200 tokens)
├── package.json (200 tokens)
├── src/
├── constants.ts (200 tokens)
├── index.ts (100 tokens)
├── names/
├── index.spec.ts (1900 tokens)
├── index.ts (700 tokens)
├── integration.spec.ts (1600 tokens)
├── loader.ts (900 tokens)
├── parser.spec.ts (700 tokens)
├── parser.ts (1100 tokens)
├── types.ts (200 tokens)
├── validation.spec.ts (1800 tokens)
├── validation.ts (1800 tokens)
├── tsconfig.json (100 tokens)
├── tsup.config.ts (100 tokens)
├── logging/
├── CHANGELOG.md (300 tokens)
├── package.json (200 tokens)
├── src/
├── constants.ts (100 tokens)
├── detect-project-path.spec.ts (1100 tokens)
├── detect-project-path.ts (200 tokens)
├── index.ts
├── init-logger.spec.ts (800 tokens)
├── init-logger.ts (500 tokens)
├── types.ts
├── tsconfig.json (100 tokens)
├── tsup.config.ts (100 tokens)
├── new-compiler/
├── .gitignore
├── CHANGELOG.md (500 tokens)
├── README.md (2.8k tokens)
├── Requirements.md (500 tokens)
├── docs/
├── TRANSLATION_ARCHITECTURE.md (800 tokens)
├── package.json (1200 tokens)
├── playwright.config.ts (300 tokens)
├── src/
├── __test-utils__/
├── mocks.ts (100 tokens)
├── index.ts
├── metadata/
├── manager.ts (1200 tokens)
├── plugin/
├── README.md
├── build-translator.ts (2.1k tokens)
├── cleanup.ts (100 tokens)
├── index.ts
├── next-compiler-loader.ts (500 tokens)
├── next-config-loader.ts (100 tokens)
├── next-locale-client-loader.ts (100 tokens)
├── next-locale-server-loader.ts (100 tokens)
├── next.ts (2k tokens)
├── transform/
├── TESTING.md (400 tokens)
├── TRANSFORMATION_PIPELINE.md (1800 tokens)
├── __snapshots__/
├── transform.test.ts.snap
├── babel-compat.ts (100 tokens)
├── index.ts (400 tokens)
├── metadata.ts (1800 tokens)
├── parse-override.ts (1300 tokens)
├── process-file.ts (4.7k tokens)
├── transform.test.ts (15.5k tokens)
├── use-i18n.ts
├── utils.test.ts (1000 tokens)
├── utils.ts (2.5k tokens)
├── unplugin.ts (2.5k tokens)
├── vite.ts (100 tokens)
├── webpack.ts (100 tokens)
├── react/
├── README.md (1200 tokens)
├── client/
├── index.ts (100 tokens)
├── useTranslation.ts (400 tokens)
├── next/
├── client.tsx (100 tokens)
├── cookie-locale-resolver.ts (300 tokens)
├── server.tsx (200 tokens)
├── server-only/
├── index.test.tsx (600 tokens)
├── index.ts (400 tokens)
├── translations.ts (800 tokens)
├── server/
├── ServerLingoProvider.tsx (100 tokens)
├── index.ts (100 tokens)
├── useTranslation.ts (500 tokens)
├── shared/
├── LingoContext.ts (300 tokens)
├── LingoProvider.tsx (2.8k tokens)
├── LocaleSwitcher.tsx (400 tokens)
├── __snapshots__/
├── render-rich-text.test.tsx.snap
├── render-rich-text.test.tsx (1100 tokens)
├── render-rich-text.tsx (500 tokens)
├── test-serializer.ts (300 tokens)
├── utils.ts (300 tokens)
├── types.ts (100 tokens)
├── translation-server/
├── README.md (1700 tokens)
├── cli.ts (3k tokens)
├── index.ts (100 tokens)
├── logger.ts (300 tokens)
├── translation-server.test.ts (1400 tokens)
├── translation-server.ts (5k tokens)
├── ws-events.ts (600 tokens)
├── translators/
├── README.md (1000 tokens)
├── USAGE.md (1400 tokens)
├── api.ts (200 tokens)
├── cache-factory.ts (200 tokens)
├── cache.ts (300 tokens)
├── index.ts (100 tokens)
├── lingo/
├── README.md (1400 tokens)
├── index.ts
├── model-factory.ts (1600 tokens)
├── prompt.ts (400 tokens)
├── provider-details.ts (700 tokens)
├── shots.ts (100 tokens)
├── translator.ts (1600 tokens)
├── local-cache.ts (800 tokens)
├── memory-cache.ts (300 tokens)
├── parse-xml.test.ts (600 tokens)
├── parse-xml.ts (800 tokens)
├── pluralization/
├── icu-validator.test.ts (600 tokens)
├── icu-validator.ts (300 tokens)
├── index.ts (100 tokens)
├── pattern-detector.test.ts (200 tokens)
├── pattern-detector.ts (200 tokens)
├── prompt.ts (500 tokens)
├── service.ts (2.2k tokens)
├── shots.ts (400 tokens)
├── types.ts (300 tokens)
├── pseudotranslator/
├── index.test.ts (400 tokens)
├── index.ts (800 tokens)
├── translation-service.ts (2.3k tokens)
├── types.ts (1300 tokens)
├── utils/
├── config-factory.ts (400 tokens)
├── hash.spec.ts (400 tokens)
├── hash.ts (200 tokens)
├── is-valid-locale.ts (100 tokens)
├── logger.ts (400 tokens)
├── observability.ts (600 tokens)
├── path-helpers.ts (300 tokens)
├── rc.ts (100 tokens)
├── repository-id.ts (500 tokens)
├── timeout.ts (300 tokens)
├── tracking-events.ts (200 tokens)
├── virtual/
├── code-generator.ts (400 tokens)
├── config.ts
├── locale/
├── client.ts (100 tokens)
├── server.ts (100 tokens)
├── widget/
├── lingo-dev-widget.ts (2.9k tokens)
├── types.ts (100 tokens)
├── tests/
├── .gitignore
├── QUICK_START.md (700 tokens)
├── README.md (800 tokens)
├── e2e/
├── shared/
├── development.test.ts (1300 tokens)
├── helpers/
├── fixture-integrity.ts (800 tokens)
├── locale-switcher.ts (200 tokens)
├── prepare-fixtures.ts (1200 tokens)
├── setup-fixture.ts (2.6k tokens)
├── tsconfig.json (100 tokens)
├── tsdown.config.ts (200 tokens)
├── vitest.config.ts (100 tokens)
├── react/
├── CHANGELOG.md (1200 tokens)
├── README.md
├── build.config.ts (200 tokens)
├── package.json (300 tokens)
├── src/
├── client/
├── attribute-component.spec.tsx (300 tokens)
├── attribute-component.tsx (100 tokens)
├── component.lingo-component.spec.tsx (300 tokens)
├── component.spec.tsx (200 tokens)
├── component.tsx (200 tokens)
├── context.spec.tsx (200 tokens)
├── context.ts (100 tokens)
├── index.ts
├── loader.spec.ts (200 tokens)
├── loader.ts (300 tokens)
├── locale-switcher.spec.tsx (400 tokens)
├── locale-switcher.tsx (400 tokens)
├── locale.spec.ts (400 tokens)
├── locale.ts (300 tokens)
├── provider.spec.tsx (900 tokens)
├── provider.tsx (1200 tokens)
├── utils.spec.ts (300 tokens)
├── utils.ts (300 tokens)
├── core/
├── attribute-component.spec.tsx (500 tokens)
├── attribute-component.tsx (100 tokens)
├── component.spec.tsx (3.3k tokens)
├── component.tsx (1500 tokens)
├── const.ts
├── get-dictionary.spec.ts (300 tokens)
├── get-dictionary.ts (300 tokens)
├── index.ts
├── react-router/
├── index.ts
├── loader.spec.ts (900 tokens)
├── loader.ts (600 tokens)
├── rsc/
├── attribute-component.tsx (200 tokens)
├── component.lingo-component.spec.tsx (300 tokens)
├── component.spec.tsx (200 tokens)
├── component.tsx (200 tokens)
├── index.ts
├── loader.spec.ts (200 tokens)
├── loader.ts (300 tokens)
├── provider.spec.tsx (200 tokens)
├── provider.tsx (400 tokens)
├── utils.spec.ts (400 tokens)
├── utils.ts (600 tokens)
├── test/
├── setup.ts
├── tsconfig.json (100 tokens)
├── vitest.config.ts (100 tokens)
├── sdk/
├── CHANGELOG.md (4.9k tokens)
├── README.md
├── package.json (200 tokens)
├── src/
├── abort-controller.specs.ts (1500 tokens)
├── index.spec.ts (1400 tokens)
├── index.ts (4k tokens)
├── tsconfig.json (100 tokens)
├── tsconfig.test.json
├── tsup.config.ts (100 tokens)
├── spec/
├── CHANGELOG.md (5.4k tokens)
├── README.md
├── package.json (200 tokens)
├── src/
├── config.spec.ts (600 tokens)
├── config.ts (2.9k tokens)
├── formats.ts (100 tokens)
├── index.spec.ts
├── index.ts
├── json-schema.ts (100 tokens)
├── locales.spec.ts (1100 tokens)
├── locales.ts (1700 tokens)
├── tsconfig.json (100 tokens)
├── tsconfig.test.json
├── tsup.config.bundled_rhh6rcllfv.mjs (14.9k tokens)
├── tsup.config.bundled_sgm3hgr33pq.mjs (14.9k tokens)
├── tsup.config.ts (100 tokens)
├── pnpm-lock.yaml (omitted)
├── pnpm-workspace.yaml
├── readme.md
├── readme/
├── ar.md (1300 tokens)
├── bho.md
├── bn.md (1300 tokens)
├── de.md (1400 tokens)
├── en.md
├── es.md (1400 tokens)
├── fa.md (1300 tokens)
├── fr.md (1400 tokens)
├── he.md (1300 tokens)
├── hi.md (1300 tokens)
├── in-as.md (1200 tokens)
├── in-gu.md (1200 tokens)
├── in-ml.md (1200 tokens)
├── in-mr.md (1100 tokens)
├── in-or.md (1200 tokens)
├── in-pa.md (1200 tokens)
├── in-si.md (1100 tokens)
├── in-ta.md (1000 tokens)
├── in-te.md (900 tokens)
├── it.md (1400 tokens)
├── ja.md (1200 tokens)
├── ko.md (1100 tokens)
├── od.md (1100 tokens)
├── or.md (1200 tokens)
├── pl.md (1400 tokens)
├── pt-BR.md (1300 tokens)
├── ru.md (1300 tokens)
├── tr.md (1400 tokens)
├── uk-UA.md (1400 tokens)
├── ur.md (1500 tokens)
├── zh-Hans.md (1100 tokens)
├── scripts/
├── docs/
├── README.md (200 tokens)
├── package.json (200 tokens)
├── src/
├── generate-cli-docs.ts (3.1k tokens)
├── generate-config-docs.ts (800 tokens)
├── json-schema/
├── markdown-renderer.test.ts (2.4k tokens)
├── markdown-renderer.ts (1100 tokens)
├── parser.test.ts (2000 tokens)
├── parser.ts (2.2k tokens)
├── types.ts (200 tokens)
├── utils.test.ts (500 tokens)
├── utils.ts (600 tokens)
├── tsconfig.json (100 tokens)
├── vitest.config.ts (100 tokens)
├── packagist-publish.php (600 tokens)
├── turbo.json (100 tokens)
```
## /.changeset/README.md
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
## /.changeset/bright-timers-hear.md
---
"react-router-app": patch
"@replexica/integration-directus": patch
"vite-project": patch
"@lingo.dev/_compiler": patch
"@lingo.dev/_locales": patch
"@lingo.dev/_logging": patch
"@lingo.dev/_react": patch
"adonis": patch
"next-app": patch
"@lingo.dev/_spec": patch
"lingo.dev": patch
"@lingo.dev/_sdk": patch
"docs": patch
"replexica": patch
"@replexica/sdk": patch
---
Update CLI header to conditionally link to ci or cli docs.
## /.changeset/config.json
```json path="/.changeset/config.json"
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": ["@changesets/changelog-github", { "repo": "lingodotdev/lingo.dev" }],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch"
}
```
## /.changeset/sixty-meteors-appear.md
---
"@lingo.dev/_spec": minor
"lingo.dev": minor
---
vNext localizer
## /.changeset/violet-rats-hug.md
---
"lingo.dev": patch
---
Add a pseudo-localization mode (--pseudo) to the CLI, including character mapping, recursive object handling, localizer implementation and tests
## /.claude/agents/code-architect-reviewer.md
---
name: code-architect-reviewer
description: Use this agent when you need expert code review focusing on architectural quality, clean code principles, and best practices. Examples: <example>Context: User has just written a new service class and wants architectural feedback. user: 'I just implemented a user authentication service. Can you review it?' assistant: 'I'll use the code-architect-reviewer agent to provide comprehensive architectural review of your authentication service.' <commentary>Since the user is requesting code review with architectural focus, use the code-architect-reviewer agent to analyze the code structure, design patterns, and clean code adherence.</commentary></example> <example>Context: User has refactored a complex module and wants validation. user: 'I refactored the payment processing module to improve maintainability' assistant: 'Let me use the code-architect-reviewer agent to evaluate your refactoring and ensure it follows clean architecture principles.' <commentary>The user has made architectural changes and needs expert validation, so use the code-architect-reviewer agent to assess the improvements.</commentary></example>
tools: Task, Bash, Glob, Grep, LS, ExitPlanMode, Read, Edit, MultiEdit, Write, NotebookRead, NotebookEdit, WebFetch, TodoWrite, WebSearch
---
You are an Expert Software Architect and Code Reviewer with deep expertise in clean code principles, software design patterns, and architectural best practices. Your mission is to provide thorough, actionable code reviews that elevate code quality and maintainability.
When reviewing code, you will:
**Architectural Analysis:**
- Evaluate overall code structure and organization
- Assess adherence to SOLID principles and design patterns
- Identify architectural smells and suggest improvements
- Review separation of concerns and modularity
- Analyze dependency management and coupling
**Clean Code Assessment:**
- Review naming conventions for clarity and expressiveness
- Evaluate function and class sizes (single responsibility)
- Check for code duplication and suggest DRY improvements
- Assess readability and self-documenting code practices
- Review error handling and edge case coverage
**Best Practices Validation:**
- Verify adherence to language-specific conventions
- Check for proper use of abstractions and interfaces
- Evaluate testing strategy and testability
- Review performance considerations and potential bottlenecks
- Assess security implications and vulnerabilities
**Review Process:**
1. First, understand the code's purpose and context
2. Analyze the overall architecture and design decisions
3. Examine implementation details for clean code violations
4. Identify specific improvement opportunities
5. Prioritize feedback by impact (critical, important, nice-to-have)
6. Provide concrete, actionable recommendations with examples
**Feedback Format:**
- Start with positive observations about good practices
- Organize feedback by category (Architecture, Clean Code, Performance, etc.)
- For each issue, explain the problem, why it matters, and how to fix it
- Provide code examples for suggested improvements when helpful
- End with a summary of key action items
**Quality Standards:**
- Be thorough but focus on the most impactful improvements
- Explain the reasoning behind each recommendation
- Consider maintainability, scalability, and team collaboration
- Balance perfectionism with pragmatism
- Encourage best practices while respecting project constraints
You are not just identifying problems—you are mentoring developers toward architectural excellence and clean code mastery.
## /.claude/commands/analyze-bucket-type.md
---
argument-hint: <bucket-type>
description: Analyze a bucket type implementation to identify all behaviors and configurations
---
Given the bucket type ID "$ARGUMENTS" (e.g., "json", "mdx", "typescript"), analyze the implementation code to identify ALL bucket-specific behaviors, configurations, and characteristics.
## Instructions
1. **Locate where this bucket type is processed** in the codebase by searching for the bucket type string. Start with the main loader composition/pipeline code.
2. **Trace the complete execution pipeline** for this bucket:
- List every function/loader in the processing chain, in order
- For each function/loader, read its implementation to understand:
- Input parameters it receives
- Transformations it performs on the data
- Output format it produces
- Any side effects or file operations
3. **Identify configuration parameters** by:
- Finding which variables are passed into the loaders (e.g., lockedKeys, ignoredKeys)
- Tracing these variables back to their source (configuration parsing)
- Determining if they're bucket-specific or universal
4. **Analyze file I/O behavior**:
- How are file paths constructed?
- Does the path pattern contain locale placeholders that would create separate files?
- What file operations are performed (read, write, create, delete)?
- Are files overwritten or are new files created?
- **IMPORTANT**: Note that "overwrites existing files completely" and "[locale] placeholder support" are mutually exclusive in practice:
- If a bucket type stores all locales in a single file (like CSV with columns per locale), it overwrites that single file and does NOT support `[locale]` placeholders
- If a bucket type creates separate files per locale using `[locale]` placeholders, each locale file is overwritten individually
- Clarify which pattern the bucket type follows
5. **Examine data transformation logic**:
- How is the file content parsed?
- What internal data structures are used?
- How is the data serialized back to file format?
- Are there any format-preserving mechanisms?
6. **Identify special behaviors** by examining:
- Conditional logic specific to this bucket
- Error handling unique to this format
- Any validation or normalization steps
- Interactions between multiple loaders in the pipeline
7. **Determine constraints and capabilities**:
- What data types/structures are supported?
- Are there any size or complexity limitations?
- What happens with edge cases (empty files, malformed content)?
## Required Depth
- Read the ACTUAL implementation of each loader/function
- Follow all function calls to understand the complete flow
- Don't make assumptions - verify behavior in the code
- Consider the order of operations in the pipeline
## Output Format
List all findings categorized as:
- Configuration parameters (with their types and defaults)
- Processing pipeline (ordered list of transformations)
- File handling behavior
- Data transformation characteristics
- Special capabilities or limitations
- Edge case handling
## /.claude/commands/create-bucket-docs.md
---
argument-hint: <analysis-output>
description: Create documentation for a Lingo.dev bucket type using analysis output
---
Using the bucket analysis output provided at the end of this prompt, create documentation for the specified bucket type in Lingo.dev CLI.
## Template Structure
````markdown
---
title: "[BUCKET_TYPE in title case]"
subtitle: "Translate [BUCKET_TYPE] files with Lingo.dev CLI"
---
## Introduction
[BUCKET_TYPE in title case] files are [BRIEF DESCRIPTION OF THE FILE FORMAT, ITS PURPOSE AND PRIMARY USE CASE]. [ONE SENTENCE ABOUT STRUCTURE OR KEY CHARACTERISTICS].
**Lingo.dev CLI** uses LLMs to translate your [BUCKET_TYPE] files across multiple locales. This guide shows you how to set up and run translations for [BUCKET_TYPE] files.
## Quickstart
### Step 1: Install Lingo.dev CLI
```bash
# Install globally
npm install -g lingo.dev@latest
# Or run directly with npx
npx lingo.dev@latest --version
```
### Step 2: Authenticate
Log in to your Lingo.dev account:
```bash
npx lingo.dev@latest login
```
This opens your browser for authentication. Your API key is stored locally for future use.
### Step 3: Initialize Project
Create your base configuration:
```bash
npx lingo.dev@latest init
```
This generates an `i18n.json` file with default settings.
### Step 4: Configure [BUCKET_TYPE] Bucket
Update your `i18n.json` to add [BUCKET_TYPE] support:
```json
{
"$schema": "https://lingo.dev/schema/i18n.json",
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es"]
},
"buckets": {
"[BUCKET_TYPE]": {
"include": ["[PATH_PATTERN]"]
}
}
}
```
[IF separate-files: **Note**: Keep `[locale]` as-is in the config — it's replaced with actual locale codes at runtime.]
[IF in-place: DO NOT include any note about [locale]]
### Step 5: Create File Structure
[FOR separate-files:]
Organize your [BUCKET_TYPE] files by locale:
```
[directory]/
├── en/
│ └── [filename] # Source file
└── es/ # Target directory (empty initially)
```
Place your source [BUCKET_TYPE] files in the `en/` directory. The `es/` directory can be empty — translated files will be created there automatically.
[FOR in-place:]
Place your [BUCKET_TYPE] file in your project:
```
[directory]/
└── [filename] # Contains all locales
```
This single file will contain translations for all configured locales.
### Step 6: Run Translation
Execute the translation command:
```bash
npx lingo.dev@latest i18n
```
The CLI will:
- Read [BUCKET_TYPE] files from your source locale
- Translate content to target locales using LLMs
- [FOR separate-files: Create new files in target directories (e.g., `es/[filename]`)]
- [FOR in-place: Update the file with translations for all configured locales]
[FOR separate-files: **Note**: Unlike some bucket types that modify files in place, the [BUCKET_TYPE] bucket creates separate files for each locale. Your source files remain unchanged.]
[FOR in-place: **Note**: The [BUCKET_TYPE] bucket modifies the source file directly, adding translations for all target locales to the same file.]
### Step 7: Verify Results
Check the translation status:
```bash
npx lingo.dev@latest status
```
[FOR separate-files: Review generated files in your target locale directory (`es/`).]
[FOR in-place: Review the updated [filename] file which now contains all locales.]
## [Feature Sections - ONLY include supported features]
[IF Locked Keys = YES:]
## Locked Content
The [BUCKET_TYPE] bucket supports locking specific keys to prevent translation:
```json
"[BUCKET_TYPE]": {
"include": ["[PATH_PATTERN]"],
"lockedKeys": ["key1", "key2", "nested/key3"]
}
```
This feature is available for [BUCKET_TYPE] and other structured format buckets where specific keys need to remain untranslated.
[IF Ignored Keys = YES:]
## Ignored Keys
The [BUCKET_TYPE] bucket supports ignoring keys entirely during processing:
```json
"[BUCKET_TYPE]": {
"include": ["[PATH_PATTERN]"],
"ignoredKeys": ["debug", "internal/*"]
}
```
Unlike locked keys which preserve content, ignored keys are completely skipped during the translation process.
[IF Inject Locale = YES:]
## Inject Locale
The [BUCKET_TYPE] bucket supports automatically injecting locale codes into specific keys:
```json
"[BUCKET_TYPE]": {
"include": ["[PATH_PATTERN]"],
"injectLocale": ["settings/language", "config/locale"]
}
```
These keys will automatically have their values replaced with the current locale code during translation.
[IF Translator Notes = YES:]
## Translator Notes
The [BUCKET_TYPE] bucket supports providing context hints to improve translation quality. [Describe how translator notes/hints work for this specific bucket type]
```[format]
[Show example of how to add translator notes in this format]
```
## Example
**Configuration** (`i18n.json`):
```json
{
"$schema": "https://lingo.dev/schema/i18n.json",
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es"]
},
"buckets": {
"[BUCKET_TYPE]": {
"include": ["[REALISTIC_PATH]"]
}
}
}
```
[FOR separate-files:]
**Input** (`[path]/en/[filename]`):
```[format]
[Source content in appropriate format]
```
**Output** (`[path]/es/[filename]`):
```[format]
[Translated content in appropriate format]
```
[FOR in-place:]
**Before translation** (`[path]/[filename]`):
```[format]
[Source content showing only English]
```
**After translation** (`[path]/[filename]`):
```[format]
[Same file now containing both English and Spanish]
```
````
## Critical Adaptation Rules
### For Separate-Files Buckets
1. **Always use `[locale]` placeholder** in paths
2. Step 5: Show source (`en/`) and target (`es/`) directories
3. Step 6: Explain "creates new files"
4. Include the [locale] note in Step 4
5. Example: Show input as `path/en/file.ext` and output as `path/es/file.ext`
### For In-Place Buckets
1. **Never use `[locale]` placeholder** anywhere in the document
2. **Never include the [locale] note** in Step 4
3. Step 5: Show single file path
4. Step 6: Explain "modifies the file directly"
5. Example: Use "Before translation" and "After translation" labels
6. Example: Show the same file path for both states
### Feature Sections
- Only include sections for features marked YES
- Locked Keys: Content is preserved unchanged
- Ignored Keys: Keys are skipped entirely during processing
- Inject Locale: Keys automatically get the locale code as their value
- Translator Notes: Format varies significantly by bucket type
### Path Conventions
Choose realistic paths for the bucket type:
- iOS: `ios/Resources/`, `[AppName]/`
- Android: `app/src/main/res/values-[locale]/`
- Web: `locales/`, `i18n/`, `translations/`
- Flutter: `lib/l10n/`
- Java: `src/main/resources/`
### Writing Rules
- Match the concise, direct tone of the template
- No marketing language or unnecessary adjectives
- Don't document what specifically gets translated
- Don't include generic features (exclude patterns, multiple directories)
- Focus only on bucket-specific behavior
- Use only `en` → `es` in all examples
- Keep examples minimal but representative
## Instructions
1. Parse the bucket analysis output provided in the arguments to determine:
- Bucket type name
- File organization (separate-files if uses [locale] placeholder, in-place if not)
- Supported features (lockedKeys, ignoredKeys, injectLocale, hints/notes)
- Typical file extension and paths
2. Based on the analysis, fill in the template with appropriate:
- Description of the file format
- Realistic path patterns
- Only the features that are actually supported
- Appropriate examples for the format
3. Generate the complete Markdown documentation following the specifications exactly.
---
## Bucket Analysis Output
$ARGUMENTS
## /.github/ISSUE_TEMPLATE/bug_report.yml
```yml path="/.github/ISSUE_TEMPLATE/bug_report.yml"
name: 🐛 Bug Report
description: Report a bug with detailed reproduction steps
body:
- type: markdown
attributes:
value: |
**Reproducibility is critical.** Provide exact steps so maintainers can reproduce instantly.
- type: textarea
id: description
attributes:
label: What's happening?
placeholder: Describe the bug in 1-2 sentences
validations:
required: true
- type: textarea
id: reproduction
attributes:
label: Exact Reproduction Steps
description: Copy-pasteable commands only
placeholder: |
1. Run command
2. Change config/file
3. Run another command
4. See error
value: |
1.
2.
3.
validations:
required: true
- type: textarea
id: expected
attributes:
label: Expected
placeholder: What should happen
validations:
required: true
- type: textarea
id: actual
attributes:
label: Actual
placeholder: What actually happens
validations:
required: true
- type: textarea
id: visuals
attributes:
label: Screenshots/Videos
description: "**REQUIRED** - Visual proof of the issue"
placeholder: Drag screenshot/screencast here
validations:
required: true
```
## /.github/ISSUE_TEMPLATE/documentation.yml
```yml path="/.github/ISSUE_TEMPLATE/documentation.yml"
name: 📚 Documentation Issue
description: Report docs problems with screenshots
body:
- type: dropdown
id: type
attributes:
label: Issue Type
options:
- Broken link
- Typo/grammar
- Missing docs
- Outdated content
- Unclear explanation
validations:
required: true
- type: input
id: url
attributes:
label: URL
placeholder: "https://lingo.dev/..."
validations:
required: true
- type: textarea
id: issue
attributes:
label: Issue
placeholder: What's wrong?
validations:
required: true
- type: textarea
id: fix
attributes:
label: Fix
placeholder: How to fix it?
- type: textarea
id: screenshot
attributes:
label: Screenshot
description: "**REQUIRED** - Show the issue"
placeholder: Drag screenshot here
validations:
required: true
```
## /.github/ISSUE_TEMPLATE/feature_request.yml
```yml path="/.github/ISSUE_TEMPLATE/feature_request.yml"
name: ✨ Feature Request
description: Suggest a feature with clear use case
body:
- type: textarea
id: problem
attributes:
label: Problem
placeholder: What can't you do today?
validations:
required: true
- type: textarea
id: solution
attributes:
label: Solution
placeholder: How should it work?
validations:
required: true
- type: textarea
id: visuals
attributes:
label: Visuals
description: "**REQUIRED** - Show mockup/example"
placeholder: Drag screenshot/diagram here
validations:
required: true
- type: textarea
id: alternatives
attributes:
label: Workarounds
placeholder: What have you tried?
```
## /.github/dependabot.yml
```yml path="/.github/dependabot.yml"
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
```
## /.github/pull_request_template.md
## Summary
[One sentence: what this PR does]
## Changes
- [Key change 1]
- [Key change 2]
## Testing
**Business logic tests added:**
- [ ] [Describe test 1 - what behavior it validates]
- [ ] [Describe test 2 - what edge case it covers]
- [ ] All tests pass locally
## Visuals
**Required for UI/UX changes:**
- [ ] Before/after screenshots attached
- [ ] Video demo for interactions (< 30s)
## Checklist
- [ ] Changeset added (if version bump needed)
- [ ] Tests cover business logic (not just happy path)
- [ ] No breaking changes (or documented below)
Closes #[issue-number]
## /.github/workflows/docker.yml
```yml path="/.github/workflows/docker.yml"
name: Build Docker Image
on:
workflow_dispatch:
push:
paths:
- Dockerfile
branches:
- main
jobs:
docker:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Login to Docker Hub
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_PASSWORD }}
- name: Set up QEMU
uses: docker/setup-qemu-action@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Build Docker image and push
uses: docker/build-push-action@v6
with:
push: true
platforms: linux/amd64
context: ./
file: ./Dockerfile
tags: ${{ secrets.DOCKERHUB_USERNAME }}/ci-action:latest
```
## /.github/workflows/lingodotdev.yml
```yml path="/.github/workflows/lingodotdev.yml"
name: "Lingo.dev"
on:
workflow_dispatch:
inputs:
version:
description: "Lingo.dev CLI version"
default: "latest"
required: false
pull-request:
description: "Create a pull request with the changes"
type: boolean
default: false
required: false
commit-message:
description: "Commit message"
default: "feat: update translations via @LingoDotDev"
required: false
pull-request-title:
description: "Pull request title"
default: "feat: update translations via @LingoDotDev"
required: false
working-directory:
description: "Working directory"
default: "."
required: false
process-own-commits:
description: "Process commits made by this action"
type: boolean
default: false
required: false
parallel:
description: "Run in parallel mode"
type: boolean
default: false
required: false
jobs:
lingodotdev:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Lingo.dev
uses: ./
with:
api-key: ${{ secrets.LINGODOTDEV_API_KEY }}
version: ${{ inputs.version }}
pull-request: ${{ inputs['pull-request'] }}
commit-message: ${{ inputs['commit-message'] }}
pull-request-title: ${{ inputs['pull-request-title'] }}
working-directory: ${{ inputs['working-directory'] }}
process-own-commits: ${{ inputs['process-own-commits'] }}
parallel: ${{ inputs.parallel }}
env:
GH_TOKEN: ${{ github.token }}
```
## /.github/workflows/pr-assignment-check.yml
```yml path="/.github/workflows/pr-assignment-check.yml"
name: PR Assignment Check
on:
pull_request_target:
types: [opened, reopened, edited]
workflow_dispatch:
inputs:
pr_number:
description: "PR number to check"
required: true
type: number
jobs:
check:
runs-on: ubuntu-latest
permissions:
contents: read
issues: read
pull-requests: write
id-token: write
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: anthropics/claude-code-action@v1
with:
anthropic_api_key: ${{ secrets.CLAUDE_CODE_API_KEY }}
github_token: ${{ secrets.GITHUB_TOKEN }}
show_full_output: true
prompt: |
EXEMPT USERS: @maxprilutskiy, @vrcprl, @davidturnbull, @monicabe, @sumitsaurabh927, @AleksandrSl (skip all checks if PR author is one of these)
Close this PR if:
1. It doesn't reference any issue (no "Closes #123", "Fixes #456", etc.)
2. OR it references an issue where the PR author is NOT assigned
When closing, leave a brief, friendly comment (2-3 sentences, no emojis) explaining:
- They need to reference an assigned issue or get assigned first
- They should find unassigned issues to work on
Otherwise, do nothing.
claude_args: |
--allowedTools "Bash,Read,Grep,Glob"
```
## /.github/workflows/pr-check.yml
```yml path="/.github/workflows/pr-check.yml"
name: Check PR
on:
workflow_dispatch:
pull_request:
types:
- opened
- edited
- synchronize
branches:
- main
jobs:
check:
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- name: Checkout
uses: actions/checkout@v4
with:
ref: ${{github.event.pull_request.head.sha}}
fetch-depth: 0
- name: Check for [skip i18n]
run: |
COMMIT_MESSAGE=$(git log -1 --pretty=%B)
if echo "$COMMIT_MESSAGE" | grep -iq '\[skip i18n\]'; then
echo "Skipping i18n checks due to [skip i18n] in commit message."
exit 0
fi
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Install pnpm
uses: pnpm/action-setup@v4
id: pnpm-install
with:
version: 9.12.3
run_install: false
- name: Configure pnpm cache
id: pnpm-cache
run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install deps
run: pnpm install
- name: Setup
run: |
pnpm turbo telemetry disable
- name: Configure Turbo cache
uses: dtinth/setup-github-actions-caching-for-turbo@v1
- name: Build
run: pnpm turbo build --force
- name: Test
run: pnpm turbo test --force
- name: Require changeset to be present in PR
if: github.event.pull_request.user.login != 'dependabot[bot]'
run: pnpm changeset status --since origin/main
compiler-e2e:
needs: check
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
ref: ${{github.event.pull_request.head.sha}}
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: "22"
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 9.12.3
- name: Configure pnpm cache
id: pnpm-cache
run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Install Playwright Browsers
run: pnpm exec playwright install chromium --with-deps
working-directory: packages/new-compiler
- name: Configure Turbo cache
uses: dtinth/setup-github-actions-caching-for-turbo@v1
- name: Run E2E tests
run: pnpm turbo run test:e2e --filter=./packages/new-compiler
```
## /.github/workflows/pr-lint.yml
```yml path="/.github/workflows/pr-lint.yml"
name: Lint PR
on:
pull_request:
types:
- opened
- edited
- synchronize
jobs:
main:
name: Validate PR title
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: read
steps:
- uses: amannn/action-semantic-pull-request@v5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```
## /.github/workflows/pr-merge-conflict-check.yml
```yml path="/.github/workflows/pr-merge-conflict-check.yml"
name: Check for Merge Conflicts
on:
pull_request:
types: [opened, synchronize, reopened]
# Also run when the base branch is updated
push:
branches:
- main
jobs:
check-merge-conflict:
runs-on: ubuntu-latest
if: github.event_name == 'pull_request'
steps:
- name: Check for merge conflicts
uses: actions/github-script@v7
with:
script: |
const pr = context.payload.pull_request;
// Get the PR details to check mergeable state
const { data: pullRequest } = await github.rest.pulls.get({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: pr.number
});
console.log(`PR #${pr.number} mergeable state: ${pullRequest.mergeable_state}`);
console.log(`PR #${pr.number} mergeable: ${pullRequest.mergeable}`);
// The mergeable field can be: true, false, or null (if GitHub is still calculating)
if (pullRequest.mergeable === null) {
console.log('GitHub is still calculating mergeable status. Waiting...');
// Wait a bit and try again
await new Promise(resolve => setTimeout(resolve, 5000));
const { data: updatedPR } = await github.rest.pulls.get({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: pr.number
});
console.log(`Updated mergeable state: ${updatedPR.mergeable_state}`);
console.log(`Updated mergeable: ${updatedPR.mergeable}`);
if (updatedPR.mergeable === false) {
core.setFailed(`❌ PR #${pr.number} has merge conflicts that must be resolved.`);
} else if (updatedPR.mergeable === null) {
core.warning('⚠️ Could not determine merge conflict status. GitHub may still be calculating.');
} else {
console.log(`✅ PR #${pr.number} has no merge conflicts.`);
}
} else if (pullRequest.mergeable === false) {
core.setFailed(`❌ PR #${pr.number} has merge conflicts that must be resolved.`);
} else {
console.log(`✅ PR #${pr.number} has no merge conflicts.`);
}
```
## /.github/workflows/pr-stale-check.yml
```yml path="/.github/workflows/pr-stale-check.yml"
name: PR Stale Check
on:
schedule:
- cron: "0 0 * * 1" # Every Monday at midnight UTC
workflow_dispatch:
jobs:
check-stale:
runs-on: ubuntu-latest
permissions:
contents: read
issues: read
pull-requests: write
id-token: write
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: anthropics/claude-code-action@v1
with:
anthropic_api_key: ${{ secrets.CLAUDE_CODE_API_KEY }}
github_token: ${{ secrets.GITHUB_TOKEN }}
show_full_output: true
prompt: |
EXEMPT USERS: @maxprilutskiy, @vrcprl, @davidturnbull, @monicabe, @sumitsaurabh927, @AleksandrSl
Check all open pull requests and for each PR:
1. Analyze the conversation to determine:
- Are there unaddressed comments/requests from maintainers?
- Has the PR author responded or made updates recently?
- Is the ball in the author's court or are they waiting on maintainers?
- Has a stale reminder been posted already (look for "still working on this" or similar language in bot comments)?
2. Decision logic:
- If author is waiting on maintainers: SKIP
- If author responded recently (within 7 days): SKIP
- If PR author is in exempt users list: SKIP
- If there are unaddressed maintainer comments AND:
- No stale reminder posted yet: POST REMINDER
- Stale reminder was posted >7 days ago with no response: CLOSE PR
3. Reminder message template (friendly, concise, no emojis):
"Hey @author! Just checking in - are you still working on this PR? We noticed there are some comments that may need addressing. If you need more time, no problem! Just let us know. If we don't hear back within a week, we'll close this to keep the repo tidy, but you can always reopen when ready."
4. Close message template (friendly, concise, no emojis):
"Closing this PR as stale to keep the repo clean. Feel free to reopen or create a new PR once you're ready to continue. Thanks for your contribution!"
claude_args: |
--allowedTools "Bash,Read,Grep,Glob"
```
## /.github/workflows/release.yml
```yml path="/.github/workflows/release.yml"
name: Release
on:
workflow_dispatch:
inputs:
skip_lingo:
description: "Skip Lingo.dev step"
type: "boolean"
default: false
push:
branches:
- main
jobs:
release:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
id-token: write # Required for npm Trusted Publishing with OIDC
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Debug Permissions
run: |
ls -la
ls -la integrations/
ls -la integrations/directus/
- name: Check for [skip i18n]
run: |
COMMIT_MESSAGE=$(git log -1 --pretty=%B)
if echo "$COMMIT_MESSAGE" | grep -iq '\[skip i18n\]'; then
echo "Skipping i18n checks due to [skip i18n] in commit message."
exit 0
fi
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Upgrade npm for OIDC support
run: npm install -g npm@11.5.1
- name: Install pnpm
uses: pnpm/action-setup@v4
id: pnpm-install
with:
version: 9.12.3
run_install: false
- name: Configure pnpm cache
id: pnpm-cache
run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install deps
run: pnpm install
- name: Lingo.dev
if: ${{ !inputs.skip_lingo }}
uses: ./
with:
api-key: ${{ secrets.LINGODOTDEV_API_KEY }}
pull-request: true
parallel: true
env:
GH_TOKEN: ${{ github.token }}
- name: Setup
run: |
pnpm turbo telemetry disable
- name: Configure Turbo cache
uses: dtinth/setup-github-actions-caching-for-turbo@v1
- name: Build
run: pnpm turbo build --force
- name: Test
run: pnpm turbo test --force
- name: Import GPG key
uses: crazy-max/ghaction-import-gpg@v6
with:
gpg_private_key: ${{ secrets.GHA_BOT_GPG }}
git_user_signingkey: true
git_commit_gpgsign: true
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
title: "chore: bump package versions"
version: pnpm changeset version
publish: pnpm changeset publish
commit: "chore: bump package version"
setupGitUser: false
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_CONFIG_PROVENANCE: true
```
## /.gitignore
```gitignore path="/.gitignore"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# Dependencies
node_modules
.pnp
.pnp.js
# Local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# Testing
coverage
.idea
# Turbo
.turbo
# Vercel
.vercel
# Build Outputs
.next/
out/
build
dist
# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Misc
.DS_Store
*.pem
i18n.cache
```
## /.husky/commit-msg
```husky/commit-msg path="/.husky/commit-msg"
pnpm commitlint --edit $1
```
## /.npmrc
```npmrc path="/.npmrc"
engine-strict=true
```
## /.prettierrc
```prettierrc path="/.prettierrc"
{
"trailingComma": "all",
"singleQuote": false,
"semi": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}
```
## /.syncpackrc.json
```json path="/.syncpackrc.json"
{
"semverGroups": [
{
"dependencies": ["**"],
"dependencyTypes": ["prod", "dev"],
"range": ""
}
]
}
```
## /.vscode/extensions.json
```json path="/.vscode/extensions.json"
{
"recommendations": ["esbenp.prettier-vscode", "bradlc.vscode-tailwindcss"]
}
```
## /.vscode/launch.json
```json path="/.vscode/launch.json"
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to CLI",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "node",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/packages/cli/build/**/*.mjs"],
"resolveSourceMapLocations": [
"${workspaceFolder}/packages/cli/build/**/*.mjs",
"!**/node_modules/**"
],
"remoteRoot": "${workspaceFolder}/packages/cli",
"localRoot": "${workspaceFolder}/packages/cli",
"port": 9229
}
]
}
```
## /.vscode/settings.json
```json path="/.vscode/settings.json"
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll": "always"
}
}
```
## /CLAUDE.md
# Extremely important instructions for Claude
## FYI
- We're in a pnpm + turbo monorepo
## Tools
- Must use `pnpm` as package manager
## Testing
- When you add tests - make sure they pass
## Changesets
- Every PR must include a changeset
- Create changeset: `pnpm new` from repo root
- For changes that don't need a release (e.g., README updates): `pnpm new:empty`
## /CODE_OF_CONDUCT.md
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
support@lingo.dev.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
## /CONTRIBUTING.md
# Contributing to Lingo.dev
Thank you for contributing! We maintain high standards for code quality and design.
**IMPORTANT: Every requirement below is critical. If any requirement is not met, your issue or PR will be automatically rejected by the bots.**
## Before You Start
1. **Find or create an issue** - Search [existing issues](https://github.com/lingodotdev/lingo.dev/issues) first
2. **Wait to be assigned** - Comment on the issue and wait for assignment before starting work. Assignment priority:
- First: Issue creator
- Second: First volunteer commenter
- **Submitting a PR without assignment will result in automatic rejection**
3. **Discuss approach** - Align on implementation details before coding
## Pull Request Requirements
### Must Have
- **Linked issue** - Reference the issue in your PR (e.g., "Closes #123")
- **Valid title** - Use [Conventional Commits](https://www.conventionalcommits.org/): `feat:`, `fix:`, `chore:`, etc.
- **Tests** - Unit tests for main code paths
- **Changeset** - Run `pnpm new` from repo root
- **Passing checks** - All CI checks must pass
### Standards
- **Surgical PRs** - One clear objective per PR
- **Clean code** - Elegant, well-reasoned implementation
- **Meaningful changes** - No low-effort, cosmetic, or trivial edits made only to gain contributions
- **No duplicate work** - Check if someone else already opened a PR
## Local Development
### Prerequisites
- Node.js 18+
- pnpm (`npm install -g pnpm`)
- AI API key (Groq, Google, or Mistral) - [setup guide](https://lingo.dev/en/cli/quick-start#step-2-authentication)
### Setup
```bash
git clone https://github.com/lingodotdev/lingo.dev
cd lingo.dev
pnpm install
pnpm turbo build
```
### Run Locally
```bash
# Terminal 1 - watch CLI changes
cd packages/cli
pnpm run dev
# Terminal 2 - test CLI
cd packages/cli
pnpm lingo.dev --help
```
### Run Checks
```bash
pnpm install --frozen-lockfile
pnpm turbo build --force
pnpm turbo test --force
pnpm changeset status --since origin/main
```
## Review Process
- Automated code review by AI bots provides suggestions
- Human reviewers make final decisions
- **Address maintainer comments promptly** - PRs with unaddressed comments will be closed to keep the repo clean. Feel free to recreate once issues are resolved.
Questions? Join our [Discord](https://lingo.dev/go/discord)!
## /DEBUGGING.md
# Debugging the Lingo.dev Compiler
Lingo.dev Compiler is in active development. We use it ourselves and strive to provide the best developer experience for all supported frameworks. However, every project is unique and may present its own challenges.
This guide will help you debug the Compiler locally in your project.
---
## Getting Started: Local Setup
### 1. Clone, Install, and Build
```bash
git clone git@github.com:lingodotdev/lingo.dev.git
cd lingo.dev
pnpm install
pnpm build
```
Lingo.dev uses [pnpm](https://pnpm.io/) as its package manager.
### 2. Link the CLI Package
In the `lingo.dev/packages/cli` directory, link the CLI package using your project's package manager:
```bash
npm link
# or
yarn link
# or
pnpm link
```
Use the package manager that matches your project (npm, yarn, or pnpm).
### 3. Watch for Changes
To enable live-reloading for development, run the following in the root of the `lingo.dev` repo:
```bash
pnpm --filter "./packages/{compiler,react}" dev
```
---
## Using Your Local Build in Your Project
### 1. Install Lingo.dev
If you haven't already, add Lingo.dev to your project:
```bash
npm install lingo.dev
```
For full setup and configuration, see the [Lingo.dev Compiler docs](https://lingo.dev/compiler).
### 2. Link Your Local Library
```bash
npm link lingo.dev
```
### 3. Build Your Project
For local development and testing with the Lingo.dev Compiler:
```bash
npm run dev
```
The exact command may vary depending on your project setup and package manager.
---
## Debugging Tips
You can now use your debugger or classic `console.log` statements in the Compiler and React packages to inspect what happens during your project build.
- The Compiler entry point is at `packages/compiler/src/index.ts`.
- The `load` method:
- Loads and generates `lingo/dictionary.js` using `LCPServer.loadDictionaries`.
- The `transform` method:
- Applies mutations to process source code (see methods in `composeMutations`).
- Generates `lingo/meta.json` based on the translatable content in your app.
- Injects Compiler-related components (`LingoComponent`, `LingoAttributeComponent`).
- Replaces the `loadDictionary` method with `loadDictionary_internal`.
---
For more details, check out the [Lingo.dev Compiler documentation](https://lingo.dev/compiler) or [join our Discord](https://lingo.dev/go/discord) for help!
## /Dockerfile
``` path="/Dockerfile"
FROM node:20.12.2-alpine
# Run the Node.js / TypeScript application
ENTRYPOINT ["sh", "-c", "npx lingo.dev@latest ci \
--api-key \"$LINGODOTDEV_API_KEY\" \
--pull-request \"$LINGODOTDEV_PULL_REQUEST\" \
--commit-message \"$LINGODOTDEV_COMMIT_MESSAGE\" \
--pull-request-title \"$LINGODOTDEV_PULL_REQUEST_TITLE\" \
--working-directory \"$LINGODOTDEV_WORKING_DIRECTORY\" \
--process-own-commits \"$LINGODOTDEV_PROCESS_OWN_COMMITS\""]
```
## /LICENSE.md
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2024 Lingo.dev
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
## /action.yml
```yml path="/action.yml"
name: "Lingo.Dev AI Localization"
description: Automated AI localization for dev teams.
author: Lingo.dev
branding:
icon: "aperture"
color: "black"
runs:
using: "composite"
steps:
- name: Run
run: |
npx lingo.dev@${{ inputs.version }} ci \
--api-key "${{ inputs.api-key }}" \
--pull-request "${{ inputs.pull-request }}" \
--commit-message "${{ inputs.commit-message }}" \
--pull-request-title "${{ inputs.pull-request-title }}" \
--commit-author-name "${{ inputs.commit-author-name }}" \
--commit-author-email "${{ inputs.commit-author-email }}" \
--working-directory "${{ inputs.working-directory }}" \
--process-own-commits "${{ inputs.process-own-commits }}" \
--parallel ${{ inputs.parallel }}
shell: bash
inputs:
version:
description: "Lingo.dev CLI version"
default: "latest"
required: false
api-key:
description: "Lingo.dev Platform API Key"
required: true
pull-request:
description: "Create a pull request with the changes"
default: false
required: false
commit-message:
description: "Commit message"
default: "feat: update translations via @LingoDotDev"
required: false
pull-request-title:
description: "Pull request title"
default: "feat: update translations via @LingoDotDev"
required: false
commit-author-name:
description: "Git commit author name"
default: "Lingo.dev"
required: false
commit-author-email:
description: "Git commit author email"
default: "support@lingo.dev"
required: false
working-directory:
description: "Working directory"
default: "."
required: false
process-own-commits:
description: "Process commits made by this action"
default: false
required: false
parallel:
description: "Run in parallel mode"
default: false
required: false
```
## /commitlint.config.js
```js path="/commitlint.config.js"
export default { extends: ["@commitlint/config-conventional"] };
```
## /composer.json
```json path="/composer.json"
{
"name": "lingodotdev/lingo.dev",
"description": "Lingo.dev Monorepo",
"type": "project",
"license": "MIT",
"repositories": [
{
"type": "path",
"url": "php/sdk",
"options": {
"symlink": false
}
}
],
"require": {
"lingodotdev/sdk": "*"
},
"minimum-stability": "dev",
"prefer-stable": true
}
```
## /content/banner.compiler.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/content/banner.compiler.png
## /content/banner.dark.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/content/banner.dark.png
## /content/banner.launch.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/content/banner.launch.png
## /demo/new-compiler-next16/.gitignore
```gitignore path="/demo/new-compiler-next16/.gitignore"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
```
## /demo/new-compiler-next16/CHANGELOG.md
# @compiler/demo-next
## 0.1.3
### Patch Changes
- Updated dependencies [[`68b8496`](https://github.com/lingodotdev/lingo.dev/commit/68b849602a88b9f9aa3097f37ce2f0ccf97c1ad5)]:
- @lingo.dev/compiler@0.1.4
## 0.1.2
### Patch Changes
- Updated dependencies [[`c77c8c8`](https://github.com/lingodotdev/lingo.dev/commit/c77c8c8b8e1db859839b184882d56a0ef7da1ab0)]:
- @lingo.dev/compiler@0.1.3
## 0.1.1
### Patch Changes
- [#1710](https://github.com/lingodotdev/lingo.dev/pull/1710) [`020424f`](https://github.com/lingodotdev/lingo.dev/commit/020424f2601c535e88c66aeeece5a15fb9b66b70) Thanks [@vrcprl](https://github.com/vrcprl)! - Add support for JSONC comments in arrays
- Updated dependencies [[`b2d335b`](https://github.com/lingodotdev/lingo.dev/commit/b2d335b37af3e300a402d75f0eb2a0112f81e7ee)]:
- @lingo.dev/compiler@0.1.2
## /demo/new-compiler-next16/README.md
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
## /demo/new-compiler-next16/app/.lingo/cache/de.json
```json path="/demo/new-compiler-next16/app/.lingo/cache/de.json"
{
"version": 0.1,
"locale": "de",
"entries": {
"8818ca53e31c": "Create Next App",
"86dbb9f023f2": "Generiert von create next app",
"c2869b1af1fd": "Hallo Welt",
"aa583dd2cdb3": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
"f8024b461f8b": "Lingo.dev Compiler Next Demo",
"068592d63b5c": "Test",
"fbae03267da7": "Willkommen zur Lingo.dev Compiler-Demo",
"b3378ef9d257": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen. <br0></br0> Es unterstützt sowohl Server- als auch Client-Komponenten.",
"5d73614fbf6f": "Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}",
"43f8b1c71d1d": "Um ihn zu übersetzen, müssen Sie ihn in <>{translatableText}</> einpacken",
"ba8a4c46406b": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
"5cbe3731905e": "Inhalte, die Text und andere Tags enthalten, werden als eine einzige Einheit übersetzt: {translatableMixedContextFragment}",
"f5e4fb249cc5": "Auf dem Server gerendert",
"3b11e68de0d0": "{state} mal geklickt",
"889e919a3d5d": "Zurücksetzen",
"b6c327941f13": "Um ihn zu übersetzen, müssen Sie ihn in '<'>{translatableText}'<'/> einpacken",
"372781f5dc46": "Was passiert, wenn ich eine Eigenschaft {expression0} verwende",
"72e87c3a9c71": "Übersetzt cool",
"f5a54d820e5c": "Was passiert, wenn ich eine Eigenschaft {expression0} und {expression1} verwende",
"992788d17991": "<Link0>Test</Link0> 1",
"f4613618f582": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen. <br0></br0> Es unterstützt sowohl Server- als auch Client-Komponentenssssss.",
"53df1a7f71cd": "Verwenden Sie data-lingo-override, um Übersetzungen zu überschreiben",
"be9d2a95d9b6": "Rich-Text-Übersetzungstest",
"c08b9402a107": "Klicken Sie <a0>hier</a0> oder <a1>dort</a1> für weitere Informationen.",
"14b4188c94cc": "Hallo <strong0>Welt</strong0>, dies ist ein Test.",
"7a5ea0d2df89": "Compiler-Beta Testseite",
"830ff99946cc": "Diese Seite demonstriert automatische Übersetzungstransformation",
"6368dcee9953": "Wie es funktioniert",
"8dadb9ec4d04": "Der Compiler-Beta-Loader transformiert JSX-Text automatisch in Übersetzungsaufrufe.",
"0ae6ce389cfc": "Jedem Textstück wird ein eindeutiger Hash basierend auf Inhalt, Komponentenname und Dateipfad zugewiesen.",
"378eb18c4a16": "Überprüfen Sie die Entwicklerkonsole, um den transformierten Code zu sehen!",
"4c6734305aa0": "Automatische Erkennung",
"003c9612351d": "Keine manuelle Kennzeichnung erforderlich",
"d5b562e40b5e": "Hash-basiertes System",
"0379b86a9355": "Eindeutige Kennungen für jeden Text",
"833473d12153": "Metadaten-Tracking",
"46e06d3f2a54": "Alle Übersetzungen werden in metadata.json gespeichert",
"4700e259367e": "Turbopack-kompatibel",
"4e25cff45759": "Funktioniert nahtlos mit Next.js 16",
"e225cbdc3c08": "Vor der Transformation",
"61b7edbfd322": "Nach der Transformation",
"be34d62b41ea": "Entwicklungsstatus",
"1cffc0c80394": "Der Compiler-Beta transformiert derzeit diese Seite.",
"b2219cb18030": "Suchen Sie nach dem .lingo-Verzeichnis im Projektstamm nach dem Build.",
"2639e74b4dba": "Testtesttest2222222",
"fa54f4d74ce6": "Testtesttest"
}
}
```
## /demo/new-compiler-next16/app/.lingo/cache/en.json
```json path="/demo/new-compiler-next16/app/.lingo/cache/en.json"
{
"version": 0.1,
"locale": "en",
"entries": {
"8818ca53e31c": "Create Next App",
"86dbb9f023f2": "Generated by create next app",
"c2869b1af1fd": "Hello World",
"aa583dd2cdb3": "<b0>Mixed</b0> content <i0>fragment</i0>",
"f8024b461f8b": "Lingo.dev compiler Next demo",
"068592d63b5c": "Test",
"fbae03267da7": "Welcome to Lingo.dev compiler demo",
"b3378ef9d257": "It automatically extract text from your JSX and translate it to other languages. <br0></br0> It supports both server and client components.",
"5d73614fbf6f": "Text inserted as an <code0></code0> is not translated: {text}",
"43f8b1c71d1d": "To translate it you have to wrap it into the <>{translatableText}</>",
"ba8a4c46406b": "Text external to the component is not translated: {externalText}",
"5cbe3731905e": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}",
"f5e4fb249cc5": "Rendered on the server",
"3b11e68de0d0": "Clicked {state} times",
"889e919a3d5d": "reset",
"b6c327941f13": "To translate it you have to wrap it into the '<'>{translatableText}'<'/>",
"372781f5dc46": "What happens if I use a property {expression0}",
"72e87c3a9c71": "translated cool",
"f5a54d820e5c": "What happens if I use a property {expression0} and {expression1}",
"992788d17991": "<Link0>Test</Link0> 1",
"f4613618f582": "It automatically extract text from your JSX and translate it to other languages. <br0></br0> It supports both server and client componentssssss.",
"53df1a7f71cd": "Use data-lingo-override to override translations",
"be9d2a95d9b6": "Rich Text Translation Test",
"c08b9402a107": "Click <a0>here</a0> or <a1>there</a1> for more info.",
"14b4188c94cc": "Hello <strong0>world</strong0>, this is a test.",
"7a5ea0d2df89": "Compiler-Beta Test Page",
"830ff99946cc": "This page demonstrates automatic translation transformation",
"6368dcee9953": "How It Works",
"8dadb9ec4d04": "The compiler-beta loader automatically transforms JSX text into translation calls.",
"0ae6ce389cfc": "Each piece of text is assigned a unique hash based on the content, component name, and file path.",
"378eb18c4a16": "Check the developer console to see the transformed code!",
"4c6734305aa0": "Automatic Detection",
"003c9612351d": "No manual tagging required",
"d5b562e40b5e": "Hash-Based System",
"0379b86a9355": "Unique identifiers for each text",
"833473d12153": "Metadata Tracking",
"46e06d3f2a54": "All translations saved to metadata.json",
"4700e259367e": "Turbopack Compatible",
"4e25cff45759": "Works seamlessly with Next.js 16",
"e225cbdc3c08": "Before Transformation",
"61b7edbfd322": "After Transformation",
"be34d62b41ea": "Development Status",
"1cffc0c80394": "The compiler-beta is currently transforming this page.",
"b2219cb18030": "Look for the .lingo directory in the project root after building.",
"2639e74b4dba": "Testtesttest2222222",
"fa54f4d74ce6": "Testtesttest"
}
}
```
## /demo/new-compiler-next16/app/.lingo/cache/es.json
```json path="/demo/new-compiler-next16/app/.lingo/cache/es.json"
{
"version": 0.1,
"locale": "es",
"entries": {
"8818ca53e31c": "Crear aplicación Next",
"86dbb9f023f2": "Generado por create next app",
"c2869b1af1fd": "Hola Mundo",
"aa583dd2cdb3": "<b0>Contenido</b0> mixto <i0>fragmento</i0>",
"72e87c3a9c71": "traducido genial",
"f8024b461f8b": "Demo de compilador Lingo.dev Next",
"992788d17991": "<Link0>Prueba</Link0> 1",
"fbae03267da7": "Bienvenido a la demo del compilador Lingo.dev",
"b3378ef9d257": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas. <br0></br0> Es compatible tanto con componentes de servidor como de cliente.",
"53df1a7f71cd": "Usa data-lingo-override para sobrescribir traducciones",
"5d73614fbf6f": "El texto insertado como <code0></code0> no se traduce: {text}",
"b6c327941f13": "Para traducirlo tienes que envolverlo en el '<'>{translatableText}'<'/>",
"f5a54d820e5c": "¿Qué sucede si uso una propiedad {expression0} y {expression1}",
"ba8a4c46406b": "El texto externo al componente no se traduce: {externalText}",
"5cbe3731905e": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}",
"f5e4fb249cc5": "Renderizado en el servidor",
"3b11e68de0d0": "Cliqueado {state} veces",
"889e919a3d5d": "reiniciar",
"068592d63b5c": "Prueba",
"43f8b1c71d1d": "Para traducirlo tienes que envolverlo en <>{translatableText}</>",
"372781f5dc46": "¿Qué sucede si uso una propiedad {expression0}",
"f4613618f582": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas. <br0></br0> Soporta componentes tanto de servidor como de cliente.",
"be9d2a95d9b6": "Prueba de traducción de texto enriquecido",
"c08b9402a107": "Haz clic <a0>aquí</a0> o <a1>allí</a1> para más información.",
"14b4188c94cc": "Hola <strong0>mundo</strong0>, esto es una prueba.",
"7a5ea0d2df89": "Página de prueba de Compiler-Beta",
"830ff99946cc": "Esta página demuestra la transformación automática de traducción",
"6368dcee9953": "Cómo funciona",
"8dadb9ec4d04": "El cargador compiler-beta transforma automáticamente el texto JSX en llamadas de traducción.",
"0ae6ce389cfc": "A cada fragmento de texto se le asigna un hash único basado en el contenido, el nombre del componente y la ruta del archivo.",
"378eb18c4a16": "¡Revisa la consola de desarrollador para ver el código transformado!",
"4c6734305aa0": "Detección automática",
"003c9612351d": "No requiere etiquetado manual",
"d5b562e40b5e": "Sistema basado en hash",
"0379b86a9355": "Identificadores únicos para cada texto",
"833473d12153": "Seguimiento de metadatos",
"46e06d3f2a54": "Todas las traducciones guardadas en metadata.json",
"4700e259367e": "Compatible con Turbopack",
"4e25cff45759": "Funciona perfectamente con Next.js 16",
"e225cbdc3c08": "Antes de la transformación",
"61b7edbfd322": "Después de la transformación",
"be34d62b41ea": "Estado de desarrollo",
"1cffc0c80394": "El compiler-beta está transformando esta página actualmente.",
"b2219cb18030": "Busca el directorio .lingo en la raíz del proyecto después de compilar.",
"fa54f4d74ce6": "Pruebapruebaprueba",
"2639e74b4dba": "Pruebapruebaprueba2222222"
}
}
```
## /demo/new-compiler-next16/app/.lingo/cache/ru.json
```json path="/demo/new-compiler-next16/app/.lingo/cache/ru.json"
{
"version": 0.1,
"locale": "ru",
"entries": {
"8818ca53e31c": "Создать Next App",
"86dbb9f023f2": "Создано с помощью Create Next App",
"3b11e68de0d0": "Нажато {state} раз(а)",
"889e919a3d5d": "сбросить",
"53df1a7f71cd": "Секретная информация",
"c2869b1af1fd": "Привет, мир",
"aa583dd2cdb3": "<b0>Смешанный</b0> контент <i0>фрагмент</i0>",
"72e87c3a9c71": "переведено круто",
"f8024b461f8b": "Демонстрация компилятора Lingo.dev Next",
"992788d17991": "<Link0>Тест</Link0> 1",
"fbae03267da7": "Добро пожаловать в демонстрацию компилятора Lingo.dev",
"b3378ef9d257": "Он автоматически извлекает текст из вашего JSX и переводит его на другие языки. <br0></br0> Поддерживает как серверные, так и клиентские компоненты.",
"5d73614fbf6f": "Текст, вставленный как <code0></code0>, не переводится: {text}",
"b6c327941f13": "Чтобы перевести его, вы должны обернуть его в '<'>{translatableText}'<'/>",
"f5a54d820e5c": "Что произойдет, если я использую свойство {expression0} и {expression1}",
"ba8a4c46406b": "Текст, внешний по отношению к компоненту, не переводится: {externalText}",
"5cbe3731905e": "Контент, содержащий текст и другие теги внутри, будет переведен как единое целое: {translatableMixedContextFragment}",
"f5e4fb249cc5": "Отрисовано на сервере",
"7a5ea0d2df89": "Страница тестирования Compiler-Beta",
"830ff99946cc": "Эта страница демонстрирует автоматическое преобразование перевода",
"6368dcee9953": "Как это работает",
"8dadb9ec4d04": "Загрузчик compiler-beta автоматически преобразует текст JSX в вызовы перевода.",
"0ae6ce389cfc": "Каждому фрагменту текста присваивается уникальный хэш на основе содержимого, имени компонента и пути к файлу.",
"378eb18c4a16": "Проверьте консоль разработчика, чтобы увидеть преобразованный код!",
"4c6734305aa0": "Автоматическое обнаружение",
"003c9612351d": "Не требуется ручная разметка",
"d5b562e40b5e": "Система на основе хэшей",
"0379b86a9355": "Уникальные идентификаторы для каждого текста",
"833473d12153": "Отслеживание метаданных",
"46e06d3f2a54": "Все переводы сохраняются в metadata.json",
"4700e259367e": "Совместимость с Turbopack",
"4e25cff45759": "Работает без проблем с Next.js 16",
"e225cbdc3c08": "До преобразования",
"61b7edbfd322": "После преобразования",
"be34d62b41ea": "Статус разработки",
"1cffc0c80394": "В настоящее время compiler-beta преобразует эту страницу.",
"b2219cb18030": "Ищите каталог .lingo в корне проекта после сборки.",
"068592d63b5c": "Тест",
"43f8b1c71d1d": "Чтобы перевести это, оберните в <>{translatableText}</>",
"372781f5dc46": "Что произойдет, если я использую свойство {expression0}",
"f4613618f582": "Он автоматически извлекает текст из вашего JSX и переводит его на другие языки. <br0></br0> Поддерживает как серверные, так и клиентские компоненты.",
"be9d2a95d9b6": "Тест перевода с форматированием",
"c08b9402a107": "Нажмите <a0>здесь</a0> или <a1>там</a1> для получения дополнительной информации.",
"14b4188c94cc": "Привет, <strong0>мир</strong0>, это тест.",
"fa54f4d74ce6": "Тесттесттест",
"2639e74b4dba": "Тесттесттест2222222"
}
}
```
## /demo/new-compiler-next16/app/favicon.ico
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/demo/new-compiler-next16/app/favicon.ico
## /demo/new-compiler-next16/app/globals.css
```css path="/demo/new-compiler-next16/app/globals.css"
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
color-scheme: dark;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
.locale-switcher option,
optgroup {
background-color: black;
}
```
## /demo/new-compiler-next16/app/layout.tsx
```tsx path="/demo/new-compiler-next16/app/layout.tsx"
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { LingoProvider } from "@lingo.dev/compiler/react/next";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<LingoProvider>
<html>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
</LingoProvider>
);
}
```
## /demo/new-compiler-next16/app/page.tsx
```tsx path="/demo/new-compiler-next16/app/page.tsx"
import { Counter } from "@/components/Counter";
import { LocaleSwitcher } from "@lingo.dev/compiler/react";
import Link from "next/link";
import { ServerChild } from "@/components/ServerChild";
import { ClientChildWrapper } from "@/components/ClientChildWrapper";
const externalText = <>External text</>;
export default function Home() {
const text = "Hello World";
const translatableText = <>Hello World</>;
const translatableMixedContextFragment = (
<>
<b>Mixed</b> content <i>fragment</i>
</>
);
const something = { cool: "cool", translatedCool: <>translated cool</> };
return (
<main className="flex w-full min-h-screen flex-col items-center bg-white dark:bg-black sm:items-start">
<header className="flex justify-between p-10 w-full">
<span>Lingo.dev compiler Next demo</span>
<nav>
<Link href="/test">Test</Link> 1
</nav>
<LocaleSwitcher
locales={[
{ code: "en", label: "English" },
{ code: "es", label: "Spanish" },
{ code: "de", label: "Deutsch" },
{ code: "ru", label: "Русский" },
]}
className="locale-switcher"
/>
</header>
<div className="flex w-full grow flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<h1 className="text-4xl font-bold mb-4">
Welcome to Lingo.dev compiler demo
</h1>
<p className="mb-8">
It automatically extract text from your JSX and translate it to other
languages. <br />
It supports both server and client components.
</p>
<div className="my-2">
<Counter />
</div>
<div className="my-2">
<ClientChildWrapper>
<ServerChild />
</ClientChildWrapper>
</div>
<div data-lingo-override={{ ru: "Секретная информация" }}>
Use data-lingo-override to override translations
</div>
<div>
Text inserted as an <code>{"{expression}"}</code> is not translated:{" "}
{text}
</div>
<div>
To translate it you have to wrap it into the {"<>"}
{translatableText}
{"</>"}
</div>
<div>
<div>
What happens if I use a property {something.cool} and{" "}
{something.translatedCool}
</div>
<div>
Text external to the component is not translated: {externalText}
</div>
<div>
Content that has text and other tags inside will br translated as a
single entity: {translatableMixedContextFragment}
</div>
</div>
</div>
</main>
);
}
```
## /demo/new-compiler-next16/app/test/page.tsx
```tsx path="/demo/new-compiler-next16/app/test/page.tsx"
export default function CompilerTestPage() {
return (
<div className="min-h-screen p-8 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
<div className="max-w-4xl mx-auto">
{/* Header Section */}
<header className="mb-12">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
Compiler-Beta Test Page
</h1>
<p className="text-lg text-gray-600 dark:text-gray-300">
This page demonstrates automatic translation transformation
</p>
</header>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
How It Works
</h2>
<p className="text-gray-700 dark:text-gray-300 mb-4">
The compiler-beta loader automatically transforms JSX text into
translation calls.
</p>
<p className="text-gray-700 dark:text-gray-300 mb-4">
Each piece of text is assigned a unique hash based on the content,
component name, and file path.
</p>
<p className="text-gray-700 dark:text-gray-300">
Check the developer console to see the transformed code!
</p>
</div>
<div className="grid md:grid-cols-2 gap-6 mb-8">
<FeatureCard
title="Automatic Detection"
description="No manual tagging required"
/>
<FeatureCard
title="Hash-Based System"
description="Unique identifiers for each text"
/>
<FeatureCard
title="Metadata Tracking"
description="All translations saved to metadata.json"
/>
<FeatureCard
title="Turbopack Compatible"
description="Works seamlessly with Next.js 16"
/>
</div>
<div className="bg-gray-900 rounded-lg p-6 mb-8">
<h3 className="text-white text-lg font-semibold mb-2">
Before Transformation
</h3>
<pre className="text-green-400 text-sm overflow-x-auto">
{`<h1>Welcome to our site</h1>`}
</pre>
<h3 className="text-white text-lg font-semibold mt-4 mb-2">
After Transformation
</h3>
<pre className="text-green-400 text-sm overflow-x-auto">
{`<h1>{t("a1b2c3d4e5f6")}</h1>`}
</pre>
</div>
<div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
<h3 className="text-xl font-semibold text-blue-900 dark:text-blue-100 mb-2">
Development Status
</h3>
<p className="text-blue-800 dark:text-blue-200">
The compiler-beta is currently transforming this page.
</p>
<p className="text-blue-800 dark:text-blue-200 mt-2">
Look for the .lingo directory in the project root after building.
</p>
</div>
</div>
</div>
);
}
function FeatureCard({
title,
description,
}: {
title: string;
description: string;
}) {
return (
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{title}
</h3>
<p className="text-gray-600 dark:text-gray-400">{description}</p>
</div>
);
}
```
## /demo/new-compiler-next16/components/ClientChildWrapper.tsx
```tsx path="/demo/new-compiler-next16/components/ClientChildWrapper.tsx"
"use client";
import { FC, PropsWithChildren } from "react";
export const ClientChildWrapper: FC<PropsWithChildren> = ({ children }) => {
return <div className="flex gap-2">{children}</div>;
};
```
## /demo/new-compiler-next16/components/Counter.tsx
```tsx path="/demo/new-compiler-next16/components/Counter.tsx"
"use client";
import { FC, useState } from "react";
export const Counter: FC = () => {
const [state, setState] = useState(0);
return (
<div className="flex flex-col gap-4">
<button onClick={() => setState((old) => old + 1)}>
Clicked {state} times
</button>
{/*<button onClick={() => setState((old) => old + 1)}>*/}
{/* Clicked {state} times*/}
{/*</button>*/}
<button onClick={() => setState((old) => 0)}>reset</button>
</div>
);
};
```
## /demo/new-compiler-next16/components/CounterClientChild.tsx
```tsx path="/demo/new-compiler-next16/components/CounterClientChild.tsx"
import { useState } from "react";
export const CounterClientChild = () => {
const [state, setState] = useState(0);
return (
<div className="flex gap-2">
<span>{state}</span>
<button onClick={() => setState((old) => old + 1)}>
How are you today?.
</button>
</div>
);
};
```
## /demo/new-compiler-next16/components/ServerChild.tsx
```tsx path="/demo/new-compiler-next16/components/ServerChild.tsx"
export const ServerChild = () => {
return (
<div className="flex gap-2">
<button>Rendered on the server</button>
</div>
);
};
```
## /demo/new-compiler-next16/eslint.config.mjs
```mjs path="/demo/new-compiler-next16/eslint.config.mjs"
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);
export default eslintConfig;
```
## /demo/new-compiler-next16/next.config.ts
```ts path="/demo/new-compiler-next16/next.config.ts"
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";
const nextConfig: NextConfig = {};
export default async function (): Promise<NextConfig> {
return await withLingo(nextConfig, {
sourceRoot: "./app",
lingoDir: ".lingo",
sourceLocale: "en",
targetLocales: ["es", "de", "ru"],
useDirective: false, // Set to true to require 'use i18n' directive
models: "lingo.dev",
dev: {
usePseudotranslator: true,
},
buildMode: "cache-only",
});
}
```
## /demo/new-compiler-next16/package.json
```json path="/demo/new-compiler-next16/package.json"
{
"name": "@compiler/demo-next",
"version": "0.1.3",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@lingo.dev/compiler": "workspace:*",
"next": "16.0.4",
"react": "19.2.0",
"react-dom": "19.2.0"
},
"devDependencies": {
"@tailwindcss/postcss": "4",
"@types/node": "20",
"@types/react": "19",
"@types/react-dom": "19",
"eslint": "9",
"eslint-config-next": "16.0.3",
"tailwindcss": "4",
"tsx": "4.20.6",
"typescript": "5"
}
}
```
## /demo/new-compiler-next16/postcss.config.mjs
```mjs path="/demo/new-compiler-next16/postcss.config.mjs"
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
```
## /demo/new-compiler-next16/public/file.svg
```svg path="/demo/new-compiler-next16/public/file.svg"
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
```
## /demo/new-compiler-next16/public/globe.svg
```svg path="/demo/new-compiler-next16/public/globe.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
```
## /demo/new-compiler-next16/public/next.svg
```svg path="/demo/new-compiler-next16/public/next.svg"
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
```
## /demo/new-compiler-next16/public/vercel.svg
```svg path="/demo/new-compiler-next16/public/vercel.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
```
## /demo/new-compiler-next16/public/window.svg
```svg path="/demo/new-compiler-next16/public/window.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
```
## /demo/new-compiler-next16/tsconfig.json
```json path="/demo/new-compiler-next16/tsconfig.json"
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts"
],
"exclude": ["node_modules"]
}
```
## /demo/new-compiler-vite-react-spa/.cta.json
```json path="/demo/new-compiler-vite-react-spa/.cta.json"
{
"projectName": "vite-react-spa",
"mode": "file-router",
"typescript": true,
"tailwind": true,
"packageManager": "npm",
"addOnOptions": {},
"git": true,
"version": 1,
"framework": "react-cra",
"chosenAddOns": ["biome"]
}
```
## /demo/new-compiler-vite-react-spa/.gitignore
```gitignore path="/demo/new-compiler-vite-react-spa/.gitignore"
node_modules
.DS_Store
dist
dist-ssr
*.local
count.txt
.env
.nitro
.tanstack
.wrangler
```
## /demo/new-compiler-vite-react-spa/README.md
Welcome to your new TanStack app!
# Getting Started
To run this application:
```bash
npm install
npm run start
```
# Building For Production
To build this application for production:
```bash
npm run build
```
## Testing
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
```bash
npm run test
```
## Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Linting & Formatting
This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
```bash
npm run lint
npm run format
npm run check
```
## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
### Adding A Route
To add a new route to your application just add another a new file in the `./src/routes` directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx
import { Link } from "@tanstack/react-router";
```
Then anywhere in your JSX you can use it like so:
```tsx
<Link to="/about">About</Link>
```
This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
### Using A Layout
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
Here is an example layout that includes a header:
```tsx
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { Link } from "@tanstack/react-router";
export const Route = createRootRoute({
component: () => (
<>
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
<Outlet />
<TanStackRouterDevtools />
</>
),
});
```
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
```tsx
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
);
},
});
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
### React-Query
React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
First add your dependencies:
```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// ...
const queryClient = new QueryClient();
// ...
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>,
);
}
```
You can also add TanStack Query Devtools to the root route (optional).
```tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const rootRoute = createRootRoute({
component: () => (
<>
<Outlet />
<ReactQueryDevtools buttonPosition="top-right" />
<TanStackRouterDevtools />
</>
),
});
```
Now you can use `useQuery` to fetch your data.
```tsx
import { useQuery } from "@tanstack/react-query";
import "./App.css";
function App() {
const { data } = useQuery({
queryKey: ["people"],
queryFn: () =>
fetch("https://swapi.dev/api/people")
.then((res) => res.json())
.then((data) => data.results as { name: string }[]),
initialData: [],
});
return (
<div>
<ul>
{data.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
</div>
);
}
export default App;
```
You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
## State Management
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
First you need to add TanStack Store as a dependency:
```bash
npm install @tanstack/store
```
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
function App() {
const count = useStore(countStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
</div>
);
}
export default App;
```
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
Let's check this out by doubling the count using derived state.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
});
doubledStore.mount();
function App() {
const count = useStore(countStore);
const doubledCount = useStore(doubledStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div>
</div>
);
}
export default App;
```
We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
# Demo files
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
## /demo/new-compiler-vite-react-spa/analyze-bundle.sh
```sh path="/demo/new-compiler-vite-react-spa/analyze-bundle.sh"
#!/bin/bash
# Bundle Analysis Script for Lingo.dev Compiler
# Checks for unnecessary code in production builds
set -e
echo "🔍 Analyzing production bundle..."
echo ""
BUNDLE_FILE="dist/assets/index-*.js"
# Check if build exists
if [ ! -d "dist/assets" ]; then
echo "❌ No dist/assets found. Run 'pnpm build' first."
exit 1
fi
echo "📦 Bundle Size:"
ls -lh dist/assets/*.js | awk '{print " ", $5, $9}'
echo ""
echo "🧹 Checking for dev-only code..."
# List of patterns that should NOT be in production
DEV_PATTERNS=(
"TranslationProvider__Dev"
"usePseudotranslator"
"startTranslationServer"
"translation-server"
"fetchTranslations"
"serverUrl"
"batchDelay"
"pendingHashesRef"
"registeredHashesRef"
"allSeenHashes"
"__LINGO_DEV"
)
FOUND_ISSUES=0
for pattern in "${DEV_PATTERNS[@]}"; do
if grep -q "$pattern" $BUNDLE_FILE 2>/dev/null; then
echo " ⚠️ Found dev code: $pattern"
FOUND_ISSUES=$((FOUND_ISSUES + 1))
fi
done
if [ $FOUND_ISSUES -eq 0 ]; then
echo " ✅ No dev-only code found"
else
echo ""
echo " ❌ Found $FOUND_ISSUES dev patterns in production bundle!"
fi
echo ""
echo "✨ Checking for expected production code..."
# List of patterns that SHOULD be in production
PROD_PATTERNS=(
"TranslationProvider"
"useTranslation"
"setLocale"
)
FOUND_PROD=0
for pattern in "${PROD_PATTERNS[@]}"; do
if grep -q "$pattern" $BUNDLE_FILE 2>/dev/null; then
echo " ✅ Found: $pattern"
FOUND_PROD=$((FOUND_PROD + 1))
else
echo " ❌ Missing: $pattern"
fi
done
echo ""
echo "📊 Summary:"
echo " Total bundle size: $(du -h dist/assets/index-*.js | awk '{print $1}')"
echo " Gzipped size: $(gzip -c dist/assets/index-*.js | wc -c | awk '{print int($1/1024) "K"}')"
echo " Dev patterns found: $FOUND_ISSUES"
echo " Prod patterns found: $FOUND_PROD/${#PROD_PATTERNS[@]}"
echo ""
if [ $FOUND_ISSUES -eq 0 ] && [ $FOUND_PROD -eq ${#PROD_PATTERNS[@]} ]; then
echo "✅ Bundle looks good!"
exit 0
else
echo "⚠️ Bundle may have issues"
exit 1
fi
```
## /demo/new-compiler-vite-react-spa/index.html
```html path="/demo/new-compiler-vite-react-spa/index.html"
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-tsrouter-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>Create TanStack App - vite-react-spa</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
## /demo/new-compiler-vite-react-spa/package.json
```json path="/demo/new-compiler-vite-react-spa/package.json"
{
"name": "vite-react-spa",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --port 3000",
"_build": "vite build && tsc",
"serve": "vite preview"
},
"dependencies": {
"@lingo.dev/compiler": "workspace:*",
"@tailwindcss/vite": "4.0.6",
"@tanstack/react-devtools": "0.7.0",
"@tanstack/react-router": "1.132.0",
"@tanstack/react-router-devtools": "1.132.0",
"@tanstack/router-plugin": "1.132.0",
"lucide-react": "0.545.0",
"react": "19.2.0",
"react-dom": "19.2.0",
"tailwindcss": "4.0.6"
},
"devDependencies": {
"@tanstack/devtools-vite": "0.3.11",
"@testing-library/dom": "10.4.0",
"@testing-library/react": "16.2.0",
"@types/node": "22.10.2",
"@types/react": "19.2.0",
"@types/react-dom": "19.2.0",
"@vitejs/plugin-react": "5.0.4",
"jsdom": "27.0.0",
"typescript": "5.7.2",
"vite": "7.3.0",
"web-vitals": "5.1.0"
}
}
```
## /demo/new-compiler-vite-react-spa/public/favicon.ico
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/demo/new-compiler-vite-react-spa/public/favicon.ico
## /demo/new-compiler-vite-react-spa/public/logo192.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/demo/new-compiler-vite-react-spa/public/logo192.png
## /demo/new-compiler-vite-react-spa/public/logo512.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/demo/new-compiler-vite-react-spa/public/logo512.png
## /demo/new-compiler-vite-react-spa/public/manifest.json
```json path="/demo/new-compiler-vite-react-spa/public/manifest.json"
{
"short_name": "TanStack App",
"name": "Create TanStack App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
```
## /demo/new-compiler-vite-react-spa/public/robots.txt
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
## /demo/new-compiler-vite-react-spa/public/tanstack-circle-logo.png
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/demo/new-compiler-vite-react-spa/public/tanstack-circle-logo.png
## /demo/new-compiler-vite-react-spa/public/tanstack-word-logo-white.svg
```svg path="/demo/new-compiler-vite-react-spa/public/tanstack-word-logo-white.svg"
<svg height="660" viewBox="0 0 3178 660" width="3178" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(.9778)"><g transform="translate(740.0222 38)"><path d="m101.695801 467h101.445312v-264.858398h90.917969v-80.390625h-283.28125v80.390625h90.917969z"/><path d="m241.544434 467h106.708984l68.666992-262.944336h33.017578v-82.304687h-95.703125zm70.820312-68.666992h211.025391l-21.054688-71.538086h-168.916015zm175.136719 68.666992h106.708984l-112.690429-345.249023h-62.685547v82.304687z"/><path d="m600.313965 467h101.445312v-179.443359h41.391602l-66.274414-38.759766 149.536133 218.203125h83.500976v-345.249023h-101.445312v176.572265h-41.391602l66.513672 38.759766-148.818359-215.332031h-84.458008z"/><path d="m1072.01318 473.220703c31.74154 0 58.85743-4.74528 81.34766-14.23584s39.67692-22.96875 51.56006-40.43457 17.82471-38.081869 17.82471-61.848145v-.239257c0-18.66211-3.94776-34.572754-11.84327-47.731934-7.8955-13.15918-19.89827-23.965658-36.0083-32.419434-16.11002-8.453776-36.52669-14.913737-61.25-19.379882l-34.69238-6.220703c-17.22656-3.190105-29.74772-6.898601-37.56348-11.125489-7.81575-4.226888-11.72363-10.248209-11.72363-18.063965v-.239257c0-5.263672 1.59505-10.008952 4.78516-14.23584 3.1901-4.226888 7.93538-7.576498 14.23584-10.048828 6.30045-2.472331 14.07633-3.708497 23.32763-3.708497 9.25131 0 17.5057 1.276042 24.76319 3.828126 7.25748 2.552083 13.07942 6.101074 17.46582 10.646972 4.38639 4.545899 6.8986 10.008952 7.53662 16.38916l.23926 2.392578h93.31054l-.23925-5.263671c-.95704-21.533204-7.01823-40.235189-18.1836-56.105957-11.16536-15.870769-27.27539-28.112793-48.33008-36.726075-21.05468-8.613281-46.97428-12.919922-77.75879-12.919922-27.27539 0-51.59993 4.625651-72.973628 13.876954-21.373698 9.251302-38.161621 22.330729-50.36377 39.238281-12.202148 16.907552-18.303222 36.925456-18.303222 60.053711v.239258c0 26.796875 9.131673 48.728841 27.395019 65.795898s44.541831 28.631185 78.835451 34.692383l34.69238 6.220703c19.14063 3.509115 32.61882 7.33724 40.43457 11.484375 7.81576 4.147135 11.72363 10.288086 11.72363 18.422852v.239257c0 5.742188-1.99381 10.846354-5.98144 15.3125s-9.61019 7.975261-16.86768 10.527344c-7.25748 2.552083-15.99039 3.828125-26.19873 3.828125-9.57031 0-18.3431-1.315918-26.31836-3.947754s-14.59472-6.260579-19.8584-10.88623c-5.26367-4.625651-8.61328-10.048828-10.04882-16.269532l-.47852-2.15332h-93.310546l.239258 4.545899c1.276042 22.649739 8.015137 41.909993 20.217285 57.780761 12.202149 15.870769 29.189453 27.953288 50.961914 36.247559 21.772459 8.294271 47.572429 12.441406 77.399899 12.441406z"/><path d="m1303.73682 467h101.44531v-264.858398h90.91797v-80.390625h-283.28125v80.390625h90.91797z"/><path d="m1443.58545 467h106.70898l68.667-262.944336h33.01757v-82.304687h-95.70312zm70.82031-68.666992h211.02539l-21.05469-71.538086h-168.91601zm175.13672 68.666992h106.70898l-112.69042-345.249023h-62.68555v82.304687z"/><path d="m1941.12451 473.220703c31.74154 0 59.65495-6.300456 83.74024-18.901367 24.08528-12.600912 42.94677-29.667969 56.58447-51.201172 13.63769-21.533203 20.45654-45.777995 20.45654-72.734375v-2.631836h-97.13867l-.23926 2.631836c-1.11653 12.122396-4.46614 22.689616-10.04883 31.70166-5.58268 9.012044-12.91992 15.990397-22.01171 20.935059-9.0918 4.944661-19.45964 7.416992-31.10352 7.416992-13.87695 0-25.9196-3.748372-36.12793-11.245117s-18.06396-18.462728-23.56689-32.897949c-5.50293-14.435222-8.2544-31.861166-8.2544-52.277832v-.239258c0-20.257162 2.75147-37.483724 8.2544-51.679688 5.50293-14.195963 13.31868-25.042317 23.44726-32.539062s22.13135-11.245117 36.0083-11.245117c12.60091 0 23.40739 2.591959 32.41944 7.775878 9.01204 5.18392 16.11002 12.281902 21.29394 21.293946s8.2544 19.260254 9.21143 30.744629l.23925 2.871093h97.13868v-2.15332c0-27.115885-6.69922-51.480306-20.09766-73.093262-13.39844-21.612955-32.10042-38.719889-56.10596-51.3208-24.00553-12.600912-52.03857-18.901368-84.09912-18.901368-35.09114 0-65.43701 6.978353-91.0376 20.935059-25.60058 13.956706-45.33935 34.213867-59.2163 60.771484-13.87696 26.557618-20.81543 58.817546-20.81543 96.779786v.239257c0 37.96224 6.8986 70.262045 20.6958 96.899414 13.7972 26.63737 33.49609 46.974284 59.09668 61.010743 25.60058 14.036458 56.0262 21.054687 91.27685 21.054687z"/><path d="m2214.23975 379.670898 75.36621-101.445312h26.0791l116.04004-156.474609h-106.46973l-106.70898 146.425781h-4.30664zm-99.05274 87.329102h101.44531v-345.249023h-101.44531zm203.84766 0h117.9541l-140.20508-226.577148-74.16992 64.121093z"/></g><path d="m305.114318.62443771c8.717817-1.14462121 17.926803-.36545135 26.712694-.36545135 32.548987 0 64.505987 5.05339923 95.64868 14.63098274 39.74418 12.2236582 76.762804 31.7666864 109.435876 57.477568 40.046637 31.5132839 73.228974 72.8472109 94.520714 119.2362609 39.836383 86.790386 39.544267 191.973146-1.268422 278.398081-26.388695 55.880442-68.724007 102.650458-119.964986 136.75724-41.808813 27.828603-90.706831 44.862601-140.45707 50.89341-63.325458 7.677926-131.784923-3.541603-188.712259-32.729444-106.868873-54.795293-179.52309291-165.076271-180.9604082-285.932068-.27660564-23.300971.08616998-46.74071 4.69884909-69.814998 7.51316071-37.57857 20.61272131-73.903917 40.28618971-106.877282 21.2814003-35.670293 48.7704861-67.1473767 81.6882804-92.5255597 38.602429-29.7610135 83.467691-51.1674988 130.978372-62.05777669 11.473831-2.62966514 22.9946-4.0869914 34.57273-5.4964306l3.658171-.44480576c3.050084-.37153079 6.104217-.74794222 9.162589-1.14972654zm-110.555861 549.44131429c-14.716752 1.577863-30.238964 4.25635-42.869928 12.522173 2.84343.683658 6.102369.004954 9.068638 0 7.124652-.011559 14.317732-.279903 21.434964.032202 17.817402.781913 36.381729 3.63214 53.58741 8.350042 22.029372 6.040631 41.432961 17.928687 62.656049 25.945156 22.389644 8.456554 44.67706 11.084675 68.427 11.084675 11.96813 0 23.845573-.035504 35.450133-3.302696-6.056202-3.225083-14.72582-2.619864-21.434964-3.963236-14.556814-2.915455-28.868774-6.474936-42.869928-11.470264-10.304996-3.676672-20.230803-8.214291-30.11097-12.848661l-6.348531-2.985046c-9.1705-4.309263-18.363277-8.560752-27.845391-12.142608-24.932161-9.418465-52.560181-14.071964-79.144482-11.221737zm22.259385-62.614168c-29.163917 0-58.660076 5.137344-84.915434 18.369597-6.361238 3.206092-12.407546 7.02566-18.137277 11.258891-1.746125 1.290529-4.841829 2.948483-5.487351 5.191839-.654591 2.275558 1.685942 4.182039 3.014086 5.637703 6.562396-3.497556 12.797498-7.199878 19.78612-9.855246 45.19892-17.169893 99.992458-13.570779 145.098218 2.172348 22.494346 7.851335 43.219483 19.592421 65.129314 28.800338 24.503461 10.297807 49.53043 16.975034 75.846795 20.399104 31.04195 4.037546 66.433549.7654 94.808495-13.242161 9.970556-4.921843 23.814245-12.422267 28.030337-23.320339-5.207047.454947-9.892236 2.685918-14.83959 4.224149-7.866632 2.445646-15.827248 4.51974-23.908229 6.138887-27.388113 5.486604-56.512458 6.619429-84.091013 1.639788-25.991939-4.693152-50.142596-14.119246-74.179513-24.03502l-3.068058-1.268177c-2.045137-.846788-4.089983-1.695816-6.135603-2.544467l-3.069142-1.272366c-12.279956-5.085721-24.606928-10.110797-37.210937-14.51024-24.485325-8.546552-50.726667-13.784628-76.671218-13.784628zm51.114145-447.9909432c-34.959602 7.7225298-66.276908 22.7605319-96.457338 41.7180089-17.521434 11.0054099-34.281927 22.2799893-49.465301 36.4444283-22.5792616 21.065423-39.8360564 46.668751-54.8866988 73.411509-15.507372 27.55357-25.4498976 59.665686-30.2554517 90.824149-4.7140432 30.568106-5.4906485 62.70747-.0906864 93.301172 6.7503648 38.248526 19.5989769 74.140579 39.8896436 107.337631 6.8187918-3.184625 11.659796-10.445603 17.3128555-15.336896 11.4149428-9.875888 23.3995608-19.029311 36.2745548-26.928535 4.765981-2.923712 9.662222-5.194315 14.83959-7.275014 1.953055-.785216 5.14604-1.502727 6.06527-3.647828 1.460876-3.406732-1.240754-9.335897-1.704904-12.865654-1.324845-10.095517-2.124534-20.362774-1.874735-30.549941.725492-29.668947 6.269727-59.751557 16.825623-87.521453 7.954845-20.924233 20.10682-39.922168 34.502872-56.971512 4.884699-5.785498 10.077731-11.170545 15.437296-16.512656 3.167428-3.157378 7.098271-5.858983 9.068639-9.908915-10.336599.006606-20.674847 2.987289-30.503603 6.013385-21.174447 6.519522-41.801477 16.19312-59.358362 29.841512-8.008432 6.226409-13.873368 14.387371-21.44733 20.939921-2.32322 2.010516-6.484901 4.704691-9.695199 3.187928-4.8500728-2.29042-4.1014979-11.835213-4.6571581-16.222019-2.1369011-16.873476 4.2548401-38.216325 12.3778671-52.843142 13.039878-23.479694 37.150915-43.528712 65.467327-42.82854 12.228647.302197 22.934587 4.551115 34.625711 7.324555-2.964621-4.211764-6.939158-7.28162-10.717482-10.733763-9.257431-8.459031-19.382979-16.184864-30.503603-22.028985-4.474136-2.350694-9.291232-3.77911-14.015169-5.506421-2.375159-.867783-5.36616-2.062533-6.259834-4.702213-1.654614-4.888817 7.148561-9.416813 10.381943-11.478522 12.499882-7.969406 27.826705-14.525258 42.869928-14.894334 23.509209-.577147 46.479246 12.467678 56.162903 34.665926 3.404469 7.803171 4.411273 16.054969 5.079109 24.382907l.121749 1.56229.174325 2.345587c.01913.260708.038244.521433.057403.782164l.11601 1.56437.120128 1.563971c7.38352-6.019164 12.576553-14.876995 19.78612-21.323859 16.861073-15.07846 39.936636-21.7722 61.831627-14.984333 19.786945 6.133107 36.984382 19.788105 47.105807 37.959541 2.648042 4.754231 10.035685 16.373942 4.698379 21.109183-4.177345 3.707277-9.475079.818243-13.880788-.719162-3.33605-1.16376-6.782939-1.90214-10.241828-2.585698l-1.887262-.369639c-.629089-.122886-1.257979-.246187-1.886079-.372129-11.980496-2.401886-25.91652-2.152533-37.923398-.041284-7.762754 1.364839-15.349083 4.127545-23.083807 5.271929v1.651348c21.149714.175043 41.608563 12.240618 52.043268 30.549941 4.323267 7.585468 6.482428 16.267431 8.138691 24.770223 2.047864 10.50918.608423 21.958802-2.263037 32.201289-.962925 3.433979-2.710699 9.255807-6.817143 10.046802-2.902789.558982-5.36781-2.330878-7.024898-4.279468-4.343878-5.10762-8.475879-9.96341-13.573278-14.374161-12.895604-11.157333-26.530715-21.449361-40.396663-31.373138-7.362086-5.269452-15.425755-12.12007-23.908229-15.340199 2.385052 5.745041 4.721463 11.086326 5.532694 17.339156 2.385876 18.392716-5.314223 35.704625-16.87179 49.540445-3.526876 4.222498-7.29943 8.475545-11.744712 11.755948-1.843407 1.360711-4.156734 3.137561-6.595373 2.752797-7.645687-1.207961-8.555849-12.73272-9.728176-18.637115-3.970415-19.998652-2.375984-39.861068 3.132802-59.448534-4.901187 2.485279-8.443727 7.923994-11.521293 12.385111-6.770975 9.816439-12.645804 20.199291-16.858599 31.375615-16.777806 44.519521-16.616219 96.664142 5.118834 139.523233 2.427098 4.786433 6.110614 4.144058 10.894733 4.144058.720854 0 1.44257-.004515 2.164851-.010924l2.168232-.022283c4.338648-.045438 8.686803-.064635 12.979772.508795 2.227588.297243 5.320818.032202 7.084256 1.673642 2.111344 1.966755.986008 5.338808.4996 7.758859-1.358647 6.765574-1.812904 12.914369-1.812904 19.816178 9.02412-1.398692 11.525415-15.866153 14.724172-23.118874 3.624982-8.216283 7.313444-16.440823 10.667192-24.770223 1.648843-4.093692 3.854171-8.671229 3.275427-13.210785-.649644-5.10184-4.335633-10.510831-6.904531-14.862134-4.86244-8.234447-10.389363-16.70834-13.969002-25.595896-2.861567-7.104926-.197036-15.983399 7.871579-18.521521 4.450228-1.400344 9.198073 1.345848 12.094266 4.562675 6.07269 6.74328 9.992815 16.777697 14.401823 24.692609l34.394873 61.925556c2.920926 5.243856 5.848447 10.481933 8.836976 15.687808 1.165732 2.031158 2.352075 5.167068 4.740424 6.0332 2.127008.77118 5.033095-.325315 7.148561-.748886 5.492297-1.099798 10.97635-2.287117 16.488434-3.28288 6.605266-1.193099 16.673928-.969342 21.434964-6.129805-6.963066-2.205375-15.011895-2.074919-22.259386-1.577863-4.352947.298894-9.178287 1.856116-13.178381-.686135-5.953149-3.783239-9.910373-12.522173-13.552668-18.377854-8.980425-14.439388-17.441465-29.095929-26.041008-43.760726l-1.376261-2.335014-2.765943-4.665258c-1.380597-2.334387-2.750786-4.67476-4.079753-7.036188-1.02723-1.826391-2.549937-4.233231-1.078344-6.24705 1.545791-2.114476 4.91472-2.239146 7.956473-2.243117l.603351.000261c1.195428.001526 2.315572.002427 3.222811-.11692 12.27399-1.615019 24.718635-2.952611 37.098976-2.952611-.963749-3.352237-3.719791-7.141255-2.838484-10.73046 1.972017-8.030506 13.526287-10.543033 18.899867-4.780653 3.60767 3.868283 5.704174 9.192229 8.051303 13.859765 3.097352 6.162006 6.624228 12.118418 9.940876 18.16483 5.805578 10.585967 12.146205 20.881297 18.116667 31.375615.49237.865561.999687 1.726685 1.512269 2.587098l.771613 1.290552c2.577138 4.303168 5.164895 8.635123 6.553094 13.461506-20.735854-.9487-36.30176-25.018751-45.343193-41.283704-.721369 2.604176.450959 4.928448 1.388326 7.431066 1.948109 5.197619 4.276275 10.147535 7.20627 14.862134 4.184765 6.732546 8.982075 13.665732 15.313633 18.553722 11.236043 8.673707 26.05255 8.721596 39.572241 7.794364 8.669619-.595311 19.50252-4.542034 28.030338-1.864372 8.513803 2.673532 11.940924 12.063098 6.884745 19.276187-3.787393 5.403211-8.842747 7.443452-15.128962 8.257566 4.445282 9.53571 10.268996 18.385285 14.490036 28.072919 1.758491 4.035895 3.59118 10.22102 7.8048 12.350433 2.805507 1.416857 6.824562.09743 9.85761.034678-3.043765-8.053625-8.742992-14.887729-11.541904-23.118874 8.533589.390544 16.786875 4.843404 24.732651 7.685374 15.630376 5.590144 31.063836 11.701854 46.475333 17.86913l7.112077 2.848685c6.338978 2.538947 12.71588 5.052299 18.961699 7.812528 2.285297 1.009799 5.449427 3.370401 7.975455 1.917215 2.061054-1.186494 3.394144-4.015253 4.665403-5.931643 3.55573-5.361927 6.775921-10.928622 9.965609-16.513481 12.774414-22.36586 22.143967-46.872692 28.402976-71.833646 20.645168-82.323009 2.934117-173.156241-46.677107-241.922507-19.061454-26.420745-43.033164-49.262193-69.46165-68.1783861-66.13923-47.336721-152.911262-66.294198-232.486917-48.7172481zm135.205158 410.5292842c-17.532977 4.570931-35.601827 8.714164-53.58741 11.040088 2.365265 8.052799 8.145286 15.885969 12.376218 23.118874 1.635653 2.796558 3.3859 6.541816 6.618457 7.755557 3.651364 1.370619 8.063669-.853747 11.508927-1.975838-1.595256-4.364513-4.279573-8.292245-6.476657-12.385112-.905215-1.687677-2.305907-3.685809-1.559805-5.68972 1.410585-3.786541 7.266452-3.563609 10.509727-4.221671 8.54678-1.733916 17.004522-3.898008 25.557073-5.611281 3.150939-.631641 7.538512-2.342438 10.705115-1.285575 2.371037.791232 3.800147 2.744743 5.152304 4.781948l.606196.918752c.80912 1.222827 1.637246 2.41754 2.671212 3.351165 3.457625 3.121874 8.628398 3.60159 13.017619 4.453686-2.678546-6.027421-7.130424-11.301001-9.984571-17.339156-1.659561-3.511592-3.023155-8.677834-6.656381-10.707341-5.005064-2.795733-15.341663 2.461334-20.458024 3.795624zm-110.472507-40.151706c-.825246 10.467897-4.036369 18.984725-9.068639 28.072919 5.76683.729896 11.649079.989984 17.312856 2.39363 4.244947 1.051908 8.156828 3.058296 12.366325 4.211763-2.250671-6.157877-6.426367-11.651913-9.661398-17.339156-3.266358-5.740912-6.189758-12.717032-10.949144-17.339156z"/></g></svg>
```
## /demo/new-compiler-vite-react-spa/public/translations/de.json
```json path="/demo/new-compiler-vite-react-spa/public/translations/de.json"
{
"version": 0.1,
"locale": "de",
"entries": {
"8492c53cfbaf": "Über Lingo.dev",
"8aa4fe3f0590": "Dies ist eine Demo-Anwendung, die den Lingo.dev-Compiler für automatische Übersetzungen in React-Anwendungen präsentiert.",
"af76f667703b": "Hauptfunktionen",
"999a96fc5866": "Automatische Extraktion übersetzbarer Texte aus JSX",
"b285bf7876d3": "Build-Zeit-Transformation ohne Laufzeit-Overhead",
"ab0450919701": "Unterstützung für mehrere Bundler (Vite, Webpack, Next.js)",
"2d626508fb8f": "Hash-basiertes Übersetzungssystem für stabile Kennungen",
"aca12d550fe2": "Unterstützung für Server- und Client-Komponenten",
"44a3311c3a4a": "Wie es funktioniert",
"0add30e37450": "Der Compiler analysiert Ihre React-Komponenten zur Build-Zeit und extrahiert automatisch alle übersetzbaren Strings. Anschließend generiert er Übersetzungen mit Ihrem konfigurierten Übersetzungsanbieter.",
"07d84d34dd3a": "Fügen Sie einfach die Direktive \"use i18n\" am Anfang Ihrer Komponentendateien hinzu, und der Compiler erledigt den Rest!",
"daa4d8839395": "{counter} mal geklickt",
"52ed9ee761d8": "Hallo Welt",
"f11fc78c3ac0": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
"556f5956dca7": "Willkommen zur Lingo.dev Compiler Demo",
"02704ec4e52a": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen.",
"de6bfb30be49": "Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}",
"5c15bd35e916": "Um es zu übersetzen, müssen Sie es in '<'>{translatableText} '<'/> einschließen",
"93b50fe805b7": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
"d756b03ffbf5": "Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}"
}
}
```
## /demo/new-compiler-vite-react-spa/public/translations/en.json
```json path="/demo/new-compiler-vite-react-spa/public/translations/en.json"
{
"version": 0.1,
"locale": "en",
"entries": {
"8492c53cfbaf": "About Lingo.dev",
"8aa4fe3f0590": "This is a demo application showcasing the Lingo.dev compiler for automatic translations in React applications.",
"af76f667703b": "Key Features",
"999a96fc5866": "Automatic extraction of translatable text from JSX",
"b285bf7876d3": "Build-time transformation with zero runtime overhead",
"ab0450919701": "Support for multiple bundlers (Vite, Webpack, Next.js)",
"2d626508fb8f": "Hash-based translation system for stable identifiers",
"aca12d550fe2": "Server and client component support",
"44a3311c3a4a": "How It Works",
"0add30e37450": "The compiler analyzes your React components at build time and automatically extracts all translatable strings. It then generates translations using your configured translation provider.",
"07d84d34dd3a": "Simply add the \"use i18n\" directive at the top of your component files, and the compiler handles the rest!",
"daa4d8839395": "Clicked {counter} times",
"52ed9ee761d8": "Hello World",
"f11fc78c3ac0": "<b0>Mixed</b0> content <i0>fragment</i0>",
"556f5956dca7": "Welcome to Lingo.dev compiler demo",
"02704ec4e52a": "It automatically extract text from your JSX and translate it to other languages.",
"de6bfb30be49": "Text inserted as an <code0></code0> is not translated: {text}",
"5c15bd35e916": "To translate it you have to wrap it into the '<'>{translatableText} '<'/>",
"93b50fe805b7": "Text external to the component is not translated: {externalText}",
"d756b03ffbf5": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}"
}
}
```
## /demo/new-compiler-vite-react-spa/public/translations/es.json
```json path="/demo/new-compiler-vite-react-spa/public/translations/es.json"
{
"version": 0.1,
"locale": "es",
"entries": {
"8492c53cfbaf": "Acerca de Lingo.dev",
"8aa4fe3f0590": "Esta es una aplicación de demostración que muestra el compilador Lingo.dev para traducciones automáticas en aplicaciones React.",
"af76f667703b": "Características principales",
"999a96fc5866": "Extracción automática de texto traducible desde JSX",
"b285bf7876d3": "Transformación en tiempo de compilación sin sobrecarga en tiempo de ejecución",
"ab0450919701": "Soporte para múltiples empaquetadores (Vite, Webpack, Next.js)",
"2d626508fb8f": "Sistema de traducción basado en hash para identificadores estables",
"aca12d550fe2": "Soporte para componentes de servidor y cliente",
"44a3311c3a4a": "Cómo funciona",
"0add30e37450": "El compilador analiza tus componentes de React en tiempo de compilación y extrae automáticamente todas las cadenas traducibles. Luego genera traducciones utilizando tu proveedor de traducción configurado.",
"07d84d34dd3a": "¡Simplemente agrega la directiva \"use i18n\" en la parte superior de tus archivos de componentes, y el compilador se encarga del resto!",
"daa4d8839395": "Clicado {counter} veces",
"52ed9ee761d8": "Hola Mundo",
"f11fc78c3ac0": "Contenido <b0>mixto</b0> <i0>fragmento</i0>",
"556f5956dca7": "Bienvenido a la demo de Lingo.dev compiler",
"02704ec4e52a": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas.",
"de6bfb30be49": "El texto insertado como <code0></code0> no se traduce: {text}",
"5c15bd35e916": "Para traducirlo tienes que envolverlo en el '<'>{translatableText} '<'/>",
"93b50fe805b7": "El texto externo al componente no se traduce: {externalText}",
"d756b03ffbf5": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}"
}
}
```
## /demo/new-compiler-vite-react-spa/public/translations/fr.json
```json path="/demo/new-compiler-vite-react-spa/public/translations/fr.json"
{
"version": 0.1,
"locale": "fr",
"entries": {
"8492c53cfbaf": "À propos de Lingo.dev",
"8aa4fe3f0590": "Ceci est une application de démonstration présentant le compilateur Lingo.dev pour les traductions automatiques dans les applications React.",
"af76f667703b": "Fonctionnalités clés",
"999a96fc5866": "Extraction automatique du texte traduisible à partir de JSX",
"b285bf7876d3": "Transformation au moment de la compilation sans surcharge d'exécution",
"ab0450919701": "Prise en charge de plusieurs bundlers (Vite, Webpack, Next.js)",
"2d626508fb8f": "Système de traduction basé sur des hachages pour des identifiants stables",
"aca12d550fe2": "Prise en charge des composants serveur et client",
"44a3311c3a4a": "Comment ça fonctionne",
"0add30e37450": "Le compilateur analyse vos composants React au moment de la compilation et extrait automatiquement toutes les chaînes traduisibles. Il génère ensuite des traductions en utilisant votre fournisseur de traduction configuré.",
"07d84d34dd3a": "Ajoutez simplement la directive \"use i18n\" en haut de vos fichiers de composants, et le compilateur s'occupe du reste !",
"daa4d8839395": "Cliqué {counter} fois",
"52ed9ee761d8": "Bonjour le monde",
"f11fc78c3ac0": "<b0>Contenu</b0> mixte <i0>fragment</i0>",
"556f5956dca7": "Bienvenue dans la démo du compilateur Lingo.dev",
"02704ec4e52a": "Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues.",
"de6bfb30be49": "Le texte inséré comme un <code0></code0> n'est pas traduit : {text}",
"5c15bd35e916": "Pour le traduire, vous devez l'envelopper dans le '<'>{translatableText} '<'/>",
"93b50fe805b7": "Le texte externe au composant n'est pas traduit : {externalText}",
"d756b03ffbf5": "Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}"
}
}
```
## /demo/new-compiler-vite-react-spa/src/.lingo/cache/de.json
```json path="/demo/new-compiler-vite-react-spa/src/.lingo/cache/de.json"
{
"version": 0.1,
"locale": "de",
"entries": {
"efbc536366bb": "Lingo.dev Compiler Next Demo",
"3ef98198a8f7": "TanStack Logo",
"82ac8c79339b": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
"326bfb1053ea": "Willkommen zur Lingo.dev Compiler Demo",
"f137e96eeea8": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen.",
"2ade82604aa5": "Text, der als <code0/> eingefügt wird, wird nicht übersetzt: {text}",
"3fb9601148ba": "Um ihn zu übersetzen, müssen Sie ihn in das {translatableText} einpacken",
"6a920ca9f582": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
"59c532977c48": "Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}",
"9e56aaf19495": "Button",
"17e7dc4b1952": "Lingo.dev Compiler Tanstack Router Demo",
"d1980077e43e": "Button",
"52ed9ee761d8": "Hallo Welt",
"f11fc78c3ac0": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
"556f5956dca7": "Willkommen zur Lingo.dev Compiler Demo",
"02704ec4e52a": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen.",
"de6bfb30be49": "Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}",
"8f2e2c5d041a": "Um ihn zu übersetzen, müssen Sie ihn in das {translatableText} einpacken",
"93b50fe805b7": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
"d756b03ffbf5": "Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}",
"5f1bc5ab9ff5": "Lingo.dev Compiler Tanstack Router Demo",
"daa4d8839395": "{counter} mal geklickt",
"b6334a55dccb": "<h10>Willkommen zur Lingo.dev Compiler Demo </h10><p0>Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen. </p0><Button0></Button0><div0>Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}</div0> Um ihn zu übersetzen, müssen Sie ihn in das <>{translatableText}</> einpacken<div1>Text außerhalb der Komponente wird nicht übersetzt: {externalText}</div1><div2>Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}</div2>",
"3370837cf468": "<h10>Willkommen zur Lingo.dev Compiler Demo </h10><p0>Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen. </p0><Button0></Button0><div0>Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}</div0> Um ihn zu übersetzen, müssen Sie ihn in das {translatableText} einpacken<div1>Text außerhalb der Komponente wird nicht übersetzt: {externalText}</div1><div2>Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}</div2>",
"263ee35e340e": "Um ihn zu übersetzen, müssen Sie ihn in das <>{translatableText}</> einpacken",
"54a455b8a0b0": "Um ihn zu übersetzen, müssen Sie ihn in das <>{translatableText}</> einpacken",
"b790816bd521": "Um ihn zu übersetzen, müssen Sie ihn in das '<>'{translatableText}'</>' einpacken",
"6b03202608a3": "'Um ihn zu übersetzen, müssen Sie ihn in das <>'{translatableText}'</> ' einpacken",
"17e475720c65": "Um ihn zu übersetzen, müssen Sie ihn in das '<''>'{translatableText}'<'/'>' einpacken",
"1a95cb0327e7": "Um ihn zu übersetzen, müssen Sie ihn in das '<'>{translatableText}'<'/> einpacken",
"5c15bd35e916": "Um es zu übersetzen, müssen Sie es in '<'>{translatableText} '<'/> einschließen",
"8492c53cfbaf": "Über Lingo.dev",
"8aa4fe3f0590": "Dies ist eine Demo-Anwendung, die den Lingo.dev-Compiler für automatische Übersetzungen in React-Anwendungen präsentiert.",
"af76f667703b": "Hauptfunktionen",
"999a96fc5866": "Automatische Extraktion übersetzbarer Texte aus JSX",
"b285bf7876d3": "Build-Zeit-Transformation ohne Laufzeit-Overhead",
"ab0450919701": "Unterstützung für mehrere Bundler (Vite, Webpack, Next.js)",
"2d626508fb8f": "Hash-basiertes Übersetzungssystem für stabile Kennungen",
"aca12d550fe2": "Unterstützung für Server- und Client-Komponenten",
"44a3311c3a4a": "Wie es funktioniert",
"0add30e37450": "Der Compiler analysiert Ihre React-Komponenten zur Build-Zeit und extrahiert automatisch alle übersetzbaren Strings. Anschließend generiert er Übersetzungen mit Ihrem konfigurierten Übersetzungsanbieter.",
"07d84d34dd3a": "Fügen Sie einfach die Direktive \"use i18n\" am Anfang Ihrer Komponentendateien hinzu, und der Compiler erledigt den Rest!"
}
}
```
## /demo/new-compiler-vite-react-spa/src/.lingo/cache/en.json
```json path="/demo/new-compiler-vite-react-spa/src/.lingo/cache/en.json"
{
"version": 0.1,
"locale": "en",
"entries": {
"efbc536366bb": "Lingo.dev compiler Next demo",
"3ef98198a8f7": "TanStack Logo",
"82ac8c79339b": "<b0>Mixed</b0> content <i0>fragment</i0>",
"326bfb1053ea": "Welcome to Lingo.dev compiler demo",
"f137e96eeea8": "It automatically extract text from your JSX and translate it to other languages.",
"2ade82604aa5": "Text inserted as an <code0/> is not translated: {text}",
"3fb9601148ba": "To translate it you have to wrap it into the {translatableText}",
"6a920ca9f582": "Text external to the component is not translated: {externalText}",
"59c532977c48": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}",
"9e56aaf19495": "Button",
"17e7dc4b1952": "Lingo.dev compiler Tanstack router demo",
"d1980077e43e": "Button",
"52ed9ee761d8": "Hello World",
"f11fc78c3ac0": "<b0>Mixed</b0> content <i0>fragment</i0>",
"556f5956dca7": "Welcome to Lingo.dev compiler demo",
"02704ec4e52a": "It automatically extract text from your JSX and translate it to other languages.",
"de6bfb30be49": "Text inserted as an <code0></code0> is not translated: {text}",
"8f2e2c5d041a": "To translate it you have to wrap it into the {translatableText}",
"93b50fe805b7": "Text external to the component is not translated: {externalText}",
"d756b03ffbf5": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}",
"5f1bc5ab9ff5": "Lingo.dev compiler Tanstack router demo",
"daa4d8839395": "Clicked {counter} times",
"b6334a55dccb": "<h10>Welcome to Lingo.dev compiler demo </h10><p0>It automatically extract text from your JSX and translate it to other languages. </p0><Button0></Button0><div0>Text inserted as an <code0></code0> is not translated: {text}</div0> To translate it you have to wrap it into the <>{translatableText}</><div1>Text external to the component is not translated: {externalText}</div1><div2>Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}</div2>",
"3370837cf468": "<h10>Welcome to Lingo.dev compiler demo </h10><p0>It automatically extract text from your JSX and translate it to other languages. </p0><Button0></Button0><div0>Text inserted as an <code0></code0> is not translated: {text}</div0> To translate it you have to wrap it into the {translatableText}<div1>Text external to the component is not translated: {externalText}</div1><div2>Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}</div2>",
"263ee35e340e": "To translate it you have to wrap it into the <>{translatableText}</>",
"54a455b8a0b0": "To translate it you have to wrap it into the <>{translatableText}</>",
"b790816bd521": "To translate it you have to wrap it into the '<>'{translatableText}'</>'",
"6b03202608a3": "'To translate it you have to wrap it into the <>'{translatableText}'</> '",
"17e475720c65": "To translate it you have to wrap it into the '<''>'{translatableText}'<'/'>'",
"1a95cb0327e7": "To translate it you have to wrap it into the '<'>{translatableText}'<'/>",
"5c15bd35e916": "To translate it you have to wrap it into the '<'>{translatableText} '<'/>",
"8492c53cfbaf": "About Lingo.dev",
"8aa4fe3f0590": "This is a demo application showcasing the Lingo.dev compiler for automatic translations in React applications.",
"af76f667703b": "Key Features",
"999a96fc5866": "Automatic extraction of translatable text from JSX",
"b285bf7876d3": "Build-time transformation with zero runtime overhead",
"ab0450919701": "Support for multiple bundlers (Vite, Webpack, Next.js)",
"2d626508fb8f": "Hash-based translation system for stable identifiers",
"aca12d550fe2": "Server and client component support",
"44a3311c3a4a": "How It Works",
"0add30e37450": "The compiler analyzes your React components at build time and automatically extracts all translatable strings. It then generates translations using your configured translation provider.",
"07d84d34dd3a": "Simply add the \"use i18n\" directive at the top of your component files, and the compiler handles the rest!"
}
}
```
## /demo/new-compiler-vite-react-spa/src/.lingo/cache/es.json
```json path="/demo/new-compiler-vite-react-spa/src/.lingo/cache/es.json"
{
"version": 0.1,
"locale": "es",
"entries": {
"efbc536366bb": "Demo de Lingo.dev compiler Next",
"3ef98198a8f7": "Logo de TanStack",
"82ac8c79339b": "Contenido <b0>mixto</b0> <i0>fragmento</i0>",
"326bfb1053ea": "Bienvenido a la demo de Lingo.dev compiler",
"f137e96eeea8": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas.",
"2ade82604aa5": "El texto insertado como <code0/> no se traduce: {text}",
"3fb9601148ba": "Para traducirlo tienes que envolverlo en el {translatableText}",
"6a920ca9f582": "El texto externo al componente no se traduce: {externalText}",
"59c532977c48": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}",
"9e56aaf19495": "Botón",
"17e7dc4b1952": "Demo de Lingo.dev compiler con Tanstack router",
"d1980077e43e": "Botón",
"52ed9ee761d8": "Hola Mundo",
"f11fc78c3ac0": "Contenido <b0>mixto</b0> <i0>fragmento</i0>",
"556f5956dca7": "Bienvenido a la demo de Lingo.dev compiler",
"02704ec4e52a": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas.",
"de6bfb30be49": "El texto insertado como <code0></code0> no se traduce: {text}",
"8f2e2c5d041a": "Para traducirlo tienes que envolverlo en el {translatableText}",
"93b50fe805b7": "El texto externo al componente no se traduce: {externalText}",
"d756b03ffbf5": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}",
"5f1bc5ab9ff5": "Demo de Lingo.dev compiler con Tanstack router",
"daa4d8839395": "Clicado {counter} veces",
"b6334a55dccb": "<h10>Bienvenido a la demo de Lingo.dev compiler </h10><p0>Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas. </p0><Button0></Button0><div0>El texto insertado como <code0></code0> no se traduce: {text}</div0> Para traducirlo tienes que envolverlo en el <>{translatableText}</><div1>El texto externo al componente no se traduce: {externalText}</div1><div2>El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}</div2>",
"3370837cf468": "<h10>Bienvenido a la demo de Lingo.dev compiler </h10><p0>Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas. </p0><Button0></Button0><div0>El texto insertado como <code0></code0> no se traduce: {text}</div0> Para traducirlo tienes que envolverlo en el {translatableText}<div1>El texto externo al componente no se traduce: {externalText}</div1><div2>El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}</div2>",
"263ee35e340e": "Para traducirlo tienes que envolverlo en el <>{translatableText}</>",
"54a455b8a0b0": "Para traducirlo tienes que envolverlo en el <>{translatableText}</>",
"b790816bd521": "Para traducirlo tienes que envolverlo en el '<>'{translatableText}'</>'",
"6b03202608a3": "'Para traducirlo tienes que envolverlo en el <>'{translatableText}'</> '",
"17e475720c65": "Para traducirlo tienes que envolverlo en el '<''>'{translatableText}'<'/'>'",
"1a95cb0327e7": "Para traducirlo tienes que envolverlo en el '<'>{translatableText}'<'/>",
"5c15bd35e916": "Para traducirlo tienes que envolverlo en el '<'>{translatableText} '<'/>",
"8492c53cfbaf": "Acerca de Lingo.dev",
"8aa4fe3f0590": "Esta es una aplicación de demostración que muestra el compilador Lingo.dev para traducciones automáticas en aplicaciones React.",
"af76f667703b": "Características principales",
"999a96fc5866": "Extracción automática de texto traducible desde JSX",
"b285bf7876d3": "Transformación en tiempo de compilación sin sobrecarga en tiempo de ejecución",
"ab0450919701": "Soporte para múltiples empaquetadores (Vite, Webpack, Next.js)",
"2d626508fb8f": "Sistema de traducción basado en hash para identificadores estables",
"aca12d550fe2": "Soporte para componentes de servidor y cliente",
"44a3311c3a4a": "Cómo funciona",
"0add30e37450": "El compilador analiza tus componentes de React en tiempo de compilación y extrae automáticamente todas las cadenas traducibles. Luego genera traducciones utilizando tu proveedor de traducción configurado.",
"07d84d34dd3a": "¡Simplemente agrega la directiva \"use i18n\" en la parte superior de tus archivos de componentes, y el compilador se encarga del resto!"
}
}
```
## /demo/new-compiler-vite-react-spa/src/.lingo/cache/fr.json
```json path="/demo/new-compiler-vite-react-spa/src/.lingo/cache/fr.json"
{
"version": 0.1,
"locale": "fr",
"entries": {
"efbc536366bb": "Démo Lingo.dev compiler Next",
"3ef98198a8f7": "Logo TanStack",
"82ac8c79339b": "<b0>Contenu</b0> mixte <i0>fragment</i0>",
"326bfb1053ea": "Bienvenue dans la démo du compilateur Lingo.dev",
"f137e96eeea8": "Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues.",
"2ade82604aa5": "Le texte inséré comme un <code0/> n'est pas traduit : {text}",
"3fb9601148ba": "Pour le traduire, vous devez l'envelopper dans le {translatableText}",
"6a920ca9f582": "Le texte externe au composant n'est pas traduit : {externalText}",
"59c532977c48": "Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}",
"9e56aaf19495": "Bouton",
"17e7dc4b1952": "Démo du routeur Tanstack du compilateur Lingo.dev",
"d1980077e43e": "Bouton",
"52ed9ee761d8": "Bonjour le monde",
"f11fc78c3ac0": "<b0>Contenu</b0> mixte <i0>fragment</i0>",
"556f5956dca7": "Bienvenue dans la démo du compilateur Lingo.dev",
"02704ec4e52a": "Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues.",
"de6bfb30be49": "Le texte inséré comme un <code0></code0> n'est pas traduit : {text}",
"8f2e2c5d041a": "Pour le traduire, vous devez l'envelopper dans le {translatableText}",
"93b50fe805b7": "Le texte externe au composant n'est pas traduit : {externalText}",
"d756b03ffbf5": "Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}",
"5f1bc5ab9ff5": "Démo du routeur Tanstack du compilateur Lingo.dev",
"daa4d8839395": "Cliqué {counter} fois",
"b6334a55dccb": "<h10>Bienvenue dans la démo du compilateur Lingo.dev </h10><p0>Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues. </p0><Button0></Button0><div0>Le texte inséré comme un <code0></code0> n'est pas traduit : {text}</div0> Pour le traduire, vous devez l'envelopper dans le <>{translatableText}</><div1>Le texte externe au composant n'est pas traduit : {externalText}</div1><div2>Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}</div2>",
"3370837cf468": "<h10>Bienvenue dans la démo du compilateur Lingo.dev </h10><p0>Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues. </p0><Button0></Button0><div0>Le texte inséré comme un <code0></code0> n'est pas traduit : {text}</div0> Pour le traduire, vous devez l'envelopper dans le {translatableText}<div1>Le texte externe au composant n'est pas traduit : {externalText}</div1><div2>Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}</div2>",
"263ee35e340e": "Pour le traduire, vous devez l'envelopper dans le <>{translatableText}</>",
"54a455b8a0b0": "Pour le traduire, vous devez l'envelopper dans le <>{translatableText}</>",
"b790816bd521": "Pour le traduire, vous devez l'envelopper dans le '<>'{translatableText}'</>'",
"6b03202608a3": "'Pour le traduire, vous devez l'envelopper dans le <>'{translatableText}'</> '",
"17e475720c65": "Pour le traduire, vous devez l'envelopper dans le '<''>'{translatableText}'<'/'>'",
"1a95cb0327e7": "Pour le traduire, vous devez l'envelopper dans le '<'>{translatableText}'<'/>",
"5c15bd35e916": "Pour le traduire, vous devez l'envelopper dans le '<'>{translatableText} '<'/>",
"8492c53cfbaf": "À propos de Lingo.dev",
"8aa4fe3f0590": "Ceci est une application de démonstration présentant le compilateur Lingo.dev pour les traductions automatiques dans les applications React.",
"af76f667703b": "Fonctionnalités clés",
"999a96fc5866": "Extraction automatique du texte traduisible à partir de JSX",
"b285bf7876d3": "Transformation au moment de la compilation sans surcharge d'exécution",
"ab0450919701": "Prise en charge de plusieurs bundlers (Vite, Webpack, Next.js)",
"2d626508fb8f": "Système de traduction basé sur des hachages pour des identifiants stables",
"aca12d550fe2": "Prise en charge des composants serveur et client",
"44a3311c3a4a": "Comment ça fonctionne",
"0add30e37450": "Le compilateur analyse vos composants React au moment de la compilation et extrait automatiquement toutes les chaînes traduisibles. Il génère ensuite des traductions en utilisant votre fournisseur de traduction configuré.",
"07d84d34dd3a": "Ajoutez simplement la directive \"use i18n\" en haut de vos fichiers de composants, et le compilateur s'occupe du reste !"
}
}
```
## /demo/new-compiler-vite-react-spa/src/components/Header.tsx
```tsx path="/demo/new-compiler-vite-react-spa/src/components/Header.tsx"
import { LocaleSwitcher } from "@lingo.dev/compiler/react";
import { Link } from "@tanstack/react-router";
export default function Header() {
return (
<header className="p-4 flex gap-4 items-center justify-between bg-gray-800 text-white shadow-lg">
<div className="flex items-center gap-6">
<span className="font-semibold">
Lingo.dev compiler Tanstack router demo
</span>
<nav className="flex gap-4">
<Link
to="/"
className="hover:text-blue-300 transition-colors [&.active]:text-blue-400 [&.active]:font-semibold"
activeProps={{ className: "active" }}
>
Home
</Link>
<Link
to="/about"
className="hover:text-blue-300 transition-colors [&.active]:text-blue-400 [&.active]:font-semibold"
activeProps={{ className: "active" }}
data-testid="about-link"
>
About
</Link>
</nav>
</div>
<div>
This header is not translated, since it's not marked with "use i18n",
but "useDirective" is "true"
</div>
<LocaleSwitcher
locales={[
{ code: "en", label: "English" },
{ code: "es", label: "Spanish" },
{ code: "de", label: "Deutsch" },
{ code: "fr", label: "Français" },
]}
className="locale-switcher"
/>
</header>
);
}
```
## /demo/new-compiler-vite-react-spa/src/logo.svg
```svg path="/demo/new-compiler-vite-react-spa/src/logo.svg"
<?xml version="1.0" encoding="UTF-8"?>
<svg width="5355px" height="3786px" viewBox="0 0 5355 3786" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo</title>
<g id="logo" stroke="none" fill="none" transform="translate(0.9778, 0)" fill-rule="evenodd" stroke-width="1">
<g id="Layer_1" transform="translate(1117.351, 496.0658)" fill="#61DAFB">
<g id="Group" fill-rule="nonzero">
<path d="M3119.93396,1389.62036 C3119.93396,1182.92626 2861.10536,987.043843 2464.27723,865.571309 C2555.85295,461.086847 2515.15263,139.280027 2335.81684,36.2509659 C2294.48058,12.0836553 2246.14895,0.635981858 2193.36572,0.635981858 L2193.36572,142.459936 C2222.61908,142.459936 2246.14895,148.183773 2265.86317,158.995464 C2352.35135,208.602049 2389.87196,397.488661 2360.6186,640.433731 C2353.62323,700.216026 2342.17627,763.178229 2328.18553,827.412397 C2203.5408,796.885268 2067.4491,773.353939 1924.36204,758.090375 C1838.5098,640.433731 1749.47785,533.588779 1659.80995,440.099446 C1867.12721,247.396943 2061.72562,141.823954 2194.00166,141.823954 L2194.00166,0 C2019.11747,0 1790.17817,124.652444 1558.69509,340.886276 C1327.21202,125.924408 1098.27272,2.54392743 923.388526,2.54392743 L923.388526,144.367882 C1055.02863,144.367882 1250.26298,249.304888 1457.58024,440.735428 C1368.54828,534.224761 1279.51633,640.433731 1194.93598,758.090375 C1051.21297,773.353939 915.121273,796.885268 790.476541,828.048379 C775.849863,764.450193 765.038841,702.759953 757.407531,643.61364 C727.518233,400.66857 764.402898,211.781959 850.255137,161.539392 C869.333413,150.091718 894.13517,145.003864 923.388526,145.003864 L923.388526,3.17990929 C869.969355,3.17990929 821.637724,14.6275827 779.665518,38.7948933 C600.965673,141.823954 560.901295,462.994793 653.112959,866.20729 C257.556717,988.315807 0,1183.56224 0,1389.62036 C0,1595.67848 258.828602,1792.19688 655.656729,1913.66941 C564.081007,2318.15387 604.781328,2639.96069 784.117116,2742.98975 C825.453379,2767.15706 873.78501,2778.60474 927.204181,2778.60474 C1102.08837,2778.60474 1331.02768,2653.95229 1562.51075,2437.71846 C1793.99382,2652.68033 2022.93313,2776.06081 2197.81732,2776.06081 C2251.23649,2776.06081 2299.56812,2764.61314 2341.54033,2740.44583 C2520.24017,2637.41676 2560.30455,2316.24593 2468.09289,1913.03343 C2862.37724,1791.56089 3119.93396,1595.67848 3119.93396,1389.62036 L3119.93396,1389.62036 Z M2291.93681,965.42046 C2268.40694,1047.46212 2239.15358,1132.04771 2206.08457,1216.63329 C2180.01093,1165.75475 2152.6654,1114.8762 2122.7761,1063.99765 C2093.52275,1013.1191 2062.36156,963.512515 2031.20038,915.177893 C2121.50422,928.533513 2208.62834,945.069041 2291.93681,965.42046 Z M2000.67514,1642.74114 C1951.07162,1728.59869 1900.19622,1810.00437 1847.41299,1885.68621 C1752.65756,1893.95397 1656.63024,1898.40585 1559.96698,1898.40585 C1463.30372,1898.40585 1367.91234,1893.95397 1273.79285,1886.32219 C1221.00962,1810.64035 1169.49828,1729.87065 1119.89476,1644.64908 C1071.56313,1561.33546 1027.6831,1476.74987 987.61872,1391.52831 C1027.04716,1306.30674 1071.56313,1221.08517 1119.25882,1137.77154 C1168.86234,1051.91399 1219.73774,970.508315 1272.52096,894.826474 C1367.2764,886.55871 1463.30372,882.106837 1559.96698,882.106837 C1656.63024,882.106837 1752.02162,886.55871 1846.14111,894.190492 C1898.92434,969.872333 1950.43568,1050.64203 2000.0392,1135.8636 C2048.37083,1219.17722 2092.25086,1303.76281 2132.31524,1388.98438 C2092.25086,1474.20595 2048.37083,1559.42752 2000.67514,1642.74114 Z M2206.08457,1560.0635 C2240.42547,1645.28507 2269.67882,1730.50664 2293.84464,1813.18428 C2210.53617,1833.5357 2122.7761,1850.70721 2031.83632,1864.06283 C2062.99751,1815.09222 2094.15869,1764.84966 2123.41204,1713.33513 C2152.6654,1662.45658 2180.01093,1610.94205 2206.08457,1560.0635 Z M1561.23886,2238.65614 C1502.09621,2177.60188 1442.95356,2109.55182 1384.44685,2035.14195 C1441.68167,2037.68587 1500.18838,2039.59382 1559.33104,2039.59382 C1618.47369,2039.59382 1678.25229,2038.32185 1736.12305,2035.14195 C1678.88823,2109.55182 1619.74558,2177.60188 1561.23886,2238.65614 Z M1088.09764,1864.06283 C997.7938,1850.70721 910.669676,1834.17168 827.361207,1813.82026 C850.89108,1731.7786 880.144435,1647.19301 913.213446,1562.60742 C939.287089,1613.48597 966.632617,1664.36452 996.521915,1715.24307 C1026.41121,1766.12162 1056.93645,1815.7282 1088.09764,1864.06283 Z M1558.05915,540.584579 C1617.20181,601.638838 1676.34446,669.688896 1734.85117,744.098774 C1677.61634,741.554846 1619.10963,739.646901 1559.96698,739.646901 C1500.82433,739.646901 1441.04573,740.918864 1383.17496,744.098774 C1440.40979,669.688896 1499.55244,601.638838 1558.05915,540.584579 Z M1087.46169,915.177893 C1056.30051,964.148497 1025.13933,1014.39106 995.885972,1065.90559 C966.632617,1116.78414 939.287089,1167.66269 913.213446,1218.54124 C878.87255,1133.31967 849.619195,1048.0981 825.453379,965.42046 C908.761848,945.705023 996.521915,928.533513 1087.46169,915.177893 Z M511.933721,1711.42718 C286.810072,1615.39392 141.179237,1489.46951 141.179237,1389.62036 C141.179237,1289.77121 286.810072,1163.21082 511.933721,1067.81354 C566.624777,1044.28221 626.403373,1023.29481 688.089797,1003.57937 C724.33852,1128.23182 772.034208,1257.97211 831.176862,1390.89232 C772.670151,1523.17655 725.610405,1652.28087 689.997624,1776.29733 C627.039316,1756.58189 567.26072,1734.95851 511.933721,1711.42718 Z M854.070792,2620.24525 C767.582611,2570.63867 730.062003,2381.75206 759.315358,2138.80699 C766.310726,2079.02469 777.757691,2016.06249 791.748426,1951.82832 C916.393158,1982.35545 1052.48486,2005.88678 1195.57192,2021.15034 C1281.42416,2138.80699 1370.45611,2245.65194 1460.12401,2339.14127 C1252.80675,2531.84378 1058.20834,2637.41676 925.932296,2637.41676 C897.314883,2636.78078 873.149068,2631.05695 854.070792,2620.24525 L854.070792,2620.24525 Z M2362.52643,2135.62708 C2392.41573,2378.57215 2355.53106,2567.45876 2269.67882,2617.70133 C2250.60055,2629.149 2225.79879,2634.23686 2196.54543,2634.23686 C2064.90533,2634.23686 1869.67098,2529.29985 1662.35372,2337.86931 C1751.38568,2244.37998 1840.41763,2138.17101 1924.99798,2020.51436 C2068.72099,2005.2508 2204.81269,1981.71947 2329.45742,1950.55636 C2344.0841,2014.79053 2355.53106,2076.48077 2362.52643,2135.62708 L2362.52643,2135.62708 Z M2607.3643,1711.42718 C2552.67324,1734.95851 2492.89464,1755.94591 2431.20822,1775.66135 C2394.9595,1651.0089 2347.26381,1521.2686 2288.12115,1388.3484 C2346.62787,1256.06417 2393.68761,1126.95985 2429.30039,1002.94339 C2492.2587,1022.65883 2552.0373,1044.28221 2608.00024,1067.81354 C2833.12389,1163.8468 2978.75472,1289.77121 2978.75472,1389.62036 C2978.75472,1489.46951 2832.48794,1616.0299 2607.3643,1711.42718 L2607.3643,1711.42718 Z" id="Shape"></path>
</g>
<path d="M1537.37834,1099.4829 C1545.02735,1098.47702 1553.10731,1099.16174 1560.81604,1099.16174 C1589.37451,1099.16174 1617.41357,1103.60261 1644.73816,1112.01928 C1679.60968,1122.76128 1712.08981,1139.93545 1740.75715,1162.52987 C1775.89405,1190.22336 1805.00822,1226.54711 1823.68958,1267.31325 C1858.64201,1343.58359 1858.38571,1436.01692 1822.57667,1511.96611 C1799.42324,1561.07316 1762.27826,1602.17408 1717.31944,1632.14671 C1680.63641,1656.60215 1637.73331,1671.57142 1594.08247,1676.87122 C1538.52074,1683.61849 1478.45443,1673.7589 1428.50641,1648.10898 C1334.7397,1599.95554 1270.99292,1503.04196 1269.73182,1396.83535 C1269.48913,1376.35874 1269.80743,1355.76018 1273.85459,1335.48277 C1280.44663,1302.45918 1291.94018,1270.53691 1309.20168,1241.56031 C1327.87397,1210.21369 1351.99288,1182.55201 1380.87494,1160.24997 C1414.74469,1134.09636 1454.10946,1115.2846 1495.79531,1105.71435 C1505.55336,1103.47438 1515.35011,1102.20236 1525.19388,1100.99838 L1528.67012,1100.57481 C1531.56864,1100.22174 1534.47131,1099.86541 1537.37834,1099.4829 Z M1440.28829,1582.05277 C1427.38628,1583.43854 1413.77812,1585.79095 1402.70469,1593.0505 C1405.19749,1593.65093 1408.05457,1593.05485 1410.65507,1593.0505 C1416.90117,1593.04035 1423.20727,1592.80467 1429.44687,1593.07878 C1445.06719,1593.76551 1461.34234,1596.26875 1476.42637,1600.4123 C1488.01412,1603.59545 1498.77315,1608.6274 1509.54524,1613.66442 L1512.23902,1614.92271 C1518.52742,1617.854 1524.84413,1620.73472 1531.35625,1623.19891 C1550.98501,1630.62598 1570.52415,1632.93415 1591.34546,1632.93415 L1593.25225,1632.93318 C1603.09908,1632.91995 1612.8672,1632.72906 1622.42421,1630.03352 C1617.1148,1627.20106 1609.51424,1627.7326 1603.63241,1626.55277 C1590.87061,1623.99224 1578.32347,1620.86608 1566.04881,1616.47888 C1546.68964,1609.55943 1528.85694,1599.16793 1509.6734,1591.90838 C1487.81565,1583.63651 1463.59446,1579.54953 1440.28829,1582.05277 Z M1459.80285,1527.06119 C1434.23516,1527.06119 1408.3762,1531.57312 1385.35841,1543.19449 C1379.78158,1546.01028 1374.48085,1549.36485 1369.45766,1553.08274 C1367.92685,1554.21616 1365.21288,1555.67227 1364.64696,1557.64252 C1364.07308,1559.64106 1366.125,1561.31545 1367.28937,1562.5939 C1373.04255,1559.52213 1378.5088,1556.27053 1384.63565,1553.93842 C1424.26105,1538.85878 1472.29796,1542.01974 1511.84169,1555.84631 C1531.56224,1562.74183 1549.73174,1573.05357 1568.93985,1581.14052 C1590.42177,1590.18468 1612.36265,1596.04903 1635.43392,1599.05625 C1662.64806,1602.60227 1693.67549,1599.72848 1718.5515,1587.42618 C1727.29258,1583.10352 1739.42919,1576.51619 1743.1254,1566.94484 C1738.56043,1567.3444 1734.45298,1569.30378 1730.11569,1570.65475 C1723.2191,1572.80266 1716.24011,1574.62426 1709.1556,1576.04629 C1685.14474,1580.86496 1659.61174,1581.85988 1635.43392,1577.48645 C1610.81165,1573.03264 1588.07413,1563.72547 1565.31061,1554.26664 L1562.27515,1553.00498 C1550.63735,1548.16833 1538.97057,1543.34664 1527.01968,1539.16769 C1505.55366,1531.66159 1482.54816,1527.06119 1459.80285,1527.06119 Z M1504.61407,1133.60828 C1473.96537,1140.39067 1446.50982,1153.59796 1420.05097,1170.24757 C1404.69012,1179.91319 1389.99637,1189.81522 1376.68527,1202.25529 C1356.89028,1220.75623 1341.76143,1243.24263 1328.5667,1266.72974 C1314.97155,1290.92897 1306.25505,1319.13178 1302.04207,1346.49704 C1297.90932,1373.34381 1297.22848,1401.57056 1301.96257,1428.43981 C1307.88054,1462.03199 1319.14478,1493.55458 1336.93339,1522.71025 C1342.91135,1519.91332 1347.1554,1513.53629 1352.11138,1509.24045 C1362.11874,1500.56685 1372.62552,1492.52776 1383.91289,1485.59018 C1388.09117,1483.02239 1392.38365,1481.02821 1396.9226,1479.20082 C1398.63482,1478.51119 1401.43407,1477.88103 1402.23995,1475.99707 C1403.52069,1473.00507 1401.1522,1467.79772 1400.74528,1464.69767 C1399.58381,1455.83117 1398.88273,1446.81384 1399.10172,1437.86685 C1399.73775,1411.80978 1404.59833,1385.3894 1413.85256,1361.00019 C1420.82649,1342.62325 1431.48,1325.93811 1444.10086,1310.96434 C1448.38322,1305.88316 1452.9359,1301.15368 1457.63457,1296.46192 C1458.21308,1295.88421 1458.82064,1295.32387 1459.43565,1294.76658 L1460.17587,1294.09838 C1462.27545,1292.20409 1464.36137,1290.27877 1465.58495,1287.7593 C1456.52296,1287.76511 1447.45953,1290.38292 1438.84277,1293.04062 C1420.27936,1298.76647 1402.19587,1307.26241 1386.80393,1319.24926 C1379.78303,1324.71767 1374.6413,1331.88512 1368.00129,1337.63997 C1365.96455,1339.40573 1362.31605,1341.77192 1359.50162,1340.4398 C1355.24961,1338.42822 1355.90588,1330.0454 1355.41874,1326.19264 C1353.54534,1311.37332 1359.14891,1292.62874 1366.27028,1279.78257 C1377.7022,1259.16128 1398.84008,1241.55301 1423.66478,1242.16794 C1434.3855,1242.43335 1443.77128,1246.16501 1454.02076,1248.60081 C1451.42171,1244.90179 1447.93728,1242.20565 1444.62486,1239.17377 C1436.50897,1231.74453 1427.63201,1224.95924 1417.88268,1219.82657 C1415.26773,1218.45023 1412.51915,1217.43388 1409.75022,1216.45975 L1408.08733,1215.8778 C1407.25557,1215.58681 1406.42402,1215.29391 1405.59574,1214.9905 C1403.51346,1214.22836 1400.89128,1213.17906 1400.10781,1210.86073 C1398.65722,1206.56707 1406.37487,1202.59031 1409.20954,1200.77959 C1420.16806,1193.78038 1433.60492,1188.02263 1446.79315,1187.69848 C1467.40342,1187.1916 1487.541,1198.64836 1496.03056,1218.14421 C1499.41855,1225.92354 1500.09804,1234.21057 1500.70889,1242.5268 L1500.82326,1244.08631 C1500.88069,1244.86613 1500.93897,1245.64593 1501.00027,1246.42534 C1507.47332,1241.13895 1512.02599,1233.35946 1518.34654,1227.69743 C1533.12846,1214.45461 1553.35856,1208.57576 1572.55366,1214.53728 C1589.90066,1219.92375 1604.97747,1231.9164 1613.85081,1247.87566 C1616.17232,1252.05111 1622.64899,1262.25625 1617.96983,1266.41503 C1614.3076,1269.67098 1609.66313,1267.13366 1605.80069,1265.78341 C1601.8125,1264.38966 1597.64361,1263.69061 1593.51375,1262.86103 C1583.01058,1260.75155 1570.79301,1260.97055 1560.26672,1262.82477 C1553.46119,1264.02346 1546.81034,1266.44983 1540.02939,1267.4549 L1540.02939,1268.90522 C1558.57112,1269.05895 1576.50717,1279.65567 1585.65516,1295.73603 C1589.44532,1302.39805 1591.33824,1310.02308 1592.79026,1317.49075 C1594.5856,1326.72055 1593.32366,1336.77631 1590.80628,1345.77188 C1589.9621,1348.78781 1588.42984,1353.9009 1584.82977,1354.5956 C1582.28492,1355.08653 1580.12387,1352.54848 1578.67112,1350.83711 C1574.86289,1346.35128 1571.2404,1342.08663 1566.77157,1338.21284 C1555.46613,1328.41379 1543.51238,1319.37471 1531.35625,1310.65904 C1524.90199,1306.03109 1517.83266,1300.01446 1510.39617,1297.18635 C1512.48712,1302.23199 1514.53542,1306.92303 1515.24662,1312.41465 C1517.33829,1328.56825 1510.5877,1343.77263 1500.4553,1355.92409 C1497.36333,1359.63254 1494.05597,1363.36782 1490.15884,1366.24887 C1488.54275,1367.44393 1486.51468,1369.00447 1484.37675,1368.66655 C1477.67386,1367.60564 1476.87593,1357.4839 1475.84816,1352.2983 C1472.36734,1334.73427 1473.76516,1317.28988 1478.59466,1300.08698 C1474.29784,1302.2697 1471.19213,1307.04631 1468.49406,1310.96434 C1462.55802,1319.58573 1457.40762,1328.70458 1453.71431,1338.52031 C1439.00539,1377.62006 1439.14705,1423.41664 1458.20194,1461.05811 C1460.32975,1465.26184 1463.55905,1464.69767 1467.75323,1464.69767 C1472.80895,1464.69767 1477.91309,1464.44387 1482.93123,1465.11536 C1484.88413,1465.37642 1487.59593,1465.14364 1489.14192,1466.58526 C1490.99291,1468.31258 1490.00634,1471.27412 1489.57991,1473.39956 C1488.3888,1479.3415 1487.99056,1484.74174 1487.99056,1490.80333 C1495.9019,1489.57492 1498.09476,1476.86871 1500.89908,1470.49893 C1504.07706,1463.28289 1507.3107,1456.0596 1510.25089,1448.74421 C1511.69641,1445.14888 1513.6298,1441.12861 1513.12242,1437.1417 C1512.55289,1432.66095 1509.32142,1427.91044 1507.06929,1424.08887 C1502.80645,1416.85687 1497.96105,1409.41458 1494.82282,1401.60899 C1492.31412,1395.36901 1494.65008,1387.5714 1501.72375,1385.34226 C1505.62522,1384.1124 1509.7876,1386.52427 1512.32666,1389.34948 C1515.93315,1393.3614 1518.67364,1398.69976 1521.26801,1403.88732 L1522.0059,1405.3641 C1522.98612,1407.32427 1523.95508,1409.24214 1524.95258,1411.03604 L1555.1062,1465.42283 C1557.66694,1470.0283 1560.23347,1474.6287 1562.85348,1479.20082 C1563.87546,1480.9847 1564.91552,1483.73885 1567.00936,1484.49954 C1568.87408,1485.17684 1571.42182,1484.21383 1573.27642,1483.84182 C1578.09146,1482.87591 1582.89927,1481.83314 1587.73166,1480.9586 C1593.52242,1479.91074 1602.34951,1480.10726 1606.52346,1475.57503 C1600.41901,1473.63813 1593.36269,1473.75271 1587.00889,1474.18925 C1586.22321,1474.2433 1585.41997,1474.34419 1584.60911,1474.45086 L1583.91244,1474.54275 C1581.00382,1474.92353 1578.03411,1475.22838 1575.45555,1473.58665 C1570.23649,1470.26398 1566.76723,1462.58891 1563.57407,1457.4461 C1555.70103,1444.76455 1548.28333,1431.89228 1540.7442,1419.01276 C1538.34102,1414.90692 1535.86628,1410.83299 1533.5361,1406.68509 C1532.63554,1405.08104 1531.3006,1402.96721 1532.59073,1401.19855 C1533.93235,1399.36006 1536.8405,1399.23436 1539.486,1399.22865 L1540.63853,1399.22883 C1541.48104,1399.22712 1542.26426,1399.21253 1542.92044,1399.12605 C1553.68091,1397.70765 1564.591,1396.53289 1575.44471,1396.53289 C1574.5998,1393.58875 1572.18361,1390.26101 1572.95624,1387.10875 C1574.68509,1380.05587 1584.81459,1377.84921 1589.52555,1382.91009 C1592.68835,1386.30745 1594.52634,1390.98326 1596.58404,1395.08258 C1599.29945,1400.49442 1602.39143,1405.72571 1605.2991,1411.03604 C1610.38879,1420.33328 1615.94754,1429.37526 1621.18178,1438.59201 C1621.64941,1439.41555 1622.13242,1440.23451 1622.62001,1441.05306 L1623.35349,1442.2811 C1625.55616,1445.9674 1627.74247,1449.68746 1628.92907,1453.82031 C1610.75017,1452.98711 1597.1037,1431.84732 1589.17718,1417.56245 C1588.54476,1419.8496 1589.57253,1421.89091 1590.39431,1424.08887 C1592.10219,1428.65373 1594.14327,1433.00105 1596.71197,1437.1417 C1600.38071,1443.05463 1604.58646,1449.14377 1610.13726,1453.4367 C1619.98778,1461.05448 1632.97725,1461.09654 1644.82982,1460.28219 C1652.43038,1459.75935 1661.92747,1456.2931 1669.40371,1458.64478 C1676.86767,1460.99284 1679.87219,1469.23933 1675.4395,1475.5743 C1672.11913,1480.31973 1667.68716,1482.1116 1662.1761,1482.8266 C1666.07323,1491.20144 1671.17882,1498.97368 1674.87936,1507.48195 C1676.42101,1511.02652 1678.02771,1516.45867 1681.72174,1518.32885 C1684.1813,1519.57322 1687.70476,1518.41442 1690.3638,1518.35931 C1687.69536,1511.28612 1682.69891,1505.284 1680.24514,1498.0549 C1687.72644,1498.3979 1694.96201,1502.30868 1701.92799,1504.80467 C1717.73912,1510.4696 1733.32041,1516.74438 1748.90749,1523.00031 C1754.4648,1525.23017 1760.05536,1527.43755 1765.53101,1529.86175 C1767.5345,1530.74862 1770.30846,1532.82184 1772.523,1531.54557 C1774.3299,1530.50352 1775.49861,1528.01913 1776.61311,1526.33604 C1779.73038,1521.62687 1782.55349,1516.73786 1785.34985,1511.83289 C1796.54904,1492.18983 1804.76323,1470.66644 1810.25043,1448.74421 C1828.34983,1376.44313 1812.82274,1296.66786 1769.32912,1236.27314 C1752.61815,1213.06883 1731.60241,1193.00808 1708.43284,1176.39473 C1650.44929,1134.82074 1574.37719,1118.17113 1504.61407,1133.60828 Z M1623.14697,1494.16008 C1607.776,1498.17456 1591.93524,1501.81339 1576.16747,1503.85616 C1578.24107,1510.92862 1583.30835,1517.80819 1587.01757,1524.16056 C1588.45153,1526.61667 1589.98595,1529.90599 1592.8199,1530.97197 C1596.02101,1532.17573 1599.88923,1530.22215 1602.90965,1529.23667 C1601.5111,1525.40348 1599.15779,1521.95391 1597.23163,1518.35931 C1596.43804,1516.87709 1595.21007,1515.1222 1595.86417,1513.36225 C1597.10081,1510.03668 1602.23459,1510.23247 1605.07793,1509.65452 C1612.5708,1508.13169 1619.98561,1506.23105 1627.48354,1504.72635 C1630.24594,1504.17161 1634.09247,1502.66908 1636.8686,1503.59728 C1640.50626,1504.81337 1641.61498,1509.15561 1644.25884,1511.54718 C1647.2901,1514.289 1651.82326,1514.71032 1655.67124,1515.45868 C1653.32299,1510.16503 1649.42008,1505.53345 1646.91788,1500.23038 C1645.46296,1497.14628 1644.26751,1492.60897 1641.0823,1490.82654 C1636.69442,1488.37115 1627.63243,1492.98823 1623.14697,1494.16008 Z M1526.29692,1458.89641 C1525.57344,1468.08996 1522.75828,1475.56995 1518.34654,1483.55176 C1523.40226,1484.1928 1528.55916,1484.42122 1533.52454,1485.65399 C1537.24604,1486.57784 1540.67554,1488.33997 1544.36596,1489.35302 C1542.39282,1483.94479 1538.73203,1479.1196 1535.89592,1474.12472 C1533.03234,1469.0827 1530.46942,1462.95584 1526.29692,1458.89641 Z" id="Combined-Shape-Copy" fill-rule="nonzero"></path>
</g>
</g>
</svg>
```
## /demo/new-compiler-vite-react-spa/src/main.tsx
```tsx path="/demo/new-compiler-vite-react-spa/src/main.tsx"
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import "./styles.css";
import reportWebVitals from "./reportWebVitals.ts";
import { LingoProvider } from "@lingo.dev/compiler/react";
const router = createRouter({
routeTree,
context: {},
defaultPreload: "intent",
scrollRestoration: true,
defaultStructuralSharing: true,
defaultPreloadStaleTime: 0,
});
// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
// Render the app
const rootElement = document.getElementById("app");
if (rootElement && !rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<LingoProvider>
<RouterProvider router={router} />
</LingoProvider>
</StrictMode>,
);
}
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```
## /demo/new-compiler-vite-react-spa/src/reportWebVitals.ts
```ts path="/demo/new-compiler-vite-react-spa/src/reportWebVitals.ts"
const reportWebVitals = (onPerfEntry?: () => void) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
onCLS(onPerfEntry);
onINP(onPerfEntry);
onFCP(onPerfEntry);
onLCP(onPerfEntry);
onTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
```
## /demo/new-compiler-vite-react-spa/src/routeTree.gen.ts
```ts path="/demo/new-compiler-vite-react-spa/src/routeTree.gen.ts"
/* eslint-disable */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as AboutRouteImport } from './routes/about'
import { Route as IndexRouteImport } from './routes/index'
const AboutRoute = AboutRouteImport.update({
id: '/about',
path: '/about',
getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/about': typeof AboutRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/about': typeof AboutRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
'/about': typeof AboutRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/' | '/about'
fileRoutesByTo: FileRoutesByTo
to: '/' | '/about'
id: '__root__' | '/' | '/about'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
AboutRoute: typeof AboutRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/about': {
id: '/about'
path: '/about'
fullPath: '/about'
preLoaderRoute: typeof AboutRouteImport
parentRoute: typeof rootRouteImport
}
'/': {
id: '/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
}
}
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
AboutRoute: AboutRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
._addFileTypes<FileRouteTypes>()
```
## /demo/new-compiler-vite-react-spa/src/routes/__root.tsx
```tsx path="/demo/new-compiler-vite-react-spa/src/routes/__root.tsx"
import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { TanStackDevtools } from "@tanstack/react-devtools";
import Header from "../components/Header";
export const Route = createRootRoute({
component: () => (
<div className="flex flex-col min-h-screen">
<Header />
<Outlet />
<TanStackDevtools
config={{
position: "bottom-right",
}}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
</div>
),
});
```
## /demo/new-compiler-vite-react-spa/src/routes/about.tsx
```tsx path="/demo/new-compiler-vite-react-spa/src/routes/about.tsx"
"use i18n";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/about")({
component: About,
});
function About() {
return (
<main className="flex grow w-full flex-col items-center gap-4 py-32 px-16 bg-white dark:bg-black sm:items-start text-gray-100">
<h1 className="text-4xl font-bold mb-4">About Lingo.dev</h1>
<p className="mb-4">
This is a demo application showcasing the Lingo.dev compiler for
automatic translations in React applications.
</p>
<div className="space-y-4 max-w-2xl">
<section>
<h2 className="text-2xl font-semibold mb-2">Key Features</h2>
<ul className="list-disc list-inside space-y-2">
<li>Automatic extraction of translatable text from JSX</li>
<li>Build-time transformation with zero runtime overhead</li>
<li>Support for multiple bundlers (Vite, Webpack, Next.js)</li>
<li>Hash-based translation system for stable identifiers</li>
<li>Server and client component support</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-semibold mb-2">How It Works</h2>
<p className="mb-2">
The compiler analyzes your React components at build time and
automatically extracts all translatable strings. It then generates
translations using your configured translation provider.
</p>
<p>
Simply add the "use i18n" directive at the top of your component
files, and the compiler handles the rest!
</p>
</section>
</div>
</main>
);
}
```
## /demo/new-compiler-vite-react-spa/src/routes/index.tsx
```tsx path="/demo/new-compiler-vite-react-spa/src/routes/index.tsx"
"use i18n";
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
export const Route = createFileRoute("/")({
component: App,
});
const externalText = <>External text</>;
function Button() {
const [counter, setCounter] = useState(0);
return (
<button onClick={() => setCounter((old) => old + 1)}>
Clicked {counter} times
</button>
);
}
function App() {
const text = "Hello World";
const translatableText = <>Hello World</>;
const translatableMixedContextFragment = (
<>
<b>Mixed</b> content <i>fragment</i>
</>
);
return (
<main className="flex grow w-full flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start text-gray-100">
<h1 className="text-4xl font-bold mb-4">
Welcome to Lingo.dev compiler demo
</h1>
<p className="mb-8">
It automatically extract text from your JSX and translate it to other
languages.
</p>
<Button />
<div>
Text inserted as an <code>{"{expression}"}</code> is not translated:{" "}
{text}
</div>
<div>
To translate it you have to wrap it into the <>{translatableText}
</>
</div>
<div>
Text external to the component is not translated: {externalText}
</div>
<div>
Content that has text and other tags inside will br translated as a
single entity: {translatableMixedContextFragment}
</div>
</main>
);
}
```
## /demo/new-compiler-vite-react-spa/src/styles.css
```css path="/demo/new-compiler-vite-react-spa/src/styles.css"
@import "tailwindcss";
:root {
color-scheme: dark light;
}
body {
@apply m-0;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family:
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.locale-switcher option,
.locale-switcher optgroup {
background-color: black;
}
```
## /demo/new-compiler-vite-react-spa/tsconfig.json
```json path="/demo/new-compiler-vite-react-spa/tsconfig.json"
{
"include": ["**/*.ts", "**/*.tsx"],
"compilerOptions": {
"target": "ES2022",
"jsx": "react-jsx",
"module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"types": ["vite/client"],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
/* Linting */
"skipLibCheck": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"paths": {
"@/*": ["./src/*"]
}
}
}
```
## /demo/new-compiler-vite-react-spa/vite.config.ts
```ts path="/demo/new-compiler-vite-react-spa/vite.config.ts"
import { defineConfig } from "vite";
import { devtools } from "@tanstack/devtools-vite";
import viteReact from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { tanstackRouter } from "@tanstack/router-plugin/vite";
import { fileURLToPath, URL } from "node:url";
import { lingoCompilerPlugin } from "@lingo.dev/compiler/vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
devtools(),
lingoCompilerPlugin({
sourceRoot: "src",
lingoDir: ".lingo",
sourceLocale: "en",
targetLocales: ["es", "de", "fr"],
useDirective: true, // Set to true to require 'use i18n' directive
models: "lingo.dev",
buildMode: "cache-only",
dev: {
usePseudotranslator: true,
},
}),
tanstackRouter({
target: "react",
}),
viteReact(),
tailwindcss(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
```
## /docs/svelte-integration-guide.md
---
title: Svelte AI Translation with Lingo.dev
---
## What is Svelte?
[Svelte](https://svelte.dev/) is a modern framework for building web applications.
Unlike other frameworks, Svelte compiles your code to highly optimized JavaScript at build time, so your app runs faster in the browser.
---
## What is Lingo.dev?
[Lingo.dev](https://lingo.dev/) is an AI-powered translation platform.
It allows you to automatically translate content in your project using a **CLI** for static translations.
---
## About this guide
This guide explains how to set up **Lingo.dev CLI** in a Svelte project.
You will learn how to:
- Install Svelte or SvelteKit
- Create static content
- Configure and run Lingo.dev CLI
- Use translated content in your Svelte components
---
## Step 1. Install Svelte (If you have an existing Svelte project, please skip to **Step 2**)
### Using SvelteKit
1. Open a terminal of your choice.
2. Create a new project:
```bash
npx sv create <Name-of-the-app>
```
- <img width="800" height="500" alt="C__Windows_system32_cmd exe 03-11-2025 13_13_47" src="https://github.com/user-attachments/assets/ed042e99-1299-4c3a-b847-90af28921dd8" />
3. Follow the prompts to choose options.
- <img width="800" height="500" alt="C__Windows_system32_cmd exe 03-11-2025 13_14_22" src="https://github.com/user-attachments/assets/ce6cbe26-7414-4d06-bbe8-37e4c2cd693d" />
4. Navigate into the project directory:
```bash
cd <Name-of-the-app>
```
5. Start the development server:
```bash
npm run dev -- --open
```
6. This should open localhost with the built-in Svelte page.
### Using Vite + Svelte (Svelte compiler only)
1. Open a terminal of your choice.
2. Create a new project:
```bash
npm create vite@latest <Name-of-the-app> -- --template svelte
```
3. Navigate into the project directory:
```bash
cd <Name-of-the-app>
```
4. Install dependencies:
```bash
npm install
```
5. Start the development server:
```bash
npm run dev -- --open
```
---
## Step 2. Create a Lingo.dev account
1. Go to [lingo.dev](https://lingo.dev/).
2. Click **Get Started**.
3. Sign in using your preferred authorization method.
4. On the dashboard, click **Get API Key**.
5. Copy the key using the **Copy** button.
> The API key starts with `api_` followed by a 24-character alphanumeric string.
---
## Step 3. Install and Configure Lingo.dev CLI
### 1. Initialize Lingo.dev in the project
```bash
npx lingo.dev@latest init
```
### 2. Log in to Lingo.dev
```bash
npx lingo.dev@latest login
```
3. ⚠ On Windows, `npx` may inject a shell script that cannot run without WSL or Git Bash.
In that case, install globally:
- <img width="800" height="500" alt="C__Windows_system32_cmd exe 03-11-2025 13_48_58" src="https://github.com/user-attachments/assets/12ae0df7-a942-4e86-8cc6-1d88290ab947" />
```bash
npm i -g lingo.dev
lingo.dev login
### 3. Create a directory for localizable content
```bash
mkdir -p src/lib/i18n
```
### 4. Create an English content file
```bash
touch src/lib/i18n/en.json
```
### 5. Populate it with your content, for example:
```json
{
"home": {
"title": "Welcome",
"subtitle": "This text is translated by Lingo.dev"
},
"cta": "Get started"
}
```
### 6. Create a root configuration file for the CLI
```bash
touch i18n.json
```
Add the following content:
```json
{
"$schema": "https://lingo.dev/schema/i18n.json",
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es"]
},
"buckets": {
"json": {
"include": ["src/lib/i18n/[locale].json"]
}
}
}
```
### 7. Run the CLI to generate target language content
```bash
npx lingo.dev@latest run
# or if globally installed
lingo.dev run
```
- <img width="800" height="500" alt="MINGW64__c_Users_SOHAM_Desktop_web development_my-lingo-app 03-11-2025 13_57_40" src="https://github.com/user-attachments/assets/85654e36-37ed-4ed0-9770-dbeaddd7905a" />
---
## Step 4. Create an i18n Consumer
Add the following Svelte store setup to manage translations:
```ts
// src/lib/i18n.ts
import { writable } from "svelte/store";
import en from "$lib/i18n/en.json";
import es from "$lib/i18n/es.json";
const translations = { en, es };
type Locale = keyof typeof translations;
// Narrow the browser language to a supported locale or fallback to 'en'
const detectedLang = (navigator.language.split("-")[0] || "en") as string;
const browserLang: Locale = (Object.keys(translations) as Locale[]).includes(
detectedLang as Locale
)
? (detectedLang as Locale)
: "en";
// Svelte stores
export const locale = writable<Locale>(browserLang);
export const t = writable(translations[browserLang]);
// Function to change the locale dynamically
export function setLocale(newLocale: Locale) {
if (translations[newLocale]) {
locale.set(newLocale);
t.set(translations[newLocale]);
}
}
```
---
## Step 5. Use Translations in a Svelte Component
```ts
<script lang="ts">
import { t, locale, setLocale } from "$lib/i18n";
import { onMount } from "svelte";
let translation: {
home: {
title: string,
subtitle: string
},
cta: string
}
// Subscribe to translation store
const unsubscribe = t.subscribe(value => {
translation = value;
});
// Cleanup on destroy
onDestroy(() => {
unsubscribe();
});
// Toggle language
function toggleLocale() {
const next = $locale === "en" ? "es" : "en";
setLocale(next);
}
</script>
<h2>{translation.home.title}</h2>
<p>{translation.home.subtitle}</p>
<button>{translation.cta}</button>
<button on:click={toggleLocale}>
{ $locale === "en" ? "Switch to Español" : "Cambiar a English" }
</button>
```
---
## Step 6. Run and Test
Start your dev server again:
```bash
npm run dev
```
Visit your app in the browser and click the toggle button —
you should see your text switch between **English** and **Spanish**, powered by **Lingo.dev CLI** translations.
---
## Docs
* [Lingo.dev CLI Documentation](https://lingo.dev/cli)
* [Svelte Documentation](https://svelte.dev/docs)
## /docs/vue-integration-guide.md
---
title: "Vue.js"
subtitle: "AI translation for Vue.js with Lingo.dev CLI"
---
## What is Vue.js?
[Vue.js](https://vuejs.org/) is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.
## What is Lingo.dev CLI?
Lingo.dev is an AI-powered translation platform. The Lingo.dev CLI reads source files, sends translatable content to large language models, and writes translated files back to your project.
## About this guide
This guide explains how to set up Lingo.dev CLI in a Vue.js application. You'll learn how to scaffold a project with Vue.js, configure a translation pipeline using vue-i18n, and implement language switching in your application.
## Step 1. Set up a Vue.js project
1. Install Vue CLI globally:
```bash
npm install -g @vue/cli
```
2. Create a new Vue.js project:
```bash
vue create i18n-example
```
When prompted for a preset, choose **"Manually select features"** and select:
- Babel
- Router
- Linter / Formatter
Then configure:
- **Vue version:** 3.x
- **Router history mode:** Yes
- **Linter:** ESLint with error prevention only (or your preference)
3. Navigate into the project directory:
```bash
cd i18n-example
```
4. Install vue-i18n for internationalization:
```bash
npm install vue-i18n@9
```
## Step 2. Create source content
1. Create a directory for storing localizable content:
```bash
mkdir -p src/locales
```
2. Create a file that contains some localizable content (e.g., `src/locales/en.json`):
```json
{
"welcome": "Welcome to Your Vue.js App",
"description": "This text is translated by Lingo.dev",
"greeting": "Hello, {name}!",
"toggle": "Switch Language",
"counter": "You clicked {count} times"
}
```
## Step 3. Configure the CLI
In the root of the project, create an `i18n.json` file:
```json
{
"$schema": "https://lingo.dev/schema/i18n.json",
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es", "fr", "de", "ja"]
},
"buckets": {
"json": {
"include": ["src/locales/[locale].json"]
}
}
}
```
This file defines:
- the files that Lingo.dev CLI should translate
- the languages to translate between
In this case, the configuration translates JSON files from English to Spanish, French, German, and Japanese.
It's important to note that:
- `[locale]` is a placeholder that's replaced at runtime. It ensures that content is read from one location (e.g., `src/locales/en.json`) and written to a different location (e.g., `src/locales/es.json`).
- Lingo.dev CLI supports various file formats including JSON, MDX, and more.
To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config).
## Step 4. Translate the content
1. [Sign up for a Lingo.dev account](/app).
2. Log in to Lingo.dev via the CLI:
```bash
npx lingo.dev@latest login
```
3. Run the translation pipeline:
```bash
npx lingo.dev@latest run
```
The CLI will create translation files (e.g., `src/locales/es.json`, `src/locales/fr.json`, etc.) for storing the translated content and an `i18n.lock` file for keeping track of what has been translated (to prevent unnecessary retranslations).
## Step 5. Set up vue-i18n in your application
1. Create an i18n configuration file (`src/i18n.js`):
```javascript
import { createI18n } from "vue-i18n";
// It only imports 5 specific locales
import en from "./locales/en.json";
import es from "./locales/es.json";
import fr from "./locales/fr.json";
import de from "./locales/de.json";
import ja from "./locales/ja.json";
const messages = {
en,
es,
fr,
de,
ja,
};
// Create i18n instance
export default createI18n({
legacy: false, //you must set this to `false` to use Composition API
locale: "en", // set locale
fallbackLocale: "en", // set fallback locale
messages, // set locale messages
});
```
2. Update your main.js file to use i18n:
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
createApp(App).use(router).use(i18n).mount("#app");
```
## Step 6. Implement language switching in your Vue components
1. Create a language switcher component (`src/components/LanguageSwitcher.vue`):
```vue
<template>
<div class="language-switcher">
<label for="language-select">Language:</label>
<select
id="language-select"
v-model="currentLocale"
@change="changeLocale"
>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="ja">日本語</option>
</select>
</div>
</template>
<script>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
export default {
name: "LanguageSwitcher",
setup() {
const { locale } = useI18n();
const currentLocale = ref(locale.value);
const changeLocale = () => {
locale.value = currentLocale.value;
};
watch(locale, (newLocale) => {
currentLocale.value = newLocale;
});
return {
currentLocale,
changeLocale,
};
},
};
</script>
<style scoped>
.language-switcher {
margin: 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
select {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
</style>
```
2. Update your `App.vue` to use translations:
```vue
<template>
<div id="app">
<header>
<h1>{{ $t("welcome") }}</h1>
<p>{{ $t("description") }}</p>
<p>{{ $t("greeting", { name: "Vue.js" }) }}</p>
<LanguageSwitcher />
<Counter />
</header>
<router-view />
</div>
</template>
<script>
import LanguageSwitcher from "./components/LanguageSwitcher.vue";
import Counter from "./components/Counter.vue";
export default {
name: "App",
components: {
LanguageSwitcher,
Counter,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
```
3. Create a Counter component to demonstrate dynamic content (`src/components/Counter.vue`):
```vue
<template>
<div class="counter">
<p>{{ $t("counter", { count }) }}</p>
<button @click="increment">+</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Counter",
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
};
</script>
<style scoped>
.counter {
margin: 1rem 0;
}
button {
padding: 0.5rem 1rem;
margin-left: 0.5rem;
border: none;
border-radius: 4px;
background-color: #42b983;
color: white;
cursor: pointer;
}
</style>
```
## Step 7. Test the application
1. Start the development server:
```bash
npm run serve
```
2. Navigate to the following URL:
- http://localhost:8080
3. Verify that the language switching works:
- The application should display content in English by default
- Selecting a different language from the dropdown should update all translated text
- The counter should continue to function in all languages
## /i18n.json
```json path="/i18n.json"
{
"version": "1.10",
"locale": {
"source": "en",
"targets": [
"ru",
"he",
"fr",
"es",
"de",
"zh-Hans",
"ko",
"ja",
"it",
"ar",
"hi",
"pt-BR",
"uk-UA",
"bn",
"fa",
"pl",
"tr",
"ur"
]
},
"buckets": {
"mdx": {
"include": ["readme/[locale].md"]
}
},
"$schema": "https://lingo.dev/schema/i18n.json"
}
```
## /integrations/directus/.gitignore
```gitignore path="/integrations/directus/.gitignore"
.directus
```
## /integrations/directus/CHANGELOG.md
# @replexica/integration-directus
## 0.1.10
### Patch Changes
- [#937](https://github.com/lingodotdev/lingo.dev/pull/937) [`4e5983d`](https://github.com/lingodotdev/lingo.dev/commit/4e5983d7e59ebf9eb529c4b7c1c87689432ac873) Thanks [@devin-ai-integration](https://github.com/apps/devin-ai-integration)! - Update documentation URLs from docs.lingo.dev to lingo.dev/cli and lingo.dev/compiler
## 0.1.9
### Patch Changes
- [`fc3cb88`](https://github.com/lingodotdev/lingo.dev/commit/fc3cb8839cbbb574b69087625dd5f97cf37d5d35) Thanks [@vrcprl](https://github.com/vrcprl)! - Updated README file with target languages changes
## 0.1.8
### Patch Changes
- [`2571fcd`](https://github.com/lingodotdev/lingo.dev/commit/2571fcdce6e969d9df96526188c9f3f89dd80677) Thanks [@vrcprl](https://github.com/vrcprl)! - Added multimple target languages option
## 0.1.7
### Patch Changes
- [`bd7c0a6`](https://github.com/lingodotdev/lingo.dev/commit/bd7c0a62ddfc5144690f6f572667a27d572e521a) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - update `@replexica/sdk` version
## 0.1.6
### Patch Changes
- [`e808190`](https://github.com/lingodotdev/lingo.dev/commit/e80819059b89f4a3f69980bab0979432cb7823bf) Thanks [@vrcprl](https://github.com/vrcprl)! - Fixed screenshot
- Updated dependencies []:
- @replexica/sdk@0.7.7
## 0.1.5
### Patch Changes
- [`ca7a085`](https://github.com/lingodotdev/lingo.dev/commit/ca7a085033ff31780001db1e6d58d818b60beded) Thanks [@vrcprl](https://github.com/vrcprl)! - Add README
## 0.1.4
### Patch Changes
- [`998a4a6`](https://github.com/lingodotdev/lingo.dev/commit/998a4a6267ff8542279a8f6d812d5579e3a78a42) Thanks [@vrcprl](https://github.com/vrcprl)! - Update primary key selection
## 0.1.3
### Patch Changes
- [`75253b6`](https://github.com/lingodotdev/lingo.dev/commit/75253b66833b000bf80d6880e92e3c60f5bcd068) Thanks [@vrcprl](https://github.com/vrcprl)! - Update replexica sdk version
## 0.1.2
### Patch Changes
- Updated dependencies []:
- @replexica/sdk@0.7.5
## 0.1.1
### Patch Changes
- [`22490ab`](https://github.com/lingodotdev/lingo.dev/commit/22490ab94f22d8e5769b23dc58d811fc8483f714) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - add Directus integration
## 0.1.0
### Minor Changes
- [`03b4506`](https://github.com/lingodotdev/lingo.dev/commit/03b45063f435715967825f70daf3f5bbdb05b9a0) Thanks [@vrcprl](https://github.com/vrcprl)! - Lingo.dev integration for Directus
## 0.0.1
### Patch Changes
- [#341](https://github.com/lingodotdev/lingo.dev/pull/341) [`1df47d6`](https://github.com/lingodotdev/lingo.dev/commit/1df47d6095f907e1d756524f5e2cc2e043fdb093) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - empty directus integration package
## /integrations/directus/Dockerfile
``` path="/integrations/directus/Dockerfile"
FROM directus/directus:11
USER root
RUN npm install -g pnpm@latest
USER node
# Install the integration
RUN pnpm install @replexica/integration-directus
```
## /integrations/directus/README.md
# Lingo.dev Integration for Directus
This is the official Lingo.dev integration for [Directus](https://directus.io), a headless CMS, enabling automated AI-powered localization within your Directus workflow.
## Overview
This integration adds a Lingo.dev operation to Directus CMS that allows you to automatically translate content across 80+ languages using Lingo.dev's AI localization engine.
## Configuration
1. Install Lingo.dev Extension in your Directus project
2. Create a new Flow in Directus with Lingo.dev Extension
3. Run the Flow to localize content
## 1. Set up Lingo.dev Extension
This section is based on the [Directus documentation for installing extensions via the npm registry](https://docs.directus.io/extensions/installing-extensions.html#installing-via-the-npm-registry).
### Modify `docker-compose.yml`
Open the `docker-compose.yml` file of your project and replace the `image` option with a `build` section:
- remove the `image` option:
```yaml
image: directus/directus:11.x.y
```
- add the `build` section:
```yaml
build:
context: ./
```
This allows you to build a customized Docker Image with the added extensions.
### Create a `Dockerfile`
At the root of your project, create a `Dockerfile` if one doesn't already exist and add the following:
```Dockerfile
FROM directus/directus:11.x.y
USER root
RUN corepack enable
USER node
RUN pnpm install @replexica/integration-directus
```
### Build the Docker Image
Build your Docker image:
```bash
docker compose build
```
### Start the Docker Container
Start your Docker container:
```bash
docker compose up
```
On startup, Directus will automatically load any extension installed in the previous steps.
## 2. Create a New Flow
1. Navigate to the Flows section in Directus CMS.
2. Create a new Flow
3. Select a Manual trigger, check collections to apply to, and Save.
4. Add Confirmation dialog with Target Languages and Save.
5. Click '+' to add a new operation and select Lingo.dev Integration for Directus.
6. Configure the operation with the required parameters.
7. Save the Flow.
## 3. Run the Flow
Go to Content and run the Flow on the collection to localize your content.
## Results
The Flow will automatically translate the content in the selected collection.
## Lingo.dev Extension Inputs
The integration provides a Directus operation that accepts the following parameters:
- `item_id`: The ID of the item to translate
- `collection`: The collection containing the content
- `translation_table`: The table storing translations
- `language_table`: The table containing supported languages
- `replexica_api_key`: Your Lingo.dev API key
- `source_language`: Source language code (defaults to 'en-US')
- `target_languages`: Array of target language codes (example: ['fr-FR', 'de-DE'])
## Development
To run the integration locally:
```bash
# Clone the repo
git clone https://github.com/lingodotdev/lingo.dev
# Install dependencies
cd integrations/directus
pnpm install
# Run dev server
pnpm dev
# Build
pnpm build
# Run tests
pnpm test
```
The integration can be tested using the included Docker setup:
```bash
docker-compose up
```
This will start Directus at [http://localhost:8055](http://localhost:8055).
## License
[Apache-2.0](./LICENSE)
## More Information
- [Lingo.dev Documentation](https://lingo.dev)
- [Directus Extensions Guide](https://docs.directus.io/extensions/operations)
- [GitHub Repository](https://github.com/lingodotdev/lingo.dev)
## Support
For questions and support:
- [Lingo.dev Discord](https://lingo.dev/go/discord)
- Email: <veronica@lingo.dev>
## /integrations/directus/docker-compose.yml
```yml path="/integrations/directus/docker-compose.yml"
version: "3"
services:
directus:
build:
context: ./
ports:
- 8055:8055
volumes:
- ./.directus/database:/directus/database
- ./.directus/uploads:/directus/uploads
- ./:/directus/extensions/lingo.dev-directus-extension
environment:
SECRET: "replace-with-secure-random-value"
ADMIN_EMAIL: "admin@example.com"
ADMIN_PASSWORD: "d1r3ctu5"
DB_CLIENT: "sqlite3"
DB_FILENAME: "/directus/database/data.db"
WEBSOCKETS_ENABLED: "true"
```
## /integrations/directus/package.json
```json path="/integrations/directus/package.json"
{
"name": "@replexica/integration-directus",
"version": "0.1.10",
"description": "Lingo.dev integration for Directus",
"private": false,
"sideEffects": false,
"directus:extension": {
"type": "operation",
"path": {
"app": "build/app.mjs",
"api": "build/api.mjs"
},
"source": {
"app": "src/app.ts",
"api": "src/api.ts"
},
"host": "^10.10.0"
},
"files": [
"build",
"readme.md",
"changelog.md"
],
"scripts": {
"dev": "tsup --watch",
"build": "tsc --noEmit && tsup",
"test": "vitest run"
},
"license": "Apache-2.0",
"dependencies": {
"@replexica/sdk": "0.7.7"
},
"devDependencies": {
"@directus/extensions-sdk": "17.0.3",
"tsup": "8.5.1",
"typescript": "5.9.3",
"vitest": "4.0.13"
}
}
```
## /integrations/directus/src/api.ts
```ts path="/integrations/directus/src/api.ts"
import { defineOperationApi } from "@directus/extensions-sdk";
interface Options {
item_id: string;
collection: string;
translation_table: string;
language_table: string;
replexica_api_key: string;
source_language?: string;
target_languages: string[];
}
interface Context {
services: {
ItemsService: any;
};
getSchema: () => Promise<any>;
}
interface TranslationResult {
success: boolean;
language: string;
operation?: "updated" | "created";
data?: any;
error?: string;
}
interface TranslationSummary {
successful: number;
failed: number;
updated: number;
created: number;
details: TranslationResult[];
}
export default defineOperationApi<Options>({
id: "replexica-integration-directus",
handler: async (
{
item_id,
collection,
translation_table,
language_table,
replexica_api_key,
source_language = "en-US",
target_languages,
},
context: Context,
) => {
if (!replexica_api_key) {
throw new Error("Replexica API Key not defined");
}
try {
const { ReplexicaEngine } = await import("@replexica/sdk");
const replexica = new ReplexicaEngine({ apiKey: replexica_api_key });
const { ItemsService } = context.services;
const schema = await context.getSchema();
// Initialize services
const languagesService = new ItemsService(language_table, { schema });
const translationsService = new ItemsService(translation_table, {
schema,
});
// Get the primary key field for the collection
const collection_pk = schema.collections[collection].primary;
// Get collection fields and their types
const collectionFields = schema.collections[translation_table].fields;
// Get all existing translations for this item
const existingTranslations = await translationsService.readByQuery({
fields: ["*"],
filter: {
[`${collection}_${collection_pk}`]: { _eq: item_id },
},
});
const sourceTranslation = existingTranslations.find(
(t: { languages_code: string }) => t.languages_code === source_language,
);
if (!sourceTranslation) {
throw new Error("No source translation found");
}
// Get target languages
const targetLanguages = await languagesService.readByQuery({
fields: ["code", "name"],
filter:
target_languages && target_languages.length > 0
? { code: { _in: target_languages } }
: { code: { _neq: source_language } },
});
if (!targetLanguages.length) {
throw new Error(
target_languages
? `Target language ${target_languages} not found in language table`
: "No target languages found in table",
);
}
// Prepare translation template
const translationTemplate = {
...sourceTranslation,
id: undefined,
languages_code: undefined,
date_created: undefined,
date_updated: undefined,
user_created: undefined,
user_updated: undefined,
};
// Process translations
const results: TranslationResult[] = await Promise.all(
targetLanguages.map(
async (language: { code: string; name: string }) => {
try {
let translatedData: Record<string, any> = {};
let objectToTranslate: Record<string, any> = {};
let textFields: Array<{ fieldName: string; fieldValue: string }> =
[];
// Separate fields into text and non-text
for (const [fieldName, fieldValue] of Object.entries(
translationTemplate,
)) {
// Skip if field is null or undefined
if (fieldValue == null) {
translatedData[fieldName] = fieldValue;
continue;
}
// Skip system fields and non-translatable fields
const fieldSchema = collectionFields[fieldName];
if (!fieldSchema || fieldSchema.system) {
translatedData[fieldName] = fieldValue;
continue;
}
if (fieldSchema.type === "text") {
textFields.push({
fieldName,
fieldValue: fieldValue as string,
});
} else {
objectToTranslate[fieldName] = fieldValue;
}
}
// Translate non-text fields in one batch
if (Object.keys(objectToTranslate).length > 0) {
const translatedObject = await replexica.localizeObject(
objectToTranslate,
{
sourceLocale: source_language,
targetLocale: language.code,
},
);
translatedData = { ...translatedData, ...translatedObject };
}
// Translate text fields individually
for (const { fieldName, fieldValue } of textFields) {
try {
if (isHtml(fieldValue)) {
translatedData[fieldName] = await replexica.localizeHtml(
fieldValue,
{
sourceLocale: source_language,
targetLocale: language.code,
},
);
} else {
translatedData[fieldName] = await replexica.localizeText(
fieldValue,
{
sourceLocale: source_language,
targetLocale: language.code,
},
);
}
} catch (fieldError) {
console.error(
`Error translating field ${fieldName}:`,
fieldError,
);
translatedData[fieldName] = fieldValue; // Keep original value on error
}
}
// Find existing translation for this language
const existingTranslation = existingTranslations.find(
(t: { languages_code: string }) =>
t.languages_code === language.code,
);
let result;
if (existingTranslation) {
result = await translationsService.updateOne(
existingTranslation.id,
{
...translatedData,
languages_code: language.code,
},
);
} else {
result = await translationsService.createOne({
...translatedData,
languages_code: language.code,
[`${collection}_${collection_pk}`]: item_id,
});
}
return {
success: true,
language: language.code,
operation: existingTranslation ? "updated" : "created",
data: result,
};
} catch (error) {
return {
success: false,
language: language.code,
error: error instanceof Error ? error.message : "Unknown error",
};
}
},
),
);
const requestedLanguages = new Set(target_languages || []);
const missingLanguages =
target_languages?.filter(
(code) =>
!targetLanguages.find(
(lang: { code: string }) => lang.code === code,
),
) || [];
const missingResults: TranslationResult[] = missingLanguages.map(
(code) => ({
success: false,
language: code,
error: `Language ${code} not found in language table`,
}),
);
const allResults = [...results, ...missingResults];
const summary: TranslationSummary = {
successful: allResults.filter((r) => r.success).length,
failed: allResults.filter((r) => !r.success).length,
updated: allResults.filter((r) => r.operation === "updated").length,
created: allResults.filter((r) => r.operation === "created").length,
details: allResults,
};
return summary;
} catch (error) {
throw new Error(
`Translation process failed: ${
error instanceof Error ? error.message : "Unknown error"
}`,
);
}
},
});
// Helper functions
function isHtml(text: string): boolean {
const htmlRegex = /<[a-z][\s\S]*>/i;
return htmlRegex.test(text);
}
```
## /integrations/directus/src/app.ts
```ts path="/integrations/directus/src/app.ts"
import { defineOperationApp } from "@directus/extensions-sdk";
export default defineOperationApp({
id: "replexica-integration-directus",
name: "Replexica Integration for Directus",
icon: "translate",
description:
"Use Replexica Localization Engine to make content multilingual.",
overview: ({ collection }) => [
{
label: "$t:collection",
text: collection,
},
],
options: [
{
field: "item_id",
name: "Item ID",
type: "string",
meta: {
interface: "input",
width: "half",
},
},
{
field: "collection",
name: "$t:collection",
type: "string",
meta: {
interface: "system-collection",
options: {
includeSystem: true,
includeSingleton: false,
},
width: "half",
},
},
{
field: "source_language",
name: "Source Language",
type: "string",
meta: {
interface: "input",
width: "half",
},
},
{
field: "target_languages",
name: "Target Languages",
type: "string",
meta: {
interface: "input",
width: "half",
},
},
{
field: "translation_table",
name: "Translation Table",
type: "string",
meta: {
interface: "system-collection",
options: {
includeSystem: true,
includeSingleton: false,
},
width: "half",
},
},
{
field: "language_table",
name: "Languages Table",
type: "string",
meta: {
interface: "system-collection",
options: {
includeSystem: true,
includeSingleton: false,
},
width: "half",
},
},
{
field: "replexica_api_key",
name: "Replexica API Key",
type: "string",
meta: {
interface: "input-hash",
width: "half",
options: {
masked: true,
placeholder: "Enter your Replexica API key",
},
},
},
],
});
```
## /integrations/directus/src/index.spec.ts
```ts path="/integrations/directus/src/index.spec.ts"
import { describe, it, expect } from "vitest";
describe("Test suite", () => {
it("should pass", () => {
expect(1).toBe(1);
});
});
```
## /integrations/directus/tsconfig.json
```json path="/integrations/directus/tsconfig.json"
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"jsx": "react-jsx",
"moduleResolution": "Bundler",
"module": "ESNext",
"target": "ESNext",
"rootDir": "src",
"outDir": "build"
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
}
```
## /integrations/directus/tsconfig.test.json
```json path="/integrations/directus/tsconfig.test.json"
{
"extends": "./tsconfig.json",
"include": ["src/**/*.ts", "src/**/*.tsx"],
"compilerOptions": {
"noEmit": true
}
}
```
## /integrations/directus/tsup.config.ts
```ts path="/integrations/directus/tsup.config.ts"
import { defineConfig } from "tsup";
export default defineConfig({
clean: true,
target: "esnext",
entry: ["src/api.ts", "src/app.ts"],
outDir: "build",
format: ["cjs", "esm"],
cjsInterop: true,
splitting: true,
external: ["@replexica/sdk"],
outExtension: (ctx) => ({
js: ctx.format === "cjs" ? ".cjs" : ".mjs",
}),
});
```
## /legacy/cli/bin/cli.mjs
```mjs path="/legacy/cli/bin/cli.mjs"
#!/usr/bin/env node
import CLI from "lingo.dev/cli";
const envVarConfigWarning = process.env.LINGODOTDEV_API_KEY
? "\nThis version is not compatible with LINGODOTDEV_API_KEY env variable."
: "";
console.warn(
"\x1b[33m%s\x1b[0m",
`
⚠️ WARNING: NEW PACKAGE AVAILABLE ⚠️
================================================================================
This CLI version is deprecated.${envVarConfigWarning}
Please use lingo.dev instead:
npx lingo.dev@latest
Visit https://lingo.dev for more information.
================================================================================
`,
);
process.env.LINGODOTDEV_API_KEY = process.env.REPLEXICA_API_KEY;
process.env.LINGODOTDEV_PULL_REQUEST = process.env.REPLEXICA_PULL_REQUEST;
process.env.LINGODOTDEV_PULL_REQUEST_TITLE =
process.env.REPLEXICA_PULL_REQUEST_TITLE;
process.env.LINGODOTDEV_COMMIT_MESSAGE = process.env.REPLEXICA_COMMIT_MESSAGE;
process.env.LINGODOTDEV_WORKING_DIRECTORY =
process.env.REPLEXICA_WORKING_DIRECTORY;
await CLI.parseAsync(process.argv);
```
## /legacy/cli/package.json
```json path="/legacy/cli/package.json"
{
"name": "replexica",
"version": "0.71.1",
"description": "[DEPRECATED] Replexica CLI (now Lingo.dev) - Please use lingo.dev instead",
"private": false,
"type": "module",
"sideEffects": false,
"types": "build/index.d.ts",
"module": "build/index.mjs",
"main": "build/index.cjs",
"bin": {
"replexica": "./bin/cli.mjs"
},
"files": [
"bin",
"build"
],
"scripts": {
"replexica": "./bin/cli.mjs"
},
"keywords": [],
"author": "",
"license": "Apache-2.0",
"dependencies": {
"lingo.dev": "*"
},
"deprecated": "Replexica is now Lingo.dev! Please use our new CLI package by running: npx lingo.dev@latest. Visit https://lingo.dev for the latest features and documentation."
}
```
## /legacy/cli/readme.md
Replexica is now [Lingo.dev](https://npmjs.com/package/lingo.dev)
## /legacy/sdk/CHANGELOG.md
# @replexica/sdk
## 0.7.12
### Patch Changes
- Updated dependencies [[`48fab66`](https://github.com/lingodotdev/lingo.dev/commit/48fab66b6806455d9faa1dcb169d4c61194e2144)]:
- lingo.dev@0.117.0
## 0.7.11
### Patch Changes
- [`5dee9ee`](https://github.com/lingodotdev/lingo.dev/commit/5dee9ee743fbef489fbe342597a768ebd59e5f67) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - add proxies to legacy packages
- [`63eb57b`](https://github.com/lingodotdev/lingo.dev/commit/63eb57b8f4cc37605be196085fafbbfdab71cce5) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - add deprecation message to legacy package jsons
- [`bbf7760`](https://github.com/lingodotdev/lingo.dev/commit/bbf7760580f1631805d68612053ebcd4601bb02b) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - add deprecation warning to the legacy package proxies
- Updated dependencies [[`b4c7f1e`](https://github.com/lingodotdev/lingo.dev/commit/b4c7f1e86334d229bee62219c26f30d0b523926d)]:
- lingo.dev@0.70.4
## 0.7.10
### Patch Changes
- Updated dependencies [[`003344f`](https://github.com/lingodotdev/lingo.dev/commit/003344ffcca98a391a298707f18476971c4d4c2b)]:
- @replexica/spec@0.24.0
## 0.7.9
### Patch Changes
- Updated dependencies [[`a2ada16`](https://github.com/lingodotdev/lingo.dev/commit/a2ada16ecf4cd559d3486f0e4756d58808194f7e)]:
- @replexica/spec@0.23.0
## 0.7.8
### Patch Changes
- Updated dependencies [[`e6521b8`](https://github.com/lingodotdev/lingo.dev/commit/e6521b86637c254c011aba89a3558802c04ab3ca)]:
- @replexica/spec@0.22.1
## 0.7.7
### Patch Changes
- Updated dependencies [[`cff3c4e`](https://github.com/lingodotdev/lingo.dev/commit/cff3c4eb1a40f82a9c4c095e49cfd9fce053b048)]:
- @replexica/spec@0.22.0
## 0.7.6
### Patch Changes
- Updated dependencies [[`58d7b35`](https://github.com/lingodotdev/lingo.dev/commit/58d7b3567e51cc3ef0fad0288c13451381b95a98)]:
- @replexica/spec@0.21.1
## 0.7.5
### Patch Changes
- Updated dependencies [[`9cf5299`](https://github.com/lingodotdev/lingo.dev/commit/9cf5299f7efbef70fd83f95177eac49b4d8f8007), [`3ab5de6`](https://github.com/lingodotdev/lingo.dev/commit/3ab5de66d8a913297b46095c2e73823124cc8c5b)]:
- @replexica/spec@0.21.0
## 0.7.4
### Patch Changes
- Updated dependencies [[`1556977`](https://github.com/lingodotdev/lingo.dev/commit/1556977332a6f949100283bfa8c9a9ff5e74b156)]:
- @replexica/spec@0.20.0
## 0.7.3
### Patch Changes
- [`cbef8f3`](https://github.com/lingodotdev/lingo.dev/commit/cbef8f3cafdc955d61053ce885d98e425acb668d) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - moved jsdom import into the html handler function
## 0.7.2
### Patch Changes
- Updated dependencies [[`5cb3c93`](https://github.com/lingodotdev/lingo.dev/commit/5cb3c930fff6e30cff5cc2266b794f75a0db646d)]:
- @replexica/spec@0.19.0
## 0.7.1
### Patch Changes
- [`db819a4`](https://github.com/lingodotdev/lingo.dev/commit/db819a42412ceb67fedbe729b7d018952686d60b) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - reduce default batch size to avoid hitting rate limits
- [`2c5cbcf`](https://github.com/lingodotdev/lingo.dev/commit/2c5cbcfbf6feb28440255cdea0818c8cefa61d91) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - filter out non extistent keys
## 0.7.0
### Minor Changes
- [`c42dc2d`](https://github.com/lingodotdev/lingo.dev/commit/c42dc2d5b4efe95e804b5a7e7f6d354cf8622dc7) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - add `batchLocalizeText` to sdk
## 0.6.0
### Minor Changes
- [`a71a88e`](https://github.com/lingodotdev/lingo.dev/commit/a71a88e5c8bd6601b0838c381433a87763142801) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - fast mode
### Patch Changes
- [`f0a77ad`](https://github.com/lingodotdev/lingo.dev/commit/f0a77ad774a01c30e7e9bc5a0253638176332fd2) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - updated default batch size limits in the SDK
## 0.5.0
### Minor Changes
- [`ebf44cb`](https://github.com/lingodotdev/lingo.dev/commit/ebf44cbb462516abfe660c295c04627796c5a3a7) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - implement recognize locale
- [`42d0a5a`](https://github.com/lingodotdev/lingo.dev/commit/42d0a5a7a53e296192a31e8f1d67c126793ea280) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - added .localizeHtml implementation to SDK
### Patch Changes
- Updated dependencies [[`a6b22a3`](https://github.com/lingodotdev/lingo.dev/commit/a6b22a3237f574455d8119f914d82b0b247b4151)]:
- @replexica/spec@0.18.0
## 0.4.3
### Patch Changes
- Updated dependencies [[`091ee35`](https://github.com/lingodotdev/lingo.dev/commit/091ee353081795bf8f61c7d41483bc309c7b62ef)]:
- @replexica/spec@0.17.0
## 0.4.2
### Patch Changes
- Updated dependencies [[`5e282d7`](https://github.com/lingodotdev/lingo.dev/commit/5e282d7ffa5ca9494aa7046a090bb7c327085a86)]:
- @replexica/spec@0.16.0
## 0.4.1
### Patch Changes
- Updated dependencies [[`0071cd6`](https://github.com/lingodotdev/lingo.dev/commit/0071cd66b1c868ad3898fc368390a628c5a67767)]:
- @replexica/spec@0.15.0
## 0.4.0
### Minor Changes
- [#264](https://github.com/lingodotdev/lingo.dev/pull/264) [`cdef5b7`](https://github.com/lingodotdev/lingo.dev/commit/cdef5b7bfbee4670c6de62cf4b4f3e0315748e25) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - added format specific methods to `@replexica/sdk`
## 0.3.4
### Patch Changes
- Updated dependencies [[`2859938`](https://github.com/lingodotdev/lingo.dev/commit/28599388a91bf80cea3813bb4b8999bb4df302c9)]:
- @replexica/spec@0.14.1
## 0.3.3
### Patch Changes
- Updated dependencies [[`ca9e20e`](https://github.com/lingodotdev/lingo.dev/commit/ca9e20eef9047e20d39ccf9dff74d2f6069d4676), [`2aedf3b`](https://github.com/lingodotdev/lingo.dev/commit/2aedf3bec2d9dffc7b43fc10dea0cab5742d44af), [`626082a`](https://github.com/lingodotdev/lingo.dev/commit/626082a64b88fb3b589acd950afeafe417ce5ddc)]:
- @replexica/spec@0.14.0
## 0.3.2
### Patch Changes
- Updated dependencies [[`1601f70`](https://github.com/lingodotdev/lingo.dev/commit/1601f708bdf0ff1786d3bf9b19265ac5b567f740)]:
- @replexica/spec@0.13.0
## 0.3.1
### Patch Changes
- Updated dependencies [[`bc5a28c`](https://github.com/lingodotdev/lingo.dev/commit/bc5a28c3c98b619872924b5f913229ac01387524)]:
- @replexica/spec@0.12.1
## 0.3.0
### Minor Changes
- [#165](https://github.com/lingodotdev/lingo.dev/pull/165) [`5c2ca37`](https://github.com/lingodotdev/lingo.dev/commit/5c2ca37114663eaeb529a027e33949ef3839549b) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - Update locale code resolution logic
### Patch Changes
- Updated dependencies [[`5c2ca37`](https://github.com/lingodotdev/lingo.dev/commit/5c2ca37114663eaeb529a027e33949ef3839549b)]:
- @replexica/spec@0.12.0
## 0.2.1
### Patch Changes
- Updated dependencies [[`6870fc7`](https://github.com/lingodotdev/lingo.dev/commit/6870fc758dae9d1adb641576befbd8cda61cd5ea)]:
- @replexica/spec@0.11.0
## 0.2.0
### Minor Changes
- [`d6e6d5c`](https://github.com/lingodotdev/lingo.dev/commit/d6e6d5c24b266de3769e95545f74632e7d75c697) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - Add support for multisource localization to the CLI
### Patch Changes
- Updated dependencies [[`d6e6d5c`](https://github.com/lingodotdev/lingo.dev/commit/d6e6d5c24b266de3769e95545f74632e7d75c697)]:
- @replexica/spec@0.10.0
## 0.1.1
### Patch Changes
- Updated dependencies [[`73c9250`](https://github.com/lingodotdev/lingo.dev/commit/73c925084989ccea120cae1617ec87776c88e83e)]:
- @replexica/spec@0.9.0
## 0.1.0
### Minor Changes
- [#142](https://github.com/lingodotdev/lingo.dev/pull/142) [`d9b0e51`](https://github.com/lingodotdev/lingo.dev/commit/d9b0e512196329cc781a4d33346f8ca0f3a81e7e) Thanks [@maxprilutskiy](https://github.com/maxprilutskiy)! - Extract API calling into SDK package
## /legacy/sdk/README.md
Replexica is now [Lingo.dev](https://npmjs.com/package/lingo.dev)
## /legacy/sdk/index.js
```js path="/legacy/sdk/index.js"
console.warn(
"\x1b[33m%s\x1b[0m",
`
⚠️ WARNING: NEW PACKAGE AVAILABLE ⚠️
=======================================
This SDK version is deprecated.
Please use lingo.dev instead:
npm install lingo.dev
Visit https://lingo.dev for more information.
=======================================
`,
);
export * from "lingo.dev/sdk";
```
## /legacy/sdk/package.json
```json path="/legacy/sdk/package.json"
{
"name": "@replexica/sdk",
"version": "0.7.12",
"description": "[DEPRECATED] Replexica SDK (now Lingo.dev) - Please use lingo.dev instead",
"private": false,
"type": "module",
"sideEffects": false,
"types": "index.d.ts",
"module": "index.js",
"main": "index.js",
"files": [
"index.js",
"index.d.ts"
],
"keywords": [],
"author": "",
"license": "Apache-2.0",
"dependencies": {
"lingo.dev": "*"
},
"deprecated": "Replexica is now Lingo.dev! Please use our new SDK package by running: npm install lingo.dev. Visit https://lingo.dev for the latest features and documentation."
}
```
## /mcp.md
# Model Context Protocol
The [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP) is a standard for connecting Large Language Models (LLMs) to external services. This guide will walk you through how to connect AI tools to Lingo.dev using MCP.
Some of the AI tools that support MCP are:
- [Cursor](https://www.cursor.com/)
- [Claude desktop](https://claude.ai/download)
- [Cline for VS Code](https://github.com/cline/cline)
Connecting these tools to Lingo.dev will allow you to translate apps, websites, and other data using the best LLM models directly in your AI tool.
## Setup
Add this command to your AI tool:
```bash
npx -y lingo.dev mcp <api-key>
```
You can find your API key in [Lingo.dev app](https://lingo.dev/app/), in your project settings.
This will allow the tool to use `translate` tool provided by Lingo.dev. The setup depends on your AI tool and might be different for each tool. Here is setup for some of the tools we use in our team:
### Cursor
1. Open Cursor and go to Cursor Settings.
2. Open MCP tab
3. Click `+ Add new MCP server`
4. Enter the following details:
- Name: Lingo.dev
- Type: command
- Command: `npx -y lingo.dev mcp <api-key>` (use your project API key)
5. You will see green status indicator and "translate" tool available in the list
### Claude desktop
1. Open Claude desktop and go to Settings.
2. Open Developer tab
3. Click `Edit Config` to see configuration file in file explorer.
4. Open the file in text editor
5. Add the following configuration (use your project API key):
```json
{
"mcpServers": {
"supabase": {
"command": "npx",
"args": ["-y", "lingo.dev", "mcp", "<api-key>"]
}
}
}
```
6. Save the configuration file
7. Restart Claude desktop.
8. In the chat input, you will see a hammer icon with your MCP server details.
## Usage
You are now able to access Lingo.dev via MCP. You can ask AI tool translate any content via our service.
## /package.json
```json path="/package.json"
{
"name": "@lingo.dev",
"version": "1.0.0",
"type": "module",
"scripts": {
"prepare": "husky",
"build": "turbo build",
"typecheck": "turbo typecheck",
"test": "turbo test",
"new": "changeset",
"new:empty": "changeset --empty",
"prebuild": "syncpack lint-semver-ranges --filter '.*' --types prod,dev"
},
"devDependencies": {
"@babel/generator": "7.28.5",
"@babel/parser": "7.28.5",
"@babel/traverse": "7.28.5",
"@babel/types": "7.28.5",
"@commitlint/cli": "19.8.1",
"@commitlint/config-conventional": "19.8.1",
"@types/babel__traverse": "7.28.0",
"commitlint": "19.8.1",
"husky": "9.1.7",
"syncpack": "13.0.4",
"turbo": "2.6.1"
},
"dependencies": {
"@changesets/changelog-github": "0.5.1",
"@changesets/cli": "2.29.7",
"minimatch": "10.1.1",
"node-machine-id": "1.1.12"
},
"packageManager": "pnpm@9.12.3"
}
```
## /packages/cli/README.md
<p align="center">
<a href="https://lingo.dev">
<img src="https://raw.githubusercontent.com/lingodotdev/lingo.dev/main/content/banner.compiler.png" width="100%" alt="Lingo.dev" />
</a>
</p>
<p align="center">
<strong>⚡ Lingo.dev - open-source, AI-powered i18n toolkit for instant localization with LLMs.</strong>
</p>
<br />
<p align="center">
<a href="https://lingo.dev/compiler">Lingo.dev Compiler</a> •
<a href="https://lingo.dev/mcp">Lingo.dev MCP</a> •
<a href="https://lingo.dev/cli">Lingo.dev CLI</a> •
<a href="https://lingo.dev/ci">Lingo.dev CI/CD</a> •
<a href="https://lingo.dev/sdk">Lingo.dev SDK</a>
</p>
<p align="center">
<a href="https://github.com/lingodotdev/lingo.dev/actions/workflows/release.yml">
<img src="https://github.com/lingodotdev/lingo.dev/actions/workflows/release.yml/badge.svg" alt="Release" />
</a>
<a href="https://github.com/lingodotdev/lingo.dev/blob/main/LICENSE.md">
<img src="https://img.shields.io/github/license/lingodotdev/lingo.dev" alt="License" />
</a>
<a href="https://github.com/lingodotdev/lingo.dev/commits/main">
<img src="https://img.shields.io/github/last-commit/lingodotdev/lingo.dev" alt="Last Commit" />
</a>
<a href="https://lingo.dev/en">
<img src="https://img.shields.io/badge/Product%20Hunt-%231%20DevTool%20of%20the%20Month-orange?logo=producthunt&style=flat-square" alt="Product Hunt #1 DevTool of the Month" />
</a>
<a href="https://lingo.dev/en">
<img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Week-orange?logo=producthunt&style=flat-square" alt="Product Hunt #1 DevTool of the Week" />
</a>
<a href="https://lingo.dev/en">
<img src="https://img.shields.io/badge/Product%20Hunt-%232%20Product%20of%20the%20Day-orange?logo=producthunt&style=flat-square" alt="Product Hunt #2 Product of the Day" />
</a>
<a href="https://lingo.dev/en">
<img src="https://img.shields.io/badge/GitHub-Trending-blue?logo=github&style=flat-square" alt="Github trending" />
</a>
</p>
---
## Meet the Compiler 🆕
**Lingo.dev Compiler** is a free, open-source compiler middleware, designed to make any React app multilingual at build time without requiring any changes to the existing React components.
Install once:
```bash
npm install @lingo.dev/compiler
```
Enable in your build config:
```ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";
const nextConfig: NextConfig = {};
export default async function (): Promise<NextConfig> {
return await withLingo(nextConfig, {
sourceLocale: "en",
targetLocales: ["es", "fr"],
models: "lingo.dev",
});
}
```
Run `next build` and watch Spanish and French bundles pop out ✨
[Read the docs →](https://lingo.dev/compiler) for the full guide, and [Join our Discord](https://lingo.dev/go/discord) to get help with your setup.
---
### What's inside this repo?
| Tool | TL;DR | Docs |
| ------------ | ------------------------------------------------------------------------------ | --------------------------------------- |
| **Compiler** | Build-time React localization | [/compiler](https://lingo.dev/compiler) |
| **CLI** | One-command localization for web and mobile apps, JSON, YAML, markdown, + more | [/cli](https://lingo.dev/cli) |
| **CI/CD** | Auto-commit translations on every push + create pull requests if needed | [/ci](https://lingo.dev/ci) |
| **SDK** | Realtime translation for user-generated content | [/sdk](https://lingo.dev/sdk) |
Below are the quick hits for each 👇
---
### ⚡️ Lingo.dev CLI
Translate code & content straight from your terminal.
```bash
npx lingo.dev@latest run
```
It fingerprints every string, caches results, and only re-translates what changed.
[Follow the docs →](https://lingo.dev/cli) to learn how to set it up.
---
### 🔄 Lingo.dev CI/CD
Ship perfect translations automatically.
```yaml
# .github/workflows/i18n.yml
name: Lingo.dev i18n
on: [push]
jobs:
i18n:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: lingodotdev/lingo.dev@main
with:
api-key: ${{ secrets.LINGODOTDEV_API_KEY }}
```
Keeps your repo green and your product multilingual without the manual steps.
[Read the docs →](https://lingo.dev/ci)
---
### 🧩 Lingo.dev SDK
Instant per-request translation for dynamic content.
```ts
import { LingoDotDevEngine } from "lingo.dev/sdk";
const lingoDotDev = new LingoDotDevEngine({
apiKey: "your-api-key-here",
});
const content = {
greeting: "Hello",
farewell: "Goodbye",
message: "Welcome to our platform",
};
const translated = await lingoDotDev.localizeObject(content, {
sourceLocale: "en",
targetLocale: "es",
});
// Returns: { greeting: "Hola", farewell: "Adiós", message: "Bienvenido a nuestra plataforma" }
```
Perfect for chat, user comments, and other real-time flows.
[Read the docs →](https://lingo.dev/sdk)
---
## 🤝 Community
We're community-driven and love contributions!
- Got an idea? [Open an issue](https://github.com/lingodotdev/lingo.dev/issues)
- Want to fix something? [Send a PR](https://github.com/lingodotdev/lingo.dev/pulls)
- Need help? [Join our Discord](https://lingo.dev/go/discord)
## ⭐ Star History
If you like what we're doing, give us a ⭐ and help us reach 6,000 stars! 🌟
[](https://www.star-history.com/#lingodotdev/lingo.dev&Date)
## 🌐 Readme in other languages
[English](https://github.com/lingodotdev/lingo.dev) • [中文](/readme/zh-Hans.md) • [日本語](/readme/ja.md) • [한국어](/readme/ko.md) • [Español](/readme/es.md) • [Français](/readme/fr.md) • [Русский](/readme/ru.md) • [Українська](/readme/uk-UA.md) • [Deutsch](/readme/de.md) • [Italiano](/readme/it.md) • [العربية](/readme/ar.md) • [עברית](/readme/he.md) • [हिन्दी](/readme/hi.md) • [বাংলা](/readme/bn.md) • [فارسی](/readme/fa.md) • [Bhojpuri](/readme/bho.md)
Don't see your language? Add it to [`i18n.json`](./i18n.json) and open a PR!
## /packages/cli/WATCH_MODE.md
# Watch Mode Implementation
This document describes the implementation of the watch mode feature for the Lingo.dev CLI.
## Overview
The watch mode (`--watch` flag) automatically monitors source files for changes and triggers retranslation when modifications are detected. This eliminates the need for manual retranslation after each edit and keeps target language files in sync with source file changes.
## Usage
```bash
# Start watch mode
lingo.dev run --watch
# Watch with custom debounce timing (7 seconds)
lingo.dev run --watch --debounce 7000
# Watch with faster debounce for development (2 seconds)
lingo.dev run --watch --debounce 2000
# Watch with additional filters
lingo.dev run --watch --locale es --bucket json
lingo.dev run --watch --file "src/locales/*.json" --debounce 1000
```
## Features
### 1. Automatic File Monitoring
- Watches all source locale files based on your `i18n.json` configuration
- Monitors file changes, additions, and deletions
- Uses stable file watching to avoid false triggers
### 2. Debounced Processing
- Implements configurable debounce mechanism to avoid excessive retranslations
- Default: 5 seconds, customizable with `--debounce` flag
- Groups rapid changes into single translation batches
- Prevents resource waste from frequent file saves
### 3. Intelligent Pattern Detection
- Automatically determines which files to watch based on bucket patterns
- Replaces `[locale]` placeholders with source locale
- Respects filtering options (`--bucket`, `--file`, etc.)
### 4. Real-time Feedback
- Shows which files are being watched on startup
- Displays file change notifications
- Provides translation progress updates
- Shows completion status for each batch
### 5. Graceful Error Handling
- Continues watching even if individual translations fail
- Reports errors without stopping the watch process
- Maintains watch state across translation cycles
## Implementation Details
### File Structure
- `src/cli/cmd/run/watch.ts` - Main watch implementation
- `src/cli/cmd/run/_types.ts` - Updated to include watch flag
- `src/cli/cmd/run/index.ts` - Integration with main run command
### Key Components
#### Watch State Management
```typescript
interface WatchState {
isRunning: boolean;
pendingChanges: Set<string>;
debounceTimer?: NodeJS.Timeout;
}
```
#### File Pattern Resolution
The watch mode automatically determines which files to monitor by:
1. Getting buckets from `i18n.json`
2. Applying user filters (`--bucket`, `--file`)
3. Replacing `[locale]` with source locale
4. Creating file patterns for chokidar
#### Debounce Logic
- Uses configurable debounce timer (default: 5000ms)
- Resets timer on each file change
- Only triggers translation when timer expires
- Prevents overlapping translation runs
- Customizable via `--debounce <milliseconds>` flag
### Dependencies
- `chokidar` - Robust file watching library
- Existing Lingo.dev pipeline (setup, plan, execute)
## Example Workflow
1. **Start Watch Mode**
```bash
lingo.dev run --watch
```
2. **Initial Setup**
- Performs normal translation setup
- Runs initial planning and execution
- Shows summary of completed translations
- Starts file watching
3. **File Change Detection**
```
📝 File changed: locales/en.json
⏳ Debouncing... (5000ms)
```
4. **Automatic Retranslation**
```
🔄 Triggering retranslation...
Changed files: locales/en.json
[Planning] Found 2 translation task(s)
[Localization] Processing tasks...
✅ Retranslation completed
👀 Continuing to watch for changes...
```
## Error Handling
The watch mode is designed to be resilient:
- **Translation Errors**: Reports errors but continues watching
- **File System Errors**: Logs watch errors but maintains process
- **Invalid Files**: Skips problematic files and continues
- **Interrupt Handling**: Gracefully shuts down on Ctrl+C
## Performance Considerations
- **Efficient Pattern Matching**: Only watches relevant source files
- **Debounced Processing**: Prevents excessive API calls
- **Memory Management**: Clears completed change sets
- **Process Isolation**: Each translation runs in isolated context
## Testing
Use the provided demo setup script:
```bash
./demo-watch-setup.sh
cd /tmp/lingo-watch-demo
lingo.dev run --watch
```
Then in another terminal:
```bash
# Add a new translation key
echo '{"hello": "Hello", "world": "World", "welcome": "Welcome to Lingo.dev", "goodbye": "Goodbye"}' > locales/en.json
# Watch as translations are automatically updated
```
## Integration with Existing Features
The watch mode works seamlessly with all existing run command options:
- `--locale` - Watch only affects specified locales
- `--bucket` - Watch only monitors specified bucket types
- `--file` - Watch only monitors matching file patterns
- `--key` - Post-change filtering applies to specific keys
- `--force` - Forces full retranslation on each change
- `--api-key` - Uses specified API key for all operations
- `--concurrency` - Controls translation parallelism
- `--debounce` - Configures debounce delay in milliseconds (default: 5000ms)
## Future Enhancements
Potential improvements for future versions:
1. **Watch Exclusions**: Ignore specific files or patterns
2. **Selective Translation**: Only translate changed keys
3. **Change Summaries**: Show detailed change reports
4. **Multi-project Support**: Watch multiple i18n configurations
5. **Advanced Debounce Modes**: Per-file or per-bucket debouncing
## /packages/cli/assets/failure.mp3
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/packages/cli/assets/failure.mp3
## /packages/cli/assets/success.mp3
Binary file available at https://raw.githubusercontent.com/lingodotdev/lingo.dev/refs/heads/main/packages/cli/assets/success.mp3
## /packages/cli/bin/cli.mjs
```mjs path="/packages/cli/bin/cli.mjs"
#!/usr/bin/env node
import CLI from "../build/cli.mjs";
await CLI.parseAsync(process.argv);
```
## /packages/cli/demo/ail/i18n.json
```json path="/packages/cli/demo/ail/i18n.json"
{
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es"]
},
"buckets": {
"ail": {
"include": ["./*.ail"]
}
},
"$schema": "https://lingo.dev/schema/i18n.json"
}
```
## /packages/cli/demo/android/es/example.xml
```xml path="/packages/cli/demo/android/es/example.xml"
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MyApp</string>
<string name="welcome_message">¡Hola, mundo!</string>
<string name="button_text">Comenzar</string>
<string-array name="color_names">
<item>Rojo</item>
<item>Verde</item>
<item>¡Azul!</item>
</string-array>
<plurals name="notification_count">
<item quantity="one">%d mensaje nuevo</item>
<item quantity="other">%d mensajes nuevos</item>
</plurals>
<bool name="show_tutorial">true</bool>
<bool name="enable_animations">false</bool>
<integer name="max_retry_attempts">3</integer>
<integer name="default_timeout">30</integer>
<string name="html_snippet"><b>Negrita</b></string>
<string name="apostrophe_example">¡No lo olvides!</string>
<string name="cdata_example"><![CDATA[Los usuarios solo pueden ver tu comentario después de haberse registrado. <u>Más información.</u>]]></string>
<string-array name="mixed_items">
<item> Elemento con espacios </item>
<item> </item>
</string-array>
<color name="primary_color">#FF6200EE</color>
<color name="secondary_color">#FF03DAC5</color>
<dimen name="text_size">16sp</dimen>
<dimen name="margin">8dp</dimen>
<integer-array name="numbers">
<item>1</item>
<item>2</item>
<item>3</item>
</integer-array>
<array name="icons">
<item>@drawable/icon1</item>
<item>@drawable/icon2</item>
</array>
<string name="terms_of_use_raw"><u>Condiciones de uso</u></string>
<item type="id" name="button_ok"></item>
<string name="view_your_options"><u>Ver tus opciones</u></string>
</resources>
```
## /packages/cli/demo/android/i18n.json
```json path="/packages/cli/demo/android/i18n.json"
{
"version": "1.10",
"locale": {
"source": "en",
"targets": [
"es"
]
},
"buckets": {
"android": {
"include": [
"./[locale]/example.xml"
]
}
},
"$schema": "https://lingo.dev/schema/i18n.json"
}
```
## /packages/cli/demo/csv/example.csv
```csv path="/packages/cli/demo/csv/example.csv"
KEY,en,es
welcome_message,Welcome to our application,Bienvenido a nuestra aplicación
button_save,Save,Guardar
error_invalid_email,Please enter a valid email address,Introduce una dirección de correo electrónico válida
product_name,Premium Widget,Premium Widget
empty_row_key,,
whitespace_only, ,
new_feature,This is a new feature,Esta es una nueva funcionalidad
```
## /readme.md
packages/cli/README.md
## /readme/bho.md
The content has been capped at 50000 tokens. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.