Change properties and children API to functions

docs/en/testing/supplemental.md

@@ -298,7 +298,8 @@ import store from './store';
 
 const factory = create({ store }).properties<{ id: string }>();
 
-export default factory(function MyWidget({ properties: { id }, middleware: store }) {
+export default factory(function MyWidget({ properties, middleware: store }) {
+	const { id } = properties();
     const { path, get, executor } = store;
     const details = get(path('details');
     let isLoading = get(path('isLoading'));

src/core/interfaces.d.ts

@@ -355,7 +355,12 @@ export type MiddlewareApiMap<U extends MiddlewareMap<any>> = { [P in keyof U]: R
 
 export interface Callback<Props, Middleware, ReturnValue> {
 	(
-		options: { id: string; middleware: MiddlewareApiMap<Middleware>; properties: Props; children?: DNode[] }
+		options: {
+			id: string;
+			middleware: MiddlewareApiMap<Middleware>;
+			properties: () => Props;
+			children: () => DNode[];
+		}
 	): ReturnValue;
 }
 

src/core/middleware/i18n.ts

@@ -8,7 +8,7 @@ import { I18nProperties, LocaleData, LocalizedMessages, INJECTOR_KEY, registerI1
 
 const factory = create({ invalidator, injector, getRegistry }).properties<I18nProperties>();
 
-export const i18n = factory(({ middleware: { invalidator, injector, getRegistry }, properties }) => {
+export const i18n = factory(({ properties, middleware: { invalidator, injector, getRegistry } }) => {
 	const i18nInjector = injector.get(INJECTOR_KEY);
 	if (!i18nInjector) {
 		const registry = getRegistry();
@@ -19,7 +19,7 @@ export const i18n = factory(({ middleware: { invalidator, injector, getRegistry
 	injector.subscribe(INJECTOR_KEY);
 
 	function getLocaleMessages(bundle: Bundle<Messages>): Messages | void {
-		let locale = properties.locale;
+		let { locale } = properties();
 		if (!locale) {
 			const injectedLocale = injector.get<Injector<LocaleData>>(INJECTOR_KEY);
 			if (injectedLocale) {
@@ -39,7 +39,7 @@ export const i18n = factory(({ middleware: { invalidator, injector, getRegistry
 	}
 
 	function resolveBundle<T extends Messages>(bundle: Bundle<T>): Bundle<T> {
-		let { i18nBundle } = properties;
+		let { i18nBundle } = properties();
 		if (i18nBundle) {
 			if (i18nBundle instanceof Map) {
 				i18nBundle = i18nBundle.get(bundle);
@@ -64,10 +64,10 @@ export const i18n = factory(({ middleware: { invalidator, injector, getRegistry
 
 	return {
 		localize<T extends Messages>(bundle: Bundle<T>, useDefaults = false): LocalizedMessages<T> {
+			let { locale } = properties();
 			bundle = resolveBundle(bundle);
 			const messages = getLocaleMessages(bundle);
 			const isPlaceholder = !messages;
-			let locale = properties.locale;
 			if (!locale) {
 				const injectedLocale = injector.get<Injector<LocaleData>>(INJECTOR_KEY);
 				if (injectedLocale) {

src/core/middleware/theme.ts

@@ -55,27 +55,27 @@ export const theme = factory(
 		});
 		return {
 			classes<T extends ClassNames>(css: T): T {
-				let theme = cache.get<T>(css);
+				let theme = cache.get(css);
 				if (theme) {
 					return theme;
 				}
 				const { [THEME_KEY]: key, ...classes } = css;
 				themeKeys.add(key);
 				theme = classes as T;
-				let currentTheme = properties.theme;
+				let { theme: currentTheme, classes: currentClasses } = properties();
 				if (!currentTheme) {
 					const injectedTheme = injector.get<Injector<Theme>>(INJECTED_THEME_KEY);
 					currentTheme = injectedTheme ? injectedTheme.get() : undefined;
 				}
 				if (currentTheme && currentTheme[key]) {
 					theme = { ...theme, ...currentTheme[key] };
 				}
-				if (properties.classes && properties.classes[key]) {
-					const classKeys = Object.keys(properties.classes[key]);
+				if (currentClasses && currentClasses[key]) {
+					const classKeys = Object.keys(currentClasses[key]);
 					for (let i = 0; i < classKeys.length; i++) {
 						const classKey = classKeys[i];
 						if (theme[classKey]) {
-							theme[classKey] = `${theme[classKey]} ${properties.classes[key][classKey].join(' ')}`;
+							theme[classKey] = `${theme[classKey]} ${currentClasses[key][classKey].join(' ')}`;
 						}
 					}
 				}

src/core/vdom.ts

@@ -1646,28 +1646,22 @@ export function renderer(renderer: () => RenderResult): Renderer {
 		for (let i = 0; i < keys.length; i++) {
 			const middleware = middlewares[keys[i]]();
 			const payload: any = {
-				id: uniqueId
-			};
-			Object.defineProperty(payload, 'properties', {
-				get() {
+				id: uniqueId,
+				properties: () => {
 					const widgetMeta = widgetMetaMap.get(id);
 					if (widgetMeta) {
 						return { ...widgetMeta.properties };
 					}
+					return {};
 				},
-				enumerable: true,
-				configurable: true
-			});
-			Object.defineProperty(payload, 'children', {
-				get() {
+				children: () => {
 					const widgetMeta = widgetMetaMap.get(id);
 					if (widgetMeta) {
 						return widgetMeta.children;
 					}
-				},
-				enumerable: true,
-				configurable: true
-			});
+					return [];
+				}
+			};
 			if (middleware.middlewares) {
 				const resolvedMiddleware = resolveMiddleware(middleware.middlewares, id);
 				payload.middleware = resolvedMiddleware;
@@ -1722,7 +1716,7 @@ export function renderer(renderer: () => RenderResult): Renderer {
 					properties: next.node.properties,
 					children: next.node.children,
 					deferRefs: 0,
-					rendering: false,
+					rendering: true,
 					registry: _mountOptions.registry
 				};
 
@@ -1736,10 +1730,11 @@ export function renderer(renderer: () => RenderResult): Renderer {
 
 			rendered = Constructor({
 				id: next.id,
-				properties: next.node.properties,
-				children: next.node.children,
+				properties: () => next.node.properties,
+				children: () => next.node.children,
 				middleware: widgetMeta.middleware
 			});
+			widgetMeta.rendering = false;
 			if (widgetMeta.deferRefs > 0) {
 				return false;
 			}
@@ -1835,8 +1830,8 @@ export function renderer(renderer: () => RenderResult): Renderer {
 					widgetMeta.dirty = false;
 					rendered = Constructor({
 						id: next.id,
-						properties: next.node.properties,
-						children: next.node.children,
+						properties: () => next.node.properties,
+						children: () => next.node.children,
 						middleware: widgetMeta.middleware
 					});
 					if (widgetMeta.deferRefs > 0) {

src/routing/ActiveLink.ts

@@ -21,8 +21,8 @@ export const ActiveLink = factory(function ActiveLink({
 	properties,
 	children
 }) {
-	const { to, routerKey = 'router', params } = properties;
-	let { activeClasses, classes = [], ...props } = properties;
+	const { to, routerKey = 'router', params } = properties();
+	let { activeClasses, classes = [], ...props } = properties();
 
 	diffProperty('to', (current: ActiveLinkProperties, next: ActiveLinkProperties) => {
 		if (current.to !== next.to) {
@@ -62,7 +62,7 @@ export const ActiveLink = factory(function ActiveLink({
 		}
 		props = { ...props, classes };
 	}
-	return w(Link, props, children);
+	return w(Link, props, children());
 });
 
 export default ActiveLink;

src/routing/Link.ts

@@ -16,7 +16,7 @@ export interface LinkProperties extends VNodeProperties {
 const factory = create({ injector }).properties<LinkProperties>();
 
 export const Link = factory(function Link({ middleware: { injector }, properties, children }) {
-	let { routerKey = 'router', to, isOutlet = true, target, params = {}, onClick, ...props } = properties;
+	let { routerKey = 'router', to, isOutlet = true, target, params = {}, onClick, ...props } = properties();
 	const router = injector.get<Router>(routerKey);
 	let href: string | undefined = to;
 
@@ -37,7 +37,7 @@ export const Link = factory(function Link({ middleware: { injector }, properties
 	} else {
 		linkProps = { ...props, href };
 	}
-	return v('a', linkProps, children);
+	return v('a', linkProps, children());
 });
 
 export default Link;

src/routing/Outlet.ts

@@ -17,7 +17,7 @@ export const Outlet = factory(function Outlet({
 	middleware: { cache, injector, diffProperty, invalidator },
 	properties
 }) {
-	const { renderer, id, routerKey = 'router' } = properties;
+	const { renderer, id, routerKey = 'router' } = properties();
 	const currentHandle = cache.get<Function>('handle');
 	if (!currentHandle) {
 		const handle = injector.subscribe(routerKey);

src/testing/harness.ts

@@ -96,22 +96,14 @@ export function harness(renderFunc: () => WNode, options: HarnessOptions | Custo
 					isMock = true;
 				}
 				const payload: any = {
-					id: uniqueId
-				};
-				Object.defineProperty(payload, 'properties', {
-					get() {
+					id: uniqueId,
+					properties: () => {
 						return { ...properties };
 					},
-					enumerable: true,
-					configurable: true
-				});
-				Object.defineProperty(payload, 'children', {
-					get() {
+					children: () => {
 						return children;
-					},
-					enumerable: true,
-					configurable: true
-				});
+					}
+				};
 				if (middleware.middlewares) {
 					const resolvedMiddleware = resolveMiddleware(middleware.middlewares, mocks);
 					payload.middleware = resolvedMiddleware;
@@ -199,7 +191,7 @@ export function harness(renderFunc: () => WNode, options: HarnessOptions | Custo
 			properties = { ...wNode.properties };
 			children = wNode.children;
 			if (invalidated) {
-				render = widget({ id: 'test', middleware, properties, children });
+				render = widget({ id: 'test', middleware, properties: () => properties, children: () => children });
 			}
 		} else {
 			widget.__setProperties__(wNode.properties);

tests/core/unit/middleware/block.ts

@@ -22,11 +22,17 @@ function waitForCall(calls = 1, stub: SinonStub) {
 
 describe('block middleware', () => {
 	beforeEach(() => {
-		cache = cacheMiddleware().callback({ id: 'cache-test', middleware: { destroy: sb.stub() }, properties: {} });
+		cache = cacheMiddleware().callback({
+			id: 'cache-test',
+			middleware: { destroy: sb.stub() },
+			properties: () => ({}),
+			children: () => []
+		});
 		icache = icacheMiddleware().callback({
 			id: 'cache-test',
 			middleware: { cache, invalidator: invalidatorStub },
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 	});
 	afterEach(() => {
@@ -41,7 +47,8 @@ describe('block middleware', () => {
 				icache,
 				defer: deferStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 
 		let resolverOne: any;

tests/core/unit/middleware/breakpoint.ts

@@ -32,7 +32,8 @@ describe('breakpoint middleware', () => {
 			middleware: {
 				resize: resizeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		assert.isNull(breakpoint.get('root'));
 	});
@@ -44,7 +45,8 @@ describe('breakpoint middleware', () => {
 			middleware: {
 				resize: resizeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 
 		resizeStub.get
@@ -81,7 +83,8 @@ describe('breakpoint middleware', () => {
 			middleware: {
 				resize: resizeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 
 		resizeStub.get
@@ -122,7 +125,8 @@ describe('breakpoint middleware', () => {
 			middleware: {
 				resize: resizeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 
 		resizeStub.get

tests/core/unit/middleware/cache.ts

@@ -18,7 +18,8 @@ describe('cache middleware', () => {
 			middleware: {
 				destroy: destroyStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		assert.isUndefined(cache.get('test'));
 		cache.set('test', 'value');
@@ -32,7 +33,8 @@ describe('cache middleware', () => {
 			middleware: {
 				destroy: destroyStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		cache.set('test', 'value');
 		assert.isTrue(destroyStub.calledOnce);
@@ -47,7 +49,8 @@ describe('cache middleware', () => {
 			middleware: {
 				destroy: destroyStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		assert.isUndefined(cache.get('test'));
 		cache.set('test', 'value');

tests/core/unit/middleware/dimensions.ts

@@ -24,7 +24,8 @@ describe('dimensions middleware', () => {
 			middleware: {
 				node: nodeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		const client = { clientLeft: 1, clientTop: 2, clientWidth: 3, clientHeight: 4 };
 		const offset = { offsetHeight: 10, offsetLeft: 10, offsetTop: 10, offsetWidth: 10 };
@@ -68,7 +69,8 @@ describe('dimensions middleware', () => {
 			middleware: {
 				node: nodeStub
 			},
-			properties: {}
+			properties: () => ({}),
+			children: () => []
 		});
 		let defaultDims = dimensions.get('div');
 		assert.deepEqual(defaultDims, {