kat-tax / vslite Goto Github PK

https://slides.com/evanyou/semicolons

prettier/prettier#13059

Tl;Dr: In modern JavaScript they are never a problem. It just makes your code pointlessly wet.

• Add context menu to FileTree, Tabs, and Watermark components using Radix UI(https://www.radix-ui.com/docs/primitives/components/context-menu)
• Implement actions for each respective component

Figma -> React Native Plugin

• Add button in the plugin's Export tab to generate a session
• Plugin generates a hash based on the project ID to sync data between the plugin and VSLite
• Plugin opens a window: (https://vslite.dev/+/figma/...)
• VSLite clones and runs a lightweight React Native Web skeleton project
• Create Y.JS connections between VSLite and all plugin instances
• Compile all components in project and update as they change
• Send components to VSLite in the following format:

{
  "./section/ComponentName.tsx": "code...",
}

It's not too difficult to build our own VSCode.dev. Which will have search and replace, good formatters, etc

... and be far closer to supporting The TS Language server for web and other extensions.

We could also fork Theia or Gitlab's Web IDE

• https://github.com/eclipse-theia/theia (Uses semi colons)
• https://gitlab.com/gitlab-org/gitlab-web-ide-vscode-fork (Uses tabs and semi-colons)

• Refactor WebContainer filesystem crawling (use chokidar?)
• Fix visuals (top cutoff in PWA scenarios, spacing is off, etc.)
• Add file icons (parse VSCode icon theme format)
• Add handling of renaming files
• Add handling of moving files

when I click on a file in the treeview, that file becomes the active tab in the editor. When I click on a tab in the dockview the active file in the treeview becomes active. You end up with typing in the wrong file.

It looks like I need to find/create a place to call panel.api.setActive(); like happens in panel.ts when we open a file from the treeview.

Hot take: it would be easier and better to support a low weight gecko style coding LLM than to deal with general extension support, to then get Intellisense for Web, which is very limited even in github.dev, it's a little better in vscode.dev

This reduces the need for everything else, including the TS Language server, volar, Intellisense light... Etc.

It would run as a worker providing suggestions, I suggest davinci or gecko. We would stand out as the only ones doing that.

https://replit.com/@fossprime/feathers-llm

• Build interface
• Add function to crawl files matching string/regex
• Add function to replace string/token in those files

• Create StatusBar component
• Add basic info like line, column, and selection numbers.
• Add button to start a collaboration session.

This is a proposal how to get secrets working

1. In localStorage keep a JSON document with the following:

- '^github.com/kat-tax/.*':
  - OPENAI_KEY: '...'
  - TWILIO_KEY: '...'
- '^gitlab.com/':
  - SERVICE_ACCOUNT: '…'
- 'nsa.com/area-51-crm.git'
  - $match: 'exatct'
  - ALIEN_OS_KEY: '...'

2. Allow users to edit it via a vslite.secrets.yaml virtual file in the root directory. The file could actually be in /tmp/.
3. Automatically load it from localStorage on boot.

default to exact match for performance. Web containers have zero access to master local storage by default... So this is safe ceteris paribus.

Settings Sync could be accomplished with a browser extension (100KB):

• https://github.com/aklinker1/vite-plugin-web-extension
• crxjs

Things left to consider

• There should be a way for git to request a token and have the user grant access per cloned repo... as any cloned repo could commandeer the token.

I'll investigate this further... assign to me.

https://vslite.dev/~/[email protected]/git/friggin-cat-weather.git

It's the repo for https://glitch.com/~friggin-cat-weather

This works fine, https://vslite.dev/~/gitlab.com/vblip/g4c.git
and adding my user name causes an expected password error.

Private repositories also work

Example private repo with Gitlab repo-specific deploy key:
https://vslite.dev/~/gitlab+deploy-token-2130493:[email protected]/vblip/example-private.git

• Sync editors via Websockets and/or WebRTC Y.JS provider
• Command to generate room using https://github.com/kat-tax/xkcd-936
• Collaborator panel with either chosen or auto generated usernames, colors, and avatars.
• Colored selections and cursors in editor

Example room url:

https://vslite.dev/#/fade_balcony_nimble_ribbon_mud

Initial work for this was completed in #21.

Minor. But it can be a dealbreaker with some browsers and some devices which don't support it well.
Dark mode makes sleepy.

• Load all relevant files into the model (not just opened ones)
• Improve Monaco Editor Auto Typings (most if not all libs fail to load)

• Implement hotkey system (use Ninja Keys or similar)
• Add common shortcuts to Watermark component

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?

• Create hotkey and Monaco editor command to trigger
• Zip and download all file contents in WebContainer root

if pnpm is used, the dockview override would work... but touch isn't working, which means the override isn't being applied, which means Cloudflare is probably using npm and ignoring our lock file.

Its not a big deal right now, as our lockfile is not critical amd dockview 1.7.6 will come with touch support... but it could be a really annoying problem in the future.

See the delf deployment docks on how to fix it. For build template I used "none."

Just lost 10 minutes of notes... grrr

I don't love the way CloudFlow does it... StackBlitz does it better.
We should at least show a popup when there are unsaved changes.