tickle functionality restored

modules/utils/createCustomElement.mjs

@@ -0,0 +1,98 @@
+//@ts-check
+
+const createOptions = () => ({
+  name: "my-custom-element",
+  css: ":host{}",
+  html: "",
+  ParentClass: HTMLElement,
+  observedAttributes: /** @type {string[]}*/ ([]),
+});
+
+/**
+ * WIP: minimal API for custom elements. Do not use!
+ * @typedef {ReturnType<typeof createOptions>} Options
+ * @param {Partial<Options>} [options]
+ */
+export const createCustomElement = (options) => {
+  const {
+    name,
+    css,
+    html,
+    observedAttributes: attrs,
+    ParentClass,
+  } = { ...createOptions(), ...options };
+
+  class CustomClass extends ParentClass {
+    static template = document.createElement("template");
+    static stylesheet = new CSSStyleSheet();
+
+    constructor(){
+      super()
+    }
+
+    /**
+     * Registers the custom element. If it was already registered, this is a no-op.
+     * @param {string} tag
+     */
+    static define(tag = name) {
+      if (!customElements.get(tag)) {
+        customElements.define(tag, this);
+      }
+    }
+
+    static get observedAttributes() {
+      return attrs;
+    }
+
+    attributeChangedCallback(property, oldValue, newValue) {
+      if (oldValue === newValue) {
+        return;
+      }
+      this[property] = newValue;
+    }
+
+    /** @type {AbortController|null} */
+    _abortController = null;
+
+    /**
+     * If no <template> tag is provided in the page, this uses the parent classe's
+     * template and css to create markup
+     * Use this in the constructor
+     */
+    _autoCreateShadow(){
+      if (!this.shadowRoot) {
+        const { stylesheet, template } =
+          Object.getPrototypeOf(this).constructor;
+        this.shadowRoot = this.attachShadow({ mode: "open" });
+        this.shadowRoot.adoptedStyleSheets = [stylesheet];
+        this.shadowRoot.replaceChildren(template.content.cloneNode(true));
+      }
+    }
+
+    _getAbortSignal(){
+      if(!this._abortController){
+        this._abortController = new AbortController()
+      }
+      return this._abortController.signal
+    }
+
+    /**
+     * Aborts any event that used the AbortSignal.
+     * Use this in the `disconnectedCallback` call
+     */
+    _abort(){
+      this._abortController && this._abortController.abort();
+    }
+
+  }
+
+  const x = new CustomClass();
+  
+
+  CustomClass.template.innerHTML = html;
+  CustomClass.stylesheet.replaceSync(css);
+  Object.defineProperty(CustomClass, "name", { value: name.replace(/-/s,'') });
+  return CustomClass;
+};
+
+export default createCustomElement

modules/utils/generateDomFromString.mjs

@@ -4,12 +4,39 @@
  * Generates valid dom elements from a string
  * @param {string} htmlString
  */
-export const generateDomFromString = (htmlString) =>{
-    const children = new DOMParser().parseFromString(`<div>${htmlString}</div>`, "text/html")
-      .children
-    const fragment = document.createDocumentFragment()
-    fragment.append(...children)
-    return fragment
-  ;}
+export const generateDomFromString = (htmlString) => {
+  
+  htmlString = htmlString.trim();
+  const dom = new DOMParser().parseFromString('<template>'+ htmlString +'</template>','text/html')
+  const content = /** @type {HTMLTemplateElement} */(dom.head.firstElementChild).content
+
+  const fragment = document.createDocumentFragment();
+  fragment.append(content);
+
+  return fragment;
+};
 
 export default generateDomFromString;
+
+/**
+ * @param {String} html representing a single element
+ * @return {Element|null}
+ */
+function htmlToElement(html) {
+  html = html.trim();
+  var template = document.createElement("template");
+  template.innerHTML = html;
+  if (template.content.childNodes.length) {
+  }
+  return /** @type {Element} */ (template.content.firstChild);
+}
+
+/**
+ * @param {String} html representing any number of sibling elements
+ * @return {NodeList}
+ */
+function htmlToElements(html) {
+  var template = document.createElement("template");
+  template.innerHTML = html;
+  return template.content.childNodes;
+}

modules/utils/getElementByCSSSelector.mjs

@@ -0,0 +1,19 @@
+//@ts-check
+import { isLocalHost } from "./isLocalHost.mjs";
+
+/**
+ * Gets an element by a valid selector if the element exists, otherwise throws, but only if running in localhost environments.
+ * Use this in the initial setup to verify all elements exist
+ * @param {string} selector
+ * @return {HTMLElement}
+ */
+export const getElementByCSSSelector = (selector) => {
+  const element = document && document.querySelector(selector);
+  if (isLocalHost && !element) {
+    throw new Error(`Element "#${selector}" was not found`);
+  }
+  // @ts-ignore
+  return element;
+};
+
+export default getElementByCSSSelector

modules/utils/index.mjs

@@ -1,6 +1,7 @@
 //@ts-check
 
 import { changeTitle } from "./changeTitle.mjs";
+//import { createCustomElement } from "./createCustomElement.mjs";
 import { documentMode } from "./documentMode.mjs";
 import { documentState } from "./documentState.mjs";
 import { fetchMarkdown } from "./fetchMarkdown.mjs";
@@ -11,6 +12,7 @@ import {
   hasCurrentHashUrl,
   hasNoHashUrl,
 } from "./getCurrentHashUrl.mjs";
+import { getElementByCSSSelector } from "./getElementByCSSSelector.mjs";
 import { getElementById } from "./getElementById.mjs";
 import { getFirstTitleContent } from "./getFirstTitleContent.mjs";
 import { identity, awaitedIdentity } from "./identity.mjs";
@@ -45,6 +47,7 @@ export {
   getCurrentHashUrl,
   hasCurrentHashUrl,
   hasNoHashUrl,
+  getElementByCSSSelector,
   getElementById,
   getFirstTitleContent,
   html,