diff --git a/CHANGELOG.md b/CHANGELOG.md index 3085eac..e45c91c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/index.js b/index.js index 8b02443..e3088d3 100755 --- a/index.js +++ b/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) => { diff --git a/index.spec.ts b/index.spec.ts index aaa0f9d..465cc0a 100644 --- a/index.spec.ts +++ b/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/template-inferno-js/options.html b/template-inferno-js/options.html new file mode 100644 index 0000000..6034079 --- /dev/null +++ b/template-inferno-js/options.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extensioin + Inferno + JS + Vite App - Options + + +
+ + + diff --git a/template-inferno-js/package.json b/template-inferno-js/package.json new file mode 100644 index 0000000..15fbc3a --- /dev/null +++ b/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" + } +} diff --git a/template-inferno-js/popup.html b/template-inferno-js/popup.html new file mode 100644 index 0000000..d55009b --- /dev/null +++ b/template-inferno-js/popup.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extensioin + Inferno + JS + Vite App - Popup + + +
+ + + diff --git a/template-inferno-js/public/icons/logo.ico b/template-inferno-js/public/icons/logo.ico new file mode 100644 index 0000000..3efc42b Binary files /dev/null and b/template-inferno-js/public/icons/logo.ico differ diff --git a/template-inferno-js/public/icons/logo.svg b/template-inferno-js/public/icons/logo.svg new file mode 100644 index 0000000..39f0a3b --- /dev/null +++ b/template-inferno-js/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-inferno-js/public/img/logo-128.png b/template-inferno-js/public/img/logo-128.png new file mode 100644 index 0000000..831e55f Binary files /dev/null and b/template-inferno-js/public/img/logo-128.png differ diff --git a/template-inferno-js/public/img/logo-16.png b/template-inferno-js/public/img/logo-16.png new file mode 100644 index 0000000..19e5fdc Binary files /dev/null and b/template-inferno-js/public/img/logo-16.png differ diff --git a/template-inferno-js/public/img/logo-34.png b/template-inferno-js/public/img/logo-34.png new file mode 100644 index 0000000..cfff7cd Binary files /dev/null and b/template-inferno-js/public/img/logo-34.png differ diff --git a/template-inferno-js/public/img/logo-48.png b/template-inferno-js/public/img/logo-48.png new file mode 100644 index 0000000..3afe570 Binary files /dev/null and b/template-inferno-js/public/img/logo-48.png differ diff --git a/template-inferno-js/src/assets/inferno.svg b/template-inferno-js/src/assets/inferno.svg new file mode 100644 index 0000000..daaadfb --- /dev/null +++ b/template-inferno-js/src/assets/inferno.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template-inferno-js/src/assets/logo.png b/template-inferno-js/src/assets/logo.png new file mode 100644 index 0000000..be58bff Binary files /dev/null and b/template-inferno-js/src/assets/logo.png differ diff --git a/template-inferno-js/src/background/index.js b/template-inferno-js/src/background/index.js new file mode 100644 index 0000000..95a1239 --- /dev/null +++ b/template-inferno-js/src/background/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-inferno-js background script') + +export {} diff --git a/template-inferno-js/src/content/index.js b/template-inferno-js/src/content/index.js new file mode 100644 index 0000000..593374c --- /dev/null +++ b/template-inferno-js/src/content/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-inferno-js content script') + +export {} diff --git a/template-inferno-js/src/manifest.js b/template-inferno-js/src/manifest.js new file mode 100644 index 0000000..e41ff31 --- /dev/null +++ b/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: [], +}) diff --git a/template-inferno-js/src/options/Options.css b/template-inferno-js/src/options/Options.css new file mode 100644 index 0000000..da8094d --- /dev/null +++ b/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; + } +} diff --git a/template-inferno-js/src/options/Options.jsx b/template-inferno-js/src/options/Options.jsx new file mode 100644 index 0000000..42b1239 --- /dev/null +++ b/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 ( +
+

Options Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Options diff --git a/template-inferno-js/src/options/index.css b/template-inferno-js/src/options/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-js/src/options/index.css @@ -0,0 +1,30 @@ +: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%; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} + +body { + min-width: 20rem; +} diff --git a/template-inferno-js/src/options/index.jsx b/template-inferno-js/src/options/index.jsx new file mode 100644 index 0000000..518629f --- /dev/null +++ b/template-inferno-js/src/options/index.jsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Options } from './Options' + +render(, document.getElementById('app') ?? document.body) diff --git a/template-inferno-js/src/popup/Popup.css b/template-inferno-js/src/popup/Popup.css new file mode 100644 index 0000000..da8094d --- /dev/null +++ b/template-inferno-js/src/popup/Popup.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; + } +} diff --git a/template-inferno-js/src/popup/Popup.jsx b/template-inferno-js/src/popup/Popup.jsx new file mode 100644 index 0000000..fe6c166 --- /dev/null +++ b/template-inferno-js/src/popup/Popup.jsx @@ -0,0 +1,22 @@ +import { Component } from 'inferno' +import './Popup.css' + +export class Popup extends Component { + render() { + const crx = 'create-chrome-ext' + + return ( +
+

Popup Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Popup diff --git a/template-inferno-js/src/popup/index.css b/template-inferno-js/src/popup/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-js/src/popup/index.css @@ -0,0 +1,30 @@ +: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%; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} + +body { + min-width: 20rem; +} diff --git a/template-inferno-js/src/popup/index.jsx b/template-inferno-js/src/popup/index.jsx new file mode 100644 index 0000000..104418b --- /dev/null +++ b/template-inferno-js/src/popup/index.jsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Popup } from './Popup' + +render(, document.getElementById('app') ?? document.body) diff --git a/template-inferno-js/vite.config.js b/template-inferno-js/vite.config.js new file mode 100644 index 0000000..b9c748f --- /dev/null +++ b/template-inferno-js/vite.config.js @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' +import inferno from 'vite-plugin-inferno' + +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 }), inferno()], + } +}) diff --git a/template-inferno-ts/options.html b/template-inferno-ts/options.html new file mode 100644 index 0000000..539e5b0 --- /dev/null +++ b/template-inferno-ts/options.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extensioin + Inferno + TS + Vite App - Options + + +
+ + + diff --git a/template-inferno-ts/package.json b/template-inferno-ts/package.json new file mode 100644 index 0000000..da33f7e --- /dev/null +++ b/template-inferno-ts/package.json @@ -0,0 +1,34 @@ +{ + "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", + "typescript": "^4.6.4", + "vite": "^2.9.13" + } +} diff --git a/template-inferno-ts/popup.html b/template-inferno-ts/popup.html new file mode 100644 index 0000000..f5acd90 --- /dev/null +++ b/template-inferno-ts/popup.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extensioin + Inferno + TS + Vite App - Popup + + +
+ + + diff --git a/template-inferno-ts/public/icons/logo.ico b/template-inferno-ts/public/icons/logo.ico new file mode 100644 index 0000000..3efc42b Binary files /dev/null and b/template-inferno-ts/public/icons/logo.ico differ diff --git a/template-inferno-ts/public/icons/logo.svg b/template-inferno-ts/public/icons/logo.svg new file mode 100644 index 0000000..39f0a3b --- /dev/null +++ b/template-inferno-ts/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-inferno-ts/public/img/logo-128.png b/template-inferno-ts/public/img/logo-128.png new file mode 100644 index 0000000..831e55f Binary files /dev/null and b/template-inferno-ts/public/img/logo-128.png differ diff --git a/template-inferno-ts/public/img/logo-16.png b/template-inferno-ts/public/img/logo-16.png new file mode 100644 index 0000000..19e5fdc Binary files /dev/null and b/template-inferno-ts/public/img/logo-16.png differ diff --git a/template-inferno-ts/public/img/logo-34.png b/template-inferno-ts/public/img/logo-34.png new file mode 100644 index 0000000..cfff7cd Binary files /dev/null and b/template-inferno-ts/public/img/logo-34.png differ diff --git a/template-inferno-ts/public/img/logo-48.png b/template-inferno-ts/public/img/logo-48.png new file mode 100644 index 0000000..3afe570 Binary files /dev/null and b/template-inferno-ts/public/img/logo-48.png differ diff --git a/template-inferno-ts/src/assets/inferno.svg b/template-inferno-ts/src/assets/inferno.svg new file mode 100644 index 0000000..daaadfb --- /dev/null +++ b/template-inferno-ts/src/assets/inferno.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template-inferno-ts/src/assets/logo.png b/template-inferno-ts/src/assets/logo.png new file mode 100644 index 0000000..be58bff Binary files /dev/null and b/template-inferno-ts/src/assets/logo.png differ diff --git a/template-inferno-ts/src/background/index.ts b/template-inferno-ts/src/background/index.ts new file mode 100644 index 0000000..3220700 --- /dev/null +++ b/template-inferno-ts/src/background/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-inferno-ts background script') + +export {} diff --git a/template-inferno-ts/src/content/index.ts b/template-inferno-ts/src/content/index.ts new file mode 100644 index 0000000..0f07f2f --- /dev/null +++ b/template-inferno-ts/src/content/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-inferno-ts content script') + +export {} diff --git a/template-inferno-ts/src/global.d.ts b/template-inferno-ts/src/global.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/template-inferno-ts/src/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/template-inferno-ts/src/manifest.ts b/template-inferno-ts/src/manifest.ts new file mode 100644 index 0000000..3c64c7b --- /dev/null +++ b/template-inferno-ts/src/manifest.ts @@ -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.ts', + type: 'module', + }, + content_scripts: [ + { + matches: ['http://*/*', 'https://*/*'], + js: ['src/content/index.ts'], + }, + ], + 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-inferno-ts/src/options/Options.css b/template-inferno-ts/src/options/Options.css new file mode 100644 index 0000000..da8094d --- /dev/null +++ b/template-inferno-ts/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; + } +} diff --git a/template-inferno-ts/src/options/Options.tsx b/template-inferno-ts/src/options/Options.tsx new file mode 100644 index 0000000..42b1239 --- /dev/null +++ b/template-inferno-ts/src/options/Options.tsx @@ -0,0 +1,22 @@ +import { Component } from 'inferno' +import './Options.css' + +export class Options extends Component { + render() { + const crx = 'create-chrome-ext' + + return ( +
+

