@localess/react 3.0.1-dev.20260405094412 → 3.0.1-dev.20260408170501

package/dist/index.d.mts

@@ -1,7 +1,14 @@
+import { ContentData, Links, References, LocalessClientOptions, ContentFetchParams, Content, ContentLink, ContentRichText, LocalessClient, ContentAsset } from '@localess/client';
+export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, References, Translations, isBrowser, isIframe, isServer, localessEditable, localessEditableField } from '@localess/client';
 import * as React from 'react';
 import React__default from 'react';
-import { LocalessClientOptions, Links, ContentLink, ContentData, References, ContentRichText, LocalessClient, ContentAsset } from '@localess/client';
-export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, References, Translations, isBrowser, isIframe, isServer, localessEditable, localessEditableField } from '@localess/client';
+
+type LocalessComponentProps<T extends ContentData = ContentData> = {
+    data: T;
+    links?: Links;
+    references?: References;
+};
+declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
 
 type LocalessOptions = LocalessClientOptions & {
     /**
@@ -18,14 +25,10 @@ type LocalessOptions = LocalessClientOptions & {
     enableSync?: boolean;
 };
 
-declare function findLink(links: Links | undefined, link: ContentLink): string;
+type UseLocalessOptions = ContentFetchParams & {};
+declare const useLocaless: <T extends ContentData = ContentData>(slug: string | string[], options?: UseLocalessOptions) => Content<T> | undefined;
 
-type LocalessComponentProps<T extends ContentData = ContentData> = {
-    data: T;
-    links?: Links;
-    references?: References;
-};
-declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
+declare function findLink(links: Links | undefined, link: ContentLink): string;
 
 /**
  * Render Localess Rich Text content to React elements
@@ -88,4 +91,4 @@ declare function isSyncEnabled(): boolean;
  */
 declare function resolveAsset(asset: ContentAsset): string;
 
-export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent };
+export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };

package/dist/index.d.ts

@@ -1,7 +1,14 @@
+import { ContentData, Links, References, LocalessClientOptions, ContentFetchParams, Content, ContentLink, ContentRichText, LocalessClient, ContentAsset } from '@localess/client';
+export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, References, Translations, isBrowser, isIframe, isServer, localessEditable, localessEditableField } from '@localess/client';
 import * as React from 'react';
 import React__default from 'react';
-import { LocalessClientOptions, Links, ContentLink, ContentData, References, ContentRichText, LocalessClient, ContentAsset } from '@localess/client';
-export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, References, Translations, isBrowser, isIframe, isServer, localessEditable, localessEditableField } from '@localess/client';
+
+type LocalessComponentProps<T extends ContentData = ContentData> = {
+    data: T;
+    links?: Links;
+    references?: References;
+};
+declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
 
 type LocalessOptions = LocalessClientOptions & {
     /**
@@ -18,14 +25,10 @@ type LocalessOptions = LocalessClientOptions & {
     enableSync?: boolean;
 };
 
-declare function findLink(links: Links | undefined, link: ContentLink): string;
+type UseLocalessOptions = ContentFetchParams & {};
+declare const useLocaless: <T extends ContentData = ContentData>(slug: string | string[], options?: UseLocalessOptions) => Content<T> | undefined;
 
-type LocalessComponentProps<T extends ContentData = ContentData> = {
-    data: T;
-    links?: Links;
-    references?: References;
-};
-declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
+declare function findLink(links: Links | undefined, link: ContentLink): string;
 
 /**
  * Render Localess Rich Text content to React elements
@@ -88,4 +91,4 @@ declare function isSyncEnabled(): boolean;
  */
 declare function resolveAsset(asset: ContentAsset): string;
 
-export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent };
+export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };

package/dist/index.js

@@ -25,54 +25,89 @@ __export(index_exports, {
   getComponent: () => getComponent,
   getFallbackComponent: () => getFallbackComponent,
   getLocalessClient: () => getLocalessClient,
-  isBrowser: () => import_client3.isBrowser,
-  isIframe: () => import_client3.isIframe,
-  isServer: () => import_client3.isServer,
+  isBrowser: () => import_client4.isBrowser,
+  isIframe: () => import_client4.isIframe,
+  isServer: () => import_client4.isServer,
   isSyncEnabled: () => isSyncEnabled,
-  localessEditable: () => import_client3.localessEditable,
-  localessEditableField: () => import_client3.localessEditableField,
+  localessEditable: () => import_client4.localessEditable,
+  localessEditableField: () => import_client4.localessEditableField,
   localessInit: () => localessInit,
   registerComponent: () => registerComponent,
   renderRichTextToReact: () => renderRichTextToReact,
   resolveAsset: () => resolveAsset,
   setComponents: () => setComponents,
   setFallbackComponent: () => setFallbackComponent,
-  unregisterComponent: () => unregisterComponent
+  unregisterComponent: () => unregisterComponent,
+  useLocaless: () => useLocaless
 });
 module.exports = __toCommonJS(index_exports);
