From 997a151b448c399887267fcd2351c50f1797a398 Mon Sep 17 00:00:00 2001 From: metacryst Date: Sat, 30 Mar 2024 14:55:21 -0500 Subject: [PATCH] Adding quillStyles, couple bugs, new unit test --- Test/init.test.js | 15 +++++++ index.js | 106 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 95 insertions(+), 26 deletions(-) diff --git a/Test/init.test.js b/Test/init.test.js index a699bf1..a9a0616 100644 --- a/Test/init.test.js +++ b/Test/init.test.js @@ -262,4 +262,19 @@ window.testSuites.push( class testInit { } } } + + UnneededArgumentThrowsError() { + register(class SidebarFile extends Shadow { + + }, randomName("sb-file")) + + try { + SidebarFile({path: "/asd"}) + return "Did not throw error!" + } catch(e) { + if(!e.message.includes("passed in where")) { + throw e + } + } + } }) \ No newline at end of file diff --git a/index.js b/index.js index b11b5bb..8f5c4e1 100644 --- a/index.js +++ b/index.js @@ -83,29 +83,66 @@ console.green = function(message) { } +/* STYLES */ + +window.quillStyles = document.querySelector("style#shadows"); +if(!window.quillStyles) { + window.quillStyles = document.createElement('style'); + window.quillStyles.id = "shadows"; + document.head.appendChild(window.quillStyles); +} + +window.quillStyles.add = function(tag) { + let stylesheet = this.querySelector(`:scope > style[id='${tag}']`) + tag = tag.replace(/\*/g, "all"); + tag = tag.replace(/#/g, "id-"); + tag = tag.replace(/,/g, ""); + if(!stylesheet) { + stylesheet = document.createElement('style'); + stylesheet.id = tag; + this.appendChild(stylesheet); + } +} + +window.quillStyles.update = function(tag, string) { + let sheet = this.querySelector(`:scope > style[id='${tag}']`)?.sheet + if(!sheet) console.error('Quill: could not find stylesheet to update!') + + for (let i = 0; i < sheet.cssRules.length; i++) { + let rule = sheet.cssRules[i]; + + if (rule.selectorText === tag || rule.selectorText === `${tag.toLowerCase()}`) { + sheet.deleteRule(i); + break; + } + } + + sheet.insertRule(`${tag} { ${string} }`, sheet.cssRules.length); +} + /* STRING TRANSLATORS */ window.css = function css(cssString) { - let container = document.querySelector("style#quillStyles"); - if(!container) { - container = document.createElement('style'); - container.id = "quillStyles"; - document.head.appendChild(container); - } + // let container = document.querySelector("style#quillStyles"); + // if(!container) { + // container = document.createElement('style'); + // container.id = "quillStyles"; + // document.head.appendChild(container); + // } - let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim(); - primarySelector = primarySelector.replace(/\*/g, "all"); - primarySelector = primarySelector.replace(/#/g, "id-"); - primarySelector = primarySelector.replace(/,/g, ""); - let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`) - if(!stylesheet) { - stylesheet = document.createElement('style'); - stylesheet.id = primarySelector; - stylesheet.appendChild(document.createTextNode(cssString)); - container.appendChild(stylesheet); - } else { - stylesheet.innerText = cssString - } + // let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim(); + // primarySelector = primarySelector.replace(/\*/g, "all"); + // primarySelector = primarySelector.replace(/#/g, "id-"); + // primarySelector = primarySelector.replace(/,/g, ""); + // let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`) + // if(!stylesheet) { + // stylesheet = document.createElement('style'); + // stylesheet.id = primarySelector; + // stylesheet.appendChild(document.createTextNode(cssString)); + // container.appendChild(stylesheet); + // } else { + // stylesheet.innerText = cssString + // } } window.html = function html(htmlString) { @@ -227,8 +264,9 @@ class ObservedObject { } }, get: function() { - Registry.lastState.push(key) - Registry.lastState.push(instance[backingFieldName]) + if(Registry.lastState) { + Registry.lastState = [...Registry.lastState, key, instance[backingFieldName]] + } return instance[backingFieldName]; }, enumerable: true, @@ -377,7 +415,6 @@ window.Registry = class Registry { }, get: function() { Registry.lastState = [name, elem[backingFieldName]] - // check which elements are observing the return elem[backingFieldName]; // Provide a getter to access the backing field value }, enumerable: true, @@ -423,9 +460,8 @@ window.Registry = class Registry { for (let param of params) { i++ - if(i > allNames.length) { - console.error(`${el.prototype.constructor.name}: too many parameters for field!`) - return + if(i >= allNames.length) { + throw new Error(`${elem.constructor.name}: ${params.length} arguments passed in where ${allNames.length} expected!`) } let bareName = allNames[i].replace(/^(\$\$|\$)/, ''); @@ -464,6 +500,7 @@ window.Registry = class Registry { }); customElements.define(tagname, el) + quillStyles.add(tagname) // Actual Constructor window[el.prototype.constructor.name] = function (...params) { @@ -541,7 +578,9 @@ window.Registry = class Registry { if(superCallFound) { let modifiedStr = modifiedLines.join('\n'); - return eval('(' + modifiedStr + ')'); + modifiedStr = '(' + modifiedStr + ')' + modifiedStr += `//# sourceURL=${classObject.prototype.constructor.name}.shadow` + return eval(modifiedStr); } if(constructorFound) { @@ -608,6 +647,21 @@ window.span = function (innerText) { return span } +/* STACKS */ + +window.VStack = function (cb = () => {}) { + let nowRendering = window.rendering.last() + if(nowRendering.innerHTML === "") { + let styles = ` + display: flex; + flex-direction: column; + ` + quillStyles.update(nowRendering.tagName.toLowerCase(), styles) + cb() + return nowRendering + } +} + /* PROTOTYPE FUNCTIONS */ Array.prototype.last = function() {