Merge pull request #2 from guocaoyi/feat/v0.3

merge(0.3): merge feat/v0.3 to main

.github/workflows/npm-publish.yml

@@ -1,17 +1,18 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 
-name: NPM Publish
+name: npm-publish
 
 on: [push]
 
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
     steps:
       - name: Logger
         run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
-      
+
       - name: Checkout release branch code
         uses: actions/checkout@v3
         with:
@@ -23,7 +24,7 @@ jobs:
           node-version: 16
           registry-url: https://registry.npmjs.org
 
-      - name: Install  
+      - name: Install
         run: npm install
 
       - name: NPM CI

CHANGELOG.md

@@ -9,6 +9,10 @@ Summary
   5. version stamp follow the yyyy.MM.dd format
 ```
 
+## 0.3.0 [2022.07.02]
+
+- feat: add solid framework templates
+
 ## 0.2.0 [2022.07.01]
 
 - doc: add preview image for useage

README.md

@@ -1,16 +1,15 @@
-# Create Chrome Ext (CRX)
+# Create Chrome Extension (.crx)
 
-[![OSCS Status](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
-[![NPM](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
-[![npm-Download](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![npm-download](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
 ![GitHub Language Count](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
 [![npm publish](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
 
 > Next generation chrome extension generater
 
 - ⚡️ Lightning Fast HMR(use vite2)
-- 📦 Optimized Builds
 - 🗂 Multiple Framework Support
+- 📦 Optimized Builds
 - 📚 Documentation
 
 ## Installing
@@ -65,25 +64,24 @@ run:
 
 ## Supported Templates
 
-template presets include:
+framework presets include:
+
+- [React](https://reactjs.org/)
+- [Vue](https://vuejs.org/)
+- [Svelte](https://svelte.dev/)
+- [Solid](https://www.solidjs.com/)
+- [Preact](https://preactjs.com/)
+- [Lit](https://lit.dev/)
+- [Vanilla](http://vanilla-js.com/)
 
-- `lit-js`
-- `lit-ts`
-- `preact-js`
-- `preact-ts`
-- `react-js`
-- `react-ts`
-- `svelte-js`
-- `svelte-ts`
-- `vanilla-js`
-- `vanilla-ts`
-- `vue-js`
-- `vue-ts`
+languages presets include:
 
-You can use `.` for the project name to scaffold in the current directory.
+- JavaScript
+- TypeScript
 
 ## Preview
 
-![npm-create-cli](./docs/npm-create-cli.png)
-![npm-build](./docs/npm-build.png)
+![crx-run](./docs/crx-run.png)
+![crx-install](./docs/crx-install.png)
+![crx-build](./docs/crx-build.png)
 ![crx-preview](./docs/crx-preview.png)

index.js

@@ -7,63 +7,74 @@ import minimist from 'minimist'
 import prompts from 'prompts'
 import mustache from 'mustache'
 import { fileURLToPath } from 'url'
-import { blue, lightBlue, yellow, cyan, magenta, green, red, reset } from 'kolorist'
+import {
+  blue,
+  lightBlue,
+  yellow,
+  lightYellow,
+  magenta,
+  green,
+  red,
+  lightCyan,
+  lightRed,
+  reset,
+} from 'kolorist'
 
 const argv = minimist(process.argv.slice(2), { string: ['_'] })
 const cwd = process.cwd()
 
 const Boilerplates = [
   {
-    name: 'lit',
-    color: lightBlue,
+    name: 'react',
+    color: lightCyan,
     variants: [
       {
-        name: 'lit-js',
+        name: 'react-js',
         display: 'JavaScript',
         color: yellow,
       },
       {
-        name: 'lit-ts',
+        name: 'react-ts',
         display: 'TypeScript',
         color: blue,
       },
     ],
   },
   {
-    name: 'preact',
-    color: magenta,
+    name: 'vue',
+    color: green,
     variants: [
       {
-        name: 'preact-js',
+        name: 'vue-js',
         display: 'JavaScript',
         color: yellow,
       },
       {
-        name: 'preact-ts',
+        name: 'vue-ts',
         display: 'TypeScript',
         color: blue,
       },
     ],
   },
   {
-    name: 'react',
-    color: cyan,
+    name: 'solid',
+    color: blue,
     variants: [
       {
-        name: 'react-js',
+        name: 'solid-js',
         display: 'JavaScript',
         color: yellow,
       },
       {
-        name: 'react-ts',
+        name: 'solid-ts',
         display: 'TypeScript',
         color: blue,
       },
     ],
   },
   {
     name: 'svelte',
-    color: red,
+    color: lightRed,
     variants: [
       {
         name: 'svelte-js',
@@ -78,32 +89,48 @@ const Boilerplates = [
     ],
   },
   {
-    name: 'vanilla',
-    color: yellow,
+    name: 'lit',
+    color: lightBlue,
     variants: [
       {
-        name: 'vanilla-js',
+        name: 'lit-js',
         display: 'JavaScript',
         color: yellow,
       },
       {
-        name: 'vanilla-ts',
+        name: 'lit-ts',
         display: 'TypeScript',
         color: blue,
       },
     ],
   },
   {
-    name: 'vue',
-    color: green,
+    name: 'preact',
+    color: magenta,
     variants: [
       {
-        name: 'vue-js',
+        name: 'preact-js',
         display: 'JavaScript',
         color: yellow,
       },
       {
-        name: 'vue-ts',
+        name: 'preact-ts',
+        display: 'TypeScript',
+        color: blue,
+      },
+    ],
+  },
+  {
+    name: 'vanilla',
+    color: lightYellow,
+    variants: [
+      {
+        name: 'vanilla-js',
+        display: 'JavaScript',
+        color: yellow,
+      },
+      {
+        name: 'vanilla-ts',
         display: 'TypeScript',
         color: blue,
       },
@@ -139,7 +166,7 @@ async function init() {
   let author = '**'
   let template = argv.template || argv.t
 
-  const defaultTargetDir = 'crx-app'
+  const defaultTargetDir = 'my-crx'
   const getProjectName = () => (targetDir === '.' ? path.basename(path.resolve()) : targetDir)
 
   let result = {}
@@ -314,8 +341,8 @@ async function init() {
 /**
  * @param {string | undefined} targetDir
  */
-function formatTargetDir(targetDir) {
-  return targetDir?.trim().replace(/\/+$/g, '')
+function formatTargetDir(targetDir = '') {
+  return targetDir.trim().replace(/\/+$/g, '')
 }
 
 function copy(src, dest, opts = {}) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Scaffolding Your First Chrome Extension",
   "author": "yalda",
@@ -36,8 +36,8 @@
     "react",
     "vue",
     "svelte",
+    "solidjs",
     "lit",
-    "vanilla",
     "preact"
   ],
   "bugs": {

template-solid-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>Solid + JS + Vite - Options</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.jsx"></script>
+  </body>
+</html>

template-solid-js/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "chrome-ext-starter",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.12",
+    "vite": "^2.9.9",
+    "vite-plugin-solid": "^2.2.6"
+  },
+  "dependencies": {
+    "solid-js": "^1.4.2"
+  }
+}

template-solid-js/popup.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>Solid + TS + Vite - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.jsx"></script>
+  </body>
+</html>

template-solid-js/src/background/index.js

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