@peachy/react 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +5 -22
  2. package/dist/extra.mjs +37 -0
  3. package/dist/global.d.mts +6 -29
  4. package/dist/hostconfig.mjs +11 -11
  5. package/dist/index.mjs +1 -1
  6. package/dist/jsx-runtime.d.mts +2 -2
  7. package/dist/types.d.mts +5 -3
  8. package/dist/utilities/children.mjs +4 -24
  9. package/dist/utilities/diff.mjs +28 -29
  10. package/package.json +14 -14
  11. package/tsconfig.json +7 -3
package/README.md CHANGED
@@ -36,10 +36,7 @@ Here is a basic example that creates a GTK application window with a label:
36
36
  import Gtk from "gi://Gtk?version=4.0";
37
37
  import { render } from "@peachy/react";
38
38
 
39
- const app = Gtk.Application.new(
40
- "com.hello.world",
41
- Gio.ApplicationFlags.DEFAULT_FLAGS,
42
- );
39
+ const app = Gtk.Application.new("com.hello.world", Gio.ApplicationFlags.DEFAULT_FLAGS);
43
40
 
44
41
  app.connect("activate", () => {
45
42
  const app_window = Gtk.ApplicationWindow.new(app);
@@ -58,22 +55,14 @@ You can also create reusable components using React's component system. For exam
58
55
  import Gtk from "gi://Gtk?version=4.0";
59
56
  import { render } from "@peachy/react";
60
57
 
61
- const Button = ({ label, onClick }) => (
62
- <Gtk.Button label={label} onClick={onClick} />
63
- );
58
+ const Button = ({ label, onClick }) => <Gtk.Button label={label} onClick={onClick} />;
64
59
 
65
- const app = Gtk.Application.new(
66
- "com.hello.world",
67
- Gio.ApplicationFlags.DEFAULT_FLAGS,
68
- );
60
+ const app = Gtk.Application.new("com.hello.world", Gio.ApplicationFlags.DEFAULT_FLAGS);
69
61
 
70
62
  app.connect("activate", () => {
71
63
  const app_window = Gtk.ApplicationWindow.new(app);
72
64
 
73
- render(
74
- <Button label="Click me!" onClick={() => console.log("Button clicked")} />,
75
- app_window,
76
- );
65
+ render(<Button label="Click me!" onClick={() => console.log("Button clicked")} />, app_window);
77
66
 
78
67
  app_window.present();
79
68
  });
@@ -95,13 +84,7 @@ const Button = () => {
95
84
  const onClicked = () => console.log("Button clicked");
96
85
  const onFocused = () => console.log("Button focused/unfocused");
97
86
 
98
- return (
99
- <Gtk.Button
100
- label="Hello World"
101
- onClicked={onClicked}
102
- onNotify:hasFocus={onFocused}
103
- />
104
- );
87
+ return <Gtk.Button label="Hello World" onClicked={onClicked} onNotify:hasFocus={onFocused} />;
105
88
  };
106
89
 
107
90
  app.run([]);
package/dist/extra.mjs CHANGED
@@ -58,6 +58,43 @@ const extraMap = new Map([
58
58
  restoreState(instance, state) {
59
59
  instance.set_position(state.cursorPosition);
60
60
  }
61
+ }],
62
+ [Gtk.Widget.$gtype, {
63
+ appendChild(parentInstance, child) {
64
+ if (child instanceof Gtk.EventController) {
65
+ parentInstance.add_controller(child);
66
+ return;
67
+ }
68
+ if ("child" in parentInstance) {
69
+ parentInstance.child = child;
70
+ return;
71
+ }
72
+ if ("content" in parentInstance) {
73
+ parentInstance.content = child;
74
+ return;
75
+ }
76
+ if (child instanceof Gtk.Widget) child.set_parent(parentInstance);
77
+ console.warn(`Don't know how to append child to ${parentInstance.constructor.name}, please provide an implementation for it in the extraMap`);
78
+ },
79
+ removeChild(parentInstance, child) {
80
+ if (child instanceof Gtk.EventController) {
81
+ parentInstance.remove_controller(child);
82
+ return;
83
+ }
84
+ if ("child" in parentInstance) {
85
+ parentInstance.child = null;
86
+ return;
87
+ }
88
+ if ("content" in parentInstance) {
89
+ parentInstance.content = null;
90
+ return;
91
+ }
92
+ if (child instanceof Gtk.Widget) {
93
+ child.unparent();
94
+ return;
95
+ }
96
+ console.warn(`Don't know how to remove child from ${parentInstance.constructor.name}, please provide an implementation for it in the extraMap`);
97
+ }
61
98
  }]
62
99
  ]);
