How do you debug @baklavajs/core?

[yojeek]

Im developing some features in renderer-vue playground by running yarn dev, and I need to set breakpoint in source code from core package. Is it possible to link source code / compiled code with sourcemaps instead of @baklavajs/core somehow? I'm struggling to get it work with yarn/lerna/vite combination.

Thanks.

[newcat]

I usually just go into the devtools "Sources" tab and there the transpiled files are available. Since there is no minification going on the transpiled files are pretty readable and it is possible to set breakpoints in there:

[yojeek]

Sorry, I forgot to specify that the question was related to setting breakpoints from IDE, specifically Webstorm, but VsCode should work the same. I'm trying to work around it by linking with yarn link or yarn add link:<path_to_package> but with no luck yet.

[yojeek]

Got it working finally in WebStorm. Two things were needed:

edit seems that this solution works for some files from core/src but not for all. for instance source for editor.ts for some unclear reason is resolved not to /packages/core/src/editor.ts but to top-level /node_modules/@baklavajs/core/src/editor.ts.

Enable sourcemaps for core

Add corresponding option to packages/core/tsconfig.build.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "dist",
        "sourceMap": true
    },
    "include": ["src/**/*.ts"]
}

Debug configuration

I had to specify Remote URL for renderer-vue to be able to correctly resolve source files with vite :

Run and debug

Now I can run playground and IDE will correctly catch breakpoints both inside core/src and anywhere inrenderer-vue package.