@peachy/react 0.0.7 → 0.0.9

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 (12) hide show
  1. package/README.md +27 -2
  2. package/dist/extra.d.mts +3 -8
  3. package/dist/extra.mjs +32 -0
  4. package/dist/global.d.mts +9 -1
  5. package/dist/hostconfig.d.mts +7 -0
  6. package/dist/hostconfig.mjs +111 -0
  7. package/dist/index.mjs +2 -106
  8. package/dist/types.d.mts +8 -1
  9. package/dist/utilities/children.mjs +25 -27
  10. package/dist/utilities/diff.mjs +1 -1
  11. package/dist/utilities/extra.mjs +16 -0
  12. package/package.json +3 -2
package/README.md CHANGED
@@ -26,7 +26,6 @@ Then setup your config file
26
26
  "extends": "@peachy/react/tsconfig",
27
27
  "include": ["@peachy/types"]
28
28
  }
29
-
30
29
  ```
31
30
 
32
31
  ## Usage
@@ -73,7 +72,7 @@ app.connect("activate", () => {
73
72
 
74
73
  render(
75
74
  <Button label="Click me!" onClick={() => console.log("Button clicked")} />,
76
- app_window
75
+ app_window,
77
76
  );
78
77
 
79
78
  app_window.present();
@@ -82,6 +81,32 @@ app.connect("activate", () => {
82
81
  app.run([]);
83
82
  ```
84
83
 
84
+ ### Signals
85
+
86
+ To connect signals, you can use the `on` prefix followed by the signal name and detail. For example:
87
+
88
+ > Note: For details, we use one colon (`onNotify:hasFocus`) instead of two colons as is otherwise done in GJS/GObject (`notify::has-focus`).
89
+
90
+ ```tsx
91
+ import Gtk from "gi://Gtk?version=4.0";
92
+ import { render } from "@peachy/react";
93
+
94
+ const Button = () => {
95
+ const onClicked = () => console.log("Button clicked");
96
+ const onFocused = () => console.log("Button focused/unfocused");
97
+
98
+ return (
99
+ <Gtk.Button
100
+ label="Hello World"
101
+ onClicked={onClicked}
102
+ onNotify:hasFocus={onFocused}
103
+ />
104
+ );
105
+ };
106
+
107
+ app.run([]);
108
+ ```
109
+
85
110
  ## References
86
111
 
87
112
  - https://github.com/VisualElectric/pixi-react
package/dist/extra.d.mts CHANGED
@@ -1,11 +1,6 @@
1
- import Gtk from "gi://Gtk?version=4.0";
1
+ import { PeachyExtraMethods } from "./types.mjs";
2
2
 
3
3
  //#region src/extra.d.ts
4
- interface ReactionExtraProps<T extends Gtk.Widget> {
5
- appendChild?(parentInstance: T, child: Gtk.Widget): void;
6
- insertBefore?(parentInstance: T, child: Gtk.Widget, before: Gtk.Widget | null): void;
7
- removeChild?(parentInstance: T, child: Gtk.Widget): void;
8
- }
9
- declare const extraMap: Map<GObject.GType, ReactionExtraProps<Gtk.Widget>>;
4
+ declare const extraMap: Map<GObject.GType, PeachyExtraMethods<Gtk.Widget, {}>>;
10
5
  //#endregion
11
- export { ReactionExtraProps, extraMap };
6
+ export { extraMap };
package/dist/extra.mjs CHANGED
@@ -2,6 +2,18 @@ import { getMetadata } from "./utilities/metadata.mjs";
2
2
  import Gtk from "gi://Gtk?version=4.0";
3
3
 
4
4
  //#region src/extra.ts
5
+ /**
6
+ * GTK has some limitations, so here we try to solve some of them
7
+ *
8
+ * For example, it's not that clear how to add children to an element, every Widget
9
+ * has it's own API, here we map each Object (or an Interface) on how to something
10
+ * for example:
11
+ *
12
+ * - how to append a child to this object
13
+ * - how to remove a child from this object
14
+ * - how to insert a child before another child
15
+ * - how to save/restore state for this object (between updates, not currently saved)
16
+ */
5
17
  let builder;
