Vyriy

@vyriy/render

Client rendering and hydration helpers for Vyriy UI surfaces.

Purpose

Use this package when a Vyriy project needs a small focused module for render behavior.

Vyriy packages are intentionally small. The goal is to keep the public API explicit, easy to test, and easy to compose with the rest of the Vyriy ecosystem.

Install

With npm:

npm install @vyriy/render

With Yarn:

yarn add @vyriy/render

Usage

import { render } from '@vyriy/render';
import { ProfileCard } from './profile-card.js';

render(ProfileCard, {
  target: '#app',
  props: { name: 'Vyriy' },
  shadow: true,
});

Public API

The package is expected to expose the following main surface:

  • render
  • hydrate
  • mount
  • customElements helpers
  • data-rendered marker

Parameters and options

  • element — DOM element or selector used as render target.
  • component — React component or render function.
  • props — Serializable props passed into the component.
  • shadow — When true, renders inside Shadow DOM.
  • renderedAttribute — Hydration marker. Vyriy convention: data-rendered.

Examples

Minimal usage

import * as module from '@vyriy/render';

console.info(module);

Use inside a Vyriy package

// packages/example/index.ts
export { default as example } from '@vyriy/render';

Keep the boundary explicit

// Prefer importing from the package root unless a documented subpath is required.
import {} from /* named export */ '@vyriy/render';

Notes

  • Keep configuration close to the package that owns it.
  • Prefer explicit options over hidden global state.
  • Keep examples small enough to copy into tests or Storybook docs.
  • When adding a new public export, document it in this README and add a focused test.

Related packages

  • @vyriy/config for environment-driven options.
  • @vyriy/script for readable operational flows.
  • @vyriy/handler and @vyriy/server when the package participates in runtime handling.