@startlibs/core 1.0.7 → 1.2.0-rc.1

package/src/hooks/useSignal.jsx

@@ -0,0 +1,193 @@
+import React, {startTransition, use, useMemo, useCallback, useContext, useEffect, useRef, useState} from 'react'
+import {useConstant, useLazyConstant} from './useConstant'
+import {useForceUpdate} from './useForceUpdate'
+import {_s, callIfFunction} from '@startlibs/utils'
+import _ from 'lodash/fp'
+
+const IS_ARRAY_ITEMS_EQUALS = (a,b) => a.length === b.length && !a.some((x, i) => !Object.is(x, b[i]));
+const IS_DEPS_EQUALS = (a = [],b = []) => Object.is(a,b) || IS_ARRAY_ITEMS_EQUALS(a,b)
+
+const SHALLOW_IS_EQUAL = (a,b) => Object.is(a,b) || (_.isArray(a) && _.isArray(b) && IS_ARRAY_ITEMS_EQUALS(a,b))
+
+const EMPTY_DEPS = []
+const EMPTY_VALUE = {"EMPTY":true}
+export const useUpdateSignal = (initialValue) => {
+  const value = useRef(initialValue)
+  value.current = initialValue
+  return useLazyConstant(() => {
+    let registered = []
+    const register = (selector = _.identity, isEqual = SHALLOW_IS_EQUAL, withTransition = false) => {
+      const selectorRef = useRef()
+      selectorRef.current = selector
+      const update = useForceUpdate()
+      const lastValueRef = useRef(_s.select(selectorRef.current, value.current))
+      useEffect(() => {
+        const item = [update, selectorRef, isEqual, lastValueRef, withTransition]
+        registered = [...registered, item]
+        return () => {
+          registered = registered.filter(v => v !== item)
+        }
+      }, [])
+      if (value.current === EMPTY_VALUE) {
+        return EMPTY_VALUE
+      }
+      return lastValueRef.current
+    }
+    const call = (...args) =>
+      registered.forEach(([fn, selectorRef, isEqual, lastValueRef, withTransition]) => {
+        const nextValue = _s.select(selectorRef.current, ...args)
+        if (!callIfFunction(isEqual,nextValue,lastValueRef.current)) {
+          lastValueRef.current = nextValue
+          if (withTransition) {
+            (withTransition === true ? startTransition : withTransition)(() => fn(nextValue))
+          } else {
+            fn(nextValue)
+          }
+        }
+      })
+    return [register, call]
+  })
+}
+
+const useSelectorSignal = (value) => {
+  const prevValue = useRef(value)
+  const [_register, call] = useUpdateSignal(value)
+  const register = useCallback((selector, deps, isEqual, withTransition) => {
+    const prevDeps = useRef(EMPTY_DEPS)
+    if (prevDeps.current !== EMPTY_DEPS  && !IS_DEPS_EQUALS(deps, prevDeps.current)) {
+      call(prevValue.current)
+    }
+    prevDeps.current = deps
+    return _register(selector, isEqual, withTransition)
+  }, [])
+  useEffect(() => {
+    if (prevValue.current !== value) {
+      prevValue.current = value
+      call(value)
+    }
+  },[value])
+  return register
+}
+
+const updateStateFn = (path,update) => state =>
+  path
+    ? _.update(path,(v) => callIfFunction(update,v),state)
+    : callIfFunction(update,state)
+
+
+export const createStatefulContext = (v,defaultIsEqual) => {
+  const Ctx = React.createContext(v)
+  const Provider = ({value, setValue, utils,children}) => {
+    const register = useSelectorSignal(value)
+    const v = useLazyConstant(() => [register,setValue, utils])
+    return <Ctx.Provider value={v}>{children}</Ctx.Provider>
+  }
+  const useCtx = () => useContext(Ctx)
+
+  const useSelectValue = (selector,deps,defaultIsEqual, withTransition) => {
+    const [useRegister] = useCtx()
+    if (deps === true) {
+      return useRegister(selector,[],undefined,startTransition)
+    } else if (_.isPlainObject(deps)) {
+      return useRegister(selector,deps.deps,deps.isEqual, deps.withTransition)
+    } else {
+      return useRegister(selector,_.isArray(deps) ? deps : deps?.deps,defaultIsEqual, withTransition)
+    }
+  }
+  const useSetValue = (path) => {
+    const [reg,set ] = useCtx()
+    return useConstant((update) => set(updateStateFn(path,update)))
+  }
+  const useUtils = (path,deps) => {
+    const [reg,set, utils ] = useCtx()
+    return utils
+  }
+  return [Provider,[useSelectValue, useSetValue, useUtils, useCtx]]
+}
+
+export const createSelfStatefulContext = (v,defaultIsEqual) => {
+  const [Provider,[useSelectValue, useSetValue, useUtils, useCtx]] = createStatefulContext(v,defaultIsEqual)
+
+  const StateFullProvider = ({init = {}, utils,children}) => {
+    const [state,setState] = useState(init)
+    return <Provider value={state} setValue={setState} utils={utils}>
+      {children}
+    </Provider>
+  }
+  return [StateFullProvider,[useSelectValue, useSetValue, useUtils, useCtx]]
+}
+
+
+export const createLazyStatefulContext = (toPromise,defaultIsEqual) => {
+  const [Provider,[useSelectValue, useSetValue, useUtils, useCtx]] = createStatefulContext(EMPTY_VALUE,defaultIsEqual)
+  const useSelectLazyValue = (selector,deps,isEqual = defaultIsEqual,withTransition) => {
+    const value = useSelectValue(selector,deps,isEqual,withTransition)
+    const utils = useUtils()
+    if (value === EMPTY_VALUE) {
+      const loadedValue = use(utils._lazyValue())
+      return _s.select(selector,loadedValue)
+    }
+    return value
+  }
+  const useSetLazyValue = (path) => {
+    const [,setValue,utils] = useCtx()
+    return useConstant((update) => {
+      return setValue(value =>
+        value === EMPTY_VALUE
+          ? updateStateFn(path,update)(utils.loadedValue())
+          : updateStateFn(path,update)(value)
+      )
+    })
+  }
+
+  const useValuePromise = (selector,deps,isEqual,withTransition) => {
+    const value = useSelectValue(selector,deps,isEqual,withTransition)
+    const utils = useUtils()
+    return useCallback(() => {
+      if (value === EMPTY_VALUE) {
+        return utils._lazyValue().then(v => console.log(v,_s.select(selector,v),selector) || _s.select(selector,v))
+      }
+      return new Promise(value)
+    },[value,deps])
+  }
+  const LazyStateFullProvider = ({value, utils,children, fallback = null}) => {
+    const [state,setState] = useState(EMPTY_VALUE)
+    const promise = useRef()
+    const loadedValue = useRef()
+    const lazyUtils = useMemo(() => ({
+      ...utils,
+      _lazyValue: () => {
+        promise.current ??= callIfFunction(toPromise || _.identity,value)
+        promise.current.then((value) => {
+          loadedValue.current = value
+        })
+        return promise.current
+      },
+      loadedValue: () => loadedValue.current
+    }),[value,utils])
+    return <Provider value={state} setValue={setState} utils={lazyUtils}>
+      {
+        fallback===false
+          ? children
+          : <React.Suspense fallback={fallback}>{children}</React.Suspense>
+      }
+    </Provider>
+  }
+
+  return [LazyStateFullProvider,[useSelectLazyValue, useSetLazyValue, useValuePromise]]
+}
+
+export const createSelectableContext = (v) => {
+  const [Provider,[useSelectValue]] = createStatefulContext(v)
+  return [Provider,useSelectValue]
+}
+export const createTriggerUpdateContext = (v) => {
+  const [Provider,[useSelectValue]] = createStatefulContext(v)
+  const TriggerProvider = React.forwardRef(({children},ref) => {
+    const [v,setV] = useState(0)
+    const trigger = React.useMemo(() => () => setV(v => v+1),[v])
+    React.useImperativeHandle(ref, () => ({trigger}) , [])
+    return <Provider value={trigger}>{children}</Provider>
+  })
+  return [TriggerProvider,useSelectValue]
+}

