Merge pull request #42 from chinchang/release-2.1

Release 2.1
2025-07-31 18:50:14 +02:00 · 2017-01-18 04:24:13 +05:30
parent 568eaceb6d 80b8da075c
commit 8259c97ae0
7 changed files with 1002 additions and 24 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -255,8 +255,10 @@
        "$all": true,
        "CoffeeScript": true,
        "Babel": true,
+        "ts": true,
        "Sass": true,
        "less": true,
+        "stylus": true,
        "marked": true,
        "jade": true,
        "loadJS": true,
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,7 @@
 		<title>Web Maker</title>
 		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 		<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
+		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
 		<link rel="stylesheet" href="lib/hint.min.css">
 		<link rel="stylesheet" href="lib/inlet.css">
 		<link rel="stylesheet" href="style.css">
@@ -60,6 +61,7 @@
 									<li><a data-type="css" data-mode="css">CSS</a></li>
 									<li><a data-type="css" data-mode="scss">SCSS</a></li>
 									<li><a data-type="css" data-mode="less">LESS</a></li>
+									<li><a data-type="css" data-mode="stylus">Stylus</a></li>
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
@@ -76,6 +78,7 @@
 									<li><a data-type="js" data-mode="js">JS</a></li>
 									<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
 									<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
+									<li><a data-type="js" data-mode="typescript">TypeScript</a></li>
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
@@ -184,7 +187,7 @@

 		<div class="modal" id="helpModal">
 			<div class="modal__content">
-				<h1>Web Maker<small style="font-size:14px;"> v2.0.0</small></h1>
+				<h1>Web Maker<small style="font-size:14px;"> v2.1.0</small></h1>
 				<div>
 					<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
 					<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
@@ -199,7 +202,7 @@
 							<li><a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li>
 							<li><a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li>
 							<li><a target="_blank" href="http://esprima.org/">Esprima</a> - Ariya Hidayat</li>
-							<li><a target="_blank" href="https://github.com/estools/escodegen">Escodegen</a> - Mozilla</li>
+							<li><a target="_blank" href="https://github.com/estools/escodegen">Escodegen</a> - Yusuke Suzuki</li>
 							<li><a target="_blank" href="https://github.com/enjalot/Inlet">Inlet</a> - Ian Johnson</li>
 							<li><a target="_blank" href="https://kushagragour.in/lab/web-maker">Web Maker!</a> - whhat!</li>
 						</ul>
@@ -217,7 +220,7 @@
 			<div class="modal__content">

 				<div class="tac">
-					<svg width="186px" height="87.5px" viewBox="-145 -2 372 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+					<svg width="130px" height="60px" viewBox="-145 -2 372 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 					    <g id="logo-w/o-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)">
 					        <polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon>
 					        <polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon>
@@ -228,15 +231,44 @@
 					<h1 style="margin-top:20px">Welcome to Web Maker</h1>
 				</div>
 				<div class="tac">
-					<p>Web Maker lets you do web experiments quickly and even when you are offline.</p>
+					<!-- <p>Web Maker lets you do web experiments quickly and even when you are offline.</p> -->

 					<p>
-						By default, Web Maker shows up in every new tab you open. But you can change that setting:
-						<a d-click="onModalSettingsLinkClick">Click here to change setting</a>.
+						By default, Web Maker shows up in every new tab you open. But you can change that below:
 					</p>

+					<div class="onboard-selection-wrap flex">
+						<div class="onboard-selection selected" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
+							<!-- Awesome free vector from freepik.com -->
+							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
+							<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
+							C494.264,234.442,503.916,244.094,503.916,256z"></path>
+							<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
+							c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
+							c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
+							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="315px" style="fill:rgba(0,0,0,0.25);"></rect>
+							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="372px" style="fill:rgba(0,0,0,0.25);"></rect>
+							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
+							<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
+							</svg>
+							<div class="onboard-selection-text">Show in new tab</div>
+						</div>
+
+						<div class="onboard-selection" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
+							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
+							<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
+								C494.264,234.442,503.916,244.094,503.916,256z"></path>
+							<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
+								c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
+								c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
+							  <rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
+							</svg>
+							<div class="onboard-selection-text">Don't show in new tab</div>
+						</div>
+					</div>
+
 					<p>
-						You can always open this app by clicking the Web Maker icon in the top-right side of your browser.
+						You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right. Also you can open the app by clicking the Web Maker icon in the top-right side of your browser.
 					</p>

 					<p class="tac">
