@intlayer/chokidar 8.1.1 → 8.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/assets/installSkills/skills/angular.md +131 -24
  2. package/dist/assets/installSkills/skills/astro.md +17 -2
  3. package/dist/assets/installSkills/skills/cli.md +42 -4
  4. package/dist/assets/installSkills/skills/config.md +53 -3
  5. package/dist/assets/installSkills/skills/content.md +247 -5
  6. package/dist/assets/installSkills/skills/next_js.md +93 -13
  7. package/dist/assets/installSkills/skills/preact.md +54 -20
  8. package/dist/assets/installSkills/skills/react.md +71 -4
  9. package/dist/assets/installSkills/skills/remote_content.md +23 -2
  10. package/dist/assets/installSkills/skills/solid.md +58 -18
  11. package/dist/assets/installSkills/skills/svelte.md +61 -7
  12. package/dist/assets/installSkills/skills/usage.md +18 -83
  13. package/dist/assets/installSkills/skills/vue.md +19 -6
  14. package/dist/cjs/_virtual/_utils_asset.cjs +1 -1
  15. package/dist/cjs/build.cjs +51 -0
  16. package/dist/cjs/buildIntlayerDictionary/buildIntlayerDictionary.cjs +1 -1
  17. package/dist/cjs/buildIntlayerDictionary/writeDynamicDictionary.cjs +1 -1
  18. package/dist/cjs/buildIntlayerDictionary/writeFetchDictionary.cjs +1 -1
  19. package/dist/cjs/buildIntlayerDictionary/writeMergedDictionary.cjs +1 -1
  20. package/dist/cjs/buildIntlayerDictionary/writeRemoteDictionary.cjs +1 -1
  21. package/dist/cjs/buildIntlayerDictionary/writeUnmergedDictionary.cjs +1 -1
  22. package/dist/cjs/cleanOutputDir.cjs +1 -1
  23. package/dist/cjs/cleanRemovedContentDeclaration.cjs +4 -4
  24. package/dist/cjs/cli.cjs +21 -0
  25. package/dist/cjs/createDictionaryEntryPoint/createDictionaryEntryPoint.cjs +1 -1
  26. package/dist/cjs/createDictionaryEntryPoint/generateDictionaryListContent.cjs +1 -1
  27. package/dist/cjs/createDictionaryEntryPoint/getBuiltDictionariesPath.cjs +2 -2
  28. package/dist/cjs/createDictionaryEntryPoint/getBuiltDynamicDictionariesPath.cjs +2 -2
  29. package/dist/cjs/createDictionaryEntryPoint/getBuiltFetchDictionariesPath.cjs +2 -2
  30. package/dist/cjs/createDictionaryEntryPoint/getBuiltRemoteDictionariesPath.cjs +2 -2
  31. package/dist/cjs/createDictionaryEntryPoint/getBuiltUnmergedDictionariesPath.cjs +2 -2
  32. package/dist/cjs/createType/createModuleAugmentation.cjs +1 -1
  33. package/dist/cjs/filterInvalidDictionaries.cjs +1 -1
  34. package/dist/cjs/handleAdditionalContentDeclarationFile.cjs +1 -1
  35. package/dist/cjs/handleContentDeclarationFileChange.cjs +3 -3
  36. package/dist/cjs/handleContentDeclarationFileMoved.cjs +1 -1
  37. package/dist/cjs/handleUnlinkedContentDeclarationFile.cjs +2 -2
  38. package/dist/cjs/index.cjs +20 -20
  39. package/dist/cjs/initConfig/index.cjs +1 -1
  40. package/dist/cjs/installSkills/index.cjs +86 -158
  41. package/dist/cjs/installSkills/index.cjs.map +1 -1
  42. package/dist/cjs/listGitFiles.cjs +2 -2
  43. package/dist/cjs/listProjects.cjs +1 -1
  44. package/dist/cjs/loadDictionaries/getIntlayerBundle.cjs +1 -1
  45. package/dist/cjs/loadDictionaries/index.cjs +1 -1
  46. package/dist/cjs/loadDictionaries/loadContentDeclaration.cjs +1 -1
  47. package/dist/cjs/loadDictionaries/loadDictionaries.cjs +1 -1
  48. package/dist/cjs/prepareIntlayer.cjs +4 -4
  49. package/dist/cjs/transformFiles/transformFiles.cjs +2 -2
  50. package/dist/cjs/utils/formatter.cjs +1 -1
  51. package/dist/cjs/utils/index.cjs +46 -0
  52. package/dist/cjs/watcher.cjs +3 -3
  53. package/dist/cjs/writeContentDeclaration/processContentDeclarationContent.cjs +2 -2
  54. package/dist/cjs/writeContentDeclaration/writeContentDeclaration.cjs +2 -2
  55. package/dist/cjs/writeContentDeclaration/writeJSFile.cjs +3 -3
  56. package/dist/esm/_virtual/_utils_asset.mjs +1 -1
  57. package/dist/esm/build.mjs +24 -0
  58. package/dist/esm/buildIntlayerDictionary/buildIntlayerDictionary.mjs +1 -1
  59. package/dist/esm/buildIntlayerDictionary/writeDynamicDictionary.mjs +1 -1
  60. package/dist/esm/buildIntlayerDictionary/writeFetchDictionary.mjs +1 -1
  61. package/dist/esm/buildIntlayerDictionary/writeMergedDictionary.mjs +1 -1
  62. package/dist/esm/buildIntlayerDictionary/writeRemoteDictionary.mjs +1 -1
  63. package/dist/esm/buildIntlayerDictionary/writeUnmergedDictionary.mjs +1 -1
  64. package/dist/esm/cleanOutputDir.mjs +1 -1
  65. package/dist/esm/cleanRemovedContentDeclaration.mjs +4 -4
  66. package/dist/esm/cli.mjs +8 -0
  67. package/dist/esm/createDictionaryEntryPoint/createDictionaryEntryPoint.mjs +1 -1
  68. package/dist/esm/createDictionaryEntryPoint/generateDictionaryListContent.mjs +1 -1
  69. package/dist/esm/createDictionaryEntryPoint/getBuiltDictionariesPath.mjs +2 -2
  70. package/dist/esm/createDictionaryEntryPoint/getBuiltDynamicDictionariesPath.mjs +2 -2
  71. package/dist/esm/createDictionaryEntryPoint/getBuiltFetchDictionariesPath.mjs +2 -2
  72. package/dist/esm/createDictionaryEntryPoint/getBuiltRemoteDictionariesPath.mjs +2 -2
  73. package/dist/esm/createDictionaryEntryPoint/getBuiltUnmergedDictionariesPath.mjs +2 -2
  74. package/dist/esm/createType/createModuleAugmentation.mjs +1 -1
  75. package/dist/esm/filterInvalidDictionaries.mjs +1 -1
  76. package/dist/esm/handleAdditionalContentDeclarationFile.mjs +1 -1
  77. package/dist/esm/handleContentDeclarationFileChange.mjs +3 -3
  78. package/dist/esm/handleContentDeclarationFileMoved.mjs +1 -1
  79. package/dist/esm/handleUnlinkedContentDeclarationFile.mjs +2 -2
  80. package/dist/esm/index.mjs +20 -20
  81. package/dist/esm/initConfig/index.mjs +1 -1
  82. package/dist/esm/installSkills/index.mjs +86 -157
  83. package/dist/esm/installSkills/index.mjs.map +1 -1
  84. package/dist/esm/listGitFiles.mjs +2 -2
  85. package/dist/esm/listProjects.mjs +1 -1
  86. package/dist/esm/loadDictionaries/getIntlayerBundle.mjs +1 -1
  87. package/dist/esm/loadDictionaries/index.mjs +1 -1
  88. package/dist/esm/loadDictionaries/loadContentDeclaration.mjs +1 -1
  89. package/dist/esm/loadDictionaries/loadDictionaries.mjs +1 -1
  90. package/dist/esm/prepareIntlayer.mjs +4 -4
  91. package/dist/esm/transformFiles/transformFiles.mjs +2 -2
  92. package/dist/esm/utils/formatter.mjs +1 -1
  93. package/dist/esm/utils/index.mjs +20 -0
  94. package/dist/esm/watcher.mjs +3 -3
  95. package/dist/esm/writeContentDeclaration/processContentDeclarationContent.mjs +2 -2
  96. package/dist/esm/writeContentDeclaration/writeContentDeclaration.mjs +2 -2
  97. package/dist/esm/writeContentDeclaration/writeJSFile.mjs +3 -3
  98. package/dist/types/build.d.ts +29 -0
  99. package/dist/types/cli.d.ts +8 -0
  100. package/dist/types/index.d.ts +16 -16
  101. package/dist/types/installSkills/index.d.ts +42 -2
  102. package/dist/types/installSkills/index.d.ts.map +1 -1
  103. package/dist/types/utils/index.d.ts +19 -0
  104. package/package.json +44 -12
