@jsenv/navi 0.10.1 → 0.11.0

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 (207) hide show
  1. package/dist/jsenv_navi.js +13858 -23295
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +5 -7
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -177
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
@@ -1,115 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Action render lazy demo</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative; width: 400px"></div>
11
-
12
- <script type="module" jsenv-type="module/jsx">
13
- import {
14
- resource,
15
- // eslint-disable-next-line no-unused-vars
16
- ActionRenderer,
17
- } from "@jsenv/navi";
18
- import { render } from "preact";
19
-
20
- const PAGE = resource("page", {
21
- idKey: "name",
22
- GET: async ({ name }) => {
23
- await new Promise((resolve) => setTimeout(resolve, 1000));
24
- return {
25
- name,
26
- };
27
- },
28
- });
29
- PAGE.GET_TOTO = PAGE.GET.bindParams(
30
- {
31
- name: "toto",
32
- },
33
- {
34
- renderLoadedAsync: async () => {
35
- // eslint-disable-next-line no-unused-vars
36
- const { Toto } = await import("./toto.jsx");
37
- return () => {
38
- return <Toto />;
39
- };
40
- },
41
- },
42
- );
43
- PAGE.GET_TATA = PAGE.GET.bindParams(
44
- {
45
- name: "tata",
46
- },
47
- {
48
- renderLoadedAsync: async () => {
49
- // eslint-disable-next-line no-unused-vars
50
- const { Tata } = await import("./tata.jsx");
51
- return () => <Tata />;
52
- },
53
- },
54
- );
55
- PAGE.GET_IMPORT_ERROR = PAGE.GET.bindParams(
56
- {
57
- name: "import_error",
58
- },
59
- {
60
- renderLoadedAsync: async () => {
61
- // eslint-disable-next-line import-x/no-unresolved
62
- await import("./not_found.jsx");
63
- return () => "here";
64
- },
65
- },
66
- );
67
-
68
- const activePageName = localStorage.getItem("active_page_name");
69
- if (activePageName) {
70
- PAGE.GET.bindParams({ name: activePageName }).load();
71
- }
72
-
73
- // eslint-disable-next-line no-unused-vars
74
- const App = () => {
75
- return (
76
- <div>
77
- <button
78
- onClick={() => {
79
- PAGE.GET_TOTO.reload();
80
- }}
81
- >
82
- TOTO
83
- </button>
84
- <button
85
- onClick={() => {
86
- PAGE.GET_TATA.reload();
87
- }}
88
- >
89
- TATA
90
- </button>
91
- <button
92
- onClick={() => {
93
- PAGE.GET_IMPORT_ERROR.reload();
94
- }}
95
- >
96
- IMPORT_ERROR
97
- </button>
98
-
99
- <div>
100
- TOTO: <ActionRenderer action={PAGE.GET_TOTO} />
101
- </div>
102
- <div>
103
- TATA: <ActionRenderer action={PAGE.GET_TATA} />
104
- </div>
105
- <div>
106
- IMPORT_ERROR: <ActionRenderer action={PAGE.GET_IMPORT_ERROR} />
107
- </div>
108
- </div>
109
- );
110
- };
111
-
112
- render(<App />, document.querySelector("#root"));
113
- </script>
114
- </body>
115
- </html>
@@ -1,217 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Demo - Garbage collect</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative; width: 400px"></div>
11
- <div id="controls" style="margin-top: 20px">
12
- <button id="createBtn">Create Action + UI</button>
13
- <button id="destroyBtn" disabled>Destroy Action + UI</button>
14
- <button id="gcBtn">Force GC + Check</button>
15
- </div>
16
- <div id="status" style="margin-top: 10px; font-family: monospace"></div>
17
-
18
- <script type="module" jsenv-type="module/jsx">
19
- import { render } from "preact";
20
- import { useState } from "preact/hooks";
21
- import { createAction, useActionStatus } from "@jsenv/navi";
22
-
23
- let currentAction = null;
24
- let actionWeakRef = null;
25
- let componentWeakRef = null;
26
-
27
- const updateStatus = () => {
28
- const statusDiv = document.getElementById("status");
29
- const actionAlive = actionWeakRef?.deref() !== undefined;
30
- const componentAlive = componentWeakRef?.deref() !== undefined;
31
-
32
- statusDiv.innerHTML = `
33
- Action alive: ${actionAlive ? "✅ YES" : "❌ NO"}
34
- Component alive: ${componentAlive ? "✅ YES" : "❌ NO"}
35
- CurrentAction reference: ${currentAction ? "✅ EXISTS" : "❌ NULL"}
36
- `;
37
- };
38
-
39
- // eslint-disable-next-line no-unused-vars
40
- const UsersList = ({ action }) => {
41
- const { matching, data, pending } = useActionStatus(action);
42
-
43
- return (
44
- <div
45
- style={{
46
- border: "1px solid #ccc",
47
- padding: "10px",
48
- margin: "10px 0",
49
- }}
50
- >
51
- <h3>Users List Component</h3>
52
- <details
53
- open={matching}
54
- onToggle={(e) => {
55
- if (e.target.open) {
56
- action.load();
57
- } else {
58
- action.unload();
59
- }
60
- }}
61
- >
62
- <summary>Users {pending ? "(loading...)" : ""}</summary>
63
- <div>{data || "No data"}</div>
64
- </details>
65
- </div>
66
- );
67
- };
68
-
69
- // eslint-disable-next-line no-unused-vars
70
- const App = () => {
71
- const [showUsersList] = useState(false);
72
-
73
- return (
74
- <div>
75
- <h2>Action GC Test</h2>
76
- <p>
77
- Status:{" "}
78
- {showUsersList ? "Component mounted" : "Component unmounted"}
79
- </p>
80
- {showUsersList && currentAction && (
81
- <UsersList action={currentAction} />
82
- )}
83
- </div>
84
- );
85
- };
86
-
87
- // Fonctions de test
88
- const createActionAndUI = () => {
89
- console.log("🏗️ Creating action and UI...");
90
-
91
- // Créer l'action
92
- currentAction = createAction(
93
- () => {
94
- return new Promise((resolve) => {
95
- setTimeout(
96
- () =>
97
- resolve(`Users loaded at ${new Date().toLocaleTimeString()}`),
98
- 1000,
99
- );
100
- });
101
- },
102
- { name: "loadUsersAction" },
103
- );
104
-
105
- // Créer les WeakRef pour le monitoring
106
- actionWeakRef = new WeakRef(currentAction);
107
-
108
- // eslint-disable-next-line no-unused-vars
109
- const AppWithState = () => {
110
- const [showUsersList] = useState(true);
111
-
112
- // eslint-disable-next-line no-unused-vars
113
- const UsersListRef = ({ action }) => {
114
- const component = <UsersList action={action} />;
115
- if (!componentWeakRef) {
116
- componentWeakRef = new WeakRef(component);
117
- }
118
- return component;
119
- };
120
-
121
- return (
122
- <div>
123
- <h2>Action GC Test</h2>
124
- <p>Status: Component mounted</p>
125
- {showUsersList && currentAction && (
126
- <UsersListRef action={currentAction} />
127
- )}
128
- </div>
129
- );
130
- };
131
-
132
- render(<AppWithState />, document.querySelector("#root"));
133
-
134
- document.getElementById("createBtn").disabled = true;
135
- document.getElementById("destroyBtn").disabled = false;
136
-
137
- updateStatus();
138
- };
139
-
140
- const destroyActionAndUI = () => {
141
- console.log("🗑️ Destroying action and UI...");
142
-
143
- // Démonter le composant
144
- render(
145
- <div>
146
- <h2>Action GC Test</h2>
147
- <p>Status: Component unmounted</p>
148
- </div>,
149
- document.querySelector("#root"),
150
- );
151
-
152
- // Supprimer la référence forte à l'action
153
- currentAction = null;
154
-
155
- // Nettoyer localStorage si nécessaire
156
- localStorage.removeItem("load_users");
157
-
158
- document.getElementById("createBtn").disabled = false;
159
- document.getElementById("destroyBtn").disabled = true;
160
-
161
- console.log("🧹 References cleared, action should be eligible for GC");
162
- updateStatus();
163
- };
164
-
165
- const forceGCAndCheck = async () => {
166
- console.log("🔄 Forcing GC...");
167
-
168
- // Forcer le garbage collection (si disponible)
169
- if (window.gc) {
170
- window.gc();
171
- } else {
172
- // Fallback: créer de la pression mémoire
173
- const arrays = [];
174
- for (let i = 0; i < 100; i++) {
175
- arrays.push(new Array(100000).fill(Math.random()));
176
- }
177
- // Laisser les arrays être collectées
178
- arrays.length = 0;
179
- }
180
-
181
- // Attendre un peu pour que le GC ait le temps de s'exécuter
182
- await new Promise((resolve) => setTimeout(resolve, 100));
183
-
184
- updateStatus();
185
-
186
- // Vérifier le résultat
187
- const actionAlive = actionWeakRef?.deref() !== undefined;
188
- const componentAlive = componentWeakRef?.deref() !== undefined;
189
-
190
- if (!actionAlive && !componentAlive) {
191
- console.log(
192
- "✅ SUCCESS: Action and component were garbage collected!",
193
- );
194
- } else {
195
- console.log("❌ ISSUE: Some objects are still alive");
196
- if (actionAlive) console.log(" - Action is still alive");
197
- if (componentAlive) console.log(" - Component is still alive");
198
- }
199
- };
200
-
201
- // Event listeners
202
- document
203
- .getElementById("createBtn")
204
- .addEventListener("click", createActionAndUI);
205
- document
206
- .getElementById("destroyBtn")
207
- .addEventListener("click", destroyActionAndUI);
208
- document
209
- .getElementById("gcBtn")
210
- .addEventListener("click", forceGCAndCheck);
211
-
212
- // Initial render
213
- render(<App />, document.querySelector("#root"));
214
- updateStatus();
215
- </script>
216
- </body>
217
- </html>
@@ -1,240 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Demo - Child Action GC</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative; width: 400px"></div>
11
- <div id="controls" style="margin-top: 20px">
12
- <button id="createBtn">Create Child Action + UI</button>
13
- <button id="destroyBtn" disabled>Destroy Child Action + UI</button>
14
- <button id="gcBtn">Force GC + Check</button>
15
- </div>
16
- <div id="status" style="margin-top: 10px; font-family: monospace"></div>
17
-
18
- <script type="module" jsenv-type="module/jsx">
19
- import { render } from "preact";
20
- import { useState } from "preact/hooks";
21
- import { createAction, useActionStatus } from "@jsenv/navi";
22
-
23
- // Parent action created outside UI (persistent)
24
- const parentAction = createAction(
25
- (params) => {
26
- return new Promise((resolve) => {
27
- setTimeout(
28
- () =>
29
- resolve(
30
- `User ${params.userId} loaded at ${new Date().toLocaleTimeString()}`,
31
- ),
32
- 1000,
33
- );
34
- });
35
- },
36
- { name: "loadUserAction" },
37
- );
38
-
39
- let currentChildAction = null;
40
- let childActionWeakRef = null;
41
- let componentWeakRef = null;
42
-
43
- const updateStatus = () => {
44
- const statusDiv = document.getElementById("status");
45
- const childActionAlive = childActionWeakRef?.deref() !== undefined;
46
- const componentAlive = componentWeakRef?.deref() !== undefined;
47
-
48
- statusDiv.innerHTML = `
49
- Parent Action: ✅ EXISTS (persistent)
50
- Child Action alive: ${childActionAlive ? "✅ YES" : "❌ NO"}
51
- Component alive: ${componentAlive ? "✅ YES" : "❌ NO"}
52
- CurrentChildAction reference: ${currentChildAction ? "✅ EXISTS" : "❌ NULL"}
53
- `;
54
- };
55
-
56
- // eslint-disable-next-line no-unused-vars
57
- const UserProfile = ({ childAction }) => {
58
- const { matching, data, pending } = useActionStatus(childAction);
59
-
60
- return (
61
- <div
62
- style={{
63
- border: "1px solid #ccc",
64
- padding: "10px",
65
- margin: "10px 0",
66
- }}
67
- >
68
- <h3>User Profile Component</h3>
69
- <p>Child Action Name: {childAction.name}</p>
70
- <p>User ID: {childAction.params.userId}</p>
71
- <details
72
- open={matching}
73
- onToggle={(e) => {
74
- if (e.target.open) {
75
- childAction.load();
76
- } else {
77
- childAction.unload();
78
- }
79
- }}
80
- >
81
- <summary>User Profile {pending ? "(loading...)" : ""}</summary>
82
- <div>{data || "No data"}</div>
83
- </details>
84
- </div>
85
- );
86
- };
87
-
88
- // eslint-disable-next-line no-unused-vars
89
- const App = () => {
90
- const [showUserProfile] = useState(false);
91
-
92
- return (
93
- <div>
94
- <h2>Child Action GC Test</h2>
95
- <p>
96
- Status:{" "}
97
- {showUserProfile ? "Component mounted" : "Component unmounted"}
98
- </p>
99
- {showUserProfile && currentChildAction && (
100
- <UserProfile childAction={currentChildAction} />
101
- )}
102
- </div>
103
- );
104
- };
105
-
106
- // Fonctions de test
107
- const createChildActionAndUI = () => {
108
- console.log("🏗️ Creating child action and UI...");
109
- console.log("Parent action:", parentAction.name);
110
-
111
- // Créer l'action enfant via bindParams
112
- currentChildAction = parentAction.bindParams({ userId: 42 });
113
- console.log("Child action created:", currentChildAction.name);
114
-
115
- // Créer les WeakRef pour le monitoring
116
- childActionWeakRef = new WeakRef(currentChildAction);
117
-
118
- // eslint-disable-next-line no-unused-vars
119
- const AppWithState = () => {
120
- const [showUserProfile] = useState(true);
121
-
122
- // eslint-disable-next-line no-unused-vars
123
- const UserProfileRef = ({ childAction }) => {
124
- const component = <UserProfile childAction={childAction} />;
125
- if (!componentWeakRef) {
126
- componentWeakRef = new WeakRef(component);
127
- }
128
- return component;
129
- };
130
-
131
- return (
132
- <div>
133
- <h2>Child Action GC Test</h2>
134
- <p>Status: Component mounted</p>
135
- <p>Parent Action: {parentAction.name}</p>
136
- <p>Child Action: {currentChildAction.name}</p>
137
- {showUserProfile && currentChildAction && (
138
- <UserProfileRef childAction={currentChildAction} />
139
- )}
140
- </div>
141
- );
142
- };
143
-
144
- render(<AppWithState />, document.querySelector("#root"));
145
-
146
- document.getElementById("createBtn").disabled = true;
147
- document.getElementById("destroyBtn").disabled = false;
148
-
149
- updateStatus();
150
- };
151
-
152
- const destroyChildActionAndUI = () => {
153
- console.log("🗑️ Destroying child action and UI...");
154
-
155
- // Démonter le composant
156
- render(
157
- <div>
158
- <h2>Child Action GC Test</h2>
159
- <p>Status: Component unmounted</p>
160
- <p>Parent Action: {parentAction.name} (still exists)</p>
161
- </div>,
162
- document.querySelector("#root"),
163
- );
164
-
165
- // Supprimer la référence forte à l'action enfant
166
- currentChildAction = null;
167
-
168
- document.getElementById("createBtn").disabled = false;
169
- document.getElementById("destroyBtn").disabled = true;
170
-
171
- console.log(
172
- "🧹 Child action reference cleared, should be eligible for GC",
173
- );
174
- console.log("Parent action still exists:", parentAction.name);
175
- updateStatus();
176
- };
177
-
178
- const forceGCAndCheck = async () => {
179
- console.log("🔄 Forcing GC...");
180
-
181
- // Forcer le garbage collection (si disponible)
182
- if (window.gc) {
183
- window.gc();
184
- } else {
185
- // Fallback: créer de la pression mémoire
186
- const arrays = [];
187
- for (let i = 0; i < 100; i++) {
188
- arrays.push(new Array(100000).fill(Math.random()));
189
- }
190
- // Laisser les arrays être collectées
191
- arrays.length = 0;
192
- }
193
-
194
- // Attendre un peu pour que le GC ait le temps de s'exécuter
195
- await new Promise((resolve) => setTimeout(resolve, 100));
196
-
197
- updateStatus();
198
-
199
- // Vérifier le résultat
200
- const childActionAlive = childActionWeakRef?.deref() !== undefined;
201
- const componentAlive = componentWeakRef?.deref() !== undefined;
202
-
203
- console.log("📊 GC Results:");
204
- console.log(
205
- ` Parent Action: ✅ ALIVE (expected - persistent reference)`,
206
- );
207
- console.log(
208
- ` Child Action: ${childActionAlive ? "❌ ALIVE" : "✅ GC'd"}`,
209
- );
210
- console.log(` Component: ${componentAlive ? "❌ ALIVE" : "✅ GC'd"}`);
211
-
212
- if (!childActionAlive && !componentAlive) {
213
- console.log(
214
- "✅ SUCCESS: Child action and component were garbage collected!",
215
- );
216
- console.log("✅ Parent action correctly preserved");
217
- } else {
218
- console.log("❌ ISSUE: Some objects are still alive");
219
- if (childActionAlive) console.log(" - Child action is still alive");
220
- if (componentAlive) console.log(" - Component is still alive");
221
- }
222
- };
223
-
224
- // Event listeners
225
- document
226
- .getElementById("createBtn")
227
- .addEventListener("click", createChildActionAndUI);
228
- document
229
- .getElementById("destroyBtn")
230
- .addEventListener("click", destroyChildActionAndUI);
231
- document
232
- .getElementById("gcBtn")
233
- .addEventListener("click", forceGCAndCheck);
234
-
235
- // Initial render
236
- render(<App />, document.querySelector("#root"));
237
- updateStatus();
238
- </script>
239
- </body>
240
- </html>