@jay-framework/4-react 0.5.0

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import { JayEventHandler, Coordinate, JayEventHandlerWrapper, JayElement, PreRenderElement, OnlyEventEmitters, EventEmitter } from '@jay-framework/runtime';
+import * as React from 'react';
+import { Getter } from '@jay-framework/reactive';
+
+type eventType = string;
+type refName = string;
+type JayReactElementEvents = Record<eventType, JayEventHandler<any, any, any>>;
+type JayReactEvents = Record<refName, JayReactElementEvents>;
+declare class EventsContext {
+    readonly viewState: object;
+    readonly coordinateBase: Coordinate;
+    readonly eventsWrapper: JayEventHandlerWrapper<any, any, any>;
+    private reactEvents;
+    constructor(viewState: object, coordinateBase: Coordinate, eventsWrapper: JayEventHandlerWrapper<any, any, any>, reactEvents: JayReactEvents);
+    coordinate(refName: string): Coordinate;
+    events(refName: string): JayReactElementEvents;
+    child(id: string, viewState: object): EventsContext;
+    withViewState(viewState: object): EventsContext;
+}
+declare function eventsFor<ViewState>(eventsContext: EventsContext, refName: string): {};
+declare function refsRecorder<Refs>(eventWrapper?: JayEventHandlerWrapper<any, any, any>): [Refs, EventsContext];
+
+interface Jay4ReactElementProps<ViewState> {
+    vs: ViewState;
+    context: EventsContext;
+}
+type EventEmittersToReactCallbacks<T> = {
+    [Key in keyof T as T[Key] extends EventEmitter<any, any> ? Key : never]?: T[Key] extends EventEmitter<infer EventType, any> ? (event: EventType) => void : T[Key];
+};
+type Jay2React<Comp extends (...args: any) => any> = Parameters<Comp>[0] & EventEmittersToReactCallbacks<OnlyEventEmitters<ReturnType<Comp>>>;
+declare function jay2React<PropsT extends object, ViewState extends object, Refs extends object, JayElementT extends JayElement<ViewState, Refs>, CompConstructor extends (...args: any) => any>(comp: Getter<CompConstructor>): React.FC<Jay2React<CompConstructor>>;
+declare function mimicJayElement<ViewState extends object, Refs extends object, JayElementT extends JayElement<ViewState, Refs>, ElementProps extends Jay4ReactElementProps<ViewState>>(reactElement: React.FC<ElementProps>): PreRenderElement<ViewState, Refs, JayElementT>;
+
+type PropsFromReact<T extends (...args: any[]) => any> = Parameters<T>[0];
+type FunctionProperties<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : never;
+};
+type OnlyFunctionProperties2<A> = {
+    [K in keyof A as A[K] extends never ? never : K]: A[K];
+};
+type ReactToCompRef<T extends (...args: any[]) => any> = OnlyFunctionProperties2<FunctionProperties<PropsFromReact<T>>>;
+
+export { EventsContext, type Jay4ReactElementProps, type JayReactElementEvents, type JayReactEvents, type ReactToCompRef, eventsFor, jay2React, mimicJayElement, refsRecorder };

package/dist/index.js

