ES/JS Implementation?

[tomyo]

Hi!
I like a lot the way djot language is defined, and I would like to try it out in web projects.

Is there a JS implementation?
If not, i'm happy to collaborate => suggestions welcome.

Thanks!

[jgm]

No, there isn't, just the Lua. It should be possible to write a JS implementation that closely follows the Lua implementation, so if you'd like to try this, be my guest!

Some notes on where I think the difficulties would lie:

• the Lua implementation operates with byte indices into the input string (because it's faster that way, and Lua uses bytestrings). In JS it would be easier to operate with character indices.
• I think there are tools for automatically translating Lua -> JS, but the tool I'm familiar with doesn't translate use of Lua pattern syntax, which is used heavily in this implementation.

[mandolyte]

Perhaps this should be moved over to discussions. I could probably donate a few hours (2-4h) on this. I've also searched for Lua to JS tools; many seemed to be abandoned. But this could be a first step - investigate what is available.

[johningle]

I'm interested in seeing where this goes. However, I'm currently considering simply running the Lua version on webassembly via wasmoon. If I pursue this to a working result, I may follow up here with a link for anyone interested.

[jgm]

Note: on the sandbox (https://djot.net/playground/) we use a wasm blob converted by emscripten from Lua sources and a small C library that just uses Lua and the djot Lua code. It amounts to roughly 350K of wasm and js code and performs pretty well. Obviously a native js implementation would be nicer (smaller, faster, more extensible), but if you just want to use djot on the web this works.

(Previously we used wasmoon -- that works too.)

[johningle]

Very nice! I will try to check this out. I prefer a solution that allows me to use your reference implementation as progress is made, instead of depending upon a separate implementation that may get behind on features. I appreciate you pointing this out, as I had not yet considered how the playground worked.

[jgm]

I got as far as translating one module: https://github.com/jgm/djot.js
Maybe more later.

[jgm]

I have implemented inline and block event parsers now in djot.js. Next step: ast.

[jgm]

The typescript implementation (jgm/djot.js) is now complete, and I've got it running on the playground, You can try it at https://djot.net/playground. It appears to be roughly 5X 3X faster than the old playground using Lua compiled to WASM, and the resources are 3X smaller.

[mandolyte]

First, thank you!

I had a question about the "djot" script (which just runs node run.mjs "$@". Unlike the playground, the HTML emitted doesn't have the span and class names. Is this yet to be done as part of the roadmap's CLI? Or am I missing something when I run it?

Also wondered about whether a markdown metadata section might be supported wherein to place CSS? So if at the head of the file, this was present:

---
.heading {
        color: blue;
        font-style: italic;
}
---

Then the playground might actually react to the styling? Of course, this may not be useful in general, but it would at least make the playground a cool place to show off what djot can do.

[jgm]

I'm not sure what you mean. I get this:

% ./djot 
[hi]{.foo}
<p><span class="foo">hi</span></p>

Are you seeing something different?

Metadata is something to consider for the future.
Of coures, you can already include styles using raw HTML.

``` =html
<style>
.heading { color: blue; font-style: italic; }
</style>
```

[mandolyte]

Ah, I had not used the square brackets to enclose the text for which the attributes applied. Thanks!

[jgm]

It should also work without the square brackets.

% ./djot 
hi{.foo}
<p><span class="foo">hi</span></p>

[jgm]

OK, djot.js is now in pretty good shape, and includes a command line tool that can convert between djot and pandoc JSON. (So with this + pandoc you can convert just about anything to djot and vice versa.) Check it out at https://github.com/jgm/djot.js.)