6
18
  const extraMap = new Map([
7
19
  [Gtk.Buildable.$gtype, { appendChild: (parentInstance, child) => {
@@ -26,6 +38,26 @@ const extraMap = new Map([
26
38
  if (getMetadata(child)?.childType === "overlay") parentInstance.remove_overlay(child);
27
39
  else parentInstance.set_child(null);
28
40
  }
41
+ }],
42
+ [Gtk.ListBox.$gtype, {
43
+ appendChild(parentInstance, child) {
44
+ parentInstance.append(child);
45
+ },
46
+ removeChild(parentInstance, child) {
47
+ parentInstance.remove(child);
48
+ },
49
+ insertBefore(parentInstance, child, sibling) {
50
+ const siblingRow = sibling instanceof Gtk.ListBoxRow ? sibling : sibling.get_ancestor(Gtk.ListBoxRow.$gtype);
51
+ parentInstance.insert(child, siblingRow?.get_index() ?? 0);
52
+ }
53
+ }],
54
+ [Gtk.Editable.$gtype, {
55
+ saveState(instance) {
56
+ return { cursorPosition: instance.get_position() };
57
+ },
58
+ restoreState(instance, state) {
59
+ instance.set_position(state.cursorPosition);
60
+ }
29
61
  }]
30
62
  ]);
31
63
 
package/dist/global.d.mts CHANGED
@@ -1,6 +1,11 @@
1
+ import GObject from "gi://GObject?version=2.0";
1
2
  import { Key, Ref } from "react";
2
3
 
3
4
  //#region src/global.d.ts
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]> };
4
9
  declare global {
5
10
  namespace JSX {
6
11
  interface IntrinsicAttributes {
@@ -8,6 +13,7 @@ declare global {
8
13
  ref?: Ref<any>;
9
14
  key?: Key | null | undefined;
10
15
  }
16
+ type LibraryManagedAttributes<C, Props> = C extends typeof GObject.Object ? Props & SignalProps<InstanceType<C>> : Props;
11
17
  }
12
18
  }
13
19
  declare module "gi://Gtk?version=4.0" {
@@ -33,4 +39,6 @@ declare module "gi://Gtk?version=3.0" {
33
39
  }
34
40
  }
35
41
  }
