diff --git a/CHANGELOG.md b/CHANGELOG.md index 293cc79..3f108f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ Summary 5. version timestamp follow the yyyy.MM.dd format ``` +## 0.5.0 [2022.07.07] + +- feat: add alpine framework templates + ## 0.4.0 [2022.07.06] - feat: add inferno framework templates diff --git a/README.md b/README.md index 3cde54c..f933076 100644 --- a/README.md +++ b/README.md @@ -19,17 +19,14 @@ > Node >= 14.18.0 ```bash -# with npm -λ npm create chrome-ext@latest +# use npm-create command, or use pnpm | yarn +λ npm create chrome-ext -# or with pnpm -λ pnpm create chrome-ext - -# or with yarn -λ yarn create chrome-ext - -# or with npx +# or use npx command λ npx create-chrome-ext + +# or use npm-init command +λ npm init create-chrome-ext ``` ## Usage @@ -50,8 +47,7 @@ You can also directly specify the project name and the template you want to use λ pnpm create chrome-ext my-crx-app --template vanilla-ts ``` -You can also generator the project with `crx` cli. -run: +You can also generator the project with `crx` cli, run: ```bash λ npm install create-chrome-ext --global @@ -68,14 +64,15 @@ run: framework presets include: -- [React](https://reactjs.org/) -- [Vue](https://vuejs.org/) -- [Svelte](https://svelte.dev/) -- [Preact](https://preactjs.com/) -- [Solid](https://www.solidjs.com/) -- [Lit](https://lit.dev/) -- [Inferno](https://www.infernojs.org/) -- [Vanilla](http://vanilla-js.com/) +- [React](https://reactjs.org) +- [Vue](https://vuejs.org) +- [Svelte](https://svelte.dev) +- [Preact](https://preactjs.com) +- [Solid](https://www.solidjs.com) +- [Alpine](https://alpinejs.dev) +- [Lit](https://lit.dev) +- [Inferno](https://www.infernojs.org) +- [Vanilla](http://vanilla-js.com) languages presets include: diff --git a/index.js b/index.js index e3088d3..fcb1415 100755 --- a/index.js +++ b/index.js @@ -97,7 +97,23 @@ const Boilerplates = [ ], }, { - name: 'lit', // star:11.9 wd:306 + name: 'alpine', // star:21.1 wd:93 + kolor: ansi256(116), + variants: [ + { + name: 'inferno-js', + display: 'JavaScript', + kolor: ansi256(226), + }, + { + name: 'inferno-ts', + display: 'TypeScript', + kolor: ansi256(25), + }, + ], + }, + { + name: 'lit', // star:11.9 wd:300 kolor: ansi256(43), variants: [ { @@ -129,10 +145,6 @@ const Boilerplates = [ ], }, // { - // name: 'alpinejs', // star: wd:93 - // color: ansi256(1), - // }, - // { // name: 'qwik', // star:4.5 wd:0.8 // kolor: ansi256(69), // }, diff --git a/package.json b/package.json index ac8874d..bfc5265 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-chrome-ext", - "version": "0.4.0", + "version": "0.5.0", "type": "module", "description": "Generating your chrome extension, multiple boilerplates supported!", "author": "yalda", @@ -19,7 +19,7 @@ "index.js" ], "scripts": { - "fmt": "prettier --write '**/*.{vue,svelte,js,jsx,ts,tsx,json,css,md}'" + "fmt": "prettier --write '**/*.{vue,svelte,html,js,jsx,ts,tsx,json,css,md}'" }, "repository": { "type": "git", @@ -31,11 +31,13 @@ "template", "boilerplate", "create-chrome-ext", + "create-chrome-extension", "react", "vue", "svelte", "preact", "solid", + "alpinejs", "lit", "qwik", "vanilla" diff --git a/template-alpine-js/options.html b/template-alpine-js/options.html new file mode 100644 index 0000000..2f0233f --- /dev/null +++ b/template-alpine-js/options.html @@ -0,0 +1,29 @@ + + + + + + + Chrome Extensioin + Alpine + JS + Vite App - Options + + + +
+

