@startlibs/core 1.0.3 → 1.0.4

package/lib/index.js

@@ -1770,7 +1770,8 @@ var createLazyStatefulContext = function createLazyStatefulContext(toPromise, de
 
   var useSelectLazyValue = function useSelectLazyValue(selector, deps) {
     var isEqual = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultIsEqual;
-    var value = useSelectValue(selector, deps, isEqual);
+    var withTransition = arguments.length > 3 ? arguments[3] : undefined;
+    var value = useSelectValue(selector, deps, isEqual, withTransition);
     var utils = useUtils();
 
     if (value === EMPTY_VALUE) {
@@ -1794,8 +1795,8 @@ var createLazyStatefulContext = function createLazyStatefulContext(toPromise, de
     });
   };
 
-  var useValuePromise = function useValuePromise(selector, deps, isEqual) {
-    var value = useSelectValue(selector, deps, isEqual);
+  var useValuePromise = function useValuePromise(selector, deps, isEqual, withTransition) {
+    var value = useSelectValue(selector, deps, isEqual, withTransition);
     var utils = useUtils();
     return useCallback(function () {
       if (value === EMPTY_VALUE) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@startlibs/core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Startlibs Core",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {

package/src/SlotFill.jsx

@@ -1,165 +0,0 @@
-import React, {useContext, useEffect, useLayoutEffect, useMemo, useRef} from 'react'
-import ReactDOM from 'react-dom'
-import styled from 'styled-components'
-import _ from 'lodash/fp'
-import {_s, callIfFunction} from '@startlibs/utils'
-import {willUseSharedState, useConstant} from '@startlibs/core'
-
-export const SlotContext = React.createContext(new Map())
-const [useFillHookState, useFillHookStateRef] = willUseSharedState()
-const [useHiddenFillHookState, useHiddenFillHookStateRef] = willUseSharedState()
-
-const DEFAULT_CONTEXT = new Map()
-
-export const SlotProvider = ({children}) => {
-
-  return <SlotContext.Provider value={DEFAULT_CONTEXT}>
-    {children}
-    <React.Suspense fallback={null}><FillHooks/></React.Suspense>
-    <HiddenFillHooks/>
-  </SlotContext.Provider>
-}
-
-export const Slot = ({name,children,...rest}) => {
-
-  const ref = useRef()
-  const slotInfo = useConstant({ref})
-
-  const slots = useContext(SlotContext)
-
-  useLayoutEffect(() => {
-    const previous = slots.get(name)
-    const updates = previous?.updates || []
-    if (previous?.children) {
-      // reparent
-    }
-    slots.set(name,_.flow(
-      _.update('infos',_.union([slotInfo]))
-    )(previous))
-    updates.forEach(v => v({}))
-    return () => {
-      const previous = slots.get(name)
-      previous.infos = _.without([slotInfo],previous.infos)
-      if (!previous.infos?.length && !previous.updates?.length) {
-        slots.delete(name)
-      }
-    }
-  }, [name])
-
-  return children
-    ? <>
-      <div data-id={name} {...rest} ref={ref}/>
-      {React.Children.map(children,c => React.cloneElement(c,{...c.props,name,stack:Number.MIN_SAFE_INTEGER}))}
-    </>
-    : <div data-id={name} {...rest} ref={ref}/>
-
-}
-
-const Invisible = styled.div`display:none`
-
-const FillBeforeFlip = ({name, children, slot}) => {
-  const slots = useContext(SlotContext)
-  const ref = useRef()
-  useLayoutEffect(() => {
-    const infos = slots.get(name)?.infos || []
-    const mounted = _.flatMap(({ref}) => ref?.current,infos)
-    const clones = []
-    const getClone = () => {
-      const cloned = ref.current.cloneNode(true)
-      cloned.className = 'JS-fill-flip'
-      clones.push(cloned)
-      return cloned
-    }
-    mounted.map(_ => _.appendChild(getClone()))
-    return () => {
-      clones.forEach(el => el.remove())
-    }
-  },[])
-  return <Invisible ref={ref}>{children}</Invisible>
-}
-
-const useFillState = (name,stack) => {
-  const forceUpdate = React.useState(false)[1];
-  const slots = useContext(SlotContext)
-  const renderSlot = slots.get(name)
-  const maxStack = _.max(renderSlot?.stacks)
-  const onStack = !_.isFinite(maxStack) || maxStack === stack
-  useLayoutEffect(() => {
-
-    const slot = slots.get(name)
-    const updatedSlot = _.flow(
-      _.update('updates',_.union([forceUpdate])),
-      _.update('stacks',_.union([stack])),
-    )(slot)
-    slots.set(name, updatedSlot)
-    updatedSlot.updates.forEach(v => v({}))
-    return () => {
-      const previous = slots.get(name)
-      const index = previous.updates.indexOf(forceUpdate)
-      const next = _.flow(
-        _.update('updates',_s.removeAt(index)),
-        _.update('stacks',_s.removeAt(index))
-      )(previous)
-      slots.set(name,next)
-      next.updates.forEach(v => v({}))
-    }
-  },[])
-
-  return [renderSlot,onStack]
-}
-
-
-export const Fill = ({name, children, stack = 0, mountBeforeFlip}) => {
-  const [slot,onStack] = useFillState(name,stack)
-  if (slot?.infos && onStack) {
-    return slot?.infos.map((info) => info.ref?.current && ReactDOM.createPortal(callIfFunction(children,info),info.ref.current))
-  } else if (mountBeforeFlip) {
-    return <FillBeforeFlip name={name} slot={slot}>{children}</FillBeforeFlip>
-  } else {
-    return null
-  }
-}
-
-
-const FillHooks = ({}) => {
-  const [hooked] = useFillHookState({})
-  return Object.entries(hooked)
-    .map(([name, childs]) => childs.map(({children}, i) => <Fill key={name + i} name={name}>{children}</Fill>))
-}
-
-let uid = 0
-export const useFill = (name, children, inputs) => {
-  const [, set] = useFillHookStateRef()
-  const key = useRef(uid++)
-  useLayoutEffect(() => {
-    if (children) {
-      set(_.update([name], (list = []) => {
-        const index = _.findIndex(['key',key.current],list)
-        const value = {children,key:key.current}
-        if (index >= 0 ) {
-          return _.set([index],value,list)
-        } else {
-          return list.concat(value)
-        }
-      } ))
-    } else {
-      set(_.update([name], _.differenceBy('key',_, [{children,key:key.current}])))
-    }
-  }, inputs || children)
-
-  useLayoutEffect(() =>
-    () => set(_.update([name], _.differenceBy('key',_, [{key:key.current}])))
-  ,[])
-}
-
-const HiddenFillHooks = ({}) => {
-  const [hookedChildren] = useHiddenFillHookState({})
-  return <div>{Object.values(hookedChildren)}</div>
-}
-
-export const useHiddenFill = (children, inputs) => {
-  const [, set] = useHiddenFillHookStateRef()
-  const [uid] = useMemo(()=>_.uniqueId(""),[])
-  set(_.set([uid], children ? React.cloneElement(children,{key:uid}) : null))
-  useEffect(()=> () => set(_.unset([uid])),[])
-}

package/src/StartlibsProvider.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import _ from 'lodash/fp'
-import {fixMediaQuery,callIfFunction} from '@startlibs/utils'
-import {SlotProvider, clearPopups} from '@startlibs/core'
-
-export const StartlibsContext = React.createContext({})
-export const PopupContext = React.createContext({})
-export const StartlibsMetacontext = React.createContext(()=>{})
-
-export const StartlibsConsumer = StartlibsContext.Consumer
-
-const wrappeStyle = {height: '100%'}
-
-
-export class StartlibsProvider extends React.Component {
-
-  componentDidMount() {
-    fixMediaQuery()
-    const addVHFix = () => {
-      let vh = window.innerHeight * 0.01;
-      document.documentElement?.style?.setProperty('--vh', `${vh}px`);
-    }
-    window.addEventListener('resize', _.debounce(200, addVHFix))
-    addVHFix()
-  }
-
-  openToggles = new Map()
-
-  popupToggleRender = ({isOpen,close},ref) => {
-    if (isOpen && !this.openToggles.has(ref)) {
-      this.closePopup()
-      this.openToggles.set(ref,close)
-    }
-  }
-  closePopup = () => {
-    clearPopups()
-  }
-
-  startlibsMeta = new Map()
-
-  getMeta = (key,initValue) => {
-    const exists = this.startlibsMeta.get(key)
-    if (exists) return exists
-    this.startlibsMeta.set(key,callIfFunction(initValue))
-    return initValue
-  }
-
-  render() {
-    return <StartlibsContext.Provider value={this.props.value}>
-      <StartlibsMetacontext.Provider value={this.getMeta}>
-      <PopupContext.Provider value={this.popupToggleRender}>
-        <div style={wrappeStyle} onClick={this.closePopup}>
-          <SlotProvider>
-              {this.props.children}
-          </SlotProvider>
-        </div>
-      </PopupContext.Provider>
-      </StartlibsMetacontext.Provider>
-    </StartlibsContext.Provider>
-  }
-}

package/src/hocs/WithLazyResource.jsx

@@ -1,32 +0,0 @@
-import React, {useReducer} from 'react'
-import _ from 'lodash/fp'
-import {ifUndefined} from '@startlibs/utils'
-
-const addExtraProp = (element, extra, override = true) => React.cloneElement(
-  element,
-  override ? {...element.props,...extra} : {...extra,...element.props},
-  element.props.children
-)
-
-export const WithLazyPlaceholder = ({value, fallback, children, forwardProps = false,...props}) => {
-  return <React.Suspense
-    fallback={React.Children.map(children(fallback,{isLoading:true}), (child) => React.isValidElement(child) ? addExtraProp(child, {isLoading: true}, false) : child)}
-  >
-    <Load value={value} children={children} forwardProps={forwardProps && props}/>
-  </React.Suspense>
-}
-
-
-export const WithLazyResource = ({value, wrap,fallback,children,forwardProps = false,...props}) => {
-
-  return (wrap || fallback !== undefined)
-    ? <React.Suspense fallback={ifUndefined(fallback,null)}><Load value={value} forwardProps={forwardProps && props} children={children}/></React.Suspense>
-    : <Load value={value} children={children} forwardProps={forwardProps && props}/>
-}
-
-const Load = ({value,children,forwardProps}) => {
-  const loaded = _.isArray(value) ? (value.forEach(v => v.promise()) || value.map(v => v.read())) : value.read()
-  const [,update] = useReducer((s) => s+1, 0)
-  const refresh = () => Promise.all(_.isArray(value) ? value.map(v => v.refresh().promise()) : [value.refresh().promise()]).then(update)
-  return forwardProps ? addExtraProp(children(loaded,{refresh,update}),forwardProps) : children(loaded, {refresh,update})
-}

package/src/hocs/WithRef.js

@@ -1,20 +0,0 @@
-// @flow
-import React from 'react'
-
-export class WithRef extends React.Component {
-
-  constructor(props) {
-    super(props)
-    const total = props.length || props.children.length
-    const refs = new Array(total)
-    for (var i = 0; i < total; i++) {
-      refs[i] = React.createRef()
-    }
-    this.createdRefs = refs
-  }
-
-  render() {
-    const {children} = this.props
-    return children(...this.createdRefs)
-  }
-}

package/src/hocs/Wrapper.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-const valueOrDefault = (v, d) => v === undefined ? d : v
-const mergePropsAndChildren = (a, b) => ({
-  ...a, ...b,
-  children: (a.children && b.children) ?
-            <React.Fragment>{a.children}{b.children}</React.Fragment> : (a.children || b.children)
-})
-
-const wrapIf = (WrapperWithRenderProps, testKeyOrFn, defaultWrapPropsOrFn) => (functionAsChild) => (props) => {
-  const test = typeof testKeyOrFn === 'string' ? props[testKeyOrFn] : testKeyOrFn(props)
-  if (test) {
-    const defaultWrapProps = typeof defaultWrapPropsOrFn === "function" ? defaultWrapPropsOrFn(props) : defaultWrapPropsOrFn
-    if (WrapperWithRenderProps.hasRenderProps) {
-      const Wrapper = WrapperWithRenderProps.Wrapper
-      return <Wrapper {...defaultWrapProps} {...props} ref={undefined}>{(extra) => functionAsChild(mergePropsAndChildren(props, extra))}</Wrapper>
-    } else {
-      return <WrapperWithRenderProps {...defaultWrapProps} {...props} ref={undefined}>{functionAsChild(props)}</WrapperWithRenderProps>
-    }
-  } else {
-    return functionAsChild(props)
-  }
-}
-
-
-const wrapAsDefault = (Wrapper, key, defaultWrapProps) => wrapIf(Wrapper, (props) => valueOrDefault(props[key], true), defaultWrapProps)
-
-const singleWrap = (Wrapper, defaultWrapProps) => wrapIf(Wrapper, () => true, defaultWrapProps)
-
-const wraps = (...autoWrappers) => (Component) => autoWrappers.reduceRight(
-  (acc, autoWrapper) => autoWrapper(acc),
-  (props) => <Component {...props}/>
-)
-
-export const wrap = wraps
-
-wrap.renderProps = (Wrapper) => ({hasRenderProps:true,Wrapper})
-wrap.if = wrapIf
-wrap.always = singleWrap
-wrap.asDefault = wrapAsDefault

package/src/hocs/consumes.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const propsOrConsume = (prop, Consumer,childrenAsFunction) => prop ? childrenAsFunction(prop) : <Consumer>{childrenAsFunction}</Consumer>
-
-const addConsumers = (Component,obj) =>
-  Object.entries(obj)
-    .reduce(
-      (acc, [propKey, Consumer]) => (props) =>
-        propsOrConsume(props[propKey],Consumer,v => acc({[propKey]: v, ...props})),
-      (props) => <Component {...props} />
-    )
-
-export const consumes = (obj) => (Component) => {
-  const withConsumers = addConsumers(Component,obj)
-  return (props) => withConsumers(props)
-}

package/src/hocs/withDialogError.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-export const withDialogError = (Dialog) => {
-  const ErrorBoundedComponent = React.forwardRef((props,ref) => {
-    return <Dialog ref={ref} {...props}/>
-
-    // const ErrorBoundary = __internals('ErrorBoundary')
-    /*return (
-      <ErrorBoundary Error={props.Error || __internals('DialogError')} closeDialog={props.closeDialog}>
-        <Dialog {...props}/>
-      </ErrorBoundary>
-    )*/
-  })
-  // ErrorBoundedComponent.contextTypes = {startlibs:()=>null}
-  return ErrorBoundedComponent
-}

package/src/hocs/withGroupEvent.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import mitt from 'mitt'
-
-export const GroupEventFactory = () => {
-  let emitter = mitt()
-
-  class WithGroupEvent extends React.Component {
-    componentDidMount() {
-      emitter.on('*', this.processEvent)
-    }
-
-    componentWillUnmount() {
-      emitter.off('*',this.processEvent)
-    }
-
-    events = {}
-
-    processEvent = (type, event) => {
-      (this.events[type] || []).forEach(c => c(event))
-    }
-
-    groupEventProps = {
-      on: (type,callback) => {
-        this.events[type] = (this.events[type] || []).concat(callback)
-      },
-      off: (type,callback) => {
-        this.events[type] = (this.events[type] || []).filter(e=>e!==callback)
-      },
-      emit: emitter.emit
-    }
-
-    render() {
-      return this.props.children(this.groupEventProps)
-    }
-  }
-  return WithGroupEvent
-}
-
-export const withGroupEvent = (Component) => {
-  const WithGroupEvent = GroupEventFactory()
-  return React.forwardRef((props,ref) => <WithGroupEvent>{(groupEvent) => <Component {...props} ref={ref} groupEvent={groupEvent}/>}</WithGroupEvent>)
-}
-

package/src/hooks/WithConstant.jsx

@@ -1,7 +0,0 @@
-import React, {useEffect} from 'react'
-import {useLazyConstant} from '@startlibs/core'
-
-export const WithConstant = ({inputs=[],value,children}) => {
-  const constant = useLazyConstant(value,inputs)
-  return children(constant)
-}

package/src/hooks/WithEffect.jsx

@@ -1,6 +0,0 @@
-import React, {useEffect} from 'react'
-
-export const WithEffect = ({inputs=[],children}) => {
-  useEffect(children,inputs)
-  return null
-}

package/src/hooks/useAsyncEffect.jsx

@@ -1,11 +0,0 @@
-import React, {useEffect} from 'react'
-import {callIfFunction} from '@startlibs/utils'
-
-export const useAsyncEffect = (fn,args) => {
-  useEffect(() => {
-    const result = fn()
-    return () => {
-      result.then(end => callIfFunction(end))
-    }
-  },args)
-}

package/src/hooks/useCallState.js

@@ -1,15 +0,0 @@
-import React, {useMemo, useState} from 'react'
-import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
-
-const isPath = (path) => typeof path === 'string' || typeof path === 'number' || Array.isArray(path)
-
-const getter = (value) => path => isPath(path) ? _s.get(path, value) : value
-
-export const useCallState = (defaultValue, setCallback) => {
-  const [val, setValue] = useState(defaultValue)
-
-  return useMemo(() => {
-    const get = () => val
-    return {get, val, set: setValue}
-  }, [val])
-}

package/src/hooks/useCallbackStable.jsx

@@ -1,12 +0,0 @@
-import React, {useInsertionEffect} from 'react'
-
-export const useCallbackStable = (fn) => {
-  const ref = React.useRef([fn, (...args) => ref[0](...args)]).current;
-  // Per Dan Abramov: useInsertionEffect executes marginally closer to the
-  // correct timing for ref synchronization than useLayoutEffect on React 18.
-  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
-  useInsertionEffect(() => {
-    ref[0] = fn;
-  });
-  return ref[1];
-}

package/src/hooks/useConstant.js

@@ -1,20 +0,0 @@
-import React, {useMemo, useRef} from 'react'
-import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
-
-const not_defined = {}
-
-export const useConstant = (value) => {
-  const ref = useRef(not_defined)
-  if (ref.current === not_defined) {
-    ref.current = value
-  }
-  return ref.current
-}
-
-export const useLazyConstant= (value) => {
-  const ref = useRef(not_defined)
-  if (ref.current === not_defined) {
-    ref.current = callIfFunction(value)
-  }
-  return ref.current
-}

package/src/hooks/useConsumerCatalog.jsx

@@ -1,21 +0,0 @@
-import React, {useEffect, useMemo} from 'react'
-import {callMany,mapGetOrSet} from '@startlibs/utils'
-import {useRefState} from '@startlibs/core'
-
-export const useConsumerCatalog = (mountCallback,unmountCallback) => {
-  const elements = useRefState([])
-
-  const register = callMany((element) => elements.set((elements) => elements.concat([element])), mountCallback)
-  const unregister = callMany((element) =>  elements.set((elements) => elements.filter(_ => _ !== element)), unmountCallback)
-
-  const manager = useMemo(()=> ({register,unregister}), [])
-
-  return [elements.get,manager]
-}
-
-export const useCatalogManager = ({register,unregister},ref) => {
-  useEffect(() => {
-    register(ref)
-    return () => unregister(ref)
-  },[ref])
-}

package/src/hooks/useEnsureRef.js

@@ -1,7 +0,0 @@
-import React, {useMemo, useRef} from 'react'
-import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
-
-export const useEnsureRef = (forwardedRef) => {
-  const ref = useRef()
-  return forwardedRef || ref
-}

package/src/hooks/useForceUpdate.jsx

@@ -1,16 +0,0 @@
-import {useState} from 'react'
-import {willUseSharedState} from '@startlibs/core'
-
-export const useForceUpdate = () => {
-  const [value, setValue] = useState(0); // integer state
-  return () => setValue(value => value + 1); // update the state to force render
-}
-
-export const willUseForceUpdate = () => {
-  const [useValue,,set] = willUseSharedState()
-  const useForceUpdate = () => {
-    const [v,setV] = useValue(0)
-    return () => setV(value => value + 1)
-  }
-  return [useForceUpdate,() => set(value => value + 1)]
-}

package/src/hooks/useIsUnmounted.jsx

@@ -1,12 +0,0 @@
-import {useEffect, useRef} from 'react'
-
-export const useIsUnmounted = () => {
-  const unmounted = useRef(false)
-
-  useEffect(() => {
-    unmounted.current = false
-    return () => { unmounted.current = true }
-  }, [])
-
-  return () => unmounted.current
-}

package/src/hooks/usePopupToggle.js

@@ -1,30 +0,0 @@
-import React, {useRef, useContext} from 'react'
-import {useToggle} from '@startlibs/core'
-import {callIfFunction} from '@startlibs/utils'
-
-let prevOpenToggleClose = () => {}
-let sameTick = false
-
-export const clearPopups = () => {
-  if (!sameTick) {
-    prevOpenToggleClose()
-    prevOpenToggleClose = () => {}
-  }
-}
-
-export const usePopupToggle = (startWith,callback) => {
-  const toggle = useToggle(startWith,(v,prev) => {
-    const result = callIfFunction(callback,v,prev)
-    if (result === false) { return false}
-    if (v !== false && prevOpenToggleClose !== toggle.close) {
-      prevOpenToggleClose()
-      prevOpenToggleClose = toggle.close
-      sameTick = true
-      window.setTimeout(()=>sameTick = false, 1)
-    }
-    if (v === false) {
-      prevOpenToggleClose = () => {}
-    }
-  })
-  return toggle
-}

package/src/hooks/usePrevious.jsx

@@ -1,27 +0,0 @@
-import {useEffect, useRef} from 'react'
-
-export function usePrevious(value,initialValue) {
-  const ref = useRef(initialValue);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-export function usePreviousUnique(value,initialValue) {
-  const ref = useRef(initialValue);
-  useEffect(() => {
-    if (value !== ref.current) {
-      ref.current = value;
-    }
-  });
-  return ref.current;
-}
-
-export function usePreviousForEffect(value,initialValue) {
-  const ref = useRef(initialValue);
-  useEffect(() => () => {
-    ref.current = value;
-  },[value]);
-  return ref.current;
-}

package/src/hooks/useRecycleFocus.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import _ from 'lodash/fp'
-import styled from 'styled-components'
-import {useEventListener} from "@startlibs/utils";
-
-styled
-
-const TabFocus = styled.div`width:0;height:0;position:absolute;`
-export const useRecycleFocus = (ref, enabled = true,lastIndex) => {
-
-  const recycle = i => (e) => {
-    if (!enabled || !ref.current) {
-      return
-    }
-    const nextTab = ref.current.querySelectorAll('[tabindex]')
-    if (nextTab) {
-      if (i<0) {
-        console.log(nextTab[1])
-        nextTab[1].focus()
-      } else {
-        console.log(nextTab[nextTab.length - 2])
-        nextTab[nextTab.length - 2].focus()
-      }
-    }
-  }
-
-  return [<TabFocus tabIndex={1} onFocus={recycle(0)}></TabFocus>,<TabFocus tabIndex={lastIndex || 1} onFocus={recycle(-1)}></TabFocus>]
-}

package/src/hooks/useRefMemo.jsx

@@ -1,10 +0,0 @@
-import React, {useRef} from 'react'
-import  {callIfFunction} from '@startlibs/utils'
-
-export const useRefMemo = (value) => {
-  const ref = useRef(value)
-  if (ref.current !== value) {
-    ref.current = callIfFunction(value)
-  }
-  return ref
-}