feat(side):stencil support side

CHANGELOG.md

@@ -9,6 +9,10 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.8.9 [2023.10.09]
+
+- feat: support side panel for chrome extension(stencil)
+
 ## 0.8.8 [2023.10.08]
 
 - feat: support side panel for chrome extension(alpine \ vanilla \ preact \ svelte \ solid \ inferno \ lit)

template-react-js/package.json

@@ -32,7 +32,6 @@
     "@vitejs/plugin-react": "^1.3.2",
     "glob": "^9.3.0",
     "prettier": "^2.7.1",
-    "vite": "^2.9.13",
-    "vite-plugin-zip-pack": "^1.0.5"
+    "vite": "^2.9.13"
   }
 }

template-react-js/vite.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import { crx } from '@crxjs/vite-plugin'
 import react from '@vitejs/plugin-react'
-import zipPack from 'vite-plugin-zip-pack'
 import manifest from './src/manifest.js'
 import { config } from './src/read_pages_folder.js'
 
@@ -19,17 +18,6 @@ export default defineConfig(({ mode }) => {
       },
     },
 
-    plugins: [
-      crx({ manifest }),
-      react(),
-      zipPack({
-        outDir: `package`,
-        inDir: 'build',
-        // @ts-ignore
-        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
-          manifest.version
-        }.zip`,
-      }),
-    ],
+    plugins: [crx({ manifest }), react()],
   }
 })

template-react-ts/package.json

@@ -34,7 +34,6 @@
     "glob": "^9.2.1",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
-    "vite": "^2.9.13",
-    "vite-plugin-zip-pack": "^1.0.5"
+    "vite": "^2.9.13"
   }
 }

template-react-ts/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import { crx } from '@crxjs/vite-plugin'
 import react from '@vitejs/plugin-react'
-import zipPack from 'vite-plugin-zip-pack'
 
 import manifest from './src/manifest'
 //@ts-ignore
@@ -21,17 +20,6 @@ export default defineConfig(({ mode }) => {
       },
     },
 
-    plugins: [
-      crx({ manifest }),
-      react(),
-      zipPack({
-        outDir: `package`,
-        inDir: 'build',
-        // @ts-ignore
-        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
-          manifest.version
-        }.zip`,
-      }),
-    ],
+    plugins: [crx({ manifest }), react()],
   }
 })

template-stencil-ts/package.json

@@ -15,26 +15,16 @@
     "node": ">=14.18.0"
   },
   "scripts": {
-    "s:build": "stencil build",
-    "s:start": "stencil build --dev --watch --serve",
-    "s:test": "stencil test --spec --e2e",
-    "s:test.watch": "stencil test --spec --e2e --watchAll",
-    "s:generate": "stencil generate",
-    "dev": "vite",
-    "build": "vite build",
-    "build.client": "vite build --outDir server/public",
-    "preview": "vite preview",
-    "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'"
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "@stencil/core": "2.13.0",
-    "@types/chrome": "^0.0.236",
-    "@types/node": "17.0.17",
-    "express": "4.17.2",
-    "prettier": "^2.7.1",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
-    "vite-plugin-zip-pack": "^1.0.5"
+    "@stencil/core": "^4.4.0",
+    "@types/chrome": "^0.0.246",
+    "@types/node": "^20.8.3",
+    "express": "^4.18.2",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2"
   }
 }

template-stencil-ts/src/background/background.ts

@@ -0,0 +1,3 @@
+console.info('chrome-ext template-svelte-ts background script')
+
+export {}

template-stencil-ts/src/components.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * 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";
+export namespace Components {
+    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;
+    }
+}
+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 IntrinsicElements {
+            "options-root": LocalJSX.OptionsRoot & JSXBase.HTMLAttributes<HTMLOptionsRootElement>;
+            "popup-root": LocalJSX.PopupRoot & JSXBase.HTMLAttributes<HTMLPopupRootElement>;
+            "side-root": LocalJSX.SideRoot & JSXBase.HTMLAttributes<HTMLSideRootElement>;
+        }
+    }
+}

template-stencil-ts/src/global/app.css → template-stencil-ts/src/components/options-root/options-root.css

@@ -1,13 +1,3 @@
-/*
-  Global App CSS
-  ----------------------
-  Use this file for styles that should be applied to all components.
-  For example, "font-family" within the "body" selector is a CSS property
-  most apps will want applied to all components.
-
-  Any global CSS variables should also be applied here.
-*/
-
 :root {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
@@ -38,8 +28,38 @@
 
 body {
   min-width: 20rem;
-  margin: 0px;
-  padding: 0px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #5530ff;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #cccccc;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
 }

template-stencil-ts/src/components/app-options/app-options.tsx → template-stencil-ts/src/components/options-root/options-root.tsx

@@ -1,25 +1,23 @@
-import { Component, Prop, h } from '@stencil/core'
+import { Component, h } from '@stencil/core'
 
 @Component({
-  tag: 'app-options',
-  styleUrl: 'app-options.css',
+  tag: 'options-root',
+  styleUrl: 'options-root.css',
+  shadow: true,
 })
-export class AppOptions {
-  @Prop() crx: string = ''
-
+export class OptionsRoot {
   render() {
+    let crx = 'create-chrome-ext'
     return (
       <main>
         <h3>Options Page!</h3>
 
         <h6>v 0.0.0</h6>
 
         <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-          Power by {this.crx}
+          Power by {crx}
         </a>
       </main>
     )
   }
 }
-
-export default AppOptions