fix: ensure library updates work

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

@@ -1,6 +1,7 @@
 import { createCompiler } from '../../compiler';
 import * as Fs from 'fs';
 import * as Path from 'path';
+import { PatternLibrary } from '../../model/pattern-library';
 import * as PropertyAnalyzer from './property-analyzer';
 import * as ReactUtils from '../typescript/react-utils';
 import * as SlotAnalyzer from './slot-analzyer';
@@ -29,13 +30,25 @@ interface AnalyzeContext {
 type PatternAnalyzer = (candidate: PatternCandidate, predicate: PatternAnalyzerPredicate) => Types.PatternAnalysis[];
 type PatternAnalyzerPredicate = (ex: TypeScript.TypescriptExport, ctx: AnalyzeContext) => Types.PatternAnalysis | undefined;
 
-export async function analyze(path: string): Promise<Types.LibraryAnalysis> {
+export async function analyze(path: string, previousLibrary: Types.SerializedPatternLibrary): Promise<Types.LibraryAnalysis> {
+	const library = PatternLibrary.from(previousLibrary);
+
 	const patternCandidates = await findPatternCandidates(path);
 	const sourcePaths = patternCandidates.map(p => p.sourcePath);
 	const analyzePattern = getPatternAnalyzer(ts.createProgram(sourcePaths, {}));
 
 	const patterns = patternCandidates
-		.reduce((acc, candidate) => [...acc, ...analyzePattern(candidate, analyzePatternExport)], []);
+		.reduce((acc, candidate) => [...acc, ...analyzePattern(candidate, analyzePatternExport)], [])
+		.map(item => {
+			const previousPattern = library.getPatternByContextId(item.pattern.contextId);
+
+			// Reuse pattern id if it has been in the library previously
+			if (previousPattern) {
+				item.pattern.id = previousPattern.getId();
+			}
+
+			return item;
+		});
 
 	const compilerPatterns = patterns.map(({path: patternPath, pattern}) => ({
 		id: pattern.id,

src/container/app.tsx

@@ -155,10 +155,16 @@ export class App extends React.Component {
 								{store.getPatternLibraryState() === Types.PatternLibraryState.Pristine && (
 									<ConnectPaneContainer
 										onPrimaryButtonClick={() => {
+											const project = store.getProject();
+
+											if (!project) {
+												return;
+											}
+
 											Sender.send({
 												type: ServerMessageType.ConnectPatternLibraryRequest,
 												id: uuid.v4(),
-												payload: undefined
+												payload: project.getPatternLibrary().toJSON()
 											});
 										}}
 									/>

src/electron/main.ts

@@ -2,7 +2,7 @@ import * as Analyzer from '../analyzer';
 import { checkForUpdates } from './auto-updater';
 import { colors } from '../components';
 import { createCompiler } from '../compiler/create-compiler';
-import { app, BrowserWindow, dialog, ipcMain, screen } from 'electron';
+import { app, BrowserWindow, dialog, screen } from 'electron';
 import * as electronIsDev from 'electron-is-dev';
 import * as Fs from 'fs';
 import * as getPort from 'get-port';
@@ -89,6 +89,12 @@ async function createWindow(): Promise<void> {
 		// access to system / fs
 		// tslint:disable-next-line:cyclomatic-complexity
 		switch (message.type) {
+			case ServerMessageType.CheckForUpdatesRequest: {
+				if (win) {
+					checkForUpdates(win, true);
+				}
+				break;
+			}
 			case ServerMessageType.AppLoaded: {
 				// Load last known file automatically in development
 				if (electronIsDev && projectPath) {
@@ -269,7 +275,7 @@ async function createWindow(): Promise<void> {
 				const path = Array.isArray(paths) ? paths[0] : undefined;
 
 				if (path) {
-					const analysis = await Analyzer.analyze(path);
+					const analysis = await Analyzer.analyze(path, message.payload);
 
 					Sender.send({
 						type: ServerMessageType.ConnectPatternLibraryResponse,
@@ -370,12 +376,6 @@ app.on('activate', async () => {
 	}
 });
 
-ipcMain.on('request-check-for-updates', () => {
-	if (win) {
-		checkForUpdates(win, true);
-	}
-});
-
 process.on('unhandledRejection', reason => {
 	console.error(reason);
 });

src/electron/menu.ts

@@ -1,5 +1,5 @@
 import * as Sender from '../message/client';
-import { BrowserWindow, ipcRenderer, MenuItem, MenuItemConstructorOptions, remote } from 'electron';
+import { BrowserWindow, MenuItem, MenuItemConstructorOptions, remote } from 'electron';
 import { HtmlExporter } from '../export/html-exporter';
 import { ServerMessageType } from '../message';
 import { Page, Project } from '../model';
@@ -320,6 +320,28 @@ export function createMenu(): void {
 				}
 			]
 		},
+		{
+			label: '&Library',
+			submenu: [
+				{
+					label: '&Connect',
+					accelerator: 'CmdOrCtrl+Shift+C',
+					click: () => {
+						const project = store.getProject();
+
+						if (!project) {
+							return;
+						}
+
+						Sender.send({
+							type: ServerMessageType.ConnectPatternLibraryRequest,
+							id: uuid.v4(),
+							payload: project.getPatternLibrary().toJSON()
+						});
+					}
+				}
+			]
+		},
 		{
 			label: '&View',
 			submenu: [
@@ -410,7 +432,11 @@ export function createMenu(): void {
 				{
 					label: 'Check for Updates',
 					click: () => {
-						ipcRenderer.send('request-check-for-updates');
+						Sender.send({
+							id: uuid.v4(),
+							payload: undefined,
+							type: ServerMessageType.CheckForUpdatesRequest
+						});
 					}
 				},
 				{

src/message/message.ts

@@ -16,6 +16,7 @@ export enum ServerMessageType {
 	AssetReadRequest = 'asset-read-request',
 	AssetReadResponse = 'asset-read-response',
 	BundleChange = 'bundle-change',
+	CheckForUpdatesRequest = 'check-for-updates-request',
 	ConnectPatternLibraryRequest = 'connect-pattern-library-request',
 	ConnectPatternLibraryResponse = 'connect-pattern-library-response',
 	ContentRequest = 'content-request',
@@ -66,6 +67,7 @@ export type ServerMessage =
 	| AppLoaded
 	| AssetReadRequest
 	| AssetReadResponse
+	| CheckForUpdatesRequest
 	| ConnectPatternLibraryRequest
 	| ConnectPatternLibraryResponse
 	| ContentRequest
@@ -106,8 +108,10 @@ export type ServerMessage =
 export type AppLoaded = EmptyEnvelope<ServerMessageType.AppLoaded>;
 export type AssetReadRequest = EmptyEnvelope<ServerMessageType.AssetReadRequest>;
 export type AssetReadResponse = Envelope<ServerMessageType.AssetReadResponse, string>;
-export type ConnectPatternLibraryRequest = EmptyEnvelope<
-	ServerMessageType.ConnectPatternLibraryRequest
+export type CheckForUpdatesRequest = EmptyEnvelope<ServerMessageType.CheckForUpdatesRequest>;
+export type ConnectPatternLibraryRequest = Envelope<
+	ServerMessageType.ConnectPatternLibraryRequest,
+	Types.SerializedPatternLibrary
 >;
 export type ConnectPatternLibraryResponse = Envelope<
 	ServerMessageType.ConnectPatternLibraryResponse,

src/model/pattern-library/builtins/box.ts

@@ -1,11 +1,12 @@
-import { Pattern, SyntheticPatternType } from '../../pattern';
+import { Pattern, PatternSlot, SyntheticPatternType } from '../../pattern';
 import {
 	PatternBooleanProperty,
 	PatternEnumProperty,
 	PatternEnumPropertyOption,
 	PatternNumberProperty,
 	PatternStringProperty
 } from '../../pattern-property';
+import * as Types from '../../types';
 import * as uuid from 'uuid';
 
 export const Box = context => {
@@ -152,10 +153,19 @@ export const Box = context => {
 	return {
 		boxPattern: new Pattern(
 			{
+				contextId: 'synthetic:box',
+				exportName: 'default',
 				name: 'Box',
-				path: '',
-				type: SyntheticPatternType.SyntheticBox,
-				propertyIds: boxProperties.map(p => p.getId())
+				propertyIds: boxProperties.map(p => p.getId()),
+				slots: [
+					new PatternSlot({
+						displayName: 'Children',
+						propertyName: 'children',
+						id: uuid.v4(),
+						type: Types.SlotType.Children
+					})
+				],
+				type: SyntheticPatternType.SyntheticBox
 			},
 			context
 		),

src/model/pattern-library/builtins/page.ts

@@ -1,10 +1,11 @@
 import { languages } from './languages';
-import { Pattern, SyntheticPatternType } from '../../pattern';
+import { Pattern, PatternSlot, SyntheticPatternType } from '../../pattern';
 import {
 	PatternBooleanProperty,
 	PatternEnumProperty,
 	PatternEnumPropertyOption
 } from '../../pattern-property';
+import * as Types from '../../types';
 import * as uuid from 'uuid';
 
 export const Page = context => {
@@ -39,10 +40,19 @@ export const Page = context => {
 
 	const pagePattern = new Pattern(
 		{
+			contextId: 'synthetic:page',
+			exportName: 'default',
 			name: 'Page',
-			path: '',
-			type: SyntheticPatternType.SyntheticPage,
-			propertyIds: pageProperties.map(p => p.getId())
+			propertyIds: pageProperties.map(p => p.getId()),
+			slots: [
+				new PatternSlot({
+					displayName: 'Children',
+					propertyName: 'children',
+					id: uuid.v4(),
+					type: Types.SlotType.Children
+				})
+			],
+			type: SyntheticPatternType.SyntheticPage
 		},
 		context
 	);

src/model/pattern-library/builtins/placeholder.ts

@@ -11,10 +11,12 @@ export const Placeholder = context => {
 
 	const placeholderPattern = new Pattern(
 		{
+			contextId: 'synthetic:placeholder',
+			exportName: 'default',
 			name: 'Placeholder',
-			path: '',
-			type: SyntheticPatternType.SyntheticPlaceholder,
-			propertyIds: placeholderProperties.map(p => p.getId())
+			propertyIds: placeholderProperties.map(p => p.getId()),
+			slots: [],
+			type: SyntheticPatternType.SyntheticPlaceholder
 		},
 		context
 	);

src/model/pattern-library/builtins/text.ts

@@ -13,10 +13,12 @@ export const Text = context => {
 		textProperties,
 		textPattern: new Pattern(
 			{
+				contextId: 'synthetic:text',
+				exportName: 'default',
 				name: 'Text',
-				path: '',
-				type: SyntheticPatternType.SyntheticText,
-				propertyIds: textProperties.map(p => p.getId())
+				propertyIds: textProperties.map(p => p.getId()),
+				slots: [],
+				type: SyntheticPatternType.SyntheticText
 			},
 			context
 		)

src/model/pattern-library/pattern-library.ts

@@ -113,6 +113,10 @@ export class PatternLibrary {
 		return this.bundle;
 	}
 
+	public getPatternByContextId(contextId: string): Pattern | undefined {
+		return this.patterns.find(pattern => pattern.getContextId() === contextId);
+	}
+
 	public getPatternById(id: string): Pattern | undefined {
 		return this.patterns.find(pattern => pattern.getId() === id);
 	}
@@ -155,6 +159,16 @@ export class PatternLibrary {
 			.map(match => match.id);
 	}
 
+	public removePattern(pattern: Pattern): void {
+		const index = this.patterns.indexOf(pattern);
+
+		if (index === -1) {
+			return;
+		}
+
+		this.patterns.splice(index, 1);
+	}
+
 	public setBundle(bundle: string): void {
 		this.bundle = bundle;
 	}