package/src/hooks/useTitle.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {willUseLayers} from './willUseLayers'
+
+const [useTitleLayers] = willUseLayers()
+
+export const useTitle = (title) => {
+  const layer = useTitleLayers({
+    onTop: () => {
+      document.title = title
+    }
+  })
+}

package/src/hooks/useToggle.js

@@ -0,0 +1,126 @@
+import React, {useRef, useMemo} from 'react'
+import {callIfFunction} from '@startlibs/utils'
+import {useCallState} from './useCallState'
+import {useIsUnmounted} from './useIsUnmounted'
+import {useRefState} from './useRefState'
+
+const useToggleInternal = (startWith = false, useStore, callback, key) => {
+
+  const isOpen = useStore(startWith)
+  const closing = useStore(false)
+  const refIsOpen = useRefState(isOpen.get())
+  const refIsClosing = useRefState(closing.get())
+  const timerId = useRef()
+
+  const isUnmounted = useIsUnmounted()
+
+  const clearClosing = () => {
+    if (refIsClosing.get() !== false) {
+      closing.set(false)
+      refIsClosing.set(false)
+      window.clearTimeout(timerId.current)
+    }
+  }
+
+  const toggleWith = (value = true) => {
+    const calledValue = callIfFunction(value,refIsOpen.get())
+    const newValue = refIsOpen.get() === calledValue ? !calledValue : calledValue
+    if (!isUnmounted() && refIsOpen.get() !== newValue) {
+      const result = callIfFunction(callback,newValue,refIsOpen.get())
+      if (result === false) { return }
+      isOpen.set(newValue)
+      refIsOpen.set(newValue)
+      clearClosing()
+    }
+  }
+
+  const openWith = (value) => {
+    if (process.env.NODE_ENV !== 'production' && key) {
+      console.log(key,refIsOpen.get()!==value ? "toggle":"clear", refIsOpen.get(),value)
+    }
+    const nextValue = callIfFunction(value,refIsOpen.get())
+    if (refIsOpen.get() !== nextValue) {
+      toggleWith(() => nextValue)
+    } else {
+      clearClosing()
+    }
+  }
+
+  const nextClosingTick = (ticks, tickIndex) => {
+    if (ticks.length) {
+      if (isNaN(ticks[0])) {
+        clearClosing()
+      } else if (!isNaN(ticks[0])) {
+        closing.set(tickIndex + 1)
+        refIsClosing.set(tickIndex + 1)
+        timerId.current = setTimeout(() => nextClosingTick(ticks.slice(1), tickIndex + 1), Number(ticks[0]))
+      }
+    } else {
+      openWith(false)
+    }
+  }
+  const closeAfter = (...millisecs) => {
+    if (process.env.NODE_ENV !== 'production' && key) {
+      console.log(key,!refIsOpen.get() || refIsClosing.get() ? "addCLosing" :  "closing" )
+    }
+    if (!refIsOpen.get() || refIsClosing.get()) return
+    nextClosingTick(millisecs, 0)
+  }
+
+  const _wait = (promise, start = true, end = false) => async (...args) => {
+    openWith(start)
+    try {
+      return await callIfFunction(promise,...args)
+    } finally {
+      openWith(end)
+    }
+  }
+
+  const setters = useMemo(()=>({
+    wait: (promise,start = true, end = false) => _wait(promise,start, end)(),
+    willWait: _wait,
+    open: (e) => {
+      if (process.env.NODE_ENV !== 'production') {
+        if (['string', 'number', 'boolean'].indexOf(typeof e) >= 0) {
+          console.log(`You are trying to open toggle with ${e}. Please, use openWith to open with a value`)
+        }
+      }
+      return openWith(true)
+    },
+    close: () => openWith(false),
+    toggle: (e) => {
+      if (process.env.NODE_ENV !== 'production') {
+        if (['string', 'number', 'boolean'].indexOf(typeof e) >= 0) {
+          console.log(`You are trying to toogle a toggle with ${e}. Please, use openWith to open with a value`)
+        }
+      }
+      toggleWith(true)
+    },
+    willOpenWith: (value) => () => openWith(value),
+    willCloseAfter: (...millsecs) => () => closeAfter(...millsecs),
+    willToggleWith: (value) => () => toggleWith(value),
+    openWith,
+    closeAfter,
+    toggleWith,
+    get: refIsOpen.get
+  }),[])
+  const settersWithNewRef = {...setters}
+  if (closing.val) {
+    return Object.assign(settersWithNewRef, {isOpen: isOpen.val, closing: closing.val})
+  } else {
+    Object.defineProperties(settersWithNewRef, {
+      isOpen: {
+        enumerable: true,
+        get: isOpen.get
+      },
+      closing: {
+        enumerable: true,
+        get: closing.get
+      }
+    })
+    return settersWithNewRef
+  }
+}
+
+export const useToggle = (startWith, callback,key) => useToggleInternal(startWith, useCallState, callback,key)
+export const useRefToggle = (startWith) => useToggleInternal(startWith, useRefState)