36
- }
42
+ }
43
+ //#endregion
44
+ export { PascalCase, SignalProps };
package/dist/hostconfig.d.mts ADDED
@@ -0,0 +1,7 @@
1
+ import Gtk from "gi://Gtk?version=4.0";
2
+ import { HostConfig } from "react-reconciler";
3
+
4
+ //#region src/hostconfig.d.ts
5
+ declare const hostConfig: HostConfig<string, Record<string, unknown>, Gtk.Widget, Gtk.Widget, Gtk.Label, Gtk.Widget, null, any, any, any, any, any, any, any>;
6
+ //#endregion
7
+ export { hostConfig };
package/dist/hostconfig.mjs ADDED
@@ -0,0 +1,111 @@
1
+ import { setMetadataFromProps } from "./utilities/metadata.mjs";
2
+ import { typeMap } from "./type-map.mjs";
3
+ import { appendChild, insertBefore, removeChild } from "./utilities/children.mjs";
4
+ import { getEventListeners, getEventName, getProperties, updateWidget } from "./utilities/diff.mjs";
5
+ import Gtk from "gi://Gtk?version=4.0";
6
+ import GLib from "gi://GLib?version=2.0";
7
+ import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
8
+
9
+ //#region src/hostconfig.ts
10
+ const emptyObject = {};
11
+ let updatePriority = NoEventPriority;
12
+ const hostConfig = {
13
+ appendInitialChild(parentInstance, child) {
14
+ appendChild(parentInstance, child);
15
+ },
16
+ createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
17
+ const klass = typeMap.get(type);
18
+ if (!klass) throw new Error(`Unknown type: ${type}`);
19
+ return new klass(getProperties(props));
20
+ },
21
+ createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
22
+ return Gtk.Label.new(text);
23
+ },
24
+ finalizeInitialChildren(widget, type, props) {
25
+ const events = getEventListeners(props);
26
+ Object.keys(events).forEach((name) => {
27
+ const eventType = getEventName(name);
28
+ widget.connect(eventType, events[name]);
29
+ });
30
+ setMetadataFromProps(widget, props);
31
+ return false;
32
+ },
33
+ getPublicInstance(inst) {
34
+ return inst;
35
+ },
36
+ prepareForCommit(container) {
37
+ return null;
38
+ },
39
+ resetAfterCommit() {},
40
+ getRootHostContext(rootInstance) {
41
+ return emptyObject;
42
+ },
43
+ getChildHostContext(parentHostContext, type) {
44
+ return emptyObject;
45
+ },
46
+ shouldSetTextContent(type, props) {
47
+ return false;
48
+ },
49
+ supportsMutation: true,
50
+ supportsHydration: false,
51
+ supportsPersistence: false,
52
+ supportsMicrotasks: true,
53
+ scheduleTimeout: (fn, delay) => {
54
+ GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
55
+ fn();
56
+ return GLib.SOURCE_REMOVE;
57
+ });
58
+ },
59
+ scheduleMicrotask: (fn) => {
60
+ GLib.idle_add(GLib.PRIORITY_HIGH_IDLE, () => {
61
+ fn();
62
+ return GLib.SOURCE_REMOVE;
63
+ });
64
+ },
65
+ removeChild(parentInstance, child) {
66
+ removeChild(parentInstance, child);
67
+ },
68
+ removeChildFromContainer(parentInstance, child) {
69
+ removeChild(parentInstance, child);
70
+ },
71
+ insertBefore(parentInstance, child, beforeChild) {
72
+ insertBefore(parentInstance, child, beforeChild);
73
+ },
74
+ insertInContainerBefore(parentInstance, child, beforeChild) {
75
+ insertBefore(parentInstance, child, beforeChild);
76
+ },
77
+ clearContainer(container) {},
78
+ appendChild(parentInstance, child) {
79
+ appendChild(parentInstance, child);
80
+ },
81
+ appendChildToContainer(container, child) {
82
+ appendChild(container, child);
83
+ },
84
+ detachDeletedInstance(node) {},
85
+ commitUpdate(widget, type, oldProps, newProps, internalInstanceHandle) {
86
+ updateWidget(widget, oldProps, newProps);
87
+ },
88
+ commitTextUpdate(textInstance, oldText, newText) {
89
+ textInstance.label = newText;
90
+ },
91
+ resolveUpdatePriority: function() {
92
+ if (updatePriority !== NoEventPriority) return updatePriority;
93
+ return DefaultEventPriority;
94
+ },
95
+ setCurrentUpdatePriority: function(newPriority) {
96
+ updatePriority = newPriority;
97
+ },
98
+ getCurrentUpdatePriority: function() {
99
+ return updatePriority;
100
+ },
101
+ resolveEventTimeStamp() {
102
+ return -1.1;
103
+ },
104
+ resolveEventType() {
105
+ return null;
106
+ },
107
+ trackSchedulerEvent() {}
108
+ };
109
+
110
+ //#endregion
111
+ export { hostConfig };
package/dist/index.mjs CHANGED
@@ -1,114 +1,10 @@
1
- import { setMetadataFromProps } from "./utilities/metadata.mjs";
2
1
  import "./global.d.mts";
3
- import { typeMap } from "./type-map.mjs";
4
- import { appendChild, insertBefore, removeChild } from "./utilities/children.mjs";
5
- import { getEventListeners, getEventName, getProperties, updateWidget } from "./utilities/diff.mjs";
6
- import Gtk from "gi://Gtk?version=4.0";
2
+ import { hostConfig } from "./hostconfig.mjs";
7
3
  import "reflect-metadata";
8
- import GLib from "gi://GLib?version=2.0";
9
4
  import Reconciler from "react-reconciler";
10
- import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
11
5
 
12
6
  //#region src/index.ts
