fix: ensure component registry is in sync

Address a bug that caused the preview to fail rendering
of user-provided components directly after adding them
to a project.

This also derives the bundle script tags directly from the preview
instance of Project instead of applying script changes imperatively
for MessageType.ChangePatternLibraries.

src/preview/preview.ts

@@ -1,4 +1,3 @@
-import { computeDifference } from '../alva-util';
 import { ElementArea } from './element-area';
 import exportToSketchData from './export-to-sketch-data';
 import { getComponents } from './get-components';
@@ -93,45 +92,25 @@ function main(): void {
 			store.setMetaDown(message.payload.metaDown);
 		});
 
-		sender.match<Message.ChangePatternLibraries>(
-			Message.MessageType.ChangePatternLibraries,
-			message => {
-				Mobx.transaction(() => {
-					const libraryChanges = computeDifference<Model.PatternLibrary>({
-						before: project.getPatternLibraries(),
-						after: message.payload.patternLibraries.map(e => Model.PatternLibrary.from(e))
-					});
-
-					libraryChanges.added.forEach(change => {
-						const script = document.createElement('script');
-						script.dataset.bundle = change.after.getBundleId();
-						script.textContent = change.after.getBundle();
-						document.body.appendChild(script);
-
-						project.addPatternLibrary(change.after);
-					});
-
-					libraryChanges.changed.forEach(change => {
-						const scriptCandidate = document.querySelector(
-							`[data-bundle="${change.before.getBundleId()}"]`
-						);
-
-						if (scriptCandidate && scriptCandidate.parentElement) {
-							scriptCandidate.parentElement.removeChild(scriptCandidate);
-						}
-
-						const script = document.createElement('script');
-						script.dataset.bundle = change.after.getBundleId();
-						script.textContent = change.after.getBundle();
-						document.body.appendChild(script);
-
-						change.before.update(change.after);
-					});
-
-					store.setComponents(getComponents(store.getProject()));
+		Mobx.autorun(() => {
+			Array.prototype.slice
+				.call(document.querySelectorAll('script[data-bundle]'), 0)
+				.filter(script => script.parentElement)
+				.forEach(script => script.parentElement.removeChild(script));
+
+			store
+				.getProject()
+				.getPatternLibraries()
+				.filter(library => library.getOrigin() === Types.PatternLibraryOrigin.UserProvided)
+				.forEach(library => {
+					const script = document.createElement('script');
+					script.dataset.bundle = library.getBundleId();
+					script.textContent = library.getBundle();
+					document.body.appendChild(script);
 				});
-			}
-		);
+
+			store.setComponents(getComponents(store.getProject()));
+		});
 
 		Mobx.reaction(
 			() => store.hasSelectedItem(),

src/server/create-preview-route.ts

@@ -1,6 +1,7 @@
 import * as Express from 'express';
 import * as PreviewDocument from '../preview-document';
 import { Sender } from '../sender/server';
+import * as Types from '../types';
 import * as Model from '../model';
 
 export interface PreviewRouteOptions {
@@ -19,18 +20,17 @@ export function createPreviewRoute(options: PreviewRouteOptions): Express.Reques
 			return;
 		}
 
-		const clone = Model.Project.from(project.toJSON());
-		clone.getPatternLibraries().map(l => l.setBundle(''));
+		const userLibraries = project
+			.getPatternLibraries()
+			.filter(lib => lib.getOrigin() === Types.PatternLibraryOrigin.UserProvided);
+
+		const script = lib =>
+			`<script src="/libraries/${lib.getId()}.js" data-bundle="${lib.getBundleId()}"></script>`;
 
 		res.send(
 			PreviewDocument.previewDocument({
-				data: clone.toJSON(),
-				scripts: project
-					.getPatternLibraries()
-					.map(
-						lib =>
-							`<script src="/libraries/${lib.getId()}.js" data-bundle="${lib.getBundleId()}"></script>`
-					)
+				data: project.toJSON(),
+				scripts: userLibraries.map(script)
 			})
 		);
 	};