Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

example.html has bit-rotted #97

Open
sfkleach opened this issue Oct 16, 2022 · 3 comments · May be fixed by #109
Open

example.html has bit-rotted #97

sfkleach opened this issue Oct 16, 2022 · 3 comments · May be fixed by #109

Comments

@sfkleach
Copy link

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
Copy link
Contributor

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
Copy link
Author

sfkleach commented Jan 9, 2024

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

@RossPatterson
Copy link
Contributor

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 :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants