@narrative.io/jsonforms-provider-protocols 2.11.0 → 2.12.0

package/src/no-eval-ajv.ts

@@ -0,0 +1,381 @@
+import {
+  Validator,
+  type OutputUnit,
+  type Schema,
+  type SchemaDraft,
+} from "@cfworker/json-schema";
+
+/**
+ * CSP-safe JSON Schema validation backed by `@cfworker/json-schema`.
+ *
+ * Cloudflare Pages and similar strict-CSP environments forbid `new Function`,
+ * which is how AJV compiles validators. This factory returns an
+ * AJV-shaped facade whose `compile()` produces a synchronous validator
+ * function `(data) => boolean` with a mutable `errors` property — enough
+ * for `<JsonForms :ajv="..." />` to drop in without any other changes.
+ *
+ * Only `compile()` is functional; the rest of the surface (`addSchema`,
+ * `getSchema`, `removeSchema`, `addFormat`, `addKeyword`, `opts`) exists
+ * as no-ops for forward compatibility with plugins that probe the AJV
+ * interface but never reach those methods at runtime.
+ */
+
+// AJV's ErrorObject shape. We don't import `ajv` here to keep the lib's
+// zero-runtime-deps philosophy intact; the consumer's transitive AJV types
+// are structurally compatible.
+export interface NoEvalErrorObject {
+  instancePath: string;
+  schemaPath: string;
+  keyword: string;
+  params: Record<string, unknown>;
+  message?: string;
+}
+
+export interface NoEvalValidateFunction {
+  (data: unknown): boolean;
+  errors: NoEvalErrorObject[] | null;
+}
+
+// Minimal subset of AJV's surface that JsonForms touches. The factory
+// returns this as `unknown as Ajv` at the call site; consumers cast on
+// import or pass directly to `<JsonForms :ajv="..." />`.
+export interface NoEvalAjv {
+  compile: (schema: unknown) => NoEvalValidateFunction;
+  addSchema: (schema: unknown, key?: string) => NoEvalAjv;
+  getSchema: (key: string) => NoEvalValidateFunction | undefined;
+  removeSchema: (schemaKeyRef?: unknown) => NoEvalAjv;
+  addFormat: (name: string, format: unknown) => NoEvalAjv;
+  addKeyword: (definition: unknown) => NoEvalAjv;
+  opts: Readonly<Record<string, unknown>>;
+}
+
+export interface CreateNoEvalAjvOptions {
+  /**
+   * JSON Schema draft to validate against. Defaults to `'2020-12'` to match
+   * the spec; schemas authored against draft-07 should pass `'7'`.
+   */
+  draft?: SchemaDraft;
+}
+
+const KEYWORD_WRAPPERS = new Set([
+  "properties",
+  "items",
+  "prefixItems",
+  "$ref",
+]);
+
+const QUOTED_RE = /(['"])((?:\\.|(?!\1).)*?)\1/g;
+
+function findQuoted(s: string): string[] {
+  const out: string[] = [];
+  let m: RegExpExecArray | null;
+  QUOTED_RE.lastIndex = 0;
+  while ((m = QUOTED_RE.exec(s)) !== null) {
+    out.push(m[2]!);
+  }
+  return out;
+}
+
+function firstQuoted(s: string): string | undefined {
+  const all = findQuoted(s);
+  return all[0];
+}
+
+function allQuoted(s: string): string[] {
+  return findQuoted(s);
+}
+
+const NUMBER_RE = /-?\d+(?:\.\d+)?/g;
+
+function extractNumbers(s: string): number[] {
+  const out: number[] = [];
+  let m: RegExpExecArray | null;
+  NUMBER_RE.lastIndex = 0;
+  while ((m = NUMBER_RE.exec(s)) !== null) {
+    out.push(Number(m[0]));
+  }
+  return out;
+}
+
+function firstNumber(s: string): number | undefined {
+  const nums = extractNumbers(s);
+  return nums[0];
+}
+
+function stripPointerPrefix(p: string): string {
+  return p.startsWith("#") ? p.slice(1) : p;
+}
+
+interface KeywordTransform {
+  params: Record<string, unknown>;
+  message: string | undefined;
+}
+
+function transformByKeyword(unit: OutputUnit): KeywordTransform {
+  const { keyword, error } = unit;
+
+  switch (keyword) {
+    case "required": {
+      const prop = firstQuoted(error);
+      return {
+        params: { missingProperty: prop ?? "" },
+        message: prop
+          ? `must have required property '${prop}'`
+          : "must have required property",
+      };
+    }
+
+    case "type": {
+      const quoted = allQuoted(error);
+      // cfworker emits `Instance type "X" is invalid. Expected "Y".` (single)
+      // or `... Expected "Y" or "Z".` (union). Per AJV: `params.type` is the
+      // expected type as a string; for unions it's comma-separated.
+      const expected = quoted.slice(1).join(",") || quoted[0];
+      const message = expected ? `must be ${expected}` : "must be of expected type";
+      return {
+        params: expected ? { type: expected } : {},
+        message,
+      };
+    }
+
+    case "enum": {
+      // cfworker error: `Instance does not match any of [...].`
+      const match = error.match(/\[.*\]/);
+      let allowedValues: unknown[] = [];
+      if (match) {
+        try {
+          allowedValues = JSON.parse(match[0]);
+        } catch {
+          allowedValues = [];
+        }
+      }
+      return {
+        params: { allowedValues },
+        message: "must be equal to one of the allowed values",
+      };
+    }
+
+    case "const":
+      return {
+        params: {},
+        message: "must be equal to constant",
+      };
+
+    case "minimum": {
+      const limit = extractNumbers(error)[1];
+      return {
+        params: { comparison: ">=", limit: limit ?? 0 },
+        message: `must be >= ${limit ?? 0}`,
+      };
+    }
+
+    case "exclusiveMinimum": {
+      const limit = extractNumbers(error)[1];
+      return {
+        params: { comparison: ">", limit: limit ?? 0 },
+        message: `must be > ${limit ?? 0}`,
+      };
+    }
+
+    case "maximum": {
+      const limit = extractNumbers(error)[1];
+      return {
+        params: { comparison: "<=", limit: limit ?? 0 },
+        message: `must be <= ${limit ?? 0}`,
+      };
+    }
+
+    case "exclusiveMaximum": {
+      const limit = extractNumbers(error)[1];
+      return {
+        params: { comparison: "<", limit: limit ?? 0 },
+        message: `must be < ${limit ?? 0}`,
+      };
+    }
+
+    case "minLength": {
+      const limit = firstNumber(error) ?? 0;
+      return {
+        params: { limit },
+        message: `must NOT have fewer than ${limit} characters`,
+      };
+    }
+
+    case "maxLength": {
+      const limit = firstNumber(error) ?? 0;
+      return {
+        params: { limit },
+        message: `must NOT have more than ${limit} characters`,
+      };
+    }
+
+    case "minItems": {
+      const limit = firstNumber(error) ?? 0;
+      return {
+        params: { limit },
+        message: `must NOT have fewer than ${limit} items`,
+      };
+    }
+
+    case "maxItems": {
+      const limit = firstNumber(error) ?? 0;
+      return {
+        params: { limit },
+        message: `must NOT have more than ${limit} items`,
+      };
+    }
+
+    case "pattern": {
+      const pattern = firstQuoted(error) ?? "";
+      return {
+        params: { pattern },
+        message: `must match pattern "${pattern}"`,
+      };
+    }
+
+    case "format": {
+      const format = firstQuoted(error) ?? "";
+      return {
+        params: { format },
+        message: `must match format "${format}"`,
+      };
+    }
+
+    case "multipleOf": {
+      // cfworker emits two numbers: the value and the divisor.
+      const nums = extractNumbers(error);
+      const multipleOf = nums[1] ?? nums[0] ?? 1;
+      return {
+        params: { multipleOf },
+        message: `must be multiple of ${multipleOf}`,
+      };
+    }
+
+    case "uniqueItems":
+      return {
+        params: {},
+        message: "must NOT have duplicate items",
+      };
+
+    case "additionalProperties": {
+      const additionalProperty = firstQuoted(error) ?? "";
+      return {
+        params: { additionalProperty },
+        message: `must NOT have additional property '${additionalProperty}'`,
+      };
+    }
+
+    case "anyOf":
+      return { params: {}, message: "must match a schema in anyOf" };
+
+    case "oneOf":
+      return {
+        params: { passingSchemas: null },
+        message: "must match exactly one schema in oneOf",
+      };
+
+    case "allOf":
+      return { params: {}, message: "must match all schemas in allOf" };
+
+    case "not":
+      return { params: {}, message: "must NOT be valid against schema" };
+
+    default:
+      return { params: {}, message: undefined };
+  }
+}
+
+/**
+ * Transform a single cfworker `OutputUnit` into an AJV-compatible
+ * `ErrorObject`, or `null` if the unit is a structural wrapper that should
+ * be filtered out (`properties` / `items` / `prefixItems` / `$ref`).
+ *
+ * Exported for unit testing.
+ */
+export function transformUnit(unit: OutputUnit): NoEvalErrorObject | null {
+  if (KEYWORD_WRAPPERS.has(unit.keyword)) return null;
+
+  const { params, message } = transformByKeyword(unit);
+
+  return {
+    instancePath: stripPointerPrefix(unit.instanceLocation),
+    schemaPath: unit.keywordLocation,
+    keyword: unit.keyword,
+    params,
+    message: message ?? unit.error,
+  };
+}
+
+/**
+ * Transform a cfworker `OutputUnit[]` into an AJV-compatible
+ * `ErrorObject[]`, with structural wrappers filtered out.
+ *
+ * Exported for unit testing.
+ */
+export function transformErrors(units: OutputUnit[]): NoEvalErrorObject[] {
+  const out: NoEvalErrorObject[] = [];
+  for (const unit of units) {
+    const transformed = transformUnit(unit);
+    if (transformed !== null) out.push(transformed);
+  }
+  return out;
+}
+
+const FROZEN_OPTS: Readonly<Record<string, unknown>> = Object.freeze({
+  allErrors: true,
+  verbose: true,
+  errorDataPath: "",
+  strict: false,
+});
+
+/**
+ * Build a CSP-safe AJV-shaped validator backed by `@cfworker/json-schema`.
+ *
+ * Each `compile(schema)` call constructs a `Validator` and returns a
+ * synchronous validator function. The validator function's `errors`
+ * property is reassigned on every call, matching AJV's contract.
+ *
+ * Validators are memoized per-schema via a `WeakMap`, so JsonForms's
+ * repeated `compile()` calls on prop changes don't re-parse the schema
+ * graph each time.
+ */
+export function createNoEvalAjv(
+  options: CreateNoEvalAjvOptions = {},
+): NoEvalAjv {
+  const draft: SchemaDraft = options.draft ?? "2020-12";
+  const cache = new WeakMap<object, NoEvalValidateFunction>();
+
+  const compile = (schema: unknown): NoEvalValidateFunction => {
+    if (schema && typeof schema === "object") {
+      const cached = cache.get(schema as object);
+      if (cached) return cached;
+    }
+
+    const validator = new Validator(schema as Schema | boolean, draft, false);
+
+    const fn: NoEvalValidateFunction = ((data: unknown) => {
+      const result = validator.validate(data);
+      fn.errors = result.valid ? null : transformErrors(result.errors);
+      return result.valid;
+    }) as NoEvalValidateFunction;
+
+    fn.errors = null;
+
+    if (schema && typeof schema === "object") {
+      cache.set(schema as object, fn);
+    }
+    return fn;
+  };
+
+  const facade: NoEvalAjv = {
+    compile,
+    addSchema: () => facade,
+    getSchema: () => undefined,
+    removeSchema: () => facade,
+    addFormat: () => facade,
+    addKeyword: () => facade,
+    opts: FROZEN_OPTS,
+  };
+
+  return facade;
+}

package/src/vue/components/ProviderAutocomplete.vue

@@ -3,6 +3,7 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import { useProjection } from "../composables/useProjection";
 import AutoComplete from "primevue/autocomplete";
 
 const props = defineProps<{
@@ -10,7 +11,12 @@ const props = defineProps<{
   schema: JsonSchema;
   path: string;
 }>();
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const {
+  projectedData,
+  projectedLabel,
+  handleProjectedChange: handleChange,
+} = useProjection(control, rawHandleChange);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -33,7 +39,7 @@ watch(query, () => {
 });
 
 const value = computed({
-  get: () => control.value.data,
+  get: () => projectedData.value,
   set: (v) => handleChange(control.value.path, v),
 });
 
@@ -51,11 +57,9 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="control.schema.title" class="text-color text-left">{{
-      control.schema.title
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete

package/src/vue/components/ProviderMultiSelect.vue

@@ -3,7 +3,9 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import { useProjection } from "../composables/useProjection";
 import { shouldAutoSelectMulti } from "../utils/autoSelect";
+import { resolvePlaceholder } from "../utils/placeholder";
 import MultiSelect from "primevue/multiselect";
 
 const props = defineProps<{
@@ -11,7 +13,12 @@ const props = defineProps<{
   schema: JsonSchema;
   path: string;
 }>();
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const {
+  projectedData,
+  projectedLabel,
+  handleProjectedChange: handleChange,
+} = useProjection(control, rawHandleChange);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -39,7 +46,7 @@ const rootData = computed(() => injectedFormData.value || {});
 const { items, loading, error } = useProvider(binding, {
   data: rootData, // Pass the reactive reference
   path: control.value.path,
-  dependsOnValues: depValues.value,
+  dependsOnValues: depValues,
 });
 
 // Provider will automatically reload when rootData changes due to reactive cache key
@@ -53,7 +60,9 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items: newItems,
-      currentValue: Array.isArray(control.value.data) ? control.value.data : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
@@ -74,33 +83,31 @@ const sameSet = (a: unknown[], b: unknown[]) => {
 // v-model with guard to avoid recursive updates
 const value = computed({
   get() {
-    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
     // return a fresh copy so MultiSelect can't mutate JSONForms' array in place
     return [...curr];
   },
   set(val) {
     const next = Array.isArray(val) ? [...val] : [];
-    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
     if (!sameSet(curr, next)) handleChange(control.value.path, next);
   },
 });
 
 const placeholder = computed(() => {
   if (loading.value) return "Loading…";
-  // Check for placeholder in uischema options
-  const uischemaPlaceholder = (
-    control.value.uischema as { options?: { placeholder?: string } }
-  )?.options?.placeholder;
-  return uischemaPlaceholder || "Select…";
+  return resolvePlaceholder(
+    control.value.uischema,
+    projectedLabel.value,
+    "select",
+  );
 });
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
-      control.schema.title
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <MultiSelect

package/src/vue/components/ProviderObjectMultiSelect.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, inject, watch } from "vue";
+import { useProvider } from "../composables/useProvider";
+import { useProjection } from "../composables/useProjection";
+import { resolvePlaceholder } from "../utils/placeholder";
+import {
+  fromMultiSelectShape,
+  resolveItemsSchema,
+  resolveObjectKeys,
+  sameObjectSet,
+  toMultiSelectShape,
+  type MultiSelectOption,
+  type ObjectKeys,
+} from "../utils/objectMultiSelect";
+import MultiSelect from "primevue/multiselect";
+
+const props = defineProps<{
+  uischema: ControlElement;
+  schema: JsonSchema;
+  path: string;
+}>();
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const {
+  projectedData,
+  projectedLabel,
+  handleProjectedChange: handleChange,
+} = useProjection(control, rawHandleChange);
+
+// Pull root schema so item-schema $refs resolve against the consumer's $defs.
+const jsonforms = inject<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  core?: { schema?: Record<string, any> };
+} | null>("jsonforms", null);
+const rootSchema = computed(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  () => (jsonforms?.core?.schema ?? control.value.schema) as Record<string, any>,
+);
+
+const itemsSchema = computed(() =>
+  resolveItemsSchema(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    control.value.schema as Record<string, any>,
+    rootSchema.value,
+  ),
+);
+
+const objectKeys = computed<ObjectKeys>(() => {
+  const resolved = resolveObjectKeys(
+    control.value.uischema?.options as
+      | { objectKeys?: { value?: unknown; label?: unknown } }
+      | undefined,
+    itemsSchema.value,
+  );
+  if (!resolved) {
+    throw new Error(
+      "[ProviderObjectMultiSelect] objectKeys could not be resolved. " +
+        "Specify `uischema.options.objectKeys = { value, label }` or declare " +
+        "exactly two `required` properties on the array's items schema so " +
+        "they can be inferred.",
+    );
+  }
+  return resolved;
+});
+
+const binding = computed(() => {
+  const provider = control.value.uischema?.options?.provider;
+  if (provider && typeof provider === "object" && !provider.load) {
+    return { ...provider, load: "mount" };
+  }
+  return provider;
+});
+
+const deps = computed(
+  () =>
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
+);
+const depValues = computed(() => deps.value.map(() => null));
+
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+const { items, loading, error } = useProvider(binding, {
+  data: rootData,
+  path: control.value.path,
+  dependsOnValues: depValues,
+});
+
+// Auto-select when provider returns only one item — paired-object variant.
+watch(
+  [items, loading],
+  ([newItems, isLoading]) => {
+    if (
+      !control.value.uischema?.options?.autoSelectSingle ||
+      isLoading ||
+      newItems.length !== 1
+    ) {
+      return;
+    }
+    const single = newItems[0]!;
+    const current = Array.isArray(projectedData.value) ? projectedData.value : [];
+    if (current.length === 0) {
+      handleChange(control.value.path, [
+        {
+          [objectKeys.value.value]: single.value,
+          [objectKeys.value.label]: single.label,
+        },
+      ]);
+    }
+  },
+  { immediate: true },
+);
+
+const value = computed<MultiSelectOption[]>({
+  get() {
+    return toMultiSelectShape(projectedData.value, objectKeys.value);
+  },
+  set(val) {
+    const next = fromMultiSelectShape(val, objectKeys.value);
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
+    if (!sameObjectSet(curr, next, objectKeys.value.value)) {
+      handleChange(control.value.path, next);
+    }
+  },
+});
+
+const placeholder = computed(() => {
+  if (loading.value) return "Loading…";
+  return resolvePlaceholder(
+    control.value.uischema,
+    projectedLabel.value,
+    "select",
+  );
+});
+</script>
+
+<template>
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
+      {{ control.description }}
+    </div>
+    <MultiSelect
+      v-model="value"
+      class="w-full!"
+      :options="items"
+      option-label="label"
+      data-key="value"
+      display="chip"
+      :placeholder="placeholder"
+      :disabled="!control.enabled || loading"
+      :show-clear="true"
+    />
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
+  </div>
+</template>
+
+<style scoped>
+:deep(.p-multiselect-label) {
+  text-align: left;
+}
+</style>