feat: remove initilizer prop and add useConstruct

cam-inc · Sep 6, 2022 · 048e457 · 048e457
1 parent e5d9edf
commit 048e457
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 63 deletions.
diff --git a/packages/core/__tests__/smoke/dev-server/src/plugins.tsx b/packages/core/__tests__/smoke/dev-server/src/plugins.tsx
@@ -6,7 +6,14 @@ import EditorJS, {
   InlineToolConstructorOptions,
   ToolConfig,
 } from '@editorjs/editorjs';
-import { h, useState, useWatch, createPlugin, useMount } from '../../../../src';
+import {
+  h,
+  useState,
+  useWatch,
+  createPlugin,
+  useMount,
+  useConstruct,
+} from '../../../../src';
 import type { PDJSX } from '../../../../src/';
 
 const WithHooks = () => {
@@ -30,14 +37,11 @@ const WithHooks = () => {
     console.log('[useWatch] value changed!: ', value);
   }, [value]);
 
-  useWatch(() => {
-    console.log('[useWatch] api changed!: ', api);
-  }, [api]);
-
-  const initializer = ({ api, config }: InlineToolConstructorOptions) => {
-    setApi(api);
-    setConfig(config);
-  };
+  const params = useConstruct<InlineToolConstructorOptions>();
+  if (params != null) {
+    setApi(params.api);
+    setConfig(params.config);
+  }
 
   const save = (blockContent: HTMLElement) => {
     return {
@@ -64,7 +68,6 @@ const WithHooks = () => {
 
   return (
     <tool
-      initializer={initializer}
       save={save}
       static_get_toolbox={{
         title: 'SampleWithHooks',
@@ -110,15 +113,14 @@ const WithHooks = () => {
 
 const WithContentEdiable = () => {
   const [data, setData] = useState<BlockToolData | null>(null);
-  const initializer = ({ data }: BlockToolConstructorOptions) => {
-    setData(data);
-  };
-  useWatch(() => {
-    console.log('[useWatch data] ', data?.value);
-  }, [data]);
+
+  const params = useConstruct<BlockToolConstructorOptions>();
+  if (params != null) {
+    setData(params.data);
+  }
+
   return (
     <tool
-      initializer={initializer}
       static_get_toolbox={{ title: 'SampleWithContentEdiable', icon: '✍️' }}
       save={() => {}}
     >

diff --git a/packages/core/src/create-plugin.ts b/packages/core/src/create-plugin.ts
@@ -44,10 +44,7 @@ export const createPlugin = (
 
       // NOTE: Call constructor after generating dom.
       // @ts-expect-error
-      if (this.initializer) {
-        // @ts-expect-error
-        this.initializer(this.params);
-      }
+      options.constructorParams = this.params;
 
       return wrapper;
     } else {

diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
@@ -72,14 +72,10 @@ export const createPluginClass = (
   if (pluginProps) {
     class PluginDeclarative {
       private params: any;
-      private initializer: NonNullable<VNode['pluginProps']>['initializer'];
 
       public render: () => HTMLElement;
 
       constructor(params: any) {
-        if (pluginProps?.initializer) {
-          this.initializer = pluginProps.initializer;
-        }
         this.params = params;
         this.render = render;
       }

diff --git a/packages/core/src/hooks.ts b/packages/core/src/hooks.ts
@@ -341,4 +341,6 @@ export const useMount = (callback: Effect) => {
   }
 };
 
-export const useConstruct = () => {};
+export const useConstruct = <P = any>() => {
+  return options.constructorParams as P | undefined;
+};
diff --git a/packages/core/src/options.ts b/packages/core/src/options.ts
@@ -16,6 +16,8 @@ export type Options = {
   pluginName: string | null;
   pluginNameWhenRendering: string | null;
   calledUseMount: boolean;
+
+  constructorParams: any;
 };
 
 export const options = {} as Options;
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -156,12 +156,9 @@ export namespace PDJSX {
 
   export interface BlockTune<P = {}> extends FunctionComponent<P> {}
 
-  type PluginInitializer<P = { [key: string]: any }> = (params: P) => void;
-
   export interface ToolAttributes<C = any> {
     children: ComponentChild | ComponentChild[];
     save: (blockContent: C) => void;
-    initializer?: PluginInitializer<BlockToolConstructorOptions>;
     validate?: (savedData: BlockToolData) => boolean;
     // TODO: JSX as props
     renderSettings?: {
@@ -194,7 +191,6 @@ export namespace PDJSX {
     surround: (range: Range) => void;
     checkState: (selection: { [key: string]: any }) => void;
     renderActions?: () => JSX.IntrinsicElements;
-    initializer?: PluginInitializer<InlineToolConstructorOptions>;
     clear?: () => void;
 
     // getter
@@ -207,15 +203,6 @@ export namespace PDJSX {
 
   export interface BlockTuneAttributes<C = any> {
     children: ComponentChild | ComponentChild[];
-    /**
-     * @see https://github.com/codex-team/editor.js/blob/6f36707f67e498ec0933144df2c72ba07ab1899d/types/block-tunes/block-tune.d.ts#L54...L59
-     */
-    initializer?: PluginInitializer<{
-      api: API;
-      config?: ToolConfig;
-      block: BlockAPI;
-      data: BlockTuneData;
-    }>;
     save?: () => { [key: string]: any };
     wrap?: (blockContent: C) => JSX.IntrinsicElements;
 

diff --git a/packages/tool-block-paragraph/src/index.tsx b/packages/tool-block-paragraph/src/index.tsx
@@ -1,5 +1,5 @@
 /* @jsx h */
-import { createPlugin, h, useEffect, useState } from '@pdejs/core';
+import { createPlugin, h, useWatch, useState, useConstruct } from '@pdejs/core';
 
 import type {
   API,
@@ -30,8 +30,8 @@ const Paragraph = () => {
   const [blockApi, setBlockApi] = useState<BlockAPI | null>(null);
   const [readOnly, setReadOnly] = useState(false);
 
-  useEffect(() => {
-    console.log('[useEffect] data ', data);
+  useWatch(() => {
+    console.log('[useWatch] data ', data);
     if (data != null) {
       setValue(data.value);
     }
@@ -44,19 +44,14 @@ const Paragraph = () => {
     icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
   };
 
-  const initializer = ({
-    api,
-    data,
-    config,
-    block,
-    readOnly,
-  }: BlockToolConstructorOptions) => {
-    setApi(api);
-    setData(data);
-    setConfig(config);
-    setBlockApi(block ?? null);
-    setReadOnly(!!readOnly);
-  };
+  const params = useConstruct<BlockToolConstructorOptions>();
+  if (params != null) {
+    setApi(params.api);
+    setData(params.data);
+    setConfig(params.config);
+    setBlockApi(params.block ?? null);
+    setReadOnly(!!params.readOnly);
+  }
 
   const save = (container: HTMLElement) => {
     return {
@@ -93,7 +88,6 @@ const Paragraph = () => {
 
   return (
     <tool
-      initializer={initializer}
       static_get_toolbox={toolbox}
       save={save}
       validate={validate}

diff --git a/packages/tool-inline-marker/src/index.tsx b/packages/tool-inline-marker/src/index.tsx
@@ -1,5 +1,5 @@
 /* @jsx h */
-import { createPlugin, h, useEffect, useState } from '@pdejs/core';
+import { createPlugin, h, useWatch, useState, useConstruct } from '@pdejs/core';
 import type {
   API,
   InlineTool,
@@ -16,9 +16,10 @@ const Marker = () => {
   const [api, setApi] = useState<API | null>(null);
   const [marked, setMarked] = useState(false);
 
-  const initializer = ({ api }: InlineToolConstructorOptions) => {
-    setApi(api);
-  };
+  const params = useConstruct<InlineToolConstructorOptions>();
+  if (params != null) {
+    setApi(params.api);
+  }
 
   const unwrap = (range: Range) => {
     const mark = api?.selection.findParentTag('mark');
@@ -48,17 +49,16 @@ const Marker = () => {
     setMarked(!!mark);
   };
 
-  useEffect(() => {
+  useWatch(() => {
     console.log('api: ', api);
   }, [api]);
 
-  useEffect(() => {
+  useWatch(() => {
     console.log('marked ', marked);
   }, [marked]);
 
   return (
     <inlineTool
-      initializer={initializer}
       static_get_isInline={true}
       surround={surround}
       checkState={checkState}