Variable Interpolation?

[Apestein]

import { Code } from "./code"

const rawCode = `
\`\`\`tsx
export default function Foo() {
  return (
    <p>foo</p>
  )
}
\`\`\`
`

export function ComponentPreview({
  Component,
  code,
}: {
  Component: () => JSX.Element
  code: string
}) {
  const rawCode2 = `
  \`\`\`tsx
  ${code}
  \`\`\`
  `

  return (
    <div className="space-y-3">
      <Component />
      <Code code={rawCode} />
      <Code code={rawCode2} />
      <pre>{code}</pre>
    </div>
  )
}

Anyway to to use variable interpolation? rawCode is properly formatted but rawCode2 is not. When I use pre with ${code} you can see that code is properly formatted. From next.js RSC example.

[atomiks]

Try using https://www.npmjs.com/package/dedent

[Apestein]

Try using https://www.npmjs.com/package/dedent

Dedent didn't work but I tried something else and it worked but now there is a new problem.

import { Code } from "./code"
import dedent from "dedent"

const rawCode = `
\`\`\`tsx
export default function Foo() {
  return <p>foo</p> 
}
\`\`\`
`

export function ComponentPreview({
  Component,
  code,
}: {
  Component: () => JSX.Element
  code: string
}) {
  const rawCode2 = "```tsx\n" + code + "```"
  return (
    <div className="space-y-3">
      <Component />
      <Code code={rawCode} />
      <Code code={rawCode2} />
      <pre>{rawCode2}</pre>
    </div>
  )
}

There is something wrong with how the library is parsing the strings, because pre works perfectly fine. The behavior should be like pre.

[atomiks]

This has no issues in the /rsc folder in this repo's /website:

import * as React from 'react';
import { Code } from '@/app/code';

const test = `export function Comp1() {
  return <p>Comp1</p>;
}`;

function Preview({ code }: { code: string }) {
  const raw = `\`\`\`tsx\n${code}\n\`\`\``;
  return <Code code={raw} />;
}

export default async function ServerComponentPage() {
  return <Preview code={test} />;
}

Can you show the callsite of <ComponentPreview>? How are you passing the string to the code prop?

[Apestein]

This has no issues in the /rsc folder in this repo's /website:

import * as React from 'react';
import { Code } from '@/app/code';

const test = `export function Comp1() {
  return <p>Comp1</p>;
}`;

function Preview({ code }: { code: string }) {
  const raw = `\`\`\`tsx\n${code}\n\`\`\``;
  return <Code code={raw} />;
}

export default async function ServerComponentPage() {
  return <Preview code={test} />;
}

Can you show the callsite of <ComponentPreview>? How are you passing the string to the code prop?

All that matters is that the code comes in properly formatted. It doesn't matter how I'm passing in the string. I know the code is properly formatted because it works with pre and by console.log. I went ahead and put it in a repo so you can see for yourself.

https://github.com/Apestein/next-mdx-demo/blob/main/app/component-demo/%5Bslug%5D/page.tsx

[atomiks]

I don't see any formatting issues on my side:

http://localhost:3000/component-demo/code

---

Try investigating the CSS in DevTools and see what's causing the gap for you? I don't understand why it would be happening.

[Apestein]

I don't see any formatting issues on my side:

http://localhost:3000/component-demo/code

Try investigating the CSS in DevTools and see what's causing the gap for you? I don't understand why it would be happening.

So it worked without you changing anything? As you can see, gaps are just <span> with one space it seems. I should mention I'm on windows also, I don't see how this can be possible either.

[atomiks]

Yeah I just did fresh clone/install with npm i and had no gaps. I think that bug could be related to grid: true option. If you pass grid: false in the rehypePrettyCode options, do they disappear?

I don't understand why it doesn't happen for me though. Maybe different dependencies versions? Have you tried a fresh install?

[Apestein]

Yeah I just did fresh clone/install with npm i and had no gaps. I think that bug could be related to grid: true option. If you pass grid: false in the rehypePrettyCode options, do they disappear?

I don't understand why it doesn't happen for me though. Maybe different dependencies versions? Have you tried a fresh install?

grid: false didn't do anything. And yes, I just deleted the whole app and clone it again. Didn't fix. 😕

[atomiks]

Maybe Node.js version? I'm using v20.10.0.

[atomiks]

Ugh hang on. I definitely think it's a Windows vs. Mac thing. Windows has different behavior for line breaks I think.

const fileContent = fs.readFileSync(filePath, "utf8")

Try replacing \r or something here with \n or removing unnecessary breaks?

[Apestein]

Ugh hang on. I definitely think it's a Windows vs. Mac thing. Windows has different behavior for line breaks I think.

const fileContent = fs.readFileSync(filePath, "utf8")

Try replacing \r or something here with \n or removing unnecessary breaks?

Definitely a windows thing, I just switch over to linux and now it's working.

[Apestein]

Can't seem to fix it on windows no matter what I try though. Thanks for your help anyways.