Widget development without reloading page

Developers
#1

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

#2

(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?

#3

@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.

#4

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]]

3 Likes
#5

Not sure how I see it in the link you provided

#6

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!
2 Likes
List filter when some tiddler change
#7

This works. Thank you!

#8

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.

#9

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.

#10

Hi All,
I was experimenting with this concept and I thought I’d share what I’ve learnt somewhere before I forget it …

I wanted to see if I could reload a widget javascript tiddler from the developer console - so looking through the boot etc I first found these commands… I used the <$hello/> world example from the widget tutorial from https://tiddlywiki.com/dev/#Javascript%20Widget%20Tutorial

$tw.modules.types.widget.My.Widget   //returns a module wrapper object that has a definition and exports attributes
$tw.modules.define("My.Widget","widget", $tw.wiki.getTiddlerText("My.Widget"))  // updates the definition - logs a warning to console
$tw.modules.execute("My.Widget") //returns the exported widget function/class

I thought that would do it - so after making changes to the widget javascript (adding an alert) and running these steps in the console… I teste <$hello/> in a new tiddler … No luck ! So TW is caching widgets somewhere …

Finding where the various cached mechansims, set variable logic or widget settings were was tricky ! But eventually I found the following worked

$tw.rootWidget.widgetClasses.hello = $tw.modules.execute("JSHelloWidget").hello

There is another cache for macros which i need to have a look at …but welcome any thoughts on this … It may be useful for “developing a widget to change it … without the need to reload TW on every change” … but I’m not sure this will “deal with exceptions” at all… it feels like a huge hack :smiley:

Cheers
CB

2 Likes
#11

As you found out. There is no way to reliably change JS-code without a restart, because JS code is initialised and sandboxed at wiki startup.

As @Ittayd found out at: Widget development without reloading page - #8 by Ittayd the innerwiki-plugin should be able to handle the startup, because the whole wiki is “started” everytime in an iframe. But debugging in an iframe has it’s own challenges.