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

merge(0.4): merge feat/v0.4 to main
guocaoyi · Jul 6, 2022 · fbdff26 · fbdff26
2 parents e7c9989 + 85bac92
commit fbdff26
Show file tree

Hide file tree

Showing 149 changed files with 1,735 additions and 188 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,9 +1,18 @@
+# OS
+.DS_Store
+
+# debug & development
 __tests__
+*.spec.ts
+*.test.ts
+
+# npm
 node_modules
 yarn.lock
 package-lock.json
 pnpm-lock.yaml
+*.log
 
+# others
 .gitignore
-.DS_Store
-*.log
+.gitattributes
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,13 +2,20 @@
 
 ```txt
 Summary
-  1. this document follow SemVer2.0 protocol
-  2. use a PATCH for release version, also includes beta\alpha\rc
+  1. document grouping follow 'SemVer2.0' protocol
+  2. use 'PATCH' as a minimum granularity
   3. use concise descriptions
-  4. type: feat\fix\update\perf\remove\other
-  5. version stamp follow the yyyy.MM.dd format
+  4. type: feat \ fix \ update \ perf \ remove \ docs \ chore
+  5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.4.0 [2022.07.06]
+
+- feat: add inferno framework templates
+- perf: update mustache CHANGELOG, README, DOCS, add tags & keywords
+- perf: cli framework selection use colors, and sorted by total ranking
+- docs: preview use code image replace screenshot
+
 ## 0.3.0 [2022.07.02]
 
 - feat: add solid framework templates

diff --git a/README.md b/README.md
@@ -1,16 +1,18 @@
 # 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)
 ![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
+> Generating your chrome extension, multiple boilerplates supported!
 
-- ⚡️ Lightning Fast HMR(use vite2)
-- 🗂 Multiple Framework Support
-- 📦 Optimized Builds
-- 📚 Documentation
+- 🚀 Lightning Fast HMR(use [Vite2](https://vitejs.dev))
+- 🥡 Out of Box
+- 🌈 Multiple Frontend Framework Supported(8+)
+- 🥢 Multiple Language Supported(TypeScript & JavaScript)
+- 🧶 Optimized Builds
 
 ## Installing
 
@@ -69,15 +71,16 @@ framework presets include:
 - [React](https://reactjs.org/)
 - [Vue](https://vuejs.org/)
 - [Svelte](https://svelte.dev/)
-- [Solid](https://www.solidjs.com/)
 - [Preact](https://preactjs.com/)
+- [Solid](https://www.solidjs.com/)
 - [Lit](https://lit.dev/)
+- [Inferno](https://www.infernojs.org/)
 - [Vanilla](http://vanilla-js.com/)
 
 languages presets include:
 
-- JavaScript
-- TypeScript
+- [JavaScript](https://www.javascript.com/)
+- [TypeScript](https://www.typescriptlang.org/)
 
 ## Preview
 

diff --git a/docs/crx-build.png b/docs/crx-build.png
diff --git a/docs/crx-install.png b/docs/crx-install.png
diff --git a/docs/crx-run.png b/docs/crx-run.png
diff --git a/index.js b/index.js
@@ -7,132 +7,148 @@ import minimist from 'minimist'
 import prompts from 'prompts'
 import mustache from 'mustache'
 import { fileURLToPath } from 'url'
-import {
-  blue,
-  lightBlue,
-  yellow,
-  lightYellow,
-  magenta,
-  green,
-  red,
-  lightCyan,
-  lightRed,
-  reset,
-} from 'kolorist'
+import { red, ansi256, reset } from 'kolorist'
 
 const argv = minimist(process.argv.slice(2), { string: ['_'] })
 const cwd = process.cwd()
 
+/**
+ * sorted by total ranking
+ */
 const Boilerplates = [
   {
-    name: 'react',
-    color: lightCyan,
+    name: 'react', // star:191 wd:15097
+    kolor: ansi256(81),
     variants: [
       {
         name: 'react-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'react-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'vue',
-    color: green,
+    name: 'vue', // star:197 wd:3223
+    kolor: ansi256(36),
     variants: [
       {
         name: 'vue-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'vue-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'solid',
-    color: blue,
+    name: 'svelte', // star:60.3 wd:339
+    kolor: ansi256(203),
     variants: [
       {
-        name: 'solid-js',
+        name: 'svelte-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'solid-ts',
+        name: 'svelte-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'svelte',
-    color: lightRed,
+    name: 'preact', // star:32 wd:1385
+    kolor: ansi256(56),
     variants: [
       {
-        name: 'svelte-js',
+        name: 'preact-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'svelte-ts',
+        name: 'preact-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
+  },
+  {
+    name: 'solid', // star:19.9 wd:30
+    kolor: ansi256(25),
+    variants: [
+      {
+        name: 'solid-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'solid-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'lit',
-    color: lightBlue,
+    name: 'lit', // star:11.9 wd:306
+    kolor: ansi256(43),
     variants: [
       {
         name: 'lit-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'lit-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'preact',
-    color: magenta,
+    name: 'inferno', // star:15.5 wd:88
+    kolor: ansi256(202),
     variants: [
       {
-        name: 'preact-js',
+        name: 'inferno-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'preact-ts',
+        name: 'inferno-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
+  // {
+  //   name: 'alpinejs', // star: wd:93
+  //   color: ansi256(1),
+  // },
+  // {
+  //   name: 'qwik', // star:4.5 wd:0.8
+  //   kolor: ansi256(69),
+  // },
   {
-    name: 'vanilla',
-    color: lightYellow,
+    name: 'vanilla', // star:0 wd:0
+    kolor: ansi256(230),
     variants: [
       {
         name: 'vanilla-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'vanilla-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
@@ -224,7 +240,7 @@ async function init() {
               : reset('Framework:'),
           initial: 0,
           choices: Boilerplates.map((framework) => {
-            const frameworkColor = framework.color
+            const frameworkColor = framework.kolor
             return {
               title: frameworkColor(framework.name),
               value: framework,
@@ -238,7 +254,7 @@ async function init() {
           // @ts-ignore
           choices: (framework) =>
             framework.variants.map((variant) => {
-              const variantColor = variant.color
+              const variantColor = variant.kolor
               return {
                 title: variantColor(variant.name),
                 value: variant.name,
@@ -271,7 +287,7 @@ async function init() {
   // determine template
   template = variant || framework || template
 
-  console.log(`\nScaffolding project in ${root}...`)
+  console.log(`\nGenerating project in ${root}...`)
 
   // template boilerplate
   const templateDir = path.resolve(fileURLToPath(import.meta.url), '..', `template-${template}`)
@@ -286,6 +302,7 @@ async function init() {
     now: new Date().format('yyyy.MM.dd'),
     //@ts-ignore
     nowYear: new Date().format('yyyy'),
+    framework: (framework.name || '').replace(/\S/, (str) => str.toUpperCase()),
   }
 
   const write = (file, content) => {

diff --git a/__tests__/cli.spec.ts → index.spec.ts b/__tests__/cli.spec.ts → index.spec.ts
@@ -77,7 +77,7 @@ test('successfully scaffolds a project based on vue starter template', () => {
   const generatedFiles = readdirSync(genPath).sort()
 
   // Assertions
-  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+  expect(stdout).toContain(`Generating project in ${genPath}`)
   expect(templateFiles).toEqual(generatedFiles)
 })
 
@@ -88,6 +88,6 @@ test('works with the -t alias', () => {
   const generatedFiles = readdirSync(genPath).sort()
 
   // Assertions
-  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+  expect(stdout).toContain(`Generating project in ${genPath}`)
   expect(templateFiles).toEqual(generatedFiles)
 })
diff --git a/mustache/CHANGELOG.md.mustache b/mustache/CHANGELOG.md.mustache
@@ -1,15 +1,15 @@
 # CHANGELOG
 
 ```txt
-Summary:
-  1. this document follow SemVer2.0
-  2. use a PATCH for release version, also includes beta\alpha\rc
+Summary
+  1. document grouping follow 'SemVer2.0' protocol
+  2. use 'PATCH' as a minimum granularity
   3. use concise descriptions
-  4. type: feat\fix\update\perf\remove\other
-  5. version stamp follow the yyyy.MM.dd format
+  4. type: feat \ fix \ update \ perf \ remove \ docs \ chore
+  5. version timestamp follow the yyyy.MM.dd format
 ```
 
 ## 0.0.0 [{{ now }}]
 
 - feat: initial
-- feat: generator by create-chrome-ext
+- feat: generator by ![create-chrome-ext](https://www.npmjs.com/package/create-chrome-ext)