feat(store): patterns path configurable (fixes #214)

src/component/container/app.tsx

@@ -150,9 +150,7 @@ export class App extends React.Component {
 		const styleguide = store.getStyleguide();
 		const previewFrame = project && project.getPreviewFrame();
 		const previewFramePath =
-			styleguide &&
-			previewFrame &&
-			PathUtils.join(styleguide.getPagesPath(), 'alva', previewFrame);
+			styleguide && previewFrame && PathUtils.join(store.getPagesPath(), 'alva', previewFrame);
 
 		const DevTools = this.getDevTools();
 

src/store/store.ts

@@ -87,6 +87,12 @@ export class Store {
 	 */
 	@MobX.observable private redoBuffer: Command[] = [];
 
+	/**
+	 * The path of the built pattern implementation's root folder, e.g. 'lib/patterns',
+	 * relative to the styleguide root, always using forward slashes.
+	 */
+	@MobX.observable private relativePatternsPath: string;
+
 	/**
 	 * The currently selected element in the element list.
 	 * The properties pane shows the properties of this element,
@@ -352,6 +358,19 @@ export class Store {
 		return;
 	}
 
+	/**
+	 * Returns the absolute and OS-specific path of the root folder of the designs (projects, pages)
+	 * in the currently opened styleguide.
+	 * @return The absolute and OS-specific page root path.
+	 */
+	public getPagesPath(): string {
+		if (!this.styleguide) {
+			throw new Error('Cannot open page: No styleguide open');
+		}
+
+		return PathUtils.join(this.styleguide.getPath(), 'alva');
+	}
+
 	/**
 	 * Returns the current search term in the patterns list, or an empty string if there is none.
 	 * @return The current pattern search term or an empty string.
@@ -510,7 +529,7 @@ export class Store {
 		const pageRef = this.getPageRefById(id);
 		if (pageRef && pageRef.getLastPersistedPath()) {
 			const pagePath: string = PathUtils.join(
-				styleguide.getPagesPath(),
+				this.getPagesPath(),
 				pageRef.getLastPersistedPath() as string
 			);
 			const json: JsonObject = Persister.loadYamlOrJson(pagePath);
@@ -556,13 +575,8 @@ export class Store {
 			this.save();
 		}
 
-		if (!PathUtils.isAbsolute(styleguidePath)) {
-			// Currently, store is two levels below alva, so go two up
-			styleguidePath = PathUtils.join(styleguidePath);
-		}
 		this.currentPage = undefined;
 
-		(this.projects as IObservableArray<Project>).clear();
 		const alvaYamlPath = PathUtils.join(styleguidePath, 'alva/alva.yaml');
 
 		// TODO: Converts old alva.yaml structure to new one.
@@ -592,15 +606,8 @@ export class Store {
 			json = json.config as JsonObject;
 		}
 
-		this.analyzerName = json.analyzerName as string;
-		this.styleguide = new Styleguide(styleguidePath, this.analyzerName);
-
-		(json.projects as JsonArray).forEach((projectJson: JsonObject) => {
-			const project: Project = Project.fromJsonObject(projectJson);
-			this.addProject(project);
-		});
-
-		this.clearUndoRedoBuffers();
+		json.styleguidePath = styleguidePath;
+		this.setStyleguideFromJsonInternal(json);
 
 		this.preferences.setLastStyleguidePath(styleguidePath);
 		this.savePreferences();
@@ -704,8 +711,8 @@ export class Store {
 				const lastPath = page.getLastPersistedPath();
 				if (lastPath && page.getPath() !== lastPath) {
 					try {
-						const lastFullPath = PathUtils.join(styleguide.getPagesPath(), lastPath);
-						const newFullPath = PathUtils.join(styleguide.getPagesPath(), page.getPath());
+						const lastFullPath = PathUtils.join(this.getPagesPath(), lastPath);
+						const newFullPath = PathUtils.join(this.getPagesPath(), page.getPath());
 						FileExtraUtils.mkdirpSync(PathUtils.dirname(newFullPath));
 						FileUtils.renameSync(lastFullPath, newFullPath);
 						page.updateLastPersistedPath();
@@ -722,7 +729,7 @@ export class Store {
 		const currentPage: Page | undefined = this.getCurrentPage();
 		if (currentPage) {
 			const pagePath: string = PathUtils.join(
-				styleguide.getPagesPath(),
+				this.getPagesPath(),
 				currentPage.getPageRef().getPath()
 			);
 			Persister.saveYaml(pagePath, currentPage.toJsonObject());
@@ -732,10 +739,11 @@ export class Store {
 
 		const json: JsonObject = {
 			analyzerName: this.analyzerName,
+			patternsPath: this.relativePatternsPath,
 			projects: this.projects.map(project => project.toJsonObject())
 		};
 
-		const configPath = PathUtils.join(styleguide.getPagesPath(), 'alva.yaml');
+		const configPath = PathUtils.join(this.getPagesPath(), 'alva.yaml');
 		Persister.saveYaml(configPath, json);
 	}
 
@@ -817,15 +825,22 @@ export class Store {
 	@MobX.action
 	public setStyleguideFromJsonInternal(json: JsonObject): void {
 		this.analyzerName = json.analyzerName as string;
+		this.relativePatternsPath = (json.patternsPath as string) || 'lib/patterns';
 
-		this.projects = [];
+		(this.projects as IObservableArray<Project>).clear();
 		(json.projects as JsonArray).forEach((projectJson: JsonObject) => {
 			const project: Project = Project.fromJsonObject(projectJson);
 			this.addProject(project);
 		});
 
 		if (json.styleguidePath && this.analyzerName) {
-			this.styleguide = new Styleguide(json.styleguidePath as string, this.analyzerName);
+			const styleguidePath = json.styleguidePath as string;
+			const patternsPath = PathUtils.join(
+				styleguidePath,
+				this.relativePatternsPath.split('/').join(PathUtils.sep)
+			);
+
+			this.styleguide = new Styleguide(styleguidePath, patternsPath, this.analyzerName);
 		} else {
 			this.styleguide = undefined;
 		}

src/store/styleguide/styleguide.ts

@@ -1,7 +1,6 @@
 import { AssetProperty } from './property/asset-property';
 import { Directory } from '../../styleguide/analyzer/directory';
 import { PatternFolder } from './folder';
-import * as PathUtils from 'path';
 import { Pattern } from './pattern';
 import { StringProperty } from './property/string-property';
 import { StyleguideAnalyzer } from '../../styleguide/analyzer/styleguide-analyzer';
@@ -20,7 +19,8 @@ import { StyleguideAnalyzer } from '../../styleguide/analyzer/styleguide-analyze
 export class Styleguide {
 	/**
 	 * 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 styleguide patterns.
+	 * The analyzers detects patterns (and pattern folders) it finds to the list of styleguide
+	 * patterns.
 	 */
 	private readonly analyzer?: StyleguideAnalyzer;
 
@@ -41,14 +41,25 @@ export class Styleguide {
 	private patterns: Map<string, Pattern> = new Map();
 
 	/**
-	 * Creates a new styleguide. Then loads the styleguide's patterns using the configured styleguide analyzer.
+	 * The path of the root folder of the built patterns (like atoms, modules etc.)
+	 * in the currently opened styleguide.
+	 */
+	private patternsPath: string;
+
+	/**
+	 * Creates a new styleguide. Then loads the styleguide's patterns using the configured
+	 * styleguide analyzer.
 	 * @param path The absolute and OS-specific path to the styleguide top-level folders.
 	 * This is where all pattern implementations are located.
-	 * @param analyzerName The name of 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 styleguide patterns.
+	 * @param patternsPath The path of the root folder of the built patterns (like atoms,
+	 * modules etc.) in the currently opened styleguide.
+	 * @param analyzerName The name of 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 styleguide patterns.
 	 */
-	public constructor(path: string, analyzerName: string) {
-		this.path = path || '';
+	public constructor(path: string, patternsPath: string, analyzerName: string) {
+		this.path = path;
+		this.patternsPath = patternsPath;
 
 		const Analyzer = require(`../../styleguide/analyzer/${analyzerName}/${analyzerName}`)
 			.Analyzer;
@@ -66,7 +77,8 @@ export class Styleguide {
 
 	/**
 	 * Adds a new pattern to the styleguide. Call this method from the styleguide analyzer.
-	 * Note that you can optionally also call addPattern on one or more pattern folders to organize patterns, but you always have to add it to the styleguide.
+	 * Note that you can optionally also call addPattern on one or more pattern folders to organize
+	 * patterns, but you always have to add it to the styleguide.
 	 * @param pattern The pattern to add.
 	 */
 	public addPattern(pattern: Pattern): void {
@@ -96,23 +108,15 @@ export class Styleguide {
 	}
 
 	/**
-	 * 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 styleguide patterns.
+	 * 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
+	 * styleguide patterns.
 	 * @return The analyzer active in this styleguide.
 	 */
 	public getAnalyzer(): StyleguideAnalyzer | undefined {
 		return this.analyzer;
 	}
 
-	/**
-	 * Returns the absolute and OS-specific path of the root folder of the designs (projects, pages)
-	 * in the currently opened styleguide.
-	 * @return The absolute and OS-specific page root path.
-	 */
-	public getPagesPath(): string {
-		return PathUtils.join(this.path, 'alva');
-	}
-
 	/**
 	 * Returns the absolute and OS-specific path to the styleguide top-level directories.
 	 * This is where the projects, pages, and the pattern implementations are located.
@@ -124,8 +128,9 @@ export class Styleguide {
 
 	/**
 	 * Returns a parsed pattern information object for a given pattern ID.
-	 * @param id The ID of the pattern. It's local to the styleguide analyzer that detected the pattern.
-	 * How this is generated is completely up to the styleguide analyzer that creates the pattern.
+	 * @param id The ID of the pattern. It's local to the styleguide analyzer that detected the
+	 * pattern. How this is generated is completely up to the styleguide analyzer that creates the
+	 * pattern.
 	 * @return The resolved pattern, or undefined, if no such ID exists.
 	 */
 	public getPattern(id: string): Pattern | undefined {
@@ -154,6 +159,6 @@ export class Styleguide {
 	 * @return The absolute and OS-specific patterns root path.
 	 */
 	public getPatternsPath(): string {
-		return PathUtils.join(this.path, 'lib', 'patterns');
+		return this.patternsPath;
 	}
 }