feat: extend slot default options

* fix: update default slot content properly

* fix: ensure correct children index

* fix: allow multiple jsx elements at root level

* fix: make sure single child slots work properly

* feat: allow slots in default values

* fix: restore essentials library

* fix: remove stray debug text

* fix: refactor slot content analyzing

* feat: open slots by default

* test: write unit tests for slot default adjustments

packages/analyzer/src/react-utils/get-react-slot-type.ts

@@ -0,0 +1,38 @@
+// tslint:disable:no-bitwise
+import * as TypeScript from 'typescript';
+import { isTypeReference } from '../typescript-utils/is-type-reference';
+
+const REACT_SLOT_TYPES_SINGLE = ['Element', 'ReactElement', 'ReactChild'];
+
+export function getReactSlotType(
+	type: TypeScript.Type,
+	ctx: { program: TypeScript.Program }
+): string | undefined {
+	const typechecker = ctx.program.getTypeChecker();
+	const symbol = type.aliasSymbol || type.symbol || type.getSymbol();
+
+	if (!symbol) {
+		return;
+	}
+
+	const resolvedSymbol =
+		(symbol.flags & TypeScript.SymbolFlags.AliasExcludes) === TypeScript.SymbolFlags.AliasExcludes
+			? typechecker.getAliasedSymbol(symbol)
+			: symbol;
+
+	if (resolvedSymbol.name === 'Array' && isTypeReference(type) && type.typeArguments) {
+		const arg = type.typeArguments[0]!;
+
+		if (!arg) {
+			return;
+		}
+
+		return getReactSlotType(arg, ctx);
+	}
+
+	if (REACT_SLOT_TYPES_SINGLE.includes(resolvedSymbol.name)) {
+		return 'single';
+	}
+
+	return 'multiple';
+}

packages/analyzer/src/react-utils/index.ts

@@ -1,4 +1,5 @@
 export * from './find-react-component-type';
 export * from './is-react-event-handler-type';
 export * from './is-react-slot-type';
+export * from './get-react-slot-type';
 export * from './get-event-type';

packages/analyzer/src/typescript-react-analyzer/slot-analyzer.test.ts

@@ -1,5 +1,5 @@
 import * as Fs from 'fs';
-import { getDefaultCode, getCommentValue, analyzeSlots } from './slot-analzyer';
+import { getDefaultCode, getCommentValue, analyzeSlots } from './slot-analyzer';
 import * as TypescriptUtils from '../typescript-utils';
 import * as TestUtils from '../test-utils';
 import { Project } from 'ts-simple-ast';

packages/analyzer/src/typescript-react-analyzer/slot-analzyer.ts → packages/analyzer/src/typescript-react-analyzer/slot-analyzer.ts

@@ -91,6 +91,8 @@ export function analyzeSlots(
 				id,
 				propertyName,
 				required,
+				quantity:
+					ReactUtils.getReactSlotType(memberType, { program: ctx.program }) || 'multiple',
 				type: propertyName === 'children' && !isExplicitSlot ? 'children' : 'property'
 			};
 		})

packages/analyzer/src/typescript-react-analyzer/slot-default-analyzer.test.ts

@@ -76,6 +76,67 @@ test('picks up number props', () => {
 	);
 });
 
