guocaoyi · guocaoyi · Oct 14, 2023 · Oct 14, 2023
diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html
@@ -5,12 +5,9 @@
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Lit + TS + Vite App - Popup</title>
-    <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <lit-popup>
-      <h1>Vite + Lit</h1>
-    </lit-popup>
+    <lit-popup></lit-popup>
     <script type="module" src="./src/popup/index.ts"></script>
   </body>
 </html>
diff --git a/template-lit-ts/src/index.css b/template-lit-ts/src/index.css
diff --git a/template-preact-js/devtools.html b/template-preact-js/devtools.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/devtools/index.jsx"></script>
+    <script type="module" src="./src/devtools/index.js"></script>
   </body>
 </html>
diff --git a/template-preact-js/newtab.html b/template-preact-js/newtab.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/newtab/index.jsx"></script>
+    <script type="module" src="./src/newtab/index.js"></script>
   </body>
 </html>
diff --git a/template-preact-js/options.html b/template-preact-js/options.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/options/index.jsx"></script>
+    <script type="module" src="/src/options/index.js"></script>
   </body>
 </html>
diff --git a/template-preact-js/popup.html b/template-preact-js/popup.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/popup/index.jsx"></script>
+    <script type="module" src="/src/popup/index.js"></script>
   </body>
 </html>
diff --git a/template-preact-js/sidepanel.html b/template-preact-js/sidepanel.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/sidepanel/index.jsx"></script>
+    <script type="module" src="/src/sidepanel/index.js"></script>
   </body>
 </html>
diff --git a/template-preact-js/src/devtools/index.jsx → template-preact-js/src/devtools/index.js b/template-preact-js/src/devtools/index.jsx → template-preact-js/src/devtools/index.js
@@ -1,8 +1,8 @@
-import { render } from 'preact'
+import { createElement, render } from 'preact'
 import { DevTools } from './DevTools'
 import './index.css'
 
