silentium-validation 0.0.2

package/eslint.config.mjs

@@ -0,0 +1,70 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ["**/node_modules", "**/dist"],
+  },
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ),
+  {
+    rules: {
+      "require-await": ["error"],
+      "@typescript-eslint/no-explicit-any": ["off"],
+      "prettier.bracketSpacing": ["off"],
+      "@typescript-eslint/explicit-member-accessibility": [
+        "error",
+        {
+          accessibility: "explicit",
+        },
+      ],
+      indent: ["error", 2],
+    },
+  },
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        window: "readonly",
+      },
+    },
+  },
+  eslintPluginPrettierRecommended,
+  {
+    files: ["**/*.cjs"],
+    languageOptions: {
+      globals: {
+        require: "readonly",
+        module: "readonly",
+        exports: "readonly",
+        __dirname: "readonly",
+        __filename: "readonly",
+        process: "readonly",
+      },
+    },
+    rules: {
+      "no-undef": "off", // Allow CommonJS globals
+      "@typescript-eslint/no-require-imports": "off", // Allow require in .cjs files
+    },
+  },
+];

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "silentium-validation",
+  "version": "0.0.2",
+  "description": "Validation library based on silentium",
+  "license": "MIT",
+  "author": "Silentium Lab",
+  "type": "module",
+  "main": "dist/silentium.js",
+  "module": "dist/silentium.mjs",
+  "typings": "dist/silentium.d.ts",
+  "keywords": [
+    "validation",
+    "vanilla",
+    "simple",
+    "pure"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src",
+    "lint-fix": "eslint src --fix",
+    "test": "vitest run",
+    "push-head": "git push origin HEAD",
+    "release": "./beforeRelease.sh && npm run build && git add . && (git commit -m 'build: before release' || echo 'commit failed') && standard-version --no-verify && git push --follow-tags && npm publish",
+    "poor-release": "standard-version --no-verify",
+    "cz": "git cz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silentium-lab/silentium-validation.git"
+  },
+  "private": false,
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.12.0",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "cz-customizable": "^7.5.1",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "rollup": "^4.24.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "standard-version": "^9.5.0",
+    "vitest": "^4.0.14"
+  },
+  "dependencies": {
+    "silentium": "^0.0.165",
+    "silentium-components": "^0.0.93"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-customizable"
+    },
+    "cz-customizable": {
+      "config": "./commitizen.cjs"
+    }
+  }
+}

package/rollup.config.js

@@ -0,0 +1,66 @@
+import dts from "rollup-plugin-dts";
+import esbuild from "rollup-plugin-esbuild";
+import terser from "@rollup/plugin-terser";
+import alias from "@rollup/plugin-alias";
+import { resolve } from "path";
+
+const name = "dist/silentium_validation";
+
+const bundle = (config) => {
+  const isDts = config.plugins && config.plugins.some((p) => p.name === "dts");
+  return {
+    ...config,
+    input: "src/index.ts",
+    external: isDts
+      ? () => false
+      : (id) => !/^[./]/.test(id) && !id.startsWith("@/"),
+    plugins: [
+      alias({
+        entries: [{ find: /^@\/(.*)$/, replacement: resolve("src/$1.ts") }],
+      }),
+      ...(config.plugins || []),
+    ],
+  };
+};
+
+export default [
+  bundle({
+    plugins: [esbuild()],
+    output: [
+      {
+        file: `${name}.cjs`,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: `${name}.js`,
+        format: "es",
+        sourcemap: true,
+      },
+      {
+        file: `${name}.mjs`,
+        format: "es",
+        sourcemap: true,
+      },
+      {
+        file: `${name}.min.mjs`,
+        format: "es",
+        plugins: [terser()],
+        sourcemap: true,
+      },
+      {
+        file: `${name}.min.js`,
+        format: "iife",
+        name: "silentium_validation",
+        plugins: [terser()],
+      },
+    ],
+  }),
+  bundle({
+    plugins: [dts()],
+    output: {
+      file: `${name}.d.ts`,
+      format: "es",
+    },
+  }),
+];

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./models/Validated";
+export * from "./models/ValidationErrors";
+export * from "./models/ValidationErrorsHappened";
+export * from "./models/ValidationErrorsSummary";
+export * from "./models/ValidationErrorsTouched";
+export * from "./models/ValidationItems";
+export * from "./rules";
+export * from "./types";

