Fix sw.forms.render() preact globals
Use window.html + hooks destructuring to match existing SDK primitive conventions (confirm.js, toast.js pattern). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,7 +10,9 @@
|
|||||||
// const result = await sw.forms.validateRemote(template, data);
|
// const result = await sw.forms.validateRemote(template, data);
|
||||||
// ==========================================
|
// ==========================================
|
||||||
|
|
||||||
const { html, render, useState, useEffect, useRef } = preact;
|
const { html } = window;
|
||||||
|
const { h, render: preactRender } = preact;
|
||||||
|
const { useState, useEffect, useRef } = hooks;
|
||||||
|
|
||||||
// ── Field type → HTML input mapping ─────────
|
// ── Field type → HTML input mapping ─────────
|
||||||
|
|
||||||
@@ -303,28 +305,14 @@ export function createForms(restClient) {
|
|||||||
*/
|
*/
|
||||||
render(container, template, opts = {}) {
|
render(container, template, opts = {}) {
|
||||||
const handle = { getData: () => ({}), setErrors: () => {}, destroy: () => {} };
|
const handle = { getData: () => ({}), setErrors: () => {}, destroy: () => {} };
|
||||||
const Wrapper = () => {
|
|
||||||
|
const ConnectedForm = () => {
|
||||||
const ref = useRef(handle);
|
const ref = useRef(handle);
|
||||||
return html`<${FormRenderer} template=${template} opts=${{ ...opts, ref }} />`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Render with handle ref wiring
|
|
||||||
render(html`<${() => {
|
|
||||||
const ref = useRef(handle);
|
|
||||||
useEffect(() => { ref.current = handle; }, []);
|
|
||||||
return html`<${FormRenderer} template=${template} opts=${{ ...opts }} />`;
|
|
||||||
}} />`, container);
|
|
||||||
|
|
||||||
// Wire getData into the handle via a simpler approach
|
|
||||||
const formEl = container.querySelector('.sw-form');
|
|
||||||
handle.destroy = () => { render(null, container); };
|
|
||||||
|
|
||||||
// Re-render with handle reference
|
|
||||||
const App = () => {
|
|
||||||
const internalRef = useRef(handle);
|
|
||||||
return html`<${FormRenderer} template=${template} opts=${{ ...opts }} />`;
|
return html`<${FormRenderer} template=${template} opts=${{ ...opts }} />`;
|
||||||
};
|
};
|
||||||
render(html`<${App} />`, container);
|
|
||||||
|
preactRender(html`<${ConnectedForm} />`, container);
|
||||||
|
handle.destroy = () => { preactRender(null, container); };
|
||||||
|
|
||||||
return handle;
|
return handle;
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user