autocomplete without react

packages/codemirror/autocomplete.mjs

@@ -1,7 +1,7 @@
-import { createRoot } from 'react-dom/client';
 import jsdoc from '../../doc.json';
 // import { javascriptLanguage } from '@codemirror/lang-javascript';
 import { autocompletion } from '@codemirror/autocomplete';
+import { h } from './html';
 
 const getDocLabel = (doc) => doc.name || doc.longname;
 const getInnerText = (html) => {
@@ -10,36 +10,32 @@ const getInnerText = (html) => {
   return div.textContent || div.innerText || '';
 };
 
-export function Autocomplete({ doc }) {
-  return (
-    <div className="prose dark:prose-invert  max-h-[400px] overflow-auto">
-      <h3 className="pt-0 mt-0">{getDocLabel(doc)}</h3>
-      <div dangerouslySetInnerHTML={{ __html: doc.description }} />
-      <ul>
-        {doc.params?.map(({ name, type, description }, i) => (
-          <li key={i}>
-            {name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
-          </li>
-        ))}
-      </ul>
-      <div>
-        {doc.examples?.map((example, i) => (
-          <div key={i}>
-            <pre
-              className="cursor-pointer"
-              onMouseDown={(e) => {
-                console.log('ola!');
-                navigator.clipboard.writeText(example);
-                e.stopPropagation();
-              }}
-            >
-              {example}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+function Autocomplete({ doc }) {
+  return h`<div class="prose dark:prose-invert max-h-[400px] overflow-auto">
+<h1 class="pt-0 mt-0">${getDocLabel(doc)}</h1>
+${doc.description}
+<ul>
+  ${doc.params?.map(
+    ({ name, type, description }) =>
+      `<li>${name} : ${type.names?.join(' | ')} ${description ? ` - ${getInnerText(description)}` : ''}</li>`,
+  )}
+</ul>
+<div>
+  ${doc.examples?.map((example) => `<div><pre>${example}</pre></div>`)}
+</div>
+</div>`[0];
+  /*
+<pre
+className="cursor-pointer"
+onMouseDown={(e) => {
+  console.log('ola!');
+  navigator.clipboard.writeText(example);
+  e.stopPropagation();
+}}
+>
+{example}
+</pre>
+*/
 }
 
 const jsdocCompletions = jsdoc.docs
@@ -56,9 +52,8 @@ const jsdocCompletions = jsdoc.docs
     // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
     info: () => {
       const node = document.createElement('div');
-      // if Autocomplete is non-interactive, it could also be rendered at build time..
-      // .. using renderToStaticMarkup
-      createRoot(node).render(<Autocomplete doc={doc} />);
+      const ac = Autocomplete({ doc });
+      node.appendChild(ac);
       return node;
     },
     type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type

packages/codemirror/codemirror.mjs

@@ -6,7 +6,7 @@ import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { Compartment, EditorState, Prec } from '@codemirror/state';
 import { EditorView, highlightActiveLineGutter, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';
 import { Pattern, Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
-// import { isAutoCompletionEnabled } from './Autocomplete';
+import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { flash, isFlashEnabled } from './flash.mjs';
 import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
 import { keybindings } from './keybindings.mjs';
@@ -18,7 +18,7 @@ const extensions = {
   isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
   isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []),
   theme,
-  // isAutoCompletionEnabled,
+  isAutoCompletionEnabled,
   isPatternHighlightingEnabled,
   isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
   isFlashEnabled,

packages/codemirror/html.mjs

@@ -0,0 +1,17 @@
+const parser = new DOMParser();
+export let html = (string) => {
+  return parser.parseFromString(string, 'text/html').querySelectorAll('*');
+};
+let parseChunk = (chunk) => {
+  if (Array.isArray(chunk)) return chunk.flat().join('');
+  if (chunk === undefined) return '';
+  return chunk;
+};
+export let h = (strings, ...vars) => {
+  let string = '';
+  for (let i in strings) {
+    string += parseChunk(strings[i]);
+    string += parseChunk(vars[i]);
+  }
+  return html(string);
+};