package/src/models/Validated.test.ts

@@ -0,0 +1,16 @@
+import { Computed, LateShared } from "silentium";
+import { describe, expect, test } from "vitest";
+import { Validated } from "@/models/Validated";
+
+describe("Validated.test", () => {
+  test("should handle empty form", async () => {
+    const $errors = LateShared<any>({
+      name: ["too long"],
+    });
+    const $validated = Computed(Validated, $errors);
+    expect(await $validated).toBe(false);
+
+    $errors.use({});
+    expect(await $validated).toBe(true);
+  });
+});

package/src/models/Validated.ts

@@ -0,0 +1,11 @@
+import { ValidationErrorType } from "@/types";
+
+/**
+ * Check if there are any errors in the errors object
+ * Returns a boolean type
+ */
+export function Validated(errors: ValidationErrorType) {
+  return !Object.values(errors).some(
+    (errorValues: any) => errorValues.length > 0,
+  );
+}

package/src/models/ValidationErrors.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { ValidationItem } from "@/types";
+import { ValidationErrors } from "@/models/ValidationErrors";
+import { Of } from "silentium";
+
+describe("ValidationErrors", () => {
+  it("should return a MessageType for validation errors", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "name",
+        value: "John",
+        rules: [() => "required"],
+      },
+      {
+        key: "age",
+        value: 30,
+        rules: [() => "must be number", (age) => age > 18 || "must be adult"],
+      },
+      {
+        key: "balance",
+        value: 5,
+        rules: [(v) => v > 3 || "low balance"],
+      },
+      {
+        key: "salary",
+        value: 100,
+        rules: [() => Of("not enough async or reactive")],
+      },
+    ];
+
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+
+    expect(errors).toStrictEqual({
+      age: ["must be number"],
+      balance: [],
+      name: ["required"],
+      salary: ["not enough async or reactive"],
+    });
+  });
+
+  it("should handle empty form", async () => {
+    const $errors = ValidationErrors([]);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({});
+  });
+
+  it("should handle items with no rules", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "name",
+        value: "John",
+        rules: [],
+      },
+    ];
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({
+      name: [],
+    });
+  });
+
+  it("should filter out true results from rules", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "age",
+        value: 25,
+        rules: [() => true, () => "error"],
+      },
+    ];
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({
+      age: ["error"],
+    });
+  });
+
+  it("should convert false results to 'Error!'", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "balance",
+        value: 0,
+        rules: [() => false],
+      },
+    ];
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({
+      balance: ["Error!"],
+    });
+  });
+
+  it("should handle undefined results from rules", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "test",
+        value: "value",
+        rules: [() => undefined as any],
+      },
+    ];
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({
+      test: [undefined],
+    });
+  });
+
+  it("should handle duplicate keys, keeping the last", async () => {
+    const mockForm: ValidationItem[] = [
+      {
+        key: "field",
+        value: "first",
+        rules: [() => "first error"],
+      },
+      {
+        key: "field",
+        value: "second",
+        rules: [() => "second error"],
+      },
+    ];
+    const $errors = ValidationErrors(mockForm);
+    const errors = await $errors;
+    expect(errors).toStrictEqual({
+      field: ["second error"],
+    });
+  });
+});

package/src/models/ValidationErrors.ts

@@ -0,0 +1,51 @@
+import {
+  ActualMessage,
+  All,
+  Applied,
+  DestroyContainer,
+  MaybeMessage,
+  Message,
+  MessageType,
+} from "silentium";
+import { ValidationErrorType, ValidationItem } from "@/types";
+
+/**
+ * Accepts a set of items that need to be validated
+ * and when rules produce values, returns the overall set
+ * of errors for the given configuration
+ */
+export function ValidationErrors(
+  form: MaybeMessage<ValidationItem[]>,
+): MessageType<ValidationErrorType> {
+  const $form = ActualMessage(form);
+  return Message((resolve, reject) => {
+    const formDc = DestroyContainer();
+    $form.then((form) => {
+      formDc.destroy();
+      const entries = form.map((i) => {
+        return All(
+          i.key,
+          Applied(
+            All(
+              ...i.rules.map((rule) => {
+                return formDc.add(rule(i.value));
+              }),
+            ),
+            (items) => items.filter(ExcludeTrue).map(ErrorFormat),
+          ) as MessageType<string[]>,
+        );
+      });
+      Applied(All(...entries), (e: any) => Object.fromEntries(e))
+        .catch(reject)
+        .then(resolve);
+    });
+  });
+}
+
+function ErrorFormat(v: boolean | string) {
+  return v === false ? "Error!" : v;
+}
+
+function ExcludeTrue(v: boolean | string) {
+  return v !== true;
+}

