@websolutespa/bom-llm 0.0.11 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @websolutespa/bom-llm
 
+## 0.0.12
+
+### Patch Changes
+
+- Fixing: markdown links
+- Added: embeds IntersectionObserver, MutationObserber
+
 ## 0.0.11
 
 ### Patch Changes

package/dist/umd/index.js

@@ -28409,10 +28409,17 @@ void main(void) {
 	    marked.use({
 	      renderer: {
 	        link(href, title, text) {
-	          return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ''}>${text}</a>`;
+	          return `<a class="llm__text-link" href="${href}" target="_blank"
+          ${title ? `title="${title}"` : ''}
+          onclick="javascript:event.preventDefault(),window.open(event.currentTarget.href);">
+            ${text}
+          </a>`;
 	        },
 	        image(href, title, text) {
-	          return `<a class="llm__text-img" href="${href}" target="_blank"><img src="${href}"${title ? ` title="${title}"` : ''} alt="${text}" /></a>`;
+	          return `<a class="llm__text-img" href="${href}" target="_blank"
+          onclick="javascript:event.preventDefault(),window.open(event.currentTarget.href);">
+            <img src="${href}"${title ? ` title="${title}"` : ''} alt="${text}" />
+          </a>`;
 	        }
 	      }
 	    });
@@ -29370,20 +29377,130 @@ void main(void) {
 	      instance: llm
 	    }))
 	  }));
-	  const nodes = Array.from(document.querySelectorAll('llm-embed'));
-	  nodes.forEach(node => {
-	    const root = client.createRoot(node);
-	    root.render(jsxRuntimeExports.jsx(React.StrictMode, {
-	      children: jsxRuntimeExports.jsx(App, Object.assign({}, props, {
-	        embedded: true
-	      }))
-	    }));
+	  const renderEmbed = node => {
+	    if (!node.hasAttribute('data-llm')) {
+	      node.setAttribute('data-llm', '');
+	      const root = client.createRoot(node);
+	      root.render(jsxRuntimeExports.jsx(React.StrictMode, {
+	        children: jsxRuntimeExports.jsx(App, Object.assign({}, props, {
+	          embedded: true
+	        }))
+	      }));
+	    }
+	  };
+	  // observe embeds
+	  const onIntersection = node => {
+	    // console.log('onIntersection', node);
+	    renderEmbed(node);
+	  };
+	  const targetElement = document;
+	  const intersectionObserver = observeIntersections(targetElement, onIntersection);
+	  const embeds = Array.from(document.querySelectorAll('llm-embed')).filter(element => !element.hasAttribute('data-llm'));
+	  embeds.forEach(element => intersectionObserver.observe(element));
+	  observeMutations(targetElement, _ref => {
+	    let {
+	      addedNodes,
+	      removedNodes
+	    } = _ref;
+	    // console.log('addedNodes', addedNodes);
+	    const addedElements = Array.from(addedNodes).filter(x => x.nodeType === Node.ELEMENT_NODE);
+	    // console.log('addedElements', addedElements);
+	    const elements = queryElements(addedElements);
+	    // console.log('elements', elements);
+	    elements.forEach(element => intersectionObserver.observe(element));
 	  });
+	  const elements = queryElements(targetElement);
+	  elements.forEach(element => intersectionObserver.observe(element));
+	  // return dispose;
 	  return llm;
 	}
 	if (typeof window !== 'undefined') {
 	  window.bomLlm = bomLlm;
 	}
+	function observeIntersections(targetElement, callback) {
+	  if (targetElement === void 0) {
+	    targetElement = document;
+	  }
+	  if (callback === void 0) {
+	    callback = target => {};
+	  }
+	  let observer;
+	  if ('IntersectionObserver' in window) {
+	    const observerOptions = {
+	      root: targetElement.parentElement ? targetElement.parentElement : targetElement,
+	      rootMargin: '50px',
+	      threshold: [0.01, 0.99]
+	    };
+	    observer = new IntersectionObserver((entries, observer) => {
+	      entries.forEach(entry => {
+	        if (entry.isIntersecting) {
+	          callback(entry.target);
+	          observer.unobserve(entry.target);
+	        }
+	      });
+	    }, observerOptions);
+	  } else {
+	    observer = {
+	      observe: callback,
+	      disconnect: () => {}
+	    };
+	  }
+	  return observer;
+	}
+	function observeMutations(targetElement, callback) {
+	  if (targetElement === void 0) {
+	    targetElement = document;
+	  }
+	  if (callback === void 0) {
+	    callback = mutation => {};
+	  }
+	  let observer;
+	  if ('MutationObserver' in window) {
+	    const config = {
+	      attributes: false,
+	      childList: true,
+	      subtree: true
+	    };
+	    observer = new MutationObserver((mutationList, observer) => {
+	      for (const mutation of mutationList) {
+	        if (mutation.type === 'childList') {
+	          callback(mutation);
+	        }
+	        /*
+	        else if (mutation.type === 'attributes') {
+	          console.log(`The ${mutation.attributeName} attribute was modified.`);
+	        }
+	        */
+	      }
+	    });
+	    observer.observe(targetElement, config);
+	  } else {
+	    observer = {
+	      disconnect: () => {}
+	    };
+	  }
+	  return observer;
+	}
+	function queryElements(elements) {
+	  const filteredElements = [];
+	  const iterable = Array.isArray(elements) ? elements : isIterable(elements) ? elements : [elements];
+	  for (const element of iterable) {
+	    const childElements = element.querySelectorAll('llm-embed');
+	    for (const childElement of childElements) {
+	      if (!childElement.hasAttribute('data-llm')) {
+	        filteredElements.push(childElement);
+	      }
+	    }
+	    // console.log('element.tagName', element.tagName);
+	    if (element.tagName.toLowerCase() === 'llm-embed' && !element.hasAttribute('data-llm')) {
+	      filteredElements.push(element);
+	    }
+	  }
+	  return filteredElements;
+	}
+	function isIterable(element) {
+	  return element != null && typeof element[Symbol.iterator] === 'function';
+	}
 
 	exports.bomLlm = bomLlm;