+test('picks up jsx props', () => {
+	const project = new tsa.Project({ useVirtualFileSystem: true, addFilesFromTsConfig: false });
+
+	project.createSourceFile(
+		'/a.ts',
+		`import * as React from 'react'; export const A: React.SFC = () => null;`
+	);
+
+	project.createSourceFile(
+		'/c.ts',
+		`import * as React from 'react'; export const C: React.SFC = () => null;`
+	);
+
+	const result = analyzeSlotDefault(
+		`
+		import * as React from 'react';
+		import { A } from '/a';
+		import { C } from '/c';
+		export default () => <A jsx={<C />} />
+	`,
+		{ project, id: 'jsx-props', path: '/b.ts' }
+	);
+
+	expect(result).toEqual(
+		expect.objectContaining({
+			props: [
+				{
+					propName: 'jsx',
+					value: expect.objectContaining({
+						patternContextId: 'c.ts:C'
+					})
+				}
+			]
+		})
+	);
+});
+
+test('supports jsx fragment', () => {
+	const project = new tsa.Project({ useVirtualFileSystem: true, addFilesFromTsConfig: false });
+
+	project.createSourceFile(
+		'/a.ts',
+		`import * as React from 'react'; export const A: React.SFC = () => null;`
+	);
+
+	const result = analyzeSlotDefault(
+		`
+		import * as React from 'react';
+		import { A } from '/a';
+		export default () => <><A /></>
+	`,
+		{ project, id: 'jsx-fragment', path: '/b.ts' }
+	);
+
+	expect(result).toEqual(
+		expect.objectContaining({
+			jsxFragment: true
+		})
+	);
+});
+
 test('supports multiple levels of JSX elements', () => {
 	const project = new tsa.Project({ useVirtualFileSystem: true, addFilesFromTsConfig: false });
 

packages/analyzer/src/typescript-react-analyzer/slot-default-analyzer.ts

@@ -51,6 +51,18 @@ function candidateFromJSXElement(
 	element: tsa.JsxChild,
 	{ project, id }: { project: tsa.Project; id: string }
 ): ElementCandidate | undefined {
+	if (tsa.TypeGuards.isJsxFragment(element)) {
+		return {
+			parent: id,
+			id: [id, 'default'].join(':'),
+			libraryId: '',
+			patternContextId: '',
+			props: [],
+			jsxFragment: true,
+			children: getChildrenCandidates(element, { project, id })
+		};
+	}
+
 	const nameElement = getNameElement(element);
 
 	if (!nameElement) {
@@ -113,12 +125,13 @@ function candidateFromJSXElement(
 		id: [id, 'default'].join(':'),
 		libraryId: pkg.name,
 		patternContextId: [patternContextBase, exportSpecifier].join(':'),
+		jsxFragment: false,
 		props: nameElement
 			.getAttributes()
 			.filter(tsa.TypeGuards.isJsxAttribute)
 			.map(attribute => ({
 				propName: attribute.getName(),
-				value: getInitValue(attribute.getInitializer())
+				value: getInitValue(attribute.getInitializer(), { project, id })
 			})),
 		children
 	};
@@ -128,7 +141,7 @@ function getChildrenCandidates(
 	element: tsa.JsxChild,
 	{ project, id }: { project: tsa.Project; id: string }
 ): ElementCandidate[] {
-	if (tsa.TypeGuards.isJsxElement(element)) {
+	if (tsa.TypeGuards.isJsxElement(element) || tsa.TypeGuards.isJsxFragment(element)) {
 		return element
 			.getJsxChildren()
 			.map(child => candidateFromJSXElement(child, { project, id }))
@@ -139,7 +152,8 @@ function getChildrenCandidates(
 }
 
 function getInitValue(
-	init?: tsa.StringLiteral | tsa.JsxExpression | tsa.Expression | undefined
+	init: tsa.StringLiteral | tsa.JsxExpression | tsa.Expression | undefined,
+	{ project, id }: { project: tsa.Project; id: string }
 ): unknown {
 	if (typeof init === 'undefined') {
 		return;
@@ -149,17 +163,41 @@ function getInitValue(
 		return init.getLiteralValue();
 	}
 
+	if (isElement(init)) {
+		const element = getElement(init);
+
+		if (element) {
+			return candidateFromJSXElement(element, { id, project });
+		}
+	}
+
 	if (tsa.TypeGuards.isJsxExpression(init)) {
 		const exp = init.getExpression();
-		return getInitValue(exp);
+		return getInitValue(exp, { id, project });
 	}
 
 	// TODO: Propagate error/warning to user for non-literal attributes
 	return;
 }
 
-export function getElement(jsx: tsa.Node): tsa.JsxElement | tsa.JsxSelfClosingElement | undefined {
-	if (tsa.TypeGuards.isJsxElement(jsx) || tsa.TypeGuards.isJsxSelfClosingElement(jsx)) {
+export function isElement(element: tsa.Node): boolean {
+	if (
+		tsa.TypeGuards.isJsxOpeningElement(element) ||
+		tsa.TypeGuards.isJsxSelfClosingElement(element)
+	) {
+		return true;
+	}
+	return false;
+}
+
+export function getElement(
+	jsx: tsa.Node
+): tsa.JsxElement | tsa.JsxSelfClosingElement | tsa.JsxFragment | undefined {
+	if (
+		tsa.TypeGuards.isJsxElement(jsx) ||
+		tsa.TypeGuards.isJsxSelfClosingElement(jsx) ||
+		tsa.TypeGuards.isJsxFragment(jsx)
+	) {
 		return jsx;
 	}
 

packages/analyzer/src/typescript-react-analyzer/typescript-react-analyzer.ts

@@ -3,7 +3,7 @@ import * as Fs from 'fs';
 import * as Path from 'path';
 import * as PropertyAnalyzer from './property-analyzer';
 import * as ReactUtils from '../react-utils';
-import * as SlotAnalyzer from './slot-analzyer';
+import * as SlotAnalyzer from './slot-analyzer';
 import * as Types from '@meetalva/types';
 import * as TypeScriptUtils from '../typescript-utils';
 import * as ts from 'typescript';
@@ -295,6 +295,7 @@ export function analyzePatternExport(
 				id: IdHasher.getGlobalSlotId(id, 'children'),
 				label: 'children',
 				propertyName: 'children',
+				quantity: 'multiple',
 				required: false,
 				type: 'children'
 			});

packages/core/src/matchers/connect-npm-pattern-library-request.ts

@@ -3,7 +3,7 @@ import * as pkgDir from 'pkg-dir';
 import * as M from '@meetalva/message';
 import { MessageType } from '@meetalva/message';
 import * as T from '@meetalva/types';
-import * as Analzyer from '@meetalva/analyzer';
+import * as Analyzer from '@meetalva/analyzer';
 import { MatcherCreator } from './context';
 
 export const connectNpmPatternLibrary: MatcherCreator<M.ConnectNpmPatternLibraryRequest> = ({
@@ -67,7 +67,7 @@ export const connectNpmPatternLibrary: MatcherCreator<M.ConnectNpmPatternLibrary
 			return abort();
 		}
 
-		const result = await Analzyer.getPackage(m.payload.npmId, {
+		const result = await Analyzer.getPackage(m.payload.npmId, {
 			cwd: await host.resolveFrom(T.HostBase.AppData, 'packages'),
 			dirname,
 			appPath: await host.resolveFrom(T.HostBase.AppPath, '.')
@@ -90,7 +90,7 @@ export const connectNpmPatternLibrary: MatcherCreator<M.ConnectNpmPatternLibrary
 			return abort();
 		}
 
-		const analysisResult = await Analzyer.analyze(result.path);
+		const analysisResult = await Analyzer.analyze(result.path);
 
 		if (analysisResult.type === T.LibraryAnalysisResultType.Error) {
 			host.log(analysisResult.error.message);

packages/core/src/preview/preview-store.ts

@@ -216,11 +216,11 @@ export class PreviewStore<V> {
 	public getSlots<T>(
 		element: Model.Element,
 		render: (element: Model.Element) => T
-	): { [propName: string]: T[] | null } {
+	): { [propName: string]: T | T[] | null } {
 		return element
 			.getContents()
 			.filter(content => content.getSlotType() !== Types.SlotType.Children)
-			.reduce<{ [key: string]: T[] | null }>((renderProperties, content) => {
+			.reduce<{ [key: string]: T | T[] | null }>((renderProperties, content) => {
 				const slot = content.getSlot();
 
 				if (!slot) {
@@ -231,6 +231,11 @@ export class PreviewStore<V> {
 				const children =
 					elements.length === 0 && !slot.getRequired() ? null : elements.map(render);
 
+				if (slot.getQuantity() === Types.SlotQuantity.Single) {
+					renderProperties[slot.getPropertyName()] = children && children[0];
+					return renderProperties;
+				}
+
 				renderProperties[slot.getPropertyName()] = children;
 				return renderProperties;
 			}, {});

packages/core/src/store/view-store.ts

@@ -8,6 +8,7 @@ import * as Types from '@meetalva/types';
 import { Sender } from '../sender';
 
 import * as uuid from 'uuid';
+import { ElementCandidate } from '@meetalva/types';
 
 export interface ViewStoreInit {
 	app: Model.AlvaApp<Message>;
@@ -200,6 +201,12 @@ export class ViewStore {
 		});
 
 		const fromCandidate = (candidate: Types.ElementCandidate, content: Model.ElementContent) => {
+			if (candidate.jsxFragment) {
+				candidate.children.forEach(childCandidate => {
+					fromCandidate(childCandidate, content);
+				});
+			}
+
 			const library = project.getPatternLibraryByName(candidate.libraryId);
 
 			if (!library) {
@@ -217,23 +224,26 @@ export class ViewStore {
 				pattern
 			});
 
+			content.insert({
+				at: undefined,
+				element: child
+			});
+
+			this.addElement(child);
+
 			candidate.props.forEach(propCandidate => {
 				const prop = child.getPropertyByContextId(propCandidate.propName);
+				const slotContent = child.getContentBySlotContextId(propCandidate.propName);
 
-				if (!prop) {
-					return;
+				if (prop) {
+					prop.setValue(propCandidate.value);
 				}
 
-				prop.setValue(propCandidate.value);
-			});
-
-			content.insert({
-				at: 0,
-				element: child
+				if (slotContent) {
+					fromCandidate(propCandidate.value, slotContent);
+				}
 			});
 
-			this.addElement(child);
-
 			candidate.children.forEach(childCandidate => {
 				const childContent = child.getContentBySlotType(Types.SlotType.Children);
 

packages/essentials/src/conditional.tsx

@@ -22,7 +22,7 @@ export interface ConditionalProps {
 	 *     alignItems={E.AlignItems.center}
 	 *     height="100px"
 	 *     backgroundColor="#eee">
-	 *     <Text text="Shown if condition is true"/>
+	 *     <E.Text text="Shown if condition is true"/>
 	 *   </E.Box>
 	 * );
 	 * ~~~