@intlayer/docs 9.1.3 → 9.3.0

package/docs/en-GB/dictionary/nesting.md

@@ -33,199 +33,88 @@ In Intlayer, nesting is achieved through the `nest` function, which allows you t
 
 To set up nesting in your Intlayer project, you first define the base content that you wish to reuse. Then, in a separate content module, you use the `nest` function to import that content.
 
-## How Nesting Works
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use nested content in a React component, leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use nested content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
+### Base Dictionary
 
-  </Tab>
-  <Tab label="Vue" value="vue">
+Below is an example of a base dictionary to nest in another dictionary:
 
-To use nested content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
 
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { fullNestedContent, partialNestedContent } = useIntlayer(
-  "key_of_my_second_dictionary"
-);
-</script>
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
 
-<template>
-  <div>
-    <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>
-    <p>Partial Nested Value: {{ partialNestedContent }}</p>
-  </div>
-</template>
+export default firstDictionary;
 ```
 
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("key_of_my_second_dictionary");
-</script>
-
-<div>
-  <p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p>
-  <p>Partial Nested Value: {$content.partialNestedContent}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
 ```
 
-  </Tab>
-  <Tab label="Solid" value="solid">
+### Referencing with Nest
 
-To use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+Now, create another content module that uses the `nest` function to reference the above content. You can reference the entire content or a specific nested value:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { nest, type Dictionary } from "intlayer";
 
-const NestComponent: Component = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    // References the entire dictionary:
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    // References a specific nested value:
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+} satisfies Dictionary;
 
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
+export default myNestingContent;
 ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use nested content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-nest",
-  template: `
-    <div>
-      <p>
-        Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}
-      </p>
-      <p>Partial Nested Value: {{ content().partialNestedContent }}</p>
-    </div>
-  `,
-})
-export class NestComponent {
-  content = useIntlayer("key_of_my_second_dictionary");
-  JSON = JSON;
+```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_second_dictionary",
+  "content": {
+    "fullNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary"
+      }
+    },
+    "partialNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary",
+        "path": "subContent.contentNumber"
+      }
+    }
+  }
 }
 ```
 
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+As second parameter, you can specify a path to a nested value within that content. When no path is provided, the entire content of the referenced dictionary is returned.
 
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("key_of_my_second_dictionary").onChange(
-  (newContent) => {
-    document.getElementById("nested")!.textContent =
-      newContent.partialNestedContent;
-  }
-);
-
-// Initial render
-document.getElementById("nested")!.textContent = content.partialNestedContent;
-```
-
-  </Tab>
-</Tabs>
 ## Setting Up Nesting
 
 <Tabs group="framework">
@@ -420,36 +309,6 @@ document.getElementById("nested")!.textContent = content.partialNestedContent;
   </Tab>
 </Tabs>
 
-## Using Nesting with React Intlayer
-
-To use nested content in a React component, leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>
-        Full Nested Content: {JSON.stringify(fullNestedContent)}
-        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
-      </p>
-      <p>
-        Partial Nested Value: {partialNestedContent}
-        {/* Output: 0 */}
-      </p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources: