From bd726c7ddb43a26381785687ff5ce11c222b2033 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 21 May 2021 16:52:59 +0800 Subject: [PATCH] fix: types --- packages/core/src/editor/query.tsx | 4 +- packages/core/src/editor/store.tsx | 1 + packages/core/src/editor/useInternalEditor.ts | 26 +++++---- .../src/manager/LayerManagerProvider.tsx | 5 +- .../layers/src/manager/useLayerManager.tsx | 11 ++-- .../src/extend/slate/SlateNodeContext.tsx | 4 +- .../utils/src/EventHandlers/EventHandlers.ts | 3 +- packages/utils/src/useCollector.tsx | 54 ++++++------------- packages/utils/src/useMethods.ts | 4 +- packages/utils/src/utilityTypes.ts | 4 ++ 10 files changed, 50 insertions(+), 66 deletions(-) diff --git a/packages/core/src/editor/query.tsx b/packages/core/src/editor/query.tsx index 105765458..f1d353c25 100644 --- a/packages/core/src/editor/query.tsx +++ b/packages/core/src/editor/query.tsx @@ -167,12 +167,12 @@ export function QueryMethods(state: EditorState) { } }); - let childrenNodes = []; + let childrenNodes: NodeTree[] = []; if (reactElement.props && reactElement.props.children) { childrenNodes = React.Children.toArray( reactElement.props.children - ).reduce((accum, child) => { + ).reduce((accum, child: any) => { if (React.isValidElement(child)) { accum.push(_().parseReactElement(child).toNodeTree(normalize)); } diff --git a/packages/core/src/editor/store.tsx b/packages/core/src/editor/store.tsx index d2eb6e0e4..6da31848d 100644 --- a/packages/core/src/editor/store.tsx +++ b/packages/core/src/editor/store.tsx @@ -95,6 +95,7 @@ export const useEditorStore = ( typeof QueryMethods > ): EditorStore => { + // TODO: fix type return useMethods( ActionMethodsWithConfig, { diff --git a/packages/core/src/editor/useInternalEditor.ts b/packages/core/src/editor/useInternalEditor.ts index 7e7b037df..26a03f524 100644 --- a/packages/core/src/editor/useInternalEditor.ts +++ b/packages/core/src/editor/useInternalEditor.ts @@ -1,14 +1,15 @@ import { useCollector, + useCollectorReturnType, QueryCallbacksFor, wrapConnectorHooks, ChainableConnectors, } from '@craftjs/utils'; -import React, { useContext, useMemo } from 'react'; +import { useContext, useMemo } from 'react'; import { EditorContext } from './EditorContext'; import { QueryMethods } from './query'; -import { ActionMethodsWithConfig } from './store'; +import { EditorStore } from './store'; import { CoreEventHandlers } from '../events/CoreEventHandlers'; import { useEventHandler } from '../events/EventContext'; @@ -19,26 +20,23 @@ export type EditorCollector = ( query: QueryCallbacksFor ) => C; -export type useInternalEditorReturnType = (C extends null - ? useCollector - : useCollector) & { +export type useInternalEditorReturnType = useCollectorReturnType< + EditorStore, + C +> & { inContext: boolean; - store: EditorContext; + store: EditorStore; connectors: ChainableConnectors< CoreEventHandlers['connectors'], React.ReactElement >; }; -export function useInternalEditor(): useInternalEditorReturnType; export function useInternalEditor( - collector: EditorCollector -): useInternalEditorReturnType; -export function useInternalEditor( - collector?: any + collector?: EditorCollector ): useInternalEditorReturnType { const handlers = useEventHandler(); - const store = useContext(EditorContext); + const store = useContext(EditorContext); const collected = useCollector(store, collector); const connectors = useMemo( @@ -47,8 +45,8 @@ export function useInternalEditor( ); return { - ...(collected as any), - connectors: connectors || {}, + ...collected, + connectors, inContext: !!store, store, }; diff --git a/packages/layers/src/manager/LayerManagerProvider.tsx b/packages/layers/src/manager/LayerManagerProvider.tsx index 2abed0337..89f0f32d3 100644 --- a/packages/layers/src/manager/LayerManagerProvider.tsx +++ b/packages/layers/src/manager/LayerManagerProvider.tsx @@ -2,7 +2,7 @@ import { useMethods } from '@craftjs/utils'; import React from 'react'; import { LayerMethods } from './actions'; -import { LayerManagerContext } from './context'; +import { LayerManagerContext, LayerStore } from './context'; import { EventManager } from '../events'; import { LayerOptions } from '../interfaces'; @@ -11,6 +11,7 @@ import { DefaultLayer } from '../layers'; export const LayerManagerProvider: React.FC<{ options: Partial; }> = ({ children, options }) => { + // TODO: fix type const store = useMethods(LayerMethods, { layers: {}, events: { @@ -22,7 +23,7 @@ export const LayerManagerProvider: React.FC<{ renderLayer: DefaultLayer, ...options, }, - }); + }) as LayerStore; return ( diff --git a/packages/layers/src/manager/useLayerManager.tsx b/packages/layers/src/manager/useLayerManager.tsx index 609b60c84..a4566406d 100644 --- a/packages/layers/src/manager/useLayerManager.tsx +++ b/packages/layers/src/manager/useLayerManager.tsx @@ -1,18 +1,17 @@ -import { useCollector } from '@craftjs/utils'; +import { useCollector, useCollectorReturnType } from '@craftjs/utils'; import { useContext } from 'react'; -import { LayerMethods } from './actions'; -import { LayerManagerContext } from './context'; +import { LayerManagerContext, LayerStore } from './context'; import { LayerState } from '../interfaces'; -export function useLayerManager(): useCollector; +export function useLayerManager(): useCollectorReturnType; export function useLayerManager( collector?: (state: LayerState) => C -): useCollector; +): useCollectorReturnType; export function useLayerManager( collector?: (state: LayerState) => C -): useCollector { +): useCollectorReturnType { const { store } = useContext(LayerManagerContext); return useCollector(store, collector); } diff --git a/packages/slate/src/extend/slate/SlateNodeContext.tsx b/packages/slate/src/extend/slate/SlateNodeContext.tsx index b2ac43456..655173cf2 100644 --- a/packages/slate/src/extend/slate/SlateNodeContext.tsx +++ b/packages/slate/src/extend/slate/SlateNodeContext.tsx @@ -28,8 +28,8 @@ export const SlateNodeContextProvider: React.FC = enabled: initialEnabledValue, }) => { const { id } = useNode(); - const [value, setValue] = useState([]); - const [enabled, setEnabled] = useState(initialEnabledValue || true); + const [value, setValue] = useState([]); + const [enabled, setEnabled] = useState(initialEnabledValue || true); const currentEditorSelectionRef = useRef(editor.selection); currentEditorSelectionRef.current = editor.selection; diff --git a/packages/utils/src/EventHandlers/EventHandlers.ts b/packages/utils/src/EventHandlers/EventHandlers.ts index 57277e128..aae5ec1d3 100644 --- a/packages/utils/src/EventHandlers/EventHandlers.ts +++ b/packages/utils/src/EventHandlers/EventHandlers.ts @@ -4,6 +4,7 @@ import { CraftEventListener, EventHandlerConnectors, CraftDOMEvent, + Connector, } from './interfaces'; import { isEventBlockedByDescendant } from './isEventBlockedByDescendant'; @@ -74,7 +75,7 @@ export abstract class EventHandlers = {}> { get connectors(): EventHandlerConnectors { const connectors = this.handlers(); - return Object.keys(connectors).reduce( + return Object.keys(connectors).reduce>( (accum, connectorName) => ({ ...accum, [connectorName]: (el, required, options) => { diff --git a/packages/utils/src/useCollector.tsx b/packages/utils/src/useCollector.tsx index 43b22804a..15832a6bd 100644 --- a/packages/utils/src/useCollector.tsx +++ b/packages/utils/src/useCollector.tsx @@ -1,53 +1,33 @@ import { useState, useCallback, useRef, useEffect } from 'react'; -import { - CallbacksFor, - MethodsOrOptions, - StateFor, - QueryCallbacksFor, - QueryMethods, - SubscriberAndCallbacksFor, -} from './useMethods'; +import { SubscriberAndCallbacksFor } from './useMethods'; +import { ConditionallyMergeRecordTypes } from './utilityTypes'; -type Actions = { - actions: CallbacksFor; - query: QueryCallbacksFor; +type CollectorMethods> = { + actions: S['actions']; + query: S['query']; }; -export type useCollector< - M extends MethodsOrOptions, - Q extends QueryMethods | null, +export type useCollectorReturnType< + S extends SubscriberAndCallbacksFor, C = null -> = C extends null ? Actions : C & Actions; - -export function useCollector< - M extends MethodsOrOptions, - Q extends QueryMethods | null ->(store: SubscriberAndCallbacksFor): useCollector; - -export function useCollector< - M extends MethodsOrOptions, - Q extends QueryMethods | null, - C ->( - store: SubscriberAndCallbacksFor, - collector: (state: StateFor, query: Q) => C -): useCollector; - -export function useCollector< - M extends MethodsOrOptions, - Q extends QueryMethods | null, - C ->(store: SubscriberAndCallbacksFor, collector?: any) { +> = ConditionallyMergeRecordTypes>; +export function useCollector, C>( + store: S, + collector?: ( + state: ReturnType['current'], + query: S['query'] + ) => C +): useCollectorReturnType { const { subscribe, getState, actions, query } = store; const initial = useRef(true); - const collected = useRef(null); + const collected = useRef(null); const collectorRef = useRef(collector); collectorRef.current = collector; const onCollect = useCallback( - (collected): useCollector => { + (collected) => { return { ...collected, actions, query }; }, [actions, query] diff --git a/packages/utils/src/useMethods.ts b/packages/utils/src/useMethods.ts index 390832de6..86003b23f 100644 --- a/packages/utils/src/useMethods.ts +++ b/packages/utils/src/useMethods.ts @@ -71,7 +71,7 @@ export type CallbacksFor< >; }; } - : never; + : {}; export type Methods = any, Q = any> = ( state: S, @@ -131,7 +131,7 @@ export type QueryCallbacksFor = M extends QueryMethods< canRedo: () => boolean; }; } - : never; + : {}; export type PatchListenerAction = { type: keyof CallbacksFor; diff --git a/packages/utils/src/utilityTypes.ts b/packages/utils/src/utilityTypes.ts index 2e8e39abd..1719516a7 100644 --- a/packages/utils/src/utilityTypes.ts +++ b/packages/utils/src/utilityTypes.ts @@ -3,3 +3,7 @@ export type Delete = Pick>; export type OverwriteFnReturnType void, R> = ( ...args: Parameters ) => Delete, R>; +export type ConditionallyMergeRecordTypes< + C, + S extends Record +> = C extends null ? S : C & S;