From 537f1592b15ce59dde99a9e515b16b6b23da0224 Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Tue, 1 Apr 2025 01:46:40 +0900
Subject: [PATCH] no children item

---
 src/devtools.ts |  5 +++--
 src/popup.tsx   |  1 +
 src/sidebar.tsx | 27 +++++++++++++++++++++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/devtools.ts b/src/devtools.ts
index 9781995..0bc2ff8 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -1,7 +1,8 @@
 import browser from "webextension-polyfill";
 
-
 console.log("Hello from devtools!");
-browser.devtools.panels.elements.createSidebarPane("My Sidebar").then((sidebar) => {
+browser.devtools.panels.elements.createSidebarPane("Copy Panel").then((sidebar) => {
     sidebar.setPage("src/sidebar.html");
+}).catch((error) => {
+    console.error("Error creating sidebar:", error);
 });
\ No newline at end of file
diff --git a/src/popup.tsx b/src/popup.tsx
index 8be2629..db74c4e 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import Popup from "./pages/Popup";
 
+console.log("Hello from popup!");
 ReactDOM.createRoot(document.querySelector("#app")!).render(
   <React.StrictMode>
     <Popup />
diff --git a/src/sidebar.tsx b/src/sidebar.tsx
index a3cb30e..282aa5b 100644
--- a/src/sidebar.tsx
+++ b/src/sidebar.tsx
@@ -170,7 +170,7 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "center": "center",
     "cite": "cite",
     "code": "code",
-    "col": "col",
+    // "col": "col",
     "colgroup": "colgroup",
     "data": "data",
     "datalist": "datalist",
@@ -203,7 +203,7 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "i": "i",
     // "iframe": "iframe",
     // "img": "img",
-    "input": "input",
+    // "input": "input",
     "ins": "ins",
     "kbd": "kbd",
     "keygen": "keygen",
@@ -269,12 +269,35 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "wbr": "wbr",
     "webview": "webview",
 }
+const HTMLNonCHildrenComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
+    "input": "input",
+    "img": "img",
+    "meta": "meta",
+    "link": "link",
+    "base": "base",
+    "area": "area",
+    "col": "col",
+    "embed": "embed",
+    "param": "param",
+    "source": "source",
+    "track": "track",
+    "br": "br",
+    "hr": "hr",
+    "wbr": "wbr",
+    "abbr": "abbr",
+}
 
 function VnodeToReact({ vnode }: { vnode: VNode }): React.ReactNode {
     if (vnode.type === "text") {
         return vnode.text;
     }
     else if (vnode.type === "element") {
+        if (HTMLNonCHildrenComponentTable[vnode.tagName]) {
+            const Tag = HTMLNonCHildrenComponentTable[vnode.tagName] ?? "div";
+            const style = vnode.style;
+            
+            return <Tag style={htmlStyleToReactStyle(style)} />;
+        }
         // TODO: support svg
         const Tag = HTMLComponentTable[vnode.tagName] ?? "div";
         const style = vnode.style;