From 80514d07bcf0b558cbdbf3cdeecec219785debb0 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Sat, 25 Jan 2020 06:24:48 +0000 Subject: [PATCH] refactored initialiseChildren into seperate file --- packages/client/src/createApp.js | 74 +++---------------- .../client/src/render/initialiseChildren.js | 60 +++++++++++++++ packages/client/src/state/stateBinding.js | 10 ++- 3 files changed, 79 insertions(+), 65 deletions(-) create mode 100644 packages/client/src/render/initialiseChildren.js diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js index f279cda5ae..f641c46d95 100644 --- a/packages/client/src/createApp.js +++ b/packages/client/src/createApp.js @@ -1,59 +1,14 @@ -import { - split, - last -} from "lodash/fp"; import {writable} from "svelte/store"; -import { $ } from "./core/common"; -import { - setupBinding -} from "./state/stateBinding"; import { createCoreApi } from "./core"; import { getStateOrValue } from "./state/getState"; import { setState, setStateFromBinding } from "./state/setState"; import { trimSlash } from "./common/trimSlash"; import { isBound } from "./state/isState"; +import { _initialiseChildren } from "./render/initialiseChildren"; export const createApp = (componentLibraries, appDefinition, user) => { - const _initialiseChildren = (parentContext, hydrate) => (childrenProps, htmlElement, context, anchor=null) => { - - const childComponents = []; - - if(hydrate) { - while (htmlElement.firstChild) { - htmlElement.removeChild(htmlElement.firstChild); - } - } - - for(let childProps of childrenProps) { - const {componentName, libName} = splitName(childProps._component); - - if(!componentName || !libName) return; - - const {initialProps, bind} = setupBinding( - store, childProps, coreApi, - context || parentContext, appDefinition.appRootPath); - - const componentProps = { - ...initialProps, - _bb:bb(context || parentContext, childProps) - }; - - const component = new (componentLibraries[libName][componentName])({ - target: htmlElement, - props: componentProps, - hydrate:false, - anchor - }); - - bind(component); - childComponents.push(component); - } - - return childComponents; - } - const coreApi = createCoreApi(appDefinition, user); appDefinition.hierarchy = coreApi.templateApi.constructHierarchy(appDefinition.hierarchy); const store = writable({ @@ -96,11 +51,18 @@ export const createApp = (componentLibraries, appDefinition, user) => { if(isFunction(event)) event(context); } + const initialiseChildrenParams = (parentContext, hydrate) => ({ + bb, coreApi, store, + componentLibraries, appDefinition, + parentContext, hydrate + }); + const bb = (context, props) => ({ - hydrateChildren: _initialiseChildren(context, true), - appendChildren: _initialiseChildren(context, false), + hydrateChildren: _initialiseChildren(initialiseChildrenParams(context, true)), + appendChildren: _initialiseChildren(initialiseChildrenParams(context, false)), insertChildren: (props, htmlElement, anchor, context) => - _initialiseChildren(context, false)(props, htmlElement, context, anchor), + _initialiseChildren(initialiseChildrenParams(context, false)) + (props, htmlElement, context, anchor), store, relativeUrl, api, @@ -160,17 +122,3 @@ const buildBindings = (boundProps, boundArrays, contextBoundProps) => { return bindings; } - -const splitName = fullname => { - const componentName = $(fullname, [ - split("/"), - last - ]); - - const libName =fullname.substring( - 0, fullname.length - componentName.length - 1); - - return {libName, componentName}; -} - - diff --git a/packages/client/src/render/initialiseChildren.js b/packages/client/src/render/initialiseChildren.js new file mode 100644 index 0000000000..2dd51b2768 --- /dev/null +++ b/packages/client/src/render/initialiseChildren.js @@ -0,0 +1,60 @@ +import { + setupBinding +} from "../state/stateBinding"; +import { + split, + last +} from "lodash/fp"; +import { $ } from "../core/common"; + +export const _initialiseChildren = ({ bb, coreApi, store, componentLibraries, appDefinition, parentContext, hydrate }) => + (childrenProps, htmlElement, context, anchor=null) => { + + const childComponents = []; + + if(hydrate) { + while (htmlElement.firstChild) { + htmlElement.removeChild(htmlElement.firstChild); + } + } + + for(let childProps of childrenProps) { + const {componentName, libName} = splitName(childProps._component); + + if(!componentName || !libName) return; + + const {initialProps, bind} = setupBinding( + store, childProps, coreApi, + context || parentContext, appDefinition.appRootPath); + + + const componentProps = { + ...initialProps, + _bb:bb(context || parentContext, childProps) + }; + + const component = new (componentLibraries[libName][componentName])({ + target: htmlElement, + props: componentProps, + hydrate:false, + anchor + }); + + bind(component); + childComponents.push(component); + } + + return childComponents; +} + +const splitName = fullname => { + const componentName = $(fullname, [ + split("/"), + last + ]); + + const libName =fullname.substring( + 0, fullname.length - componentName.length - 1); + + return {libName, componentName}; +} \ No newline at end of file diff --git a/packages/client/src/state/stateBinding.js b/packages/client/src/state/stateBinding.js index 8a055a8a62..86089a413a 100644 --- a/packages/client/src/state/stateBinding.js +++ b/packages/client/src/state/stateBinding.js @@ -15,6 +15,12 @@ import { const doNothing = () => {}; doNothing.isPlaceholder=true; +const isMetaProp = (propName) => + propName === "_component" + || propName === "_children" + || propName === "_id" + || propName === "_style"; + export const setupBinding = (store, rootProps, coreApi, context, rootPath) => { const rootInitialProps = {...rootProps}; @@ -27,9 +33,9 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => { for(let propName in props) { - if(propName === "_component") continue; + if(isMetaProp(propName)) continue; - const val = initialProps[propName]; + const val = props[propName]; if(isBound(val) && takeStateFromStore(val)) {