@localess/react 3.0.1-dev.20260411012947 → 3.0.1-dev.20260412201733
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.
- package/dist/console.d.ts +2 -0
- package/dist/console.js +1 -0
- package/dist/console.mjs +4 -0
- package/dist/core/components/index.d.ts +8 -0
- package/dist/{localess-component-DikkO35Z.d.ts → core/components/localess-component.d.ts} +3 -7
- package/dist/core/components/localess-component.js +1 -0
- package/dist/core/components/localess-component.mjs +39 -0
- package/dist/{rsc.d.ts → core/components/localess-document.d.ts} +3 -11
- package/dist/core/components/localess-document.js +1 -0
- package/dist/core/components/localess-document.mjs +26 -0
- package/dist/core/hooks/index.d.ts +9 -0
- package/dist/core/hooks/use-localess.d.ts +45 -0
- package/dist/core/hooks/use-localess.js +1 -0
- package/dist/core/hooks/use-localess.mjs +25 -0
- package/dist/core/models/client.d.ts +43 -0
- package/dist/core/models/content.d.ts +1 -0
- package/dist/core/models/index.d.ts +33 -0
- package/dist/core/models/sync.d.ts +1 -0
- package/dist/core/models/translation.d.ts +1 -0
- package/dist/core/richtext.d.ts +26 -0
- package/dist/core/richtext.js +1 -0
- package/dist/core/richtext.mjs +48 -0
- package/dist/core/state.d.ts +127 -0
- package/dist/core/state.js +1 -0
- package/dist/core/state.mjs +43 -0
- package/dist/core/utils/index.d.ts +19 -0
- package/dist/core/utils/index.mjs +3 -0
- package/dist/core/utils/link.util.d.ts +24 -0
- package/dist/core/utils/link.util.js +1 -0
- package/dist/core/utils/link.util.mjs +15 -0
- package/dist/index.d.ts +19 -97
- package/dist/index.js +1 -284
- package/dist/index.mjs +8 -100
- package/dist/rsc/index.d.ts +30 -0
- package/dist/rsc/index.js +1 -0
- package/dist/rsc/index.mjs +9 -0
- package/dist/{rsc.d.mts → rsc/localess-document.d.ts} +3 -11
- package/dist/rsc/localess-document.js +1 -0
- package/dist/rsc/localess-document.mjs +23 -0
- package/dist/rsc/localess-sync.d.ts +7 -0
- package/dist/rsc/localess-sync.js +1 -0
- package/dist/rsc/localess-sync.mjs +12 -0
- package/dist/ssr/index.d.ts +33 -0
- package/dist/ssr/index.js +1 -0
- package/dist/ssr/index.mjs +7 -0
- package/dist/ssr/localess-component.d.ts +48 -0
- package/dist/ssr/localess-component.js +1 -0
- package/dist/ssr/localess-component.mjs +37 -0
- package/dist/ssr/localess-document.d.ts +42 -0
- package/dist/ssr/localess-document.js +1 -0
- package/dist/ssr/localess-document.mjs +17 -0
- package/package.json +32 -24
- package/dist/chunk-DD2NUMQJ.mjs +0 -56
- package/dist/chunk-ETSLIILF.mjs +0 -149
- package/dist/chunk-UW7OWE53.mjs +0 -45
- package/dist/index.d.mts +0 -104
- package/dist/localess-component-DikkO35Z.d.mts +0 -58
- package/dist/richtext-D6tBmv-7.d.mts +0 -218
- package/dist/richtext-D6tBmv-7.d.ts +0 -218
- package/dist/rsc.js +0 -280
- package/dist/rsc.mjs +0 -62
- package/dist/ssr.d.mts +0 -96
- package/dist/ssr.d.ts +0 -96
- package/dist/ssr.js +0 -223
- package/dist/ssr.mjs +0 -38
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/core/utils/link.util.ts
|
|
2
|
+
function e(e, t) {
|
|
3
|
+
switch (t.type) {
|
|
4
|
+
case "content":
|
|
5
|
+
if (e) {
|
|
6
|
+
let n = e[t.uri];
|
|
7
|
+
return n ? "/" + n.fullSlug : "/not-found";
|
|
8
|
+
}
|
|
9
|
+
return "/not-found";
|
|
10
|
+
case "url": return t.uri;
|
|
11
|
+
default: return "no-type";
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
export { e as findLink };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,104 +1,26 @@
|
|
|
1
|
-
export { L as LocalessOptions, f as findLink, g as getComponent, a as getFallbackComponent, b as getLocalessClient, i as isSyncEnabled, l as localessInit, r as registerComponent, c as renderRichTextToReact, d as resolveAsset, s as setComponents, e as setFallbackComponent, u as unregisterComponent } from './richtext-D6tBmv-7.js';
|
|
2
|
-
export { L as LocalessComponent, a as LocalessComponentProps } from './localess-component-DikkO35Z.js';
|
|
3
|
-
import * as react from 'react';
|
|
4
|
-
import { ContentData, Content, ContentFetchParams } from '@localess/client';
|
|
5
|
-
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';
|
|
6
|
-
|
|
7
1
|
/**
|
|
8
|
-
*
|
|
2
|
+
* @localess/react
|
|
9
3
|
*
|
|
10
|
-
*
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* The full content response object as returned by `getContentBySlug` or `getContentById`.
|
|
15
|
-
* Must contain a `data` field with a valid `_schema` key.
|
|
16
|
-
*/
|
|
17
|
-
document: Content<T>;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Client Component that renders content and automatically subscribes to Visual Editor sync events.
|
|
21
|
-
*
|
|
22
|
-
* Wraps {@link LocalessComponent} with local state so that live `input` and `change` events
|
|
23
|
-
* from the Localess Visual Editor update the rendered content without a full page reload.
|
|
24
|
-
*
|
|
25
|
-
* **Recommended pattern for Next.js App Router:** fetch data in a Server Component and pass it
|
|
26
|
-
* as props. The page renders immediately with server data; once the client hydrates, live editing
|
|
27
|
-
* activates on top — no loading state needed.
|
|
28
|
-
*
|
|
29
|
-
* Sync only activates when `enableSync: true` was passed to `localessInit` **and** the page
|
|
30
|
-
* is running inside the Visual Editor iframe (`isIframe()` is true).
|
|
31
|
-
*
|
|
32
|
-
* **Requires `'use client'`** — must be used inside a Client Component boundary in Next.js
|
|
33
|
-
* App Router. Available from `@localess/react` (SPA) and `@localess/react/rsc` (RSC).
|
|
34
|
-
* Not available from `@localess/react/ssr`.
|
|
4
|
+
* Default export — Single Page Applications (SPA) and fully client-rendered React apps.
|
|
5
|
+
* Includes the complete API: initialization, component registry, components, hooks,
|
|
6
|
+
* Visual Editor live editing helpers, rich text rendering, and all TypeScript types.
|
|
35
7
|
*
|
|
36
|
-
*
|
|
8
|
+
* Use this export when:
|
|
9
|
+
* - Building a Single Page Application (SPA) or client-rendered React app
|
|
10
|
+
* - All code runs in the browser (no server components)
|
|
11
|
+
* - You need live Visual Editor editing in browser-based applications
|
|
37
12
|
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* // app/[locale]/page.tsx (Server Component)
|
|
41
|
-
* import { getLocalessClient } from '@localess/react/rsc';
|
|
42
|
-
* import PageClient from './page-client';
|
|
43
|
-
*
|
|
44
|
-
* export default async function Page({ params }) {
|
|
45
|
-
* const content = await getLocalessClient().getContentBySlug('home', { locale: params.locale });
|
|
46
|
-
* return <PageClient data={content.data} links={content.links} references={content.references} />;
|
|
47
|
-
* }
|
|
48
|
-
*
|
|
49
|
-
* // app/[locale]/page-client.tsx (Client Component)
|
|
50
|
-
* 'use client';
|
|
51
|
-
* import { LocalessDocument } from '@localess/react/rsc';
|
|
52
|
-
*
|
|
53
|
-
* export default function PageClient({ data, links, references }) {
|
|
54
|
-
* return <LocalessDocument data={data} links={links} references={references} />;
|
|
55
|
-
* }
|
|
56
|
-
* ```
|
|
57
|
-
*/
|
|
58
|
-
declare const LocalessDocument: react.ForwardRefExoticComponent<LocalessDocumentProps<ContentData> & react.RefAttributes<HTMLElement>>;
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Options for {@link useLocaless}.
|
|
62
|
-
* Extends {@link ContentFetchParams} with any future hook-specific settings.
|
|
63
|
-
*/
|
|
64
|
-
type UseLocalessOptions = ContentFetchParams & {};
|
|
65
|
-
/**
|
|
66
|
-
* React hook for fetching Localess content by slug inside a Client Component.
|
|
67
|
-
*
|
|
68
|
-
* Fetches content on mount using `getLocalessClient().getContentBySlug`, stores it in local state,
|
|
69
|
-
* and — when `enableSync` is active and the page is running inside the Visual Editor iframe —
|
|
70
|
-
* automatically subscribes to `input` and `change` events so content updates live without a reload.
|
|
71
|
-
*
|
|
72
|
-
* **Requires `'use client'`** — must be called inside a Client Component.
|
|
73
|
-
*
|
|
74
|
-
* **Recommended pattern:** fetch data server-side and pass it as `initialContent`, then use the
|
|
75
|
-
* hook result with `?? initialContent` to avoid a loading flash:
|
|
76
|
-
* ```tsx
|
|
77
|
-
* const content = useLocaless('home', { locale }) ?? initialContent;
|
|
78
|
-
* ```
|
|
79
|
-
*
|
|
80
|
-
* @template T - The content data shape. Defaults to {@link ContentData}.
|
|
81
|
-
*
|
|
82
|
-
* @param slug - Content slug string, or an array of path segments that will be joined with `/`.
|
|
83
|
-
* @param options - Optional fetch parameters (locale, version, resolveReference, resolveLink).
|
|
84
|
-
* @returns The fetched {@link Content}<T> object, or `undefined` while the initial fetch is in flight.
|
|
85
|
-
*
|
|
86
|
-
* @example Basic usage
|
|
87
|
-
* ```tsx
|
|
88
|
-
* 'use client';
|
|
89
|
-
* import { useLocaless } from '@localess/react/rsc';
|
|
90
|
-
*
|
|
91
|
-
* export function PageClient({ initialContent, locale }) {
|
|
92
|
-
* const content = useLocaless('home', { locale }) ?? initialContent;
|
|
93
|
-
* return <LocalessComponent data={content.data} links={content.links} />;
|
|
94
|
-
* }
|
|
95
|
-
* ```
|
|
13
|
+
* For server-rendering without live editing use `@localess/react/ssr`.
|
|
14
|
+
* For React Server Components with live editing use `@localess/react/rsc`.
|
|
96
15
|
*
|
|
97
|
-
* @example
|
|
98
|
-
* ```
|
|
99
|
-
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```ts
|
|
18
|
+
* import { localessInit, LocalessComponent, useLocaless, localessEditable } from '@localess/react';
|
|
100
19
|
* ```
|
|
101
20
|
*/
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
export
|
|
21
|
+
export * from './core/state';
|
|
22
|
+
export * from './core/components';
|
|
23
|
+
export * from './core/hooks';
|
|
24
|
+
export * from './core/utils';
|
|
25
|
+
export * from './core/richtext';
|
|
26
|
+
export type * from './core/models';
|
package/dist/index.js
CHANGED
|
@@ -1,284 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
LocalessComponent: () => LocalessComponent,
|
|
24
|
-
LocalessDocument: () => LocalessDocument,
|
|
25
|
-
findLink: () => findLink,
|
|
26
|
-
getComponent: () => getComponent,
|
|
27
|
-
getFallbackComponent: () => getFallbackComponent,
|
|
28
|
-
getLocalessClient: () => getLocalessClient,
|
|
29
|
-
isBrowser: () => import_client2.isBrowser,
|
|
30
|
-
isIframe: () => import_client2.isIframe,
|
|
31
|
-
isServer: () => import_client2.isServer,
|
|
32
|
-
isSyncEnabled: () => isSyncEnabled,
|
|
33
|
-
localessEditable: () => import_client2.localessEditable,
|
|
34
|
-
localessEditableField: () => import_client2.localessEditableField,
|
|
35
|
-
localessInit: () => localessInit,
|
|
36
|
-
registerComponent: () => registerComponent,
|
|
37
|
-
renderRichTextToReact: () => renderRichTextToReact,
|
|
38
|
-
resolveAsset: () => resolveAsset,
|
|
39
|
-
setComponents: () => setComponents,
|
|
40
|
-
setFallbackComponent: () => setFallbackComponent,
|
|
41
|
-
unregisterComponent: () => unregisterComponent,
|
|
42
|
-
useLocaless: () => useLocaless
|
|
43
|
-
});
|
|
44
|
-
module.exports = __toCommonJS(src_exports);
|
|
45
|
-
|
|
46
|
-
// src/core/state.ts
|
|
47
|
-
var import_client = require("@localess/client");
|
|
48
|
-
|
|
49
|
-
// src/console.ts
|
|
50
|
-
var FONT_BOLD = "font-weight: bold";
|
|
51
|
-
var FONT_NORMAL = "font-weight: normal";
|
|
52
|
-
|
|
53
|
-
// src/core/state.ts
|
|
54
|
-
var _client = void 0;
|
|
55
|
-
var _components = {};
|
|
56
|
-
var _fallbackComponent = void 0;
|
|
57
|
-
var _enableSync = false;
|
|
58
|
-
var _assetPathPrefix = "";
|
|
59
|
-
function localessInit(options) {
|
|
60
|
-
console.log("localessInit", options);
|
|
61
|
-
const { components, fallbackComponent, enableSync, ...restOptions } = options;
|
|
62
|
-
_client = (0, import_client.localessClient)(restOptions);
|
|
63
|
-
_assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
|
|
64
|
-
_components = components || {};
|
|
65
|
-
_fallbackComponent = fallbackComponent;
|
|
66
|
-
if (enableSync) {
|
|
67
|
-
_enableSync = true;
|
|
68
|
-
(0, import_client.loadLocalessSync)(restOptions.origin);
|
|
69
|
-
}
|
|
70
|
-
return _client;
|
|
71
|
-
}
|
|
72
|
-
function getLocalessClient() {
|
|
73
|
-
if (!_client) {
|
|
74
|
-
console.error("[Localess] No client found. Please check if the Localess is initialized.");
|
|
75
|
-
throw new Error("[Localess] No client found.");
|
|
76
|
-
}
|
|
77
|
-
return _client;
|
|
78
|
-
}
|
|
79
|
-
function registerComponent(key, component) {
|
|
80
|
-
_components[key] = component;
|
|
81
|
-
}
|
|
82
|
-
function unregisterComponent(key) {
|
|
83
|
-
delete _components[key];
|
|
84
|
-
}
|
|
85
|
-
function setComponents(components) {
|
|
86
|
-
_components = components;
|
|
87
|
-
}
|
|
88
|
-
function getComponent(key) {
|
|
89
|
-
if (Object.hasOwn(_components, key)) {
|
|
90
|
-
return _components[key];
|
|
91
|
-
}
|
|
92
|
-
console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
|
|
93
|
-
return void 0;
|
|
94
|
-
}
|
|
95
|
-
function setFallbackComponent(fallbackComponent) {
|
|
96
|
-
_fallbackComponent = fallbackComponent;
|
|
97
|
-
}
|
|
98
|
-
function getFallbackComponent() {
|
|
99
|
-
return _fallbackComponent;
|
|
100
|
-
}
|
|
101
|
-
function isSyncEnabled() {
|
|
102
|
-
return _enableSync;
|
|
103
|
-
}
|
|
104
|
-
function resolveAsset(asset) {
|
|
105
|
-
return `${_assetPathPrefix}${asset.uri}`;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// src/core/components/localess-component.tsx
|
|
109
|
-
var import_react = require("react");
|
|
110
|
-
|
|
111
|
-
// src/core/utils/index.ts
|
|
112
|
-
var import_client2 = require("@localess/client");
|
|
113
|
-
|
|
114
|
-
// src/core/utils/link.util.ts
|
|
115
|
-
function findLink(links, link) {
|
|
116
|
-
switch (link.type) {
|
|
117
|
-
case "content": {
|
|
118
|
-
if (links) {
|
|
119
|
-
const path = links[link.uri];
|
|
120
|
-
if (path) {
|
|
121
|
-
return "/" + path.fullSlug;
|
|
122
|
-
} else {
|
|
123
|
-
return "/not-found";
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
return "/not-found";
|
|
127
|
-
}
|
|
128
|
-
case "url":
|
|
129
|
-
return link.uri;
|
|
130
|
-
default:
|
|
131
|
-
return "no-type";
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// src/core/components/localess-component.tsx
|
|
136
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
137
|
-
var LocalessComponent = (0, import_react.forwardRef)(
|
|
138
|
-
({ data, links, references, ...restProps }, ref) => {
|
|
139
|
-
if (!data) {
|
|
140
|
-
console.error("LocalessComponent property %cdata%c is not provided.", FONT_BOLD, FONT_NORMAL);
|
|
141
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
142
|
-
"LocalessComponent property ",
|
|
143
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "data" }),
|
|
144
|
-
" is not provided."
|
|
145
|
-
] });
|
|
146
|
-
}
|
|
147
|
-
const Comp = getComponent(data._schema);
|
|
148
|
-
if (Comp) {
|
|
149
|
-
const attr = isSyncEnabled() ? (0, import_client2.localessEditable)(data) : {};
|
|
150
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ref, data, links, references, ...attr, ...restProps });
|
|
151
|
-
}
|
|
152
|
-
const FallbackComponent = getFallbackComponent();
|
|
153
|
-
if (FallbackComponent) {
|
|
154
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackComponent, { ref, data, links, references, ...restProps });
|
|
155
|
-
}
|
|
156
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
|
|
157
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "LocalessComponent" }),
|
|
158
|
-
" could not found component with key ",
|
|
159
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: data._schema }),
|
|
160
|
-
". ",
|
|
161
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
|
|
162
|
-
"Please check if your configuration is correct."
|
|
163
|
-
] });
|
|
164
|
-
}
|
|
165
|
-
);
|
|
166
|
-
|
|
167
|
-
// src/core/components/localess-document.tsx
|
|
168
|
-
var import_react2 = require("react");
|
|
169
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
170
|
-
var LocalessDocument = (0, import_react2.forwardRef)(({ document }, ref) => {
|
|
171
|
-
const [contentData, setContentData] = (0, import_react2.useState)(document.data);
|
|
172
|
-
(0, import_react2.useEffect)(() => {
|
|
173
|
-
if (isSyncEnabled() && (0, import_client2.isBrowser)() && (0, import_client2.isIframe)()) {
|
|
174
|
-
window.localess?.on(["input", "change"], (event) => {
|
|
175
|
-
if (event.type === "change" || event.type === "input") {
|
|
176
|
-
setContentData(event.data);
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
}, []);
|
|
181
|
-
if (!contentData) {
|
|
182
|
-
console.error("LocalessDocument property %cdocument.data%c is not provided.", FONT_BOLD, FONT_NORMAL);
|
|
183
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
184
|
-
"LocalessDocument property ",
|
|
185
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: "document.data" }),
|
|
186
|
-
" is not provided."
|
|
187
|
-
] });
|
|
188
|
-
}
|
|
189
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LocalessComponent, { ref, data: contentData, links: document.links, references: document.references });
|
|
190
|
-
});
|
|
191
|
-
|
|
192
|
-
// src/core/hooks/use-localess.ts
|
|
193
|
-
var import_react3 = require("react");
|
|
194
|
-
var import_client3 = require("@localess/client");
|
|
195
|
-
var useLocaless = (slug, options = {}) => {
|
|
196
|
-
const [document, setDocument] = (0, import_react3.useState)();
|
|
197
|
-
const client = getLocalessClient();
|
|
198
|
-
let normalizedSlug;
|
|
199
|
-
if (Array.isArray(slug)) {
|
|
200
|
-
normalizedSlug = slug.join("/");
|
|
201
|
-
} else {
|
|
202
|
-
normalizedSlug = slug;
|
|
203
|
-
}
|
|
204
|
-
(0, import_react3.useEffect)(() => {
|
|
205
|
-
async function loadDocument() {
|
|
206
|
-
const document2 = await client.getContentBySlug(normalizedSlug, options);
|
|
207
|
-
setDocument(document2);
|
|
208
|
-
if (isSyncEnabled() && (0, import_client3.isBrowser)()) {
|
|
209
|
-
window.localess?.on(["input", "change"], (event) => {
|
|
210
|
-
if (event.type === "change" || event.type === "input") {
|
|
211
|
-
setDocument({ ...document2, data: event.data });
|
|
212
|
-
}
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
loadDocument();
|
|
217
|
-
}, [slug, options, client]);
|
|
218
|
-
return document;
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
// src/core/richtext.ts
|
|
222
|
-
var import_react4 = require("@tiptap/static-renderer/pm/react");
|
|
223
|
-
var import_extension_document = require("@tiptap/extension-document");
|
|
224
|
-
var import_extension_text = require("@tiptap/extension-text");
|
|
225
|
-
var import_extension_paragraph = require("@tiptap/extension-paragraph");
|
|
226
|
-
var import_extension_heading = require("@tiptap/extension-heading");
|
|
227
|
-
var import_extension_bold = require("@tiptap/extension-bold");
|
|
228
|
-
var import_extension_italic = require("@tiptap/extension-italic");
|
|
229
|
-
var import_extension_strike = require("@tiptap/extension-strike");
|
|
230
|
-
var import_extension_underline = require("@tiptap/extension-underline");
|
|
231
|
-
var import_extension_history = require("@tiptap/extension-history");
|
|
232
|
-
var import_extension_list_item = require("@tiptap/extension-list-item");
|
|
233
|
-
var import_extension_ordered_list = require("@tiptap/extension-ordered-list");
|
|
234
|
-
var import_extension_bullet_list = require("@tiptap/extension-bullet-list");
|
|
235
|
-
var import_extension_code = require("@tiptap/extension-code");
|
|
236
|
-
var import_extension_code_block_lowlight = require("@tiptap/extension-code-block-lowlight");
|
|
237
|
-
var import_extension_link = require("@tiptap/extension-link");
|
|
238
|
-
function renderRichTextToReact(content) {
|
|
239
|
-
return (0, import_react4.renderToReactElement)({
|
|
240
|
-
content,
|
|
241
|
-
extensions: [
|
|
242
|
-
import_extension_document.Document,
|
|
243
|
-
import_extension_text.Text,
|
|
244
|
-
import_extension_paragraph.Paragraph,
|
|
245
|
-
import_extension_heading.Heading.configure({
|
|
246
|
-
levels: [1, 2, 3, 4, 5, 6]
|
|
247
|
-
}),
|
|
248
|
-
import_extension_bold.Bold,
|
|
249
|
-
import_extension_italic.Italic,
|
|
250
|
-
import_extension_strike.Strike,
|
|
251
|
-
import_extension_underline.Underline,
|
|
252
|
-
import_extension_history.History,
|
|
253
|
-
import_extension_list_item.ListItem,
|
|
254
|
-
import_extension_ordered_list.OrderedList,
|
|
255
|
-
import_extension_bullet_list.BulletList,
|
|
256
|
-
import_extension_code.Code,
|
|
257
|
-
import_extension_code_block_lowlight.CodeBlockLowlight,
|
|
258
|
-
import_extension_link.Link
|
|
259
|
-
]
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
263
|
-
0 && (module.exports = {
|
|
264
|
-
LocalessComponent,
|
|
265
|
-
LocalessDocument,
|
|
266
|
-
findLink,
|
|
267
|
-
getComponent,
|
|
268
|
-
getFallbackComponent,
|
|
269
|
-
getLocalessClient,
|
|
270
|
-
isBrowser,
|
|
271
|
-
isIframe,
|
|
272
|
-
isServer,
|
|
273
|
-
isSyncEnabled,
|
|
274
|
-
localessEditable,
|
|
275
|
-
localessEditableField,
|
|
276
|
-
localessInit,
|
|
277
|
-
registerComponent,
|
|
278
|
-
renderRichTextToReact,
|
|
279
|
-
resolveAsset,
|
|
280
|
-
setComponents,
|
|
281
|
-
setFallbackComponent,
|
|
282
|
-
unregisterComponent,
|
|
283
|
-
useLocaless
|
|
284
|
-
});
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core/state.js`),t=require(`./core/utils/link.util.js`),n=require(`./core/components/localess-component.js`),r=require(`./core/components/localess-document.js`),i=require(`./core/hooks/use-localess.js`),a=require(`./core/richtext.js`);let o=require(`@localess/client`);exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=r.LocalessDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,exports.getOrigin=e.getOrigin,Object.defineProperty(exports,`isBrowser`,{enumerable:!0,get:function(){return o.isBrowser}}),Object.defineProperty(exports,`isIframe`,{enumerable:!0,get:function(){return o.isIframe}}),Object.defineProperty(exports,`isServer`,{enumerable:!0,get:function(){return o.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,`localessEditable`,{enumerable:!0,get:function(){return o.localessEditable}}),Object.defineProperty(exports,`localessEditableField`,{enumerable:!0,get:function(){return o.localessEditableField}}),exports.localessInit=e.localessInit,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=a.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.setComponents=e.setComponents,exports.setFallbackComponent=e.setFallbackComponent,exports.unregisterComponent=e.unregisterComponent,exports.useLocaless=i.useLocaless;
|
package/dist/index.mjs
CHANGED
|
@@ -1,100 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from "./
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
getFallbackComponent,
|
|
10
|
-
getLocalessClient,
|
|
11
|
-
isBrowser,
|
|
12
|
-
isIframe,
|
|
13
|
-
isServer,
|
|
14
|
-
isSyncEnabled,
|
|
15
|
-
localessEditable,
|
|
16
|
-
localessEditableField,
|
|
17
|
-
localessInit,
|
|
18
|
-
registerComponent,
|
|
19
|
-
renderRichTextToReact,
|
|
20
|
-
resolveAsset,
|
|
21
|
-
setComponents,
|
|
22
|
-
setFallbackComponent,
|
|
23
|
-
unregisterComponent
|
|
24
|
-
} from "./chunk-ETSLIILF.mjs";
|
|
25
|
-
|
|
26
|
-
// src/core/components/localess-document.tsx
|
|
27
|
-
import { forwardRef, useEffect, useState } from "react";
|
|
28
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
29
|
-
var LocalessDocument = forwardRef(({ document }, ref) => {
|
|
30
|
-
const [contentData, setContentData] = useState(document.data);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
if (isSyncEnabled() && isBrowser() && isIframe()) {
|
|
33
|
-
window.localess?.on(["input", "change"], (event) => {
|
|
34
|
-
if (event.type === "change" || event.type === "input") {
|
|
35
|
-
setContentData(event.data);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
}, []);
|
|
40
|
-
if (!contentData) {
|
|
41
|
-
console.error("LocalessDocument property %cdocument.data%c is not provided.", FONT_BOLD, FONT_NORMAL);
|
|
42
|
-
return /* @__PURE__ */ jsxs("div", { children: [
|
|
43
|
-
"LocalessDocument property ",
|
|
44
|
-
/* @__PURE__ */ jsx("b", { children: "document.data" }),
|
|
45
|
-
" is not provided."
|
|
46
|
-
] });
|
|
47
|
-
}
|
|
48
|
-
return /* @__PURE__ */ jsx(LocalessComponent, { ref, data: contentData, links: document.links, references: document.references });
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
// src/core/hooks/use-localess.ts
|
|
52
|
-
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
53
|
-
import { isBrowser as isBrowser2 } from "@localess/client";
|
|
54
|
-
var useLocaless = (slug, options = {}) => {
|
|
55
|
-
const [document, setDocument] = useState2();
|
|
56
|
-
const client = getLocalessClient();
|
|
57
|
-
let normalizedSlug;
|
|
58
|
-
if (Array.isArray(slug)) {
|
|
59
|
-
normalizedSlug = slug.join("/");
|
|
60
|
-
} else {
|
|
61
|
-
normalizedSlug = slug;
|
|
62
|
-
}
|
|
63
|
-
useEffect2(() => {
|
|
64
|
-
async function loadDocument() {
|
|
65
|
-
const document2 = await client.getContentBySlug(normalizedSlug, options);
|
|
66
|
-
setDocument(document2);
|
|
67
|
-
if (isSyncEnabled() && isBrowser2()) {
|
|
68
|
-
window.localess?.on(["input", "change"], (event) => {
|
|
69
|
-
if (event.type === "change" || event.type === "input") {
|
|
70
|
-
setDocument({ ...document2, data: event.data });
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
loadDocument();
|
|
76
|
-
}, [slug, options, client]);
|
|
77
|
-
return document;
|
|
78
|
-
};
|
|
79
|
-
export {
|
|
80
|
-
LocalessComponent,
|
|
81
|
-
LocalessDocument,
|
|
82
|
-
findLink,
|
|
83
|
-
getComponent,
|
|
84
|
-
getFallbackComponent,
|
|
85
|
-
getLocalessClient,
|
|
86
|
-
isBrowser,
|
|
87
|
-
isIframe,
|
|
88
|
-
isServer,
|
|
89
|
-
isSyncEnabled,
|
|
90
|
-
localessEditable,
|
|
91
|
-
localessEditableField,
|
|
92
|
-
localessInit,
|
|
93
|
-
registerComponent,
|
|
94
|
-
renderRichTextToReact,
|
|
95
|
-
resolveAsset,
|
|
96
|
-
setComponents,
|
|
97
|
-
setFallbackComponent,
|
|
98
|
-
unregisterComponent,
|
|
99
|
-
useLocaless
|
|
100
|
-
};
|
|
1
|
+
import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, getOrigin as r, isSyncEnabled as i, localessInit as a, registerComponent as o, resolveAsset as s, setComponents as c, setFallbackComponent as l, unregisterComponent as u } from "./core/state.mjs";
|
|
2
|
+
import { findLink as d } from "./core/utils/link.util.mjs";
|
|
3
|
+
import { isBrowser as f, isIframe as p, isServer as m, localessEditable as h, localessEditableField as g } from "./core/utils/index.mjs";
|
|
4
|
+
import { LocalessComponent as _ } from "./core/components/localess-component.mjs";
|
|
5
|
+
import { LocalessDocument as v } from "./core/components/localess-document.mjs";
|
|
6
|
+
import { useLocaless as y } from "./core/hooks/use-localess.mjs";
|
|
7
|
+
import { renderRichTextToReact as b } from "./core/richtext.mjs";
|
|
8
|
+
export { _ as LocalessComponent, v as LocalessDocument, d as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, r as getOrigin, f as isBrowser, p as isIframe, m as isServer, i as isSyncEnabled, h as localessEditable, g as localessEditableField, a as localessInit, o as registerComponent, b as renderRichTextToReact, s as resolveAsset, c as setComponents, l as setFallbackComponent, u as unregisterComponent, y as useLocaless };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @localess/react/rsc
|
|
3
|
+
*
|
|
4
|
+
* React Server Components export — use in Next.js App Router and other RSC-capable frameworks.
|
|
5
|
+
* Extends the SSR export with client-side components and hooks for Visual Editor live editing.
|
|
6
|
+
*
|
|
7
|
+
* Use this export when:
|
|
8
|
+
* - Using Next.js App Router with React Server Components
|
|
9
|
+
* - You need live Visual Editor editing alongside server-rendered components
|
|
10
|
+
* - Building modern React apps with a clear server / client component boundary
|
|
11
|
+
*
|
|
12
|
+
* For the default SPA export use `@localess/react`.
|
|
13
|
+
* For SSR without live editing (static exports) use `@localess/react/ssr`.
|
|
14
|
+
*
|
|
15
|
+
* Typical pattern — import path is the same for both server and client files:
|
|
16
|
+
* @example
|
|
17
|
+
* ```ts
|
|
18
|
+
* // Server Component (Next.js App Router)
|
|
19
|
+
* import { localessInit, getLocalessClient, LocalessServerComponent } from '@localess/react/rsc';
|
|
20
|
+
*
|
|
21
|
+
* // Client Component ('use client')
|
|
22
|
+
* import { LocalessDocument, useLocaless, localessEditable } from '@localess/react/rsc';
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* NOT compatible with Next.js `output: 'export'` — use `@localess/react/ssr` for static exports.
|
|
26
|
+
*/
|
|
27
|
+
export * from '../ssr';
|
|
28
|
+
export * from '../core/components/localess-component';
|
|
29
|
+
export * from './localess-document';
|
|
30
|
+
export { isSyncEnabled } from '../core/state';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../core/state.js`),t=require(`../core/utils/link.util.js`),n=require(`../core/components/localess-component.js`),r=require(`../core/richtext.js`),i=require(`../ssr/localess-component.js`),a=require(`../ssr/localess-document.js`),o=require(`./localess-document.js`);let s=require(`@localess/client`);exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=o.LocalessDocument,exports.LocalessServerComponent=i.LocalessServerComponent,exports.LocalessServerDocument=a.LocalessServerDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,Object.defineProperty(exports,`isBrowser`,{enumerable:!0,get:function(){return s.isBrowser}}),Object.defineProperty(exports,`isIframe`,{enumerable:!0,get:function(){return s.isIframe}}),Object.defineProperty(exports,`isServer`,{enumerable:!0,get:function(){return s.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,`localessEditable`,{enumerable:!0,get:function(){return s.localessEditable}}),Object.defineProperty(exports,`localessEditableField`,{enumerable:!0,get:function(){return s.localessEditableField}}),exports.localessInit=e.localessInit,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=r.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.unregisterComponent=e.unregisterComponent;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, isSyncEnabled as r, localessInit as i, registerComponent as a, resolveAsset as o, unregisterComponent as s } from "../core/state.mjs";
|
|
2
|
+
import { findLink as c } from "../core/utils/link.util.mjs";
|
|
3
|
+
import { isBrowser as l, isIframe as u, isServer as d, localessEditable as f, localessEditableField as p } from "../core/utils/index.mjs";
|
|
4
|
+
import { LocalessComponent as m } from "../core/components/localess-component.mjs";
|
|
5
|
+
import { renderRichTextToReact as h } from "../core/richtext.mjs";
|
|
6
|
+
import { LocalessServerComponent as g } from "../ssr/localess-component.mjs";
|
|
7
|
+
import { LocalessServerDocument as _ } from "../ssr/localess-document.mjs";
|
|
8
|
+
import { LocalessDocument as v } from "./localess-document.mjs";
|
|
9
|
+
export { m as LocalessComponent, v as LocalessDocument, g as LocalessServerComponent, _ as LocalessServerDocument, c as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, l as isBrowser, u as isIframe, d as isServer, r as isSyncEnabled, f as localessEditable, p as localessEditableField, i as localessInit, a as registerComponent, h as renderRichTextToReact, o as resolveAsset, s as unregisterComponent };
|
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
export { LocalessServerComponent, LocalessServerComponentProps, LocalessServerDocument, LocalessServerDocumentProps } from './ssr.mjs';
|
|
3
|
-
import { ContentData, Content } from '@localess/client';
|
|
4
|
-
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';
|
|
5
|
-
export { L as LocalessComponent, a as LocalessComponentProps } from './localess-component-DikkO35Z.mjs';
|
|
6
|
-
import * as react from 'react';
|
|
7
|
-
|
|
1
|
+
import { Content, ContentData } from '../core/models';
|
|
8
2
|
/**
|
|
9
3
|
* Props for {@link LocalessDocument}.
|
|
10
4
|
*
|
|
11
5
|
* @template T - The content data shape. Defaults to the base {@link ContentData} type.
|
|
12
6
|
*/
|
|
13
|
-
type LocalessDocumentProps<T extends ContentData = ContentData> = {
|
|
7
|
+
export type LocalessDocumentProps<T extends ContentData = ContentData> = {
|
|
14
8
|
/**
|
|
15
9
|
* The full content response object as returned by `getContentBySlug` or `getContentById`.
|
|
16
10
|
* Must contain a `data` field with a valid `_schema` key.
|
|
@@ -56,6 +50,4 @@ type LocalessDocumentProps<T extends ContentData = ContentData> = {
|
|
|
56
50
|
* }
|
|
57
51
|
* ```
|
|
58
52
|
*/
|
|
59
|
-
declare const LocalessDocument: react.ForwardRefExoticComponent<LocalessDocumentProps<ContentData> & react.RefAttributes<HTMLElement>>;
|
|
60
|
-
|
|
61
|
-
export { LocalessDocument, type LocalessDocumentProps };
|
|
53
|
+
export declare const LocalessDocument: import('react').ForwardRefExoticComponent<LocalessDocumentProps<ContentData> & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require(`../console.js`),t=require(`../core/state.js`),n=require(`../core/components/localess-component.js`),r=require(`./localess-sync.js`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=(0,i.forwardRef)(({document:i},o)=>i.data?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.LocalessComponent,{ref:o,data:i.data,links:i.links,references:i.references}),(0,a.jsx)(r.LocalessSync,{document:i,origin:t.getOrigin(),enableSync:t.isSyncEnabled()})]}):(console.error(`LocalessDocument property %cdocument.data%c is not provided.`,e.FONT_BOLD,e.FONT_NORMAL),(0,a.jsxs)(`div`,{children:[`LocalessDocument property `,(0,a.jsx)(`b`,{children:`document.data`}),` is not provided.`]})));exports.LocalessDocument=o;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { FONT_BOLD as e, FONT_NORMAL as t } from "../console.mjs";
|
|
2
|
+
import { getOrigin as n, isSyncEnabled as r } from "../core/state.mjs";
|
|
3
|
+
import { LocalessComponent as i } from "../core/components/localess-component.mjs";
|
|
4
|
+
import { LocalessSync as a } from "./localess-sync.mjs";
|
|
5
|
+
import { forwardRef as o } from "react";
|
|
6
|
+
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
|
+
//#region src/rsc/localess-document.tsx
|
|
8
|
+
var u = o(({ document: o }, u) => o.data ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(i, {
|
|
9
|
+
ref: u,
|
|
10
|
+
data: o.data,
|
|
11
|
+
links: o.links,
|
|
12
|
+
references: o.references
|
|
13
|
+
}), /* @__PURE__ */ c(a, {
|
|
14
|
+
document: o,
|
|
15
|
+
origin: n(),
|
|
16
|
+
enableSync: r()
|
|
17
|
+
})] }) : (console.error("LocalessDocument property %cdocument.data%c is not provided.", e, t), /* @__PURE__ */ l("div", { children: [
|
|
18
|
+
"LocalessDocument property ",
|
|
19
|
+
/* @__PURE__ */ c("b", { children: "document.data" }),
|
|
20
|
+
" is not provided."
|
|
21
|
+
] })));
|
|
22
|
+
//#endregion
|
|
23
|
+
export { u as LocalessDocument };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Content, ContentData } from '@localess/client';
|
|
2
|
+
export type LocalessSyncProps<T extends ContentData = ContentData> = {
|
|
3
|
+
document: Content<T>;
|
|
4
|
+
origin: string;
|
|
5
|
+
enableSync: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const LocalessSync: (props: LocalessSyncProps) => null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";let e=require(`@localess/client`),t=require(`react`);var n=(n=>(console.info(`LocalessSync:init`),(0,t.useEffect)(()=>{console.info(`LocalessSync:effect`,n.enableSync,(0,e.isBrowser)(),(0,e.isIframe)()),n.enableSync&&(0,e.isBrowser)()&&(0,e.isIframe)()&&((0,e.loadLocalessSync)(n.origin),window.localess?.on([`input`,`change`],e=>{console.info(`LocalessSync:change:`,e),(e.type===`change`||e.type===`input`)&&(n.document.data=e.data)}))},[]),null));exports.LocalessSync=n;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { isBrowser as e, isIframe as t } from "../core/utils/index.mjs";
|
|
3
|
+
import { loadLocalessSync as n } from "@localess/client";
|
|
4
|
+
import { useEffect as r } from "react";
|
|
5
|
+
//#region src/rsc/localess-sync.tsx
|
|
6
|
+
var i = ((i) => (console.info("LocalessSync:init"), r(() => {
|
|
7
|
+
console.info("LocalessSync:effect", i.enableSync, e(), t()), i.enableSync && e() && t() && (n(i.origin), window.localess?.on(["input", "change"], (e) => {
|
|
8
|
+
console.info("LocalessSync:change:", e), (e.type === "change" || e.type === "input") && (i.document.data = e.data);
|
|
9
|
+
}));
|
|
10
|
+
}, []), null));
|
|
11
|
+
//#endregion
|
|
12
|
+
export { i as LocalessSync };
|