diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 06e51a8..0fb4d7b 100644 --- a/.github/workflows/npm-publish.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index ac4439c..dc7deda 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index c5acb6e..4174027 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index ce2ec4e..c153059 100755 --- a/index.js +++ b/index.js @@ -7,55 +7,66 @@ 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, }, @@ -63,7 +74,7 @@ const Boilerplates = [ }, { 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 = {}) { diff --git a/package.json b/package.json index c7b7c81..75faa4b 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,8 @@ "react", "vue", "svelte", + "solidjs", "lit", - "vanilla", "preact" ], "bugs": { diff --git a/template-solid-js/options.html b/template-solid-js/options.html new file mode 100644 index 0000000..874804f --- /dev/null +++ b/template-solid-js/options.html @@ -0,0 +1,13 @@ + + + + + + + Solid + JS + Vite - Options + + +
+ + + diff --git a/template-solid-js/package.json b/template-solid-js/package.json new file mode 100644 index 0000000..4bfac1c --- /dev/null +++ b/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" + } +} diff --git a/template-solid-js/popup.html b/template-solid-js/popup.html new file mode 100644 index 0000000..c15af1a --- /dev/null +++ b/template-solid-js/popup.html @@ -0,0 +1,13 @@ + + + + + + + Solid + TS + Vite - Popup + + +
+ + + diff --git a/template-solid-js/public/icons/logo.ico b/template-solid-js/public/icons/logo.ico new file mode 100644 index 0000000..ef0a12d Binary files /dev/null and b/template-solid-js/public/icons/logo.ico differ diff --git a/template-solid-js/public/icons/logo.svg b/template-solid-js/public/icons/logo.svg new file mode 100644 index 0000000..5355304 --- /dev/null +++ b/template-solid-js/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-solid-js/public/img/logo-128.png b/template-solid-js/public/img/logo-128.png new file mode 100644 index 0000000..ae96692 Binary files /dev/null and b/template-solid-js/public/img/logo-128.png differ diff --git a/template-solid-js/public/img/logo-16.png b/template-solid-js/public/img/logo-16.png new file mode 100644 index 0000000..e58ecd4 Binary files /dev/null and b/template-solid-js/public/img/logo-16.png differ diff --git a/template-solid-js/public/img/logo-34.png b/template-solid-js/public/img/logo-34.png new file mode 100644 index 0000000..de188ab Binary files /dev/null and b/template-solid-js/public/img/logo-34.png differ diff --git a/template-solid-js/public/img/logo-48.png b/template-solid-js/public/img/logo-48.png new file mode 100644 index 0000000..3445f6c Binary files /dev/null and b/template-solid-js/public/img/logo-48.png differ diff --git a/template-solid-js/src/assets/logo.png b/template-solid-js/src/assets/logo.png new file mode 100644 index 0000000..61f0f20 Binary files /dev/null and b/template-solid-js/src/assets/logo.png differ diff --git a/template-solid-js/src/background/index.js b/template-solid-js/src/background/index.js new file mode 100644 index 0000000..1fd3b47 --- /dev/null +++ b/template-solid-js/src/background/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-svelte-ts background script') + +export {} diff --git a/template-solid-js/src/content/index.js b/template-solid-js/src/content/index.js new file mode 100644 index 0000000..ddfdeb6 --- /dev/null +++ b/template-solid-js/src/content/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-svelte-ts content script') + +export {} diff --git a/template-solid-js/src/manifest.js b/template-solid-js/src/manifest.js new file mode 100644 index 0000000..c18360b --- /dev/null +++ b/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: [], +}) diff --git a/template-solid-js/src/options/Options.jsx b/template-solid-js/src/options/Options.jsx new file mode 100644 index 0000000..8f8c01a --- /dev/null +++ b/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 ( +
+

Options Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Options diff --git a/template-solid-js/src/options/Options.module.css b/template-solid-js/src/options/Options.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-js/src/options/Options.module.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: #142d61; + 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-solid-js/src/options/index.css b/template-solid-js/src/options/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-js/src/options/index.jsx b/template-solid-js/src/options/index.jsx new file mode 100644 index 0000000..d49f7c9 --- /dev/null +++ b/template-solid-js/src/options/index.jsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Options } from './Options' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-js/src/popup/Popup.jsx b/template-solid-js/src/popup/Popup.jsx new file mode 100644 index 0000000..04f4e86 --- /dev/null +++ b/template-solid-js/src/popup/Popup.jsx @@ -0,0 +1,23 @@ +import { createSignal } from 'solid-js' + +import './Popup.module.css' + +/** + * Popup component. + */ +export const Popup = () => { + const [crx] = createSignal('create-chrome-ext') + return ( +
+

Popup Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Popup diff --git a/template-solid-js/src/popup/Popup.module.css b/template-solid-js/src/popup/Popup.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-js/src/popup/Popup.module.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: #142d61; + 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-solid-js/src/popup/index.css b/template-solid-js/src/popup/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-js/src/popup/index.jsx b/template-solid-js/src/popup/index.jsx new file mode 100644 index 0000000..9285dcc --- /dev/null +++ b/template-solid-js/src/popup/index.jsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Popup } from './Popup' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-js/vite.config.js b/template-solid-js/vite.config.js new file mode 100644 index 0000000..cb2c838 --- /dev/null +++ b/template-solid-js/vite.config.js @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' +import solidPlugin from 'vite-plugin-solid' + +import manifest from './src/manifest.js' + +export default defineConfig(({ mode }) => { + return { + build: { + emptyOutDir: true, + outDir: 'build', + target: 'esnext', + polyfillDynamicImport: false, + rollupOptions: { + output: { + chunkFileNames: 'assets/chunk-[hash].js', + }, + }, + }, + plugins: [crx({ manifest }), solidPlugin()], + } +}) diff --git a/template-solid-ts/options.html b/template-solid-ts/options.html new file mode 100644 index 0000000..4ef07b3 --- /dev/null +++ b/template-solid-ts/options.html @@ -0,0 +1,13 @@ + + + + + + + Solid + TS + Vite - Options + + +
+ + + diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json new file mode 100644 index 0000000..10db96a --- /dev/null +++ b/template-solid-ts/package.json @@ -0,0 +1,21 @@ +{ + "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", + "typescript": "^4.6.4", + "vite": "^2.9.9", + "vite-plugin-solid": "^2.2.6" + }, + "dependencies": { + "solid-js": "^1.4.2" + } +} diff --git a/template-solid-ts/popup.html b/template-solid-ts/popup.html new file mode 100644 index 0000000..2721fe8 --- /dev/null +++ b/template-solid-ts/popup.html @@ -0,0 +1,13 @@ + + + + + + + Solid + TS + Vite - Popup + + +
+ + + diff --git a/template-solid-ts/public/icons/logo.ico b/template-solid-ts/public/icons/logo.ico new file mode 100644 index 0000000..ef0a12d Binary files /dev/null and b/template-solid-ts/public/icons/logo.ico differ diff --git a/template-solid-ts/public/icons/logo.svg b/template-solid-ts/public/icons/logo.svg new file mode 100644 index 0000000..5355304 --- /dev/null +++ b/template-solid-ts/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-solid-ts/public/img/logo-128.png b/template-solid-ts/public/img/logo-128.png new file mode 100644 index 0000000..ae96692 Binary files /dev/null and b/template-solid-ts/public/img/logo-128.png differ diff --git a/template-solid-ts/public/img/logo-16.png b/template-solid-ts/public/img/logo-16.png new file mode 100644 index 0000000..e58ecd4 Binary files /dev/null and b/template-solid-ts/public/img/logo-16.png differ diff --git a/template-solid-ts/public/img/logo-34.png b/template-solid-ts/public/img/logo-34.png new file mode 100644 index 0000000..de188ab Binary files /dev/null and b/template-solid-ts/public/img/logo-34.png differ diff --git a/template-solid-ts/public/img/logo-48.png b/template-solid-ts/public/img/logo-48.png new file mode 100644 index 0000000..3445f6c Binary files /dev/null and b/template-solid-ts/public/img/logo-48.png differ diff --git a/template-solid-ts/src/assets/logo.png b/template-solid-ts/src/assets/logo.png new file mode 100644 index 0000000..61f0f20 Binary files /dev/null and b/template-solid-ts/src/assets/logo.png differ diff --git a/template-solid-ts/src/background/index.ts b/template-solid-ts/src/background/index.ts new file mode 100644 index 0000000..1fd3b47 --- /dev/null +++ b/template-solid-ts/src/background/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-svelte-ts background script') + +export {} diff --git a/template-solid-ts/src/content/index.ts b/template-solid-ts/src/content/index.ts new file mode 100644 index 0000000..ddfdeb6 --- /dev/null +++ b/template-solid-ts/src/content/index.ts @@ -0,0 +1,3 @@ +console.info('chrome-ext template-svelte-ts content script') + +export {} diff --git a/template-solid-ts/src/global.d.ts b/template-solid-ts/src/global.d.ts new file mode 100644 index 0000000..54eaa07 --- /dev/null +++ b/template-solid-ts/src/global.d.ts @@ -0,0 +1,3 @@ +/// + +declare const __APP_VERSION__: string diff --git a/template-solid-ts/src/manifest.tsx b/template-solid-ts/src/manifest.tsx new file mode 100644 index 0000000..2df17ce --- /dev/null +++ b/template-solid-ts/src/manifest.tsx @@ -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.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-solid-ts/src/options/Options.module.css b/template-solid-ts/src/options/Options.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-ts/src/options/Options.module.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: #142d61; + 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-solid-ts/src/options/Options.tsx b/template-solid-ts/src/options/Options.tsx new file mode 100644 index 0000000..8f8c01a --- /dev/null +++ b/template-solid-ts/src/options/Options.tsx @@ -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 ( +
+

