@formbox/htmx 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -2
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -95,7 +95,10 @@ async function renderQuestionnaire(request: Request): Promise<Response> {
|
|
|
95
95
|
The renderer does not own your page shell. If a POST should update more than
|
|
96
96
|
the form itself, such as a status label or a rendered `QuestionnaireResponse`
|
|
97
97
|
preview beside the form, target an application-owned wrapper and return that
|
|
98
|
-
same wrapper for HTMX requests
|
|
98
|
+
same wrapper for HTMX requests.
|
|
99
|
+
|
|
100
|
+
For dynamic questionnaires, prefer morphdom swaps so focus and nearby DOM state
|
|
101
|
+
survive server-rendered updates better than plain `outerHTML` replacement:
|
|
99
102
|
|
|
100
103
|
```ts
|
|
101
104
|
import {
|
|
@@ -109,7 +112,7 @@ const templates = {
|
|
|
109
112
|
...(await loadTemplates("./questionnaire-templates")),
|
|
110
113
|
...compileTemplates({
|
|
111
114
|
Form: `
|
|
112
|
-
<form{{{attrs attributes}}} hx-target="#questionnaire-app">
|
|
115
|
+
<form{{{attrs attributes}}} hx-target="#questionnaire-app" hx-swap="morphdom">
|
|
113
116
|
{{{fields}}}
|
|
114
117
|
</form>
|
|
115
118
|
`,
|
|
@@ -139,6 +142,16 @@ function questionnaireApp(rendered: {
|
|
|
139
142
|
}
|
|
140
143
|
```
|
|
141
144
|
|
|
145
|
+
Include the HTMX morphdom extension in the application shell:
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<script src="https://unpkg.com/morphdom@2.7.8/dist/morphdom-umd.min.js"></script>
|
|
149
|
+
<script src="https://unpkg.com/htmx-ext-morphdom-swap@2.0.0/morphdom-swap.js"></script>
|
|
150
|
+
<body hx-ext="morphdom-swap">
|
|
151
|
+
<div id="questionnaire-app">...</div>
|
|
152
|
+
</body>
|
|
153
|
+
```
|
|
154
|
+
|
|
142
155
|
Use the default form swap when the form is the only dynamic region. Use an
|
|
143
156
|
application wrapper when the result of `renderer.process(formData)` affects
|
|
144
157
|
nearby UI outside the form.
|
package/dist/index.d.ts
CHANGED
|
@@ -300,8 +300,6 @@ export declare type LinkTemplateProperties = Omit<TemplateBase<LinkProperties>,
|
|
|
300
300
|
|
|
301
301
|
export declare function loadDefaultTemplates(): Promise<RequiredTemplates>;
|
|
302
302
|
|
|
303
|
-
export declare const loadNativeTemplates: typeof loadDefaultTemplates;
|
|
304
|
-
|
|
305
303
|
export declare function loadTemplates(directory: string | URL): Promise<Templates>;
|
|
306
304
|
|
|
307
305
|
export declare function mediaHtml(attachment: Attachment | undefined, fallbackLabel: string): string;
|
package/dist/index.js
CHANGED
|
@@ -59795,7 +59795,6 @@ async function loadDefaultTemplates() {
|
|
|
59795
59795
|
}
|
|
59796
59796
|
return templates;
|
|
59797
59797
|
}
|
|
59798
|
-
const loadNativeTemplates = loadDefaultTemplates;
|
|
59799
59798
|
async function loadTemplates(directory) {
|
|
59800
59799
|
const sources = {};
|
|
59801
59800
|
const entries = await readdir(directory, { withFileTypes: true });
|
|
@@ -62384,6 +62383,5 @@ export {
|
|
|
62384
62383
|
compileTemplates,
|
|
62385
62384
|
htmlAttributes,
|
|
62386
62385
|
loadDefaultTemplates,
|
|
62387
|
-
loadNativeTemplates,
|
|
62388
62386
|
loadTemplates
|
|
62389
62387
|
};
|