Use object keys for setting names

api.cpp

@@ -74,7 +74,7 @@ class Context {
       GPPWidget config(
           GPP_CALL(CameraWidget *,
                    gp_camera_get_config(camera.get(), _, context.get())));
-      return walk_config(config.get());
+      return walk_config(config.get()).second;
     });
   }
 
@@ -170,10 +170,11 @@ class Context {
   gpp_unique_ptr<Camera, gp_camera_unref> camera;
   gpp_unique_ptr<GPContext, gp_context_unref> context;
 
-  static val walk_config(CameraWidget *widget) {
+  static std::pair<val, val> walk_config(CameraWidget *widget) {
     val result = val::object();
 
-    result.set("name", GPP_CALL(const char *, gp_widget_get_name(widget, _)));
+    val name(GPP_CALL(const char *, gp_widget_get_name(widget, _)));
+    result.set("name", name);
     result.set("info", GPP_CALL(const char *, gp_widget_get_info(widget, _)));
     result.set("label", GPP_CALL(const char *, gp_widget_get_label(widget, _)));
     result.set("readonly",
@@ -227,11 +228,12 @@ class Context {
       case GP_WIDGET_SECTION: {
         result.set("type", type == GP_WIDGET_WINDOW ? "window" : "section");
 
-        val children = val::array();
+        val children = val::object();
         for (int i = 0, n = gp_widget_count_children(widget); i < n; i++) {
           auto child =
               GPP_CALL(CameraWidget *, gp_widget_get_child(widget, i, _));
-          children.call<void>("push", walk_config(child));
+          auto kv = walk_config(child);
+          children.set(kv.first, kv.second);
         }
         result.set("children", children);
 
@@ -242,7 +244,7 @@ class Context {
       }
     }
 
-    return result;
+    return {name, result};
   }
 };
 

ui.html

@@ -14,10 +14,23 @@
     style="max-height: 100%; overflow-y: auto"
   ></div>
 </div>
+<script type="importmap">
+{
+  "imports": {
+    "preact": "https://unpkg.com/preact/dist/preact.module.js",
+    "preact/debug": "https://unpkg.com/preact/debug/dist/debug.module.js",
+    "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js"
+  }
+}
+</script>
 <script type="module">
-  import { h, render, Component } from 'https://unpkg.com/preact?module';
+  import { h, render, Component } from 'preact';
   import initModule from './libapi.mjs';
 
+  if (new URLSearchParams(location.search).has('debug')) {
+    await import('preact/debug');
+  }
+
   let context;
   let queue = initModule()
     .then(Module => new Module.Context())
@@ -40,10 +53,10 @@
     if (type === 'window' || type === 'section') {
       return h(
         'fieldset',
-        { key: name, id },
+        { id },
         h('legend', {}, label),
-        ...config.children.map(child =>
-          h(Config, { config: child, inProgress })
+        Object.values(config.children).map(config =>
+          h(Config, { key: config.name, config, inProgress })
         )
       );
     }
@@ -92,7 +105,7 @@
     }
     return h(
       'div',
-      { class: 'pure-control-group', key: name },
+      { class: 'pure-control-group' },
       h('label', { for: id }, label),
       inputElem
     );