@@ -1,10 +1,53 @@
1
1
  ---
2
- name: NextJS
3
- description: Next.js-specific usage (Server & Client components)
2
+ name: intlayer-next-js
3
+ description: Integrates Intlayer internationalization with Next.js App Router and Pages Router. Use when the user asks to "setup Next.js i18n", use "useIntlayer" in Server Components, or handle client-side translations in Next.js.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n, nextjs]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Next.js Usage
7
16
 
17
+ ## Core Philosophy
18
+
19
+ Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the Next.js components that use them.
20
+
21
+ ## Workflow
22
+
23
+ To create a translated component, you need two files:
24
+
25
+ 1. **Declaration:** A content file (e.g., `myComponent.content.ts`) defining the dictionary.
26
+ 2. **Implementation:** A Next.js component (Server or Client) using the `useIntlayer` hook.
27
+
28
+ ### 1. Declare Content
29
+
30
+ Create a content file using `t()` for translations.
31
+ **File:** `src/components/MyComponent/myComponent.content.ts`
32
+
33
+ ```typescript
34
+ import { t, type Dictionary } from "intlayer";
35
+
36
+ const content = {
37
+ // The 'key' must be unique and matches what you pass to useIntlayer()
38
+ key: "my-component",
39
+ content: {
40
+ text: t({
41
+ en: "Welcome",
42
+ fr: "Bienvenue",
43
+ es: "Hola",
44
+ }),
45
+ },
46
+ } satisfies Dictionary;
47
+
48
+ export default content;
49
+ ```
50
+
8
51
  ## Setup
