fix: convert style strings for react in the ops console
htm passes props through untouched and react rejects a style string with error #62, so every view rendered an empty page. Converting once in the createElement wrapper keeps plain css in the templates instead of style objects everywhere. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WnNxwxfXSbeNtjvtz5gayb
This commit is contained in:
@@ -1,6 +1,31 @@
|
|||||||
// Shared plumbing: htm binding, hash router, polling fetch, formatters.
|
// Shared plumbing: htm binding, hash router, polling fetch, formatters.
|
||||||
const { createElement, useState, useEffect, useRef, useCallback } = React;
|
const { createElement, useState, useEffect, useRef, useCallback } = React;
|
||||||
export const html = htm.bind(createElement);
|
|
||||||
|
// htm hands props straight through, and React refuses a style string (error #62).
|
||||||
|
// Writing style objects everywhere in tagged templates is miserable, so convert
|
||||||
|
// once here instead and let the views keep using plain css.
|
||||||
|
function cssToObject(css) {
|
||||||
|
const style = {};
|
||||||
|
for (const declaration of String(css).split(';')) {
|
||||||
|
const split = declaration.indexOf(':');
|
||||||
|
if (split === -1) continue;
|
||||||
|
const property = declaration.slice(0, split).trim();
|
||||||
|
const value = declaration.slice(split + 1).trim();
|
||||||
|
if (!property || !value) continue;
|
||||||
|
// custom properties have to stay verbatim, the rest camelCase
|
||||||
|
style[property.startsWith('--') ? property : property.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
|
||||||
|
function h(type, props, ...children) {
|
||||||
|
if (props && typeof props.style === 'string') {
|
||||||
|
return createElement(type, { ...props, style: cssToObject(props.style) }, ...children);
|
||||||
|
}
|
||||||
|
return createElement(type, props, ...children);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const html = htm.bind(h);
|
||||||
export { useState, useEffect, useRef, useCallback };
|
export { useState, useEffect, useRef, useCallback };
|
||||||
|
|
||||||
export async function api(path, options = {}) {
|
export async function api(path, options = {}) {
|
||||||
|
|||||||
Reference in New Issue
Block a user