search

lostintangent / codeswing

VS Code extension for building web applications ("swings") using a interactive and editor-integrated coding environment
https://aka.ms/codeswing
MIT License
977 stars 46 forks source link

Cannot debug the CodeSwing extension itself #59

Closed ItalyPaleAle closed 5 months ago

ItalyPaleAle commented 2 years ago

I'm trying to build the extension locally to run some debugging (and see if I can contribute with fixes to the issues I've raised, plus a few more), but I can't get that to work.

First, I clone the repo then launch that in VS Code, then install deps with npm install.

npm run watch then fails with these errors:

[6:17:39 PM] Starting compilation in watch mode...

node_modules/svelte/types/compiler/index.d.ts:4:22 - error TS2307: Cannot find module 'estree-walker' or its corresponding type declarations.

4 export { walk } from 'estree-walker';
                       ~~~~~~~~~~~~~~~

node_modules/svelte/types/compiler/interfaces.d.ts:2:27 - error TS2307: Cannot find module 'magic-string' or its corresponding type declarations.

2 import { SourceMap } from 'magic-string';
                            ~~~~~~~~~~~~~~

node_modules/svelte/types/compiler/preprocess/types.d.ts:1:26 - error TS2307: Cannot find module 'locate-character' or its corresponding type declarations.

1 import { Location } from 'locate-character';

Looks like the issue is that estree-walker, magic-string and locate-character are dependencies of svelte but are marked as devDependency in svelte's package.json, so they're not installed. At least in the latest version of NPM that I'm using, there doesn't seem a way (anymore) to install devDependencies of dependencies.

So a first fix was to add this to CodeSwing's devDependencies (using the same versions of deps that are listed for Svelte):

    "estree-walker": "^1.0.0",
    "locate-character": "^2.0.5",
    "magic-string": "^0.25.3",

Then with npm install I can finally build the extension..

However, it's not done yet. Now npm run watch works, but the extension still isn't loaded in VS Code.

This is what happens in VS Code's debug console:

rejected promise not handled within 1 second: Error: Cannot find module '/Users/alessandro/Desktop/Code/codeswing/dist/extension.js'
Require stack:
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
stack trace: Error: Cannot find module '/Users/alessandro/Desktop/Code/codeswing/dist/extension.js'
Require stack:
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
    at Function._resolveFilename (internal/modules/cjs/loader.js:934:15)
    at internal/modules/cjs/loader.js:779:27
    at Function.<anonymous> (electron/js2c/asar_bundle.js:5:12913)
    at Function.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:114:32222)
    at Function.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:114:28887)
    at Function._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:104:61699)
    at Module.require (internal/modules/cjs/loader.js:1006:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Function.r [as __$__nodeRequire] (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:5:101)
    at v._loadCommonJSModule (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:114:30297)
    at v._doActivateExtension (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:100:12958)
    at v._activateExtension (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:100:11931)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
    at Object.registerCodeSwingModule (/Users/alessandro/.vscode/extensions/vsls-contrib.gistfs-0.3.0/dist/extension.js:51:275762)

I'm not sure how to fix this :(

ItalyPaleAle commented 2 years ago

For the second issue, it seems that the extension is being loaded from the dist folder, but tsc is configured to output the extension to out.

But just changing the output directory in the tsconfig isn't enough because it doesn't go through webpack.