piral-search 1.0.0-pre.2296 → 1.0.1-beta.5640

package/src/actions.test.ts

@@ -1,6 +1,7 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions } from 'piral-core';
 import { createActions as createSearchActions } from './actions';
-import { createActions, createListener } from 'piral-core';
 
 const state = {
   search: {
@@ -14,7 +15,7 @@ const state = {
 
 describe('Search Action Module', () => {
   it('appendSearchResults cont appends new items with still loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       search: {
         input: 'yo',
@@ -23,11 +24,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.appendSearchResults(['a', 'b'], false);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       search: {
         input: 'yo',
@@ -40,7 +41,7 @@ describe('Search Action Module', () => {
   });
 
   it('appendSearchResults stop appends new items without still loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -49,11 +50,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.appendSearchResults(['a'], true);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -66,7 +67,7 @@ describe('Search Action Module', () => {
   });
 
   it('prependSearchResults cont prepends new items with still loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       search: {
         input: 'yo',
@@ -75,11 +76,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.prependSearchResults(['a', 'b'], false);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       search: {
         input: 'yo',
@@ -92,7 +93,7 @@ describe('Search Action Module', () => {
   });
 
   it('prependSearchResults stop prepends new items without still loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -101,11 +102,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.prependSearchResults(['a'], true);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -118,7 +119,7 @@ describe('Search Action Module', () => {
   });
 
   it('resetSearchResults cont resets the search results while still loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -127,11 +128,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.resetSearchResults('yo', true);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: [1, 2],
       search: {
         input: 'yo',
@@ -144,7 +145,7 @@ describe('Search Action Module', () => {
   });
 
   it('resetSearchResults stop resets the search results without loading', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       search: {
         input: 'yo y',
@@ -153,11 +154,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.resetSearchResults('yo y', false);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       search: {
         input: 'yo y',
@@ -170,7 +171,7 @@ describe('Search Action Module', () => {
   });
 
   it('setSearchInput sets the input field accordingly', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       search: {
         input: 'yo y',
@@ -179,11 +180,11 @@ describe('Search Action Module', () => {
           items: ['c'],
         },
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.setSearchInput('test input');
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       search: {
         input: 'test input',
@@ -197,11 +198,11 @@ describe('Search Action Module', () => {
 
   it('immediately resets with loading false if some value is given but no provider found', () => {
     state.search.input = 'foo';
-    const globalState = Atom.of(state as any);
+    const globalState: any = create(() => state);
     const ctx = createActions(globalState, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
-    expect(deref(globalState).search.results.loading).toBe(false);
+    expect(globalState.getState().search.results.loading).toBe(false);
   });
 
   it('immediately resets with loading true if some value is given and a provider is found', () => {
@@ -213,38 +214,38 @@ describe('Search Action Module', () => {
       clear() {},
       cancel() {},
     };
-    const globalState = Atom.of(state as any);
+    const globalState: any = create(() => state);
     const ctx = createActions(globalState, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
-    expect(deref(globalState).search.results.loading).toBe(true);
+    expect(globalState.getState().search.results.loading).toBe(true);
   });
 
   it('immediately resets with loading false if no value is given implicitly', () => {
     state.search.input = '';
-    const globalState = Atom.of(state as any);
+    const globalState: any = create(() => state);
     const ctx = createActions(globalState, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
-    expect(deref(globalState).search.results.loading).toBe(false);
+    expect(globalState.getState().search.results.loading).toBe(false);
   });
 
   it('immediately resets with loading false if no value is given explicitly', () => {
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     const dispose = ctx.triggerSearch('');
     dispose();
-    expect(deref(gs).search.results.loading).toBe(false);
+    expect(gs.getState().search.results.loading).toBe(false);
   });
 
   it('immediately resets with loading false if no value is given explicitly though immediate', () => {
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     const dispose = ctx.triggerSearch('', true);
     dispose();
-    expect(deref(gs).search.results.loading).toBe(false);
+    expect(gs.getState().search.results.loading).toBe(false);
   });
 
   it('resets with loading true if no value is given explicitly', () => {
@@ -256,11 +257,11 @@ describe('Search Action Module', () => {
       clear() {},
       cancel() {},
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch('foo');
-    expect(deref(gs).search.results.loading).toBe(true);
+    expect(gs.getState().search.results.loading).toBe(true);
   });
 
   it('walks over all search providers', () => {
@@ -272,7 +273,7 @@ describe('Search Action Module', () => {
       foo: { search, clear, cancel },
       bar: { search, clear, cancel },
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
@@ -290,7 +291,7 @@ describe('Search Action Module', () => {
         cancel() {},
       },
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
@@ -309,7 +310,7 @@ describe('Search Action Module', () => {
         cancel,
       },
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
@@ -329,7 +330,7 @@ describe('Search Action Module', () => {
         cancel,
       },
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     const dispose = ctx.triggerSearch();
@@ -350,7 +351,7 @@ describe('Search Action Module', () => {
         cancel() {},
       },
     };
-    const gs = Atom.of(state as any);
+    const gs: any = create(() => state);
     const ctx = createActions(gs, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.triggerSearch();
@@ -359,17 +360,17 @@ describe('Search Action Module', () => {
   });
 
   it('registerSearchProvider and unregisterSearchProvider', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       registry: {
         foo: 5,
         searchProviders: {},
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     ctx.defineActions(createSearchActions());
     ctx.registerSearchProvider('foo', 10 as any);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -379,7 +380,7 @@ describe('Search Action Module', () => {
       },
     });
     ctx.unregisterSearchProvider('foo');
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,

package/src/components.tsx

@@ -1,7 +1,5 @@
-import * as React from 'react';
 import { getPiralComponent } from 'piral-core';
-import { SearchContainerProps, SearchInputProps, SearchResultProps } from './types';
 
-export const PiralSearchContainer: React.ComponentType<SearchContainerProps> = getPiralComponent('SearchContainer');
-export const PiralSearchInput: React.ComponentType<SearchInputProps> = getPiralComponent('SearchInput');
-export const PiralSearchResult: React.ComponentType<SearchResultProps> = getPiralComponent('SearchResult');
+export const PiralSearchContainer = getPiralComponent('SearchContainer');
+export const PiralSearchInput = getPiralComponent('SearchInput');
+export const PiralSearchResult = getPiralComponent('SearchResult');

package/src/create.test.ts

@@ -1,8 +1,13 @@
-import { Atom, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createSearchApi } from './create';
 
 function createMockContainer() {
-  const state = Atom.of({});
+  const state = create(() => ({
+    registry: {
+      wrappers: {},
+      extensions: {},
+    },
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -10,11 +15,18 @@ function createMockContainer() {
       emit: jest.fn(),
       defineActions() {},
       state,
+      readState(cb) {
+        return cb(state.getState());
+      },
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
+      },
+    } as any,
+    api: {
+      meta: {
+        name: '',
       },
     } as any,
-    api: {} as any,
   };
 }
 

package/src/create.ts

@@ -1,8 +1,20 @@
-import { isfunc } from 'piral-base';
 import { ReactChild, isValidElement, createElement } from 'react';
-import { buildName, PiralPlugin, Dict, withApi, PiletApi, GlobalStateContext } from 'piral-core';
+import {
+  isfunc,
+  buildName,
+  PiralPlugin,
+  Dict,
+  withApi,
+  PiletApi,
+  GlobalStateContext,
+  withAll,
+  GlobalState,
+  withRootExtension,
+} from 'piral-core';
 import { createActions } from './actions';
 import { DefaultContainer, DefaultInput, DefaultResult } from './default';
+import { Search } from './Search';
+import { SearchInput } from './SearchInput';
 import {
   PiletSearchApi,
   SearchSettings,
@@ -86,7 +98,7 @@ function getSearchProviders(providers: Array<InitialSearchProvider>) {
 }
 
 function toChild(content: SearchResultType, api: PiletApi, context: GlobalStateContext): ReactChild {
-  if (typeof content === 'string' || isValidElement(content)) {
+  if (typeof content === 'string' || isValidElement<any>(content)) {
     return content;
   } else {
     const component = withApi(context, content, api, 'extension');
@@ -103,6 +115,29 @@ function wrapResults(
   return results.map((item) => toChild(item, api, context));
 }
 
+function withSearch(searchProviders: Dict<SearchProviderRegistration>, query: string, items: Array<ReactChild>) {
+  return (state: GlobalState): GlobalState => ({
+    ...state,
+    components: {
+      SearchContainer: DefaultContainer,
+      SearchInput: DefaultInput,
+      SearchResult: DefaultResult,
+      ...state.components,
+    },
+    registry: {
+      ...state.registry,
+      searchProviders,
+    },
+    search: {
+      input: query,
+      results: {
+        loading: false,
+        items,
+      },
+    },
+  });
+}
+
 /**
  * Creates new Pilet API extensions for search and filtering.
  */
@@ -112,26 +147,13 @@ export function createSearchApi(config: SearchConfig = {}): PiralPlugin<PiletSea
   return (context) => {
     context.defineActions(createActions(actionConfig));
 
-    context.dispatch((state) => ({
-      ...state,
-      components: {
-        SearchContainer: DefaultContainer,
-        SearchInput: DefaultInput,
-        SearchResult: DefaultResult,
-        ...state.components,
-      },
-      registry: {
-        ...state.registry,
-        searchProviders: getSearchProviders(providers),
-      },
-      search: {
-        input: query,
-        results: {
-          loading: false,
-          items: results,
-        },
-      },
-    }));
+    context.dispatch(
+      withAll(
+        withSearch(getSearchProviders(providers), query, results),
+        withRootExtension('piral-search', Search),
+        withRootExtension('piral-search-input', SearchInput),
+      ),
+    );
 
     return (api, target) => {
       const pilet = target.name;

package/src/types.ts

@@ -1,5 +1,5 @@
-import { ReactChild, ComponentType, ReactElement } from 'react';
-import {
+import type { ReactChild, ComponentType, ReactElement, ReactNode } from 'react';
+import type {
   Dict,
   Disposable,
   PiletApi,
@@ -90,6 +90,10 @@ export interface SearchContainerProps {
    * Gets if the results are still gathered.
    */
   loading: boolean;
+  /**
+   * The search to display.
+   */
+  children?: ReactNode;
 }
 
 export interface SearchInputProps {
@@ -99,7 +103,12 @@ export interface SearchInputProps {
 
 export interface SearchResultComponentProps extends BaseComponentProps {}
 
-export interface SearchResultProps {}
+export interface SearchResultProps {
+  /**
+   * The search results to display.
+   */
+  children?: ReactNode;
+}
 
 export type SearchResultType = string | ReactElement<any> | AnyComponent<SearchResultComponentProps>;
 

package/src/useDebounce.test.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useDebounce } from './useDebounce';
+
+jest.mock('react');
+
+describe('Debounce Hook Module', () => {
+  it('just returns initial value if nothing has been changed', () => {
+    const usedEffect = jest.fn();
+    const usedState = jest.fn((value) => [value]);
+    (React as any).useState = usedState;
+    (React as any).useEffect = usedEffect;
+    const result = useDebounce('foo');
+    expect(usedEffect).toHaveBeenCalled();
+    expect(usedState).toHaveBeenCalled();
+    expect(result).toBe('foo');
+  });
+
+  it('invokes useEffect immediately, but does not set value immediately', () => {
+    const usedEffect = jest.fn((fn) => fn());
+    const setValue = jest.fn();
+    const usedState = jest.fn((value) => [value, setValue]);
+    (React as any).useState = usedState;
+    (React as any).useEffect = usedEffect;
+    useDebounce('foo');
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it('invokes useEffect immediately, but sets value immediately if 0', () => {
+    jest.useFakeTimers();
+    const usedEffect = jest.fn((fn) => fn());
+    const setValue = jest.fn();
+    const usedState = jest.fn((value) => [value, setValue]);
+    (React as any).useState = usedState;
+    (React as any).useEffect = usedEffect;
+    useDebounce('foo', 0);
+    jest.advanceTimersByTime(0);
+    expect(setValue).toHaveBeenCalled();
+  });
+
+  it('invokes useEffect immediately, but sets value after wait time', () => {
+    jest.useFakeTimers();
+    const usedEffect = jest.fn((fn) => fn());
+    const setValue = jest.fn();
+    const usedState = jest.fn((value) => [value, setValue]);
+    (React as any).useState = usedState;
+    (React as any).useEffect = usedEffect;
+    expect(setValue).not.toHaveBeenCalled();
+    useDebounce('foo', 300);
+    jest.advanceTimersByTime(300);
+    expect(setValue).toHaveBeenCalled();
+  });
+
+  it('invokes useEffect immediately and resets timer if needed', () => {
+    jest.useFakeTimers();
+    const usedEffect = jest.fn((fn) => fn());
+    const setValue = jest.fn();
+    const usedState = jest.fn((value) => [value, setValue]);
+    (React as any).useState = usedState;
+    (React as any).useEffect = usedEffect;
+    expect(setValue).not.toHaveBeenCalled();
+    useDebounce('foo', 300);
+    jest.advanceTimersByTime(250);
+    usedEffect.mock.results[0].value();
+    jest.advanceTimersByTime(50);
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});

package/src/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook that returns the debounced (i.e., delayed) value.
+ * Useful when user input should not fire immediately, but rather
+ * only after a certain timespan without any changes passed.
+ * @param value The value to consider.
+ * @param delay The timespan to pass before applying the value.
+ */
+export function useDebounce<T>(value: T, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/useSearch.test.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as piralCore from 'piral-core';
-import { useSearch } from './useSearch';
 
 const state = {
   search: {
@@ -11,19 +9,28 @@ const state = {
   },
 };
 
-(piralCore as any).useGlobalState = (select: any) => select(state);
-
-(piralCore as any).useDebounce = (value) => value;
-
 const availableActions = {
   setSearchInput: jest.fn(),
   triggerSearch: jest.fn(),
 };
 
-(piralCore as any).useActions = () => availableActions;
+const useGlobalState = jest.fn((select: any) => select(state));
+const useActions = jest.fn(() => availableActions);
+const useDebounce = jest.fn((value) => value);
+
+jest.mock('piral-core', () => ({
+  ...jest.requireActual('piral-core'),
+  useGlobalState,
+  useActions,
+}));
+
+jest.mock('./useDebounce.ts', () => ({
+  useDebounce,
+}));
 
 describe('Search Hook Module', () => {
   it('just returns current input value', () => {
+    const { useSearch } = require('./useSearch');
     const usedEffect = jest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useRef = (current) => ({ current });
@@ -32,6 +39,7 @@ describe('Search Hook Module', () => {
   });
 
   it('sets the value using the action', () => {
+    const { useSearch } = require('./useSearch');
     const usedEffect = jest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useRef = (current) => ({ current });
@@ -42,6 +50,7 @@ describe('Search Hook Module', () => {
   });
 
   it('triggers the search without immediate mode', () => {
+    const { useSearch } = require('./useSearch');
     const usedEffect = jest.fn((fn) => fn());
     (React as any).useEffect = usedEffect;
     (React as any).useRef = (current) => ({ current });
@@ -51,6 +60,7 @@ describe('Search Hook Module', () => {
   });
 
   it('cancels the current search', () => {
+    const { useSearch } = require('./useSearch');
     const usedEffect = jest.fn((fn) => fn());
     const cancel = jest.fn();
     (React as any).useEffect = usedEffect;

package/src/useSearch.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { useGlobalState, useDebounce, useActions, Disposable } from 'piral-core';
+import { useGlobalState, useActions, Disposable } from 'piral-core';
+import { useDebounce } from './useDebounce';
 
 /**
  * Hook that yields the possibility of searching in Piral.