@thefarce/vellum

v1.3.0

Published

10 months ago

Vellum is a custom web component (`<vellum-app>`) designed to manage modular web applications. It provides a lightweight foundation for loading, initializing, and rendering mods (modules), using an action-driven system for decoupled communication. Whether

0High
0Medium
0Low

sirrobert

Vellum

Vellum is a custom web component (<vellum-app>) designed to manage modular web applications. It provides a lightweight foundation for loading, initializing, and rendering mods (modules), using an action-driven system for decoupled communication. Whether you're building a small tool or a large-scale app, Vellum offers flexibility and extensibility without enforcing a rigid structure.

Key Features

Dynamic Mod Loading: Add mods at runtime with automatic detection.
Action System: Enables loose coupling via event-driven message passing.
Flexible Rendering: Supports custom renderers for any content type (strings, DOM nodes, frameworks).
Minimal Core: Focuses on mod orchestration, leaving layout and logic to consumers.

Quick Start

Here’s a minimal example to get Vellum running:

<!DOCTYPE html>
<html>
<head>
  <title>Vellum Demo</title>
</head>
<body>
  <vellum-app>
    <vellum-mod src="/my-mod.mjs" name="my-mod"></vellum-mod>
  </vellum-app>
  <script type="module">
    import Vellum from 'docs/src/vellum.mjs';
    customElements.define('vellum-app', Vellum);
  </script>
</body>
</html>

// my-mod.mjs
export async function init(toolkit) {
  toolkit.dispatchAction({
    type: 'action:register',
    detail: {
      actionType: 'layout:get-active',
      modName: 'my-mod',
      handler: (detail) => detail.callback({ content: '<div>Hello, Vellum!</div>' })
    }
  });
}

Result: Loads a mod that displays "Hello, Vellum!" in the shadow DOM.

Installation

Via npm (assuming Vellum is published):

npm install vellum

Then import:

import Vellum from 'vellum';
customElements.define('vellum-app', Vellum);

Direct Script:

<script type="module" src="/path/to/vellum.mjs"></script>

Define the element manually if needed.

Understanding Mods : Learn about Vellum’s building blocks.
Layout Management : Explore rendering and content retrieval.
Action System : Dive into decoupled communication.
Toolkit API : Understand mod interaction tools.
Advanced Topics : Tackle dynamic loading, performance, and more.
Examples and Tutorials: See Vellum in action.
API Reference : Detailed technical specs.
Documentation Outline : Overview of this guide.

Next Steps

Create a Mod: Start with Understanding Mods to build your first mod.
Customize Rendering: Check Layout Management to set up a custom renderer.
Leverage Actions: Explore Action System to connect mods without coupling.
Go Advanced: Dive into Advanced Topics for runtime mod loading and optimization.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vellum

Key Features

Quick Start

Installation

Table of Contents

Next Steps