SolidJS•15mo ago

Anyone using solid-social with solid-markdown?

I'm trying to figure out how to get solid-social to work with solid-markdown, if anyone is using both and could help it'd be much appreciated. I have tried:

import SolidMarkdown from "solid-markdown";
import { YouTube } from "solid-social";

<SolidMarkdown
  components={{
    YouTube: (props) => (
      <YouTube {...props} />
    )
  }}
  children={markdown}
/>

import SolidMarkdown from "solid-markdown";
import { YouTube } from "solid-social";

<SolidMarkdown
  components={{
    YouTube: (props) => (
      <YouTube {...props} />
    )
  }}
  children={markdown}
/>

markdown containing:

## Title
---
<YouTube youTubeId="C0DPdy98e4c" />

## Title
---
<YouTube youTubeId="C0DPdy98e4c" />

The title converts from markdown to html fine

39 Replies

high1•15mo ago

Hey, could you create a small repro? I haven't looked for a while into solid-social repo, but I'll see what's going on

DogOP•15mo ago

I tried to reproduce it, but I'm not getting the same result. Here it is: https://codesandbox.io/p/sandbox/solid-social-with-solid-markdown-tdf62z

solid-social with solid-markdown

DogOP•15mo ago

In my main site it shows the markdown converted to html apart from the social components but in the repro, it shows neither converted.

high1•15mo ago

This is a more complex issue - you are running it on solid start, which renders on server first. I'm not even sure if solid-social works on server - but I think it should. Not sure about solid-markdown But I don't think it does

DogOP•15mo ago

yeah I think it must be to do with solid-social as I just tried it alone on my main project and got an error

DogOP•15mo ago

high1•15mo ago

The build system was reworked, and the support should be there, at least I think so.

high1•15mo ago

https://github.com/high1/solid-social/pull/1

GitHub

rework build system by modderme123 · Pull Request #1 · high1/solid-...

This helps this package work in SSR mode

DogOP•15mo ago

Ok thank you for pointing me in the right direction, I'll try again. If I don't get it to work I might contact modderme123

high1•15mo ago

Just give me a reproduction - but somewhere where I can make changes to the code without logging in, if possible - like StackBlitz? Since you are using SSR, it would also be a good idea to use @mdx-js/mdx on demand. And not render the markdown client side - if it's not a must.

DogOP•15mo ago

https://stackblitz.com/edit/solid-ssr-vite-qyuqxf?file=src%2Froutes%2Findex.tsx I'd like the markdown content to be rendered server side as I'm storing it in supabase database

HokkaidoInu

StackBlitz

SolidStart (forked) - StackBlitz

Starter project for Solid with Routing and SSR

high1•15mo ago

There's some stuff missing in exports in solid-start, but it works in SSR, if you disregard hydration errors - I'll fix that as soon as I can. Your client side render function is async - that doesn't work in solid, I don't know if this is an error or it should work in solid start

high1•15mo ago

About mdx, I do think that mdx on demand is doable You could expose an API route that would return compiled MDX to the client and then run the code with solid/jsx-runtime, if I'm reading @mdx-js correctly The code can be wrapped in a Dynamic component

DogOP•15mo ago

https://stackblitz.com/edit/solid-ssr-vite-qyuqxf?file=src%2Froutes%2Findex.tsx Ok I made a compileMarkdown util and used

jsx: true,

jsx: true,

and

jsxImportSource: 'solid-js/jsx-runtime',

jsxImportSource: 'solid-js/jsx-runtime',

, also removed async in there and then returned it inside a Dynamic component but it's still not working :/

high1•15mo ago

Well, it's not going to work like that That markdown string compiles to components, right?

high1•15mo ago

So, you need

high1•15mo ago

So let's say this is your server

high1•15mo ago

You are missing the client code So, it would look something like

high1•15mo ago

You can't just slap async on a component and call async functions there, OK? Judging by that, I would say that you need to iterate more on understanding how to handle async stuff in Solid. The same principle and slightly different code (but more verbose) would be applied for React also. I've decided to call the API inside onMount - this is not good, because why would I went for component mount when I can do this as soon as I start calculating? use something like createResource for fetching when component starts I'll release a version of solid-social as soon as I update the build process on GitHub

high1•15mo ago

solid-social-1.0.0.t...

high1•15mo ago

Here's a temporary build of 1.0 - you can just install it from a local fie npm i ./solid-social-1.0.0.tgz or path to folder with it Huh, I don't think mdx on demand is going to work

DogOP•15mo ago

oh ok, well thank you for trying to help me anyways

high1•15mo ago

I'll try to make it work - I might be missing something, and this mode is not documented in the best way

DogOP•15mo ago

I found this compileMarkdown function on github that might work. https://github.com/lukaprsina/fizika/blob/fe6dfd9344c4e6fe93821a6167144ff9a2478464/web/src/components/Markdown.tsx#L194C14-L194C14 I can't test it at the moment as my laptop is freezing every few seconds

GitHub

fizika/web/src/components/Markdown.tsx at fe6dfd9344c4e6fe93821a616...

