feat(template):add solidjs framework

.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,10 +1,11 @@
-# Create Chrome Ext (CRX)
+# Create Chrome Ext (.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)
+![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Fwithout_horn)
 
 > Next generation chrome extension generater
 
@@ -67,20 +68,18 @@ run:
 
 template presets include:
 
-- `lit-js`
-- `lit-ts`
-- `preact-js`
-- `preact-ts`
-- `react-js`
-- `react-ts`
-- `svelte-js`
-- `svelte-ts`
-- `vanilla-js`
-- `vanilla-ts`
-- `vue-js`
-- `vue-ts`
-
-You can use `.` for the project name to scaffold in the current directory.
+- [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/)
+
+languages presets include:
+
+- JavaScript
+- TypeScript
 
 ## Preview
 

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

@@ -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 {}

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

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

template-solid-js/src/manifest.js

@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  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: [],
+})

template-solid-js/src/options/Options.jsx

@@ -0,0 +1,23 @@
+import { createSignal } from 'solid-js'
+
+import './Options.module.css'
+
+/**
+ * Options component.
+ */
+export const Options = () => {
+  const [crx] = createSignal('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 {crx}
+      </a>
+    </main>
+  )
+}
+
+export default Options