13
- const emptyObject = {};
14
- let updatePriority = NoEventPriority;
15
- const reconciler = Reconciler({
16
- appendInitialChild(parentInstance, child) {
17
- appendChild(parentInstance, child);
18
- },
19
- createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
20
- const klass = typeMap.get(type);
21
- if (!klass) throw new Error(`Unknown type: ${type}`);
22
- return new klass(getProperties(props));
23
- },
24
- createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
25
- return Gtk.Label.new(text);
26
- },
27
- finalizeInitialChildren(widget, type, props) {
28
- const events = getEventListeners(props);
29
- Object.keys(events).forEach((name) => {
30
- const eventType = getEventName(name);
31
- widget.connect(eventType, events[name]);
32
- });
33
- setMetadataFromProps(widget, props);
34
- return false;
35
- },
36
- getPublicInstance(inst) {
37
- return inst;
38
- },
39
- prepareForCommit() {
40
- return null;
41
- },
42
- resetAfterCommit() {},
43
- getRootHostContext(rootInstance) {
44
- return emptyObject;
45
- },
46
- getChildHostContext(parentHostContext, type) {
47
- return emptyObject;
48
- },
49
- shouldSetTextContent(type, props) {
50
- return false;
51
- },
52
- supportsMutation: true,
53
- supportsHydration: false,
54
- supportsPersistence: false,
55
- supportsMicrotasks: true,
56
- scheduleTimeout: (fn, delay) => {
57
- GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
58
- fn();
59
- return GLib.SOURCE_REMOVE;
60
- });
61
- },
62
- scheduleMicrotask: (fn) => {
63
- GLib.idle_add(GLib.PRIORITY_HIGH_IDLE, () => {
64
- fn();
65
- return GLib.SOURCE_REMOVE;
66
- });
67
- },
68
- removeChild(parentInstance, child) {
69
- removeChild(parentInstance, child);
70
- },
71
- removeChildFromContainer(parentInstance, child) {
72
- removeChild(parentInstance, child);
73
- },
74
- insertBefore(parentInstance, child, beforeChild) {
75
- insertBefore(parentInstance, child, beforeChild);
76
- },
77
- insertInContainerBefore(parentInstance, child, beforeChild) {
78
- insertBefore(parentInstance, child, beforeChild);
79
- },
80
- clearContainer(container) {},
81
- appendChild(parentInstance, child) {
82
- appendChild(parentInstance, child);
83
- },
84
- appendChildToContainer(container, child) {
85
- appendChild(container, child);
86
- },
87
- detachDeletedInstance(node) {
88
- node.unparent();
89
- },
90
- commitUpdate(widget, type, oldProps, newProps, internalInstanceHandle) {
91
- updateWidget(widget, oldProps, newProps);
92
- },
93
- commitTextUpdate(textInstance, oldText, newText) {},
94
- resolveUpdatePriority: function() {
95
- if (updatePriority !== NoEventPriority) return updatePriority;
96
- return DefaultEventPriority;
97
- },
98
- setCurrentUpdatePriority: function(newPriority) {
99
- updatePriority = newPriority;
100
- },
101
- getCurrentUpdatePriority: function() {
102
- return updatePriority;
103
- },
104
- resolveEventTimeStamp() {
105
- return -1.1;
106
- },
107
- resolveEventType() {
108
- return null;
109
- },
110
- trackSchedulerEvent() {}
111
- });
7
+ const reconciler = Reconciler(hostConfig);
112
8
  const render = (jsx, root, callback) => {
113
9
  const container = reconciler.createContainer(root, 0, null, false, null, "peachy", console.error, console.error, console.error, () => {}, null);
114
10
  reconciler.updateContainer(jsx, container, null, callback);
package/dist/types.d.mts CHANGED
@@ -4,5 +4,12 @@ type Listener = (...args: any[]) => any;
4
4
  interface ReactionMetadata {
5
5
  childType?: string;
6
6
  }
7
+ 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;
11
+ saveState?(instance: T): State;
12
+ restoreState?(instance: T, state: State): void;
13
+ }
7
14
  //#endregion
8
- export { Listener, Props, ReactionMetadata };
15
+ export { Listener, PeachyExtraMethods, Props, ReactionMetadata };
package/dist/utilities/children.mjs CHANGED
@@ -1,43 +1,32 @@
1
- import { extraMap } from "../extra.mjs";
2
- import { getGtype } from "./type.mjs";
3
- import GObject from "gi://GObject?version=2.0";
1
+ import { getExtraMethod } from "./extra.mjs";
4
2
 
5
3
  //#region src/utilities/children.ts
