vanilla Slate - removing the React dependency

[brucou]

Problem
I want to use Slate without React (vanilla-js) so I can integrate it in my framework of choice.

Solution
We are not using React and do not want to carry its weight just to use Slate. I am looking for a dependency-free API. If that is available we might package Slate into a web component for reusability across framework.

Alternatives
Well given that we don't want to use React, we are thinking to maybe try Preact. But that is a poor alternative for us. It still increases the complexity of our stack needlessly. It is also not clear how many bugs will occur due to subtle differneces between React and Preact. We don't really want to go through that.

Context
Basically we want to use Slate as an editor for a range of DSLs, and possibly even open source a tool that automatically creates a web editor from the grammar of any textual DSLs. The really attractive part of Slate is its simplicity and good documentation. Alternatives like Monaco (a really good product) suffers from a high complexity (due to a lot of features and a lot of parts to coordinate, each with its own set of technologies) and poor documentation.

[thesunny]

@brucou if you are interested in reducing the weight of Slate's dependency on React, I recommend an effort to get it to work with Preact.

• slate, slate-history and slate-react weight about 32.3KB (minified and gzipped)
• react and react-dom weigh about 42.2KB (minified and gzipped)
• preact weighs 4KB (minified and gzipped).

So Preact is a little over 10% of the size of Slate so it's pretty negligible WRT the weight it adds. Getting rid of Preact doesn't mean you end up with 0 KB. You still need to create a Virtual DOM to back Slate and it would probably be challenging to keep that at 4% from scratch anyways.

Also, keep in mind that Slate 0.50+ is (I think) about a third the size of the old version of Slate so I believe the newer version is smaller than the older 0.47 version even with React included. Slate is very efficiently written IMO, meaning that Slate + React is still lighter than many competing editors. The first one I checked, ProseMirror, is around 125KB for the core components. That means Slate + React is still 60% of the size of ProseMirror which doesn't have any React dependency and could probably called Vanilla JS.

[brucou]

@thesunny Thank you for your helpful answer. If Slate indeed requires a virtual DOM, then indeed Preact looks like the best option. I thought Slate would directly update the DOM and was first written in Vanilla-JS and then a React plug-in was added. My issue with switching Preact for React is that the two are not equivalent (though they almost are), and we have been bitten before by the subtle differences. I don't know if that improved or got worse with hooks and didn't really want to figure it out. But yeah if there is no choice then that's that.

[brucou]

By the way, what I trying to do is to implement a projectional editor (cf. JetBrains MPS), and I assess that Slate would work there like a charm. With a projectional editor, users edit directly an abstract syntax tree (AST). The AST is then turned into a DOM tree for visualization and editing. Because users directly edit the syntax tree, there are no syntax errors, we know at any moment the edited clause so it is easy to detect semantics errors and provide code intelligence (the AST encodes the grammar for a DSL). So because Slate also maps a tree data structure to the DOM, it seems almost like a perfect fit. The great thing about the docs is that it explains the concepts nicely, so I was able to figure that it would work in less than 30mn. So congrats to whoever wrote that.

Early explorations of custom-made solution: Cf. https://svelte.dev/repl/52d5ca38a0ea4083aebafa93742f53ce?version=3.17.3

[thesunny]

@brucou for clarity, I'm not sure how well Slate works with Preact and I would expect you'd have to do some testing at the least.

Here's a related Slate/Preact issue #2599 which leads to a request for fix on Preact.

This issue on Preact seems to suggest that some people are successfully using Preact without a fix with Slate preactjs/preact#1422 but it's difficult to tell for sure.

I'd love to hear if you get this working. I have an application for which Preact with Slate would be a good fit but don't have time to do the research. We just finished an initial Android release for Slate and I'm working with somebody to bring a collaborative editing plugin/server to Slate as well.

[brucou]

@thesunny Thanks for the links. Really helpful. The issues are still open which leads me to think that the issues are not resolved, though they seem minor. Seems doable, we will have to think about whether we go that road. Will keep you posted if you go that route.

I'm working with somebody to bring a collaborative editing plugin/server to Slate as well.

That's awesome. I heard lots of good from y.js: https://github.com/yjs/yjs

[santiagopuentep]

We are moving to Svelte, this would be great to support Slate in Svelte too.

[syonfox]

Just going to leave this here fvilers/tiny-editor#22 (comment)
Thats what I ended up with. not nearly as extensible but it works.

[beorn]

Just noticed this: https://github.com/nathanfaucett/svelte-slate

[cogsandsquigs]

This would be useful to incorporate into the main repository, because not only would it allow for svelte users to use slate, but anyone can said component in their app, regardless of whether they use svelte or not.

[cmcnicholas]

Same argument above for Vue, dependency on react makes this a no go for us as we already bundle many deps and don't want to introduce more unless absolutely necessary. I like others was surprised to see this was written "react first" rather than a barebones js/ts implementation with a react layer on top.