diff --git a/examples/new-svelte/newtab/scripts.ts b/examples/new-svelte/newtab/scripts.ts index 5455fc31..e664aa79 100644 --- a/examples/new-svelte/newtab/scripts.ts +++ b/examples/new-svelte/newtab/scripts.ts @@ -1,7 +1,10 @@ +import * as svelte from 'svelte' import './styles.css' import App from './NewTabApp.svelte' -const app = new App({ - target: document.getElementById('app')! +const container = document.getElementById('app') +const app = svelte.mount(App, { + target: container as HTMLElement }) + export default app diff --git a/examples/new-svelte/package.json b/examples/new-svelte/package.json index 8d0c0d8e..3b1e310a 100644 --- a/examples/new-svelte/package.json +++ b/examples/new-svelte/package.json @@ -10,10 +10,10 @@ }, "license": "MIT", "dependencies": { - "svelte": "4.2.19" + "svelte": "5.15.0" }, "devDependencies": { - "typescript": "5.3.3", - "@tsconfig/svelte": "5.0.4" + "@tsconfig/svelte": "5.0.4", + "typescript": "5.3.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f041550..c03baced 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -441,8 +441,8 @@ importers: examples/new-svelte: dependencies: svelte: - specifier: 4.2.19 - version: 4.2.19 + specifier: 5.15.0 + version: 5.15.0 devDependencies: '@tsconfig/svelte': specifier: 5.0.4 @@ -838,10 +838,10 @@ importers: version: 16.0.4(sass@1.79.4)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)) svelte-loader: specifier: ^3.2.4 - version: 3.2.4(svelte@4.2.19) + version: 3.2.4(svelte@5.15.0) svelte-preprocess: specifier: ^6.0.3 - version: 6.0.3(@babel/core@7.25.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.49)(yaml@2.5.1))(postcss@8.4.49)(sass@1.79.4)(svelte@4.2.19)(typescript@5.7.2) + version: 6.0.3(@babel/core@7.25.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.49)(yaml@2.5.1))(postcss@8.4.49)(sass@1.79.4)(svelte@5.15.0)(typescript@5.7.2) vue-loader: specifier: ^17.4.2 version: 17.4.2(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)) @@ -3109,6 +3109,11 @@ packages: peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + acorn-typescript@1.4.13: + resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==} + peerDependencies: + acorn: '>=8.9.0' + acorn-walk@8.3.4: resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==} engines: {node: '>=0.4.0'} @@ -3535,9 +3540,6 @@ packages: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} - code-red@1.0.4: - resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} - collect-v8-coverage@1.0.2: resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==} @@ -4094,6 +4096,9 @@ packages: jiti: optional: true + esm-env@1.2.1: + resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==} + espree@10.2.0: resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -4111,6 +4116,9 @@ packages: resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==} engines: {node: '>=0.10'} + esrap@1.3.2: + resolution: {integrity: sha512-C4PXusxYhFT98GjLSmb20k9PREuUdporer50dhzGuJu9IJXktbMddVCMLAERl5dAHyAi73GWWCE4FVHGP1794g==} + esrecurse@4.3.0: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} engines: {node: '>=4.0'} @@ -4126,9 +4134,6 @@ packages: estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} - estree-walker@3.0.3: - resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} - esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -4702,8 +4707,8 @@ packages: resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} engines: {node: '>=0.10.0'} - is-reference@3.0.2: - resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} + is-reference@3.0.3: + resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==} is-relative@0.1.3: resolution: {integrity: sha512-wBOr+rNM4gkAZqoLRJI4myw5WzzIdQosFAAbnvfXP5z1LyzgAI3ivOKehC5KfqlQJZoihVhirgtCBj378Eg8GA==} @@ -5496,9 +5501,6 @@ packages: resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==} engines: {node: '>=0.12'} - periscopic@3.1.0: - resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} - picocolors@1.1.0: resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} @@ -6481,9 +6483,9 @@ packages: typescript: optional: true - svelte@4.2.19: - resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==} - engines: {node: '>=16'} + svelte@5.15.0: + resolution: {integrity: sha512-YWl8rAd4hSjERLtLvP6h2pflGtmrJwv+L12BgrOtHYJCpvLS9WKp/YNAdyolw3FymXtcYZqhSWvWlu5O1X7tgQ==} + engines: {node: '>=18'} svg-parser@2.0.4: resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} @@ -7089,6 +7091,9 @@ packages: resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==} engines: {node: '>=12.20'} + zimmerframe@1.1.2: + resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==} + snapshots: '@alloc/quick-lru@5.2.0': {} @@ -9788,6 +9793,10 @@ snapshots: dependencies: acorn: 8.14.0 + acorn-typescript@1.4.13(acorn@8.14.0): + dependencies: + acorn: 8.14.0 + acorn-walk@8.3.4: dependencies: acorn: 8.14.0 @@ -10279,14 +10288,6 @@ snapshots: co@4.6.0: {} - code-red@1.0.4: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.0 - '@types/estree': 1.0.6 - acorn: 8.14.0 - estree-walker: 3.0.3 - periscopic: 3.1.0 - collect-v8-coverage@1.0.2: {} color-convert@1.9.3: @@ -10914,6 +10915,8 @@ snapshots: transitivePeerDependencies: - supports-color + esm-env@1.2.1: {} + espree@10.2.0: dependencies: acorn: 8.14.0 @@ -10932,6 +10935,10 @@ snapshots: dependencies: estraverse: 5.3.0 + esrap@1.3.2: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + esrecurse@4.3.0: dependencies: estraverse: 5.3.0 @@ -10942,10 +10949,6 @@ snapshots: estree-walker@2.0.2: {} - estree-walker@3.0.3: - dependencies: - '@types/estree': 1.0.6 - esutils@2.0.3: {} etag@1.8.1: {} @@ -11535,7 +11538,7 @@ snapshots: is-plain-object@5.0.0: {} - is-reference@3.0.2: + is-reference@3.0.3: dependencies: '@types/estree': 1.0.6 @@ -12472,12 +12475,6 @@ snapshots: safe-buffer: 5.2.1 sha.js: 2.4.11 - periscopic@3.1.0: - dependencies: - '@types/estree': 1.0.6 - estree-walker: 3.0.3 - is-reference: 3.0.2 - picocolors@1.1.0: {} picocolors@1.1.1: {} @@ -13621,22 +13618,22 @@ snapshots: svelte-dev-helper@1.1.9: optional: true - svelte-hmr@0.14.12(svelte@4.2.19): + svelte-hmr@0.14.12(svelte@5.15.0): dependencies: - svelte: 4.2.19 + svelte: 5.15.0 optional: true - svelte-loader@3.2.4(svelte@4.2.19): + svelte-loader@3.2.4(svelte@5.15.0): dependencies: loader-utils: 2.0.4 - svelte: 4.2.19 + svelte: 5.15.0 svelte-dev-helper: 1.1.9 - svelte-hmr: 0.14.12(svelte@4.2.19) + svelte-hmr: 0.14.12(svelte@5.15.0) optional: true - svelte-preprocess@6.0.3(@babel/core@7.25.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.49)(yaml@2.5.1))(postcss@8.4.49)(sass@1.79.4)(svelte@4.2.19)(typescript@5.7.2): + svelte-preprocess@6.0.3(@babel/core@7.25.7)(less@4.2.0)(postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.49)(yaml@2.5.1))(postcss@8.4.49)(sass@1.79.4)(svelte@5.15.0)(typescript@5.7.2): dependencies: - svelte: 4.2.19 + svelte: 5.15.0 optionalDependencies: '@babel/core': 7.25.7 less: 4.2.0 @@ -13646,22 +13643,21 @@ snapshots: typescript: 5.7.2 optional: true - svelte@4.2.19: + svelte@5.15.0: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.5.0 - '@jridgewell/trace-mapping': 0.3.25 '@types/estree': 1.0.6 - acorn: 8.12.1 + acorn: 8.14.0 + acorn-typescript: 1.4.13(acorn@8.14.0) aria-query: 5.3.2 axobject-query: 4.1.0 - code-red: 1.0.4 - css-tree: 2.3.1 - estree-walker: 3.0.3 - is-reference: 3.0.2 + esm-env: 1.2.1 + esrap: 1.3.2 + is-reference: 3.0.3 locate-character: 3.0.0 magic-string: 0.30.11 - periscopic: 3.1.0 + zimmerframe: 1.1.2 svg-parser@2.0.4: {} @@ -14347,3 +14343,5 @@ snapshots: yocto-queue@0.1.0: {} yocto-queue@1.1.1: {} + + zimmerframe@1.1.2: {} diff --git a/programs/develop/webpack/dev-server.ts b/programs/develop/webpack/dev-server.ts index 940d2bec..99e09c3b 100644 --- a/programs/develop/webpack/dev-server.ts +++ b/programs/develop/webpack/dev-server.ts @@ -85,9 +85,8 @@ export async function devServer(projectPath: string, devOptions: DevOptions) { 'Access-Control-Allow-Origin': '*' }, port: 'auto', - // WARN: Setting TRUE here causes the content_script - // entry of a react extension to be reloaded infinitely. - hot: 'only' + + hot: true } const devServer = new WebpackDevServer(serverConfig, compiler) diff --git a/programs/develop/webpack/plugin-js-frameworks/index.ts b/programs/develop/webpack/plugin-js-frameworks/index.ts index 80aa935b..470e15a7 100644 --- a/programs/develop/webpack/plugin-js-frameworks/index.ts +++ b/programs/develop/webpack/plugin-js-frameworks/index.ts @@ -28,7 +28,7 @@ export class JsFrameworksPlugin { const maybeInstallReact = await maybeUseReact(projectPath) const maybeInstallPreact = await maybeUsePreact(projectPath) const maybeInstallVue = await maybeUseVue(projectPath) - const maybeInstallSvelte = await maybeUseSvelte(projectPath) + const maybeInstallSvelte = await maybeUseSvelte(projectPath, mode as any) compiler.options.resolve.alias = { ...(maybeInstallBabel?.alias || {}), diff --git a/programs/develop/webpack/plugin-js-frameworks/js-tools/svelte.ts b/programs/develop/webpack/plugin-js-frameworks/js-tools/svelte.ts index 12a344a3..d938cb5f 100644 --- a/programs/develop/webpack/plugin-js-frameworks/js-tools/svelte.ts +++ b/programs/develop/webpack/plugin-js-frameworks/js-tools/svelte.ts @@ -7,6 +7,7 @@ import path from 'path' import fs from 'fs' +import {sveltePreprocess} from 'svelte-preprocess' import * as messages from '../../lib/messages' import {installOptionalDependencies} from '../../lib/utils' import {JsFramework} from '../../webpack-types' @@ -41,12 +42,11 @@ export function isUsingSvelte(projectPath: string) { } export async function maybeUseSvelte( - projectPath: string + projectPath: string, + mode: 'development' | 'production' ): Promise { if (!isUsingSvelte(projectPath)) return undefined - const isDev = process.env.NODE_ENV !== 'production' - try { require.resolve('svelte-loader') } catch (e) { @@ -58,24 +58,40 @@ export async function maybeUseSvelte( await installOptionalDependencies('Svelte', svelteDependencies) - // The compiler will exit after installing the dependencies - // as it can't read the new dependencies without a restart. console.log(messages.youAreAllSet('Svelte')) process.exit(0) } const svelteLoaders: JsFramework['loaders'] = [ { - test: /\.svelte$/, - loader: require.resolve('svelte-loader'), + test: /\.svelte\.ts$/, + use: [require.resolve('svelte-loader')], + include: projectPath, + exclude: /node_modules/ + }, + { + test: /\.(svelte|svelte\.js)$/, + use: { + loader: require.resolve('svelte-loader'), + options: { + preprocess: sveltePreprocess({ + typescript: true, + postcss: true + }), + emitCss: true, + compilerOptions: { + dev: mode === 'development', + } + } + }, include: projectPath, - exclude: /node_modules/, - options: { - compilerOptions: { - dev: isDev - }, - hotReload: isDev, - preprocess: require('svelte-preprocess')() + exclude: /node_modules/ + }, + { + // Required to prevent errors from Svelte on Webpack 5+ + test: /node_modules\/svelte\/.*\.mjs$/, + resolve: { + fullySpecified: false } } ] diff --git a/programs/develop/webpack/webpack-config.ts b/programs/develop/webpack/webpack-config.ts index 4d81c190..d726d69a 100644 --- a/programs/develop/webpack/webpack-config.ts +++ b/programs/develop/webpack/webpack-config.ts @@ -84,10 +84,7 @@ export default function webpackConfig( '.tsx', '.json', '.wasm', - '.less', - '.css', - '.sass', - '.scss' + '.svelte' ] }, watchOptions: {