@@ -249,6 +281,17 @@
 		<div class="modal" id="notificationsModal">
 			<div class="modal__content">
 				<h1>Whats new?</h1>
+				<div class="notification">
+				  <span class="notification__version">2.1.0</span>
+				  <ul>
+					<li><strong>TypeScript</strong> - Now you can code in TypeScript too!</li>
+					<li><strong>Stylus Preprocessor</strong> - Stylus supported adding for CSS.</li>
+					<li><strong>Code Folding</strong> - Collapse large code blocks for easy editing.</li>
+					<li><strong>Bugfix</strong> - Support JSX in JavaScript.</li>
+					<li>Better onboarding for first time users.</li>
+					<li>Like it? <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a></li>
+				  </ul>
+				</div>
 				<div class="notification">
 				  <span class="notification__version">2.0.0</span>
 				  <ul>
@@ -258,8 +301,7 @@
 					<li><strong>Quick color & number change</strong> - Click on any color or number and experiment with quick values using a slider.</li>
 					<li><strong>Linting</strong> - See your code errors right where you are coding.</li>
 					<li>No more browser hang due to infinite loops!</li>
-					<li><a href="https://kushagragour.in/blog/web-maker-2">Read more about this big release</a></li>
-					<li>Like it? <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a></li>
+					<!-- <li><a href="https://kushagragour.in/blog/web-maker-2">Read more about this big release</a></li> -->
 				  </ul>
 				</div>
 				<div class="notification">
@@ -312,6 +354,12 @@
 		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closetag.js"></script>
 		<script src="lib/codemirror/addon/comment/comment.js"></script>
+		<script src="lib/codemirror/addon/fold/foldcode.js"></script>
+		<script src="lib/codemirror/addon/fold/foldgutter.js"></script>
+		<script src="lib/codemirror/addon/fold/xml-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/indent-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/comment-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/brace-fold.js"></script>
 		<script src="lib/codemirror/addon/mode/loadmode.js"></script>

 		<script src="lib/codemirror/mode/xml/xml.js"></script>
--- a/src/lib/codemirror/mode/stylus/stylus.js
+++ b/src/lib/codemirror/mode/stylus/stylus.js
--- a/src/lib/stylus.min.js
+++ b/src/lib/stylus.min.js
--- a/src/lib/typescript.js
+++ b/src/lib/typescript.js
--- a/src/script.js
+++ b/src/script.js
@@ -3,13 +3,13 @@
 onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, helpBtn, onboardModal, onboardModal,
 addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, openBtn, saveBtn, newBtn,
-settingsBtn, onboardModal, notificationsBtn */
+settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardDontShowInTabOptionBtn */
 /* eslint-disable no-extra-semi */
 ;(function (alertsService) {

 /* eslint-enable no-extra-semi */
 	var scope = scope || {};
-	var version = '2.0.0';
+	var version = '2.1.0';

 	if (window.DEBUG) {
 		window.scope = scope;
@@ -23,12 +23,14 @@ settingsBtn, onboardModal, notificationsBtn */
 	var CssModes = {
 		CSS: 'css',
 		SCSS: 'scss',
-		LESS: 'less'
+		LESS: 'less',
+		STYLUS: 'stylus'
 	};
 	var JsModes = {
 		JS: 'js',
 		ES6: 'es6',
-		COFFEESCRIPT: 'coffee'
+		COFFEESCRIPT: 'coffee',
+		TS: 'typescript'
 	};
 	var modes = {};
 	modes[HtmlModes.HTML] = { label: 'HTML', cmMode: 'htmlmixed', codepenVal: 'none' };
@@ -36,10 +38,12 @@ settingsBtn, onboardModal, notificationsBtn */
 	modes[HtmlModes.JADE] = { label: 'Jade', cmMode: 'jade', codepenVal: 'jade' };
 	modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript', codepenVal: 'none' };
 	modes[JsModes.COFFEESCRIPT] = { label: 'CoffeeScript', cmMode: 'coffeescript', codepenVal: 'coffeescript' };
-	modes[JsModes.ES6] = { label: 'ES6 (Babel)', cmMode: 'javascript', codepenVal: 'babel' };
+	modes[JsModes.ES6] = { label: 'ES6 (Babel)', cmMode: 'jsx', codepenVal: 'babel' };
+	modes[JsModes.TS] = { label: 'TypeScript', cmMode: 'javascript', codepenVal: 'typescript' };
 	modes[CssModes.CSS] = { label: 'CSS', cmMode: 'css', codepenVal: 'none' };
 	modes[CssModes.SCSS] = { label: 'SCSS', cmMode: 'sass', codepenVal: 'scss' };
 	modes[CssModes.LESS] = { label: 'LESS', cmMode: 'text/x-less', codepenVal: 'less' };
+	modes[CssModes.STYLUS] = { label: 'Stylus', cmMode: 'stylus', codepenVal: 'stylus' };

 	var updateTimer
 		, updateDelay = 500
@@ -389,10 +393,14 @@ settingsBtn, onboardModal, notificationsBtn */
 				sass = new Sass('lib/sass.worker.js');
 				setLoadedFlag();
 			});
+		} else if (mode === CssModes.STYLUS) {
+			loadJS('lib/stylus.min.js').then(setLoadedFlag);
 		} else if (mode === JsModes.COFFEESCRIPT) {
 			loadJS('lib/coffee-script.js').then(setLoadedFlag);
 		} else if (mode === JsModes.ES6) {
 			loadJS('lib/babel.min.js').then(setLoadedFlag);
+		} else if (mode === JsModes.TS) {
+			loadJS('lib/typescript.js').then(setLoadedFlag);
 		}
 	}

