Workflow for JavaScript Macros/Wegets Developments inside TW5

[msameen99]

Currently I'm Writing/Debugging the code segment by segment inside the Chrome DevTool Console, and if a part of the code is OK, then I copy/past it to TW5 to Test it again there.

Is there a better Dev/Debug Workflow for JavaScript Macros/Widgets inside TW5? ex. Can I use VSCode IDE and its Debugger as a single Dev workflow?

[btheado]

I wrote all the code for my TW widget tutorial using tiddlywiki. The innerwiki plugin makes it easy to test javascript changes without having to reload the outer wiki.

Compose the javascript tiddlers in the outer wiki. The changes there won't take affect until full reload. But you can insert those tiddlers into innerwiki instances in order to get them to reload.

For example, adapted from https://btheado.github.io/tw-widget-tutorial/#Hello%20World%20demo:

<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside
     change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[hello.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
  <$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
  <$data $tiddler=hello.js/>
  <$data title="hello world widget" text="""
    <$hello/>
  """/>

</$innerwiki>
</$list>

The hello.js tiddler contains the javascript code under development. Any time it changes, the innerwiki will automatically reload.

You can edit any of the code at https://btheado.github.io/tw-widget-tutorial/ to see how it works.

[Jermolene]

Hi @btheado that's very cunning indeed. Perhaps it's worth a "how to" on the /dev site? (Which doesn't receive much love)

[msameen99]

Thanks a lot @btheado for your detailed reply and for your GREAT tutorial, I was really surprised cause I didn't see it before !

@Jermolene I think it's a good idea to mention this tutorial in TW5 Dev Docs (https://tiddlywiki.com/dev/)

[btheado]

@Jermolene, sure I'll take a look at writing something up for the /dev site

@msameen99, I can also make a pull request to add a link to my tutorial to the /dev site.