@owdproject/react 4.0.0-alpha.3 → 4.0.0-alpha.4

package/dist/index.d.mts

@@ -0,0 +1,74 @@
+import { ApplicationConfig, WindowConfig, Desktop, WindowInstance, ApplicationInstance, WindowBounds, DesktopWorkareaRect, DesktopSnapshot, ResizeDirection, WindowState, WindowManager } from '@owdproject/core';
+export * from '@owdproject/core';
+import { SnapZoneHint } from '@owdproject/core/types';
+import * as react from 'react';
+import { ComponentType } from 'react';
+
+/** Runtime props shared by React application windows, independently of a theme. */
+interface ReactApplicationWindowProps {
+    desktop: Desktop;
+    window: WindowInstance;
+    application: ApplicationInstance;
+    /** Closes through the owning application, including its cancellable hooks. */
+    close: () => Promise<boolean>;
+}
+interface ReactApplicationWindowConfig extends Omit<WindowConfig, 'component'> {
+    component: ComponentType<ReactApplicationWindowProps>;
+}
+interface ReactApplicationConfig extends Omit<ApplicationConfig, 'windows'> {
+    windows?: Record<string, ReactApplicationWindowConfig>;
+}
+/** Registration and launch retain the engine's lifecycle and singleton behavior. */
+declare function registerReactApplication(desktop: Desktop, config: ReactApplicationConfig): ApplicationInstance;
+declare function closeReactApplicationWindow(desktop: Desktop, window: WindowInstance): Promise<boolean>;
+/** Render the component from this window's registered model, without a theme app catalog. */
+declare function ReactApplicationWindow({ desktop, window }: {
+    desktop: Desktop;
+    window: WindowInstance;
+}): react.ReactElement<ReactApplicationWindowProps, string | react.JSXElementConstructor<any>> | null;
+
+/**
+ * @owdproject/react
+ * Official React 18/19 reactive adapter for @owdproject/core using useSyncExternalStore.
+ */
+
+declare function useDesktop(desktop: Desktop): DesktopSnapshot & {
+    desktop: Desktop;
+};
+declare function useWindowManager(manager: WindowManager): {
+    windows: WindowInstance[];
+    focused: WindowInstance | undefined;
+    manager: WindowManager;
+};
+declare function useWindowInstance(instance: WindowInstance): {
+    state: WindowState;
+    instance: WindowInstance;
+};
+interface ReactDesktopDragOptions {
+    getBounds: () => WindowBounds;
+    getWorkarea?: () => DesktopWorkareaRect | undefined;
+    onStart?: () => void;
+    onMove?: (bounds: WindowBounds, snapZone: SnapZoneHint | null) => void;
+    onEnd?: (finalBounds: WindowBounds, snapZone: SnapZoneHint | null) => void;
+    onCancel?: () => void;
+}
+declare function useDesktopDrag(options: ReactDesktopDragOptions): {
+    startDrag: (event: PointerEvent) => () => void;
+};
+interface ReactDesktopResizeOptions {
+    getBounds: () => WindowBounds;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    onStart?: () => void;
+    onMove?: (bounds: WindowBounds) => void;
+    onEnd?: (finalBounds: WindowBounds) => void;
+    onCancel?: () => void;
+}
+declare function useDesktopResize(options: ReactDesktopResizeOptions): {
+    startResize: (event: PointerEvent, direction: ResizeDirection) => () => void;
+};
+
+export { ReactApplicationWindow, closeReactApplicationWindow, registerReactApplication, useDesktop, useDesktopDrag, useDesktopResize, useWindowInstance, useWindowManager };
+export type { ReactApplicationConfig, ReactApplicationWindowConfig, ReactApplicationWindowProps, ReactDesktopDragOptions, ReactDesktopResizeOptions };

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+import { ApplicationConfig, WindowConfig, Desktop, WindowInstance, ApplicationInstance, WindowBounds, DesktopWorkareaRect, DesktopSnapshot, ResizeDirection, WindowState, WindowManager } from '@owdproject/core';
+export * from '@owdproject/core';
+import { SnapZoneHint } from '@owdproject/core/types';
+import * as react from 'react';
+import { ComponentType } from 'react';
+
+/** Runtime props shared by React application windows, independently of a theme. */
+interface ReactApplicationWindowProps {
+    desktop: Desktop;
+    window: WindowInstance;
+    application: ApplicationInstance;
+    /** Closes through the owning application, including its cancellable hooks. */
+    close: () => Promise<boolean>;
+}
+interface ReactApplicationWindowConfig extends Omit<WindowConfig, 'component'> {
+    component: ComponentType<ReactApplicationWindowProps>;
+}
+interface ReactApplicationConfig extends Omit<ApplicationConfig, 'windows'> {
+    windows?: Record<string, ReactApplicationWindowConfig>;
+}
+/** Registration and launch retain the engine's lifecycle and singleton behavior. */
+declare function registerReactApplication(desktop: Desktop, config: ReactApplicationConfig): ApplicationInstance;
+declare function closeReactApplicationWindow(desktop: Desktop, window: WindowInstance): Promise<boolean>;
+/** Render the component from this window's registered model, without a theme app catalog. */
+declare function ReactApplicationWindow({ desktop, window }: {
+    desktop: Desktop;
+    window: WindowInstance;
+}): react.ReactElement<ReactApplicationWindowProps, string | react.JSXElementConstructor<any>> | null;
+
+/**
+ * @owdproject/react
+ * Official React 18/19 reactive adapter for @owdproject/core using useSyncExternalStore.
+ */
+
+declare function useDesktop(desktop: Desktop): DesktopSnapshot & {
+    desktop: Desktop;
+};
+declare function useWindowManager(manager: WindowManager): {
+    windows: WindowInstance[];
+    focused: WindowInstance | undefined;
+    manager: WindowManager;
+};
+declare function useWindowInstance(instance: WindowInstance): {
+    state: WindowState;
+    instance: WindowInstance;
+};
+interface ReactDesktopDragOptions {
+    getBounds: () => WindowBounds;
+    getWorkarea?: () => DesktopWorkareaRect | undefined;
+    onStart?: () => void;
+    onMove?: (bounds: WindowBounds, snapZone: SnapZoneHint | null) => void;
+    onEnd?: (finalBounds: WindowBounds, snapZone: SnapZoneHint | null) => void;
+    onCancel?: () => void;
+}
+declare function useDesktopDrag(options: ReactDesktopDragOptions): {
+    startDrag: (event: PointerEvent) => () => void;
+};
+interface ReactDesktopResizeOptions {
+    getBounds: () => WindowBounds;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    onStart?: () => void;
+    onMove?: (bounds: WindowBounds) => void;
+    onEnd?: (finalBounds: WindowBounds) => void;
+    onCancel?: () => void;
+}
+declare function useDesktopResize(options: ReactDesktopResizeOptions): {
+    startResize: (event: PointerEvent, direction: ResizeDirection) => () => void;
+};
+
+export { ReactApplicationWindow, closeReactApplicationWindow, registerReactApplication, useDesktop, useDesktopDrag, useDesktopResize, useWindowInstance, useWindowManager };
+export type { ReactApplicationConfig, ReactApplicationWindowConfig, ReactApplicationWindowProps, ReactDesktopDragOptions, ReactDesktopResizeOptions };

