Create a new plugin in TiddlyWiki

Developers
#1

Hi,

I want to create a new plugin in Tiddly wiki, can anyone guide me? It can be just normal hello world plugin

Thanks

#2

Do any of these dev site offerings help?:

Or how about these tools?:

And of course, this tiddler from the main site is essential:

#3

Yeah, these are helpful. I am new here, I aim to simply create a plugin through Tiddly Wiki, A plugin can be a simple one, just a hello world text.
Could you please guide me?

#4

Plug-ins are just a group of tiddlers with some special features like enable/disable feature and a few more. I think it will be better if you could describe what you are trying to achieve by creating plug-ins. More specific questions and detailed use-case description might give you more answers from other forum members.

Are you from kerala ? Welcome to the tiddlywiki forum :smiley:

#6

Hi, yeah…
I have experience in ReactJs and noob in Tiddly. Started two days before.
I want to have a simple plugin, for instance just an alert box, and use the plugin in the local host.
I know that we can export and import Tiddlers, but I thought it nice to know about plugins.

Also, want to know about API calls and DB operations from Tiddly.
It would be nice if you could share some valuable insights.

Thanks

#7

I have no programming background (I am a doctor), so I don’t think I can help you much regarding such things. I work mostly using wikitext. I am sure there will be others who can help you in this forum. Just wait for some more time.

#8
2 Likes
#9

I thought I just did.

#10

My Guidance is STOP, Don’t write a plugin, before you find out if it can be done with Native TiddlyWiki script.

Ask us, but native is best because you don’t create dependencies on your plugin, you learn something, the result is more likely to be fully compatible with tiddlywiki and will become part of the backwards compatibility guarantee.

  • TiddlyWiki is a platform with a whole set of smarts built in, if you proceed to a plugin so soon in your tiddlywiki journey, you will only contribute to your own and others confusion;
    • For example writing a plugin for something that does not need a plugin, will mislead people into thinking you need a plugin for that feature, when they do not.
    • I expect you may miss something and cause unintended consequences.

If you are just learning about plugins install some of the existing ones and review what they do and how they are structured.

#11

I am surprised by this answer (I think it is not the first time you mention this), that I think misleading because a plugin can contain only what you call “TiddlyWiki script”.
This is indeed the case in most of the plugins I have in my wikis.
A plugins is a convenient way to package a feature and share, install or upgrade it in different wikis.

BR,

Eskha

3 Likes
#12

I see there is a difference here, writing a plugin often means one that includes JavaScript, that is what I discourage if it can be done in tiddlywiki script.

The alternative to “writing a plugin” may be “packaging a plugin”, creating a plugin containing tiddlers with or without tags and TiddlyWiki script, primarily for packaging/distribution.

  • You can even package data only into a plugin.

The Original post is quite vague and does not have much detail about the “plugin” to be “written”. See;

The response by @yedhukrishna then mentions;

  • This suggests @yedhukrishna is looking at a code solution.
  • The idea of a “hello world” text would be to use the AlertMechanism only then would you consider packaging it into a tiddler.
    • This is different to creating a plugin to do an alert.

Yes we can help you, but perhaps we need to find out more about what and why you want to create a plugin.

  • You may find looking at existing plugins teaches you a lot. Look at the differences between one containing javascript and ones that do not.
    • Use the contents tab in a plugin to see its content rather than edit the plugin tiddler, because it is a JSON package.
  • As I said before using code for a solution tell us what you want to do and we can see if it can be done in native tiddlywiki script.
    • I have some very simple steps to turn a set of tiddler into plugins.
  • I suggest make something work in a Wiki and later you can package it manually or using some of the aforementioned tools.

Welcome to talk.tiddlywiki !

#13

I got the strong impression that the OP just wanted to learn the mechanism. I did the same thing myself some time ago, just trying to learn my way through TW tools. There doesn’t have to be some underlying goal beyond learning how they work. However when I pointed out the documentation, the OP just repeated the original request for guidance without asking a more specific question. I made a snarky reply and have dropped it since.

1 Like
#14

Hey,

I have already rephrased my question in another post ,

