feat(temp):add alpine, @types/chrome for definition

guocaoyi · Jul 7, 2022 · 1c2f9b2 · 1c2f9b2
1 parent fbdff26
commit 1c2f9b2
Show file tree

Hide file tree

Showing 44 changed files with 502 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,11 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.5.0 [2022.07.xx]
+
+- feat: add alpine framework templates
+- update: add @types/chrome for definitions
+
 ## 0.4.0 [2022.07.06]
 
 - feat: add inferno framework templates

diff --git a/README.md b/README.md
@@ -19,17 +19,14 @@
 > Node >= 14.18.0
 
 ```bash
-# with npm
-λ npm create chrome-ext@latest
+# use npm-create command, or use pnpm | yarn
+λ npm create chrome-ext
 
-# or with pnpm
-λ pnpm create chrome-ext
-
-# or with yarn
-λ yarn create chrome-ext
-
-# or with npx
+# or use npx command
 λ npx create-chrome-ext
+
+# or use npm-init command
+λ npm init create-chrome-ext
 ```
 
 ## Usage
@@ -50,8 +47,7 @@ You can also directly specify the project name and the template you want to use
 λ pnpm create chrome-ext my-crx-app --template vanilla-ts
 ```
 
-You can also generator the project with `crx` cli.
-run:
+You can also generator the project with `crx` cli, run:
 
 ```bash
 λ npm install create-chrome-ext --global
@@ -68,14 +64,15 @@ run:
 
 framework presets include:
 
-- [React](https://reactjs.org/)
-- [Vue](https://vuejs.org/)
-- [Svelte](https://svelte.dev/)
-- [Preact](https://preactjs.com/)
-- [Solid](https://www.solidjs.com/)
-- [Lit](https://lit.dev/)
-- [Inferno](https://www.infernojs.org/)
-- [Vanilla](http://vanilla-js.com/)
+- [React](https://reactjs.org)
+- [Vue](https://vuejs.org)
+- [Svelte](https://svelte.dev)
+- [Preact](https://preactjs.com)
+- [Solid](https://www.solidjs.com)
+- [Lit](https://lit.dev)
+- [Inferno](https://www.infernojs.org)
+- [Alpine](https://alpinejs.dev)
+- [Vanilla](http://vanilla-js.com)
 
 languages presets include:
 

diff --git a/index.js b/index.js
@@ -128,10 +128,22 @@ const Boilerplates = [
       },
     ],
   },
-  // {
-  //   name: 'alpinejs', // star: wd:93
-  //   color: ansi256(1),
-  // },
+  {
+    name: 'alpine', // star: wd:93
+    kolor: ansi256(116),
+    variants: [
+      {
+        name: 'inferno-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'inferno-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
+  },
   // {
   //   name: 'qwik', // star:4.5 wd:0.8
   //   kolor: ansi256(69),

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Generating your chrome extension, multiple boilerplates supported!",
   "author": "yalda",

diff --git a/template-alpine-js/options.html b/template-alpine-js/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Alpine + JS + Vite App - Options</title>
+  </head>
+  <body>
+    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+    <script type="module" src="/src/options/index.js"></script>
+  </body>
+</html>
diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "chrome-extension-alpine-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "alpine",
+    "alpinejs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "alpinejs": "^3.10.2"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.193",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-alpine-js/popup.html b/template-alpine-js/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Alpine + JS + Vite App - Popup</title>
+  </head>
+  <body>
+    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+    <script type="module" src="/src/popup/index.js"></script>
+  </body>
+</html>
diff --git a/template-alpine-js/public/icons/logo.ico b/template-alpine-js/public/icons/logo.ico
diff --git a/template-alpine-js/public/icons/logo.svg b/template-alpine-js/public/icons/logo.svg
diff --git a/template-alpine-js/public/img/logo-128.png b/template-alpine-js/public/img/logo-128.png
diff --git a/template-alpine-js/public/img/logo-16.png b/template-alpine-js/public/img/logo-16.png
diff --git a/template-alpine-js/public/img/logo-34.png b/template-alpine-js/public/img/logo-34.png
diff --git a/template-alpine-js/public/img/logo-48.png b/template-alpine-js/public/img/logo-48.png
diff --git a/template-alpine-js/src/assets/logo.png b/template-alpine-js/src/assets/logo.png
diff --git a/template-alpine-js/src/background/index.js b/template-alpine-js/src/background/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-alpine-js background script')
+
+export {}
diff --git a/template-alpine-js/src/content/index.js b/template-alpine-js/src/content/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-alpine-js content script')
+
+export {}
diff --git a/template-alpine-js/src/manifest.js b/template-alpine-js/src/manifest.js
@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    16: 'img/logo-16.png',
+    32: 'img/logo-34.png',
+    48: 'img/logo-48.png',
+    128: 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.js',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.js'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})
diff --git a/template-alpine-js/src/options/index.css b/template-alpine-js/src/options/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-alpine-js/src/options/index.js b/template-alpine-js/src/options/index.js
@@ -0,0 +1,17 @@
+import Alpine from 'alpinejs'
+
+import './index.css'
+
+window.Alpine = Alpine
+
+Alpine.start()
+
+Alpine.data('dropdown', () => ({
+  open: false,
+
+  toggle() {
+    this.open = !this.open
+  },
+}))
+
+console.info('option index.js loaded')
diff --git a/template-alpine-js/src/popup/index.css b/template-alpine-js/src/popup/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-alpine-js/src/popup/index.js b/template-alpine-js/src/popup/index.js
@@ -0,0 +1,17 @@
+import Alpine from 'alpinejs'
+
+import './index.css'
+
+window.Alpine = Alpine
+
+Alpine.start()
+
+Alpine.data('dropdown', () => ({
+  open: false,
+
+  toggle() {
+    this.open = !this.open
+  },
+}))
+
+console.info('popup index.js loaded')
diff --git a/template-alpine-js/vite.config.js b/template-alpine-js/vite.config.js
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import { crx } from '@crxjs/vite-plugin'
+
+import manifest from './src/manifest.js'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+
+    plugins: [crx({ manifest })],
+  }
+})
diff --git a/template-alpine-ts/options.html b/template-alpine-ts/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Alpine + TS + Vite App - Options</title>
+  </head>
+  <body>
+    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+    <script type="module" src="/src/options/index.ts"></script>
+  </body>
+</html>
diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "chrome-extension-alpine-ts",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "alpine",
+    "alpinejs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "alpinejs": "^3.10.2"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.193",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-alpine-ts/popup.html b/template-alpine-ts/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Alpine + TS + Vite App - Popup</title>
+  </head>
+  <body>
+    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+    <script type="module" src="/src/popup/index.ts"></script>
+  </body>
+</html>
diff --git a/template-alpine-ts/public/icons/logo.ico b/template-alpine-ts/public/icons/logo.ico
diff --git a/template-alpine-ts/public/icons/logo.svg b/template-alpine-ts/public/icons/logo.svg
diff --git a/template-alpine-ts/public/img/logo-128.png b/template-alpine-ts/public/img/logo-128.png
diff --git a/template-alpine-ts/public/img/logo-16.png b/template-alpine-ts/public/img/logo-16.png
diff --git a/template-alpine-ts/public/img/logo-34.png b/template-alpine-ts/public/img/logo-34.png
diff --git a/template-alpine-ts/public/img/logo-48.png b/template-alpine-ts/public/img/logo-48.png
diff --git a/template-alpine-ts/src/assets/logo.png b/template-alpine-ts/src/assets/logo.png