Переиспользуемый компонент Svelte: чтобы никому не было больно

Лучше всего воспользоваться специальным адаптером(он же подойдет и для аналогичного встраивания в Vue).

Тогда код получится таким(см. пример на Codesandbox):

import React from "react";
import ReactDOM from "react-dom";
import toReact from "svelte-adapter/react";
import  Clock from "svelte-clock-demo";

const SvelteClock = toReact(Clock);

const App = () => {
  return (
    <div>
      <SvelteClock background="white" color="black" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Вероятность того, что где-то будет собираться новый проект на Svelte2 стремится к нулю. Можно там указывать версию(скопировать с соответствующего поля в devDependency), поскольку даже в текущих версиях возможны вариации, но это может привести к тому, что те кто будут использовать комопонент импортируя из "svelte" поля(а таких большинство), получат, что скомпилированый компонент будет импортировать фунции из другой версии Svelte, что может вызвать проблемы, поскольку получится, что у каждого компонента своя версия рантайма, что может конфликтовать(я сталкивался).
Со звездочкой в peer-зависимости аналогичные проблемы возможны у тех кто использует ES6 модули. Но скорее всего, ничего страшного пока не будет, рантайм фреймворка останется в единственном экземпляре, даже если несколько компонентов будут использовать.

JSDOC в Svelte-комопнентах не пользуется особой популярностью, т.к., например, в ES6 модуле он скорее всего будет утрачен при компиляции. Полезнее создать index.d.ts файл в папке проекта(пакета), где описать какие пропсы экспортирует компонент. Этот файл подхватится IDE и будет давать подсказки независимо используется ли модуль или голый компонент svelte. Ну и те, кто пишет на typescript смогут использовать ваш комопнент полноценно, с типами.

Например для комопонента часов из статьи файл index.d.ts будет иметь примерно такой вид:

export default class {
    $$prop_def: {
      /**
       * Color of sign
       * @default "white"
       */
      color?: string;

      /**
       * Card background color
       * @default "black"
       */
      background?: string;

      /**
       * Border color
       * @default "grey"
       */
      border?: string;
    };
  }