@formbox/htmx 0.4.1 → 0.4.3
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 +2 -2
- package/dist/index.js +12 -4
- package/package.json +3 -3
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;
|
|
@@ -474,6 +472,8 @@ export declare type StackTemplateProperties = Omit<TemplateBase<StackProperties>
|
|
|
474
472
|
readonly children: string;
|
|
475
473
|
};
|
|
476
474
|
|
|
475
|
+
export declare const SUBMIT_ATTEMPTED_FIELD = "fb[submitAttempted]";
|
|
476
|
+
|
|
477
477
|
export declare type TabContainerTemplateProperties = Omit<TemplateBase<TabContainerProperties>, "errors" | "header" | "items"> & {
|
|
478
478
|
readonly header?: string | undefined;
|
|
479
479
|
readonly errors?: string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -59459,6 +59459,7 @@ const templateNames = [
|
|
|
59459
59459
|
const ACTION_FIELD = "fb[action]";
|
|
59460
59460
|
const LANGUAGE_FIELD = "fb[language]";
|
|
59461
59461
|
const PAGE_FIELD = "fb[page]";
|
|
59462
|
+
const SUBMIT_ATTEMPTED_FIELD = "fb[submitAttempted]";
|
|
59462
59463
|
function valueName(path2, field) {
|
|
59463
59464
|
return bracketName(["fb", "answer", ...pathParts(path2), field]);
|
|
59464
59465
|
}
|
|
@@ -59795,7 +59796,6 @@ async function loadDefaultTemplates() {
|
|
|
59795
59796
|
}
|
|
59796
59797
|
return templates;
|
|
59797
59798
|
}
|
|
59798
|
-
const loadNativeTemplates = loadDefaultTemplates;
|
|
59799
59799
|
async function loadTemplates(directory) {
|
|
59800
59800
|
const sources = {};
|
|
59801
59801
|
const entries = await readdir(directory, { withFileTypes: true });
|
|
@@ -59957,10 +59957,15 @@ async function processStoreFormDataAsync(store, formData) {
|
|
|
59957
59957
|
await applySubmittedState(store, formData);
|
|
59958
59958
|
const actions = getActions(formData);
|
|
59959
59959
|
actions.forEach((action2) => applyAction(store, action2));
|
|
59960
|
-
|
|
59960
|
+
const submitted = actions.includes("submit");
|
|
59961
|
+
if (submitted || readSubmitAttempted(formData)) {
|
|
59962
|
+
const valid = store.validateAll();
|
|
59963
|
+
if (!submitted) {
|
|
59964
|
+
return { submitted: false };
|
|
59965
|
+
}
|
|
59961
59966
|
return {
|
|
59962
59967
|
submitted: true,
|
|
59963
|
-
valid
|
|
59968
|
+
valid
|
|
59964
59969
|
};
|
|
59965
59970
|
}
|
|
59966
59971
|
return { submitted: false };
|
|
@@ -61038,6 +61043,9 @@ function readBoolean(path2, formData) {
|
|
|
61038
61043
|
function getActions(formData) {
|
|
61039
61044
|
return formData.getAll(ACTION_FIELD).filter((value) => typeof value === "string");
|
|
61040
61045
|
}
|
|
61046
|
+
function readSubmitAttempted(formData) {
|
|
61047
|
+
return getLastString(formData, SUBMIT_ATTEMPTED_FIELD) === "true";
|
|
61048
|
+
}
|
|
61041
61049
|
function getLastString(formData, name) {
|
|
61042
61050
|
return getStrings(formData, name).at(-1);
|
|
61043
61051
|
}
|
|
@@ -62036,6 +62044,7 @@ function renderHiddenFieldsForStore(store) {
|
|
|
62036
62044
|
...store.footerNodes
|
|
62037
62045
|
]);
|
|
62038
62046
|
return [
|
|
62047
|
+
store.isSubmitAttempted ? `<input type="hidden" name="${SUBMIT_ATTEMPTED_FIELD}" value="true">` : "",
|
|
62039
62048
|
store.nodes.map(
|
|
62040
62049
|
(node) => renderHiddenFieldsForNode(node, [], renderedNodes.has(node))
|
|
62041
62050
|
).join(""),
|
|
@@ -62384,6 +62393,5 @@ export {
|
|
|
62384
62393
|
compileTemplates,
|
|
62385
62394
|
htmlAttributes,
|
|
62386
62395
|
loadDefaultTemplates,
|
|
62387
|
-
loadNativeTemplates,
|
|
62388
62396
|
loadTemplates
|
|
62389
62397
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formbox/htmx",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"react-dom": "^19.2.3",
|
|
33
33
|
"@formbox/fhir": "0.4.0",
|
|
34
34
|
"@formbox/renderer": "0.4.0",
|
|
35
|
-
"@formbox/
|
|
36
|
-
"@formbox/
|
|
35
|
+
"@formbox/theme": "0.4.0",
|
|
36
|
+
"@formbox/strings": "0.4.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@playwright/test": "^1.60.0",
|