bedazzlr 0.2.8 → 0.3.0

package/README.md

@@ -1,3 +1,3 @@
 ## bedazzlr
 
-Syntax highlighter for `<code />` blocks on webpages powered by BABLR
+Documentation at https://docs.bablr.org/reference/bedazzlr

package/lib/index.js

@@ -1,22 +1,22 @@
-/* global document window console requestAnimationFrame */
+/* global document window console requestAnimationFrame IntersectionObserver */
 
 import emptyStack from '@iter-tools/imm-stack';
 import classNames from 'classnames';
-import { buildModule } from 'bablr/enhanceable';
+import { streamParse } from 'bablr';
 
 import { CloseNodeTag, LiteralTag, OpenNodeTag, ReferenceTag } from '@bablr/agast-helpers/symbols';
 import { printSelfClosingNodeTag } from '@bablr/agast-helpers/print';
-import { buildOpenNodeTag, nodeFlags, tokenFlags } from '@bablr/agast-helpers/builders';
+import { buildOpenNodeTag, nodeFlags, tokenFlags, parseTag } from '@bablr/agast-helpers/builders';
 import {
-  buildTreeNodeMatcher,
-  buildNodeFlags,
-  buildTreeNodeMatcherOpen,
-  buildPropertyMatcher,
-  buildBoundNodeMatcher,
-  buildReferenceMatcher,
-} from '@bablr/helpers/builders';
-import { buildEmbeddedMatcher } from '@bablr/agast-vm-helpers/builders';
-import { getStreamIterator, hoistTrivia, StreamIterable, wait } from '@bablr/agast-helpers/stream';
+  continue_,
+  getStreamIterator,
+  hoistTrivia,
+  StreamIterable,
+  wait,
+} from '@bablr/agast-helpers/stream';
+import { deepFreezeRecord, freezeRecord } from '@bablr/agast-helpers/object';
+import { buildEmbeddedCallable } from '@bablr/agast-vm-helpers/builders';
+import { m } from '@bablr/helpers/grammar';
 
 let anchorStyle =
   'display: inline-block; position: relative; vertical-align: top; pointer-events: none;';
@@ -131,17 +131,21 @@ const chunkify = (chunkSize, str) => {
   return new StreamIterable(__chunkify(chunkSize, str));
 };
 
