fix: add page root element (#435)

src/component/container/element-list.tsx

@@ -80,7 +80,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
 		pattern.getSlots().forEach(slot => {
 			const listItem = this.createItemFromSlot(slot, element, selectedElement);
 
-			if (slot.getId() === Pattern.DEFAULT_SLOT_ID) {
+			if (slot.getId() === Pattern.DEFAULT_SLOT_PROPERTY_NAME) {
 				defaultSlotItems = listItem.children;
 			} else {
 				slots.push(listItem);
@@ -228,7 +228,9 @@ export class ElementList extends React.Component<{}, ElementListState> {
 		const styleguide = store.getStyleguide() as Styleguide;
 		const patternId = e.dataTransfer.getData('patternId');
 		const dropTargetElement = elementFromTarget(e.target);
-		const newParent = dropTargetElement ? dropTargetElement.getParent() : undefined;
+		const newParent = dropTargetElement
+			? dropTargetElement.getParent() || dropTargetElement
+			: undefined;
 		const isPlaceholder =
 			(e.target as HTMLElement).getAttribute(ElementAnchors.placeholder) === 'true';
 

src/preview/get-component.ts

@@ -12,9 +12,8 @@ export interface InputComponentProps extends PassedComponentProps {
 }
 
 export interface SyntheticComponents<T> {
-	// tslint:disable-next-line:no-any
 	asset: T;
-	// tslint:disable-next-line:no-any
+	page: T;
 	text: T;
 }
 

src/preview/preview-renderer.tsx

@@ -156,15 +156,17 @@ class PreviewComponent extends React.Component<PreviewComponentProps> {
 
 		// tslint:disable-next-line:no-any
 		const Component = props.getComponent(props, {
-			// tslint:disable-next-line:no-any
-			text: (p: any) => p.text,
 			// tslint:disable-next-line:no-any
 			asset: (p: any) => {
 				if (!p.asset || typeof p.asset !== 'string') {
 					return null;
 				}
 				return <img src={p.asset} style={{ width: '100%', height: 'auto' }} />;
-			}
+			},
+			// tslint:disable-next-line:no-any
+			page: (p: any) => <>{p.children}</>,
+			// tslint:disable-next-line:no-any
+			text: (p: any) => p.text
 			// tslint:disable-next-line:no-any
 		}) as any;
 

src/preview/preview.tsx

@@ -253,11 +253,14 @@ function startRouter(store: PreviewStore): void {
 
 		const previousPage = store.pages.find(page => page.id === store.pageId) || store.pages[0];
 
-		const nextCandidate = hash.startsWith('page-')
+		const nextPage = hash.startsWith('page-')
 			? store.pages[Number(hash.replace('page-', '')) - 1]
 			: store.pages.find(page => page.id === hash);
 
-		const nextPage = nextCandidate || store.pages[0];
+		if (!nextPage) {
+			return;
+		}
+
 		store.pageId = nextPage.id;
 
 		if (document.title === '' || document.title === previousPage.name) {

src/store/page/page-element.ts

@@ -331,7 +331,7 @@ export class PageElement {
 	 */
 	@MobX.action
 	public getSlotContents(slotId?: string): PageElement[] {
-		const internalSlotId = slotId || Pattern.DEFAULT_SLOT_ID;
+		const internalSlotId = slotId || Pattern.DEFAULT_SLOT_PROPERTY_NAME;
 
 		if (!this.contents.has(internalSlotId)) {
 			this.contents.set(internalSlotId, []);

src/store/page/page-ref.ts

@@ -256,7 +256,7 @@ export class PageRef {
 		const path = Path.resolve(store.getPagesPath(), this.path);
 
 		if (!Fs.existsSync(path)) {
-			const page = Page.fromJsonObject({}, this.id);
+			const page = Page.create(this.id);
 			Persister.saveYaml(path, page.toJsonObject());
 			this.updateLastPersistedPath();
 		}

src/store/page/page.ts

@@ -4,6 +4,7 @@ import { PageElement } from './page-element';
 import { PageRef } from './page-ref';
 import { Project } from '../project';
 import { Store } from '../store';
+import { Styleguide, SyntheticPatternType } from '../styleguide/styleguide';
 
 /**
  * The current actually loaded page of a project. It consists of a tree of page elements,
@@ -35,6 +36,29 @@ export class Page {
 		this.pageRef = pageRef;
 	}
 
+	/**
+	 * Create a new empty page
+	 */
+	public static create(id: string): Page {
+		const store = Store.getInstance();
+		const styleguide = store.getStyleguide() as Styleguide;
+		const pageRef = store.getPageRefById(id);
+
+		if (!pageRef) {
+			throw new Error(`Unknown page ID '${id}'`);
+		}
+
+		const page = new Page(pageRef);
+
+		page.setRoot(
+			new PageElement({
+				pattern: styleguide.getSyntheticPattern(SyntheticPatternType.Page)
+			})
+		);
+
+		return page;
+	}
+
 	/**
 	 * Loads and returns a page from a given JSON object.
 	 * @param jsonObject The JSON object to load from.

src/store/styleguide/pattern.ts

@@ -17,17 +17,7 @@ export class Pattern {
 	/**
 	 * The ID of the default slot.
 	 */
-	public static DEFAULT_SLOT_ID: string = 'default';
-
-	/**
-	 * The ID of the synthetic asset content pattern.
-	 */
-	public static SYNTHETIC_ASSET_ID: string = 'synthetic:asset';
-
-	/**
-	 * The ID of the synthetic text content pattern.
-	 */
-	public static SYNTHETIC_TEXT_ID: string = 'synthetic:text';
+	public static DEFAULT_SLOT_PROPERTY_NAME: string = 'default';
 
 	/**
 	 * The name of the export in the JavaScript implementation of the pattern.
@@ -72,7 +62,7 @@ export class Pattern {
 	 * The slots this pattern supports
 	 */
 	protected slots: Map<string, Slot> = new Map([
-		[Pattern.DEFAULT_SLOT_ID, new Slot(Pattern.DEFAULT_SLOT_ID)]
+		[Pattern.DEFAULT_SLOT_PROPERTY_NAME, new Slot(Pattern.DEFAULT_SLOT_PROPERTY_NAME)]
 	]);
 
 	/**

src/store/styleguide/styleguide.ts

@@ -5,6 +5,12 @@ import { Pattern } from './pattern';
 import { StringProperty } from './property/string-property';
 import { StyleguideAnalyzer } from '../../styleguide/analyzer/styleguide-analyzer';
 
+export enum SyntheticPatternType {
+	Page = 'synthetic:page',
+	Placeholder = 'synthetic:placeholder',
+	Text = 'synthetic:text'
+}
+
 /**
  * The styleguide is the component library the current Alva space bases on.
  * It consists of a set of patterns the page element themselves base on.
@@ -68,7 +74,20 @@ export class Styleguide {
 		const patternsDir = new Directory(this.getPatternsPath());
 		this.patternRoot = new PatternFolder(patternsDir.getName());
 
-		this.addSyntheticPatterns();
+		const folder = new PatternFolder('synthetic', this.patternRoot);
+
+		const pagePattern = new Pattern(SyntheticPatternType.Page, 'Page', '');
+		this.addPattern(pagePattern);
+
+		const textPattern = new Pattern(SyntheticPatternType.Text, 'Text', '');
+		textPattern.addProperty(new StringProperty(StringProperty.SYNTHETIC_TEXT_ID));
+		folder.addPattern(textPattern);
+		this.addPattern(textPattern);
+
+		const assetPattern = new Pattern(SyntheticPatternType.Placeholder, 'Placeholder', '');
+		assetPattern.addProperty(new AssetProperty(AssetProperty.SYNTHETIC_ASSET_ID));
+		folder.addPattern(assetPattern);
+		this.addPattern(assetPattern);
 
 		if (this.analyzer) {
 			this.analyzer.analyze(this);
@@ -85,28 +104,6 @@ export class Styleguide {
 		this.patterns.set(pattern.getId(), pattern);
 	}
 
-	/**
-	 * Adds Alva's synthetic patterns to this styleguide.
-	 * Synthetic patterns do not have a physical implementation.
-	 * They are required to create page elements that represent values only,
-	 * such as child text nodes.
-	 */
-	private addSyntheticPatterns(): void {
-		const folder = new PatternFolder('synthetic', this.patternRoot);
-
-		const textPattern = new Pattern(Pattern.SYNTHETIC_TEXT_ID, 'Text', '');
-		const textProperty = new StringProperty(StringProperty.SYNTHETIC_TEXT_ID);
-		textPattern.addProperty(textProperty);
-		folder.addPattern(textPattern);
-		this.addPattern(textPattern);
-
-		const assetPattern = new Pattern(Pattern.SYNTHETIC_ASSET_ID, 'Placeholder', '');
-		const assetProperty = new AssetProperty(AssetProperty.SYNTHETIC_ASSET_ID);
-		assetPattern.addProperty(assetProperty);
-		folder.addPattern(assetPattern);
-		this.addPattern(assetPattern);
-	}
-
 	/**
 	 * Returns the analyzer active in this styleguide. The actual one depends on the type of
 	 * styleguide. The analyzers detects patterns (and pattern folders) it finds to the list of
@@ -161,4 +158,13 @@ export class Styleguide {
 	public getPatternsPath(): string {
 		return this.patternsPath;
 	}
+
+	/**
+	 * Returns a parsed pattern information object for a given pattern ID.
+	 * @param type The type of the synthetic pattern.
+	 * @return The resolved pattern
+	 */
+	public getSyntheticPattern(type: SyntheticPatternType): Pattern {
+		return this.patterns.get(type) as Pattern;
+	}
 }