fizika.sc-nm.si. Contribute to lukaprsina/fizika development by creating an account on GitHub.

high1•15mo ago

Compile works just fine This is solid-mathjax, using newer version of solid-social And it compiles your markdown using getResource function, and pretty much the same code that's on the @mdx-js website I'm not sure why, but the provider wrapping does not work like this in Solid Start Maybe I'm missing something? Went to look for docs and misclicked on the first result

high1•15mo ago

So, when the second part happens - the rendering of the component, it could very well be possible that this has to be done on onMount

high1•15mo ago

This is render - but a client side render - using compile So, when using this - you have to be careful when the parts are run You would compile the markdown on the server, and then you would have to run the markdown render client side, and make sure that the client side is up and the provider is defined

DogOP•15mo ago

I'm getting this error when trying this with and without the MDXProvider wrapper

high1•15mo ago

_provideComponents is an alias for useMDXComponents It comes from solid-jsx So, you're not doing something right import * as runtime from 'solid-jsx'

DogOP•15mo ago

Huh strange because I commented out the provider from solid-jsx

high1•15mo ago

that alias is set by @mdx-js What you'll get is that YouTube component is missing - since it's not in the provider If you set up things correctly

DogOP•15mo ago

oh 1 sec lemme try something ah yeah I was doing

import * as runtime from 'solid-js/jsx-runtime';

import * as runtime from 'solid-js/jsx-runtime';

instead of

import * as runtime from 'solid-jsx';

import * as runtime from 'solid-jsx';

probably missed it when I was copying imports from old non working ones So now it works client side it should be able to work compiling server side then running client side as you mentioned before

import { createServerData$ } from 'solid-start/server';
import { useRouteData } from '@solidjs/router';
import {
  createResource,
  Show,
  type Component,
  createSignal,
  createEffect
} from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { compile, run, } from '@mdx-js/mdx';
import * as runtime from 'solid-jsx';
import { MDXProvider } from 'solid-jsx';
import { YouTube, type YouTubeProps } from 'solid-social';

export const routeData = () => {
  return createServerData$(async () => {
    const markdown = `
    ## Title
    ---
    <YouTube youTubeId="C0DPdy98e4c" />
    `;
    const compiledMarkdown = String(
      await compile(markdown, {
        outputFormat: 'function-body',
        jsxImportSource: 'solid-js',
        providerImportSource: '#',
      })
    );
    return compiledMarkdown
  });
};

export default function serverSideRender() {
  const rd = useRouteData<typeof routeData>();

  const [compiledMarkdown, setCompiledMarkdown] = createSignal();

  createEffect(() => {
    setCompiledMarkdown(rd())
  })

  const getContent = async () => {
    const { default: Content } = (await run(compiledMarkdown(), runtime)) as unknown as { default: Component };
    return Content;
  };

  const [data] = createResource(compiledMarkdown, getContent);


  return (
    <MDXProvider
      components={{
        YouTube: (props:YouTubeProps) => <div><YouTube {...props} /></div>
      }}
    >
      <h1>Server Side Render</h1>
      <div>
        <Show when={!data.loading && data()}>
          <Dynamic component={data()} />
        </Show>
      </div>
    </MDXProvider>
  );
}

import { createServerData$ } from 'solid-start/server';
import { useRouteData } from '@solidjs/router';
import {
  createResource,
  Show,
  type Component,
  createSignal,
  createEffect
} from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { compile, run, } from '@mdx-js/mdx';
import * as runtime from 'solid-jsx';
import { MDXProvider } from 'solid-jsx';
import { YouTube, type YouTubeProps } from 'solid-social';

export const routeData = () => {
  return createServerData$(async () => {
    const markdown = `
    ## Title
    ---
    <YouTube youTubeId="C0DPdy98e4c" />
    `;
    const compiledMarkdown = String(
      await compile(markdown, {
        outputFormat: 'function-body',
        jsxImportSource: 'solid-js',
        providerImportSource: '#',
      })
    );
    return compiledMarkdown
  });
};

export default function serverSideRender() {
  const rd = useRouteData<typeof routeData>();

  const [compiledMarkdown, setCompiledMarkdown] = createSignal();

  createEffect(() => {
    setCompiledMarkdown(rd())
  })

  const getContent = async () => {
    const { default: Content } = (await run(compiledMarkdown(), runtime)) as unknown as { default: Component };
    return Content;
  };

  const [data] = createResource(compiledMarkdown, getContent);


  return (
    <MDXProvider
      components={{
        YouTube: (props:YouTubeProps) => <div><YouTube {...props} /></div>
      }}
    >
      <h1>Server Side Render</h1>
      <div>
        <Show when={!data.loading && data()}>
          <Dynamic component={data()} />
        </Show>
      </div>
    </MDXProvider>
  );
}

Thank you so much, it's working with server side compiling now

high1•15mo ago

Great. I'll update solid-jsx and solid-social next week, got some minor things to add. Most of the things here you could do without solid-jsx, as solid can now also be a jsxImportSource for @mdx-js, but there's no MDXProvider and useMDXComponents

Gaming

Programming

Anyone using solid-social with solid-markdown?