Options Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Options diff --git a/template-solid-ts/src/options/index.css b/template-solid-ts/src/options/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-ts/src/options/index.tsx b/template-solid-ts/src/options/index.tsx new file mode 100644 index 0000000..d49f7c9 --- /dev/null +++ b/template-solid-ts/src/options/index.tsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Options } from './Options' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-ts/src/popup/Popup.module.css b/template-solid-ts/src/popup/Popup.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-ts/src/popup/Popup.module.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: #142d61; + 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-solid-ts/src/popup/Popup.tsx b/template-solid-ts/src/popup/Popup.tsx new file mode 100644 index 0000000..04f4e86 --- /dev/null +++ b/template-solid-ts/src/popup/Popup.tsx @@ -0,0 +1,23 @@ +import { createSignal } from 'solid-js' + +import './Popup.module.css' + +/** + * Popup component. + */ +export const Popup = () => { + const [crx] = createSignal('create-chrome-ext') + return ( +
+

Popup Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Popup diff --git a/template-solid-ts/src/popup/index.css b/template-solid-ts/src/popup/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-ts/src/popup/index.tsx b/template-solid-ts/src/popup/index.tsx new file mode 100644 index 0000000..9285dcc --- /dev/null +++ b/template-solid-ts/src/popup/index.tsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Popup } from './Popup' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-ts/tsconfig.json b/template-solid-ts/tsconfig.json new file mode 100644 index 0000000..3d0a51a --- /dev/null +++ b/template-solid-ts/tsconfig.json @@ -0,0 +1,21 @@ +{ + "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": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/template-solid-ts/tsconfig.node.json b/template-solid-ts/tsconfig.node.json new file mode 100644 index 0000000..65dbdb9 --- /dev/null +++ b/template-solid-ts/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node" + }, + "include": ["vite.config.ts"] +} diff --git a/template-solid-ts/vite.config.ts b/template-solid-ts/vite.config.ts new file mode 100644 index 0000000..faf6005 --- /dev/null +++ b/template-solid-ts/vite.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import { crx } from '@crxjs/vite-plugin' +import solidPlugin from 'vite-plugin-solid' + +import manifest from './src/manifest.jsx' + +export default defineConfig(({ mode }) => { + return { + build: { + emptyOutDir: true, + outDir: 'build', + target: 'esnext', + polyfillDynamicImport: false, + rollupOptions: { + output: { + chunkFileNames: 'assets/chunk-[hash].js', + }, + }, + }, + plugins: [crx({ manifest }), solidPlugin()], + } +})