@domicile-desktop/react 0.0.0-alpha-e645e06bdc39 → 0.0.0-alpha-ae7874c8b1e4

package/README.md

@@ -15,6 +15,8 @@ const Focused = () => <p>{useFocusedWindow() ?? "the shell"}</p>;
 export const Shell = mount(Focused);
 ```
 
+- `./elements`: JSX types for the engine's `<app>` and `<webview>`. Load
+  them once with `/// <reference types="@domicile-desktop/react/elements" />`.
 - `./mount`: `mount(App)` is a shell's `Shell` or an app's `main`. Draws `App`
   synchronously (the page draws nothing until `Shell` returns) in an element
   of its own with `display: contents`, under `StrictMode`, an error boundary

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-e645e06bdc39"
+    "@domicile-desktop/sdk": "0.0.0-alpha-ae7874c8b1e4"
   },
   "description": "React for a Domicile shell or app: mount it on the desktop, read the desktop from context, and follow its state with hooks.",
   "devDependencies": {
@@ -32,6 +32,9 @@
       "types": "./dist/domicile-provider.d.ts",
       "default": "./dist/domicile-provider.js"
     },
+    "./elements": {
+      "types": "./src/elements.d.ts"
+    },
     "./fake-domicile": {
       "types": "./dist/fake-domicile.d.ts",
       "default": "./dist/fake-domicile.js"
@@ -74,7 +77,8 @@
     }
   },
   "files": [
-    "dist/**"
+    "dist/**",
+    "src/elements.d.ts"
   ],
   "license": "MIT",
   "name": "@domicile-desktop/react",
@@ -92,7 +96,7 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-e645e06bdc39",
+  "version": "0.0.0-alpha-ae7874c8b1e4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cprussin/domicile.git",

package/src/elements.d.ts

@@ -0,0 +1,48 @@
+// JSX types for the engine's `<app>` element and `<webview>` attributes, which
+// React does not know. A shell loads them with
+// `/// <reference types="@domicile-desktop/react/elements" />`.
+//
+// Only `app-id`, `frame` and `resizing` are declared. `<app>` has no hyphen, so
+// React treats it as a plain HTML element and will not set unknown properties
+// or bind its custom event; use `addEventListener` for it.
+//
+// `HTMLAppElement` is the SDK's global, so React's `ref` type and
+// `document.querySelector("app")` agree. An exported interface would be a
+// different type.
+
+// The SDK declares the elements' DOM types, `HTMLAppElement` and
+// `HTMLWebViewElement`, as globals.
+import type {} from "@domicile-desktop/sdk/app-element";
+import type {} from "@domicile-desktop/sdk/webview-element";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+declare module "react" {
+  // `<webview>` attributes missing from React's Electron-era types: `window`
+  // makes a view show a browser window (see `WEBVIEW_WINDOW_ATTRIBUTE`),
+  // `extensionpopup`, by its presence, makes it an extension's action popup,
+  // `private`, by its presence, makes its page private, and `resizing`, by its
+  // presence, marks an interactive resize.
+  interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
+    extensionpopup?: string | undefined;
+    private?: string | undefined;
+    resizing?: string | undefined;
+    window?: string | undefined;
+  }
+
+  // biome-ignore lint/style/noNamespace: React declares its JSX types as a namespace; augmenting IntrinsicElements has to match that shape
+  namespace JSX {
+    // biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging into IntrinsicElements requires an interface
+    interface IntrinsicElements {
+      /**
+       * A Wayland client's window. `app-id` is the host's ID for it.
+       * `frame` is the synced frame it shows (`DomicileWindow.frame`).
+       * `resizing`, by its presence, marks an interactive resize.
+       */
+      app: DetailedHTMLProps<HTMLAttributes<HTMLAppElement>, HTMLAppElement> & {
+        "app-id": string;
+        frame?: string | undefined;
+        resizing?: string | undefined;
+      };
+    }
+  }
+}