How to inject reactive components into static HTML content

[jsimonrichard]

I'm trying to render a book (source will be in AsciiDoc) with reactive components inside. This basically the same issue MDX solves, but for AsciiDoc instead of markdown.

I'm able to render the AsciiDoc content as an HTML string during the build process, but if the rendered content includes a placeholder like <div data-interactive />, would it be possible to replace that with a SolidJS component before the page is served to the client (I'm planning to use SSR)?

Or would the entire book content need to be converted to a SolidJS component instead of an HTML string...? I'm not sure how I would achieve that. I could, of course, do something like...

<div innerHTML={bookContent} />

But then how would I mount the reactive components?

[atk]

For that, you need an mdx-based solution.

[jsimonrichard]

I think I might be able to get it working by doing something like this (which I think might be similar to how MDX does things):

import Processor from 'asciidoctor'
import { build } from 'vite'
import { mkdir, writeFile, rm } from 'fs/promises';
import { join } from 'path';
import { tmpdir } from 'os';
import solidPlugin from 'vite-plugin-solid';
import type { RollupOutput } from 'rollup';

const processor = Processor()

async function compileJSX(jsx: string): Promise<RollupOutput> {
  // Create unique temp dir
  const tmpDir = join(tmpdir(), 'adocx-compile-' + Math.random().toString(36).slice(2));
  await mkdir(tmpDir);

  try {
    // Write JSX to temp file
    const srcPath = join(tmpDir, 'component.tsx');
    await writeFile(srcPath, jsx);

    // Run vite build
    const result = await build({
      plugins: [solidPlugin({ ssr: true })],
      build: {
        write: false,
        ssr: true,
        lib: {
          entry: srcPath,
          formats: ['es'] 
        },
        rollupOptions: {
          external: ['solid-js', 'solid-js/web', 'solid-js/store'],
        }
      }
    }) as RollupOutput[];
    
    return result[0] as RollupOutput;
  } finally {
    // Clean up temp directory
    await rm(tmpDir, { recursive: true });
  }
}

export async function buildAdoc(adoc: string) {
  const html = processor.convert(adoc)
  const jsx = `
  export default function Content() {
    return (
      ${html}
    );
  }
  `

  const result = await compileJSX(jsx);
  console.log(result)

  const code = result.output
    .filter(chunk => chunk.type === 'chunk') // Only include JS chunks
    .map(chunk => chunk.code)
    .join('\n');

  const module = await import(/* @vite-ignore */ "data:text/javascript," + code);
  // const module = await import("data:text/javascript;base64," + btoa(code));

  return module.default;
}

Later, I could pass my dynamic components as arguments to this Content function component.

This code works without errors when I run it in an independent script (using bun).

// test.ts
import { buildAdoc } from "./build-adoc";

const myBookContent = `
== Hello World
asdfasdf
`;


const Component = await buildAdoc(myBookContent)

export default Component;

console.log(Component)

bun run ./test.ts

However, when I try to run it during SSR, it can't import solid-js/web. Here's my ./src/routes/index.tsx.

import { Title } from "@solidjs/meta";
import { buildAdoc } from "~/build-adoc";
import Counter from "~/components/Counter";
import { JSX } from "solid-js";

const myBookContent = `
== Hello World
asdfasdf
`;


const Component = await buildAdoc(myBookContent) as () => JSX.Element;
console.log(Component)

export default function Home() {
 
  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Counter />
      <Component />
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}

The intermediate generated code:

import { ssr, ssrHydrationKey } from "solid-js/web";
var _tmpl$ = ["<div", ' class="sect1"><h2 id="_hello_world">Hello World</h2><div class="sectionbody"><div class="paragraph"><p>asdfasdf</p></div></div></div>'];
function Content() {
  return ssr(_tmpl$, ssrHydrationKey());
}
export {
  Content as default
};

The output:

2:39:31 PM [vite] Error when evaluating SSR module /home/jsimonrichard/Sync/GCM Books App/solid-book-rendering-test/src/routes/index.tsx?pick=default&pick=$css: failed to import "data:text/javascript,import { ssr, ssrHydrationKey } from "solid-js/web";
var _tmpl$ = ["<div", ' class="sect1"><h2 id="_hello_world">Hello World</h2><div class="sectionbody"><div class="paragraph"><p>asdfasdf</p></div></div></div>'];
function Content() {
  return ssr(_tmpl$, ssrHydrationKey());
}
export {
  Content as default
};
"
|- TypeError [ERR_UNSUPPORTED_RESOLVE_REQUEST]: Failed to resolve module specifier "solid-js/web" from "data:text/javascript,import { ssr, ssrHydrationKey } from "solid-js/web";var _tmpl$ = ["<div", ' class="sect1"><h2 id="_hello_world">Hello World</h2><div class="sectionbody"><div class="paragraph"><p>asdfasdf</p></div></div></div>'];function Content() {  return ssr(_tmpl$, ssrHydrationKey());}export {  Content as default};": Invalid relative URL or base scheme is not hierarchical.
    at moduleResolve (node:internal/modules/esm/resolve:850:23)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:135:49)

Any thoughts? I also tried importing fs/promise to see if the prompt was related to solid-js/web specifically, but importing fs/promise also fails (with basically the same error message).

[jsimonrichard]

I'm over thinking this. If save the string with this format:

`export default Content() {
    return (
        ${escapedHTMLFromAsciiDoc}
    )
}`

...to a temp file, and then load it directly using await import(tmpFile), it should work.

Maybe not the prettiest solution, but I don't need pretty.

If you don't the asciidoc file (I don't), you would have to be very careful with how you escape the html content, since with SSR it's running on the server.