Rynt Launcher

Appearance

Первое расширение: Hello World ​

Минимальный путь: страница Hello World и пункт в боковом меню лаунчера.

Рекомендуемый способ: CLI ​

Установите шаблон одной командой (@rynt/create-extension):

bash
npm create @rynt/extension@latest my-hello
cd my-hello
npm install
npm run dev

В лаунчере: Управление расширениями → включить dev-hub → в меню появится ваш пункт.

Сборка релиза:

bash
npm run build

Получите .ryntextension для установки — сборка и установка.

Обзор всех npm-пакетов: npm-пакеты экосистемы.

Что внутри шаблона ​

Ниже — те же части, если собираете проект вручную или правите сгенерированный код.

Vue-компонент ​

src/HelloPage.vue

vue
<script setup lang="ts"></script>

<template>
  <div style="padding: 1.5rem">
    <h1 style="font-size: 1.25rem">Hello World</h1>
    <p style="margin-top: 0.5rem; opacity: 0.85">Моё первое расширение.</p>
  </div>
</template>

Точка входа ​

src/index.ts

ts
import { markRaw } from 'vue';
import {
  defineRyntExtension,
  resolvedNavigationPath,
} from '@rynt/sdk/extension';

import HelloPage from './HelloPage.vue';

const EXTENSION_ID = '@acme/hello-world';

export default defineRyntExtension((ctx) => {
  const routePath = resolvedNavigationPath(EXTENSION_ID, 'hello');

  ctx.registerRegistryEntry({
    registryId: 'core.page',
    key: 'hello',
    value: {
      path: 'hello',
      title: 'Hello',
      component: markRaw(HelloPage),
      resolvedRoutePath: routePath,
    },
    order: 100,
  });

  ctx.registerRegistryEntry({
    registryId: 'core.nav',
    key: 'hello',
    value: {
      link: routePath,
      label: 'Hello',
      icon: 'home',
    },
    order: 100,
  });
});

EXTENSION_ID должен совпадать с manifest.id в Vite-конфиге.

  • core.page — экран (компонент и маршрут).
  • core.nav — пункт меню; link = resolvedRoutePath страницы.
  • resolvedNavigationPath(extensionId, 'hello') — стабильный URL внутри области расширения.

Vite и манифест ​

vite.config.ts (@rynt/extension-build):

ts
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { ryntExtensionViteConfig } from '@rynt/extension-build';

const root = path.dirname(fileURLToPath(import.meta.url));

export default ryntExtensionViteConfig({
  root,
  manifest: {
    id: '@acme/hello-world',
    name: 'Hello World',
    description: 'Демо-расширение',
    main: 'index.js',
    engines: { rynt: '>=0.9.0' },
    extensionApi: '1',
    icon: './assets/icon.png',
    author: 'Acme Team',
  },
});

tsconfig.json и env.d.ts — стандарт Vue 3 + Vite (declare module '*.vue').

Зависимости (вручную) ​

bash
npm install vue
npm install -D @rynt/sdk @rynt/extension-build vite @vitejs/plugin-vue typescript vue-tsc

Скрипты ​

json
{
  "scripts": {
    "build": "vite build && rynt-extension-pack",
    "dev": "vite build --watch"
  }
}

Дальше ​