feat(temp):add inferno framework, update docs

CHANGELOG.md

@@ -9,9 +9,9 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
-## 0.4.0 [2022.07.05]
+## 0.4.0 [2022.07.06]
 
-- feat: add qwik framework templates
+- 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
 

index.js

@@ -12,60 +12,148 @@ import { red, ansi256, reset } from 'kolorist'
 const argv = minimist(process.argv.slice(2), { string: ['_'] })
 const cwd = process.cwd()
 
-const LangTempw = [
-  {
-    name: 'react-js',
-    display: 'JavaScript',
-    kolor: ansi256(226),
-  },
-  {
-    name: 'react-ts',
-    display: 'TypeScript',
-    kolor: ansi256(25),
-  },
-]
-
+/**
+ * sorted by total ranking
+ */
 const Boilerplates = [
   {
     name: 'react', // star:191 wd:15097
     kolor: ansi256(81),
+    variants: [
+      {
+        name: 'react-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'react-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
   {
     name: 'vue', // star:197 wd:3223
     kolor: ansi256(36),
+    variants: [
+      {
+        name: 'vue-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'vue-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
   {
     name: 'svelte', // star:60.3 wd:339
-    kolor: ansi256(202),
+    kolor: ansi256(203),
+    variants: [
+      {
+        name: 'svelte-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'svelte-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
   {
     name: 'preact', // star:32 wd:1385
     kolor: ansi256(56),
+    variants: [
+      {
+        name: 'preact-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        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',
+        kolor: ansi256(25),
+      },
+    ],
   },
   {
     name: 'lit', // star:11.9 wd:306
     kolor: ansi256(43),
+    variants: [
+      {
+        name: 'lit-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'lit-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
   {
-    name: 'qwik', // star:4.5 wd:822
-    kolor: ansi256(69),
+    name: 'inferno', // star:15.5 wd:88
+    kolor: ansi256(202),
+    variants: [
+      {
+        name: 'inferno-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'inferno-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
   // {
-  //   name: 'alpinejs', // star: wd:9
+  //   name: 'alpinejs', // star: wd:93
   //   color: ansi256(1),
   // },
+  // {
+  //   name: 'qwik', // star:4.5 wd:0.8
+  //   kolor: ansi256(69),
+  // },
   {
     name: 'vanilla', // star:0 wd:0
     kolor: ansi256(230),
+    variants: [
+      {
+        name: 'vanilla-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'vanilla-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
   },
 ]
 
-// .replace(/\S/, str => str.toUpperCase())
-
 const TEMPLATES = Boilerplates.map(
   (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name],
 ).reduce((a, b) => a.concat(b), [])
@@ -199,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}`)
@@ -214,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) => {

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)
 })

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

template-inferno-js/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "chrome-extension-inferno-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "inferno",
+    "infernojs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "inferno": "^8.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.x",
+    "@babel/parser": "7.x",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "vite-plugin-inferno": "0.0.0",
+    "vite": "^2.9.13"
+  }
+}

template-inferno-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>Chrome Extensioin + Inferno + JS + Vite App - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.jsx"></script>
+  </body>
+</html>

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

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

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

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

template-inferno-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: [],
+})

template-inferno-js/src/options/Options.css

@@ -0,0 +1,38 @@
+: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: #d81e06;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Component } from 'inferno'
+import './Options.css'
+
+export class Options extends Component {
+  render() {
+    const crx = '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