npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-vscode-editor

v0.9.0

Published

A custom editor for VS Code

Downloads

23

Readme

Create VS Code Editors

Easily create custom VS Code editors, using React for the UI.

WARNING: This project is not ready for production use. Proceed with caution

This is an opionated VS Code extension generator with the following features out of the box:

  • You use React to build the Editor UX
  • Editors will automatically work in all VS Code distributions:
  • VS Code run/debug integration
  • Automated publishing to the VS Code Marketplace
  • HMR support for the editor coming soon

Checkout the Tldraw VS Code editor extension, that others and I built. This code is extracted from the Tldraw repo.

Example editors built with this project:

Install and Run

  1. yarn create vscode-editor my-editor
  2. cd my-editor
  3. yarn start
  4. VS Code will auto open
  5. Run the extension by Pressing F5 or selecting Run -> Start Debugging
  6. Open an .editor file (see examples/) from the newly launch VS Code window. You should see the placeholder drawing editor:

Customizing Editor

  1. Do the Install and Run from above
  2. Iterate on your custom editor by
    1. Changing the code in editor/src
    2. Use Command+R to reload the extension after you make changes to the editor code (HMR coming soon)
    3. Rinse and repeat

Share Your Extension

  1. Create an extension installer, you can share directly to people
    1. yarn package
    2. The installer will be created in the out folder
    3. People can then use the installer by going to the extension window and choosing Install from VSIX...
  2. Coming soon: automated publishing to the Marketplace. For now you can use the workflow where you upload the .vsix installer file

Todos

  • Switch out Tldraw for a much simpler editor example. Make sure it's somewhat compelling and matches the vision of the project.
  • Make sure setup instructions are accurate

Future Work

  • Add tests
    • For the generator
    • To the template to provide ready to go VS Code extension testing for editors
  • Add instructions and scripts for publishing automatically to the Marketplace
  • Add hot reloading to both the extension and editor app. Switch from esbuild to Vite (uses esbuild anyway)
  • Optimize editor instance launch times. Feels like >1sec right now on github.dev, vscode.dev, Codespaces
    • It's much faster on desktop but still not code editor level fast. Tldraw itself might need some optimizing for initialization speed.
    • Can we PWA functionality to cache the frontend?
  • Make bidirectional document syncing patch based. This is important for github.dev, vscode.dev, and Codespaces as it reduces network traffic between the extension host and extension browser clientxw.
  • Make patching underlying model patch based
  • Make the project evolvable. Currently users would have to generate fresh project to get the latest. Instead they should just be able to update the dependency via yarn/npm.
  • Provide some optional useful editor building infrastructure
  • An undo/redo manager
  • An app data model
  • Multiplayer framework or Live Share integration
  • Utilities for maintaining file formats with best practices for being easily evolvable/serializable.
  • Add CLI support for flags for language ts/js and UI frameworks other than react like vue
  • Use a proper CLI framework for the generator

This folder contains the source for the tldraw VS Code extension.

Developing

1. Install dependencies

  • Run yarn from the root folder

2. Build @tldraw/tldraw

  • Run yarn start from the root folder.

3. Start the editor

In the root folder:

  • Run yarn start:vscode.

This will start the development server for the vscode/editor project and open the vscode/extension folder in a new window.

In the vscode/extension window, open the terminal and run:

  • Install dependencies (yarn)
  • Start the VS Code debugger (Menu > Run > Start Debugging)

Open a .editor file or create a new .editor file from the command palette.

Publishing

To publish, chat with the team on the Discord channel.

  • Install vsce globally
  • Run vsce login tldraw-org and sign in

In the vscode/extension folder:

  • Run yarn vscode:publish

Implementation References