@rulecms/source-components-svelte

Svelte source components for RuleCMS widgets — the Svelte counterpart of @rulecms/source-components-react.

Provides the same default-library type ids. Register as the default library on @rulecms/widget-svelte:

libraries: { default: sourceComponents }

Installation

npm install @rulecms/widget-svelte @rulecms/source-components-svelte

Usage

<script>
  import { RuleCMSWidget, RuleCMSWidgetProvider } from '@rulecms/widget-svelte';
  import * as sourceComponents from '@rulecms/source-components-svelte';

  const token = 'your-token';
  const publishedKey = 'your-widget-key';
  const libraries = { default: sourceComponents };
</script>

<RuleCMSWidgetProvider {token} {libraries}>
  <RuleCMSWidget {publishedKey} />
</RuleCMSWidgetProvider>

Components

| Type | Description | |---|---| | r-text | Text in a configurable enclosing tag, with inline links | | cloudinary-advanced-image | Responsive Cloudinary image | | r-video | Cloudinary video with poster | | r-icon | A single Lucide <svg> | | r-button | A <button>, or an <a> when it links somewhere, styled by preset | | r-divider | A single <hr> separating two sections | | r-embed | A third-party <iframe> from a pasted URL | | r-list | A <ul> or <ol>, one item per authored line | | r-accordion | A <details>/<summary> disclosure — a summary that expands to its detail, with no JavaScript | | r-mount | A slot for a host-app component registered on RuleCMSWidget mounts by name |

The package also exports the library contract that @rulecms/widget-svelte consumes:

• manifest, components, editor
• getSourceComponentsPlugin(), getComponentMetadataForEditing(), getPreviewComponents()
• link helpers (isSafeHref, resolveLinkAttributes, parseInlineLinkMarkers)
• button presets, list/embed/accordion allowlists

Icons

r-icon renders geometry carried on its own attribute rather than looking a name up at render time. The composer stamps that value when the author picks an icon.

Name resolution lives behind a separate entry point that only the composer should import:

import { buildIconAttributeValue, searchIconNames } from '@rulecms/source-components-svelte/icon-registry';

Host onClick

r-button reads onClick from widgetInstanceProps. Address the instance on RuleCMSWidget componentProps by column id.

Develop locally

cd source-components-svelte
npm install
npm test
npm run lint
npm run typecheck
npm run build

Publishing

Follow __docs__/RUNBOOK_version-bump-and-release.md.

Push the version tag. GitHub Actions publishes via trusted publishing (.github/workflows/publish.yml). Do not run npm run release or npm publish locally except for the first-ever version of a new package.

git push && git push --tags
npm view @rulecms/source-components-svelte version

License

Proprietary — RuleCMS, LLC