diff --git a/.eslintignore b/.eslintignore
index e6a82761..a8db16f4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
dist
node_modules
public
+extension
diff --git a/.npmrc b/.npmrc
index cf040424..009aa06d 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,2 @@
shamefully-hoist=true
-strict-peer-dependencies=false
+auto-install-peers=true
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 320368c2..99211535 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,9 +1,12 @@
{
"recommendations": [
- "johnsoncodehk.volar",
+ "vue.volar",
"antfu.iconify",
+ "antfu.vite",
"dbaeumer.vscode-eslint",
- "voorjaar.windicss-intellisense",
- "csstools.postcss"
+ "antfu.unocss",
+ "csstools.postcss",
+ "lokalise.i18n-ally",
+ "streetsidesoftware.code-spell-checker"
]
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e7108c3f..2f07bf4d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,14 +1,14 @@
{
"cSpell.words": ["Vitesse"],
"typescript.tsdk": "node_modules/typescript/lib",
- "volar.tsPlugin": true,
- "volar.tsPluginStatus": false,
"vite.autoStart": false,
"editor.codeActionsOnSave": {
-
- "source.fixAll.eslint": true,
+ "source.fixAll.eslint": true
},
"files.associations": {
- "*.css": "postcss",
+ "*.css": "postcss"
},
+ "i18n-ally.localesPaths": [
+ "_locales"
+ ]
}
diff --git a/LICENSE b/LICENSE
index 0f637cef..9b031a21 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2022 Hakadao
+Copyright (c) 2021 Anthony Fu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 7161d185..90424817 100644
--- a/README.md
+++ b/README.md
@@ -1,52 +1,96 @@
-
-
-
+# WebExtension Vite Starter
-BewlyBewly
-
-Bringing you the suggested videos on the bilibili homepage, clean and simple.
-
-
- 開發中, 佛系更新 = =
+A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template.
-
+Popup
+
+Options Page
+
+Inject Vue App into the Content Script
+
-## ⬇️ Installation
+## Features
-### Firefox
+- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
+- 🥝 Vue 3 - Composition API, [`
+
-
+
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index dd5bec27..e13fdd4f 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,14 +1,14 @@
-
-
-
-
+
+
+
+
diff --git a/src/options/main.ts b/src/options/main.ts
index 55bc54e9..1a911d5a 100644
--- a/src/options/main.ts
+++ b/src/options/main.ts
@@ -1,9 +1,5 @@
import { createApp } from 'vue'
import App from './Options.vue'
-// import App from './views/App.vue'
-// import { router } from '~/contentScripts/router'
-// import { i18n } from '~/utils'
-
import '../styles'
const app = createApp(App)
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
index cbfc25b5..e2e8becb 100644
--- a/src/popup/Popup.vue
+++ b/src/popup/Popup.vue
@@ -1,23 +1,15 @@
-
- BewlyBewly
+ Popup
This is the popup page
@@ -25,14 +17,7 @@ export default defineComponent({
Open Options
- Storage:
- {{ storageDemo }}
+ Storage:+ {{ storageDemo }}
-
-
diff --git a/src/styles/index.ts b/src/styles/index.ts
index cbc27b9f..d338bf2e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,3 +1,4 @@
-import './reset.scss'
+import '@unocss/reset/tailwind.css'
import './main.scss'
-import 'virtual:windi.css'
+import './reset.scss'
+import 'uno.css'
diff --git a/src/tests/demo.spec.ts b/src/tests/demo.spec.ts
new file mode 100644
index 00000000..dcaca6ef
--- /dev/null
+++ b/src/tests/demo.spec.ts
@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('Demo', () => {
+ it('should work', () => {
+ expect(1 + 1).toBe(2)
+ })
+})
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index c370df62..4da87573 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,5 +1,5 @@
import { createI18n } from 'vue-i18n'
-import messages from '@intlify/vite-plugin-vue-i18n/messages'
+import messages from '@intlify/unplugin-vue-i18n/messages'
export const i18n = createI18n({
legacy: false,
diff --git a/tsconfig.json b/tsconfig.json
index bdd1773c..48029838 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,17 +8,16 @@
"esModuleInterop": true,
"incremental": false,
"skipLibCheck": true,
+ "jsx": "preserve",
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": true,
"forceConsistentCasingInFileNames": true,
"types": [
- "vite/client",
- "chrome",
- "@intlify/vite-plugin-vue-i18n/client"
+ "vite/client"
],
"paths": {
- "~/*": ["src/*"],
+ "~/*": ["src/*"]
}
},
"exclude": ["dist", "node_modules"]
diff --git a/tsup.config.ts b/tsup.config.ts
index 8bdde984..35f06e7a 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -13,8 +13,10 @@ export default defineConfig(() => ({
splitting: false,
sourcemap: isDev ? 'inline' : false,
define: {
- __DEV__: JSON.stringify(isDev),
+ '__DEV__': JSON.stringify(isDev),
+ 'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
},
+ platform: 'browser',
minifyWhitespace: !isDev,
minifySyntax: !isDev,
}))
diff --git a/unocss.config.ts b/unocss.config.ts
new file mode 100644
index 00000000..dcdb3bab
--- /dev/null
+++ b/unocss.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'unocss/vite'
+import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'
+
+export default defineConfig({
+ presets: [
+ presetUno(),
+ presetAttributify(),
+ presetIcons(),
+ ],
+ transformers: [
+ transformerDirectives(),
+ ],
+})
diff --git a/vite-mv3-hmr.ts b/vite-mv3-hmr.ts
index 2be8f822..7d40befa 100644
--- a/vite-mv3-hmr.ts
+++ b/vite-mv3-hmr.ts
@@ -1,7 +1,7 @@
import { dirname, join } from 'path'
import type { HMRPayload, PluginOption } from 'vite'
import fs from 'fs-extra'
-import { r, isWin } from './scripts/utils'
+import { isWin, r } from './scripts/utils'
const targetDir = r('extension')
@@ -51,7 +51,7 @@ export const MV3Hmr = (): PluginOption => {
code = code.replace(mod.url, normalizeViteUrl(isWin
? mod.url.replace(/[A-Z]:\//, '').replace(/:/, '.')
: mod.url,
- mod.type)) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
+ mod.type)) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
writeToDisk(mod.url)
}
}
@@ -59,17 +59,19 @@ export const MV3Hmr = (): PluginOption => {
if (urlModule?.url) {
code = code
.replace(/\/@vite\/client/g, '/dist/mv3client.mjs')
+ .replace(/\/@id\//g, '/')
+ .replace(/__uno.css/g, '~~uno.css')
+ .replace(/__x00__plugin-vue:export-helper/g, '~~x00__plugin-vue:export-helper.js')
.replace(/(\/\.vite\/deps\/\S+?)\?v=\w+/g, '$1')
if (isWin) {
code = code
.replace(/(from\s+["']\/@fs\/)[A-Z]:\//g, '$1')
- };
-
+ }
const targetFile = normalizeFsUrl(isWin
? urlModule.url.replace(/[A-Z]:\//, '').replace(/:/, '.')
: urlModule.url,
- urlModule.type) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
+ urlModule.type) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
await fs.ensureDir(dirname(targetFile))
await fs.writeFile(targetFile, code)
}
@@ -90,5 +92,14 @@ function normalizeViteUrl(url: string, type: string) {
}
function normalizeFsUrl(url: string, type: string) {
- return join(targetDir, normalizeViteUrl(url, type).replace(/^\//, ''))
+ return join(
+ targetDir,
+ normalizeViteUrl(url, type)
+ .replace(/^\//, '')
+ // `\0plugin-vue:export-helper` EXPORT_HELPER_ID
+ // eslint-disable-next-line no-control-regex
+ .replace(/\u0000/g, '__x00__')
+ // filenames starting with "_" are reserved for use by the system.
+ .replace(/^_+/, match => '~'.repeat(match.length)),
+ )
}
diff --git a/vite.config.content.ts b/vite.config.content.ts
index d9652167..2b77fbbe 100644
--- a/vite.config.content.ts
+++ b/vite.config.content.ts
@@ -1,8 +1,6 @@
import { defineConfig } from 'vite'
-import WindiCSS from 'vite-plugin-windicss'
import { sharedConfig } from './vite.config'
import { isDev, r } from './scripts/utils'
-import windiConfig from './windi.config'
import packageJson from './package.json'
// bundling the content script using Vite
@@ -25,21 +23,7 @@ export default defineConfig({
output: {
entryFileNames: 'index.global.js',
extend: true,
- // inlineDynamicImports: true,
- // format: 'amd'
},
},
},
- plugins: [
- ...sharedConfig.plugins!,
-
- // https://github.com/antfu/vite-plugin-windicss
- WindiCSS({
- config: {
- ...windiConfig,
- // disable preflight to avoid css population
- preflight: false,
- },
- }),
- ],
})
diff --git a/vite.config.ts b/vite.config.ts
index 375ed64e..a604156f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,13 +4,13 @@ import { dirname, relative } from 'path'
import type { UserConfig } from 'vite'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
+import replace from '@rollup/plugin-replace'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
-import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import WindiCSS from 'vite-plugin-windicss'
-import windiConfig from './windi.config'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import UnoCSS from 'unocss/vite'
import { isDev, port, r } from './scripts/utils'
import { MV3Hmr } from './vite-mv3-hmr'
@@ -21,9 +21,6 @@ export const sharedConfig: UserConfig = {
'~/': `${r('src')}/`,
},
},
- define: {
- __DEV__: isDev,
- },
plugins: [
Vue(),
@@ -31,7 +28,9 @@ export const sharedConfig: UserConfig = {
imports: [
'vue',
{
- 'webextension-polyfill': [['*', 'browser']],
+ 'webextension-polyfill': [
+ ['*', 'browser'],
+ ],
},
],
dts: r('src/auto-imports.d.ts'),
@@ -53,13 +52,23 @@ export const sharedConfig: UserConfig = {
// https://github.com/antfu/unplugin-icons
Icons(),
- // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
- VueI18n({
+ // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+ VueI18nPlugin({
runtimeOnly: true,
compositionOnly: true,
include: [r('./_locales/**')],
}),
+ // https://github.com/unocss/unocss
+ UnoCSS(),
+
+ replace({
+ '__DEV__': JSON.stringify(isDev),
+ 'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
+ '__VUE_OPTIONS_API__': JSON.stringify(true),
+ '__VUE_PROD_DEVTOOLS__': JSON.stringify(false),
+ }),
+
// rewrite assets to use relative path
{
name: 'assets-rewrite',
@@ -71,8 +80,14 @@ export const sharedConfig: UserConfig = {
},
],
optimizeDeps: {
- include: ['vue', '@vueuse/core', 'webextension-polyfill'],
- exclude: ['vue-demi'],
+ include: [
+ 'vue',
+ '@vueuse/core',
+ 'webextension-polyfill',
+ ],
+ exclude: [
+ 'vue-demi',
+ ],
},
}
@@ -90,7 +105,6 @@ export default defineConfig(({ command }) => ({
emptyOutDir: false,
sourcemap: isDev ? 'inline' : false,
// https://developer.chrome.com/docs/webstore/program_policies/#:~:text=Code%20Readability%20Requirements
- minify: 'terser',
terserOptions: {
mangle: false,
},
@@ -100,15 +114,11 @@ export default defineConfig(({ command }) => ({
popup: r('src/popup/index.html'),
},
},
+ minify: 'terser',
},
plugins: [
...sharedConfig.plugins!,
- // https://github.com/antfu/vite-plugin-windicss
- WindiCSS({
- config: windiConfig,
- }),
-
MV3Hmr(),
],
test: {
diff --git a/volar.config.js b/volar.config.js
deleted file mode 100644
index e238545f..00000000
--- a/volar.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const vetur = require('@volar-plugins/vetur')
-
-module.exports = {
- plugins: [vetur()],
-}
diff --git a/windi.config.ts b/windi.config.ts
deleted file mode 100644
index e96538b0..00000000
--- a/windi.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { resolve } from 'path'
-import { defineConfig } from 'windicss/helpers'
-
-export default defineConfig({
- darkMode: 'class',
- // https://windicss.org/posts/v30.html#attributify-mode
- attributify: true,
- extract: {
- include: [resolve(__dirname, 'src/**/*.{vue,html}')],
- },
- plugins: [
- require('windicss/plugin/aspect-ratio'),
- ],
-})