-render(<DevTools />, document.getElementById('app'))
+render(createElement(DevTools, null), document.getElementById('app'))
 
 chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () {
   console.log('devtools panel create')

diff --git a/template-preact-js/src/newtab/index.js b/template-preact-js/src/newtab/index.js
@@ -0,0 +1,5 @@
+import { Options, render } from 'preact'
+import { NewTab } from './NewTab'
+import './index.css'
+
+render(Options(NewTab, null), document.getElementById('app'))
diff --git a/template-preact-js/src/newtab/index.jsx b/template-preact-js/src/newtab/index.jsx
diff --git a/template-preact-js/src/options/index.js b/template-preact-js/src/options/index.js
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { Options } from './Options'
+import './index.css'
+
+render(createElement(Options, null), document.getElementById('app'))
diff --git a/template-preact-js/src/options/index.jsx b/template-preact-js/src/options/index.jsx
diff --git a/template-preact-js/src/popup/index.js b/template-preact-js/src/popup/index.js
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { Popup } from './Popup'
+import './index.css'
+
+render(createElement(Popup, null), document.getElementById('app'))
diff --git a/template-preact-js/src/popup/index.jsx b/template-preact-js/src/popup/index.jsx
diff --git a/template-preact-js/src/sidepanel/index.js b/template-preact-js/src/sidepanel/index.js
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { SidePanel } from './SidePanel'
+import './index.css'
+
+render(createElement(SidePanel, null), document.getElementById('app'))
diff --git a/template-preact-js/src/sidepanel/index.jsx b/template-preact-js/src/sidepanel/index.jsx
diff --git a/template-preact-ts/devtools.html b/template-preact-ts/devtools.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/devtools/index.tsx"></script>
+    <script type="module" src="./src/devtools/index.ts"></script>
   </body>
 </html>
diff --git a/template-preact-ts/newtab.html b/template-preact-ts/newtab.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/newtab/index.tsx"></script>
+    <script type="module" src="./src/newtab/index.ts"></script>
   </body>
 </html>
diff --git a/template-preact-ts/options.html b/template-preact-ts/options.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/options/index.tsx"></script>
+    <script type="module" src="/src/options/index.ts"></script>
   </body>
 </html>
diff --git a/template-preact-ts/popup.html b/template-preact-ts/popup.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/popup/index.tsx"></script>
+    <script type="module" src="/src/popup/index.ts"></script>
   </body>
 </html>
diff --git a/template-preact-ts/sidepanel.html b/template-preact-ts/sidepanel.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/sidepanel/index.tsx"></script>
+    <script type="module" src="/src/sidepanel/index.ts"></script>
   </body>
 </html>
diff --git a/template-preact-ts/src/devtools/index.tsx → template-preact-ts/src/devtools/index.ts b/template-preact-ts/src/devtools/index.tsx → template-preact-ts/src/devtools/index.ts
@@ -1,8 +1,8 @@
-import { render } from 'preact'
+import { createElement, render } from 'preact'
 import { DevTools } from './DevTools'
 import './index.css'
 
-render(<DevTools />, document.getElementById('app') as HTMLElement)
+render(createElement(DevTools, null), document.getElementById('app') as HTMLElement)
 
 chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () {
   console.log('devtools panel create')

diff --git a/template-preact-ts/src/newtab/index.ts b/template-preact-ts/src/newtab/index.ts
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { NewTab } from './NewTab'
+import './index.css'
+
+render(createElement(NewTab, null), document.getElementById('app') as HTMLElement)
diff --git a/template-preact-ts/src/newtab/index.tsx b/template-preact-ts/src/newtab/index.tsx
diff --git a/template-preact-ts/src/options/index.ts b/template-preact-ts/src/options/index.ts
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { Options } from './Options'
+import './index.css'
+
+render(createElement(Options, null), document.getElementById('app') as HTMLElement)
diff --git a/template-preact-ts/src/options/index.tsx b/template-preact-ts/src/options/index.tsx
diff --git a/template-preact-ts/src/popup/index.ts b/template-preact-ts/src/popup/index.ts
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { Popup } from './Popup'
+import './index.css'
+
+render(createElement(Popup, null), document.getElementById('app') as HTMLElement)
diff --git a/template-preact-ts/src/popup/index.tsx b/template-preact-ts/src/popup/index.tsx
diff --git a/template-preact-ts/src/sidepanel/index.ts b/template-preact-ts/src/sidepanel/index.ts
@@ -0,0 +1,5 @@
+import { createElement, render } from 'preact'
+import { SidePanel } from './SidePanel'
+import './index.css'
+
+render(createElement(SidePanel, null), document.getElementById('app') as HTMLElement)
diff --git a/template-preact-ts/src/sidepanel/index.tsx b/template-preact-ts/src/sidepanel/index.tsx
diff --git a/template-solid-ts/src/manifest.tsx → template-solid-ts/src/manifest.ts b/template-solid-ts/src/manifest.tsx → template-solid-ts/src/manifest.ts
diff --git a/template-stencil-ts/src/components.d.ts b/template-stencil-ts/src/components.d.ts
@@ -4,51 +4,60 @@
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
-  interface OptionsRoot {}
-  interface PopupRoot {}
-  interface SideRoot {}
+    interface OptionsRoot {
+    }
+    interface PopupRoot {
+    }
+    interface SideRoot {
+    }
 }
 declare global {
-  interface HTMLOptionsRootElement extends Components.OptionsRoot, HTMLStencilElement {}
-  var HTMLOptionsRootElement: {
-    prototype: HTMLOptionsRootElement
-    new (): HTMLOptionsRootElement
-  }
-  interface HTMLPopupRootElement extends Components.PopupRoot, HTMLStencilElement {}
-  var HTMLPopupRootElement: {
-    prototype: HTMLPopupRootElement
-    new (): HTMLPopupRootElement
-  }
-  interface HTMLSideRootElement extends Components.SideRoot, HTMLStencilElement {}
-  var HTMLSideRootElement: {
-    prototype: HTMLSideRootElement
-    new (): HTMLSideRootElement
-  }
-  interface HTMLElementTagNameMap {
-    'options-root': HTMLOptionsRootElement
-    'popup-root': HTMLPopupRootElement
-    'side-root': HTMLSideRootElement
-  }
+    interface HTMLOptionsRootElement extends Components.OptionsRoot, HTMLStencilElement {
+    }
+    var HTMLOptionsRootElement: {
+        prototype: HTMLOptionsRootElement;
+        new (): HTMLOptionsRootElement;
+    };
+    interface HTMLPopupRootElement extends Components.PopupRoot, HTMLStencilElement {
+    }
+    var HTMLPopupRootElement: {
+        prototype: HTMLPopupRootElement;
+        new (): HTMLPopupRootElement;
+    };
+    interface HTMLSideRootElement extends Components.SideRoot, HTMLStencilElement {
+    }
+    var HTMLSideRootElement: {
+        prototype: HTMLSideRootElement;
+        new (): HTMLSideRootElement;
+    };
+    interface HTMLElementTagNameMap {
+        "options-root": HTMLOptionsRootElement;
+        "popup-root": HTMLPopupRootElement;
+        "side-root": HTMLSideRootElement;
+    }
 }
 declare namespace LocalJSX {
-  interface OptionsRoot {}
-  interface PopupRoot {}
-  interface SideRoot {}
-  interface IntrinsicElements {
-    'options-root': OptionsRoot
-    'popup-root': PopupRoot
-    'side-root': SideRoot
-  }
-}
-export { LocalJSX as JSX }
-declare module '@stencil/core' {
-  export namespace JSX {
+    interface OptionsRoot {
+    }
+    interface PopupRoot {
+    }
+    interface SideRoot {
+    }
     interface IntrinsicElements {
-      'options-root': LocalJSX.OptionsRoot & JSXBase.HTMLAttributes<HTMLOptionsRootElement>
-      'popup-root': LocalJSX.PopupRoot & JSXBase.HTMLAttributes<HTMLPopupRootElement>
-      'side-root': LocalJSX.SideRoot & JSXBase.HTMLAttributes<HTMLSideRootElement>
+        "options-root": OptionsRoot;
+        "popup-root": PopupRoot;
+        "side-root": SideRoot;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "options-root": LocalJSX.OptionsRoot & JSXBase.HTMLAttributes<HTMLOptionsRootElement>;
+            "popup-root": LocalJSX.PopupRoot & JSXBase.HTMLAttributes<HTMLPopupRootElement>;
+            "side-root": LocalJSX.SideRoot & JSXBase.HTMLAttributes<HTMLSideRootElement>;
+        }
     }
-  }
 }
diff --git a/template-vanilla-js/devtools.html b/template-vanilla-js/devtools.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Vanilla + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/devtools/index.js"></script>
+  </body>
+</html>
diff --git a/template-vanilla-js/newtab.html b/template-vanilla-js/newtab.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Vanilla + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/newtab/index.js"></script>
+  </body>
+</html>
diff --git a/template-vanilla-js/options.html b/template-vanilla-js/options.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vanilla + JS + Vite App - Options</title>
+    <title>Chrome Extension + Vanilla + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-vanilla-js/popup.html b/template-vanilla-js/popup.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vanilla + JS + Vite App - Popup</title>
+    <title>Chrome Extension + Vanilla + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-vanilla-js/sidepanel.html b/template-vanilla-js/sidepanel.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vanilla + JS + Vite App - Side Panel</title>
+    <title>Chrome Extension + Vanilla + JS</title>
   </head>
   <body>
     <div id="app"></div>