Add SWM render stability tests and typechecked setup

Author: olimsaidov

.gitmodules

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
+  "files": {
+    "includes": [
+      "src/**/*.{ts,tsx,js,jsx}",
+      "tests/**/*.{ts,tsx,js,jsx}"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "lineEnding": "lf"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/biome.json

@@ -6,21 +6,25 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "playwright test"
+    "test": "playwright test",
+    "lint": "biome lint .",
+    "format": "biome format .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "aidbox-swm": "file:../swm",
     "@beda.software/fhir-questionnaire": "github:beda-software/fhir-questionnaire",
     "lodash": "^4.17.23",
     "property-expr": "^2.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sdc-qrf": "1.0.0-beta.13",
-    "toposort": "^2.0.2",
+    "sdc-smart-web-messaging-react": "1.0.3",
     "tiny-case": "^1.0.3",
+    "toposort": "^2.0.2",
     "tslib": "^2.7.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
     "@playwright/test": "^1.58.1",
     "@types/fhir": "^0.0.41",
     "@types/react": "^18.3.27",

aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/package.json

@@ -1,16 +1,32 @@
 import React from "react";
-import { useSmartMessaging } from "aidbox-swm";
-import { ErrorView } from "./ui/error-view";
-import { BedaForm } from "./renderer/beda-form";
+import {
+  SmartMessagingPhase,
+  useSmartMessaging,
+} from "sdc-smart-web-messaging-react";
+import { ErrorView } from "./error-view";
+import { BedaForm } from "./beda-form";
+
+declare global {
+  interface Window {
+    __rendererMetrics?: {
+      renders: number;
+    };
+  }
+}
 
 export const App = () => {
+  const renderCountRef = React.useRef(0);
+  if (import.meta.env.DEV) {
+    renderCountRef.current += 1;
+    window.__rendererMetrics = { renders: renderCountRef.current };
+  }
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
   const {
     questionnaire,
     questionnaireResponse,
     context,
-    error,
-    renderKey,
-    sendResponseChanged,
+    phase,
+    onQuestionnaireResponseChange,
   } = useSmartMessaging({
     application: {
       name: "Beda",
@@ -20,10 +36,18 @@ export const App = () => {
       extraction: false,
       focusChangeNotifications: false,
     },
+    onError: (error) => {
+      const suffix = error.messageType ? ` (${error.messageType})` : "";
+      setErrorMessage(`${error.message}${suffix}`);
+    },
   });
 
-  if (error) {
-    return <ErrorView message={error} />;
+  if (phase === SmartMessagingPhase.Disabled) {
+    return <ErrorView message="Missing SDC SWM parameters." />;
+  }
+
+  if (errorMessage) {
+    return <ErrorView message={errorMessage} />;
   }
 
   if (!questionnaire) {
@@ -32,11 +56,10 @@ export const App = () => {
 
   return (
     <BedaForm
-      key={renderKey}
       questionnaire={questionnaire}
       questionnaireResponse={questionnaireResponse}
       context={context}
-      onResponseChange={sendResponseChanged}
+      onResponseChange={onQuestionnaireResponseChange}
     />
   );
 };

aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/pnpm-lock.yaml

@@ -15,7 +15,7 @@ import {
   useQuestionnaireResponseFormContext,
 } from "sdc-qrf";
 import type { AnswerValue, FormItems, QuestionItemProps } from "sdc-qrf";
-import type { QuestionnaireContext } from "sdc-swm-protocol/src";
+import type { QuestionnaireContext } from "sdc-smart-web-messaging-react";
 
 type BedaFormProps = {
   questionnaire: fhir4.Questionnaire;
@@ -72,7 +72,7 @@ function buildLaunchContextParameters(
     if (item.contentResource) {
       return {
         name: item.name,
-        resource: item.contentResource as fhir4b.Resource,
+        resource: item.contentResource as fhir4b.FhirResource,
       };
     }
     if (item.contentReference) {
@@ -103,7 +103,7 @@ function GroupItem({ questionItem, children, addItem }: GroupItemProps) {
   );
 }
 
-function useAnswerValue(
+function getAnswerValue(
   questionItem: QuestionItemProps["questionItem"],
   parentPath: string[],
   formValues: FormItems
@@ -123,7 +123,7 @@ function QuestionField({ questionItem, context, parentPath }: QuestionItemProps)
   void context;
   if (!questionItem.linkId) return null;
 
-  const answerValue = useAnswerValue(questionItem, parentPath, formValues);
+  const answerValue = getAnswerValue(questionItem, parentPath, formValues);
   const fieldPath = [...parentPath, questionItem.linkId];
   const isReadOnly = Boolean(questionItem.readOnly);
 
@@ -272,18 +272,21 @@ function QuestionField({ questionItem, context, parentPath }: QuestionItemProps)
         </label>
       );
     }
-    case "string":
-    case "text":
     default: {
       const value = answerValue?.string ?? "";
       const isMultiline = questionItem.type === "text";
+      const inputId = `field-${questionItem.linkId}`;
       return (
-        <label style={{ display: "block", marginBottom: "12px" }}>
-          <div style={{ fontWeight: 600, marginBottom: "4px" }}>
+        <div style={{ display: "block", marginBottom: "12px" }}>
+          <label
+            htmlFor={inputId}
+            style={{ display: "block", fontWeight: 600, marginBottom: "4px" }}
+          >
             {questionItem.text}
-          </div>
+          </label>
           {isMultiline ? (
             <textarea
+              id={inputId}
               value={value}
               disabled={isReadOnly}
               onChange={(event) =>
@@ -294,6 +297,7 @@ function QuestionField({ questionItem, context, parentPath }: QuestionItemProps)
             />
           ) : (
             <input
+              id={inputId}
               type="text"
               value={value}
               disabled={isReadOnly}
@@ -304,7 +308,7 @@ function QuestionField({ questionItem, context, parentPath }: QuestionItemProps)
               }
             />
           )}
-        </label>
+        </div>
       );
     }
   }

…eda-renderer/src/shims/aidbox-service.ts …erer/beda-renderer/src/aidbox-service.tsaidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/src/shims/aidbox-service.ts renamed to aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/src/aidbox-service.ts aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/src/shims/aidbox-service.ts renamed to aidbox-forms/aidbox-forms-builder-custom-renderer/beda-renderer/src/aidbox-service.ts

@@ -1,5 +1,3 @@
-import React from "react";
-
 type ErrorViewProps = {
   message: string;
 };