Git support

[mindplay-dk]

Neat project! 😃

How about adding support for git commands?

• https://www.npmjs.com/package/isomorphic-git

• https://www.npmjs.com/package/g4c

This would be very intuitive - I'm always surprised when I instinctively type a git command on StackBlitz, or attempt to npm install from a git: source, and it doesn't work. 😅

(Note that I couldn't immediately get g4c to actually work on StackBlitz - the author says it should work, which presumably means it would work on WebContainers, but no luck yet. Very new project though. I opened an issue and asked.)

What else do you have planned? Just playing around for now, or do you have a loose roadmap in mind?

[FossPrime]

g4c

Fixed in 1.1.0 ... caused by a feature that was reading from package.json's git

https://stackblitz.com/edit/g4c-demo

[mindplay-dk]

@FossPrime Thanks, I can see it working in that main.sh script, but it still doesn't work from the command-line afterwards. Also, it looks like the git binary is now missing? (I don't know turbo or pnpm so it's all a bit mysterious to me.)

I thought npm worked in StackBlitz - looks like this is actually a shim passing to turbo somehow? They had to build their own package manager to get this to work with WebContainers?

I guess we're still some years from something like this being an options. 😅

[FossPrime]

@FossPrime Thanks, I can see it working in that main.sh script, but it still doesn't work from the command-line afterwards. Also, it looks like the git binary is now missing? (I don't know turbo or pnpm so it's all a bit mysterious to me.)

I thought npm worked in StackBlitz - looks like this is actually a shim passing to turbo somehow? They had to build their own package manager to get this to work with WebContainers?

I guess we're still some years from something like this being an options. 😅

It clones to the current directory... so if there's a conflict... like package.json it safely exits.

I'll make 1.2 create a directory and cd into it before cloning...

The whole thing was made mostly as a way to get Gitlab support on Codesandbox... I just wrote it with javascript because it's what I knew... oh and I hate bash scripts. 😅

[FossPrime]

1.2.0 is out and it works on VSLite... but the React Tree View is caput...

I have two options for bringing back the git alias...

Always hijack like before, but make sure PATH's don't cause infinite loops
OR only hijack if I detect you're missing git... which is tricky to do with YARN 2.

This is a lot easier to do if I only have to detect stackblitz... but CloudFlow has an okay version of this too... Replit has a surprisingly similarly problematic version too.

[TheUltDev]

@mindplay-dk I updated the ROADMAP. There's a lot more to flesh out, most is in my head, but that's the gist.

@FossPrime awesome work! I think I can add the alias in the terminal input, before it reaches the shell. nvm that won't work.

As far as the file tree goes, yup that's a known issue, it doesn't update subfolders well. It needs to be fully refactored, both the scanning of the directory and the updating of the tree.

I will keep this issue open until we have a good UX for git.

[TheUltDev]

Update: I pushed a change to run alias git='npx g4c' when the jsh process starts.

Now you can run: git clone 'https://github.com/kat-tax/vslite.git' vslite directly.

Only thing left is it would be nice to automatically install g4c globally without needing npx. Haven't figured out how to do that in WebContainers yet, not sure if you can.

[FossPrime]

Update: I pushed a change to run alias git='npx g4c' when the jsh process starts.

Now you can run: git clone 'https://github.com/kat-tax/vslite.git' vslite directly.

Only thing left is it would be nice to automatically install g4c globally without needing npx. Haven't figured out how to do that in WebContainers yet, not sure if you can.

It's pretty fast as is... For global installs I've found pnpm to be better.

See the funky package.json in the demo. I set the global store to an unused $PATH bin.

Sorry for the screenshot, StackBlitz sucks on phones and I'm not vertical yet.

I'll publish a stable tag for this purpose with extra heavy petting, I'll write some more tests this week. Use prod to make it fast so pnpm i -g -P g4c@stable and do the same for @antfu/ni

The big thing we're missing, that we can now do is a create/fork/new link.

vslite.com/~/github.com/kat-tax/vslite.git

Should fork out of the box... And run. Let's worry about confused sheriffs and secrets next thing. You could even charge for a reverse proxy and 🤑

If you do that I'll work on making

vslite.com/~/gh/vitejs/vite/tree/main/packages/create-vite/template-vue-ts.

Work like the server side weirdness of vite.new/vue-ts

[mindplay-dk]

It clones to the current directory... so if there's a conflict... like package.json it safely exits.

Ah, I see, well, the headline says "basic pure js git CLI implementation", so I assumed this would be compatible with git.

And isomorphic-git itself comes with an isogit, which isn't compatible with git either.

So, forgive me for asking, but what is the goal with g4c when isogit already exists?

[FossPrime]

And isomorphic-git itself comes with an isogit, which isn't compatible with git either.

Nobody wants to do this isogit clone --url=https://github.com/isomorphic-git/isomorphic-git --depth=1 --singleBranch

goals

1. make common git commands easy to use in javascript shells
2. give configuration options similar to prettier to make it easier to use in projects with package.json files.
3. Minimize cold-boot time and overhead in browser environments
4. Improve DX for javascript developers as much as possible

I will pass through commands I haven't implemented to isogit... not sure how helpful that would be.

[TheUltDev]

@FossPrime I pushed the ability to auto-clone and install via a url:
https://vslite.dev/~/github.com/kat-tax/vslite.git

Auto-running will require a bit more work, reading the package.json and looking for stackblitz config start command or for common npm script names like start then dev, etc... will do that later.

[FossPrime]

Auto-running will require a bit more work, reading the package.json and looking for stackblitz config start command or for common npm script names like start then dev, etc... will do that later.

g4c supports an env var that I use to hide secrets in Replit from .git and prying eyes.
If you set the env var I could add autoRun and autoChdir to it, and you can prepend the env var however you see fit.

chdir is a node name... I don't make the rules: https://nodejs.org/api/process.html#processchdirdirectory

This would also help because URL's will get tricky and resolving the name of the repo or package name is not trivial. I could also add cloneToPkgName so that I mv the cloned dir to the package.json name, rather than the git repo's name. This is a big deal with monorepos the very popular monorepo structure.

I don't know where that exitCode error is coming from.

There is also a huge WebContainer update that came out today. Finally, I know somethings about ESM that may be of help to you... ... ...

https://stackblitz.com/edit/isstackblitz?file=index.js

https://stackblitz.com/edit/fsh?file=README.md

---

I could also add a way to execute arbitrary Js code in a new Function(...) after success. Executing a new node instance takes like 100 milliseconds.

https://stackblitz.com/edit/vitejs-vite-itctul?file=package.json&terminal=m,y,%20,s,e,c,r,e,t,%20,m,e,s,s,a,g,e,dev

I also have to process package.json anyway for commit's author name and author email and other config.

---

Non exhaustive list of URL's I'm trying to support:

Coming soon

- From sub folders
  - https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla-ts
- From the pull request URL's
  - https://github.com/marshallswain/feathers-pinia/pull/132
 - From a folder with a branch that has forward slashes
  - https://github.com/vitejs/vite/tree/docs/philosophy/packages/create-vite/template-vanilla-ts
- From commit hash
  - https://github.com/joshmarinacci/node-pureimage/commit/c9aff9dbb39d06d5dca86c9a375dd86c3cea0315
- From version tags
  - https://github.com/marshallswain/feathers-pinia/releases/tag/v3.0.0
- ✅ Extensionless .git url
  - https://github.com/dominictarr/JSONStream
- ✅ With .git extension
  - git://github.com/feathersjs/feathers.git
- ✅ Cloning from private repos
  - https://vslite.dev/~/gitlab+deploy-token-2130493:c6zRhq_mdPczz_9p_k_o@gitlab.com/vblip/example-private.git
- ❗From glitch password-less, username'd repo url
  - b37f30a5-2412-4e62-8c64-69de4e7e11c1@api.glitch.com/git/friggin-cat-weather.git
- ❓GitLab Wiki URL's
  - https://gitlab.com/painlessMesh/painlessMesh.wiki.git
- Starts with double protocol
  - https://https://gitlab.com/painlessMesh/painlessMesh.wiki.git

Later

- Git branch references, supported by git and yarn
  - ssh://github.com/user/repo.git**#abcd1234**
- SSH to https conversion, if in web container
  - git@github.com:sindresorhus/pkg-conf.git
- With .git extension
  - git://github.com/feathersjs/feathers.git
- From Google Cloud Source with header based cookie authentication
- From Github OAuth CLI authentication

[FossPrime]

I noticed you're using pnpx ... the performance benefits are not existent with single packages like ni and g4c.

More importantly... there is the concern of some tomfoolery with hijacking the source package for a malicious one. npx supports -- for this purpose.

Also, cloning in place seems more appropriate... as this is what you get on most all other sandboxes... rather than being down two floors of $HOME. I'll think of a way to specify clone in place. Perhaps setting the clone dir to ../. So git clone repo_url '../'

[TheUltDev]

@FossPrime so I switched to pnpm dlx because as of the release today WebContainers has native npx support. So when this happened, it now prompts you to install needed packages. You have to enter y to install dependencies. This fucks with the git repo auto-install from url. PNPM doesn't have this prompt, so I used it instead. If you can find a way to work around that, feel free to change it to NPX.

[FossPrime]

@FossPrime so I switched to pnpm dlx because as of the release today WebContainers has native npx support. So when this happened, it now prompts you to install needed packages. You have to enter y to install dependencies. This fucks with the git repo auto-install from url. PNPM doesn't have this prompt, so I used it instead. If you can find a way to work around that, feel free to change it to NPX.

The modem way is npx -y. If it's running in a non interactive environment it will not prompt. Finally if you must support old versions of non too, you can do npm_config_yes=true npx

I recommend npx -y as WebContainers were the last place that didn't support it before yesterday.
npm/cli#1935 (comment)

In my Replit environments I always use npm_config_yes=true and its never a problem.

You can also pipe output somewhere, including dev null, and it will stop beimg interactive.