@loodit/website-rendering

Framework-neutral configuration resolution shared by the Loodit React website builder preview and the Next.js published website runtime.

The package deliberately contains no React, Next.js, JSX, DOM, or CSS imports. It owns only the rules that turn a versioned website node, site styles, and a breakpoint into one resolved property map.

Local development

Both consumers currently install the same packed 0.1.0 artifact from their checked-in vendor/ directories:

    "@loodit/website-rendering": "file:vendor/loodit-website-rendering-0.5.0.tgz"

The tarballs have the same integrity checksum and keep each independently deployed repository self-contained until the private registry is connected.

Run its contract tests with:

npm test

Production publication

Before the application repositories deploy independently, publish this package to the private Loodit registry and replace the local file: dependency in both consumers with the same pinned version, for example 0.1.0. CI must provide a read token for that registry. Do not allow the two applications to float on different resolver versions.

API

import {
  createButtonStyles,
  createFormFieldStyles,
  createGridStyles,
  createLogoStyles,
  createSectionStyles,
  createStackStyles,
  normalizeSiteStyles,
  resolveNodeProps,
} from "@loodit/website-rendering";

const siteStyles = normalizeSiteStyles(savedSiteStyles);
const props = resolveNodeProps({
  node,
  breakpoint: "desktop",
  siteStyles,
});

const formFieldStyles = createFormFieldStyles(props);
const logoStyles = createLogoStyles(props);
const buttonStyles = createButtonStyles(props);
const sectionStyles = createSectionStyles(props);
const stackStyles = createStackStyles(props);
const gridStyles = createGridStyles(props);

Semantic component-part styles are shared as plain style objects. Renderers retain their framework-specific markup while consuming the same values for parts such as form labels, required markers, controls, and help text. Logo containers, links, images, and wordmarks use the same contract, including configured dimensions, positioning, alignment, spacing, and typography.

Buttons and the section/stack/grid layout primitives also expose semantic style contracts. Width modes, fixed dimensions, spacing, alignment, column ratios, responsive column variables, wrapping, surfaces, and interaction colors are therefore resolved once instead of reimplemented by each renderer.

The precedence contract is:

1. Node properties provide the base values.
2. Site styles provide theme defaults for theme-aware properties.
3. Responsive properties override base and theme values.
4. Inspector-owned localStyleOverrides and intentional zero values remain authoritative.
5. useSiteStyles: false returns local and responsive values without applying the site theme.