@@ -0,0 +1,172 @@
+import { useRef, useState } from "react";
+function uppercaseThirdLetter(str) {
+  if (str.length >= 3 && str.substring(0, 2) === "on") {
+    return str.substring(0, 2) + str[2].toUpperCase() + str.substring(3);
+  } else {
+    return str;
+  }
+}
+const SPECIAL_JAY_TO_REACT_EVENT_NAMES = {
+  onkeydown: "onKeyDown",
+  ondblclick: "onDoubleClick"
+};
+function jayToReactEventName(jayEventName) {
+  return SPECIAL_JAY_TO_REACT_EVENT_NAMES[jayEventName] || uppercaseThirdLetter(jayEventName);
+}
+class EventsContext {
+  constructor(viewState, coordinateBase, eventsWrapper, reactEvents) {
+    this.viewState = viewState;
+    this.coordinateBase = coordinateBase;
+    this.eventsWrapper = eventsWrapper;
+    this.reactEvents = reactEvents;
+  }
+  coordinate(refName) {
+    return [...this.coordinateBase, refName];
+  }
+  events(refName) {
+    return this.reactEvents[refName];
+  }
+  child(id, viewState) {
+    return new EventsContext(
+      viewState,
+      [...this.coordinateBase, id],
+      this.eventsWrapper,
+      this.reactEvents
+    );
+  }
+  withViewState(viewState) {
+    return new EventsContext(
+      viewState,
+      this.coordinateBase,
+      this.eventsWrapper,
+      this.reactEvents
+    );
+  }
+}
+function eventsFor(eventsContext, refName) {
+  const reactCallbacks = {};
+  const events = eventsContext.events(refName);
+  Object.entries(events).forEach((event) => {
+    const name = jayToReactEventName(event[0]);
+    const handler = event[1];
+    reactCallbacks[name] = (reactEvent) => {
+      const coordinate = eventsContext.coordinate(refName);
+      const viewState = eventsContext.viewState;
+      const eventsWrapper = eventsContext.eventsWrapper;
+      const jayEvent = {
+        viewState,
+        coordinate,
+        event: reactEvent?.nativeEvent ? reactEvent.nativeEvent : reactEvent
+      };
+      if (eventsWrapper)
+        eventsWrapper(handler, jayEvent);
+      else
+        handler(jayEvent);
+    };
+  });
+  return reactCallbacks;
+}
+function refRecorder() {
+  const ref = {};
+  const proxy = new Proxy(
+    {},
+    {
+      get(target, prop, receiver) {
+        return (arg) => ref[prop] = arg;
+      }
+    }
+  );
+  return [proxy, ref];
+}
+function refsRecorder(eventWrapper) {
+  const refs = {};
+  const events = {};
+  const _0 = new Proxy(
+    {},
+    {
+      get(target, p, receiver) {
+        if (refs[p]) {
+          return refs[p];
+        } else {
+          const [proxy, ref] = refRecorder();
+          events[p] = ref;
+          return refs[p] = proxy;
+        }
+      }
+    }
+  );
+  const _1 = new EventsContext(null, [], eventWrapper, events);
+  return [_0, _1];
+}
+function splitPropsEvents(reactProps) {
+  const props = {}, events = {};
+  Object.keys(reactProps).forEach((key) => {
+    if (reactProps[key] instanceof Function)
+      events[key] = reactProps[key];
+    else
+      props[key] = reactProps[key];
+  });
+  return [props, events];
+}
+function jay2React(comp) {
+  return (reactProps) => {
+    const [props, events] = splitPropsEvents(reactProps);
+    const myInstanceRef = useRef(null);
+    if (!myInstanceRef.current) {
+      myInstanceRef.current = comp()(props);
+    } else {
+      const reactViewStateState = useState(null);
+      myInstanceRef.current.update({ ...props, reactViewStateState });
+    }
+    Object.keys(events).forEach(
+      (eventName) => myInstanceRef.current.addEventListener(
+        eventName.substring(2),
+        ({ event }) => events[eventName](event)
+      )
+    );
+    return myInstanceRef.current.element["react"];
+  };
+}
+function mimicJayElement(reactElement) {
+  const preRender = (options) => {
+    const [refs, eventsContext] = refsRecorder(options.eventWrapper);
+    let viewState, setViewState;
+    return [
+      refs,
+      (vs) => {
+        const _eventsContext = eventsContext.withViewState(vs);
+        [viewState, setViewState] = useState(vs);
+        let react = reactElement({
+          vs,
+          context: _eventsContext
+        });
+        const element = {
+          update: (newData) => {
+            element["react"] = reactElement({
+              vs: newData,
+              context: _eventsContext
+            });
+            if (newData["reactViewStateState"])
+              [viewState, setViewState] = newData["reactViewStateState"];
+            setViewState(newData);
+          },
+          mount: () => {
+          },
+          unmount: () => {
+          },
+          refs,
+          react
+        };
+        return element;
+      }
+    ];
+  };
+  return preRender;
+}
+export {
+  EventsContext,
+  eventsFor,
+  jay2React,
+  mimicJayElement,
+  refsRecorder
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@jay-framework/4-react",
+  "version": "0.5.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "readme.md"
+  ],
+  "scripts": {
+    "build": "npm run build:js && npm run build:types",
+    "build:watch": "npm run build:cli-link && npm run build:js -- --watch",
+    "build:js": "vite build",
+    "build:types": "tsup lib/index.ts --dts-only --format esm",
+    "build:check-types": "tsc",
+    "clean": "rimraf dist",
+    "confirm": "npm run clean && npm run build && npm run build:check-types && npm run test && npm run definitions && npm run runtime",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@jay-framework/component": "workspace:^",
+    "@jay-framework/json-patch": "workspace:^",
+    "@jay-framework/reactive": "workspace:^",
+    "@jay-framework/runtime": "workspace:^",
+    "@jay-framework/secure": "workspace:^",
+    "@jay-framework/serialization": "workspace:^",
+    "@testing-library/dom": "^10.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@jay-framework/dev-environment": "workspace:^",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "caniuse-lite": "^1.0.30001579",
+    "npm-run-all2": "^6.1.1",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.1"
+  }
+}

package/readme.md

@@ -0,0 +1,36 @@
+# Jay 4 React
+
+The Jay 4 React runtime module is an adapter module that enables running Jay Components "as is" with React Code.
+
+- A Jay Component runs "as is"
+- A Jay Element is compiled into regular functional React component
+- The `jay2React` and `mimicJayElement` adapt between Jay and React
+
+The main principle is that the Jay development experience is not changed, while the only thing that changes is now
+we compile the `jay-html` files into Jay Elements. This runtime library facilitates this process.
+
+Using those function require compiling Jay with compilation target React.
+See the [compiler](../../compiler/compiler) for more details on compile target.
+
+## jay2React
+
+The function `Jay2React` is an adapter function turning a Jay Component into a React component.
+It is used in React code seeking to import Jay Components, as well as in generated Jay Elements
+who have child Jay Components.
+
+```typescript
+const ReactCart = jay2React(() => Cart);
+```
+
+Where `Cart` is a regular Jay Component, and `ReactCart` is a React component.
+
+The function transforms Jay the Jay Component as
+
+- Jay Props become React Props
+- Jay Events become callbacks in React Props
+- Jay APIs are not exposed in React (as React has no notion of component APIs)
+
+## mimicJayElement
+
+The function `mimicJayElement` is an adapter function turning a React Component into a Jay Element,
+to be used with React Components.