Options Page!

+ +
v 0.0.0
+ + + +
+ + + diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json new file mode 100644 index 0000000..6f79c48 --- /dev/null +++ b/template-alpine-js/package.json @@ -0,0 +1,31 @@ +{ + "name": "chrome-extension-alpine-js", + "version": "0.0.0", + "author": "", + "description": "", + "type": "module", + "license": "MIT", + "keywords": [ + "chrome-extension", + "alpine", + "alpinejs", + "vite", + "create-chrome-ext" + ], + "engines": { + "node": ">=14.18.0" + }, + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "alpinejs": "^3.10.2" + }, + "devDependencies": { + "@types/chrome": "0.0.193", + "@crxjs/vite-plugin": "^1.0.12", + "vite": "^2.9.13" + } +} diff --git a/template-alpine-js/popup.html b/template-alpine-js/popup.html new file mode 100644 index 0000000..5c49fe3 --- /dev/null +++ b/template-alpine-js/popup.html @@ -0,0 +1,29 @@ + + + + + + + Chrome Extensioin + Alpine + JS + Vite App - Popup + + + +
+

Popup Page!

+ +
v 0.0.0
+ + + +
+ + + diff --git a/template-alpine-js/public/common.css b/template-alpine-js/public/common.css new file mode 100644 index 0000000..16a216d --- /dev/null +++ b/template-alpine-js/public/common.css @@ -0,0 +1,59 @@ +: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%; +} + +body { + min-width: 20rem; +} + +: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: #3999b1; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #cccccc; + 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-alpine-js/public/icons/logo.ico b/template-alpine-js/public/icons/logo.ico new file mode 100644 index 0000000..1bc04e1 Binary files /dev/null and b/template-alpine-js/public/icons/logo.ico differ diff --git a/template-alpine-js/public/icons/logo.svg b/template-alpine-js/public/icons/logo.svg new file mode 100644 index 0000000..1fd624b --- /dev/null +++ b/template-alpine-js/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-alpine-js/public/img/logo-128.png b/template-alpine-js/public/img/logo-128.png new file mode 100644 index 0000000..705ba70 Binary files /dev/null and b/template-alpine-js/public/img/logo-128.png differ diff --git a/template-alpine-js/public/img/logo-16.png b/template-alpine-js/public/img/logo-16.png new file mode 100644 index 0000000..841b02f Binary files /dev/null and b/template-alpine-js/public/img/logo-16.png differ diff --git a/template-alpine-js/public/img/logo-34.png b/template-alpine-js/public/img/logo-34.png new file mode 100644 index 0000000..2b83a83 Binary files /dev/null and b/template-alpine-js/public/img/logo-34.png differ diff --git a/template-alpine-js/public/img/logo-48.png b/template-alpine-js/public/img/logo-48.png new file mode 100644 index 0000000..4263555 Binary files /dev/null and b/template-alpine-js/public/img/logo-48.png differ diff --git a/template-alpine-js/src/assets/logo.png b/template-alpine-js/src/assets/logo.png new file mode 100644 index 0000000..7154bf6 Binary files /dev/null and b/template-alpine-js/src/assets/logo.png differ diff --git a/template-alpine-js/src/background/index.js b/template-alpine-js/src/background/index.js new file mode 100644 index 0000000..5d48f65 --- /dev/null +++ b/template-alpine-js/src/background/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-alpine-js background script') + +export {} diff --git a/template-alpine-js/src/content/index.js b/template-alpine-js/src/content/index.js new file mode 100644 index 0000000..fe67a46 --- /dev/null +++ b/template-alpine-js/src/content/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-alpine-js content script') + +export {} diff --git a/template-alpine-js/src/manifest.js b/template-alpine-js/src/manifest.js new file mode 100644 index 0000000..e41ff31 --- /dev/null +++ b/template-alpine-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-alpine-js/src/options/index.js b/template-alpine-js/src/options/index.js new file mode 100644 index 0000000..605069d --- /dev/null +++ b/template-alpine-js/src/options/index.js @@ -0,0 +1,21 @@ +import Alpine from 'alpinejs' + +const dropdown = () => { + return { + show: false, + open() { + this.show = true + }, + close() { + this.show = false + }, + isOpen() { + return this.show === true + }, + } +} + +Reflect.set(window, 'dropdown', dropdown) + +Alpine.start() +window.Alpine = Alpine diff --git a/template-alpine-js/src/popup/index.js b/template-alpine-js/src/popup/index.js new file mode 100644 index 0000000..ff6eb2d --- /dev/null +++ b/template-alpine-js/src/popup/index.js @@ -0,0 +1,15 @@ +import Alpine from 'alpinejs' + +window.Alpine = Alpine + +Alpine.start() + +Alpine.data('dropdown', () => ({ + open: false, + + toggle() { + this.open = !this.open + }, +})) + +console.info('popup index.js loaded') diff --git a/template-alpine-js/vite.config.js b/template-alpine-js/vite.config.js new file mode 100644 index 0000000..4fd4461 --- /dev/null +++ b/template-alpine-js/vite.config.js @@ -0,0 +1,21 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' + +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 })], + } +}) diff --git a/template-alpine-ts/options.html b/template-alpine-ts/options.html new file mode 100644 index 0000000..cf4103a --- /dev/null +++ b/template-alpine-ts/options.html @@ -0,0 +1,29 @@ + + + + + + + Chrome Extensioin + Alpine + TS + Vite App - Options + + + +
+

