Hi there! As a newbie in TypeScript, Svelte, and VSCode extension development, I have my first question to ask 😁.
My main objective is to automate the compilation of Svelte and TypeScript files for my project.
I kicked things off by setting up the TypeScript template project with "yo code" via my terminal and then introduced the rollup.config.js file to handle files within my /webviews subfolder along with its own tsconfig.json file.
The initial step involved configuring the scripts in package.json to compile the Svelte files. All seems to be working smoothly except for one warning message:
> rollup -c && tsc -p ./
[rollup-plugin-svelte] Unknown "dev" option. Please use "compilerOptions" for any Svelte compiler configuration.
[rollup-plugin-svelte] Unknown "css" option. Please use "compilerOptions" for any Svelte compiler configuration.
webviews/pages/HelloWorld.ts → out/compiled/HelloWorld.js...
(!) Plugin typescript: @rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.
created out/compiled/HelloWorld.js in 1.9s
In this scenario, my package.json scripts were defined as follows:
"scripts":
{
"vscode:prepublish": "npm run compile",
"compile": "rollup -c && tsc -p ./",
"lint": "eslint src --ext ts",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"test": "node ./out/test/runTest.js"
}
Considering I wanted the "watch" script to automatically monitor any changes in files (both ts and svelte), I updated the script section in the package.json file as follows:
"scripts":
{
"vscode:prepublish": "npm run compile",
"compile": "rollup -c && tsc -p ./",
"lint": "eslint src --ext ts",
"watch": "concurrently \"rollup -c -w\" \"tsc -watch -p ./\"",
"pretest": "npm run compile && npm run lint",
"test": "node ./out/test/runTest.js"
}
After implementing these changes, the "Task - watch" terminal indicated that both scripts were functioning correctly but the "other" VSCode test session that usually starts did not appear.
12:18:24 AM - Starting compilation in watch mode...
[1]
[0] [rollup-plugin-svelte] Unknown "dev" option. Please use "compilerOptions" for any Svelte compiler configuration.
[0] [rollup-plugin-svelte] Unknown "css" option. Please use "compilerOptions" for any Svelte compiler configuration.
[0] rollup v2.35.1
[0] bundles webviews/pages/HelloWorld.ts → out/compiled/HelloWorld.js...
[0] created out/compiled/HelloWorld.js in 2.8s
[1]
[1] 12:18:28 AM - Found 0 errors. Watching for file changes.
Currently, my rollup.config.js file looks like this:
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import path from "path";
import fs from "fs";
const production = !process.env.ROLLUP_WATCH;
export default fs
.readdirSync(path.join(__dirname, "webviews", "pages"))
.map((input) => {
const name = input.split(".")[0];
return {
input: "webviews/pages/" + input,
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "out/compiled/" + name + ".js",
},
plugins: [
svelte({
dev: !production,
css: (css) => {
css.write(name + ".css");
},
preprocess: sveltePreprocess(),
}),
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
typescript({
tsconfig: "webviews/tsconfig.json",
sourceMap: !production,
inlineSources: !production,
}),
production && terser(),
],
watch: {
clearScreen: false,
},
};
});
Alongside this, here's my tsconfig.json file in the root directory:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "out",
"lib": [
"es6"
],
"sourceMap": true,
"rootDir": "src",
"strict": true /* enable all strict type-checking options */
},
"exclude": [
"node_modules",
".vscode-test",
"webviews"
]
}
Furthermore, here's the tsconfig.json file inside my "webviews" folder used specifically for Svelte files:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["./**/*", ],
"exclude": ["../node_modules/*"],
"compilerOptions": {"strict": true }
}
If there are any misconfigurations or if you have any advice to offer, please feel free to share. Thank you!