63
100
 
package/dist/global.d.mts CHANGED
@@ -3,42 +3,19 @@ import { Key, Ref } from "react";
3
3
 
4
4
  //#region src/global.d.ts
5
5
  type PascalCase<S> = S extends `${infer Head}${"-" | "_"}${infer Tail}` ? `${Capitalize<Head>}${PascalCase<Tail>}` : S extends string ? Capitalize<S> : never;
6
- type SignalProps<Self extends GObject.Object> = { [S in keyof Self["$signals"] as S extends `${infer E}::${infer D}` ? // Note here that the detail `D` in ts-for-gir is a property
7
- // which will most likely be incorrect for signals other that notify
8
- `on${PascalCase<`${E}:${D}`>}` : S extends string ? `on${PascalCase<S>}` : never]?: GObject.SignalCallback<Self, Self["$signals"][S]> };
6
+ // [TODO] maybe optimize this later by getting all the static signals
7
+ type SignalProps<Self extends GObject.Object> = { [S in keyof Self["$signals"] as S extends `${infer E}::${infer D}` ? `on${PascalCase<E>}:${E extends "notify" ? PascalCase<keyof Self["$readableProperties"]> : string}` : S extends string ? `on${PascalCase<S>}` : never]?: GObject.SignalCallback<Self, Self["$signals"][S]> };
9
8
  declare global {
10
9
  namespace JSX {
11
10
  interface IntrinsicAttributes {
12
11
  childType?: string;
13
12
  ref?: Ref<any>;
14
13
  key?: Key | null | undefined;
14
+ children?: OrArray<any>;
15
15
  }
16
- type LibraryManagedAttributes<C, Props> = C extends typeof GObject.Object ? Props & SignalProps<InstanceType<C>> : Props;
17
- }
18
- }
19
- declare module "gi://Gtk?version=4.0" {
20
- namespace Gtk {
21
- namespace Widget {
22
- interface ConstructorProps {
23
- /**
24
- * React children
25
- */
26
- children: any;
27
- }
28
- }
29
- }
30
- }
31
- declare module "gi://Gtk?version=3.0" {
32
- namespace Gtk {
33
- namespace Widget {
34
- interface ConstructorProps {
35
- /**
36
- * React children
37
- */
38
- children: any;
39
- }
40
- }
16
+ type LibraryManagedAttributes<C, Props> = C["prototype"] extends GObject.Object ? Props & SignalProps<C["prototype"]> : Props;
41
17
  }
42
18
  }
19
+ type OrArray<T> = T | T[];
43
20
  //#endregion
