solar

Solar Framework Rules

Solar (solarbuild) is a no-build, browser-native UI framework designed for AI-generated code. It runs directly in the browser via CDN or npm — no bundler, no JSX, no compile step.

Installation

<!-- CDN (browser) -->
<script type="module">
  import { defineComponent, mountComponent, h, registry, Types } from 'https://cdn.jsdelivr.net/npm/solarbuild/framework/index.js'
</script>

// npm
import { defineComponent, mountComponent, h, registry, Types } from 'solarbuild'

Core pattern

Always use defineComponent() to define components — never plain functions. Always register with registry.register() before mounting.

import { defineComponent, mountComponent, h, registry, Types } from 'solarbuild'

const Button = defineComponent({
  name: 'Button',
  props: {
    label: { type: Types.string, required: true },
    onClick: { type: Types.function, required: true },
  },
  render({ label, onClick }) {
    return h('button', { onclick: onClick }, label)
  },
})

registry.register(Button)
mountComponent(Button, { label: 'Click me', onClick: () => alert('hi') }, document.getElementById('app'))

Types

Available types from Types: string, number, boolean, function, object, array, any, slot

Props can be:

• { type: Types.string, required: true } — required
• { type: Types.string, default: 'hello' } — optional with default
• { type: Types.string, enum: ['sm', 'md', 'lg'] } — enum constraint

Structured errors

When props are wrong, Solar throws a ContractError with a fix field — always read and act on it:

try {
  mountComponent(Button, { label: 42 }, el)
} catch (e) {
  if (e.name === 'ContractError') {
    console.log(e.fix) // "Pass a string value for 'label'"
    // correct the props and retry
  }
}

Registry and agent discovery

Agents should call registry.manifest() to discover available components and their prop schemas before mounting:

const manifest = registry.manifest() // returns JSON string
const components = JSON.parse(manifest)
// [{ name: 'Button', props: { label: { type: 'string', required: true }, ... } }]