package/src/hooks/useUpdateEffect.js

@@ -0,0 +1,14 @@
+import React, {useRef, useEffect} from 'react'
+
+export const useUpdateEffect = (effect,inputs) => {
+
+  const pastFirstTime = useRef()
+
+  useEffect(() => {
+    if (pastFirstTime.current) {
+      return effect()
+    } else {
+      pastFirstTime.current = true
+    }
+  },inputs)
+}

package/src/hooks/useUpdateOnResize.jsx

@@ -0,0 +1,14 @@
+import {useEffect} from 'react'
+import {useForceUpdate} from './useForceUpdate'
+import _ from 'lodash/fp'
+
+export const useUpdateOnResize = (debounceInterval = 200) => {
+  const update = useForceUpdate()
+  useEffect(() => {
+    const trigger = _.debounce(debounceInterval, update)
+    window.addEventListener('resize', trigger)
+    return () => {
+      window.removeEventListener('resize', trigger)
+    }
+  },[])
+}

package/src/hooks/useWithTransition.jsx

@@ -0,0 +1,14 @@
+import {startTransition, useEffect, useState} from "react";
+
+
+export const useWithTransition = (value) => {
+  const [state,setState] = useState(value)
+
+  useEffect(() => {
+    startTransition(() => {
+      setState(value)
+    })
+  },[value])
+
+  return state
+}

