@jsonui/core 0.0.11

package/src/utils/util.ts

@@ -0,0 +1,142 @@
+import jsonpointer from 'jsonpointer'
+import cloneDeep from 'lodash/cloneDeep'
+import drop from 'lodash/drop'
+import findIndex from 'lodash/findIndex'
+import pull from 'lodash/pull'
+import compact from 'lodash/compact'
+import findLastIndex from 'lodash/findLastIndex'
+import unset from 'lodash/unset'
+import * as c from './constants'
+import { PropsType } from './types'
+
+export const jsonPointerGet = (json: any, path?: string) => {
+  if (json === null || json === undefined || path === null || path === undefined || typeof path !== 'string') return null
+  if (path === c.SEPARATOR /* || path === '' same effect */) return json
+  try {
+    return jsonpointer.get(json, path.startsWith(c.SEPARATOR) ? path : `${c.SEPARATOR}${path}`)
+  } catch (e) {
+    return null
+  }
+}
+
+export const jsonPointerSet = (json: any, path?: string, value?: any) => {
+  if (json === null || json === undefined || path === null || path === undefined || typeof path !== 'string') return
+  if (path === c.SEPARATOR || path === '') {
+    // eslint-disable-next-line no-param-reassign
+    json = value
+    return
+  }
+  try {
+    jsonpointer.set(json, path.startsWith(c.SEPARATOR) ? path : `${c.SEPARATOR}${path}`, value)
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+}
+
+export const getCleanedTopic = (text: string | any) => {
+  if (!text || typeof text !== 'string' || text.length === 0 || text.length > 1024) {
+    return null
+  }
+  return text.replace(/[^0-9a-zA-Z]/g, '-')
+}
+
+export const pathArrayToPathString = (array: string[]) => array.map((i, index) => (Number.isInteger(i) ? `[${i}]` : `${index > 0 ? '.' : ''}${i}`)).join('')
+
+export const pathArrayToJsonPointer = (array: string[]) => `/${array.join('/')}`
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: any) {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function mergeDeep(target: any, ...sources: any): any {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} })
+        mergeDeep(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources)
+}
+
+export const mergePath = (target: any, newState: any) => {
+  if (!newState || typeof newState !== 'object') return target
+  const newTarget = cloneDeep(target)
+  Object.entries(newState).forEach(([key, value]) => {
+    jsonpointer.set(newTarget, key, value)
+  })
+  return newTarget
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const changeRelativePath = (path: string) => {
+  let pathArray = path.split(c.SEPARATOR)
+  if (pathArray && pathArray.length > 1 && pathArray[pathArray.length - 1] === '') {
+    pathArray.pop()
+  }
+  const absolutepathIndex = findLastIndex(pathArray, (i) => i === '')
+  if (absolutepathIndex > 0) {
+    pathArray = drop(pathArray, absolutepathIndex)
+  }
+  pathArray = pull(pathArray, '.')
+  let count = 0
+  let relativepathIndex = -1
+  do {
+    count += 1
+    relativepathIndex = findIndex(pathArray, (i) => i === '..')
+    if (relativepathIndex !== -1) {
+      unset(pathArray, `[${relativepathIndex}]`)
+      unset(pathArray, `[${relativepathIndex - 1}]`)
+      pathArray = compact(pathArray)
+    }
+  } while (relativepathIndex !== -1 && count < 100)
+  return pathArray.join(c.SEPARATOR)
+}
+
+// changeRelativePath('111/22222/3333/./anything/../../start')
+
+const genStyle = (props: PropsType) => {
+  const { parentComp } = props
+  const style = { display: 'flex', flexDirection: 'column', ...(props.style as any), ...(props[c.STYLE_WEB_NAME] as any) }
+
+  if (style && style.borderWidth && !style.borderStyle) {
+    style.borderStyle = 'solid'
+  }
+  if (style && style.flex) {
+    if (
+      parentComp &&
+      (parentComp as any).style &&
+      (parentComp as any).style.flex &&
+      (parentComp as any).style.flex < 1
+      // if smaller or larger, noesn't matter
+    ) {
+      style.height = `100%`
+      style.width = `100%`
+    } else if (!style.height) {
+      style.height = `${style.flex * 100}%`
+    }
+  }
+  return style
+}
+export const getStyleForWeb = (props: PropsType = {}, component: string) =>
+  component === 'View' ? genStyle(props) : { ...(props.style as any), ...(props[c.STYLE_WEB_NAME] as any) }
+
+// TODO it have to be configurable
+export const noChildren = (component: string) => ['Image'].includes(component)

package/src/wrapper/wrapperUtil.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import isEmpty from 'lodash/isEmpty'
+import orderBy from 'lodash/orderBy'
+import omit from 'lodash/omit'
+import isNumber from 'lodash/isNumber'
+import traverse from 'traverse'
+import * as c from 'utils/constants'
+import * as util from 'utils/util'
+import Stock from 'stock/Stock'
+import { PathModifiersType, PathModifierType, PathsType, PropsType, WrapperType } from '../utils/types'
+
+export const actionBuilder = (props: PropsType, stock: InstanceType<typeof Stock>) => {
+  const paths: PathsType = []
+  // eslint-disable-next-line func-names
+  traverse(omit(props, ['parentComp'])).forEach(function (x) {
+    if (
+      !!x &&
+      !!x[c.ACTION_KEY] &&
+      // && !c.REDUX_FUNCTIONS.includes(x[c.ACTION_KEY])
+      !(this.path.length > 1 && this.path.includes(c.V_CHILDREN_NAME))
+    ) {
+      paths.push({ path: this.path, level: this.level })
+    }
+  })
+  orderBy(paths, ['level'], ['desc']).forEach(async (i) => {
+    const { [c.ACTION_KEY]: functionName, ...functionParams } = traverse(props).get(i.path)
+    traverse(props).set(i.path, async (...callerArgs: any[]) => {
+      await stock.callFunction(functionName, functionParams, props, callerArgs)
+    })
+  })
+}
+
+export const modifierBuilder = (props: PropsType, stock: InstanceType<typeof Stock>) => {
+  const paths: PathsType = []
+  // eslint-disable-next-line func-names
+  traverse(omit(props, ['parentComp'])).forEach(function (x) {
+    if (!!x && !!x[c.MODIFIER_KEY] && !c.REDUX_FUNCTIONS.includes(x[c.MODIFIER_KEY]) && !(this.path.length > 1 && this.path.includes(c.V_CHILDREN_NAME))) {
+      paths.push({ path: this.path, level: this.level })
+    }
+  })
+  orderBy(paths, ['level'], ['desc']).forEach(async (i) => {
+    const { [c.MODIFIER_KEY]: functionName, ...functionParams } = traverse(props).get(i.path)
+    traverse(props).set(i.path, stock.callFunction(functionName, functionParams, props))
+  })
+}
+
+export const pathModifierBuilder = (props: PropsType, pathModifier: PathModifiersType) => {
+  const currentPaths: PathModifiersType = { ...(props.currentPaths as PathModifiersType) }
+  let modified = false
+  if (pathModifier && !isEmpty(pathModifier)) {
+    Object.keys(pathModifier).forEach((key: string) => {
+      if (!!key && !!pathModifier[key] && pathModifier[key][c.PATHNAME] !== undefined && pathModifier[key][c.PATHNAME] !== null) {
+        const path = pathModifier[key][c.PATHNAME]
+        const parent = currentPaths[key]
+        modified = true
+        if (`${path}`.startsWith(c.SEPARATOR) || !(parent && parent[c.PATHNAME])) {
+          currentPaths[key] = { [c.PATHNAME]: path }
+        } else {
+          currentPaths[key] = { [c.PATHNAME]: util.changeRelativePath(`${parent[c.PATHNAME]}${c.SEPARATOR}${path}`) }
+        }
+        if (!!currentPaths[key] && !`${currentPaths[key][c.PATHNAME]}`.startsWith(c.SEPARATOR)) {
+          currentPaths[key][c.PATHNAME] = `${c.SEPARATOR}${currentPaths[key][c.PATHNAME]}`
+        }
+      }
+    })
+  }
+  return modified ? { currentPaths } : undefined
+}
+
+export const getWrapperProps = (props: PropsType, parentComp?: any) => {
+  const res: PropsType = {
+    ...(c.SIMPLE_DATA_TYPES.includes(typeof props) ? {} : props),
+    parentComp,
+    [c.V_COMP_NAME]: c.SIMPLE_DATA_TYPES.includes(typeof props) || props === undefined || props === null ? '_PrimitiveProp' : props[c.V_COMP_NAME],
+    [c.V_CHILDREN_NAME]: c.SIMPLE_DATA_TYPES.includes(typeof props) || props === undefined || props === null ? props : props[c.V_CHILDREN_NAME],
+  }
+  // eslint-disable-next-line no-restricted-syntax
+  for (const i in res) if (typeof res[i] === 'undefined') delete res[i]
+  return res
+}
+
+const genChildenFromListItem = (props: PropsType) => {
+  let { page = 0, listLength = 0, itemPerPage = c.PAGINATION_ITEM_PER_PAGE } = props
+  const { listItem } = props
+  const pathModifiers: PathModifiersType = props[c.PATH_MODIFIERS_KEY] as PathModifiersType
+  const children: PropsType[] = []
+  if (isNumber(page) && isNumber(listLength) && isNumber(itemPerPage) && pathModifiers) {
+    page = page >= 0 ? page : 0
+    itemPerPage = itemPerPage >= 0 ? itemPerPage : 0
+    listLength = listLength >= 0 ? listLength : 0
+    const offset = page * itemPerPage <= listLength ? page * itemPerPage : 0
+    const itemkey: string = Object.keys(pathModifiers)[0]
+    const firstItem: PathModifierType = pathModifiers[itemkey]
+    // eslint-disable-next-line no-plusplus
+    for (let i = offset; i < listLength && i < offset + itemPerPage; i++) {
+      children.push({
+        ...(listItem as PropsType),
+        [c.PATH_MODIFIERS_KEY]: {
+          ...(pathModifiers as PathModifiersType),
+          [Object.keys(pathModifiers)[0]]: {
+            ...(firstItem as PathModifierType),
+            path: i,
+          },
+        } as PathModifiersType,
+      })
+    }
+  }
+  return children
+}
+
+export const getRootWrapperProps = (props: PropsType, stock: InstanceType<typeof Stock>) => {
+  const newProps = {
+    ...props,
+    // if the children generation move to wrapper, the redux genAllStateProps doesn't wortk properly. why?
+  }
+  modifierBuilder(newProps, stock)
+  actionBuilder(newProps, stock)
+  if (newProps.isList) {
+    newProps[c.V_CHILDREN_NAME] = genChildenFromListItem(newProps)
+  }
+
+  return newProps
+}
+
+export const getChildrensForRoot = (props: PropsType, children: any, Wrapper: WrapperType) => {
+  // eslint-disable-next-line no-nested-ternary
+  const parentComp = omit(props, [c.V_CHILDREN_NAME, 'parentComp'])
+  return !!props && Array.isArray(children) ? (
+    children.map((childrenItem, index) => {
+      // eslint-disable-next-line react/no-array-index-key
+      return <Wrapper key={index} {...getWrapperProps(childrenItem, parentComp)} />
+    })
+  ) : (
+    <Wrapper {...getWrapperProps(children, parentComp)} />
+  )
+}
+
+export const generateChildren = (props: PropsType, { Wrapper }: InstanceType<typeof Stock>) =>
+  props[c.V_COMP_NAME] !== '_PrimitiveProp' ? getChildrensForRoot(props, props[c.V_CHILDREN_NAME], Wrapper as WrapperType) : props[c.V_CHILDREN_NAME]

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": { "baseUrl": "./src/" },
+  "include": ["src"]
+}