Run TW5 Plugins in TWC

[sam paul]

Hello. I am thinking about possible ways to run TW5 plugins in TWC.

One idea is to write a plugin similar to https://tiddlywiki.com/plugins/tiddlywiki/innerwiki/. It should embed a TW5 inside TWC and you can add tiddlers to this embeded TW5 in the plugin parameter.

Another idea is to support switching from TWC core and TW5 core. Maybe this could be done using startup url. I learned that TW5 core can be loaded externally.

Are there better solutions?

Best,

Yanshu

[Yakov]

Hello, Yanshu,

could you share a more specific example of what are you trying to achieve?

Interaction of TW5 and TWC is not a simple task (well, at least one needs to know how to do things in both to implement it), but for some tasks it may be enough to use an iframe (like if you have some widget in TW5 that you'd like to display in TWC). Using an iframe is rather limited, though: for instance, only some savers will work within the iframe, so editing data of one TW from another may be problematic.

Switching cores sounds like something quite complicated, but FYI TWC core can also be loaded externally (https://classic.tiddlywiki.com/tiddlywiki_externaljs.html is an example, the source can be found at https://github.com/TiddlyWiki/tiddlywiki.github.com).

Best regards,

Yakov

суббота, 22 марта 2025 г. в 07:56:58 UTC+3, samp...@gmail.com:

[sam paul]

Hello Yakov,

For example, I want write a macro to run TW5 D3.js plugin in TWC like this:

<<runv5plugin
    <$data title="D3.js" text="<Here is the json format content of D3.js plugin for TW5>"> type="application/json" plugin-type="plugin"
    <$data title="Example" text="demo code to run D3.js, <$d3cloud data="CloudData" spiral={{$:/spiral}}/>">
>>

This should add two tiddlers "D3.js" and "Example" to TW5 base file and display it in a tiddler. I am trying to find a way to manipulate dom in iframe maybe use a proxy? Is that possible?

Best,

Yanshu

[sam paul]

Hello.

I think I have made it. I made a prototype plugin to run TW5 plugin and display TW5 tiddler inside TWC:

https://wangyenshu.github.io/#innerTW5Plugin

This is the D3 Plugin of TW5 inside TWC: https://wangyenshu.github.io/#innerTW5Plugin.

You can save the JSON format of TW5 plugins/tiddlers in a few TWC tiddlers and use the macro <<innerTW5Plugin tid:"D3" tid:"CloudData" tid:"GraphData" tid:"D3Showcase" width:"80%" height:"400px">> to 'import' them into the iframed TW5.

Best,

Yanshu

[sam paul]

For installation, you need to copy the tiddler https://wangyenshu.github.io/#innerTW5Plugin and the tiddler https://wangyenshu.github.io/#TW5Sandbox. The TW5Sandbox tiddler stores the html code as a TW5 'template'. You can use your favorite TW5 as 'template' as well.

[Yakov]

Hi Yanshu,

congrats with the new prototype! I'm getting an empty iframe on your demo page, though.

That's an interesting approach that you've come up with (passing macros to render to TW5 through the url hash), it's more flexible indeed (I thought about just editing TW5 and using an iframe with a permalink to a specific tiddler), and looks promising. It is limited about the storage and interaction (doesn't allow to save data from the TW5 to TWC, for instance if you use some kind of date-time picker etc; if you need to store the edits permanently, whether this works depends on savers), but that's possible to overcome in some scenarios: you can try using localStorage, or interact with iframe to get data from it (should probably be possible since they are on the same domain and normally both local).

A small suggestion to simplify the code: you can use JSON.stringify and JSON.parse to convert JS objects to JSON and back, without concatenating all those ",\n", "]", and other bits.

Thanks for sharing, this indeed gives quite a room of possibilities, maybe it's time to check how well TW5 plugins are indexed and if there are some helpful ones!

Best regards,

Yakov

среда, 26 марта 2025 г. в 23:51:34 UTC+3, samp...@gmail.com:

[sam paul]

Hello Yakov.

Thanks for your feedback.

The D3 demo is https://wangyenshu.github.io/#innerTW5PluginDemoD3. I am sorry to put the wrong link.

Have you tried viewing the demo using firefox? Chrome doesn't support Iframe larger than 2MB, so it may not work on chrome.

I test on android Firefox focus and on linux. They all work.

Best,

Yanshu

[Yakov]

Yeah, you're right, it works in Firefox, unlike in Chrome, thanks!

пятница, 28 марта 2025 г. в 03:37:02 UTC+3, samp...@gmail.com:

[sam paul]

Dear Yakov,

I made JSONEditorPlugin and NewTW5TiddlerMacro to make creating and editing TW5 tiddler inside tiddlywiki classic easier. 

The JSONEditorPlugin adds a GUI interface to edit json. You can try it here: https://wangyenshu.github.io/YS_Extension/#innerTW5PluginDemo . After clicking the 'edit JSON' button in the Toolbar, there will be a GUI interface that allows modifying property values also adding and deleting property. The output can be used directly in InnerTW5Plugin.

The NewTW5TiddlerMacro adds macro NewTW5Tiddler to generate TW5 Tiddler and filling with current timestamps. You try it here: https://wangyenshu.github.io/YS_Extension/#NewTW5TiddlerMacro .

Source:

https://github.com/wangyenshu/JSONEditorPlugin/blob/main/JSONEditorPlugin.js

https://github.com/wangyenshu/NewTW5TiddlerMacro/blob/main/NewTW5TiddlerMacro.js

Best,

Sam

[sam paul]

Update: I changed TW5Sandbox to use the external core hosted on my GitHub repository. So InnerTW5Plugin should work in Chrome. In this demo, the TW5 Template for InnerTW5Plugin I used is https://wangyenshu.github.io/YS_Extension/TW5Sandbox.html. You can customise it as you want.

I don't know if tiddlywiki5 has an official CDN for the tiddlywiki external core. If so, the configuration will be even simpler.

Best,

Sam