Web maker 3.6.1

.nvmrc

@@ -1 +1 @@
-10.15.0
+8.15.0

README.md

@@ -13,6 +13,8 @@ Shared steps:
 1. Make sure you are on the right branch (`master`).
 1. `yarn build` to build the product release
 1. `yarn release` to copy build files to app / extension
+1. `http-server ./app` to verify build in ./app
+1. `access localhost instead of 127.0.0.1` to allow firebase access
 
 #### Chrome extension
 1. Update `version` in `extension/manifest.json`

app/lib/bundle.js

@@ -377,6 +377,7 @@ window.chrome.i18n = {
 
 window.$all = selector => [...document.querySelectorAll(selector)];
 window.IS_EXTENSION = !!window.chrome.extension;
+
 const BASE_PATH = '';
 /* unused harmony export BASE_PATH */
 
@@ -20293,8 +20294,8 @@ var update = __webpack_require__(17)(content, options);
 if(content.locals) module.exports = content.locals;
 
 if(false) {
-	module.hot.accept("!!../../../all-coloruml/web-sequence/node_modules/css-loader/index.js!./vue-sequence.css", function() {
-		var newContent = require("!!../../../all-coloruml/web-sequence/node_modules/css-loader/index.js!./vue-sequence.css");
+	module.hot.accept("!!../../css-loader/index.js!./vue-sequence.css", function() {
+		var newContent = require("!!../../css-loader/index.js!./vue-sequence.css");
 
 		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
 

package.json

@@ -80,6 +80,7 @@
 		"esprima": "^4.0.0",
 		"file-saver": "^1.3.8",
 		"firebase": "^5.5.8",
+		"http-server": "^0.11.1",
 		"jszip": "^3.1.5",
 		"preact": "^8.2.6",
 		"preact-compat": "^3.17.0",

src/components/Notifications.jsx

@@ -106,6 +106,12 @@ export function Notifications(props) {
 		<div>
 			<h1>Whats new?</h1>
 
+			<Notification version="3.6.1" {...props} isLatest={true}>
+				<NotificationItem type="bug">
+					Failing to import local creations when logging in.
+				</NotificationItem>
+			</Notification>
+
 			<Notification version="3.6.0" {...props}>
 				<li>
 					<strong>New Setting</strong>: Configure if you want to auto-close the
@@ -135,7 +141,7 @@ export function Notifications(props) {
 				</li>
 			</Notification>
 
-			<Notification version="3.5.1" isLatest={true} {...props}>
+			<Notification version="3.5.1" {...props}>
 				<li>
 					<strong>Hidden Prettier</strong>: Selecting code and pressing
 					Shift+Tab now uses Prettier to auto-format. This will improve UX wise

src/components/SavedItemPane.jsx

@@ -88,54 +88,6 @@ export default class SavedItemPane extends Component {
 		}
 	}
 
-	mergeImportedItems(items) {
-		var existingItemIds = [];
-		var toMergeItems = {};
-		const d = deferred();
-		const savedItems = {};
-		this.items.forEach(item => (savedItems[item.id] = item));
-		items.forEach(item => {
-			// We can access `savedItems` here because this gets set when user
-			// opens the saved creations panel. And import option is available
-			// inside the saved items panel.
-			if (savedItems[item.id]) {
-				// Item already exists
-				existingItemIds.push(item.id);
-			} else {
-				log('merging', item.id);
-				toMergeItems[item.id] = item;
-			}
-		});
-		var mergedItemCount = items.length - existingItemIds.length;
-		if (existingItemIds.length) {
-			var shouldReplace = confirm(
-				existingItemIds.length +
-					' creations already exist. Do you want to replace them?'
-			);
-			if (shouldReplace) {
-				log('shouldreplace', shouldReplace);
-				items.forEach(item => {
-					toMergeItems[item.id] = item;
-				});
-				mergedItemCount = items.length;
-			}
-		}
-		if (mergedItemCount) {
-			itemService.saveItems(toMergeItems).then(() => {
-				d.resolve();
-				alertsService.add(
-					mergedItemCount + ' creations imported successfully.'
-				);
-				trackEvent('fn', 'itemsImported', mergedItemCount);
-			});
-		} else {
-			d.resolve();
-		}
-		this.props.closeHandler();
-
-		return d.promise;
-	}
-
 	importFileChangeHandler(e) {
 		var file = e.target.files[0];
 
@@ -145,7 +97,7 @@ export default class SavedItemPane extends Component {
 			try {
 				items = JSON.parse(progressEvent.target.result);
 				log(items);
-				this.mergeImportedItems(items);
+				this.props.mergeImportedItems(items);
 			} catch (exception) {
 				log(exception);
 				alert(

src/components/app.jsx

@@ -56,7 +56,7 @@ const LocalStorageKeys = {
 	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
 };
 const UNSAVED_WARNING_COUNT = 15;
-const version = '3.6.0';
+const version = '3.6.1';
 
 export default class App extends Component {
 	constructor() {
@@ -407,7 +407,10 @@ export default class App extends Component {
 		// setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
 	}
 	toggleSavedItemsPane(shouldOpen) {
-		this.setState({ isSavedItemPaneOpen: !this.state.isSavedItemPaneOpen });
+		this.setState({
+			isSavedItemPaneOpen:
+				shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
+		});
 
 		if (this.state.isSavedItemPaneOpen) {
 			window.searchInput.focus();
@@ -426,6 +429,9 @@ export default class App extends Component {
 	 */
 	async fetchItems(shouldSaveGlobally, shouldFetchLocally) {
 		var d = deferred();
+		// HACK: This empty assignment is being used when importing locally saved items
+		// to cloud, `fetchItems` runs once on account login which clears the
+		// savedItems object and hence, while merging no saved item matches with itself.
 		this.state.savedItems = {};
 		var items = [];
 		if (window.user && !shouldFetchLocally) {
@@ -1028,6 +1034,55 @@ export default class App extends Component {
 		}
 	}
 
+	mergeImportedItems(items) {
+		var existingItemIds = [];
+		var toMergeItems = {};
+		const d = deferred();
+		const { savedItems } = this.state;
+		items.forEach(item => {
+			// We can access `savedItems` here because this gets set when user
+			// opens the saved creations panel. And import option is available
+			// inside the saved items panel.
+			// HACK: Also when this fn is called for importing locally saved items
+			// to cloud, `fetchItems` runs once on account login which clears the
+			// savedItems object and hence, no match happens for `existingItemIds`.
+			if (savedItems[item.id]) {
+				// Item already exists
+				existingItemIds.push(item.id);
+			} else {
+				log('merging', item.id);
+				toMergeItems[item.id] = item;
+			}
+		});
+		var mergedItemCount = items.length - existingItemIds.length;
+		if (existingItemIds.length) {
+			var shouldReplace = confirm(
+				existingItemIds.length +
+					' creations already exist. Do you want to replace them?'
+			);
+			if (shouldReplace) {
+				log('shouldreplace', shouldReplace);
+				items.forEach(item => {
+					toMergeItems[item.id] = item;
+				});
+				mergedItemCount = items.length;
+			}
+		}
+		if (mergedItemCount) {
+			itemService.saveItems(toMergeItems).then(() => {
+				d.resolve();
+				alertsService.add(
+					mergedItemCount + ' creations imported successfully.'
+				);
+				trackEvent('fn', 'itemsImported', mergedItemCount);
+			});
+		} else {
+			d.resolve();
+		}
+		this.closeSavedItemsPane();
+		return d.promise;
+	}
+
 	/**
 	 * Called from inside ask-to-import-modal
 	 */
@@ -1286,6 +1341,7 @@ export default class App extends Component {
 					itemRemoveBtnClickHandler={this.itemRemoveBtnClickHandler.bind(this)}
 					itemForkBtnClickHandler={this.itemForkBtnClickHandler.bind(this)}
 					exportBtnClickHandler={this.exportBtnClickHandler.bind(this)}
+					mergeImportedItems={this.mergeImportedItems.bind(this)}
 				/>
 
 				<Alerts />

src/lib/bundle.js

@@ -377,6 +377,7 @@ window.chrome.i18n = {
 
 window.$all = selector => [...document.querySelectorAll(selector)];
 window.IS_EXTENSION = !!window.chrome.extension;
+
 const BASE_PATH = '';
 /* unused harmony export BASE_PATH */
 
@@ -20293,8 +20294,8 @@ var update = __webpack_require__(17)(content, options);
 if(content.locals) module.exports = content.locals;
 
 if(false) {
-	module.hot.accept("!!../../../all-coloruml/web-sequence/node_modules/css-loader/index.js!./vue-sequence.css", function() {
-		var newContent = require("!!../../../all-coloruml/web-sequence/node_modules/css-loader/index.js!./vue-sequence.css");
+	module.hot.accept("!!../../css-loader/index.js!./vue-sequence.css", function() {
+		var newContent = require("!!../../css-loader/index.js!./vue-sequence.css");
 
 		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
 

src/options.html

@@ -39,7 +39,7 @@ <h3>Settings <span style="opacity: 0.6;font-size:0.7em;">
 			v0.9.0</span></h3>
 	<h3>Settings
 		<span style="opacity: 0.6;font-size:0.7em;">
-			v3.6.0</span>
+			v3.6.1</span>
 	</h3>
 	<form name="optionsForm">
 		<label>

src/utils.js

@@ -15,6 +15,7 @@ window.chrome.i18n = {
 
 window.$all = selector => [...document.querySelectorAll(selector)];
 window.IS_EXTENSION = !!window.chrome.extension;
+
 export const BASE_PATH = '';
 
 var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';