A library similar to notebook kit

Show and tell
1

I made a small library that can dynamically render OJS cells in the browser.

2

Now using it, you can load notebooks directly in the browser by adding

<script type="module" src="https://cdn.jsdelivr.net/gh/nxrix/observable-renderer/src/loader.js"></script>

It doesn’t support JS and TS cell types yet.

Example
Source

3

Did you consider using Notebook Kit for this? It’s intended to support this type of usage. Here’s an example:

4

Yes, but it was loading all the dependencies at start, while I expect it to only load them when a cell is using one.

I will later try to see if I can change it to be this way.

5

Yes, please let us know if you find a bug. I don’t see it loading any unnecessary dependencies in the example notebook I linked above. (I do see it loading multiple copies of Acorn at different versions, but this is an unfortunate consequence of how jsDelivr’s module bundling is designed; you’d need an import map to coalesce the different versions into a single request.)

6

I started using notebook-kit and I have a few questions.

1. Updating a cell

I don’t know if this way is correct or not.

const createCell = (cell) => {
  const id = nextId++;

  const select = document.createElement("select");
  for (const type of ["ojs", "js", "ts", "html", "md", "tex", "dot"]) {
    const option = document.createElement("option");
    option.value = type;
    option.textContent = type;
    select.appendChild(option);
  }
  select.value = cell.mode;

  const textarea = document.createElement("textarea");
  textarea.value = cell?.value ?? "";

  const run = document.createElement("button");
  run.textContent = "Run";

  const del = document.createElement("button");
  del.textContent = "Delete";

  const container = document.createElement("div");
  const output = document.createElement("div");
  container.appendChild(output);
  const editor = document.createElement("div");
  editor.append(select,textarea,run,del);
  container.appendChild(editor);
  main.appendChild(container);

  const state = {
    root: output,
    variables: []
  };

  const execute = async () => {
    cell.value = textarea.value;
    cell.mode = select.value;
    state.variables.forEach(v => {
      v._observer = {};
      v.delete();
    });
    state.variables = [];
    try {
      const definition = Kit.transpile(cell);
      const body = compile(definition.body);
      await runtime.define(
        state,
        {
          ...definition,
          body
        }
      );
    } catch (error) {
      showError(output, error);
    }
  }
  run.onclick = execute;

  del.onclick = () => {
    state.variables.forEach(v => {
      v._observer = {};
      v.delete();
    });
    container.remove();
    cells.delete(id);
  };

  cells.set(id, {
    state,
    container
  });

  execute();
  return id;
}

2. How can I build a fully offline version of notebook-kit?