Create a simple ReactJs plugin and export to my tiddlywiki

[yedhukrishna]

Hi,

I want to create a simple “helloworld” plugin using ReactJs. And I want to import this plugin into my Tiddly Wiki. Is it possible? Can anyone guide me on how to do that?
(I am new here.)

Thanks,

[Ste_W]

What do you want it to do?
Print ‘Hello world’ on a button press?
Open with hello world as the default?

A little more detail on your goals would help

[yedhukrishna]

Yeah…A plugin with a name called " myplugin", should have a button, and when it is clicked a “hello world” message should display. Then export this plugin, and import it to Tiddly Wiki, and make it work there. Is it possible?
(I want to create a plugin using ReactJs, then import this plugin to Tiddlywiki.)

[arunnbabu81]

@linonetwo has some experience with reactjs plug ins I think. May be he can help. What's your opinion about using ReactJS in the plugin? - #5 by linonetwo

[yedhukrishna]

any update on this? I am struggling to import the plugin

[pmario]

TW is a framework, that can handle automatic refresh on its own. Adding external frameworks only adds bloat.

Have a closer look at: https://tiddlywiki.com/dev/#Javascript%20Widget%20Tutorial to do it the TW way

[linonetwo]

@yedhukrishna Have you read reactjs plugin’s demo site? It contains a demo plugin (a button). Github link is also on that site. (Don’t forget give it a star)

https://tiddly-gittly.github.io/tw-react/

And follow https://tiddlywiki.com/dev/#Using%20ES2016%20for%20Writing%20Plugins to use Modern.TiddlyDev to use TS with react.

@yedhukrishna

I am struggling to import the plugin

Install it from CPL https://tw-cpl.netlify.app/#linonetwo%2Ftw-react:Index%20linonetwo%2Ftw-react

or drag it from github release (You can install -dev version from here, which is good for debug) Releases · tiddly-gittly/tw-react · GitHub

[linonetwo]

Also read source code of my react plugins, they all follow the Modern.TiddlyDev, so pattern is the same, very good for learning.

1. GitHub - tiddly-gittly/slate-write: A WYSIWYG editor for TiddlyWiki. (WIP)
2. GitHub - tiddly-gittly/tiddlywiki-whiteboard: Tiny little drawing app in TW, using tldraw. Providing diagram widget and whiteboard view.
3. GitHub - tiddly-gittly/flow-chart: Building workflow editors, flowcharts and diagrams, with reaviz/reaflow

[yedhukrishna]

@linonetwo

And follow https://tiddlywiki.com/dev/#Using%20ES2016%20for%20Writing%20Plugins to use Modern.TiddlyDev to use TS with react.

I cloned this and edited the text mentioned in their doc, I can see the changes in the site as well. My doubt is, how can in import this to another wiki? Have a local plugin in my machine and want to import this to another wiki ?

[linonetwo]

If you use Modern.TiddlyDev, you can add a git tag to a commit, it will auto-package your plugin.

Don’t forget to read its doc site, it’s all documented.

And you can register your auto-packaged-github-released plugin to CPL. This way is also documented on CPL site.

[yedhukrishna]

Ah…that’s cool.
But I was thinking that I created a sample plugin a “hello world” on the browser, and want to import this to another tiddly that I’m running on my machine without doing a git push. Does the drag-and-drop work?

[linonetwo]

If you only want to create a plugin for yourself or for test, you can npm run build (or something) and get .json format plugin. You can drag json to any wiki to import it.

But to share with people, it is not recommend to do so, because user won’t get push update without CPL.

[yedhukrishna]

I did the same…ran npm run build, but not sure where I can get the json file…but I got a build folder which have some hashed js values.

[linonetwo]

Usually build is enough. See dist folder on upper right

[yedhukrishna]

This is nice, thanks for your effort. I got and imported to my wiki just for testing. It worked, you saved my life.

Also, I can have any number of complex ReactJs functions and import to Tiddly right.

[yedhukrishna]

I have one question, i followed this link ,

https://tiddlywiki.com/dev/#Using%20ES2016%20for%20Writing%20Plugins

but could not find .babelrc folder to add es2015.
Also , ```
npm install --global babel-cli babel-presets-es2015

User
 npm install --global babel-cli babel-presets-es2015
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/babel-presets-es2015 - Not found
npm ERR! 404 
npm ERR! 404  'babel-presets-es2015@*' is not in this registry.
 i was getting this error. 
Thats why I ran npm install --global babel-cli @babel/preset-env 



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 <button onClick={this.handleClick}>Click me</button>;
  }
}

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);
  }
}

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

I was trying this do it via the react component, but   ReactDOM.render(<MyReactComponent />, parent, nextSibling); its not exporting the react component properly.

Could you please guide me?

[linonetwo]

No need for that, just use Modern framework linked above, and start writing. Don’t install anything else. We are not using babel anymore, only esbuild. Dev doc need to be update.

[yedhukrishna]

okay…Then how can I add another component without ReactDom? Could you please change this code?

// Render the React component into the parent
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();

ReactDOM.render(<MyReactComponent />, parent, nextSibling);

}
}

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

[linonetwo]

You may need to read example code to learn usage:

tiddly-gittly/tw-react/blob/master/src/example.tsx

It uses another component in this file

tiddly-gittly/tw-react/blob/master/src/exampleFunction.tsx

[yedhukrishna]

I have one issue,
currently, I’m using modern.tiddly dev code,

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

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

render(parent: Element, nextSibling: Element) {
this.parentDomNode = parent;
this.execute();
const containerElement = $tw.utils.domMaker(‘p’, {
text: ‘This is a widget!’,
});
parent.insertBefore(containerElement, nextSibling);
this.domNodes.push(containerElement);
}
}

// 此处导出的模块变量名RandomNumber将作为微件（widget）的名称。使用<$RandomNumber/>调用此微件。
// Widget在tiddlywiki中的条目名、源文件以及源文件.meta文件名和Widget名字可以不一致。
// 比如Widget条目名可以为My-Widget,源文件以及源文件.meta文件名可以称为index.ts与index.ts.meta。最终的Widget名却是：RandomNumber，且使用<$RandomNumber/>调用此微件。
// 如果为一个脚本文件添加了 .meta 将会被视为入口文件。
declare let exports: {
RandomNumber: typeof ExampleWidget;
};
exports.RandomNumber = ExampleWidget;

here I saved this file as index.ts,
but if I change the extension to index.tsx, then it’s not working. I tried to build it, and also deleted the dist folder, but still the same.
Why is that behavior, how do i fix it ?