🔓 Auth Offline
Components Library Operations CopyPasteComposer

CopyPasteComposer

Build copy-ready file, dependency, and usage bundles from catalogue metadata.

Live demo

01

Catalogue handoff

Copy-paste composer

Choose a component and build the exact source, docs, demo, dependency, and usage bundle to hand to another repo.

Sidebar demo
Include

Selected files

3
  • source src/lib/components/Sidebar.svelte required
  • docs src/lib/components/Sidebar.md
  • demo src/routes/sidebar/+page.svelte

Command block

5
mkdir -p ./src/lib/components
mkdir -p ./src/routes/sidebar
cp src/lib/components/Sidebar.svelte ./src/lib/components/Sidebar.svelte
cp src/lib/components/Sidebar.md ./src/lib/components/Sidebar.md
cp src/routes/sidebar/+page.svelte ./src/routes/sidebar/+page.svelte

Checklist

  1. Confirm the target app is already on Svelte 5.
  2. Copy 3 selected files into matching project paths.
  3. Paste the usage snippet into the target route.
  4. Review the docs for props, accessibility notes, and edge cases.
  5. Open the demo route and remove sample-only data before shipping.
  6. Run or port the selected tests after adapting imports.

Usage

<script lang="ts">
  import Sidebar from '$lib/components/Sidebar.svelte';

  const items = [
    { label: 'Dashboard', href: '/dashboard', icon: '▤' },
    { label: 'Reports', href: '/reports', icon: '📊', children: [
      { label: 'Sales', href: '/reports/sales', icon: '•' }
    ] }
  ];
</script>

<Sidebar {items} activeHref="/dashboard" title="Acme" />

Implementation

02
CopyPasteComposer.svelte 
<script lang="ts">
  import CopyPasteComposer from '$lib/components/CopyPasteComposer.svelte';
</script>
​
<CopyPasteComposer {entries} />

CopyPasteComposer keeps catalogue transformation logic in module exports, then renders the same derived file list, command block, usage snippet, and checklist in the interactive view.

Logic explainer

03

Purpose

CopyPasteComposer turns the component catalogue into a practical handoff surface. A visitor chooses one catalogue entry, toggles the supporting artefacts they want, and receives the files, dependency command, copy commands, usage snippet, and final checklist in one place.

Data Model

The component consumes catalogue-shaped entries with source, docs, demo, dependencies, relatedFiles, and usage. It does not read the filesystem directly; routes pass the catalogue rows in, which keeps the component testable and usable in static contexts.

Helper Exports

  • deriveSelectedFiles(entry, options) returns the ordered source/docs/demo/test/related file list for the current toggles.
  • deriveInstallCommands(entry, options) returns dependency, directory, and copy commands for the selected file list.
  • testCandidatesFor(entry) derives colocated .test.ts, .test.svelte, and TestHarness.test.svelte candidates from Svelte source paths.
  • checklistFor(entry, options) turns the selected bundle into implementation review steps.

Behaviour Notes

The source component is always included because the bundle is meaningless without it. Docs, demo route, tests, and related files are optional so the receiving project can choose a minimal install or a fuller migration pack.

Test files listed in relatedFiles are treated as tests when the Tests toggle is enabled. Non-test relatedFiles stay behind the Related files toggle, which prevents helper utilities from being silently bundled unless the user asks for them.

API

04
ExportTypeDescription
deriveSelectedFiles(entry, options) => CopyPasteSelectedFile[]Builds the ordered source/docs/demo/tests/related file bundle.
deriveInstallCommands(entry, options) => string[]Builds dependency, directory, and copy commands for the selected bundle.
CopyPasteComposerSvelte componentRenders selector controls, command block, selected files, checklist, and usage.