+var import_client4 = require("@localess/client");
+
+// src/components/localess-component.tsx
+var import_react = require("react");
 var import_client2 = require("@localess/client");
 
 // src/console.ts
 var FONT_BOLD = "font-weight: bold";
 var FONT_NORMAL = "font-weight: normal";
 
-// src/index.ts
-var import_client3 = require("@localess/client");
-
-// src/utils/link.util.ts
-function findLink(links, link) {
-  switch (link.type) {
-    case "content": {
-      if (links) {
-        const path = links[link.uri];
-        if (path) {
-          return "/" + path.fullSlug;
-        } else {
-          return "/not-found";
-        }
-      }
-      return "/not-found";
-    }
-    case "url":
-      return link.uri;
-    default:
-      return "no-type";
+// src/state.ts
+var import_client = require("@localess/client");
+var _client = void 0;
+var _components = {};
+var _fallbackComponent = void 0;
+var _enableSync = false;
+var _assetPathPrefix = "";
+function localessInit(options) {
+  console.log("localessInit", options);
+  const { components, fallbackComponent, enableSync, ...restOptions } = options;
+  _client = (0, import_client.localessClient)(restOptions);
+  _assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
+  _components = components || {};
+  _fallbackComponent = fallbackComponent;
+  if (enableSync) {
+    _enableSync = true;
+    (0, import_client.loadLocalessSync)(restOptions.origin);
+  }
+  return _client;
+}
+function getLocalessClient() {
+  if (!_client) {
+    console.error("[Localess] No client found. Please check if the Localess is initialized.");
+    throw new Error("[Localess] No client found.");
   }
+  return _client;
+}
+function registerComponent(key, component) {
+  _components[key] = component;
+}
+function unregisterComponent(key) {
+  delete _components[key];
+}
+function setComponents(components) {
+  _components = components;
+}
+function getComponent(key) {
+  if (Object.hasOwn(_components, key)) {
+    return _components[key];
+  }
+  console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
+  return void 0;
+}
+function setFallbackComponent(fallbackComponent) {
+  _fallbackComponent = fallbackComponent;
+}
+function getFallbackComponent() {
+  return _fallbackComponent;
+}
+function isSyncEnabled() {
+  return _enableSync;
+}
+function resolveAsset(asset) {
+  return `${_assetPathPrefix}${asset.uri}`;
 }
 
-// src/localess-componenet.tsx
-var import_react = require("react");
-var import_client = require("@localess/client");
+// src/components/localess-component.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var LocalessComponent = (0, import_react.forwardRef)(({ data, links, references, ...restProps }, ref) => {
   if (!data) {
@@ -85,7 +120,7 @@ var LocalessComponent = (0, import_react.forwardRef)(({ data, links, references,
   }
   const Comp = getComponent(data._schema);
   if (Comp) {
-    const attr = isSyncEnabled() ? (0, import_client.localessEditable)(data) : {};
+    const attr = isSyncEnabled() ? (0, import_client2.localessEditable)(data) : {};
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ref, data, links, references, ...attr, ...restProps });
   }
   const FallbackComponent = getFallbackComponent();
@@ -102,8 +137,58 @@ var LocalessComponent = (0, import_react.forwardRef)(({ data, links, references,
   ] });
 });
 
+// src/hooks/use-localess.ts
+var import_react2 = require("react");
+var import_client3 = require("@localess/client");
+var useLocaless = (slug, options = {}) => {
+  const [document, setDocument] = (0, import_react2.useState)();
+  const client = getLocalessClient();
+  let normalizedSlug;
+  if (Array.isArray(slug)) {
+    normalizedSlug = slug.join("/");
+  } else {
+    normalizedSlug = slug;
+  }
+  (0, import_react2.useEffect)(() => {
+    async function loadDocument() {
+      const document2 = await client.getContentBySlug(normalizedSlug, options);
+      setDocument(document2);
+      if (isSyncEnabled() && (0, import_client3.isBrowser)()) {
+        window.localess?.on(["input", "change"], (event) => {
+          if (event.type === "change" || event.type === "input") {
+            setDocument({ ...document2, data: event.data });
+          }
+        });
+      }
+    }
+    loadDocument();
+  }, [slug, options, client]);
+  return document;
+};
+
+// src/utils/link.util.ts
+function findLink(links, link) {
+  switch (link.type) {
+    case "content": {
+      if (links) {
+        const path = links[link.uri];
+        if (path) {
+          return "/" + path.fullSlug;
+        } else {
+          return "/not-found";
+        }
+      }
+      return "/not-found";
+    }
+    case "url":
+      return link.uri;
+    default:
+      return "no-type";
+  }
+}
+
 // src/richtext.ts
-var import_react2 = require("@tiptap/static-renderer/pm/react");
+var import_react3 = require("@tiptap/static-renderer/pm/react");
 var import_extension_document = require("@tiptap/extension-document");
 var import_extension_text = require("@tiptap/extension-text");
 var import_extension_paragraph = require("@tiptap/extension-paragraph");
@@ -120,7 +205,7 @@ var import_extension_code = require("@tiptap/extension-code");
 var import_extension_code_block_lowlight = require("@tiptap/extension-code-block-lowlight");
 var import_extension_link = require("@tiptap/extension-link");
 function renderRichTextToReact(content) {
-  return (0, import_react2.renderToReactElement)({
+  return (0, import_react3.renderToReactElement)({
     content,
     extensions: [
       import_extension_document.Document,
@@ -143,61 +228,6 @@ function renderRichTextToReact(content) {
     ]
   });
 }
-
-// src/index.ts
-var _client = void 0;
-var _components = {};
-var _fallbackComponent = void 0;
-var _enableSync = false;
-var _assetPathPrefix = "";
-function localessInit(options) {
-  console.log("localessInit", options);
-  const { components, fallbackComponent, enableSync, ...restOptions } = options;
-  _client = (0, import_client2.localessClient)(restOptions);
-  _assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
-  _components = components || {};
-  _fallbackComponent = fallbackComponent;
-  if (enableSync) {
-    _enableSync = true;
-    (0, import_client2.loadLocalessSync)(restOptions.origin);
-  }
-  return _client;
-}
-function getLocalessClient() {
-  if (!_client) {
-    console.error("[Localess] No client found. Please check if the Localess is initialized.");
-    throw new Error("[Localess] No client found.");
-  }
-  return _client;
-}
-function registerComponent(key, component) {
-  _components[key] = component;
-}
-function unregisterComponent(key) {
-  delete _components[key];
-}
-function setComponents(components) {
-  _components = components;
-}
-function getComponent(key) {
-  if (Object.hasOwn(_components, key)) {
-    return _components[key];
-  }
-  console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
-  return void 0;
-}
-function setFallbackComponent(fallbackComponent) {
-  _fallbackComponent = fallbackComponent;
-}
-function getFallbackComponent() {
-  return _fallbackComponent;
-}
-function isSyncEnabled() {
-  return _enableSync;
-}
-function resolveAsset(asset) {
-  return `${_assetPathPrefix}${asset.uri}`;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LocalessComponent,
@@ -217,5 +247,6 @@ function resolveAsset(asset) {
   resolveAsset,
   setComponents,
   setFallbackComponent,
-  unregisterComponent
+  unregisterComponent,
+  useLocaless
 });

package/dist/index.mjs

@@ -1,37 +1,71 @@
 // src/index.ts
-import { loadLocalessSync, localessClient } from "@localess/client";
+import { localessEditable as localessEditable2, localessEditableField, isBrowser as isBrowser2, isServer, isIframe } from "@localess/client";
+
+// src/components/localess-component.tsx
+import { forwardRef } from "react";
+import { localessEditable } from "@localess/client";
 
 // src/console.ts
 var FONT_BOLD = "font-weight: bold";
 var FONT_NORMAL = "font-weight: normal";
 
-// src/index.ts
-import { localessEditable as localessEditable2, localessEditableField, isBrowser, isServer, isIframe } from "@localess/client";
-
-// src/utils/link.util.ts
-function findLink(links, link) {
-  switch (link.type) {
-    case "content": {
-      if (links) {
-        const path = links[link.uri];
-        if (path) {
-          return "/" + path.fullSlug;
-        } else {
-          return "/not-found";
-        }
-      }
-      return "/not-found";
-    }
-    case "url":
-      return link.uri;
-    default:
-      return "no-type";
+// src/state.ts
+import { loadLocalessSync, localessClient } from "@localess/client";
+var _client = void 0;
+var _components = {};
+var _fallbackComponent = void 0;
+var _enableSync = false;
+var _assetPathPrefix = "";
+function localessInit(options) {
+  console.log("localessInit", options);
+  const { components, fallbackComponent, enableSync, ...restOptions } = options;
+  _client = localessClient(restOptions);
+  _assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
+  _components = components || {};
+  _fallbackComponent = fallbackComponent;
+  if (enableSync) {
+    _enableSync = true;
+    loadLocalessSync(restOptions.origin);
   }
+  return _client;
+}
+function getLocalessClient() {
+  if (!_client) {
+    console.error("[Localess] No client found. Please check if the Localess is initialized.");
+    throw new Error("[Localess] No client found.");
+  }
+  return _client;
+}
+function registerComponent(key, component) {
+  _components[key] = component;
+}
+function unregisterComponent(key) {
+  delete _components[key];
+}
+function setComponents(components) {
+  _components = components;
+}
+function getComponent(key) {
+  if (Object.hasOwn(_components, key)) {
+    return _components[key];
+  }
+  console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
+  return void 0;
+}
+function setFallbackComponent(fallbackComponent) {
+  _fallbackComponent = fallbackComponent;
+}
+function getFallbackComponent() {
+  return _fallbackComponent;
+}
+function isSyncEnabled() {
+  return _enableSync;
+}
+function resolveAsset(asset) {
+  return `${_assetPathPrefix}${asset.uri}`;
 }
 
-// src/localess-componenet.tsx
-import { forwardRef } from "react";
-import { localessEditable } from "@localess/client";
+// src/components/localess-component.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var LocalessComponent = forwardRef(({ data, links, references, ...restProps }, ref) => {
   if (!data) {
@@ -61,6 +95,56 @@ var LocalessComponent = forwardRef(({ data, links, references, ...restProps }, r
   ] });
 });
 
+// src/hooks/use-localess.ts
+import { useEffect, useState } from "react";
+import { isBrowser } from "@localess/client";
+var useLocaless = (slug, options = {}) => {
+  const [document, setDocument] = useState();
+  const client = getLocalessClient();
+  let normalizedSlug;
+  if (Array.isArray(slug)) {
+    normalizedSlug = slug.join("/");
+  } else {
+    normalizedSlug = slug;
+  }
+  useEffect(() => {
+    async function loadDocument() {
+      const document2 = await client.getContentBySlug(normalizedSlug, options);
+      setDocument(document2);
+      if (isSyncEnabled() && isBrowser()) {
+        window.localess?.on(["input", "change"], (event) => {
+          if (event.type === "change" || event.type === "input") {
+            setDocument({ ...document2, data: event.data });
+          }
+        });
+      }
+    }
+    loadDocument();
+  }, [slug, options, client]);
+  return document;
+};
+
+// src/utils/link.util.ts
+function findLink(links, link) {
+  switch (link.type) {
+    case "content": {
+      if (links) {
+        const path = links[link.uri];
+        if (path) {
+          return "/" + path.fullSlug;
+        } else {
+          return "/not-found";
+        }
+      }
+      return "/not-found";
+    }
+    case "url":
+      return link.uri;
+    default:
+      return "no-type";
+  }
+}
+
 // src/richtext.ts
 import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
 import { Document } from "@tiptap/extension-document";
@@ -102,68 +186,13 @@ function renderRichTextToReact(content) {
     ]
   });
 }
-
-// src/index.ts
-var _client = void 0;
-var _components = {};
-var _fallbackComponent = void 0;
-var _enableSync = false;
-var _assetPathPrefix = "";
-function localessInit(options) {
-  console.log("localessInit", options);
-  const { components, fallbackComponent, enableSync, ...restOptions } = options;
-  _client = localessClient(restOptions);
-  _assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
-  _components = components || {};
-  _fallbackComponent = fallbackComponent;
-  if (enableSync) {
-    _enableSync = true;
-    loadLocalessSync(restOptions.origin);
-  }
-  return _client;
-}
-function getLocalessClient() {
-  if (!_client) {
-    console.error("[Localess] No client found. Please check if the Localess is initialized.");
-    throw new Error("[Localess] No client found.");
-  }
-  return _client;
-}
-function registerComponent(key, component) {
-  _components[key] = component;
-}
-function unregisterComponent(key) {
-  delete _components[key];
-}
-function setComponents(components) {
-  _components = components;
-}
-function getComponent(key) {
-  if (Object.hasOwn(_components, key)) {
-    return _components[key];
-  }
-  console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
-  return void 0;
-}
-function setFallbackComponent(fallbackComponent) {
-  _fallbackComponent = fallbackComponent;
-}
-function getFallbackComponent() {
-  return _fallbackComponent;
-}
-function isSyncEnabled() {
-  return _enableSync;
-}
-function resolveAsset(asset) {
-  return `${_assetPathPrefix}${asset.uri}`;
-}
 export {
   LocalessComponent,
   findLink,
   getComponent,
   getFallbackComponent,
   getLocalessClient,
-  isBrowser,
+  isBrowser2 as isBrowser,
   isIframe,
   isServer,
   isSyncEnabled,
@@ -175,5 +204,6 @@ export {
   resolveAsset,
   setComponents,
   setFallbackComponent,
-  unregisterComponent
+  unregisterComponent,
+  useLocaless
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "3.0.1-dev.20260405094412",
+  "version": "3.0.1-dev.20260408170501",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",
@@ -46,7 +46,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@localess/client": "3.0.1-dev.20260405094412",
+    "@localess/client": "3.0.1-dev.20260408170501",
     "@tiptap/static-renderer": "^3.20.1",
     "@tiptap/html": "^3.20.1",
     "@tiptap/extension-bold": "^3.20.1",