44
- export { PascalCase, SignalProps };
21
+ export { PascalCase };
package/dist/hostconfig.mjs CHANGED
@@ -13,15 +13,15 @@ const hostConfig = {
13
13
  appendInitialChild(parentInstance, child) {
14
14
  appendChild(parentInstance, child);
15
15
  },
16
- createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
16
+ createInstance(type, props) {
17
17
  const klass = typeMap.get(type);
18
18
  if (!klass) throw new Error(`Unknown type: ${type}`);
19
19
  return new klass(getProperties(props));
20
20
  },
21
- createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
22
- return Gtk.Label.new(text);
21
+ createTextInstance(label) {
22
+ return new Gtk.Label({ label });
23
23
  },
24
- finalizeInitialChildren(widget, type, props) {
24
+ finalizeInitialChildren(widget, _type, props) {
25
25
  const events = getEventListeners(props);
26
26
  Object.keys(events).forEach((name) => {
27
27
  const eventType = getEventName(name);
@@ -33,24 +33,24 @@ const hostConfig = {
33
33
  getPublicInstance(inst) {
34
34
  return inst;
35
35
  },
36
- prepareForCommit(container) {
36
+ prepareForCommit() {
37
37
  return null;
38
38
  },
39
39
  resetAfterCommit() {},
40
- getRootHostContext(rootInstance) {
40
+ getRootHostContext() {
41
41
  return emptyObject;
42
42
  },
43
- getChildHostContext(parentHostContext, type) {
43
+ getChildHostContext() {
44
44
  return emptyObject;
45
45
  },
46
- shouldSetTextContent(type, props) {
46
+ shouldSetTextContent() {
47
47
  return false;
48
48
  },
49
49
  supportsMutation: true,
50
50
  supportsHydration: false,
51
51
  supportsPersistence: false,
52
52
  supportsMicrotasks: true,
53
- scheduleTimeout: (fn, delay) => {
53
+ scheduleTimeout: (fn, delay = 10) => {
54
54
  GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
55
55
  fn();
56
56
  return GLib.SOURCE_REMOVE;
@@ -81,8 +81,8 @@ const hostConfig = {
81
81
  appendChildToContainer(container, child) {
82
82
  appendChild(container, child);
83
83
  },
84
- detachDeletedInstance(node) {},
85
- commitUpdate(widget, type, oldProps, newProps, internalInstanceHandle) {
84
+ detachDeletedInstance() {},
85
+ commitUpdate(widget, type, oldProps, newProps) {
86
86
  updateWidget(widget, oldProps, newProps);
87
87
  },
88
88
  commitTextUpdate(textInstance, oldText, newText) {
package/dist/index.mjs CHANGED
@@ -6,7 +6,7 @@ import Reconciler from "react-reconciler";
6
6
  //#region src/index.ts
7
7
  const reconciler = Reconciler(hostConfig);
8
8
  const render = (jsx, root, callback) => {
9
- const container = reconciler.createContainer(root, 0, null, false, null, "peachy", console.error, console.error, console.error, () => {}, null);
9
+ const container = reconciler.createContainer(root, 0, null, false, null, "peachy", console.error, console.error, console.error, () => {});
10
10
  reconciler.updateContainer(jsx, container, null, callback);
11
11
  };
12
12
  reconciler.injectIntoDevTools({
package/dist/jsx-runtime.d.mts CHANGED
@@ -1,9 +1,9 @@
1
- import * as react0 from "react";
1
+ import * as react from "react";
2
2
  import * as React from "react/jsx-runtime";
3
3
 
4
4
  //#region src/jsx-runtime.d.ts
5
5
  declare const jsx: typeof React.jsx;
6
6
  declare const jsxs: typeof React.jsxs;
7
- declare const Fragment: react0.ExoticComponent<react0.FragmentProps>;
7
+ declare const Fragment: react.ExoticComponent<react.FragmentProps>;
8
8
  //#endregion
9
9
  export { Fragment, jsx, jsxs };
package/dist/types.d.mts CHANGED
@@ -1,3 +1,5 @@
1
+ import GObject from "gi://GObject?version=2.0";
2
+
1
3
  //#region src/types.d.ts
2
4
  type Props = Record<string, unknown>;
3
5
  type Listener = (...args: any[]) => any;
@@ -5,9 +7,9 @@ interface ReactionMetadata {
5
7
  childType?: string;
6
8
  }
7
9
  interface PeachyExtraMethods<T extends Gtk.Widget, State = {}> {
8
- appendChild?(parentInstance: T, child: Gtk.Widget): void;
9
- insertBefore?(parentInstance: T, child: Gtk.Widget, before: Gtk.Widget | null): void;
10
- removeChild?(parentInstance: T, child: Gtk.Widget): void;
10
+ appendChild?(parentInstance: T, child: GObject.Object): void;
11
+ insertBefore?(parentInstance: T, child: GObject.Object, before: GObject.Object | null): void;
12
+ removeChild?(parentInstance: T, child: GObject.Object): void;
11
13
  saveState?(instance: T): State;
12
14
  restoreState?(instance: T, state: State): void;
13
15
  }
package/dist/utilities/children.mjs CHANGED
@@ -2,40 +2,20 @@ import { getExtraMethod } from "./extra.mjs";
2
2
 
3
3
  //#region src/utilities/children.ts
4
4
  function appendChild(parentInstance, child) {
5
- const appendChild = getExtraMethod(parentInstance, "appendChild");
6
- if (appendChild) return appendChild(parentInstance, child);
7
- if ("child" in parentInstance) {
8
- parentInstance.child = child;
9
- return;
10
- }
11
- if ("content" in parentInstance) {
12
- parentInstance.content = child;
13
- return;
14
- }
15
- child.set_parent(parentInstance);
5
+ getExtraMethod(parentInstance, "appendChild")?.(parentInstance, child);
16
6
  }
17
7
  function insertBefore(parentInstance, child, sibling) {
18
8
  const insertBefore = getExtraMethod(parentInstance, "insertBefore");
19
9
  if (insertBefore) return insertBefore(parentInstance, child, sibling);
20
10
  const children = getAllChildren(parentInstance);
21
- children.forEach((child$1) => removeChild(parentInstance, child$1));
11
+ children.forEach((child) => removeChild(parentInstance, child));
22
12
  const childIndex = children.findIndex((c) => c === sibling);
23
13
  if (childIndex !== -1) children.splice(childIndex, 0, child);
24
14
  else children.push(child);
25
- children.forEach((child$1) => appendChild(parentInstance, child$1));
15
+ children.forEach((child) => appendChild(parentInstance, child));
26
16
  }
27
17
  function removeChild(parentInstance, child) {
28
- const removeChild = getExtraMethod(parentInstance, "removeChild");
29
- if (removeChild) return removeChild(parentInstance, child);
30
- if ("child" in parentInstance) {
31
- parentInstance.child = null;
32
- return;
33
- }
34
- if ("content" in parentInstance) {
35
- parentInstance.content = null;
36
- return;
37
- }
38
- child.unparent();
18
+ getExtraMethod(parentInstance, "removeChild")?.(parentInstance, child);
39
19
  }
40
20
  function getAllChildren(parentInstance) {
41
21
  const children = [];
package/dist/utilities/diff.mjs CHANGED
@@ -2,44 +2,43 @@ import { setMetadataFromProps } from "./metadata.mjs";
2
2
  import GObject from "gi://GObject?version=2.0";
3
3
 
4
4
  //#region src/utilities/diff.ts
5
- const INTERNAL_PROP_NAMES = [
5
+ const INTERNAL_PROP_NAMES = new Set([
6
6
  "childType",
7
7
  "ref",
8
- "key"
9
- ];
10
- const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-?/, "::");
11
- const isEvent = (key) => key.startsWith("on");
12
- const isProperty = (key) => key !== "children" && !isEvent(key) && !INTERNAL_PROP_NAMES.includes(key);
13
- const isNew = (prev, next) => (key) => prev[key] !== next[key];
14
- const isGone = (prev, next) => (key) => !(key in next);
8
+ "key",
9
+ "children"
10
+ ]);
15
11
  function updateWidget(widget, prev, next) {
16
- Object.keys(prev).filter(isEvent).filter((key) => !(key in next) || isNew(prev, next)(key)).forEach((name) => {
17
- if (GObject.signal_handlers_disconnect_by_func(widget, prev[name]) === 0) console.warn(`No signal handler found for ${name}`);
18
- });
19
- Object.keys(prev).filter(isProperty).filter(isGone(prev, next)).forEach((name) => {
20
- widget[name] = void 0;
21
- });
22
- Object.keys(next).filter(isProperty).filter(isNew(prev, next)).forEach((name) => {
23
- widget[name] = next[name];
24
- });
25
- Object.keys(next).filter(isEvent).filter(isNew(prev, next)).forEach((name) => {
26
- const eventType = getEventName(name);
27
- widget.connect(eventType, next[name]);
28
- });
12
+ widget.freeze_notify();
13
+ try {
14
+ for (const key of Object.keys(prev)) {
15
+ if (INTERNAL_PROP_NAMES.has(key)) continue;
16
+ const isChanged = prev[key] !== next[key];
17
+ const isRemoved = !(key in next);
18
+ if (isEvent(key) && (isRemoved || isChanged)) {
19
+ if (GObject.signal_handlers_disconnect_by_func(widget, prev[key]) === 0) console.warn(`No signal handler found for ${key}`);
20
+ } else if (!isEvent(key) && isRemoved) widget[key] = void 0;
21
+ }
22
+ for (const key of Object.keys(next)) {
23
+ if (INTERNAL_PROP_NAMES.has(key)) continue;
24
+ if (prev[key] === next[key]) continue;
25
+ if (isEvent(key)) widget.connect(getEventName(key), next[key]);
26
+ else widget[key] = next[key];
27
+ }
28
+ } finally {
29
+ widget.thaw_notify();
30
+ }
29
31
  setMetadataFromProps(widget, next);
30
32
  }
31
33
  function getProperties(props) {
32
- return Object.keys(props).filter(isProperty).reduce((acc, key) => {
33
- acc[key] = props[key];
34
- return acc;
35
- }, {});
34
+ return Object.fromEntries(Object.entries(props).filter(([key]) => isProperty(key)));
36
35
  }
37
36
  function getEventListeners(props) {
38
- return Object.keys(props).filter(isEvent).reduce((acc, key) => {
39
- acc[key] = props[key];
40
- return acc;
41
- }, {});
37
+ return Object.fromEntries(Object.entries(props).filter(([key]) => isEvent(key)));
42
38
  }
39
+ const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-?/, "::");
40
+ const isEvent = (key) => key.startsWith("on");
41
+ const isProperty = (key) => !isEvent(key) && !INTERNAL_PROP_NAMES.has(key);
43
42
 
44
43
  //#endregion
45
44
  export { getEventListeners, getEventName, getProperties, updateWidget };
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@peachy/react",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "description": "Run GJS applications with react",
5
+ "license": "MIT",
6
+ "author": "Angelo Verlain <hey@vixalien.com>",
7
+ "files": [
8
+ "dist",
9
+ "tsconfig.json"
10
+ ],
5
11
  "main": "./dist/index.mjs",
6
12
  "exports": {
7
13
  ".": {
@@ -14,26 +20,20 @@
14
20
  },
15
21
  "./tsconfig": "./tsconfig.json"
16
22
  },
17
- "author": "Angelo Verlain <hey@vixalien.com>",
18
23
  "dependencies": {
19
- "@peachy/types": "^2025.1.18",
20
- "react": "^19.2.3",
24
+ "@peachy/types": "^0.0.0-girgen.2",
25
+ "react": "^19.2.4",
21
26
  "react-reconciler": "^0.33.0",
22
27
  "reflect-metadata": "^0.2.2",
23
- "@peachy/core": "0.0.9"
28
+ "@peachy/core": "0.0.11"
24
29
  },
25
30
  "devDependencies": {
26
- "@types/node": "^25.0.9",
27
- "@types/react": "^19.2.8",
28
- "@types/react-reconciler": "^0.32.3",
29
- "tsdown": "0.20.0-beta.4",
31
+ "@types/node": "^25.2.1",
32
+ "@types/react": "^19.2.13",
33
+ "@types/react-reconciler": "^0.33.0",
34
+ "tsdown": "0.20.3",
30
35
  "typescript": "^5.9.3"
31
36
  },
32
- "files": [
33
- "dist",
34
- "tsconfig.json"
35
- ],
36
- "license": "MIT",
37
37
  "scripts": {
38
38
  "build": "tsdown"
39
39
  },
package/tsconfig.json CHANGED
@@ -2,13 +2,17 @@
2
2
  "extends": "@peachy/core/tsconfig",
3
3
  "compilerOptions": {
4
4
  "jsx": "react-jsx",
5
- "jsxImportSource": "@peachy/react",
5
+ "jsxImportSource": "@peachy/react"
6
6
  },
7
7
  "include": [
8
8
  // when installed locally
9
9
  "./node_modules/@peachy/types/types/index.d.ts",
10
+ "./node_modules/@peachy/core/node_modules/@peachy/plugin-resources/src/modules.d.ts",
11
+ "./node_modules/@peachy/core/node_modules/@peachy/plugin-css/src/modules.d.ts",
10
12
  // when installed via npm/pnpm
11
13
  "../types/types/index.d.ts",
12
- "${configDir}/src/**/*",
13
- ],
14
+ "../plugin-resources/src/modules.d.ts",
15
+ "../plugin-css/src/modules.d.ts",
16
+ "${configDir}/src/**/*"
17
+ ]
14
18
  }