add playground

Author: alexcibotari

package-lock.json

@@ -25,8 +25,13 @@
   "private": false,
   "license": "MIT",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "playgrounds/*"
   ],
+  "scripts": {
+    "build": "npm run build:react",
+    "build:react": "cd packages/react && npm run build"
+  },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"

package.json

@@ -24,12 +24,18 @@
   "files": [
     "dist"
   ],
-  "type": "module",
+  "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",
-  "workspaces": [
-    "packages/*"
-  ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts"
   },

packages/react/package.json

@@ -3,44 +3,47 @@ import {loadLocalessSync, LocalessClient, localessClient} from "@localess/js-cli
 import {FONT_BOLD, FONT_NORMAL} from "./console";
 import {LocalessOptions} from "./models";
 
-let client: LocalessClient | undefined = undefined
-let components: Record<string, React.ElementType> = {};
-let fallbackComponent: React.ElementType | undefined = undefined;
-let enableSync: boolean = false;
-
-export function localessInit(options: LocalessOptions) {
-  client = localessClient(options);
-
-  components = options.components || {};
-  fallbackComponent = options.fallbackComponent;
-  if (options.enableSync) {
-    enableSync = true;
-    loadLocalessSync(options.origin)
+let _client: LocalessClient | undefined = undefined
+let _components: Record<string, React.ElementType> = {};
+let _fallbackComponent: React.ElementType | undefined = undefined;
+let _enableSync: boolean = false;
+
+export function localessInit(options: LocalessOptions): LocalessClient {
+  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;
 }
 
 export function getLocalessClient(): LocalessClient {
-  if (!client) {
+  if (!_client) {
     console.error('[Localess] No client found. Please check if the Localess is initialized.');
     throw new Error('[Localess] No client found.');
   }
-  return client;
+  return _client;
 }
 
 export function getComponent(key: string): React.ElementType | undefined {
-  if (Object.hasOwn(components, key)) {
+  if (Object.hasOwn(_components, key)) {
     console.error(`[Localess] component %c${key}%c can't be found.`, FONT_BOLD, FONT_NORMAL)
     return undefined;
   }
-  return components[key];
+  return _components[key];
 }
 
 export function getFallbackComponent(): React.ElementType | undefined {
-  return fallbackComponent;
+  return _fallbackComponent;
 }
 
 export function isSyncEnabled(): boolean {
-  return enableSync;
+  return _enableSync;
 }
 
 // Client + Edit
@@ -49,3 +52,5 @@ export {llEditable, LocalessClient} from '@localess/js-client'
 export {LocalessSync, EventToApp, EventCallback, EventToAppType} from '@localess/js-client'
 // Models
 export type * from './models';
+// Component
+export * from './localess-componenet';

packages/react/src/index.ts

@@ -8,7 +8,7 @@ export type LocalessComponentProps = {
   links?: Links
 }
 
-const LocalessComponent = forwardRef<HTMLElement, LocalessComponentProps>(({data, links, ...restProps}, ref) => {
+export const LocalessComponent = forwardRef<HTMLElement, LocalessComponentProps>(({data, links, ...restProps}, ref) => {
   if (!data) {
     console.error('LocalessComponent property %cdata%c is not provided.', FONT_BOLD, FONT_NORMAL)
     return <div>LocalessComponent property <b>data</b> is not provided.</div>
@@ -32,5 +32,3 @@ const LocalessComponent = forwardRef<HTMLElement, LocalessComponentProps>(({data
     </p>
   );
 });
-
-export default LocalessComponent;

packages/react/src/localess-componenet.tsx

@@ -1,29 +1,7 @@
 import type React from "react";
+import {LocalessClientOptions} from "@localess/js-client";
 
-export type LocalessOptions = {
-  /**
-   * A fully qualified domain name with protocol (http/https) and port.
-   *
-   * Example: https://my-localess.web.app
-   */
-  origin: string;
-  /**
-   * Localess space ID, cna be found in the Localess Space settings
-   */
-  spaceId: string;
-  /**
-   * Localess API token, can be found in the Localess Space settings
-   */
-  token: string;
-  /**
-   * Content version to fetch, leave empty for 'published' or 'draft' for the latest draft
-   */
-  version?: 'draft' | string;
-  /**
-   * Enable debug mode
-   */
-  debug?: boolean;
-
+export type LocalessOptions = LocalessClientOptions & {
   /**
    * Components mapping for Localess Component integration
    */

packages/react/src/models/options.ts

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

playgrounds/next15/.gitignore

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

playgrounds/next15/README.md

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

playgrounds/next15/eslint.config.mjs

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;