Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@skaldapp/runtime) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Skald Runtime

Skald Runtime is a Vue.js-based runtime environment that serves as the execution layer for skald applications. This project provides the core infrastructure to render and manage Vue applications with advanced features like dynamic component loading, SEO optimization, and intersection observer tracking.

Features

Vue 3 Powered: Built on top of Vue 3 with Composition API
Dynamic Component Loading: Components are dynamically loaded using the @skaldapp/loader-sfc package
SEO Optimized: Built-in SEO meta management using @unhead/vue
Intersection Tracking: Uses Intersection Observer API to track component visibility
UnoCSS Integration: Utility-first CSS styling with UnoCSS
Font Loading: Dynamic web font loading capabilities
Icon Support: Built-in Iconify integration for SVG icons
Code Splitting: Dynamic imports for efficient loading

Architecture

The runtime follows a monolithic architecture with several key components:

Main Application: The main.ts entry point initializes the Vue app, router, and UnoCSS runtime
State Management: Uses reactive stores in the src/stores/monolit.ts file to manage application state
Dynamic Loading: Components are dynamically loaded based on JSON configuration files
Smart Routing: Intelligent scroll management that updates routes based on component visibility

Dependencies

Vue 3 (v3.5.22+)
Vue Router (v4.6.3+)
UnoCSS runtime for styling
VueUse for composable utilities
Iconify for icon management
@skaldapp/shared and @skaldapp/loader-sfc for ecosystem integration

Building and Running

Prerequisites

Node.js (latest version)
pnpm (or npm/yarn)

Commands

npm run build - Builds the project using Vite and TypeScript
npm run lint - Lints the codebase using ESLint

Build Configuration

The project uses Vite for bundling with a custom configuration:

Externalizes Vue, Vue Router, and loader dependencies
Creates manual chunks for shared libraries and UnoCSS
Uses vite-plugin-static-copy to copy external dependencies to the dist folder
Generates a manifest file that includes external dependencies

Integration with skald Ecosystem

This runtime is designed to work with the broader skald ecosystem:

Receives data from index.json and fonts.json files
Uses @skaldapp/shared for common utilities
Dynamic components loaded from ./pages/ directory
Uses @skaldapp/configs for shared Vite, TypeScript, and UnoCSS configurations

File Structure

src/
├── stores/          # State management stores
├── views/           # Page view components
├── App.vue          # Root application component
├── env.d.ts         # TypeScript environment declarations
├── main.ts          # Application entry point
└── style.css        # Global styles

License

This project is licensed under the AGPL-3.0-or-later license.