search

ameerthehacker / blazepack

⚡ Blazing fast dev server powered by sandpack
GNU Lesser General Public License v3.0
234 stars 17 forks source link

Add support for react-typescript-app via template (with DRAFT PROPOSAL) #11

Closed sahilrajput03 closed 3 years ago

sahilrajput03 commented 3 years ago

Situation

I tried something to align my node_modules for the support of ts packages like @types/react, @types/react-dom and other favourable such type packages to be installed via package manager yarn using a script(named - by for BlazepackYarn). Example usage of by program is: ./by add @types/lodash to add types for lodash for auto completion in IDE.

All features of yarn can be used for e.g.,

yarn add @types/somePackage
yarn remove @types/somePackage

and others as arguments are directly passed to yarn cli, i.e., 

./by add @types/somePackage
./by remove @types/somePackage

etc.

Refer my solution

Guide @ https://github.com/sahilrajput03/react-typescript-blazepack .

tl;dr

git clone https://github.com/sahilrajput03/react-typescript-blazepack react-typescript-app && cd react-typescript-app && rm -rf .git
./by # Installs only @types/react and @types/react-dom required for vscode intellisense and autocompletion
code . # Opens up our project folder in vscode
blazepack # Run blazepack

You are ready with typescript-react project running in IDE with all auto-completion features!!

ameerthehacker commented 3 years ago

@sahilrajput03 I love this idea but is there a way by which we can avoid node_modules installation and still get auto completion?

sahilrajput03 commented 3 years ago

@sahilrajput03 I love this idea but is there a way by which we can avoid node_modules installation and still get auto completion?

I guess loading from globally installed module types would be a better idea, but I am not sure if that would work!!..I will try this in a while and will post the results I get !. 😇

Src: https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders

sahilrajput03 commented 3 years ago

@ameerthehacker atleast vscode doesn't respect globally installed packages/modules by default, I am looking for a feature by which it respects globally installed modules!

image

Another proof vsocde doesn't respect NODE_PATH environment variable to look for node_modules :(

image

Notice: node testing.js works fine even without installing react locally :)

Is there anyway to tell vscode to respect NODE_PATH environemnt path varialle to look for node_modules just as node itself does (in docs: https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders)

Is there something with which my vscode repect NODE_PATH to look for node modules along with node_modules in current directory just as node does.. ??

Inmy machine I have set NODE_PATH to my npm's node_modules's folder i.e., image

Can you @ameerthehacker tell if NODE_PATH is respected by vscode in current directory opened in vscode on your machine..?

Thanks.

ameerthehacker commented 3 years ago

@sahilrajput03 you can give Triple-Slash Directives a try. Check if this can accept a url like unpkg to read the types.

sahilrajput03 commented 3 years ago

It doesn't work from global installed modules way... image

, but I am looking to specify the url way though...

UPDATE: >> @sahilrajput03 you can give Triple-Slash Directives a try. Check if this can accept a url like unpkg to read the types.

I don't find it working anyhow after spending enough time :(

So, for now i guess the solution i presented works pretty good for vscode's intellisence and module not found like errors.

ameerthehacker commented 3 years ago

@sahilrajput03 thanks a lot for your efforts, will probably go with installing @types while doing blazepack install