I was trying to understand tiddly and want to explore all the stuffs in tiddly

#15

Yeah…I’m completely new to tiddly. So, I was trying to figure out how the stuffs are working.

If you check this post then here you can see that I was trying to create a new plugin using reactjs

#16

I mean if you any sample solutions it would be really helpful,

#17

Hey…I just want to try and see how the stuffs are working…if I don’t try them I don’t learn anything…

#18

So what have you tried so far? Where are you stuck?

#19

Create a simple ReactJs plugin and export to my tiddlywiki - #16 by yedhukrishna ,
I have posted the same

I was trying to create a plugin using react,
I did it with normal js and ts. It worked pretty well. However, integrating React component is not working for me.

#20

import { widget as Widget } from ‘$:/core/modules/widgets/widget.js’;
import { IChangedTiddlers } from ‘tiddlywiki’;
import ‘./index.css’;
import React from ‘react’;
import ReactDOM from ‘react-dom’;

// Define your React component
class MyReactComponent extends React.Component {
handleClick = () => {
alert(‘Button clicked!’);
};

render() {
return Click me;
}
}

class ExampleWidget extends Widget {
refresh(_changedTiddlers: IChangedTiddlers) {
return false;
}

render(parent: Element, nextSibling: Element) {
this.parentDomNode = parent;
this.execute();

// Render the React component into the parent
ReactDOM.render(<MyReactComponent />, parent, nextSibling); // The issue is here

}
}

// Export the ExampleWidget
declare let exports: {
Radnom: typeof ExampleWidget;
};
exports.Radnom = ExampleWidget;

The code I created,

#21

Others are taking on attempts at combining React with TW. You can probably search this forum for threads on that subject. But I would definitely suggest that this is not a good introduction to building plugins. React is a competing way to structure and build web applications. I’m sure it can be done, but it doesn’t seem like a good fit with TW; the models are too different.

Instead, if this is about learning TW, I’d suggest that you make something simpler that might be reusable across several different wikis. I gave links above to a few different ways to develop plugins. Perhaps you can choose one of them, and start a matching wiki. Pick a topic that might span multiple wikis, and then start thinking of things you might want to have on that topic in multiple wikis.

For a demo topic, let’s choose People. I think I’m going to want to have a number of wikis that let me have tiddlers tagged Person that show certain basic demographic information and a picture. What do I want to have?

  • First I want a ViewTemplate to show a Person. I can build this right away with just a fake Person or two in my wiki. As a first step, I would create one or two Persons with the data I think I’d want, and then create a a tiddler tagged $:/tags/ViewTemplate, and wrap its content in <% if [<currentTiddler>tag[Person]] %> / <% endif %> tags. Then I would use whichever of the plugin-building mechanisms I choose to include this tiddler in my plugin. And I would drag those People tiddlers and my plugin to an empty wiki. Do they render correctly? Then my tiddler is built correctly.

  • But wait, I want styling on this content! Then I would wrap the content of that tiddler in <div class="something.unique.to.my.plugin"> / </div> tags, and add a new tiddler tagged $:/tags/Stylesheet, with CSS content that uses that class name. Now include this in the plugin, and again starting with an empty wiki (do this every time), drag in the plugin and a person or two. If your new styles are applied correctly, your plugin is working as expected.

  • Keep doing this, extending the functionality a little bit at a time, adding successful updates to the plugin, and testing from a empty wiki to make sure it’s still doing what you like. Perhaps you’ll add

    • A Person entry screen
    • A TagTiddler for Person showing some details of all the Persons in your wiki
    • A customized field editor for choosing the person’s gender
    • A cascading tiddler to better control certain layout of your Person tiddlers
    • ??? and much more …

As well as testing against an empty wiki, occasionally test this against (copies of!) existing wikis, to make sure nothing breaks. If something does break, drop everything and fix that problem first, while your recent changes are still on your mind.

When all that is working reasonably well, add a README to your plugin explaining to all users (including a future version of yourself; you will forget!) how it works.

I do this myself in the Node environment. Any of the techniques I linked to earlier should help, though.

1 Like