Merge pull request #4 from guocaoyi/feat/v0.5

merge(0.5): merge feat/v0.5 to main
guocaoyi · Jul 7, 2022 · fff1b43 · fff1b43
2 parents fbdff26 + b8007e1
commit fff1b43
Show file tree

Hide file tree

Showing 42 changed files with 545 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.5.0 [2022.07.07]
+
+- feat: add alpine framework templates
+
 ## 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)
+- [Alpine](https://alpinejs.dev)
+- [Lit](https://lit.dev)
+- [Inferno](https://www.infernojs.org)
+- [Vanilla](http://vanilla-js.com)
 
 languages presets include:
 

diff --git a/index.js b/index.js
@@ -97,7 +97,23 @@ const Boilerplates = [
     ],
   },
   {
-    name: 'lit', // star:11.9 wd:306
+    name: 'alpine', // star:21.1 wd:93
+    kolor: ansi256(116),
+    variants: [
+      {
+        name: 'inferno-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'inferno-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
+  },
+  {
+    name: 'lit', // star:11.9 wd:300
     kolor: ansi256(43),
     variants: [
       {
@@ -129,10 +145,6 @@ const Boilerplates = [
     ],
   },
   // {
-  //   name: 'alpinejs', // star: wd:93
-  //   color: ansi256(1),
-  // },
-  // {
   //   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",
@@ -19,7 +19,7 @@
     "index.js"
   ],
   "scripts": {
-    "fmt": "prettier --write '**/*.{vue,svelte,js,jsx,ts,tsx,json,css,md}'"
+    "fmt": "prettier --write '**/*.{vue,svelte,html,js,jsx,ts,tsx,json,css,md}'"
   },
   "repository": {
     "type": "git",
@@ -31,11 +31,13 @@
     "template",
     "boilerplate",
     "create-chrome-ext",
+    "create-chrome-extension",
     "react",
     "vue",
     "svelte",
     "preact",
     "solid",
+    "alpinejs",
     "lit",
     "qwik",
     "vanilla"

diff --git a/template-alpine-js/options.html b/template-alpine-js/options.html
@@ -0,0 +1,29 @@
+<!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>
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <main>
+      <h3>Options Page!</h3>
+
+      <h6>v 0.0.0</h6>
+
+      <a
+        href="https://www.npmjs.com/package/create-chrome-ext"
+        target="_blank"
+        x-data="{ crx: '' }"
+        x-text="crx"
+        x-init="() => {
+          crx = 'Power by create-chrome-ext';
+        }"
+      >
+      </a>
+    </main>
+    <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,29 @@
+<!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>
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <main>
+      <h3>Popup Page!</h3>
+
+      <h6>v 0.0.0</h6>
+
+      <a
+        href="https://www.npmjs.com/package/create-chrome-ext"
+        target="_blank"
+        x-data="{ crx: '' }"
+        x-text="crx"
+        x-init="() => {
+          crx = 'Power by create-chrome-ext';
+        }"
+      >
+      </a>
+    </main>
+    <script type="module" src="/src/popup/index.js"></script>
+  </body>
+</html>
diff --git a/template-alpine-js/public/common.css b/template-alpine-js/public/common.css
@@ -0,0 +1,59 @@
+: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%;
+}
+
+body {
+  min-width: 20rem;
+}
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #3999b1;
+  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;
+  }
+}
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.js b/template-alpine-js/src/options/index.js
@@ -0,0 +1,21 @@
+import Alpine from 'alpinejs'
+
+const dropdown = () => {
+  return {
+    show: false,
+    open() {
+      this.show = true
+    },
+    close() {
+      this.show = false
+    },
+    isOpen() {
+      return this.show === true
+    },
+  }
+}
+
+Reflect.set(window, 'dropdown', dropdown)
+
+Alpine.start()
+window.Alpine = Alpine
diff --git a/template-alpine-js/src/popup/index.js b/template-alpine-js/src/popup/index.js
@@ -0,0 +1,15 @@
+import Alpine from 'alpinejs'
+
+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 })],
+  }
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		console.info('chrome-ext template-alpine-js background script')

		export {}