feat: beef up onStoreCreate

src/container/property-list/action-payload-input.tsx

@@ -24,8 +24,8 @@ export class ActionPayloadInput extends React.Component<ActionInputProps> {
 
 		const payloadType = props.elementAction.getPayloadType();
 
-		switch (userProperty.getType()) {
-			case Types.UserStorePropertyType.String:
+		switch (userProperty.getValueType()) {
+			case Types.UserStorePropertyValueType.String:
 				return (
 					<div
 						style={{
@@ -113,7 +113,7 @@ export class ActionPayloadInput extends React.Component<ActionInputProps> {
 						)}
 					</div>
 				);
-			case Types.UserStorePropertyType.Page: {
+			case Types.UserStorePropertyValueType.Page: {
 				const project = props.store.getProject();
 				const page = project.getPageById(props.elementAction.getPayload());
 

src/container/property-list/property-item-event.tsx

@@ -67,7 +67,7 @@ export class PropertyItemEvent extends React.Component<PropertyItemEventProps> {
 			? userStore.getPropertyById(storePropertyId)
 			: undefined;
 
-		if (storeProperty && storeProperty.getType() === Types.UserStorePropertyType.Page) {
+		if (storeProperty && storeProperty.getValueType() === Types.UserStorePropertyValueType.Page) {
 			const page = props.store.getPages()[0];
 			elementAction.setPayload(page ? page.getId() : '');
 		}
@@ -105,8 +105,9 @@ export class PropertyItemEvent extends React.Component<PropertyItemEventProps> {
 				const newProperty = new Model.UserStoreProperty({
 					id: uuid.v4(),
 					name: item.value,
-					type: Types.UserStorePropertyType.String,
-					payload: ''
+					valueType: Types.UserStorePropertyValueType.String,
+					type: Types.UserStorePropertyType.Concrete,
+					initialValue: ''
 				});
 
 				userStore.addProperty(newProperty);
@@ -204,6 +205,7 @@ export class PropertyItemEvent extends React.Component<PropertyItemEventProps> {
 									placeholder="Select Variable"
 									onChange={(e, meta) => this.handlePropertyNameChange(e, meta)}
 									property={userProperty}
+									type={Types.UserStorePropertyType.Concrete}
 								/>
 							</div>
 						)}

src/container/property-list/reference-select.tsx

@@ -96,8 +96,9 @@ export class ReferenceSelect extends React.Component<ReferenceSelectProps> {
 				const newProperty = new Model.UserStoreProperty({
 					id: uuid.v4(),
 					name: item.value,
-					type: Types.UserStorePropertyType.String,
-					payload: ''
+					type: Types.UserStorePropertyType.Concrete,
+					valueType: Types.UserStorePropertyValueType.String,
+					initialValue: ''
 				});
 
 				userStore.addProperty(newProperty);

src/container/user-store-property-select.tsx

@@ -3,12 +3,14 @@ import * as MobxReact from 'mobx-react';
 import * as Model from '../model';
 import * as React from 'react';
 import { ViewStore } from '../store';
+import * as Types from '../types';
 
 export interface UserStorePropertySelectProps {
 	autoFocus?: boolean;
 	placeholder: string;
 	menuIsOpen?: boolean;
 	property: Model.UserStoreProperty | undefined;
+	type?: Types.UserStorePropertyType;
 	onChange: Components.CreateSelectProps['onChange'];
 	onBlur?: React.ChangeEventHandler<HTMLElement>;
 }
@@ -23,6 +25,7 @@ export class UserStorePropertySelect extends React.Component<UserStorePropertySe
 			.getProject()
 			.getUserStore()
 			.getProperties()
+			.filter(this.props.type ? p => p.getType() === this.props.type : () => true)
 			.map(p => ({
 				label: p.getName(),
 				value: p.getId()

src/model/design-time-user-store.ts

@@ -0,0 +1,228 @@
+import * as Mobx from 'mobx';
+import * as Types from '../types';
+import { UserStoreProperty } from './user-store-property';
+
+export type DesignTimeDescriptor = ConcreteDesignTimeDescriptor | ComputedDesignTimeDescriptor;
+
+export interface ConcreteDesignTimeDescriptor {
+	type?: DesignTimePropertyType.Concrete;
+	value: string;
+	get?: undefined;
+}
+
+export interface ComputedDesignTimeDescriptor {
+	type?: DesignTimePropertyType.Computed;
+	value?: undefined;
+	get(): string;
+}
+
+export type QualifiedDesignTimeDescriptor =
+	| QualifiedConcreteDesignTimeDescriptor
+	| QualifiedComputedDesignTimeDescriptor;
+
+export interface QualifiedConcreteDesignTimeDescriptor {
+	type: DesignTimePropertyType.Concrete;
+	value: string;
+	get: undefined;
+}
+
+export interface QualifiedComputedDesignTimeDescriptor {
+	type: DesignTimePropertyType.Computed;
+	value: undefined;
+	get(): string;
+}
+
+export enum DesignTimePropertyType {
+	Computed,
+	Concrete
+}
+
+export class DesignTimeUserStore {
+	@Mobx.observable private internalStoreProperties: UserStoreProperty[] = [];
+	@Mobx.observable private internalProperties: DesignTimeProperty[] = [];
+
+	@Mobx.computed
+	private get storeProperties(): DesignTimeProperty[] {
+		return this.internalStoreProperties.map(p => DesignTimeProperty.fromProperty(p));
+	}
+
+	@Mobx.computed
+	private get allProperties(): Map<string, DesignTimeProperty> {
+		return [...this.storeProperties, ...this.internalProperties].reduce((m, p) => {
+			m.set(p.getName(), p);
+			return m;
+		}, new Map());
+	}
+
+	public constructor({ properties }: { properties: UserStoreProperty[] }) {
+		this.internalStoreProperties = properties;
+	}
+
+	public getProperties(): DesignTimeProperty[] {
+		return [...this.allProperties.values()];
+	}
+
+	public getDesignProperties(): DesignTimeProperty[] {
+		return this.internalProperties;
+	}
+
+	public getProperty(name: string): DesignTimeProperty | undefined {
+		return this.allProperties.get(name);
+	}
+
+	public defineProperty(name: string, descriptor: DesignTimeDescriptor): DesignTimeProperty {
+		const prop = DesignTimeProperty.fromDescriptor(name, descriptor);
+		this.internalProperties.push(prop);
+
+		return prop;
+	}
+}
+
+export interface DesignTimePropertyInit {
+	name: string;
+	type: DesignTimePropertyType;
+	value: string | undefined;
+	getter: Computation | undefined;
+}
+
+export type Computation = () => string;
+
+export class DesignTimeProperty {
+	@Mobx.observable private internalName: string;
+	@Mobx.observable private internalType: DesignTimePropertyType;
+	@Mobx.observable private internalValue: string | undefined;
+	@Mobx.observable private internalGetter: Computation | undefined;
+	private property: UserStoreProperty | undefined;
+
+	@Mobx.computed
+	private get name(): string {
+		if (this.property) {
+			return this.property.getName();
+		}
+
+		return this.internalName;
+	}
+
+	@Mobx.computed
+	private get type(): DesignTimePropertyType {
+		if (this.property) {
+			return this.property.getType() === Types.UserStorePropertyType.Concrete
+				? DesignTimePropertyType.Concrete
+				: DesignTimePropertyType.Computed;
+		}
+
+		return this.internalType;
+	}
+
+	@Mobx.computed
+	private get value(): string | undefined {
+		if (this.property) {
+			this.property.getValue();
+		}
+
+		return this.internalValue;
+	}
+
+	@Mobx.computed
+	private get getter(): Computation | undefined {
+		if (this.property) {
+			this.property.getGetter();
+		}
+
+		return this.internalGetter;
+	}
+
+	public constructor(init: DesignTimePropertyInit) {
+		this.internalName = init.name;
+		this.internalType = init.type;
+		this.internalValue = init.value;
+		this.internalGetter = init.getter;
+	}
+
+	public static fromProperty(property: UserStoreProperty): DesignTimeProperty {
+		const prop = new DesignTimeProperty({
+			name: property.getName(),
+			type:
+				property.getType() === Types.UserStorePropertyType.Concrete
+					? DesignTimePropertyType.Concrete
+					: DesignTimePropertyType.Computed,
+			value: property.getValue(),
+			getter: property.getGetter()
+		});
+
+		prop.setProperty(property);
+		return prop;
+	}
+
+	public static fromDescriptor(
+		name: string,
+		descriptor: DesignTimeDescriptor
+	): DesignTimeProperty {
+		const qualified = qualifyDescriptor(descriptor);
+
+		return new DesignTimeProperty({
+			name,
+			type: qualified.type,
+			value: qualified.value,
+			getter: qualified.get
+		});
+	}
+
+	public configureProperty(descriptor: DesignTimeDescriptor): void {
+		const qualified = qualifyDescriptor(descriptor);
+
+		this.internalType = qualified.type;
+		this.internalValue = qualified.value;
+		this.internalGetter = qualified.get;
+	}
+
+	public getName(): string {
+		return this.name;
+	}
+
+	public getType(): DesignTimePropertyType {
+		return this.type;
+	}
+
+	public getValue(): string | undefined {
+		return this.value;
+	}
+
+	public getGetter(): Computation | undefined {
+		return this.getter;
+	}
+
+	public getProperty(): UserStoreProperty | undefined {
+		return this.property;
+	}
+
+	public setProperty(property: UserStoreProperty): void {
+		this.property = property;
+
+		Mobx.autorun(() => {
+			this.internalName = property.getName();
+			this.internalType =
+				property.getType() === Types.UserStorePropertyType.Concrete
+					? DesignTimePropertyType.Concrete
+					: DesignTimePropertyType.Computed;
+			this.internalValue = property.getValue();
+			this.internalGetter = property.getGetter();
+		});
+	}
+}
+
+function qualifyDescriptor(descriptor: DesignTimeDescriptor): QualifiedDesignTimeDescriptor {
+	if (typeof descriptor.get === 'function') {
+		return {
+			type: DesignTimePropertyType.Computed,
+			get: descriptor.get,
+			value: undefined
+		};
+	}
+
+	return {
+		type: DesignTimePropertyType.Concrete,
+		get: undefined,
+		value: descriptor.value || ''
+	};
+}

src/model/element-action.ts

@@ -102,13 +102,13 @@ export class ElementAction {
 			case Types.UserStoreActionType.Set: {
 				const storeProperty = this.userStore.getPropertyById(this.storePropertyId);
 				if (storeProperty) {
-					storeProperty.setPayload(this.getResolvedPayload({ project, event }) || '');
+					storeProperty.setValue(this.getResolvedPayload({ project, event }) || '');
 				}
 				break;
 			}
 			case Types.UserStoreActionType.SetPage: {
 				const pageProperty = this.userStore.getPageProperty();
-				pageProperty.setPayload(this.getPayload());
+				pageProperty.setValue(this.getPayload());
 				break;
 			}
 			case Types.UserStoreActionType.OpenExternal: {

src/model/element/element-property/element-property.ts

@@ -171,7 +171,7 @@ export class ElementProperty {
 
 	public getValue(): Types.ElementPropertyValue {
 		if (this.referencedUserStoreProperty && this.patternProperty) {
-			const referencedValue = this.referencedUserStoreProperty.getPayload();
+			const referencedValue = this.referencedUserStoreProperty.getValue();
 			return this.patternProperty.coerceValue(referencedValue);
 		}
 

src/model/page/page.ts

@@ -49,7 +49,7 @@ export class Page {
 			this.project
 				.getUserStore()
 				.getPageProperty()
-				.getPayload() === this.id
+				.getValue() === this.id
 		);
 	}
 
@@ -58,7 +58,7 @@ export class Page {
 			this.project
 				.getUserStore()
 				.getPageProperty()
-				.setPayload(this.id);
+				.setValue(this.id);
 		}
 	}