Custom element resource support

src/core/middleware/resources.ts

@@ -945,6 +945,21 @@ const factory = create({ diffProperty, invalidator, destroy });
 
 const resourceMiddlewareFactory = factory(
 	({ id: middlewareId, middleware: { diffProperty, invalidator, destroy } }): ResourceMiddleware => {
+		const middleware = function(resource: any) {
+			if (isTemplate(resource.template)) {
+				let { template, transform, initOptions, ...rest } = resource;
+				return {
+					template: {
+						template,
+						transform,
+						id: initOptions ? `${middlewareId}/${initOptions.id}` : 'global',
+						initOptions
+					},
+					...rest
+				};
+			}
+			return resource;
+		};
 		const optionsMap = new Map<string, Options<any>>();
 		destroy(() => {
 			const resources = idToResourceMap.get(middlewareId);
@@ -964,7 +979,20 @@ const resourceMiddlewareFactory = factory(
 			(): ResourceMiddlewareProperties<any> => {
 				return {} as any;
 			},
-			({ resource: current }, { resource: next }) => {
+			(
+				{ resource: currentProp }: { resource: ResourceProperty<any> | ResourceTemplateWrapper },
+				{ resource: nextProp }: { resource: ResourceProperty<any> | ResourceTemplateWrapper }
+			) => {
+				if (!nextProp || !nextProp.template) {
+					return middleware({
+						template: createMemoryResourceTemplate(),
+						initOptions: { data: [], id: '' },
+						...nextProp
+					});
+				}
+
+				const next = nextProp && middleware(nextProp);
+				const current = currentProp && middleware(currentProp);
 				if (current && next) {
 					const id = next.template.id || 'global';
 					const {
@@ -1016,24 +1044,11 @@ const resourceMiddlewareFactory = factory(
 						} as any;
 					}
 				}
+
+				return next;
 			}
 		);
 
-		const middleware = function(resource: any) {
-			if (isTemplate(resource.template)) {
-				let { template, transform, initOptions, ...rest } = resource;
-				return {
-					template: {
-						template,
-						transform,
-						id: initOptions ? `${middlewareId}/${initOptions.id}` : 'global',
-						initOptions
-					},
-					...rest
-				};
-			}
-			return resource;
-		};
 		middleware.createOptions = (key: string): Options<any> => {
 			const options = optionsMap.get(key);
 			if (options) {

tests/core/unit/middleware/resources.tsx

@@ -2,6 +2,7 @@ const { it, afterEach, beforeEach } = intern.getInterface('bdd');
 const { describe } = intern.getPlugin('jsdom');
 const { assert } = intern.getPlugin('chai');
 import { renderer, tsx, create } from '../../../../src/core/vdom';
+import testRenderer, { assertion } from '../../../../src/testing/renderer';
 import Map from '../../../../src/shim/Map';
 import '../../../../src/shim/Promise';
 import { createResolvers } from '../../support/util';
@@ -91,6 +92,37 @@ describe('Resources Middleware', () => {
 		assert.strictEqual(root.innerHTML, `<div><div>${JSON.stringify([[{ hello: '2' }]])}</div><div>2</div></div>`);
 	});
 
+	it('should provide a default if no resource property is passed', () => {
+		const factory = create({ resource: createResourceMiddleware<{}>() });
+		const Widget = factory(({ id, properties }) => {
+			const { resource } = properties();
+			return resource && <div>contents</div>;
+		});
+
+		const r = testRenderer(() => <Widget resource={undefined as any} />);
+		r.expect(assertion(() => <div>contents</div>));
+	});
+
+	it('should convert resource options to a resource prop', () => {
+		const root = document.createElement('div');
+		const factory = create({ resource: createResourceMiddleware<{ hello: string }>() });
+
+		const Widget = factory(({ id, properties, middleware: { resource } }) => {
+			const { getOrRead, createOptions } = resource;
+			const {
+				resource: { template, options = createOptions(id) }
+			} = properties();
+			return <div>{JSON.stringify(getOrRead(template, options()))}</div>;
+		});
+
+		const template = createMemoryResourceTemplate<{ hello: string }>();
+		const r = renderer(() => (
+			<Widget resource={{ template, initOptions: { data: [{ hello: '1' }], id: 'id' } } as any} />
+		));
+		r.mount({ domNode: root });
+		assert.strictEqual(root.innerHTML, `<div>${JSON.stringify([[{ hello: '1' }]])}</div>`);
+	});
+
 	it('should be able to perform a read with a meta request', () => {
 		const root = document.createElement('div');
 		const factory = create({ resource: createResourceMiddleware<{ hello: string }>() });