Reglitch: HTML/CSS/JS autocompletion + Editor tabs (Userscript)

The Gallery
, ,
1

Let me first start off with this: If you need the collaborative features of glitch, you can’t use this unless you take turns developing.

With that said, Reglitch is a userscript that replaces the glitch editor with a custom CodeMirror instance. There is a decent level of autocomplete in all three languages, with JS even having analysis support.

image

This is not close to finished, since there is so much room it can grow. There are some downsides, as there currently isn’t even a find or replace function yet.

In the future you will be able to change themes and perhaps support for language servers.

You can see the very crappy designed website and install the userscript here https://reglitch.glitch.me/
(Or just spare your eyes the pain and go straight to installing it by clicking here)

Keep in mind that the first time you use the script you’ll be prompted for permission for the script to make cross origin requests, since glitch has a strict CSP that would prevent loading the dependencies otherwise.

Also, unlike the normal editor, this editor does not autosave (yet).
You have to Ctrl+S to save a file, and the project+preview will only update after you save.

This should work on any browser you can run tampermonkey in.

Oh and it’s very fresh out of the oven, so there might be small quirks or bugs that I haven’t found yet.

4 Likes
2

looks really cool, but sometimes a random piece of code gets red (even when no one is editing other than me), idk why :thinking:

image

3

Ah I think it’s supposed to be like error linting or something but the styling isn’t very good for it.

1 Like
4

woa I’m gonna try ternjs on my custom glitch editor too. nice find!

edit: oh their extension is for codemirror 5 ):

2 Likes
5

don’t be shy, drop the link/binary/code

2 Likes
6

that :person_tipping_hand:

2 Likes
7

whoa, so would it be possible to create an unofficial glitch extension for VS code using that + the vscode fileSystemProvider api? I gotta try making something like that

8

I kinda did try (I still have the code files) but it didn’t seem that straightforward unless you actually download the files locally and then load it into vscode. but if you’re trying to use virtual files in VSCode, it becomes significantly harder. then again, i gave up pretty early into trying to implement it but it’s certainly not impossible.

1 Like
9

can I see the file system provider api

10

this was all i managed to make before i lost motivation lol

It’s based on MemFS, which is an example memory-based filesystem that VSCode provides in their docs - perfect for our usecase.

The filesystem is defined by a file that has functions for each operation the user might perform. Here’s my empty GlitchFS:

const vscode = require("vscode");
const path = require("path");

/**
 * @param {vscode.ExtensionContext} context
 */
module.exports = class GlitchFileSystemProvider {
  stat(uri) {}

  readDirectory(uri) {}

  createDirectory(uri) {}

  readFile(uri) {}

  writeFile(uri, content) {}

  copy(source, destination) {}

  delete(uri) {}

  rename(oldUri, newUri) {}

  watch(uri) {
    return new vscode.Disposable(() => {});
  }

  onDidChangeFile = new vscode.EventEmitter().event;
};
11

thanks, that looks pretty nicely matched up with the OT protocol that glitch has

1 Like