How can I create a Javascript macro?

I’m struggling a little to get started with Javascript macros on TiddlyWiki… I’ve found this dev page https://tiddlywiki.com/dev/index.html#JavaScript%20Macros that tells that the functional examples are a good starting point… So I’ve tried to copy them for creating a new one as the following:

  1. I’ve copied all the content from the macro $:/core/modules/macros/jsontiddlers.js to a new tiddler called $:/core/modules/macros/testmacro.js.
  2. I’ve added the Type to application/javascript on my $:/core/modules/macros/testmacro.js Tiddler, just like the original file
  3. I’ve added the module-type to macro on my $:/core/modules/macros/testmacro.js Tiddler, just like the original file.
  4. I’ve substituted the content of the Tiddler changing jsontiddlers to testmacro… So the new content is:
/*\
title: $:/core/modules/macros/testmacro.js
type: application/javascript
module-type: macro

Macro to output tiddlers matching a filter to JSON

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/*
Information about this macro
*/

exports.name = "testmacro";

exports.params = [
    {name: "filter"},
    {name: "spaces"}
];

/*
Run the macro
*/
exports.run = function(filter,spaces) {
    return this.wiki.getTiddlersAsJson(filter,$tw.utils.parseInt(spaces));
};

})();

For testing if it was working, I tried to use this macro just like I use jsontiddlers… So, the following macro returns to me in JSON all the tiddlers that start with D:

<$macrocall $name="jsontiddlers" filter=[prefix[D]] $output="text/raw"/>

And my new created macro doesn’t return anything:

<$macrocall $name="testmacro" filter=[prefix[D]] $output="text/raw"/>

I think I’m probably missing some steps… What am I missing in the process of creating a Javascript macro? :thinking:

Did you save and reload?

Javascript macros are a royal pain in the caboose.

If there is a way to avoid javascript, I highly recommend it.

But I loathe javascript, so huge bias. Poor documentation on how to get even basic javascript macros makes it all worse.

The only javascript macro I’ve done, you’ll find in this post.

Because sometimes, there just isn’t any choice but to lean on javascript.

If there is an ice cube’s chance of doing what you need without, are you game to explore?

Ah, my bad… I’ve restarted TiddlyWiki (I’m running the Node.js version) and reloaded the page. Now it’s working. Thanks!

I was actually trying to solve this other thread Can I filter all the tree of tags under a root element as JSON? - #10 by Rafael without using Javascript… I’ve started exploring Javascript Macros because I only need to exclude one key value from the JSON that the jsontiddlers creates. I think probably there’s a parameter with the wikitext syntax that can solve that as well… But I didn’t manage to figure it out so far :confused:

Yeah, I did a quick exit stage left within reading the first few lines of that thread.

What kind of visualization are you looking to create?

I think the ultimate solution there is recursion. Recursion is when you have a macro call itself over and over until it reaches a termination point. As it is calling itself it builds a string which finally gets returned from the last macro invocation.

I’m considering creating a grid structure for my Tiddlers… I need to make a specific structure of tags for that and have icons on all Tiddlers. By now I’m considering something like this D3.js view with icons (FORCE DIRECTED LAYOUT / Sandra Becker / Observable):

Or resuscitate an old project that I did that was focused on representing information with images:

I like TiddlyWiki, but I miss ways of representing the information with images on it… And I didn’t manage to make it the way I wanted with TiddlyMap, so I’m considering creating it myself even if it takes a while…

Silly question.

Have you already looked into the TiddlyWiki D3 plugin?

I know nothing about it other than it exists.

I saw this plugin… But honestly, I didn’t get it well and I don’t know about its limitations. In my mind now, taking the data that I need out from TiddlyWiki using an iframe and using this data with traditional web development will be more comfortable for me, since I’ll be more in control of the specific functionalities that I need…

1 Like

I totally get that.

BTW, my trick to avoid javascript involves creating dynamic HTML + javascript that I feed to an iframe.

Serendipity: I also happened to be playing around with Google Charts for visualizations today.

In case there’s anything interesting there for you, check out Coding fun: Pie Chart with Google Charts, via some trickery

Aside: What you are doing, had me curious to check out, for the giggles, Google Charts’ Treemaps. Not as nice as either example you gave, but still pretty interesting :left- click on something to drill down, right-click to reverse-drill up(?)

Exactly, I think these big-picture visualizations are very useful… The TiddlyWiki idea that I have in mind is more or less like this one: https://tiddlywiki.muygle.com/

I particularly think it’s nice having a root element with toc-tabbed-external-nav and all children as toc… In the end, I still have some space for creating a mind map of icons on each click that I give:

The iframe idea would be to fill this space that is left with a mind map of icons… Where each icon represents a tiddler. This map could be dynamic as I click on my Tiddler hierarchy too…

@Rafael I am excited to see what you are trying to achieve, but like others I think people capable of javascript writing quickly fall to javascript, Some of us here are superusers without javascript as a tool we use, but if you phrase your question well, we can introduce you to the tiddlywiki way.

I didn’t read the whole thread only the first post and this linked post.

If you want to use d3.js you will need to create tiddlywiki widgets. Macros will fail, because they can’t redraw themself. Macros are text substitutions only. – They can’t do what you describe here.

Also D3.js is huge in file size. :confused:

D3.js heavily manipulates the DOM, which isn’t the best fit for TW, since it redraws the DOM when needed.

If you want to have a “force directed” graph, you should probably have a look a SVG based library. Try a search with these terms: force directed javascript library

BUT First you’ll need to understand how widgets are created.

The goal as I understand it is to create a JSON structure (with the macro) and then feed it to an html page inside an iframe. Will that have the same problems with refresh?

No. I think that would be OK. Macros can be used by buttons, action-widgets and may be wikify to create the JSON.