feat: new hooks

Author: linonetwo

package-lock.json

@@ -7,7 +7,7 @@
   ],
   "license": "MIT",
   "name": "tw-react",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "url": "https://github.com/tiddly-gittly/tw-react",
   "author": "Lin Onetwo",
   "types": "dist/lib/index.d.ts",
@@ -34,15 +34,15 @@
     "@types/eslint-plugin-prettier": "3.1.0",
     "@types/fs-extra": "9.0.13",
     "@types/prettier": "2.6.0",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
-    "@typescript-eslint/eslint-plugin": "5.20.0",
-    "@typescript-eslint/parser": "5.20.0",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "5.21.0",
+    "@typescript-eslint/parser": "5.21.0",
     "archiver": "5.3.1",
-    "browserslist": "4.20.2",
+    "browserslist": "4.20.3",
     "esbuild": "0.14.38",
     "esbuild-plugin-browserslist": "0.4.9",
-    "eslint": "8.13.0",
+    "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-standard": "17.0.0",
     "eslint-config-standard-with-typescript": "21.0.1",
@@ -55,7 +55,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.4.0",
+    "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-security": "1.5.0",
     "eslint-plugin-security-node": "1.1.1",
     "eslint-plugin-typescript-sort-keys": "2.1.0",
@@ -68,14 +68,14 @@
     "tiddlywiki": "5.2.2",
     "tslib": "2.4.0",
     "tw5-plugin-packer": "0.0.10",
-    "tw5-typed": "0.2.3",
+    "tw5-typed": "0.2.6",
     "typescript": "4.6.3",
-    "typesync": "0.9.0",
-    "react": "^18.0.0",
+    "typesync": "0.9.1",
+    "react": "^18.1.0",
     "zx": "6.1.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }

package.json

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { Widget } from 'tiddlywiki';
+
+/**
+ * A widget context for rendering child widgets
+ *
+ * > it will read the current context value from the closest matching Provider above it in the tree
+ * > https://reactjs.org/docs/context.html#reactcreatecontext
+ * so even multiple context is created in different react widget, the value may not collide, I think...
+ *
+ *  */
+export const ParentWidgetContext = createContext<Widget | undefined>(undefined);

src/hooks/context.ts

@@ -1,2 +1,4 @@
 export * from './useFilter';
 export * from './useRenderTiddler';
+export * from './useWidget';
+export * from './context';

src/hooks/index.ts

@@ -1,15 +1,5 @@
-import { createContext, RefObject, useContext, useEffect } from 'react';
-import { Widget } from 'tiddlywiki';
-
-/**
- * A widget context for rendering child widgets
- *
- * > it will read the current context value from the closest matching Provider above it in the tree
- * > https://reactjs.org/docs/context.html#reactcreatecontext
- * so even multiple context is created in different react widget, the value may not collide, I think...
- *
- *  */
-export const ParentWidgetContext = createContext<Widget | undefined>(undefined);
+import { RefObject, useContext, useEffect } from 'react';
+import { ParentWidgetContext } from './context';
 
 export function useRenderTiddler(tiddlerTitle: string, containerRef: RefObject<HTMLDivElement>) {
   const parentWidget = useContext(ParentWidgetContext);

src/hooks/useRenderTiddler.ts

@@ -0,0 +1,25 @@
+import { RefObject, useContext, useEffect } from 'react';
+import { IParseTreeNode } from 'tiddlywiki';
+import { ParentWidgetContext } from './context';
+
+export function useWidget(parseTreeNode: IParseTreeNode, containerRef: RefObject<HTMLDivElement>) {
+  const parentWidget = useContext(ParentWidgetContext);
+  useEffect(() => {
+    if (containerRef.current === null) {
+      return;
+    }
+    if (parentWidget === undefined) {
+      throw new Error('Your plugin have a bug: `parentWidget` is undefined, you should use `<ParentWidgetContext.Provider value={props.parentWidget}>`, see tw-react for document.');
+    }
+    const newWidgetNode = new $tw.rootWidget.widgetClasses.widget(parseTreeNode, {
+      document,
+      parentWidget,
+      recursionMarker: 'yes',
+      mode: 'block',
+      importPageMacros: true,
+    });
+
+    newWidgetNode.render(containerRef.current, null);
+    parentWidget.children.push(newWidgetNode);
+  }, [parseTreeNode, containerRef.current]);
+}

src/hooks/useWidget.ts

@@ -3,4 +3,4 @@
  * And won't be packaged into the plugin bundle.
  */
 export * from './hooks';
-export type { IReactWidget, ReactWidget } from './widget';
+export type { IReactWidget, ReactWidget, IDefaultWidgetProps } from './widget';

src/index.ts

@@ -9,7 +9,13 @@ const Widget = require('$:/core/modules/widgets/widget.js').widget as typeof IWi
 const ReactDom: ReactDomType = require('react-dom');
 const React: ReactType = require('react');
 
-export class ReactWidget<P extends {} = Record<string, any>> extends Widget {
+export interface IDefaultWidgetProps {
+  parentWidget?: IWidget;
+}
+export class ReactWidget<
+  IUserProps extends Record<string, any> = {},
+  IProps extends IUserProps & IDefaultWidgetProps = IDefaultWidgetProps & Record<string, any> & any,
+> extends Widget {
   private root: ReturnType<typeof ReactDom.createRoot> | undefined;
   private containerElement: HTMLDivElement | undefined;
 
@@ -31,7 +37,7 @@ export class ReactWidget<P extends {} = Record<string, any>> extends Widget {
     | ReactType.ComponentClass<any>
     | null = null;
 
-  protected getProps: () => P = () => ({} as P);
+  protected getProps: () => IProps = () => ({ parentWidget: this } as unknown as IProps);
 
   /**
    * Lifecycle method: Render this widget into the DOM
@@ -44,6 +50,9 @@ export class ReactWidget<P extends {} = Record<string, any>> extends Widget {
       return;
     }
     const currentProps = this.getProps();
+    if (typeof currentProps === undefined || currentProps === null) {
+      currentProps.parentWidget = this;
+    }
     // TODO: is this useful?
     // this.renderChildren(parent,nextSibling);