Ideas to syntax highlight on the server

[dominictobias-bullish]

I would like to pick your brains on how something like this could be achieved:

<ComponentDemo Component={lazy(() => import('src/demos/ButtonDemo'))} />

Whereby the server can pick up this path, read the file contents, syntax highlight it, and pass it down to the client so that the client can both render the component and the syntax highlighted code it consists of.

Ideally props could be passed to the demo too, perhaps I should just pass a component and path separately?

<ComponentDemo component={<ButtonDemo someProp={true} />} demoPath="src/demos/ButtonDemo" />

Either way I don't know how to read the props on the server? The load/preload functions don't pass them.

[dominictobias-bullish]

Never mind I think it will be simple:

import { cache } from '@solidjs/router'
import { JSX, createResource } from 'solid-js'

const syntaxHighlight = cache(
  async (sourceImport: () => Promise<typeof import('*?raw')>) => {
    'use server'
    const source = await sourceImport().then(m => m.default)
    return `highlighted: ${source}`
  },
  'users',
)

interface ComponentDemoProps {
  component: JSX.Element
  sourceImport: () => Promise<typeof import('*?raw')>
}

export default function ComponentDemo(props: ComponentDemoProps) {
  const [code] = createResource(() => syntaxHighlight(props.sourceImport))
  return (
    <div>
      <div>{code()}</div>
      <div>{props.component}</div>
    </div>
  )
}

<ComponentDemo
  component={<ButtonDemo />}
  sourceImport={() => import('@src/demos/ButtonDemo?raw')}
  />

Just have to figure out the best way to actually get the source code (maybe just import it at build time for simplicity even though that will increase the bundle size)