@startlibs/core 1.0.1 → 1.0.3

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@startlibs/core",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Startlibs Core",
-  "main": "lib/index.js",
+  "main": "src/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {
@@ -18,6 +18,8 @@
     "@babel/plugin-proposal-class-properties": "^7.2.1",
     "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
     "@babel/plugin-proposal-json-strings": "^7.2.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
     "@babel/plugin-proposal-optional-chaining": "^7.12.0",
     "@babel/plugin-proposal-throw-expressions": "^7.2.0",
@@ -28,6 +30,7 @@
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@rollup/plugin-alias": "^5.1.1",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^2.4.2",
     "babel-plugin-styled-components": "^1.10.0",

package/rollup.config.js

@@ -1,15 +1,18 @@
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
+import alias from '@rollup/plugin-alias';
+import path from 'path'
 
 const external = id => !id.startsWith('.') && !id.startsWith('/') && !id.startsWith('\0');
+const projectRootDir = path.resolve(__dirname);
 
 // rollup.config.js
 export default {
   input: 'src/index.js',
   output: {
     file: './lib/index.js',
-    format: 'cjs'
+    format: 'es'
   },
   plugins: [
     resolve({ extensions: ['.jsx', '.js'] }),
@@ -35,8 +38,15 @@ export default {
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-spread',
         '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        '@babel/plugin-proposal-logical-assignment-operators',
         ['@babel/plugin-proposal-class-properties', {'loose': true}]
       ]
+    }),
+    alias({
+      entries:{
+        '@startlibs/core':'test'
+      }
     })
   ],
   external//: [ "react", "react-dom", "styled-components", "recompose"]

package/src/SlotFill.jsx

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,20 @@
+// @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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/src/hooks/useAsyncEffect.jsx

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,27 @@
+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;
+}