@localess/react 0.8.0

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import React__default from 'react';
+import { LocalessClientOptions, ContentData, Links, LocalessClient } from '@localess/js-client';
+export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, Translations, llEditable } from '@localess/js-client';
+
+type LocalessOptions = LocalessClientOptions & {
+    /**
+     * Components mapping for Localess Component integration
+     */
+    components?: Record<string, React__default.ElementType>;
+    /**
+     * Component used if expected key didn't return anything
+     */
+    fallbackComponent?: React__default.ElementType;
+    /**
+     * Load Sync Script, for Visual Editor integration
+     */
+    enableSync?: boolean;
+};
+
+type LocalessComponentProps = {
+    data: ContentData;
+    links?: Links;
+};
+declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps & React.RefAttributes<HTMLElement>>;
+
+declare function localessInit(options: LocalessOptions): LocalessClient;
+declare function getLocalessClient(): LocalessClient;
+declare function getComponent(key: string): React__default.ElementType | undefined;
+declare function getFallbackComponent(): React__default.ElementType | undefined;
+declare function isSyncEnabled(): boolean;
+
+export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import React__default from 'react';
+import { LocalessClientOptions, ContentData, Links, LocalessClient } from '@localess/js-client';
+export { Content, ContentAsset, ContentData, ContentDataField, ContentDataSchema, ContentLink, ContentMetadata, ContentReference, ContentRichText, EventCallback, EventToApp, EventToAppType, Links, LocalessClient, LocalessSync, Translations, llEditable } from '@localess/js-client';
+
+type LocalessOptions = LocalessClientOptions & {
+    /**
+     * Components mapping for Localess Component integration
+     */
+    components?: Record<string, React__default.ElementType>;
+    /**
+     * Component used if expected key didn't return anything
+     */
+    fallbackComponent?: React__default.ElementType;
+    /**
+     * Load Sync Script, for Visual Editor integration
+     */
+    enableSync?: boolean;
+};
+
+type LocalessComponentProps = {
+    data: ContentData;
+    links?: Links;
+};
+declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps & React.RefAttributes<HTMLElement>>;
+
+declare function localessInit(options: LocalessOptions): LocalessClient;
+declare function getLocalessClient(): LocalessClient;
+declare function getComponent(key: string): React__default.ElementType | undefined;
+declare function getFallbackComponent(): React__default.ElementType | undefined;
+declare function isSyncEnabled(): boolean;
+
+export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit };

package/dist/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LocalessComponent: () => LocalessComponent,
+  getComponent: () => getComponent,
+  getFallbackComponent: () => getFallbackComponent,
+  getLocalessClient: () => getLocalessClient,
+  isSyncEnabled: () => isSyncEnabled,
+  llEditable: () => import_js_client3.llEditable,
+  localessInit: () => localessInit
+});
+module.exports = __toCommonJS(index_exports);
+var import_js_client2 = require("@localess/js-client");
+
+// src/console.ts
+var FONT_BOLD = "font-weight: bold";
+var FONT_NORMAL = "font-weight: normal";
+
+// src/index.ts
+var import_js_client3 = require("@localess/js-client");
+
+// src/localess-componenet.tsx
+var import_react = require("react");
+var import_js_client = require("@localess/js-client");
+var import_jsx_runtime = require("react/jsx-runtime");
+var LocalessComponent = (0, import_react.forwardRef)(({ data, links, ...restProps }, ref) => {
+  if (!data) {
+    console.error("LocalessComponent property %cdata%c is not provided.", FONT_BOLD, FONT_NORMAL);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      "LocalessComponent property ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "data" }),
+      " is not provided."
+    ] });
+  }
+  const Comp = getComponent(data._schema || data.schema);
+  if (Comp) {
+    const attr = isSyncEnabled() ? (0, import_js_client.llEditable)(data) : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ref, data, links, ...attr, ...restProps });
+  }
+  const FallbackComponent = getFallbackComponent();
+  if (FallbackComponent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackComponent, { ref, data, links, ...restProps });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "LocalessComponent" }),
+    " could not found component with key ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: data._schema || data.schema }),
+    ". ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+    "Please check if your configuration is correct."
+  ] });
+});
+
+// src/index.ts
+var _client = void 0;
+var _components = {};
+var _fallbackComponent = void 0;
+var _enableSync = false;
+function localessInit(options) {
+  console.log("localessInit", options);
+  const { components, fallbackComponent, enableSync, ...restOptions } = options;
+  _client = (0, import_js_client2.localessClient)(restOptions);
+  _components = components || {};
+  _fallbackComponent = fallbackComponent;
+  if (enableSync) {
+    _enableSync = true;
+    (0, import_js_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 getComponent(key) {
+  if (Object.hasOwn(_components, key)) {
+    console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
+    return void 0;
+  }
+  return _components[key];
+}
+function getFallbackComponent() {
+  return _fallbackComponent;
+}
+function isSyncEnabled() {
+  return _enableSync;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LocalessComponent,
+  getComponent,
+  getFallbackComponent,
+  getLocalessClient,
+  isSyncEnabled,
+  llEditable,
+  localessInit
+});

package/dist/index.mjs

@@ -0,0 +1,88 @@
+// src/index.ts
+import { loadLocalessSync, localessClient } from "@localess/js-client";
+
+// src/console.ts
+var FONT_BOLD = "font-weight: bold";
+var FONT_NORMAL = "font-weight: normal";
+
+// src/index.ts
+import { llEditable as llEditable2 } from "@localess/js-client";
+
+// src/localess-componenet.tsx
+import { forwardRef } from "react";
+import { llEditable } from "@localess/js-client";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LocalessComponent = forwardRef(({ data, links, ...restProps }, ref) => {
+  if (!data) {
+    console.error("LocalessComponent property %cdata%c is not provided.", FONT_BOLD, FONT_NORMAL);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      "LocalessComponent property ",
+      /* @__PURE__ */ jsx("b", { children: "data" }),
+      " is not provided."
+    ] });
+  }
+  const Comp = getComponent(data._schema || data.schema);
+  if (Comp) {
+    const attr = isSyncEnabled() ? llEditable(data) : {};
+    return /* @__PURE__ */ jsx(Comp, { ref, data, links, ...attr, ...restProps });
+  }
+  const FallbackComponent = getFallbackComponent();
+  if (FallbackComponent) {
+    return /* @__PURE__ */ jsx(FallbackComponent, { ref, data, links, ...restProps });
+  }
+  return /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx("b", { children: "LocalessComponent" }),
+    " could not found component with key ",
+    /* @__PURE__ */ jsx("b", { children: data._schema || data.schema }),
+    ". ",
+    /* @__PURE__ */ jsx("br", {}),
+    "Please check if your configuration is correct."
+  ] });
+});
+
+// src/index.ts
+var _client = void 0;
+var _components = {};
+var _fallbackComponent = void 0;
+var _enableSync = false;
+function localessInit(options) {
+  console.log("localessInit", options);
+  const { components, fallbackComponent, enableSync, ...restOptions } = options;
+  _client = localessClient(restOptions);
+  _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 getComponent(key) {
+  if (Object.hasOwn(_components, key)) {
+    console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL);
+    return void 0;
+  }
+  return _components[key];
+}
+function getFallbackComponent() {
+  return _fallbackComponent;
+}
+function isSyncEnabled() {
+  return _enableSync;
+}
+export {
+  LocalessComponent,
+  getComponent,
+  getFallbackComponent,
+  getLocalessClient,
+  isSyncEnabled,
+  llEditable2 as llEditable,
+  localessInit
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@localess/react",
+  "version": "0.8.0",
+  "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
+  "keywords": [
+    "localess",
+    "sdk",
+    "api",
+    "client",
+    "react",
+    "javascript",
+    "typescript"
+  ],
+  "author": "Lessify",
+  "homepage": "https://github.com/Lessify/localess-react",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lessify/localess-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Lessify/localess-react/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "private": false,
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
+  },
+  "dependencies": {
+    "@localess/js-client": "0.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.12",
+    "@types/node": "^20.12.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  }
+}