Options Page!

+ +
v 0.0.0
+ + + +
+ + + diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json new file mode 100644 index 0000000..a2ad74d --- /dev/null +++ b/template-alpine-ts/package.json @@ -0,0 +1,32 @@ +{ + "name": "chrome-extension-alpine-ts", + "version": "0.0.0", + "author": "", + "description": "", + "type": "module", + "license": "MIT", + "keywords": [ + "chrome-extension", + "alpine", + "alpinejs", + "vite", + "create-chrome-ext" + ], + "engines": { + "node": ">=14.18.0" + }, + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "alpinejs": "^3.10.2" + }, + "devDependencies": { + "@types/chrome": "0.0.193", + "@crxjs/vite-plugin": "^1.0.12", + "typescript": "^4.6.4", + "vite": "^2.9.13" + } +} diff --git a/template-alpine-ts/popup.html b/template-alpine-ts/popup.html new file mode 100644 index 0000000..75dd689 --- /dev/null +++ b/template-alpine-ts/popup.html @@ -0,0 +1,29 @@ + + + + + + + Chrome Extensioin + Alpine + TS + Vite App - Popup + + + +
+

Popup Page!

+ +
v 0.0.0
+ + + +
+ + + diff --git a/template-alpine-ts/public/common.css b/template-alpine-ts/public/common.css new file mode 100644 index 0000000..16a216d --- /dev/null +++ b/template-alpine-ts/public/common.css @@ -0,0 +1,59 @@ +: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%; +} + +body { + min-width: 20rem; +} + +: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: #3999b1; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #cccccc; + 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-alpine-ts/public/icons/logo.ico b/template-alpine-ts/public/icons/logo.ico new file mode 100644 index 0000000..1bc04e1 Binary files /dev/null and b/template-alpine-ts/public/icons/logo.ico differ diff --git a/template-alpine-ts/public/icons/logo.svg b/template-alpine-ts/public/icons/logo.svg new file mode 100644 index 0000000..1fd624b --- /dev/null +++ b/template-alpine-ts/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-alpine-ts/public/img/logo-128.png b/template-alpine-ts/public/img/logo-128.png new file mode 100644 index 0000000..705ba70 Binary files /dev/null and b/template-alpine-ts/public/img/logo-128.png differ diff --git a/template-alpine-ts/public/img/logo-16.png b/template-alpine-ts/public/img/logo-16.png new file mode 100644 index 0000000..841b02f Binary files /dev/null and b/template-alpine-ts/public/img/logo-16.png differ diff --git a/template-alpine-ts/public/img/logo-34.png b/template-alpine-ts/public/img/logo-34.png new file mode 100644 index 0000000..2b83a83 Binary files /dev/null and b/template-alpine-ts/public/img/logo-34.png differ diff --git a/template-alpine-ts/public/img/logo-48.png b/template-alpine-ts/public/img/logo-48.png new file mode 100644 index 0000000..4263555 Binary files /dev/null and b/template-alpine-ts/public/img/logo-48.png differ diff --git a/template-alpine-ts/src/assets/logo.png b/template-alpine-ts/src/assets/logo.png new file mode 100644 index 0000000..7154bf6 Binary files /dev/null and b/template-alpine-ts/src/assets/logo.png differ diff --git a/template-alpine-ts/src/background/index.ts b/template-alpine-ts/src/background/index.ts new file mode 100644 index 0000000..c92ca7e --- /dev/null +++ b/template-alpine-ts/src/background/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-alpine-ts background script') + +export {} diff --git a/template-alpine-ts/src/content/index.ts b/template-alpine-ts/src/content/index.ts new file mode 100644 index 0000000..c2d95fe --- /dev/null +++ b/template-alpine-ts/src/content/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-alpine-ts content script') + +export {} diff --git a/template-alpine-ts/src/manifest.ts b/template-alpine-ts/src/manifest.ts new file mode 100644 index 0000000..3c64c7b --- /dev/null +++ b/template-alpine-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-alpine-ts/src/options/index.ts b/template-alpine-ts/src/options/index.ts new file mode 100644 index 0000000..d41a043 --- /dev/null +++ b/template-alpine-ts/src/options/index.ts @@ -0,0 +1,5 @@ +import Alpine from 'alpinejs' + +window.Alpine = Alpine + +Alpine.start() diff --git a/template-alpine-ts/src/popup/index.ts b/template-alpine-ts/src/popup/index.ts new file mode 100644 index 0000000..d41a043 --- /dev/null +++ b/template-alpine-ts/src/popup/index.ts @@ -0,0 +1,5 @@ +import Alpine from 'alpinejs' + +window.Alpine = Alpine + +Alpine.start() diff --git a/template-alpine-ts/tsconfig.json b/template-alpine-ts/tsconfig.json new file mode 100644 index 0000000..09cffe3 --- /dev/null +++ b/template-alpine-ts/tsconfig.json @@ -0,0 +1,20 @@ +{ + "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 + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/template-alpine-ts/tsconfig.node.json b/template-alpine-ts/tsconfig.node.json new file mode 100644 index 0000000..65dbdb9 --- /dev/null +++ b/template-alpine-ts/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node" + }, + "include": ["vite.config.ts"] +} diff --git a/template-alpine-ts/vite.config.ts b/template-alpine-ts/vite.config.ts new file mode 100644 index 0000000..73dce18 --- /dev/null +++ b/template-alpine-ts/vite.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' + +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 })], + } +}) diff --git a/template-solid-js/package.json b/template-solid-js/package.json index 2e59efa..e940491 100644 --- a/template-solid-js/package.json +++ b/template-solid-js/package.json @@ -24,7 +24,7 @@ "devDependencies": { "@crxjs/vite-plugin": "^1.0.12", "prettier": "^2.7.1", - "vite": "^2.9.9", + "vite": "^2.9.13", "vite-plugin-solid": "^2.2.6" }, "dependencies": { diff --git a/template-svelte-ts/package.json b/template-svelte-ts/package.json index 79d084d..ca57a74 100755 --- a/template-svelte-ts/package.json +++ b/template-svelte-ts/package.json @@ -23,6 +23,7 @@ "dependencies": {}, "devDependencies": { "@crxjs/vite-plugin": "^1.0.12", + "@types/chrome": "^0.0.193", "@sveltejs/vite-plugin-svelte": "1.0.0-next.49", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", @@ -30,6 +31,6 @@ "svelte-preprocess": "^4.9.8", "tslib": "^2.3.1", "typescript": "^4.5.4", - "vite": "^2.9.9" + "vite": "^2.9.13" } }