package/src/hooks/willUseLayers.jsx

@@ -0,0 +1,42 @@
+import React, {useState, useCallback} from 'react'
+import {willUseSharedCallback} from './willUseSharedCallback'
+import {callIfFunction} from '@startlibs/utils'
+
+
+export const willUseLayers = (useEffect = React.useEffect) => {
+  const [useRegisterSharedCallback,callGroup,getSize] = willUseSharedCallback(useEffect)
+  const useLayer = ({onFirst, onEmpty, onTop, onRemove} = {}, listener) => {
+
+    const resetIndex = useCallback(() => {
+      setIndex(getIndex())
+      if (getIndex()+1 === getSize()) {
+        callIfFunction(onTop,getIndex)
+      }
+    },[])
+
+    const getIndex = useRegisterSharedCallback(resetIndex, listener)
+    const [index,setIndex] = useState(getIndex())
+
+    useEffect(() => {
+      if (getIndex() === 0) {
+        callIfFunction(onFirst)
+      }
+      resetIndex()
+      return () => {
+        callIfFunction(onRemove,getSize())
+        if (getSize() === 0) {
+          callIfFunction(onEmpty)
+        }
+        callGroup()
+      }
+    },[])
+
+    return [index,{
+      isFirst: ()=> getIndex() === 1,
+      isTop: () => getIndex() === getSize()-1,
+      isEmpty: () => getSize() === 0,
+      getSize: () => getSize()
+    }]
+  }
+  return [useLayer,getSize]
+}

package/src/hooks/willUseSharedCallback.jsx