package/src/models/ValidationErrorsHappened.test.ts

@@ -0,0 +1,16 @@
+import { Computed } from "silentium";
+import { describe, expect, test } from "vitest";
+import { ValidationErrorsHappened } from "@/models/ValidationErrorsHappened";
+
+describe("ValidationErrorsHappened.test", () => {
+  test("regular", async () => {
+    const errors = {
+      name: ["required"],
+      age: [],
+    };
+    const $happened = Computed(ValidationErrorsHappened, errors);
+    expect(await $happened).toStrictEqual({
+      name: ["required"],
+    });
+  });
+});

package/src/models/ValidationErrorsHappened.ts

@@ -0,0 +1,10 @@
+import { ValidationErrorType } from "@/types";
+
+/**
+ * Show only the errors that exist, fields without errors are not shown
+ */
+export function ValidationErrorsHappened(base: ValidationErrorType) {
+  return Object.fromEntries(
+    Object.entries(base).filter((entry) => entry[1].length > 0),
+  );
+}

package/src/models/ValidationErrorsSummary.test.ts

@@ -0,0 +1,21 @@
+import { Computed, LateShared } from "silentium";
+import { describe, expect, test } from "vitest";
+import { ValidationErrorType } from "@/types";
+import { ValidationErrorsSummary } from "@/models/ValidationErrorsSummary";
+
+describe("ValidationErrorsSummary.test", () => {
+  test("regular", async () => {
+    const $errors = LateShared<ValidationErrorType>({});
+    const $summary = Computed(ValidationErrorsSummary, $errors);
+    expect(await $summary).toStrictEqual([]);
+
+    $errors.use({
+      name: ["Must be more 20 chars"],
+      age: ["Must be adult"],
+    });
+    expect(await $summary).toStrictEqual([
+      "Must be more 20 chars",
+      "Must be adult",
+    ]);
+  });
+});

package/src/models/ValidationErrorsSummary.ts

@@ -0,0 +1,8 @@
+import { ValidationErrorType } from "@/types";
+
+/**
+ * Overall array of all errors
+ */
+export function ValidationErrorsSummary(errors: ValidationErrorType) {
+  return Object.values(errors).flat();
+}

package/src/models/ValidationErrorsTouched.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from "vitest";
+import { ValidationErrorsTouched } from "@/models/ValidationErrorsTouched";
+import { Computed, LateShared } from "silentium";
+import { ValidationErrors } from "@/models/ValidationErrors";
+import { ValidationItems } from "@/models/ValidationItems";
+import { Integer, Required } from "@/rules";
+
+describe("ValidationErrorsTouched.test", () => {
+  test("regular", async () => {
+    expect(true).toBe(true);
+
+    const $form = LateShared<any>({
+      name: "",
+      age: 0,
+    });
+    const rules = {
+      name: [Required],
+      age: [Integer],
+    };
+
+    const $errors = ValidationErrors(Computed(ValidationItems, $form, rules));
+    const $errorsTouched = ValidationErrorsTouched($form, $errors);
+    expect(await $errorsTouched).toStrictEqual({});
+
+    $form.use({
+      age: "not int" as unknown as number,
+    });
+    expect(await $errorsTouched).toStrictEqual({
+      age: ["Must be integer"],
+    });
+  });
+});

package/src/models/ValidationErrorsTouched.ts

