latest version to npm

[larshp]

Hi,
Is it possible to publish the latest version of railroad-diagrams to npm?

On npm version 1.0.0, the NonTerminal function is

function NonTerminal(text)

however in the git repository it is

function NonTerminal(text, href)

[larshp]

@dundalek can you help out?

alternatively if you add me as a collaborator on npmjs.org I can help out if you like?

[gertsonderby]

Also, version-number tagged releases would be nice, so people don't have to depend on a commit hash.

[prantlf]

This is partially caused because the browser and Node.js scripts are separate (raliroad.js and raliroad-diagram.js). I attempted to mend this by building both browser and Node.js scripts from a single source (raliroad.js) in #80.

[tabatkins]

And really, I've abandoned the railroad-diagrams.js file and will eventually remove it; it hasn't received new features in a while. If we can get module and no-module out of the same source (module) file, that's great.

[rparree]

When you say you "abandoned the railroad-diagrams.js", does this mean you are dropping support to use it on a page using a script tag in conjunction with adddTo?

[tabatkins]

I mean exactly what I said above - I haven't touched the file for a while to add any new features or fix any bugs, and I don't plan to.

You can use the module script on a webpage no problem:

<script type=module>
import rr from "./railroad.js";
Object.assign(window, rr);
</script>
...
<script>
Diagram(...).addTo();
</script>

(Unfortunately module scripts don't have access to document.currentScript, so you need to pull the values out and then call them from a non-module script.)

[Austaras]

Since esm module is supported natively in nodejs, could you simply merge these two and just release it?

[tabatkins]

I'd have to do some research on what exactly's required for an esm node package now, but yeah, I could do this.

[Austaras]

There isn't really much things to do

[tabatkins]

Having that list of things to do, however small, certainly helps a lot. Thanks!

[rparree]

I've tried the code @tabatkins , but the Diagram is not yet available due to the deferred loading of module scripts.

EDIT: see my comment below for the solution i currently use

I would have to rely on something like this:

<script type="module">
    import rr from './railroad.js'

    Object.assign(window, rr);
</script>
<script>
    function whenLoaded(fn) {
        function loop() {
            if (window.Diagram)
                fn()
            else
                setTimeout(loop, 100)
        }

        loop()
    }
</script>
<script defer>
    whenLoaded(() => Diagram("test").addTo())
</script>

Which is not something I am keen on using. Does anybody have a better solution?

[rparree]

I ended up with the following solution;

<script type="module">
    import("./railroad.js").then(rr => {
        Object.assign(window, rr.default)
        document.querySelectorAll("script[type='application/railroad']").forEach(s => {
            const r = eval(s.innerHTML)
            const div = document.createElement("div")
            div.classList.add("railroad-diagram")
            r.addTo(div)
            s.replaceWith(div)
        })
    })
</script>
<script type="application/railroad">
    Diagram("test")
</script>