-let { streamParse } = buildModule();
-
-function* __highlightCode(el, language, matcher, options = {}) {
+function* __highlightCode(el, language, matcher, options = freezeRecord({})) {
   let { chunkSize, bablr: bablrOptions = {} } = options;
   let input = chunkSize ? chunkify(chunkSize, el.innerText) : el.innerText;
   let tags = getStreamIterator(
     hoistTrivia(
-      streamParse(language, matcher, input, null, {
-        ...bablrOptions,
-        holdShiftedNodes: true,
-      }),
+      streamParse(
+        language,
+        matcher,
+        input,
+        null,
+        deepFreezeRecord({
+          ...bablrOptions,
+          holdShiftedNodes: true,
+        }),
+      ),
     ),
   );
 
@@ -156,13 +160,14 @@ function* __highlightCode(el, language, matcher, options = {}) {
   let step = tags.next();
 
   while (true) {
-    if (step instanceof Promise) {
-      step = yield wait(step);
+    while (step === null || step instanceof Promise) {
+      if (step === null) yield continue_(), (step = tags.next());
+      if (step instanceof Promise) step = yield wait(step);
     }
 
     if (step.done) break;
 
-    let tag = step.value;
+    let tag = parseTag(step.value);
 
     if (tag.type === OpenNodeTag) {
       range = range.cloneRange();
@@ -179,7 +184,7 @@ function* __highlightCode(el, language, matcher, options = {}) {
         open,
         range,
         referenceTag,
-        // langs: stack.value.langs.concat(bindingTag?.value.segments ?? []),
+        // langs: stack.value.langs.push(bindingTag?.value ?? []),
       });
     }
 
@@ -414,14 +419,14 @@ function* __highlightCode(el, language, matcher, options = {}) {
     if (store.selectionState === 'selecting') {
       let selected = store.selectedRange;
 
-      if (e.fromElement?.tagName !== 'NODE') {
-        if (e.toElement?.tagName === 'NODE') {
+      if (e.relatedTarget?.tagName !== 'NODE') {
+        if (e.target?.tagName === 'NODE') {
           let startTokenNode = selected[0];
 
           if (startTokenNode) {
-            range = [startTokenNode, e.toElement];
+            range = [startTokenNode, e.target];
           } else {
-            range = [e.toElement, e.toElement];
+            range = [e.target, e.target];
           }
 
           store.selectedRange = range;
@@ -431,8 +436,8 @@ function* __highlightCode(el, language, matcher, options = {}) {
       }
     }
 
-    if (e.toElement?.tagName === 'NODE') {
-      store.hoverTarget = e.toElement;
+    if (e.target?.tagName === 'NODE') {
+      store.hoverTarget = e.target;
     } else {
       store.hoverTarget = null;
     }
@@ -442,20 +447,20 @@ function* __highlightCode(el, language, matcher, options = {}) {
     if (store.selectionState === 'selecting') {
       let selected = store.selectedRange;
 
-      if (e.toElement?.tagName === 'NODE') {
+      if (e.relatedTarget?.tagName === 'NODE') {
         let range;
 
         let startTokenNode = selected[0];
 
         if (startTokenNode) {
-          range = [startTokenNode, e.toElement];
+          range = [startTokenNode, e.relatedTarget];
         } else {
-          range = [e.toElement, null];
+          range = [e.relatedTarget, null];
         }
 
         store.selectedRange = range;
       } else {
-        if (e.toElement?.tagName === 'NODE') {
+        if (e.relatedTarget?.tagName === 'NODE') {
           store.selectedRange = [store.selectedRange[0], store.selectedRange[0]];
         } else {
           store.selectedRange = [store.selectedRange[0], null];
@@ -511,36 +516,37 @@ export const highlightCode = (el, language, matcher = language.defaultMatcher, o
 function* __highlightAll(languages, options) {
   let codeBlocks = document.querySelectorAll('code');
 
-  for (let block of codeBlocks) {
-    let canonicalURL = block.getAttribute('bablr-lang');
-    let language = languages.get(canonicalURL);
-    let flags = block.getAttribute('bablr-ref-flags');
+  let intersectionChanged = (entries) => {
+    for (let entry of entries) {
+      let { target } = entry;
 
-    let name = block.getAttribute('bablr-prod');
+      let canonicalURL = target.getAttribute('bablr-lang');
+      let language = languages.get(canonicalURL);
+      let flags = target.getAttribute('bablr-ref-flags');
 
-    if (!language) continue;
-    if (!name && !language.defaultMatcher) continue;
+      let name = target.getAttribute('bablr-prod');
 
-    try {
-      highlightCode(
-        block,
-        language,
-        name
-          ? buildEmbeddedMatcher(
-              buildPropertyMatcher(
-                buildReferenceMatcher('_', null, flags),
-                buildBoundNodeMatcher(
-                  [],
-                  buildTreeNodeMatcher(buildTreeNodeMatcherOpen(buildNodeFlags(), null, name)),
-                ),
-              ),
-            )
-          : language.defaultMatcher,
-        options,
-      );
-    } catch (e) {
-      console.warn(e);
+      if (!language) continue;
+      if (!name && !language.defaultMatcher) continue;
+
+      try {
+        highlightCode(
+          target,
+          language,
+          name ? m`<${name}>` : language.defaultMatcher,
+
+          options,
+        );
+      } catch (e) {
+        console.warn(e);
+      }
     }
+  };
+
+  let io = new IntersectionObserver(intersectionChanged);
+
+  for (let block of codeBlocks) {
+    io.observe(block);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bedazzlr",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Code block syntax highlighting using BABLR",
   "author": "Conrad Buck<conartist6@gmail.com>",
   "type": "module",
@@ -15,16 +15,15 @@
     "test": "mocha test/*.test.js"
   },
   "dependencies": {
-    "@bablr/agast-helpers": "0.10.10",
-    "@bablr/agast-vm-helpers": "0.10.5",
-    "@bablr/boot": "0.11.4",
-    "@bablr/helpers": "0.25.5",
+    "@bablr/agast-helpers": "0.11.3",
+    "@bablr/agast-vm-helpers": "0.11.3",
+    "@bablr/helpers": "0.26.4",
     "@iter-tools/imm-stack": "1.2.0",
-    "bablr": "0.11.11",
+    "bablr": "0.12.4",
     "classnames": "2.5.1"
   },
   "devDependencies": {
-    "@bablr/eslint-config-base": "github:bablr-lang/eslint-config-base#c97bfa4b3663f8378e9b3e42bb5a41e685406cf9",
+    "@bablr/eslint-config-base": "github:bablr-lang/eslint-config-base#23b94fb3bdfdbc3ac7ed9cb58d7979d8f07dce2b",
     "@qnighy/dedent": "0.1.1",
     "enhanced-resolve": "^5.12.0",
     "eslint": "^8.32.0",