Variable Interpolation?
Apestein opened this issue · comments
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.
Try using https://www.npmjs.com/package/dedent
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
.
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?
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 thecode
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
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.
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.
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?
Yeah I just did fresh clone/install with
npm i
and had no gaps. I think that bug could be related togrid: true
option. If you passgrid: false
in therehypePrettyCode
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. 😕
Maybe Node.js version? I'm using v20.10.0.
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?
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.
Can't seem to fix it on windows no matter what I try though. Thanks for your help anyways.