diff --git a/src/core/vite-plugins/tsconfigPaths.ts b/src/core/vite-plugins/tsconfigPaths.ts index c2490142..dd3ea3b9 100644 --- a/src/core/vite-plugins/tsconfigPaths.ts +++ b/src/core/vite-plugins/tsconfigPaths.ts @@ -2,5 +2,9 @@ import { InternalConfig } from '../types'; import paths from 'vite-tsconfig-paths'; export function tsconfigPaths(config: InternalConfig) { - return paths(); + const fn: typeof paths = + typeof paths === 'function' ? paths : (paths as any).default; + return fn({ + root: config.root, + }); } diff --git a/templates/svelte/.vscode/extensions.json b/templates/svelte/.vscode/extensions.json new file mode 100644 index 00000000..bdef8201 --- /dev/null +++ b/templates/svelte/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/templates/svelte/README.md b/templates/svelte/README.md new file mode 100644 index 00000000..de572aaa --- /dev/null +++ b/templates/svelte/README.md @@ -0,0 +1,7 @@ +# Svelte + Vite + +This template should help get you started developing with Svelte in WXT. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). diff --git a/templates/svelte/_gitignore b/templates/svelte/_gitignore new file mode 100644 index 00000000..b694a278 --- /dev/null +++ b/templates/svelte/_gitignore @@ -0,0 +1,23 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.output +artifacts + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/templates/svelte/package.json b/templates/svelte/package.json new file mode 100644 index 00000000..7c3ab966 --- /dev/null +++ b/templates/svelte/package.json @@ -0,0 +1,23 @@ +{ + "name": "wxt-starter", + "description": "manifest.json description", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "wxt", + "dev:firefox": "wxt -b firefox", + "build": "wxt build", + "build:firefox": "wxt build -b firefox", + "check": "svelte-check --tsconfig ./tsconfig.json", + "prepare": "wxt prepare" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^2.4.2", + "@tsconfig/svelte": "^5.0.0", + "svelte": "^4.0.5", + "svelte-check": "^3.4.6", + "tslib": "^2.6.0", + "typescript": "^5.1.6", + "wxt": "^0.1.5" + } +} diff --git a/templates/svelte/src/assets/svelte.svg b/templates/svelte/src/assets/svelte.svg new file mode 100644 index 00000000..8c056ce7 --- /dev/null +++ b/templates/svelte/src/assets/svelte.svg @@ -0,0 +1 @@ + diff --git a/templates/svelte/src/entrypoints/background.ts b/templates/svelte/src/entrypoints/background.ts new file mode 100644 index 00000000..51d3f08f --- /dev/null +++ b/templates/svelte/src/entrypoints/background.ts @@ -0,0 +1,3 @@ +export default defineBackgroundScript(() => { + console.log('Hello background!', { id: browser.runtime.id }); +}); diff --git a/templates/svelte/src/entrypoints/popup/App.svelte b/templates/svelte/src/entrypoints/popup/App.svelte new file mode 100644 index 00000000..19e3daa6 --- /dev/null +++ b/templates/svelte/src/entrypoints/popup/App.svelte @@ -0,0 +1,42 @@ + + +
+
+ + + + + + +
+

WXT 2 + Svelte

+ +
+ +
+ +

+ Click on the WXT and Svelte logos to learn more +

+
+ + diff --git a/templates/svelte/src/entrypoints/popup/app.css b/templates/svelte/src/entrypoints/popup/app.css new file mode 100644 index 00000000..b87aec72 --- /dev/null +++ b/templates/svelte/src/entrypoints/popup/app.css @@ -0,0 +1,80 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + 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%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/templates/svelte/src/entrypoints/popup/index.html b/templates/svelte/src/entrypoints/popup/index.html new file mode 100644 index 00000000..c4d9a3c0 --- /dev/null +++ b/templates/svelte/src/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/templates/svelte/src/entrypoints/popup/main.ts b/templates/svelte/src/entrypoints/popup/main.ts new file mode 100644 index 00000000..7ab96ab2 --- /dev/null +++ b/templates/svelte/src/entrypoints/popup/main.ts @@ -0,0 +1,8 @@ +import './app.css'; +import App from './App.svelte'; + +const app = new App({ + target: document.getElementById('app')!, +}); + +export default app; diff --git a/templates/svelte/src/lib/Counter.svelte b/templates/svelte/src/lib/Counter.svelte new file mode 100644 index 00000000..979b4dfc --- /dev/null +++ b/templates/svelte/src/lib/Counter.svelte @@ -0,0 +1,10 @@ + + + diff --git a/templates/svelte/src/public/wxt.svg b/templates/svelte/src/public/wxt.svg new file mode 100644 index 00000000..ee9fadaf --- /dev/null +++ b/templates/svelte/src/public/wxt.svg @@ -0,0 +1 @@ + diff --git a/templates/svelte/tsconfig.json b/templates/svelte/tsconfig.json new file mode 100644 index 00000000..9ecb7858 --- /dev/null +++ b/templates/svelte/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "./src/.wxt/tsconfig.json", + "compilerOptions": { + "useDefineForClassFields": true + } +} diff --git a/templates/svelte/wxt-env.d.ts b/templates/svelte/wxt-env.d.ts new file mode 100644 index 00000000..1a25456a --- /dev/null +++ b/templates/svelte/wxt-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/templates/svelte/wxt.config.ts b/templates/svelte/wxt.config.ts new file mode 100644 index 00000000..0a007f05 --- /dev/null +++ b/templates/svelte/wxt.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from 'wxt'; +import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +// See https://wxt.dev/config.html +export default defineConfig({ + srcDir: 'src', + vite: { + logLevel: 'info', + plugins: [ + svelte({ + // Using a svelte.config.js file causes a segmentation fault when importing the file + configFile: false, + preprocess: [vitePreprocess()], + }), + ], + }, +});