Options Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Options diff --git a/template-inferno-ts/src/options/index.css b/template-inferno-ts/src/options/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-ts/src/options/index.css @@ -0,0 +1,30 @@ +: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%; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} + +body { + min-width: 20rem; +} diff --git a/template-inferno-ts/src/options/index.tsx b/template-inferno-ts/src/options/index.tsx new file mode 100644 index 0000000..b921d6a --- /dev/null +++ b/template-inferno-ts/src/options/index.tsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Options } from './Options' + +render(, document.getElementById('app')!) diff --git a/template-inferno-ts/src/popup/Popup.css b/template-inferno-ts/src/popup/Popup.css new file mode 100644 index 0000000..da8094d --- /dev/null +++ b/template-inferno-ts/src/popup/Popup.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; + } +} diff --git a/template-inferno-ts/src/popup/Popup.tsx b/template-inferno-ts/src/popup/Popup.tsx new file mode 100644 index 0000000..fe6c166 --- /dev/null +++ b/template-inferno-ts/src/popup/Popup.tsx @@ -0,0 +1,22 @@ +import { Component } from 'inferno' +import './Popup.css' + +export class Popup extends Component { + render() { + const crx = 'create-chrome-ext' + + return ( +
+

Popup Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Popup diff --git a/template-inferno-ts/src/popup/index.css b/template-inferno-ts/src/popup/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-ts/src/popup/index.css @@ -0,0 +1,30 @@ +: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%; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} + +body { + min-width: 20rem; +} diff --git a/template-inferno-ts/src/popup/index.tsx b/template-inferno-ts/src/popup/index.tsx new file mode 100644 index 0000000..73a25cf --- /dev/null +++ b/template-inferno-ts/src/popup/index.tsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Popup } from './Popup' + +render(, document.getElementById('app')!) diff --git a/template-inferno-ts/tsconfig.json b/template-inferno-ts/tsconfig.json new file mode 100644 index 0000000..0a24dec --- /dev/null +++ b/template-inferno-ts/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/template-inferno-ts/tsconfig.node.json b/template-inferno-ts/tsconfig.node.json new file mode 100644 index 0000000..65dbdb9 --- /dev/null +++ b/template-inferno-ts/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node" + }, + "include": ["vite.config.ts"] +} diff --git a/template-inferno-ts/vite.config.ts b/template-inferno-ts/vite.config.ts new file mode 100644 index 0000000..4383e45 --- /dev/null +++ b/template-inferno-ts/vite.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' +import inferno from 'vite-plugin-inferno' + +import manifest from './src/manifest' + +// https://vitejs.dev/config/ +export default defineConfig(({ mode }) => { + return { + build: { + emptyOutDir: true, + outDir: 'build', + rollupOptions: { + output: { + chunkFileNames: 'assets/chunk-[hash].js', + }, + }, + }, + + plugins: [crx({ manifest }), inferno()], + } +}) diff --git a/template-lit-js/options.html b/template-lit-js/options.html index 3bbd8af..f58eac7 100644 --- a/template-lit-js/options.html +++ b/template-lit-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Lit + JS + Vite App - Options diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html index 685d2c3..b4915ce 100644 --- a/template-lit-js/popup.html +++ b/template-lit-js/popup.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Lit + JS + Vite App - Popup diff --git a/template-lit-ts/options.html b/template-lit-ts/options.html index 288af96..5ac72e0 100644 --- a/template-lit-ts/options.html +++ b/template-lit-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Lit + TS + Vite App - Options diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html index 0a6793b..5f00fe3 100644 --- a/template-lit-ts/popup.html +++ b/template-lit-ts/popup.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Lit + TS + Vite App - Popup diff --git a/template-preact-js/options.html b/template-preact-js/options.html index 256106b..4dbf005 100644 --- a/template-preact-js/options.html +++ b/template-preact-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Preact + JS + Vite App - Options diff --git a/template-preact-ts/options.html b/template-preact-ts/options.html index 1bef303..7e85206 100644 --- a/template-preact-ts/options.html +++ b/template-preact-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Preact + TS + Vite App - Options diff --git a/template-qwik-js/options.html b/template-qwik-js/options.html index 63660a8..0c02c3e 100644 --- a/template-qwik-js/options.html +++ b/template-qwik-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Qwik + JS + Vite App - Options diff --git a/template-qwik-ts/options.html b/template-qwik-ts/options.html index c93a838..895388f 100644 --- a/template-qwik-ts/options.html +++ b/template-qwik-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Qwik + TS + Vite App - Options diff --git a/template-react-js/options.html b/template-react-js/options.html index 24739a9..8ec517c 100644 --- a/template-react-js/options.html +++ b/template-react-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + React + JS + Vite App - Options diff --git a/template-react-ts/options.html b/template-react-ts/options.html index d3c73ce..2083993 100644 --- a/template-react-ts/options.html +++ b/template-react-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + React + TS + Vite App - Options diff --git a/template-svelte-js/options.html b/template-svelte-js/options.html index 2cd947e..23a741f 100644 --- a/template-svelte-js/options.html +++ b/template-svelte-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Svelte + JS + Vite App - Options diff --git a/template-svelte-ts/options.html b/template-svelte-ts/options.html index 2e810bf..b01bb55 100644 --- a/template-svelte-ts/options.html +++ b/template-svelte-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Svelte + TS + Vite App - Options diff --git a/template-vanilla-js/options.html b/template-vanilla-js/options.html index b18ebb1..51b3926 100644 --- a/template-vanilla-js/options.html +++ b/template-vanilla-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Vanilla + JS + Vite App - Options diff --git a/template-vanilla-ts/options.html b/template-vanilla-ts/options.html index 015f115..9b1fe06 100644 --- a/template-vanilla-ts/options.html +++ b/template-vanilla-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Vanilla + TS + Vite App - Options diff --git a/template-vue-js/options.html b/template-vue-js/options.html index 8cc4247..6868cdd 100644 --- a/template-vue-js/options.html +++ b/template-vue-js/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Vue + JS + Vite App - Options diff --git a/template-vue-ts/options.html b/template-vue-ts/options.html index 12ea39f..192beab 100644 --- a/template-vue-ts/options.html +++ b/template-vue-ts/options.html @@ -2,7 +2,7 @@ - + Chrome Extensioin + Vue + TS + Vite App - Options