Create a simple ReactJs plugin and export to my tiddlywiki

pmario · April 28, 2024, 2:53pm

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 · April 29, 2024, 5:59am

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

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 · April 29, 2024, 6:02am

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

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

yedhukrishna · April 29, 2024, 6:10am

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 · April 29, 2024, 6:24am

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 · April 29, 2024, 2:09pm

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 · April 29, 2024, 4:01pm

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 · April 29, 2024, 4:51pm

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 · April 30, 2024, 5:12am

Usually build is enough. See dist folder on upper right

yedhukrishna · April 30, 2024, 8:38am

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 · May 1, 2024, 10:23am

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 · May 3, 2024, 5:09am

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 · May 3, 2024, 6:17am

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 · May 3, 2024, 2:17pm

You may need to read example code to learn usage:

github.com

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

import './widget-type';

/**
 * // use this commonjs syntax if you are NOT using https://github.com/tiddly-gittly/Modern.TiddlyDev
 * const Widget = (require('$:/plugins/linonetwo/tw-react/widget.js') as { widget: IReactWidgetConstructor }).widget;
 */
import { widget as Widget } from '$:/plugins/linonetwo/tw-react/widget.js';
import type * as ReactType from 'react';
import type * as ReactDomType from 'react-dom';
import type * as ReactDomClientType from 'react-dom/client';
import { ExampleFunction } from './exampleFunction';

// you should set these to external in your build tool like `external: ['$:/*', 'react', 'react-dom'],`
const ReactDom = require('react-dom') as typeof ReactDomType & typeof ReactDomClientType;
const React = require('react') as typeof ReactType;

interface IProps {
  /**
   * Tiddler to contain the serialized JSON component state
   */

This file has been truncated. show original

It uses another component in this file

github.com

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

import { useEffect, useState } from 'react';

export function ExampleFunction() {
  const [counter, counterSetter] = useState(0);
  useEffect(() => {
    // not using counter variable to prevent hook reinvoke every time counter changed
    let localCounter = 0;
    const handle = setInterval(() => {
      counterSetter(++localCounter);
    }, 1000);
    return () => {
      clearInterval(handle);
    };
  }, []);
  return <span>{counter}</span>;
}

yedhukrishna · May 4, 2024, 9:16am

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 ?

linonetwo · May 5, 2024, 2:17pm

It should work, look at tw-react/src/example.js.meta at master · tiddly-gittly/tw-react · GitHub that accompany the example.tsx,

Also see I export the App component in slate-write/src/slate-write/editor/editor.tsx at master · tiddly-gittly/slate-write · GitHub , and only use it as reactComponent = App; in slate-write/src/slate-write/editor/index.ts at master · tiddly-gittly/slate-write · GitHub

linonetwo · May 5, 2024, 2:18pm

If you are confused, look at the source code under the hood, read the source code tw-react/src/widget.ts at master · tiddly-gittly/tw-react · GitHub , just like we need to read tiddlywiki’s source when dev tw plugins.

yedhukrishna · May 5, 2024, 2:30pm

I will clone the code and try to run it again.
Currently I was working with modern.tiidlydev code.
Maybe I will clone your code and try to run.

I hope ,I can just clone your master branch code then run using ,
npm run build,

Do I need to anything else ?

yedhukrishna · May 5, 2024, 2:53pm

i cloned the master branch and followed the document,
when I run, npm run dev
Plugin $:/plugins/linonetwo/tw-react has been saved to dist/out-dev/$__plugins_linonetwo_tw-react.json.
Successfully packed 1 plugins.

Node.js 16 actions are deprecated. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.% , I am getting a message like this.
Is that possible to run locally? Or should I use the json file to run ?

linonetwo · May 6, 2024, 5:38am

Why not just download the json from github release?

And you should use modern framework for dev, not using tw-react’s repo. You only need to learn its code with GPT4’s help, not using it directly.

So basically follow the modern tiddlydev’s doc site, and when writing widget, refer to examples on tw-react’s repo, and other tw-react based project.