@@ -463,6 +471,17 @@ settingsBtn, onboardModal, notificationsBtn */
 			}, function (error) {
 				showErrors('css', [ { lineNumber: error.line, message: error.message } ]);
 			});
+		} else if (cssMode === CssModes.STYLUS) {
+			stylus(code).render(function (error, result) {
+				if (error) {
+					window.err = error;
+					// Last line of message is the actual message
+					var tempArr = error.message.split('\n');
+					tempArr.pop(); // This is empty string in the end
+					showErrors('css', [ { lineNumber: +error.message.match(/stylus:(\d+):/)[1] - 298, message: tempArr.pop() } ]);
+				}
+				d.resolve(result);
+			});
 		}

 		return d.promise;
@@ -505,15 +524,52 @@ settingsBtn, onboardModal, notificationsBtn */
 		} else if (jsMode === JsModes.ES6) {
 			try {
 				ast = esprima.parse(code, {
-					tolerant: true
+					tolerant: true,
+					jsx: true
 				});
 			} catch (e) {
 				showErrors('js', [ { lineNumber: e.lineNumber - 1, message: e.description } ]);
 			} finally {
-				if (shouldPreventInfiniteLoops !== false) {
-					utils.addInfiniteLoopProtection(ast);
+				try {
+					// No JSX block
+					// result = escodegen.generate(ast);
+					if (shouldPreventInfiniteLoops !== false) {
+						utils.addInfiniteLoopProtection(ast);
+					}
+					d.resolve(Babel.transform(escodegen.generate(ast), { presets: ['es2015', 'react'] }).code);
+				} catch (e) {
+					// If we failed, means probably the AST contains JSX which cannot be parsed by escodegen.
+					code = Babel.transform(code, { presets: ['es2015', 'react'] }).code;
+					ast = esprima.parse(code, {
+						tolerant: true
+					});
+					if (shouldPreventInfiniteLoops !== false) {
+						utils.addInfiniteLoopProtection(ast);
+					}
+					d.resolve(escodegen.generate(ast));
 				}
-				d.resolve(Babel.transform(escodegen.generate(ast), { presets: ['es2015'] }).code);
+			}
+		} else if (jsMode === JsModes.TS) {
+			try {
+				code = ts.transpileModule(code, { reportDiagnostics: true, compilerOptions: { noEmitOnError: true, diagnostics: true, module: ts.ModuleKind.ES2015 } });
+				if (code.diagnostics.length) {
+
+					/* eslint-disable no-throw-literal */
+					throw ({ description: code.diagnostics[0].messageText, lineNumber: ts.getLineOfLocalPosition(code.diagnostics[0].file,code.diagnostics[0].start) });
+				}
+				try {
+					ast = esprima.parse(code.outputText, {
+						tolerant: true,
+						jsx: true
+					});
+				} finally {
+					if (shouldPreventInfiniteLoops !== false) {
+						utils.addInfiniteLoopProtection(ast);
+					}
+					d.resolve(escodegen.generate(ast));
+				}
+			} catch (e) {
+				showErrors('js', [ { lineNumber: e.lineNumber - 1, message: e.description } ]);
 			}
 		}

@@ -647,6 +703,7 @@ settingsBtn, onboardModal, notificationsBtn */
 			keyMap: 'sublime',
 			theme: 'monokai',
 			lint: !!options.lint,
+			foldGutter: true,
 			gutters: options.gutters || [],
 			// cursorScrollMargin: '20', has issue with scrolling
 			profile: options.profile || ''
@@ -662,17 +719,18 @@ settingsBtn, onboardModal, notificationsBtn */

 	scope.cm.html = initEditor(htmlCode, {
 		mode: 'htmlmixed',
-		profile: 'xhtml'
+		profile: 'xhtml',
+		gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	emmetCodeMirror(scope.cm.html);
 	scope.cm.css = initEditor(cssCode, {
 		mode: 'css',
-		gutters: [ 'error-gutter' ]
+		gutters: [ 'error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	Inlet(scope.cm.css);
 	scope.cm.js = initEditor(jsCode, {
 		mode: 'javascript',
-		gutters: [ 'error-gutter' ]
+		gutters: [ 'error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	Inlet(scope.cm.js);

@@ -696,6 +754,17 @@ settingsBtn, onboardModal, notificationsBtn */
 		trackEvent('ui', 'onboardSettingsBtnClick');
 	}

+	scope.onShowInTabClicked = function () {
+		onboardDontShowInTabOptionBtn.classList.remove('selected');
+		onboardShowInTabOptionBtn.classList.add('selected');
+		trackEvent('ui', 'onboardShowInTabClick');
+	}
+	scope.onDontShowInTabClicked = function () {
+		onboardDontShowInTabOptionBtn.classList.add('selected');
+		onboardShowInTabOptionBtn.classList.remove('selected');
+		trackEvent('ui', 'onboardDontShowInTabClick');
+	}
+
 	function compileNodes() {
 		var nodes = [].slice.call($all('[d-click]'));
 		nodes.forEach(function (el) {
@@ -951,6 +1020,12 @@ settingsBtn, onboardModal, notificationsBtn */
 					chrome.storage.sync.set({
 						lastSeenVersion: version
 					}, function () {});
+
+					chrome.storage.sync.set({
+						replaceNewTab: onboardShowInTabOptionBtn.classList.contains('selected')
+					}, function () {
+						trackEvent('fn', 'setReplaceNewTabFromOnboard', onboardShowInTabOptionBtn.classList.contains('selected'));
+					});
 				});
 			}
 			// console.utils.log(result, hasSeenNotifications, version);
--- a/src/style.css
+++ b/src/style.css
@@ -197,6 +197,15 @@ select, input[type="text"], textarea {
 .cm-s-monokai .CodeMirror-gutters {
 	background: var(--color-bg);
 }
+.cm-s-monokai .CodeMirror-guttermarker-subtle {
+	opacity: 0.4;
+}
+.CodeMirror-guttermarker-subtle {
+	/*visibility: hidden !important;*/
+}
+.CodeMirror-gutter-wrapper:hover .CodeMirror-guttermarker-subtle {
+	/*visibility: visible;*/
+}

 #demo-frame {
 	border: 0;
@@ -327,7 +336,8 @@ select, input[type="text"], textarea {
 	opacity: 0;
 	padding: 2em;
 	font-size: 1.3em;
-	max-height: 82vh;
+	max-height: 90vh;
+	box-sizing: border-box;
 	overflow-y: auto;
 	transition: all 0.19s;
 	transform: translateY(-50px) scale(0.7);
@@ -597,7 +607,7 @@ select, input[type="text"], textarea {
 	position: absolute;
 	top: 14px;
 	left: 0px;
-	white-space: nowrap;
+	width: 300px; /* ideally shud be equal to pane width */
 	transform: translateX(-10px);
 	will-change: transform;
 	transition: 0.2s ease;
@@ -613,4 +623,32 @@ select, input[type="text"], textarea {
 	border-radius: 5px;
 	padding: 1px 6px;
 	font-weight: bold;
-}
+}
+.onboard-selection-wrap {
+	justify-content: center;
+}
+.onboard-selection {
+	padding: 10px;
+	margin: 0 40px;
+	border-radius: 5px;
+	transition: 0.25s ease;
+	position: relative;
+	border: 1px solid transparent;
+}
+.onboard-selection:hover {
+	cursor: pointer;
+	/*background-color: rgba(0,0,0,0.3);*/
+	transform: scale(1.15);
+	/*border-color: rgba(0,0,0,0.4);*/
+}
+.onboard-selection.selected:after {
+	content: '';
+	position: absolute;
+	right: -20px;
+	bottom: 40px;
+	width: 80px;
+	height: 80px;
+	border-radius: 50%;
+	background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
+}
+