Running JS REPL inside TW

151 views
Skip to first unread message

Scott Sauyet

unread,
May 15, 2020, 5:16:12 PM5/15/20
to TiddlyWiki
My recent success dynamically building a stand-alone TW to document a corporate system -- with many thanks due to helpful people here! -- has made me want to revisit something I stopped working on several years ago when I changed jobs.  It's another bit of documenting a system (this time a code library)  by dynamically generating a TW.  I have most of the pieces in place given what I've done recently.  (It's behind a corporate wall, I'm afraid, so I can't share, but it's working quite well.)

But there is one piece that I haven't even considered yet.  If you visit the Ramda documentation, you will see in the top-right of the code examples the choice of visiting that example in Ramda's REPL or to open it inline.  For the inline part we're embedding RunKit.  This is a nice feature for library documentation.  Sanctuary.js has something even nicer.

I have no problem trying to write my own version of something like this as a TW plugin, but I was wondering if this has already been done.  Searches for REPL and Tiddlywiki turned up nothing useful.

Are there any code sandbox / REPL plugins already available?  Or is there anything similar that I might look to for inspiration, some way to sandbox some dynamic JS code away from the TW environment?

Cheers,  

  -- Scott

Scott Sauyet

unread,
May 23, 2020, 8:04:16 AM5/23/20
to TiddlyWiki
bump

Ste Wilson

unread,
May 23, 2020, 11:15:13 AM5/23/20
to TiddlyWiki
I have no idea what much of what you just said actually means... But I don't think I've been confused in exactly this way about tiddlywiki before :D

Arlen Beiler

unread,
May 23, 2020, 1:04:54 PM5/23/20
to TiddlyWiki
I would say if you want to write it yourself, that's probably your best bet. For TiddlyWiki we just use the browser console, and TiddlyWiki doesn't focus on Javascript as a user feature so this isn't a core focus. 

I would say use a widget. If you look through the /core/modules/widgets/ folder you should find one that's close. The text widget comes to mind as a good example that I recently used. That will show you how to insert a DOM node at that place in the document which can then be operated on however you want. If you use the text widget, just replace the text node with a div element or something like that. It's pretty simple. You can also use the set widget to pass in variables or simply refer to any tiddlers you want using "this.wiki" I believe. 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/101de743-eab4-45c7-a251-2ed782815e59%40googlegroups.com.

Brian Theado

unread,
May 23, 2020, 1:41:51 PM5/23/20
to tiddl...@googlegroups.com
You could use iframes and adapt the 400 bytes of genius from https://github.com/umpox/TinyEditor to suit your needs. This editor has 3 text boxes along the top. One for each of html, css, and javascript. As you type in them, the results is rendered in the box at the bottom.

The TinyEditor code itself requires javascript. TiddlyWiki won't let you directly embed javascript, so two levels of iframe are needed. Here is some code you can pasted into tiddler in any TW and see the TinyEditor in action:

\define iframehtml(content)
<div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"
 src=<<makedatauri """$content$""" "text/html">>>
</div>
\end

<$macrocall $name=iframehtml content="""
<!-- The 400 bytes of genius from https://github.com/umpox/TinyEditor -->
<body
    oninput="i.srcdoc=h.value+'<style>'+c.value+
            '</style><script>'+j.value+'<\/script>'">
    <style>
        textarea,iframe{width:100%;height:50%}
        body{margin:0}
        textarea{width:33%;font-size:18}
    </style>
    <textarea placeholder=HTML id=h></textarea>
    <textarea placeholder=CSS id=c></textarea>
    <textarea placeholder=JS id=j></textarea>
    <iframe id=i>
  """/>

Your use case would require only the javascript textbox. The html would be hard-coded somehow to always display the output of the javascript from the textbox.

Maybe this isn't the best approach, but it would allow you to quickly get a working prototype.

Brian

On Fri, May 15, 2020 at 5:16 PM Scott Sauyet <sc...@sauyet.com> wrote:
--

Scott Sauyet

unread,
May 23, 2020, 4:01:11 PM5/23/20
to TiddlyWiki
Thank you.  I'll check out that suggestion.

This isn't really JS as a core feature, just a useful addition to some documentation.  But it does require the ability to run user-entered Javascript, and that might just be pretty far from TiddlyWiki's sweet spot.

Cheers,

  -- Scott
To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

Scott Sauyet

unread,
May 23, 2020, 4:09:09 PM5/23/20
to TiddlyWiki
Thank you Brian.  I think that would get me going quickly.  I'll try it out this week.

And, you're right.  That TinyEditor is pure genius!

Cheers,

  -- Scott
To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

Scott Sauyet

unread,
May 23, 2020, 4:15:30 PM5/23/20
to TiddlyWiki
Well either I apologize for confusing you or say you're welcome for opening up new horizons, whichever seems appropriate!

If  you are confused and want to understand more fully, I can certainly try another explanation.  But if you've ever seen Codepen, JSFiddle, RunKit or any of the dozens of other code-trial sites, I'm wondering if there is some way to embed a minimal copy of that idea in Tiddlywiki.

  -- Scott

TonyM

unread,
May 23, 2020, 11:51:26 PM5/23/20
to TiddlyWiki
Folks,

The tiddlywiki embeded tiny Editor example is interesting, and I learn something new everyday, 

eg about pasting the editor into the address bar. This means the editor can be bookmarked.

I am very interested in this work, because I believe tiddlywiki could make a good developer kit, or site and code generator, especially web technology.

Some notes
  • Previewing a tiddler with the additional previewers found in the tiddlywiki internals plugin is a way to preview wiki text as its html, and at least all html that is valid in tiddlers can also be rendered in standard preview. 
  • The edition of a CSS/style panel that would define css that applies only to the tiddler/html in edit would be a nice tiddlywiki designer tool
  • I think that ability to use inserted javascript would be great for a developers tool kit, local only, but highly undesirable online for security reason as I believe you can access server privileges that way
    • If designed smartly there would be a way to migrate javascript into a tiddlywiki plugin that was executed after save and reload.
    • But the tiny editor, and bookmarklets demonstrate that a javascript payload can be executed in a browser tab, on top of tiddlywiki, perhaps this could be a way to enable working javascript on top of tiddlywiki, in say prototyping before embedding into tiddlywiki (Not that I know how)
  • You do know codemirror offers syntax highlighting an more?

Regards
Tony
Reply all
Reply to author
Forward
0 new messages