@@ -0,0 +1,60 @@
+import React, {useRef} from 'react'
+
+
+const callList = (list, firstArg, ...args) => list.map(({current}) => typeof firstArg === 'function' ? firstArg(current) : current(firstArg,...args))
+
+export const willUseSharedCallback = (useEffect = React.useEffect) => {
+  let mountedCallbacks = []
+  let listenerCallbacks = []
+  const remove = (ref) => mountedCallbacks = mountedCallbacks.filter(_ => _ !== ref)
+  const add = (ref) => mountedCallbacks = mountedCallbacks.concat([ref])
+  const get = () => mountedCallbacks
+
+  const removeListener = (ref) => listenerCallbacks = listenerCallbacks.filter(_ => _ !== ref)
+  const addListener = (ref) => listenerCallbacks = listenerCallbacks.concat([ref])
+  const getListeners = (ref) => listenerCallbacks
+
+  const lastCall = {current:null,index:0}
+
+  const call = (...args) => {
+    const resp = callList(get(), ...args)
+    callList(getListeners(), ...args)
+    lastCall.current = args
+    lastCall.index++
+    return resp
+  }
+  const getSize = () => get().length
+
+  const useRegister = (callback, listener = false) => {
+    const ref = useRef(callback)
+    if (ref.current !== callback) {
+      ref.current = callback
+    }
+    const lastCallIndex = lastCall.index
+    useEffect(() => {
+      if (!ref.current) { return }
+      if (listener) {
+        addListener(ref)
+      } else {
+        add(ref)
+        if (lastCallIndex !== lastCall.index && lastCall.current) {
+          callList([ref],...lastCall.current)
+        }
+      }
+      return () => {
+        if (listener) {
+          removeListener(ref)
+        } else {
+          remove(ref)
+        }
+      }
+    }, [])
+    return () => get().indexOf(ref)
+  }
+
+  return [
+    useRegister,
+    call,
+    getSize
+  ]
+}

package/src/hooks/willUseSharedState.jsx

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import {callIfFunction, ifUndefined} from '@startlibs/utils'
+import {willUseSharedCallback} from './willUseSharedCallback'
+
+const notDefined = {}
+
+export const willUseSharedState = (initialValue) => {
+  const [useRegisterGroupCallback,callGroup,getSize] = willUseSharedCallback()
+  let sharedValue = ifUndefined(initialValue,notDefined)
+
+  const setGroupState = (newValue) => {
+    sharedValue = callIfFunction(newValue,sharedValue)
+    callGroup(sharedValue)
+  }
+
+  const refState = () => {
+    useRegisterGroupCallback()
+    return [()=>sharedValue,setGroupState]
+  }
+
+  const valueState = (defaultValue) => {
+    const prevValue = sharedValue !== notDefined ? sharedValue : defaultValue
+    if (prevValue === defaultValue) {
+      sharedValue = defaultValue
+    }
+    const [value, setValue] = useState(prevValue)
+    useRegisterGroupCallback(setValue)
+    return [value,setGroupState]
+  }
+  const clear = () => {
+    sharedValue = notDefined
+  }
+  return [valueState,refState,setGroupState,()=>sharedValue,clear]
+}

package/src/hooks/willUseSpreadState.jsx

@@ -0,0 +1,103 @@
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {_s, formatPath} from '@startlibs/utils'
+import _ from 'lodash/fp'
+import {useCatalogManager, useConsumerCatalog} from './useConsumerCatalog'
+import {useIsUnmounted} from './useIsUnmounted'
+import {useRefState} from './useRefState'
+
+const updateAllInputsState = (inputs, values) => {
+  const deferedUndefined = []
+  inputs.forEach((input) => {
+    const [setValue, selector] = input
+    const newValue = selector(values)
+    if (newValue === undefined) {
+      deferedUndefined.push([setValue,newValue])
+    } else {
+      setValue(newValue)
+    }
+  })
+  deferedUndefined.forEach(([set,value])=> set(value))
+}
+
+const pathSelector = (path) => _s.get(path || [])
+const parsePathOrSelector = (pathOrSelector) => {
+  const isNotSelector = typeof pathOrSelector !== 'function'
+  if (isNotSelector) {
+    return [formatPath(pathOrSelector), pathSelector(pathOrSelector)]
+  } else {
+    return ['', pathOrSelector]
+  }
+}
+export const willUseSpreadState = (defaultContextValue,options = {}) => {
+
+  const Context = React.createContext(defaultContextValue)
+  const EMPTY_GLOBAL = {}
+  let prevInitState = EMPTY_GLOBAL
+  let globalState = EMPTY_GLOBAL
+  const getGlobalState = (key) => _.isString(key) || _.isArray(key) ? _.get(key,globalState) : globalState
+
+  const useProvideSpreadState = (initState, setCallback) => {
+    const [consumerList, manager] = useConsumerCatalog((input) => updateAllInputsState([input], state.get()))
+    const state = useRefState(initState, setCallback)
+
+    if (options.initRefCheck) {
+      if (prevInitState !== initState) {
+        globalState = initState
+      }
+      prevInitState = initState
+    }
+
+    if (globalState === EMPTY_GLOBAL) {
+      globalState = initState
+    }
+    useEffect(() => {
+      globalState = state.get()
+    },[])
+
+    const setState = (newState, fastPath, config) => {
+      // console.log("Fastpath noop:"+fastPath)
+      state.set(newState, config)
+      globalState = state.get()
+      updateAllInputsState(consumerList(), state.get())
+    }
+    const contextValue = useMemo(() => [state.get, setState, manager], [])
+
+    return [Context.Provider, contextValue, [state.get, setState]]
+  }
+
+  const useSpreadState = (pathOrSelector, inputs) => {
+    const [getSpreadState, setSpreadState, manager] = useContext(Context)
+    const [path, selector] = parsePathOrSelector(pathOrSelector)
+    const pathOrInput = [path] || inputs || []
+    const [value, setValue] = useState(selector(getSpreadState()))
+
+    const isUnmounted = useIsUnmounted()
+
+    const currentPath = useRefState(path)
+    if (path !== currentPath.get()) {
+      /* when path changes, the consumerCatalogCallback will update the new value
+      *  another solution would be to call setValue here directly
+      *  the return value will still be the old, but will be changed before render, just like getDerivedStateFromProps
+      *
+      *  if there's a need for the return value to be the same, the value or, if enters here new value,
+      *  can be returned in an temp variable
+      * */
+      currentPath.set(path)
+    }
+
+    const input = useMemo(() => [(v) => {
+      /* noop for elements that may be unregistered while looping through consumerList */
+      if (path === currentPath.get() && !isUnmounted()) {
+        setValue(v)
+      }
+    }, selector], pathOrInput)
+
+    useCatalogManager(manager, input)
+    const setState = useCallback((v) => setSpreadState((_.isFunction(v) ? (pathOrSelector === undefined ? () => v : _.update) : _.set)(path, v), path), pathOrInput)
+    const getValue = () => selector(getGlobalState())
+    return [value, setState, getValue]
+  }
+
+
+  return [useProvideSpreadState, useSpreadState, Context, getGlobalState]
+}

package/src/index.js

@@ -0,0 +1,32 @@
+export * from './StartlibsProvider'
+export * from './hooks/willUseLayers'
+export * from './hooks/willUseSharedCallback'
+export * from './hooks/willUseSharedState'
+export * from './hooks/willUseSpreadState'
+export * from './SlotFill'
+export * from './hocs/consumes'
+export * from './hocs/withDialogError'
+export * from './hocs/withGroupEvent'
+export * from './hocs/WithRef'
+export * from './hocs/WithLazyResource'
+export * from './hooks/useCallbackStable'
+export * from './hooks/WithEffect'
+export * from './hooks/useToggle'
+export * from './hooks/usePopupToggle'
+export * from './hooks/useCallState'
+export * from './hooks/useRefState'
+export * from './hooks/useConsumerCatalog'
+export * from './hooks/useTitle'
+export * from './hooks/useRecycleFocus'
+export * from './hooks/usePrevious'
+export * from './hooks/useIsUnmounted'
+export * from './hooks/useEnsureRef'
+export * from './hooks/useConstant'
+export * from './hooks/useForceUpdate'
+export * from './hooks/useUpdateOnResize'
+export * from './hooks/useAsyncEffect'
+export * from './hooks/useUpdateEffect'
+export * from './hooks/useRefMemo'
+export * from './hooks/useSignal'
+export * from './hooks/WithConstant'
+export * from './hooks/useWithTransition'

package/.babelrc

@@ -1,27 +0,0 @@
-// .babelrc
-{
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-flow",
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "lodash",
-    "macros",
-    "fbjs-scripts/babel-6/dev-expression",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-throw-expressions",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-json-strings",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-arrow-functions",
-    "@babel/plugin-transform-spread",
-    "@babel/plugin-proposal-object-rest-spread",
-    ["@babel/plugin-proposal-class-properties", {"loose": true}]
-  ]
-}