6
- function _appendChildIfPossible(parentInstance, child) {
7
- const gtype = getGtype(parentInstance);
8
- for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
9
- if (props.appendChild) {
10
- props.appendChild(parentInstance, child);
11
- return true;
12
- }
13
- }
4
+ function appendChild(parentInstance, child) {
5
+ const appendChild = getExtraMethod(parentInstance, "appendChild");
6
+ if (appendChild) return appendChild(parentInstance, child);
14
7
  if ("child" in parentInstance) {
15
8
  parentInstance.child = child;
16
- return true;
9
+ return;
17
10
  }
18
11
  if ("content" in parentInstance) {
19
12
  parentInstance.content = child;
20
- return true;
13
+ return;
21
14
  }
22
- return false;
23
- }
24
- function appendChild(parentInstance, child) {
25
- if (_appendChildIfPossible(parentInstance, child)) return;
26
15
  child.set_parent(parentInstance);
27
16
  }
28
17
  function insertBefore(parentInstance, child, sibling) {
29
- const gtype = getGtype(parentInstance);
30
- for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
31
- if (props.insertBefore) return props.insertBefore(parentInstance, child, sibling);
32
- }
33
- if (_appendChildIfPossible(parentInstance, child)) return;
34
- child.insert_before(parentInstance, sibling);
18
+ const insertBefore = getExtraMethod(parentInstance, "insertBefore");
19
+ if (insertBefore) return insertBefore(parentInstance, child, sibling);
20
+ const children = getAllChildren(parentInstance);
21
+ children.forEach((child$1) => removeChild(parentInstance, child$1));
22
+ const childIndex = children.findIndex((c) => c === sibling);
23
+ if (childIndex !== -1) children.splice(childIndex, 0, child);
24
+ else children.push(child);
25
+ children.forEach((child$1) => appendChild(parentInstance, child$1));
35
26
  }
36
27
  function removeChild(parentInstance, child) {
37
- const gtype = getGtype(parentInstance);
38
- for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
39
- if (props.removeChild) return props.removeChild(parentInstance, child);
40
- }
28
+ const removeChild = getExtraMethod(parentInstance, "removeChild");
29
+ if (removeChild) return removeChild(parentInstance, child);
41
30
  if ("child" in parentInstance) {
42
31
  parentInstance.child = null;
43
32
  return;
@@ -48,6 +37,15 @@ function removeChild(parentInstance, child) {
48
37
  }
49
38
  child.unparent();
50
39
  }
40
+ function getAllChildren(parentInstance) {
41
+ const children = [];
42
+ let child = parentInstance.get_first_child();
43
+ while (child) {
44
+ children.push(child);
45
+ child = child.get_next_sibling();
46
+ }
47
+ return children;
48
+ }
51
49
 
52
50
  //#endregion
53
51
  export { appendChild, insertBefore, removeChild };
package/dist/utilities/diff.mjs CHANGED
@@ -7,7 +7,7 @@ const INTERNAL_PROP_NAMES = [
7
7
  "ref",
8
8
  "key"
9
9
  ];
10
- const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-/, "::");
10
+ const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-?/, "::");
11
11
  const isEvent = (key) => key.startsWith("on");
12
12
  const isProperty = (key) => key !== "children" && !isEvent(key) && !INTERNAL_PROP_NAMES.includes(key);
13
13
  const isNew = (prev, next) => (key) => prev[key] !== next[key];
package/dist/utilities/extra.mjs ADDED
@@ -0,0 +1,16 @@
1
+ import { extraMap } from "../extra.mjs";
2
+ import { getGtype } from "./type.mjs";
3
+ import GObject from "gi://GObject?version=2.0";
4
+
5
+ //#region src/utilities/extra.ts
6
+ function getExtraMethod(object, method) {
7
+ const gtype = getGtype(object);
8
+ for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
9
+ const methodImplementation = props[method];
10
+ if (methodImplementation) return methodImplementation;
11
+ }
12
+ return null;
13
+ }
14
+
15
+ //#endregion
16
+ export { getExtraMethod };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@peachy/react",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "Run GJS applications with react",
5
5
  "main": "./dist/index.mjs",
6
6
  "exports": {
@@ -20,9 +20,10 @@
20
20
  "react": "^19.2.3",
21
21
  "react-reconciler": "^0.33.0",
22
22
  "reflect-metadata": "^0.2.2",
23
- "@peachy/core": "0.0.7"
23
+ "@peachy/core": "0.0.9"
24
24
  },
25
25
  "devDependencies": {
26
+ "@types/node": "^25.0.9",
26
27
  "@types/react": "^19.2.8",
27
28
  "@types/react-reconciler": "^0.32.3",
28
29
  "tsdown": "0.20.0-beta.4",