@@ -0,0 +1,21 @@
+import { All, Applied, Chainable, MessageType } from "silentium";
+import { ValidationErrorType } from "@/types";
+import { Dirty, MergeAccumulation } from "silentium-components";
+
+/**
+ * Validation errors are only those that correspond to changed form fields
+ */
+export function ValidationErrorsTouched(
+  $form: MessageType<Record<string, unknown>>,
+  $errors: MessageType<ValidationErrorType>,
+) {
+  const dirtyForm = Dirty($form);
+  Chainable(dirtyForm).chain($form);
+  const touchedForm = MergeAccumulation(dirtyForm);
+  const errorsTouched = All(Applied(touchedForm, Object.keys), $errors);
+  return Applied(errorsTouched, ([touched, errors]) => {
+    return Object.fromEntries(
+      Object.entries(errors).filter((entry) => touched.includes(entry[0])),
+    );
+  });
+}

package/src/models/ValidationItems.test.ts

@@ -0,0 +1,94 @@
+import { ValidationErrors } from "@/models/ValidationErrors";
+import { ValidationItems } from "@/models/ValidationItems";
+import { Integer, Required } from "@/rules";
+import { Computed, LateShared } from "silentium";
+import { describe, expect, test } from "vitest";
+
+describe("ValidationItems", () => {
+  test("should return a MessageRx for form fields", () => {
+    const form = { name: "John", age: 30 };
+    const rules = {
+      name: [Required],
+      age: [Integer],
+    };
+
+    const result = ValidationItems(form, rules as any);
+
+    expect(result).toStrictEqual([
+      {
+        key: "name",
+        rules: [Required],
+        value: "John",
+      },
+      {
+        key: "age",
+        rules: [Integer],
+        value: 30,
+      },
+    ]);
+  });
+
+  test("reactive variant", async () => {
+    const form = LateShared({ name: "John", age: 30 });
+    const rules = {
+      name: [Required],
+      age: [Integer],
+    };
+
+    const $result = Computed(ValidationItems, form, rules);
+
+    expect(await $result).toStrictEqual([
+      {
+        key: "name",
+        rules: [Required],
+        value: "John",
+      },
+      {
+        key: "age",
+        rules: [Integer],
+        value: 30,
+      },
+    ]);
+
+    form.use({
+      name: "Happy",
+      age: 5,
+    });
+
+    expect(await $result).toStrictEqual([
+      {
+        key: "name",
+        rules: [Required],
+        value: "Happy",
+      },
+      {
+        key: "age",
+        rules: [Integer],
+        value: 5,
+      },
+    ]);
+  });
+
+  test("should handle empty form", () => {
+    const form = {};
+    const rules = {};
+
+    const result = ValidationItems(form, rules);
+
+    expect(result).toStrictEqual([]);
+  });
+
+  test("Integration with errors component", async () => {
+    const form = { name: "John", age: 11.1, norule: "Norule" };
+    const rules = {
+      name: [Required],
+      age: [Integer],
+    };
+
+    const $errors = ValidationErrors(ValidationItems(form, rules as any));
+    expect(await $errors).toStrictEqual({
+      age: ["Must be integer"],
+      name: [],
+    });
+  });
+});

package/src/models/ValidationItems.ts

@@ -0,0 +1,24 @@
+import { ConstructorType } from "silentium";
+import { ValidationRule } from "@/types";
+
+export type FormType = Record<string, unknown>;
+export type FormRulesType = Record<
+  string,
+  ConstructorType<any, ValidationRule>[]
+>;
+
+/**
+ * Get a set of all validation rules
+ * for each form field
+ */
+export function ValidationItems(form: FormType, rules: FormRulesType) {
+  return Object.keys(form)
+    .map((key) => {
+      return {
+        key,
+        value: form[key],
+        rules: rules[key],
+      };
+    })
+    .filter((item) => !!item.rules);
+}

package/src/rules.ts

@@ -0,0 +1,9 @@
+/**
+ * Validation rule, what requires truthy value
+ */
+export const Required = (v: unknown) => !!v || "Field required";
+
+/**
+ * Validation rule what requires integer value
+ */
+export const Integer = (v: unknown) => Number.isInteger(v) || "Must be integer";

package/src/types.ts

@@ -0,0 +1,11 @@
+import { ConstructorType, MaybeMessage } from "silentium";
+
+export type ValidationErrorType = Record<string, string[]>;
+
+export type ValidationRule = MaybeMessage<string | boolean>;
+
+export interface ValidationItem {
+  value: unknown;
+  key: string;
+  rules: ConstructorType<any, ValidationRule>[];
+}