9
52
 
10
53
  - [Next.js](https://intlayer.org/doc/environment/nextjs.md)
@@ -15,34 +58,71 @@ description: Next.js-specific usage (Server & Client components)
15
58
 
16
59
  ## Server Components
17
60
 
61
+ To use Intlayer in Server Components, use `IntlayerServerProvider` to provide the locale and `useIntlayer` from `next-intlayer/server`.
62
+
18
63
  ```tsx
19
- import { useIntlayer } from "next-intlayer/server";
20
- const MyComponent = async () => {
21
- const content = await useIntlayer("my-dictionary-key");
64
+ import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
65
+
66
+ const MyServerComponent = () => {
67
+ const content = useIntlayer("my-component");
22
68
  return (
23
69
  <div>
24
- <h1>{content.title}</h1>
25
- <img src={content.image.src.value} alt={content.image.alt.value} />
70
+ <h1>{content.text}</h1>
26
71
  </div>
27
72
  );
28
73
  };
74
+
75
+ const Page = async ({ params }) => {
76
+ const { locale } = await params;
77
+ return (
78
+ <IntlayerServerProvider locale={locale}>
79
+ <MyServerComponent />
80
+ </IntlayerServerProvider>
81
+ );
82
+ };
83
+
84
+ export default Page;
29
85
  ```
30
86
 
31
87
  ## Client Components
32
88
 
89
+ For Client Components, add the `"use client"` directive and use `useIntlayer` from `next-intlayer`. Ensure the component is wrapped in an `IntlayerClientProvider`.
90
+
33
91
  ```tsx
34
92
  "use client";
93
+
35
94
  import { useIntlayer } from "next-intlayer";
36
- const MyComponent = async () => {
37
- const content = await useIntlayer("my-dictionary-key");
95
+
96
+ export const MyClientComponent = () => {
97
+ const content = useIntlayer("my-component");
98
+
38
99
  return (
39
100
  <div>
40
- <h1>{content.title}</h1>
41
- <img src={content.image.src.value} alt={content.image.alt.value} />
101
+ <h1>{content.text}</h1>
42
102
  </div>
43
103
  );
44
104
  };
45
105
  ```
46
106
 
47
- Use `useIntlayer` from `next-intlayer` exactly like in React.
48
- [Next.js Documentation](https://intlayer.org/doc/packages/next-intlayer.md)
107
+ [Next.js package Documentation](https://intlayer.org/doc/packages/next-intlayer.md)
108
+ [Next.js package Documentation](https://intlayer.org/doc/packages/next-intlayer.md)
109
+
110
+ ## References
111
+
112
+ ### Environments
113
+
114
+ - [Next.js](https://intlayer.org/doc/environment/nextjs.md)
115
+ - [Next.js 14](https://intlayer.org/doc/environment/nextjs/14.md)
116
+ - [Next.js 15](https://intlayer.org/doc/environment/nextjs/15.md)
117
+ - [Next.js No Locale Path](https://intlayer.org/doc/environment/nextjs/no-locale-path.md)
118
+ - [Next.js with Page Router](https://intlayer.org/doc/environment/nextjs/next-with-page-router.md)
119
+
120
+ ### Packages
121
+
122
+ - [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)
123
+ - [Next Intlayer Exports](https://intlayer.org/doc/packages/next-intlayer/exports.md)
124
+ - [Next Intlayer Middleware](https://intlayer.org/doc/packages/next-intlayer/intlayerMiddleware.md)
125
+ - [Next Intlayer T](https://intlayer.org/doc/packages/next-intlayer/t.md)
126
+ - [Next Intlayer useDictionary](https://intlayer.org/doc/packages/next-intlayer/useDictionary.md)
127
+ - [Next Intlayer useIntlayer](https://intlayer.org/doc/packages/next-intlayer/useIntlayer.md)
128
+ - [Next Intlayer useLocale](https://intlayer.org/doc/packages/next-intlayer/useLocale.md)
@@ -1,10 +1,53 @@
1
1
  ---
2
- name: Preact
3
- description: Preact-specific syntax and hooks usage
2
+ name: intlayer-preact
3
+ description: Integrates Intlayer internationalization with Preact applications. Use when the user asks to "setup Preact i18n", create a new translated component, use the "useIntlayer" hook in Preact, or configure providers.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n, preact, vite]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Preact Usage
7
16
 
17
+ ## Core Philosophy
18
+
19
+ Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the Preact components that use them.
20
+
21
+ ## Workflow
22
+
23
+ To create a translated component, you need two files:
24
+
25
+ 1. **Declaration:** A content file (e.g., `myComponent.content.ts`) defining the dictionary.
26
+ 2. **Implementation:** A Preact component (e.g., `MyComponent.tsx`) using the `useIntlayer` hook.
27
+
28
+ ### Declare Content
29
+
30
+ Create a content file using `t()` for translations.
31
+ **File:** `src/components/MyComponent/myComponent.content.ts`
32
+
33
+ ```typescript
34
+ import { t, type Dictionary } from "intlayer";
35
+
36
+ const content = {
37
+ // The 'key' must be unique and matches what you pass to useIntlayer()
38
+ key: "my-component",
39
+ content: {
40
+ text: t({
41
+ en: "Welcome",
42
+ fr: "Bienvenue",
43
+ es: "Hola",
44
+ }),
45
+ },
46
+ } satisfies Dictionary;
47
+
48
+ export default content;
49
+ ```
50
+
8
51
  ## Setup
9
52
 
10
53
  - [Vite and Preact](https://intlayer.org/doc/environment/vite-and-preact.md)
@@ -15,34 +58,25 @@ description: Preact-specific syntax and hooks usage
15
58
  import { useIntlayer } from "preact-intlayer";
16
59
 
17
60
  const MyComponent = () => {
18
- const content = useIntlayer("my-dictionary-key");
61
+ const content = useIntlayer("my-component");
19
62
 
20
63
  return (
21
64
  <div>
22
65
  <h1>
23
- {/* Return react node */}
24
- {content.title}
66
+ {/* Return content */}
67
+ {content.text}
25
68
  </h1>
26
69
  {/* Return string (.value) */}
27
- <img src={content.image.src.value} alt={content.image.alt.value} />{" "}
70
+ <img src={content.text.value} alt={content.text.value} />
28
71
  </div>
29
72
  );
30
73
  };
31
74
  ```
32
75
 
33
- ## useLocale Hook
76
+ [Preact package Documentation](https://intlayer.org/doc/packages/preact-intlayer.md)
34
77
 
35
- ```tsx
36
- import { useLocale } from "preact-intlayer";
37
- import { Locales } from "intlayer";
78
+ ## References
38
79
 
39
- const LocaleSwitcher = () => {
40
- const { setLocale } = useLocale();
41
-
42
- return (
43
- <button onClick={() => setLocale(Locales.ENGLISH)}>
44
- Change Language to English
45
- </button>
46
- );
47
- };
48
- ```
80
+ - [Vite and Preact](https://intlayer.org/doc/environment/vite-and-preact.md)
81
+ - [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)
82
+ - [Preact Intlayer Exports](https://intlayer.org/doc/packages/preact-intlayer/exports.md)
@@ -1,10 +1,56 @@
1
1
  ---
2
- name: React
3
- description: React-specific syntax and hooks usage
2
+ name: intlayer-react
3
+ description: Integrates Intlayer internationalization with React component. Use when the user asks to "setup React i18n", create a new translated component, use the "useIntlayer" hook, or configure providers.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n, react, vite]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer React Usage
7
16
 
17
+ ## Core Philosophy
18
+
19
+ Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the React components that use them.
20
+
21
+ ## Workflow
22
+
23
+ To create a translated component, you need two files:
24
+
25
+ 1. **Declaration:** A content file (e.g., `myComponent.content.ts`) defining the dictionary.
26
+ 2. **Implementation:** A React component (e.g., `MyComponent.tsx`) using the `useIntlayer` hook.
27
+
28
+ ### 1. Declare Content
29
+
30
+ Create a content file using `t()` for translations.
31
+ **File:** `src/components/MyComponent/myComponent.content.ts`
32
+
33
+ ```typescript
34
+ import { t, type Dictionary } from "intlayer";
35
+
36
+ const content = {
37
+ // The 'key' must be unique and matches what you pass to useIntlayer()
38
+ key: "my-component",
39
+ content: {
40
+ text: t({
41
+ en: "Welcome",
42
+ fr: "Bienvenue",
43
+ es: "Hola",
44
+ // ... All other locales set in intlayer config file
45
+ }),
46
+ },
47
+ } satisfies Dictionary;
48
+
49
+ export default content;
50
+ ```
51
+
52
+ # Intlayer React Usage
53
+
8
54
  ## Setup
9
55
 
10
56
  - [Vite and React](https://intlayer.org/doc/environment/vite-and-react.md)
@@ -25,11 +71,32 @@ const MyComponent = () => {
25
71
  <div>
26
72
  <h1>
27
73
  {/* Return react node */}
28
- {content.title}
74
+ {content.text}
29
75
  </h1>
30
76
  {/* Return string (.value) */}
31
- <img src={content.image.src.value} alt={content.image.alt.value} />
77
+ <img src={content.text.value} alt={content.text.value} />
32
78
  </div>
33
79
  );
34
80
  };
35
81
  ```
82
+
83
+ ## References
84
+
85
+ ### Environments
86
+
87
+ - [Vite and React](https://intlayer.org/doc/environment/vite-and-react.md)
88
+ - [Create React App](https://intlayer.org/doc/environment/create-react-app.md)
89
+ - [Vite and React (React Router v7)](https://intlayer.org/doc/environment/vite-and-react/react-router-v7.md)
90
+ - [Vite and React (React Router v7 FS Routes)](https://intlayer.org/doc/environment/vite-and-react/react-router-v7-fs-routes.md)
91
+
92
+ ### Packages
93
+
94
+ - [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)
95
+ - [React Intlayer Provider](https://intlayer.org/doc/packages/react-intlayer/IntlayerProvider.md)
96
+ - [React Intlayer MarkdownRenderer](https://intlayer.org/doc/packages/react-intlayer/MarkdownRenderer.md)
97
+ - [React Intlayer Exports](https://intlayer.org/doc/packages/react-intlayer/exports.md)
98
+ - [React Intlayer T](https://intlayer.org/doc/packages/react-intlayer/t.md)
99
+ - [React Intlayer useDictionary](https://intlayer.org/doc/packages/react-intlayer/useDictionary.md)
100
+ - [React Intlayer useI18n](https://intlayer.org/doc/packages/react-intlayer/useI18n.md)
101
+ - [React Intlayer useIntlayer](https://intlayer.org/doc/packages/react-intlayer/useIntlayer.md)
102
+ - [React Intlayer useLocale](https://intlayer.org/doc/packages/react-intlayer/useLocale.md)
@@ -1,6 +1,15 @@
1
1
  ---
2
- name: RemoteContent
3
- description: How to use Intlayer with Remote/CMS/Server-side content
2
+ name: intlayer-cms
3
+ description: Manages remote content and server-side dictionaries using the Intlayer CMS. Use when the user asks to "fetch remote translations", "use Intlayer CMS", or "handle server-side content".
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Server Content & CMS
@@ -8,3 +17,15 @@ description: How to use Intlayer with Remote/CMS/Server-side content
8
17
  For managing server-side content and using the Intlayer CMS:
9
18
 
10
19
  - [Intlayer CMS Documentation](https://intlayer.org/cms.md)
20
+
21
+ ## References
22
+
23
+ ### Concepts
24
+
25
+ - [CMS Concept](https://intlayer.org/doc/concept/cms.md)
26
+ - [Editor Concept](https://intlayer.org/doc/concept/editor.md)
27
+
28
+ ### Links
29
+
30
+ - [CMS](https://intlayer.org/cms)
31
+ - [TMS](https://intlayer.org/tms)
@@ -1,10 +1,53 @@
1
1
  ---
2
- name: Solid
3
- description: Solid-specific primitives and syntax
2
+ name: intlayer-solid-js
3
+ description: Integrates Intlayer internationalization with SolidJS components. Use when the user asks to "setup SolidJS i18n", create a new translated component, use the "useIntlayer" hook in Solid, or configure providers.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n, solid, vite]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Solid Usage
7
16
 
17
+ ## Core Philosophy
18
+
19
+ Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the Solid components that use them.
20
+
21
+ ## Workflow
22
+
23
+ To create a translated component, you need two files:
24
+
25
+ 1. **Declaration:** A content file (e.g., `myComponent.content.ts`) defining the dictionary.
26
+ 2. **Implementation:** A Solid component (e.g., `MyComponent.tsx`) using the `useIntlayer` hook.
27
+
28
+ ### Declare Content
29
+
30
+ Create a content file using `t()` for translations.
31
+ **File:** `src/components/MyComponent/myComponent.content.ts`
32
+
33
+ ```typescript
34
+ import { t, type Dictionary } from "intlayer";
35
+
36
+ const content = {
37
+ // The 'key' must be unique and matches what you pass to useIntlayer()
38
+ key: "my-component",
39
+ content: {
40
+ text: t({
41
+ en: "Welcome",
42
+ fr: "Bienvenue",
43
+ es: "Hola",
44
+ }),
45
+ },
46
+ } satisfies Dictionary;
47
+
48
+ export default content;
49
+ ```
50
+
8
51
  ## Setup
9
52
 
10
53
  - [Vite and Solid](https://intlayer.org/doc/environment/vite-and-solid.md)
@@ -18,30 +61,27 @@ description: Solid-specific primitives and syntax
18
61
  import { useIntlayer } from "solid-intlayer";
19
62
 
20
63
  const MyComponent = () => {
21
- const content = useIntlayer("my-dictionary-key");
64
+ const content = useIntlayer("my-component");
22
65
 
23
66
  return (
24
67
  <div>
25
- <h1>{content().title}</h1>
26
- <p>{content().description}</p>
68
+ <h1>
69
+ {/* Return content */}
70
+ {content().text}
71
+ </h1>
72
+ {/* Return string (.value) */}
73
+ <img src={content().text.value} alt={content().text.value} />
27
74
  </div>
28
75
  );
29
76
  };
30
77
  ```
31
78
 
32
- ## useLocale Hook
79
+ ## References
33
80
 
34
- ```tsx
35
- import { useLocale } from "solid-intlayer";
36
- import { Locales } from "intlayer";
81
+ ### Environments
37
82
 
38
- const LocaleSwitcher = () => {
39
- const { setLocale } = useLocale();
83
+ - [Vite and Solid](https://intlayer.org/doc/environment/vite-and-solid.md)
40
84
 
41
- return (
42
- <button onClick={() => setLocale(Locales.ENGLISH)}>
43
- Change Language to English
44
- </button>
45
- );
46
- };
47
- ```
85
+ ### Packages
86
+
87
+ - [Solid Intlayer Exports](https://intlayer.org/doc/packages/solid-intlayer/exports.md)
@@ -1,10 +1,53 @@
1
1
  ---
2
- name: Svelte
3
- description: Svelte-specific stores and syntax
2
+ name: intlayer-svelte
3
+ description: Integrates Intlayer internationalization with Svelte and SvelteKit applications. Use when the user asks to "setup Svelte i18n", create a new translated component, use the "useIntlayer" store, or configure providers.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n, svelte, vite]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Svelte Usage
7
16
 
17
+ ## Core Philosophy
18
+
19
+ Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the Svelte components that use them.
20
+
21
+ ## Workflow
22
+
23
+ To create a translated component, you need two files:
24
+
25
+ 1. **Declaration:** A content file (e.g., `myComponent.content.ts`) defining the dictionary.
26
+ 2. **Implementation:** A Svelte component (e.g., `MyComponent.svelte`) using the `useIntlayer` store.
27
+
28
+ ### 1. Declare Content
29
+
30
+ Create a content file using `t()` for translations.
31
+ **File:** `src/components/MyComponent/myComponent.content.ts`
32
+
33
+ ```typescript
34
+ import { t, type Dictionary } from "intlayer";
35
+
36
+ const content = {
37
+ // The 'key' must be unique and matches what you pass to useIntlayer()
38
+ key: "my-component",
39
+ content: {
40
+ text: t({
41
+ en: "Welcome",
42
+ fr: "Bienvenue",
43
+ es: "Hola",
44
+ }),
45
+ },
46
+ } satisfies Dictionary;
47
+
48
+ export default content;
49
+ ```
50
+
8
51
  ## Setup
9
52
 
10
53
  - [SvelteKit](https://intlayer.org/doc/environment/sveltekit.md)
@@ -12,16 +55,27 @@ description: Svelte-specific stores and syntax
12
55
 
13
56
  ## useIntlayer Hook
14
57
 
58
+ In Svelte, `useIntlayer` returns a **store**. You must use the `$` prefix to access its value.
59
+
15
60
  ```svelte
16
61
  <script>
17
62
  import { useIntlayer } from "svelte-intlayer";
18
- const content = useIntlayer("my-dictionary-key");
63
+ const content = useIntlayer("my-component");
19
64
  </script>
65
+
20
66
  <div>
21
- <h1>{$content.title}</h1>
22
- <div aria-label={$content.title.value}></div>
23
- <svelte:component this={$content.title} />
67
+ <h1>
68
+ {/* Return content */}
69
+ {$content.text}
70
+ </h1>
71
+ {/* Return string (.value) */}
72
+ <div aria-label={$content.text.value}></div>
24
73
  </div>
25
74
  ```
26
75
 
27
- [Svelte Documentation](https://intlayer.org/doc/intlayer_with_svelte_kit.md)
76
+ ## References
77
+
78
+ - [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)
79
+ - [Vite and Svelte](https://intlayer.org/doc/environment/vite-and-svelte.md)
80
+ - [SvelteKit](https://intlayer.org/doc/environment/sveltekit.md)
81
+ - [Svelte Intlayer Exports](https://intlayer.org/doc/packages/svelte-intlayer/exports.md)
@@ -1,6 +1,15 @@
1
1
  ---
2
- name: Usage
3
- description: How to use Intlayer in your project
2
+ name: intlayer-usage
3
+ description: Provides general guidelines for using Intlayer in any project. Use when the user asks to "get started with Intlayer", "declare content files", or understand the "project structure" for internationalization.
4
+ metadata:
5
+ author: Intlayer
6
+ url: https://intlayer.org
7
+ license: Apache-2.0
8
+ mcp-server: "@intlayer/mcp"
9
+ category: productivity
10
+ tags: [i18n]
11
+ documentation: https://intlayer.org/doc
12
+ support: contact@intlayer.org
4
13
  ---
5
14
 
6
15
  # Intlayer Usage
@@ -12,87 +21,6 @@ To use Intlayer effectively:
12
21
  2. **Declare Content**:
13
22
  We recommend creating one content declaration file per component, located alongside the component file. This keeps translations close to the code.
14
23
 
15
- **Example Directory Structure:**
16
-
17
- ```
18
- src/
19
- ├── components/
20
- │ ├── MyComponent/
21
- │ │ ├── index.content.ts # Content declaration
22
- │ │ └── index.tsx # Component
23
- │ ├── MyOtherComponent.content.ts # Content declaration
24
- │ └── MyOtherComponent.tsx # Component
25
- ```
26
-
27
- **Content Templates:**
28
-
29
- _TypeScript (.content.ts)_
30
-
31
- ```typescript
32
- import { t, type Dictionary } from "intlayer";
33
-
34
- const content = {
35
- key: "my-component-key",
36
- content: {
37
- title: t({
38
- en: "Hello World",
39
- es: "Hola Mundo",
40
- }),
41
- description: "My description text",
42
- },
43
- } satisfies Dictionary;
44
-
45
- export default content;
46
- ```
47
-
48
- _TypeScript with React (.content.tsx)_
49
-
50
- ```tsx
51
- import { t, type Dictionary } from "intlayer";
52
- import { ReactNode } from "react";
53
-
54
- const content = {
55
- key: "my-component-key",
56
- content: {
57
- description: t<ReactNode>({
58
- en: <>My description text</>,
59
- es: <>Mi descripción de texto</>,
60
- }),
61
- },
62
- } satisfies Dictionary;
63
-
64
- export default content;
65
- ```
66
-
67
- ```json
68
- {
69
- "key": "my-component-key",
70
- "content": {
71
- "title": {
72
- "en": "Hello World",
73
- "fr": "Bonjour le monde"
74
- }
75
- }
76
- }
77
- ```
78
-
79
- ```javascript
80
- import { t } from "intlayer";
81
-
82
- export default {
83
- key: "my-component-key",
84
- content: {
85
- title: t({
86
- en: "Hello World",
87
- fr: "Bonjour le monde",
88
- }),
89
- },
90
- };
91
- ```
92
-
93
- - [Content Declaration Documentation](https://intlayer.org/doc/concept/content.md)
94
- - [Content File Format](https://intlayer.org/doc/concept/content/file.md)
95
-
96
24
  3. **Consume Content**: Use the provided hooks and functions to access your content.
97
25
  - [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)
98
26
  - [React Intlayer Exports](https://intlayer.org/doc/packages/react-intlayer/exports.md)
@@ -105,3 +33,10 @@ To use Intlayer effectively:
105
33
  4. **CLI Commands**:
106
34
  Useful commands for managing your content:
107
35
  - `npx intlayer build`: Build the dictionaries from your content declarations.
36
+
37
+ ## References
38
+
39
+ - [Get Started](https://intlayer.org/doc/get-started.md)
40
+ - [How Intlayer Works](https://intlayer.org/doc/concept/how-works-intlayer.md)
41
+ - [Why Intlayer](https://intlayer.org/doc/why.md)
42
+ - [Per-locale File](https://intlayer.org/doc/concept/per-locale-file.md)