diff --git a/CHANGELOG.md b/CHANGELOG.md index 33e5f80..018b23a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ Summary ## 0.8.8 [2023.10.08] -- feat: support side panel for chrome extension(vanilla \ preact \ svelte \ solid \ inferno \ lit) +- feat: support side panel for chrome extension(alpine \ vanilla \ preact \ svelte \ solid \ inferno \ lit) ## 0.8.7 [2023.10.03] diff --git a/template-alpine-js/options.html b/template-alpine-js/options.html index 58301a6..5019460 100644 --- a/template-alpine-js/options.html +++ b/template-alpine-js/options.html @@ -5,25 +5,15 @@ Chrome Extension + 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 index 0272d84..d271a44 100644 --- a/template-alpine-js/package.json +++ b/template-alpine-js/package.json @@ -21,10 +21,10 @@ "preview": "vite preview" }, "dependencies": { - "alpinejs": "^3.10.2" + "alpinejs": "^3.13.1" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "vite": "^2.9.13" + "vite": "^4.4.11" } } diff --git a/template-alpine-js/popup.html b/template-alpine-js/popup.html index a092f5a..ef35107 100644 --- a/template-alpine-js/popup.html +++ b/template-alpine-js/popup.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + JS + Vite App - Popup - -
+

Popup Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-js/sidepanel.html b/template-alpine-js/sidepanel.html index 4e3a346..598a288 100644 --- a/template-alpine-js/sidepanel.html +++ b/template-alpine-js/sidepanel.html @@ -4,26 +4,18 @@ - Chrome Extension + Alpine + JS + Vite 2.0 - SidePanel - + Chrome Extension + Alpine + JS + Vite App - Side Panel -
+

Side Panel Page!

v 0.0.0
- + + Power by
- + diff --git a/template-alpine-ts/public/common.css b/template-alpine-js/src/main.css similarity index 92% rename from template-alpine-ts/public/common.css rename to template-alpine-js/src/main.css index 16a216d..6896d96 100644 --- a/template-alpine-ts/public/common.css +++ b/template-alpine-js/src/main.css @@ -1,5 +1,6 @@ :root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; @@ -19,11 +20,6 @@ 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; diff --git a/template-alpine-js/src/main.js b/template-alpine-js/src/main.js new file mode 100644 index 0000000..fe6a161 --- /dev/null +++ b/template-alpine-js/src/main.js @@ -0,0 +1,10 @@ +import Alpine from 'alpinejs' +import './main.css' + +window.Alpine = Alpine + +Alpine.store('shop', { + crx: 'create-chrome-ext', +}) + +Alpine.start() diff --git a/template-alpine-js/src/options/index.js b/template-alpine-js/src/options/index.js deleted file mode 100644 index 605069d..0000000 --- a/template-alpine-js/src/options/index.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index ff6eb2d..0000000 --- a/template-alpine-js/src/popup/index.js +++ /dev/null @@ -1,15 +0,0 @@ -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/src/sidepanel/index.js b/template-alpine-js/src/sidepanel/index.js deleted file mode 100644 index ff6eb2d..0000000 --- a/template-alpine-js/src/sidepanel/index.js +++ /dev/null @@ -1,15 +0,0 @@ -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-ts/options.html b/template-alpine-ts/options.html index d0dbf41..a0cd11c 100644 --- a/template-alpine-ts/options.html +++ b/template-alpine-ts/options.html @@ -5,25 +5,15 @@ Chrome Extension + 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 index c642763..1c2c740 100644 --- a/template-alpine-ts/package.json +++ b/template-alpine-ts/package.json @@ -21,12 +21,13 @@ "preview": "vite preview" }, "dependencies": { - "alpinejs": "^3.10.2" + "alpinejs": "^3.13.1" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "@types/chrome": "^0.0.236", - "typescript": "^4.6.4", - "vite": "^2.9.13" + "@types/alpinejs": "^3.13.2", + "@types/chrome": "^0.0.246", + "typescript": "^5.2.2", + "vite": "^3.2.7" } } diff --git a/template-alpine-ts/popup.html b/template-alpine-ts/popup.html index 9167ba4..f80138e 100644 --- a/template-alpine-ts/popup.html +++ b/template-alpine-ts/popup.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + TS + Vite App - Popup - -
+

Popup Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-ts/sidepanel.html b/template-alpine-ts/sidepanel.html index 4d7701b..bbcbc5f 100644 --- a/template-alpine-ts/sidepanel.html +++ b/template-alpine-ts/sidepanel.html @@ -4,26 +4,20 @@ - Chrome Extension + Alpine + TS + Vite App - Popup - + Chrome Extension + Alpine + TS + Vite App - Side Panel -
-

Popup Page!

+
+

Side Panel Page!

+ +
Username:
v 0.0.0
- + + Power by
- + diff --git a/template-alpine-ts/src/main.css b/template-alpine-ts/src/main.css new file mode 100644 index 0000000..6896d96 --- /dev/null +++ b/template-alpine-ts/src/main.css @@ -0,0 +1,55 @@ +:root { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', 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; +} + +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/src/main.ts b/template-alpine-ts/src/main.ts new file mode 100644 index 0000000..4943b68 --- /dev/null +++ b/template-alpine-ts/src/main.ts @@ -0,0 +1,18 @@ +import Alpine from 'alpinejs' +import './main.css' + +import type { Alpine as AlpineType } from 'alpinejs' + +declare global { + interface Window { + Alpine: AlpineType + } +} + +window.Alpine = Alpine + +Alpine.store('shop', { + crx: 'create-chrome-ext', +}) + +Alpine.start() diff --git a/template-alpine-ts/src/options/index.ts b/template-alpine-ts/src/options/index.ts deleted file mode 100644 index d41a043..0000000 --- a/template-alpine-ts/src/options/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index d41a043..0000000 --- a/template-alpine-ts/src/popup/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Alpine from 'alpinejs' - -window.Alpine = Alpine - -Alpine.start() diff --git a/template-alpine-ts/src/sidepanel/index.ts b/template-alpine-ts/src/sidepanel/index.ts deleted file mode 100644 index d41a043..0000000 --- a/template-alpine-ts/src/sidepanel/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Alpine from 'alpinejs' - -window.Alpine = Alpine - -Alpine.start() diff --git a/template-alpine-ts/vite.config.ts b/template-alpine-ts/vite.config.ts index 85f2498..670a908 100644 --- a/template-alpine-ts/vite.config.ts +++ b/template-alpine-ts/vite.config.ts @@ -3,7 +3,7 @@ import { crx } from '@crxjs/vite-plugin' import manifest from './src/manifest' // https://vitejs.dev/config/ -export default defineConfig(({ mode }) => { +export default defineConfig(() => { return { build: { emptyOutDir: true,