Skip to content

Commit

Permalink
fix: suspense in road code string
Browse files Browse the repository at this point in the history
  • Loading branch information
@junghyeonsu
junghyeonsu committed Oct 2, 2024
1 parent dbb9d6b commit 7f0e9d7
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 51 deletions.
4 changes: 3 additions & 1 deletion component-docs/src/components/ComponentExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ export function ComponentExample(props: ComponentExampleProps) {
{Preview}
</div>
</Tabs.Tab>
<Tabs.Tab>{Code}</Tabs.Tab>
<Tabs.Tab>
<React.Suspense fallback={null}>{Code}</React.Suspense>
</Tabs.Tab>
</Tabs>
</React.Suspense>
</ErrorBoundary>
Expand Down
89 changes: 47 additions & 42 deletions component-docs/src/components/Installation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Code, Pre, Steps, Tabs } from "nextra/components";

import type { ComponentRegistrySchema } from "@/schemas/component";
import * as React from "react";
import ErrorBoundary from "./ErrorBoundary";

interface InstallationProps {
name: string;
Expand Down Expand Up @@ -44,49 +45,53 @@ export function Installation(props: InstallationProps) {
}, []);

return (
<React.Suspense fallback={<div>Loading...</div>}>
<Tabs items={["CLI", "Manual"]}>
<Tabs.Tab>
<Pre hasCopyCode data-language="sh" data-theme="default">
<Code lang="sh" data-language="sh" data-theme="default">
<span className="line">
<span style={{ color: "var(--shiki-token-function)" }}>npx </span>
<span style={{ color: "var(--shiki-token-string)" }}>@seed-design/cli@latest </span>
<span style={{ color: "var(--shiki-token-string)" }}>add </span>
<span style={{ color: "var(--shiki-token-string)" }}>{json?.name}</span>
</span>
</Code>
</Pre>
</Tabs.Tab>
<Tabs.Tab>
<Steps>
{json?.dependencies && (
<>
<Heading3>의존성 설치</Heading3>
<Pre hasCopyCode lang="sh" data-language="sh" data-theme="default">
<Code lang="sh" data-language="sh" data-theme="default">
<span className="line">
<span style={{ color: "var(--shiki-token-function)" }}>npm </span>
<span style={{ color: "var(--shiki-token-string)" }}>install </span>
<span style={{ color: "var(--shiki-token-string)" }}>
{json?.dependencies.join(" ")}
<ErrorBoundary>
<React.Suspense fallback={<div>Loading...</div>}>
<Tabs items={["CLI", "Manual"]}>
<Tabs.Tab>
<Pre hasCopyCode data-language="sh" data-theme="default">
<Code lang="sh" data-language="sh" data-theme="default">
<span className="line">
<span style={{ color: "var(--shiki-token-function)" }}>npx </span>
<span style={{ color: "var(--shiki-token-string)" }}>
@seed-design/cli@latest{" "}
</span>
<span style={{ color: "var(--shiki-token-string)" }}>add </span>
<span style={{ color: "var(--shiki-token-string)" }}>{json?.name}</span>
</span>
</Code>
</Pre>
</Tabs.Tab>
<Tabs.Tab>
<Steps>
{json?.dependencies && (
<>
<Heading3>의존성 설치</Heading3>
<Pre hasCopyCode lang="sh" data-language="sh" data-theme="default">
<Code lang="sh" data-language="sh" data-theme="default">
<span className="line">
<span style={{ color: "var(--shiki-token-function)" }}>npm </span>
<span style={{ color: "var(--shiki-token-string)" }}>install </span>
<span style={{ color: "var(--shiki-token-string)" }}>
{json?.dependencies.join(" ")}
</span>
</span>
</span>
</Code>
</Pre>
</>
)}
</Code>
</Pre>
</>
)}

<Heading3>아래 코드를 복사 후 붙여넣고 사용하세요</Heading3>
<React.Suspense fallback={<div>Loading...</div>}>
{json?.registries.map((registry) => {
const MDX = getComponentMDX(registry.name.split(".")[0]);
return <div key={registry.name}>{MDX}</div>;
})}
</React.Suspense>
</Steps>
</Tabs.Tab>
</Tabs>
</React.Suspense>
<Heading3>아래 코드를 복사 후 붙여넣고 사용하세요</Heading3>
<React.Suspense fallback={<div>Loading...</div>}>
{json?.registries.map((registry) => {
const MDX = getComponentMDX(registry.name.split(".")[0]);
return <div key={registry.name}>{MDX}</div>;
})}
</React.Suspense>
</Steps>
</Tabs.Tab>
</Tabs>
</React.Suspense>
</ErrorBoundary>
);
}
21 changes: 13 additions & 8 deletions component-docs/src/components/StackflowExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as changeCase from "change-case";
import { Stackflow } from "./Stackflow";

import type { ActivityComponentType } from "@stackflow/react/future";
import ErrorBoundary from "./ErrorBoundary";

interface StackflowExampleProps {
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
Expand Down Expand Up @@ -43,13 +44,17 @@ export function StackflowExample(props: StackflowExampleProps) {
}, [kebabName]);

return (
<React.Suspense fallback={<div>Loading...</div>}>
<Tabs items={["미리보기", "코드"]}>
<Tabs.Tab>
<Stackflow Activity={activity} />
</Tabs.Tab>
<Tabs.Tab>{Code}</Tabs.Tab>
</Tabs>
</React.Suspense>
<ErrorBoundary>
<React.Suspense fallback={<div>Loading...</div>}>
<Tabs items={["미리보기", "코드"]}>
<Tabs.Tab>
<Stackflow Activity={activity} />
</Tabs.Tab>
<Tabs.Tab>
<React.Suspense fallback={null}>{Code}</React.Suspense>
</Tabs.Tab>
</Tabs>
</React.Suspense>
</ErrorBoundary>
);
}

0 comments on commit 7f0e9d7

Please sign in to comment.