solarite 0.1.0 → 0.2.0

package/docs/js/codemirror/themeSolarIce.js

@@ -14,7 +14,7 @@ function themeSolarIce(lang, isDark=false) {
 		text = isDark ? "#aaa" : 'black',
 		darkBackground = "#21252b",
 		highlightBackground = isDark ? "#2c313a" : '#ddd',
-		background = isDark ? "#06090c" : 'white',
+		background = isDark ? "transparent" : 'white',
 		tooltipBackground = "#353a42",
 		selection = isDark ? "#234" : '#ccc',
 		cursor = "#528bff"
@@ -146,7 +146,7 @@ function themeSolarIce(lang, isDark=false) {
 			tag: [t.atom], // Css value like 'Arial' or 'none'.  Keyword 'super' in javascript
 			color: lang === 'js'
 				? (isDark ? '#26f' : '#00f')
-				: (isDark ? '#75f' : '')
+				: (isDark ? '#26f' : '')
 		},
 		{
 			tag: [t.unit],

package/docs/js/documentation.js

@@ -21,12 +21,12 @@ document.addEventListener('DOMContentLoaded', () => {
 	    
 	    let prefix = `
 			<style>
-				html[dark] { background: black; color: white }
+				html[dark] { background: #0f1318; color: white }
 				body { font: 12px Arial; background: transparent !important }
 			</style>`;
         let value = lines.join('\n');
 		
-        let pg = new Playground({value, language: pre.getAttribute('lang'), width: 75, maxHeight: 620, prefix, limitCodeEditorHeight: true})
+        let pg = new Playground({value, language: pre.getAttribute('lang'), width: 75, maxHeight: 1000, prefix, limitCodeEditorHeight: true})
         pre.replaceWith(pg);
     }
 })

package/docs/js/ui/CodeEditor.js

@@ -246,7 +246,7 @@ export default class CodeEditor extends Solarite {
 		let doc = this.ownerDocument || window.top.document;
 		if (isDark === undefined)
 			isDark = doc.documentElement.hasAttribute('dark');
-		
+
 		let languageExtensions = this.getLanguageExtension(this.language, this.languageConfig)
 		return [
 			//basicSetup,
@@ -258,8 +258,6 @@ export default class CodeEditor extends Solarite {
 			//foldGutter(),
 			drawSelection(),
 			indentUnit.of("\t"),
-			this.compartments.tabSize.of(EditorState.tabSize.of(this.tabSize)),
-			this.compartments.lineWrapping.of(wordWrap ? EditorView.lineWrapping : []),
 			EditorState.allowMultipleSelections.of(true),
 			indentOnInput(),
 			bracketMatching(),
@@ -285,11 +283,14 @@ export default class CodeEditor extends Solarite {
 			
 			Extensions.changeDetection(this),
 			Extensions.asyncField,
+
 			
+			syntaxHighlighting(defaultHighlightStyle, {fallback: true}), // fallback: true lets us use our own theme.
+
+			// Compartments let options be changed after init.
 			this.compartments.theme.of(themeSolarIce(this.language, isDark)),
-			
-			syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-			
+			this.compartments.tabSize.of(EditorState.tabSize.of(this.tabSize)),
+			this.compartments.lineWrapping.of(wordWrap ? EditorView.lineWrapping : []),
 			this.compartments.language.of(languageExtensions)
 		];
 	}
@@ -516,7 +517,7 @@ export default class CodeEditor extends Solarite {
 
 
 	render() {
-		this.html = r`
+		r(this)`
 		<code-editor>
 			<style>
 				:host { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0 }
@@ -609,18 +610,38 @@ var ParseUtil = {
 		wrap: parseMixed((node, docInput) => {
 			if (node.name == "StyleText")
 				return {parser: cssParser}
-			if (node.name == "ScriptText")
+			if (node.name == "ScriptText"/* || node.name == "Interpolation"*/)
 				return {parser: ParseUtil.jsParser}
 			
 			// Use javascript parser for template expressions
 			if (node.type.name === 'Document' && docInput.doc) {
 				let code = docInput.doc.sliceString(node.from, node.to);
 				let overlay = [];
-				code.replace(/\${/g, (a, startIndex, c) => {
-					let endIndex = ParseUtil.findMatchingBrace(code, startIndex+2);
-					if (endIndex !== -1)
-						overlay.push({from: node.from + startIndex, to: node.from + endIndex + 1});
-				})
+				//code.replace(/\${/g, (a, startIndex) => {
+
+				let ranges = ParseUtil.findJavaScriptRanges(code, 0);
+
+				if (ranges.length) {
+
+					ranges = ranges.map(item => ({
+						from: node.from + item[0],
+						to: node.from + item[1]
+					}));
+
+					overlay.push(...ranges);
+				}
+				//});
+
+				// Make sure overlays don't overlap.
+				// TODO: Is this still necessary?
+				overlay.sort((a, b) => a.from - b.from);
+				for (let i=0; i<overlay.length-1; i++) {
+					let cur = overlay[i];
+					let next = overlay[i+1];
+					if (cur.to >= next.from)
+						cur.to = next.from;
+				}
+
 				return {
 					parser: ParseUtil.jsParser,
 					overlay
@@ -637,8 +658,11 @@ var ParseUtil = {
 				let code = docInput.doc.sliceString(node.from, node.to);
 				
 				// Only if node text starts and ends with tags, allowing for spaces.
-				if (code.match(/^`\s*</) && code.match(/>\s*`$/))
-					return {parser: ParseUtil.htmlParser}
+				if (code.match(/^`\s*</)/* && code.match(/>\s*`$/)*/) {
+					return {
+						parser: ParseUtil.htmlParser,
+					}
+				}
 			}
 			return null;
 		})
@@ -661,10 +685,107 @@ var ParseUtil = {
 		top: "Template"
 	
 	}),
-	
-	
+
+	/**
+	 * Used by javascriptWithHtml()
+	 * Handles single and multiline comments and all three string types.
+	 * TODO: This needs tests!
+	 * @param str {string}
+	 * @param startIndex {int}
+	 * @returns {int[][]}  */
+	findJavaScriptRanges(str, startIndex) {
+		let depth = 0;
+		let depthStack = [];
+		let inString = null;
+		let stringStack = [];
+		let inComment = null;
+
+		let result = [];
+
+		for (let i = startIndex; i < str.length; i++) {
+
+			let char = str[i];
+			if (inString && char === '\\') { // Skip escaped characters in strings.
+				i++;
+				continue;
+			}
+			let nextChar = i + 1 < str.length ? str[i + 1] : '';
+
+			// String start/end
+			if (!inComment) {
+				if (!inString && (char === '`' || char === '`' || char === '`')) {
+					inString = char;
+					if (char === '`') {
+						if (i > startIndex) {
+							result.push([startIndex, i]);
+						}
+					}
+				}
+				else if (inString === char) {
+					if (inString === '`')
+						startIndex = i + 1;
+					inString = null;
+				}
+			}
+
+
+			if (!inString) {
+				// Comment start/end
+				if (char === '/' && (nextChar === '*' || nextChar === '/')) {
+					inComment = nextChar === '*' ? 'block' : 'line';
+					i++; // Skip the next character as it's part of the comment syntax
+				}
+
+				// End block comment
+				else if (inComment === 'block' && char === '*' && nextChar === '/') {
+					inComment = null;
+					i++; // Skip the '/' character
+				}
+
+				// End line comment
+				else if (inComment === 'line' && char === '\n')
+					inComment = null;
+			}
+
+			// Template literal boundaries
+			if (!inComment) {
+
+				if (inString) {
+					if (char === '$' && nextChar === '{') {
+						startIndex = i;
+						i++; // Skip the '{' character
+						stringStack.push(inString);
+						inString = null;
+						depthStack.push(depth);
+						depth = 0;
+					}
+				}
+
+				else {
+					if (char === '{')
+						depth++;
+
+					else if (char === '}') {
+						if (depth === 0) {
+							inString = stringStack.pop();
+							depth = depthStack.pop();
+							if (i > startIndex)
+								result.push([startIndex, i+1]);
+						}
+						else
+							depth--;
+					}
+				}
+			}
+		}
+
+		return result;
+	},
+
 	/**
+	 * @deprecated
 	 * Used by javascriptWithHtml()
+	 * TODO: This needs tests!
 	 * @param str {string}
 	 * @param startIndex {int}
 	 * @returns {int} -1 if no match. */
@@ -672,56 +793,73 @@ var ParseUtil = {
 		let stack = 0;
 		let inString = null;
 		let inComment = null;
-		
-		for (let i=startIndex; i<str.length; i++) {
+
+		for (let i = startIndex; i < str.length; i++) {
 			let char = str[i];
 			if (inString && char === '\\') { // Skip escaped characters in strings.
 				i++;
 				continue;
 			}
-			let nextChar = i + 1 < str.length ? str[i+1] : '';
-			
+			let nextChar = i + 1 < str.length ? str[i + 1] : '';
+
 			// String start/end
-			if (char === '`' && !inComment)
-				inString = inString ? null : '`';
-			else if ((char === '"' || char === "'") && !inComment)
-				inString = inString === char ? null : char;
-			
-			// Comment start/end
-			if (!inString && char === '/' && (nextChar === '*' || nextChar === '/')) {
-				inComment = nextChar === '*' ? 'block' : 'line';
-				i++; // Skip the next character as it's part of the comment syntax
+			if (!inComment) {
+				if (!inString && (char === '`' || char === '`' || char === '`'))
+					inString = char;
+				else if (inString === char)
+					inString = null;
 			}
-			else if (inComment === 'block' && char === '*' && nextChar === '/') {
-				inComment = null;
-				i++; // Skip the '/' character
+
+			// Comment start/end
+			if (!inString) {
+				if (char === '/' && (nextChar === '*' || nextChar === '/')) {
+					inComment = nextChar === '*' ? 'block' : 'line';
+					i++; // Skip the next character as it's part of the comment syntax
+				}
+
+				// End block comment
+				else if (inComment === 'block' && char === '*' && nextChar === '/') {
+					inComment = null;
+					i++; // Skip the '/' character
+				}
+
+				// End line comment
+				else if (inComment === 'line' && char === '\n')
+					inComment = null;
 			}
-			else if (inComment === 'line' && char === '\n')
-				inComment = null;
-			
+
 			// Template literal boundaries
 			if (!inString && !inComment) {
-				if (char === '$' && nextChar === '{') {
+				if (char === '{')
+					stack++;
+
+				else if (char === '$' && nextChar === '{') {
 					stack++;
 					i++; // Skip the '{' character
-				} else if (char === '}') {
+				}
+
+				else if (char === '}') {
 					if (stack === 0)
 						return i; // Matching closing brace found
 					stack--;
 				}
 			}
 		}
-		
+
 		return -1;
 	}
 };
 
 
 /**
- * @typedef ToolbarButton
+ * @typedef {Object} ToolbarButton
  * @property {string} html
- * @property {function(el:Node|HTMLElement)} update */
-export class CodeEditorToolbar extends Solarite {
+ * @property {function(el:Node|HTMLElement)=} update */
+
+/**
+ *
+ */
+export class CodeEditorToolbar extends HTMLElement {
 
 	/** @type {object} Should have functions for everything the buttons array uses. */
 	ed;
@@ -770,7 +908,7 @@ export class CodeEditorToolbar extends Solarite {
 		
 		if (typeof buttons === 'string')
 			buttons = buttons.split(/[,\s]+/g);
-		
+
 		for (let button of buttons||[]) {
 			let item = typeof button === 'string'
 				? this.buttonTemplates[button]
@@ -812,7 +950,7 @@ export class CodeEditorToolbar extends Solarite {
 	}
 
 	render() {
-		this.html = r`
+		r(this)`
 		<code-editor-toolbar>
 			<style>
 				:host { display: block }
@@ -836,5 +974,5 @@ export class CodeEditorToolbar extends Solarite {
 	}
 
 }
-CodeEditorToolbar.define();
+customElements.define('code-editor-toolbar', CodeEditorToolbar);
 

package/docs/js/ui/FlexResizer.js

@@ -3,8 +3,7 @@ import Draggable2 from "../util/Draggable2.js";
 import Util from "../util/Util.js";
 
 /**
- * Put this element between flex children to allow resizing them.
- * TODO: Allow vertical resizing. */
+ * Put this element between flex children to allow resizing them. */
 export default class FlexResizer extends Solarite {
 
 	onStart = Util.callback();
@@ -61,9 +60,15 @@ export default class FlexResizer extends Solarite {
 			}
 		});
 	}
-	
+
+	/**
+	 * It's vertical if the user drags the resizer vertically to resize.
+   * When vertical, the resizer will be stretched horizontally to fill the available space.
+	 * @returns {boolean} */
 	isVertical() {
-		return getComputedStyle(this.parentNode).flexDirection !== 'column';
+		if (this.parentNode) {
+			return getComputedStyle(this.parentNode).flexDirection === 'row';
+		}
 	}
 
 	/** @return {Number} */
@@ -127,10 +132,15 @@ export default class FlexResizer extends Solarite {
 				:host {
 					display: block; z-index: 1;
 				
-					/* We put the resize region (the margin thickness) all to the right / top bc vertical scrollbars are often to the left, and tab bars below the top. */
+					/* We put the resize region (the margin thickness) all to the right / top bc vertical scrollbars 
+					 * are often to the left, and tab bars below the top.*/
 					${this.isVertical()
+			
+						/* Stretch horizontally */
 						? `min-width: ${this.thickness-1}px !important; max-width: ${this.thickness-1}px !important;
 							margin-left: -1px; margin-right: -${this.thickness-1}px; cursor: ew-resize`
+			
+						/* Stretch vertically */
 						: `min-height: ${this.thickness}px !important; max-height: ${this.thickness}px !important;
 							margin-top: -${this.thickness/2}px; margin-bottom: -${this.thickness/2}px; cursor: ns-resize`
 					};

package/docs/js/util/Errors.js

@@ -4,6 +4,17 @@ export function assert(val) {
 	if (!val) {
 		debugger;
 		throw new Error('Assertion failed: ' + val);
+}
+
+var Errors = {
+	getStack(ignoreTop=0, ignoreRegex) {
+		var e = new Error();
+		if (!e.stack) return []; // There is no stack in IE.
+		return e.stack
+			.split('\n')
+			.slice(ignoreTop+2)
+			.map(line => line.trim().replace(/^at /, ''))
+			.filter(line => !ignoreRegex || !line.match(ignoreRegex));
 	}
 }
 //#ENDIF

package/docs/media/documentation.css

@@ -8,8 +8,11 @@
     font-weight: 400;
     src: url("FiraCode400.woff2") format("woff")
 }
-
-html { background: var(--background) !important }
+html[dark] {
+	/*--card-background: #0b0e12 !important;*/
+	--card-border: #1a1c1e !important;
+}
+html { background: var(--background) !important; font-size: 18px !important }
 body::before { content: ''; position: fixed; inset: 0;
 	opacity: .03; filter: grayscale(75%);
 	background: url('solarite-machine.webp') no-repeat -200px -200px / 140% auto ;  }
@@ -41,7 +44,7 @@ html:not([dark]) #write h3 { color: #678; }
 #write h6 { font-size: 100%; font-weight: normal; margin-top: .75em; margin-bottom: 0; text-decoration: underline }
 
 
-#write :is(p, h2, h3, h4, h5, h6, ol, ul) { max-width: 600px }
+#write :is(p, h2, h3, h4, h5, h6, ol, ul) { max-width: 800px }
 #write p { text-align: justify }
 #write a, #write a:visited { color: #08c; text-decoration: none}
 #write a:hover { color: #08c; text-decoration: underline }