example.html has bit-rotted

[sfkleach]

Hi - it looks like when you retired the non-modular version of railroad-diagram.js in Jan 2022, it broke the example.html file (last updated in Feb 2018). It would be great to have that file updated. The immediate issue is that it refers to the retired versions rather than the current versions. But it also needs to be adapted to import the module appropriately.

FYI we are using it in our our project work at https://github.com/GetPoplog/Grammar

Steve

[RossPatterson]

I have a version that works, but IMHO, it's ugly. The inability to run a <script type=module> synchronously with the page load makes it hard to get the railroad.js functions into a place where the diagram scripts can access them reliably. And the inability of an ES module script, even an inline one, to get document.currentScript, or to locate itself in the DOM, makes it hard to figure out where to insert the diagram SVGs.

My changes entail adding type=module to each <script> tag, wrapping each <script> tag in a new <div>, moving the id= attributes from the <h1> tags to the new <div> tags, and then (here's the ugly part) replacing the .addto() in each script with .addTo(document.getElementById('...the id value...')). It's sufficient for me to begin testing some changes I'm making to railroad.js, but I'd love to see something prettier. Here's what one of the diagrams looks like in my version of example.html:

<h1>IDENT</h1>
<div id='ident'>
<script type=module>
ComplexDiagram(
    Choice(0, Skip(), '-'),
    Choice(0, NonTerminal('name-start char'), NonTerminal('escape')),
    ZeroOrMore(
        Choice(0, NonTerminal('name char'), NonTerminal('escape')))).addTo(document.getElementById('ident'));
</script>
</div>

All that said, I can submit a PR if that's an acceptable result.

[sfkleach]

:) that is a bit hideous. But something is better than nothing, so I would encourage you to do it. Thanks!

[RossPatterson]

After some more thought, I realized I could monkey-patch Diagram.addTo(), and bury the ugliness where nobody will see it when they're looking at the browser results (as opposed to the contents of the example.html file). Which is lame, but it works. Doing so results in examples that are coded like this:

<h1 id='ident'>IDENT</h1>
<div>
<script type=module>
ComplexDiagram(
    Choice(0, Skip(), '-'),
    Choice(0, NonTerminal('name-start char'), NonTerminal('escape')),
    ZeroOrMore(
        Choice(0, NonTerminal('name char'), NonTerminal('escape')))).addTo();
</script>
</div>

I'll submit a PR, and let @tabatkins can decide if it's too ugly to accept. It won't break my heart either way :-)