Widget development without reloading page

Is there a way to develop a widget that allows to change it and deal with exeptions without the need to reload TW on every change (using a single HTML)?

(A widget that is self modifying?)

Are you perhaps referring to that macros and procedures re-render the tiddler when it is edited, losing its focus?

@Ittayd

Wikitext: If it’s a widget built with “pure” wikitext, sure, just change it “live” – no need to reload the wiki.

JavaScript: If it’s built with JavaScript, you will need to reload the wiki after each change to the widget’s source.

You can use the innerwiki plugin to achieve it. Your javascript files are in the outer wiki and if you configure it right, the innerwiki can refresh whenever you change the related tiddlers.

You can see this approach in action at the javascript widget tutorial:

https://tiddlywiki.com/dev/#Do%20nothing%20widget%20tutorial:[[Do%20nothing%20widget%20tutorial]]%20[[Javascript%20Widget%20Tutorial]]

2 Likes

Not sure how I see it in the link you provided

Maybe these tiddlers will serve as a better example: https://tiddlywiki.com/dev/#Hello%20World%20demo:[[Hello%20World%20demo]]%20hello.js

Step by step:

  1. Visit the above link
  2. Notice the innerwiki in the first tiddler shows <$hello/> Renders as: Hello, World!
  3. Scroll down to the hello.js tiddler. Edit it. Change “Hello, World!” to “Hallo, Welt!”.
  4. Save the tiddler
  5. Scroll back up to the tiddler with the inner wiki.
  6. Notice it now shows <$hello/> Renders as: Hallo, Welt!
1 Like

This works. Thank you!

Well, not quite. The widget renders in the inner wiki and changes are reflected immediately (sometimes, I posted another question about the filter refresh) but, when I want to debug the script the browser gets confused between the script in the inner wiki and the outer wiki, so it ends up placing breakpoints in the wrong places.

See https://tiddlywiki.com/dev/#Using%20ES2016%20for%20Writing%20Plugins , use Unnamed Plugin — Unfilled Description
which auto-reload the page.

And use TS will save 50% of debug time.