@aglyn/aglyn-node-renderer

Renders a stored Aglyn node tree as React. It is the one renderer the Besigner canvas, the console preview and a published site all mount. Install it if you want to display Aglyn node trees in your own React app.

Published to npm from the Aglyn monorepo. Versions follow semantic versioning.

Install

npm install @aglyn/aglyn-node-renderer

Peer dependencies:

• react

The package depends on @aglyn/shared-ui-theme and @aglyn/shared-ui-jsx, which peer on MUI (@mui/material, @mui/system and related packages). The renderer reads the active theme, so render it inside a theme provider.

What's in it

The tree components, from the outside in:

• TreeRoot (also exported as AglynNodeRenderer) takes the root node and provides the component set to everything below it.
• Trunk, Stem and Branch walk the tree. Stem wraps each node in an error boundary, so one failing node does not take the page down.
• Leaf renders one node. It looks up the node's componentId in the components registry of @aglyn/aglyn, resolves the node's sx against the active theme and color scheme, and applies element animation attributes.

Replacing a level:

• TreeRoot accepts TrunkComponent, StemComponent, BranchComponent and LeafComponent props. The Besigner editor uses this to swap in a leaf that adds selection and drag behavior. The RendererComponents context carries the chosen set.
• LeafSxTransformContext lets a host transform the merged sx of every leaf just before it reaches the element. A published site does not mount it.

Helpers:

• createAglynComponent(schema, component, options?) wraps a React component for registration: it returns the { schema, component } pair, with the component styled and wrapped in an error boundary.
• useAglynSiteTheme and createAglynSiteTheme build the theme a site renders with from a stored host theme.
• resolveSchemeSx, resolvePaletteVars, resolvePaletteVarsSx and related sx helpers, re-exported from @aglyn/aglyn.

Every file under src/lib is also reachable by subpath, for example @aglyn/aglyn-node-renderer/components/tree-root.

Usage

Register a component with the core, then render a node that names it:

import { components } from '@aglyn/aglyn'
import { TreeRoot } from '@aglyn/aglyn-node-renderer'
import { createTheme, ThemeProvider } from '@aglyn/shared-ui-theme'

const Box = (props) => <div {...props} />

components.registerComponent(Box, {
  $id: 'box',
  pluginId: 'example',
  displayName: 'Box',
})

const node = {
  $id: 'root',
  componentId: 'box',
  pluginId: 'example',
  props: { id: 'hello' },
  children: [],
}

export function Page() {
  return (
    <ThemeProvider theme={createTheme({ palette: { mode: 'light' } })}>
      <TreeRoot node={node} />
    </ThemeProvider>
  )
}

In Aglyn itself the components come from plugins such as @aglyn/plugins-mui, and the root node comes from the core's canvas (canvas.rootNode) after a stored NodesMap is loaded into it.

How it fits

This is the renderer scope of the package map: it imports the core (@aglyn/aglyn) and the generic @aglyn/shared-* packages, and nothing else. It knows no plugin; components reach it only through the core's component registry. @aglyn/besigner-ui, the tenant runtime and the plugins build on it.

License

Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/aglyn-node-renderer