mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: omit Prettier from client JS

Browse source
This commit is contained in:
Eric Liu 2024-11-24 12:14:07 -08:00
commit 69d51872a5
5 changed files with 4019 additions and 918 deletions
Download patch file Download diff file Expand all files Collapse all files

54
docs/src/components/ComponentApi.svelte
View file

@ -127,7 +127,6 @@
<svelte:component
this={AsyncPreviewTypeScript}
type="inline"
noFormat
code={typeMap[type]}
/>
</div>
@ -138,7 +137,6 @@
<svelte:component
this={AsyncPreviewTypeScript}
type="inline"
noFormat
code={type}
/>
</div>
@ -152,7 +150,6 @@
<svelte:component
this={AsyncPreviewTypeScript}
type="inline"
noFormat
code={type}
/>
</div>
@ -179,8 +176,7 @@
<svelte:component
this={AsyncPreviewTypeScript}
type="inline"
noFormat
code={prop.value.replace(/\s+/g, " ")}
code={prop.value}
/>
{/if}
{:else if prop.value === undefined}
@ -189,7 +185,6 @@
<svelte:component
this={AsyncPreviewTypeScript}
type="inline"
noFormat
code={prop.value}
/>
{/if}
@ -220,21 +215,41 @@
<h2 id="typedefs">Typedefs</h2>
{#if component.typedefs.length > 0}
<svelte:component
this={AsyncPreviewTypeScript}
code={component.typedefs.map((t) => t.ts).join(";\n\n")}
/>
<div class="my-layout-01-03">
<svelte:component
this={AsyncPreviewTypeScript}
code={component.typedefs.map((t) => t.ts).join("\n")}
/>
</div>
{:else}
<p class="my-layout-01-03">No typedefs.</p>
{/if}
<h2 id="slots">Slots</h2>
{#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03">
{#each component.slots as slot (slot.name)}
<ListItem>{slot.default ? "default" : slot.name}</ListItem>
{/each}
</UnorderedList>
<StructuredList class="my-layout-01-03">
<StructuredListHead>
<StructuredListRow>
<StructuredListCell>Slot name</StructuredListCell>
<StructuredListCell>Slot detail</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each component.slots as slot (slot.name)}
<StructuredListRow>
<StructuredListCell>
<strong>{slot.default ? "default" : slot.name}</strong>
</StructuredListCell>
<StructuredListCell>
<svelte:component
this={AsyncPreviewTypeScript}
code={slot.slot_props}
/>
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
<p class="my-layout-01-03">No slots.</p>
{/if}
@ -273,7 +288,7 @@
<StructuredListCell>
<svelte:component
this={AsyncPreviewTypeScript}
code={"type EventDetail = " + event.detail}
code={event.detail}
/>
</StructuredListCell>
<StructuredListCell>
@ -317,12 +332,7 @@
</div>
{/if}
{#if full_code}
<svelte:component
this={AsyncPreviewTypeScript}
code={full_code.startsWith("()")
? `const ${full_code_prop} = ` + full_code
: full_code}
/>
<svelte:component this={AsyncPreviewTypeScript} code={full_code} />
{/if}
</Modal>

3
docs/src/components/Preview.svelte
View file

@ -35,7 +35,8 @@
{/if}
<div class="preview-viewer" class:framed>
{#if framed}
<iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}></iframe>
<iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}
></iframe>
{:else}
<slot />
{/if}

27
docs/src/components/PreviewTypeScript.svelte
View file

@ -1,30 +1,14 @@
<script>
export let code = "";
export let noFormat = false;
export let type = "multi";
import { CodeSnippet } from "carbon-components-svelte";
import { format } from "prettier/standalone";
import { highlight } from "prismjs";
import "prismjs/components/prism-typescript";
import plugin from "prettier/parser-typescript";
import copy from "clipboard-copy";
let formattedCode = "";
let highlightedCode = "";
$: {
try {
formattedCode = noFormat
? code
: format(code, { parser: "typescript", plugins: [plugin] });
} catch (e) {
formattedCode = code;
}
}
$: highlightedCode = highlight(
formattedCode,
code,
Prism.languages.typescript,
"typescript",
);
@ -32,19 +16,14 @@
{#if type === "multi"}
<div class="code-override">
<CodeSnippet type="multi" code={formattedCode} {copy}>
<CodeSnippet type="multi" {code} {copy}>
{@html highlightedCode}
</CodeSnippet>
</div>
{/if}
{#if type === "inline"}
<CodeSnippet
type="inline"
class="code-override-inline"
code={formattedCode}
{copy}
>
<CodeSnippet type="inline" class="code-override-inline" {code} {copy}>
{@html highlightedCode}
</CodeSnippet>
{/if}