package/dist/index.mjs

@@ -0,0 +1,99 @@
+import { createElement, useCallback, useSyncExternalStore } from 'react';
+import { DesktopPointerSession } from '@owdproject/core';
+export * from '@owdproject/core';
+
+function registerReactApplication(desktop, config) {
+  return desktop.applications.register(config);
+}
+async function closeReactApplicationWindow(desktop, window) {
+  const application = window.applicationId ? desktop.applications.get(window.applicationId) : void 0;
+  return application ? application.closeWindow(window.id) : desktop.windows.closeWindow(window.id);
+}
+function ReactApplicationWindow({ desktop, window }) {
+  const application = window.applicationId ? desktop.applications.get(window.applicationId) : void 0;
+  const Component = window.config.component;
+  if (!application || !Component) return null;
+  return createElement(Component, {
+    desktop,
+    window,
+    application,
+    close: () => closeReactApplicationWindow(desktop, window)
+  });
+}
+
+function useDesktop(desktop) {
+  const subscribe = useCallback(
+    (onStoreChange) => desktop.subscribe(onStoreChange),
+    [desktop]
+  );
+  const getSnapshot = useCallback(() => desktop.getSnapshot(), [desktop]);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return {
+    desktop,
+    ...snapshot
+  };
+}
+function useWindowManager(manager) {
+  const subscribe = useCallback(
+    (onStoreChange) => manager.subscribe(onStoreChange),
+    [manager]
+  );
+  const getSnapshot = useCallback(() => manager.getSnapshot(), [manager]);
+  const windows = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const focused = windows.find((w) => w.state.focused);
+  return {
+    windows,
+    focused,
+    manager
+  };
+}
+function useWindowInstance(instance) {
+  const subscribe = useCallback(
+    (onStoreChange) => instance.subscribe(onStoreChange),
+    [instance]
+  );
+  const getSnapshot = useCallback(() => instance.getSnapshot(), [instance]);
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return {
+    state,
+    instance
+  };
+}
+function useDesktopDrag(options) {
+  const startDrag = useCallback(
+    (event) => {
+      return DesktopPointerSession.startDrag(event, {
+        initialBounds: options.getBounds(),
+        workarea: options.getWorkarea?.(),
+        onStart: options.onStart,
+        onMove: options.onMove,
+        onEnd: options.onEnd,
+        onCancel: options.onCancel
+      });
+    },
+    [options]
+  );
+  return { startDrag };
+}
+function useDesktopResize(options) {
+  const startResize = useCallback(
+    (event, direction) => {
+      return DesktopPointerSession.startResize(event, {
+        direction,
+        initialBounds: options.getBounds(),
+        minWidth: options.minWidth,
+        minHeight: options.minHeight,
+        maxWidth: options.maxWidth,
+        maxHeight: options.maxHeight,
+        onStart: options.onStart,
+        onMove: options.onMove,
+        onEnd: options.onEnd,
+        onCancel: options.onCancel
+      });
+    },
+    [options]
+  );
+  return { startResize };
+}
+
+export { ReactApplicationWindow, closeReactApplicationWindow, registerReactApplication, useDesktop, useDesktopDrag, useDesktopResize, useWindowInstance, useWindowManager };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@owdproject/react",
-  "version": "4.0.0-alpha.3",
-  "description": "Official React 18/19 adapter for @owdproject/react",
+  "version": "4.0.0-alpha.4",
+  "description": "Official React 18/19 adapter for @owdproject/core",
   "homepage": "https://github.com/owdproject/react#readme",
   "repository": {
     "type": "git",
@@ -20,6 +20,10 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "build": "unbuild",
+    "prepack": "unbuild"
+  },
   "publishConfig": {
     "access": "public",
     "tag": "alpha",
@@ -33,9 +37,13 @@
     }
   },
   "dependencies": {
-    "@owdproject/react": "^4.0.0-alpha.3"
+    "@owdproject/core": "^4.0.0-alpha.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^3.6.1",
+    "typescript": "~6.0.3"
   }
 }