@inglorious/web 3.0.0 → 3.0.1

package/README.md

@@ -371,7 +371,8 @@ To enable the router, add it to your store's types and create a `router` entity.
 
 ```javascript
 // store.js
-import { createStore, html, router } from "@inglorious/web"
+import { createStore, html } from "@inglorious/web"
+import { router } from "@inglorious/web/router"
 
 const types = {
   // 1. Add the router type to your store's types
@@ -520,7 +521,8 @@ export const requireAuth = (type) => ({
 
 ```javascript
 // store.js
-import { createStore, router } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { router } from "@inglorious/web/router"
 import { requireAuth } from "./guards/require-auth.js"
 import { adminPage } from "./pages/admin.js"
 import { loginPage } from "./pages/login.js"
@@ -646,7 +648,7 @@ To use it, import the `table` type and its CSS, then create an entity for your t
 
 ```javascript
 // In your entity definition file
-import { table } from "@inglorious/web"
+import { table } from "@inglorious/web/table"
 
 // Import base styles and a theme. You can create your own theme.
 import "@inglorious/web/table/base.css"
@@ -673,7 +675,7 @@ You can customize how data is rendered in the table cells by overriding the `ren
 The example below from `examples/apps/web-table/src/product-table/product-table.js` shows how to format values based on a `formatter` property in the column definition.
 
 ```javascript
-import { table } from "@inglorious/web"
+import { table } from "@inglorious/web/table"
 import { format } from "date-fns"
 
 const formatters = {
@@ -705,7 +707,8 @@ The table comes with a base stylesheet (`@inglorious/web/table/base.css`) and a
 Import the `select` type and its CSS, then create an entity.
 
 ```javascript
-import { createStore, select } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { select } from "@inglorious/web/select"
 // Import base styles and theme
 import "@inglorious/web/select/base.css"
 import "@inglorious/web/select/theme.css"
@@ -765,7 +768,8 @@ It listens to internal events like `#<id>:toggle`, `#<id>:optionSelect`, etc. Yo
 Include `form` in your `types` and create an entity for the form (use any id you like — `form` is used below for clarity):
 
 ```javascript
-import { createStore, form } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { form } from "@inglorious/web/form"
 
 const types = { form }
 
@@ -866,7 +870,8 @@ It also expects the item type to export `renderItem(item, index, api)` so each v
 Minimal example showing how to extend the `list` type to create a domain-specific list (e.g. `productList`) and provide a `renderItem(item, index, api)` helper.
 
 ```javascript
-import { createStore, html, list } from "@inglorious/web"
+import { createStore, html } from "@inglorious/web"
+import { list } from "@inglorious/web/list"
 
 // Extend the built-in list type to render product items
 const productList = {
@@ -952,18 +957,19 @@ import {
   styleMap,
   unsafeHTML,
   when,
-  // router stuff
-  router,
-  // table stuff
-  table,
-  // form stuff
+} from "@inglorious/web"
+
+// Subpath imports for tree-shaking
+import {
   form,
   getFieldError,
   getFieldValue,
   isFieldTouched,
-  // virtualized list stuff
-  list,
-} from "@inglorious/web"
+} from "@inglorious/web/form"
+import { list } from "@inglorious/web/list"
+import { router } from "@inglorious/web/router"
+import { select } from "@inglorious/web/select"
+import { table } from "@inglorious/web/table"
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -53,16 +53,19 @@
   },
   "files": [
     "src",
+    "!src/**/*.test.js",
     "types"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "lit-html": "^3.3.1",
-    "@inglorious/utils": "3.7.0",
-    "@inglorious/store": "8.0.0"
+    "@inglorious/store": "8.0.1",
+    "@inglorious/utils": "3.7.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/form/form.test.js

@@ -1,372 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { beforeEach, describe, expect, it, vi } from "vitest"
-
-import { form, getFieldError, getFieldValue, isFieldTouched } from "."
-
-describe("form", () => {
-  let entity
-
-  beforeEach(() => {
-    entity = {
-      id: "test-form",
-      initialValues: {
-        name: "John Doe",
-        contact: {
-          email: "john.doe@example.com",
-        },
-        tags: ["a", "b"],
-      },
-    }
-  })
-
-  describe("init()", () => {
-    it("should add global event listeners for click and submit", () => {
-      const spy = vi.spyOn(document, "addEventListener")
-      form.init(entity)
-      expect(spy).toHaveBeenCalledWith("click", expect.any(Function))
-      expect(spy).toHaveBeenCalledWith("submit", expect.any(Function))
-      spy.mockRestore()
-    })
-  })
-
-  describe("create()", () => {
-    it("should initialize the form", () => {
-      entity.values = {}
-      form.create(entity)
-      expect(entity.values).toEqual(entity.initialValues)
-    })
-
-    it("should reset the form to its initial state", () => {
-      // mess up the state first
-      entity.values = {}
-      entity.isPristine = false
-
-      form.create(entity)
-
-      expect(entity.values).toEqual(entity.initialValues)
-      expect(entity.values).not.toBe(entity.initialValues) // should be a clone
-      expect(entity.isPristine).toBe(true)
-      expect(entity.isValid).toBe(true)
-      expect(entity.errors).toEqual({
-        name: null,
-        contact: { email: null },
-        tags: [null, null],
-      })
-      expect(entity.touched).toEqual({
-        name: null,
-        contact: { email: null },
-        tags: [null, null],
-      })
-    })
-  })
-
-  describe("reset()", () => {
-    it("should reset the form to its initial state", () => {
-      form.create(entity)
-      entity.values.name = "Jane Doe"
-      entity.isPristine = false
-
-      form.reset(entity)
-
-      expect(entity.values).toEqual(entity.initialValues)
-      expect(entity.isPristine).toBe(true)
-    })
-  })
-
-  describe("fieldChange()", () => {
-    beforeEach(() => {
-      form.create(entity)
-    })
-
-    it("should update a field's value, mark it as touched, and set form to dirty", () => {
-      form.fieldChange(entity, { path: "name", value: "Jane Doe" })
-
-      expect(entity.values.name).toBe("Jane Doe")
-      expect(entity.touched.name).toBe(true)
-      expect(entity.isPristine).toBe(false)
-    })
-
-    it("should update a nested field's value", () => {
-      form.fieldChange(entity, {
-        path: "contact.email",
-        value: "jane.doe@example.com",
-      })
-
-      expect(entity.values.contact.email).toBe("jane.doe@example.com")
-      expect(entity.touched.contact.email).toBe(true)
-    })
-
-    it("should validate the field if a validate function is provided", () => {
-      const validate = (value) => (value.length < 10 ? "Too short" : null)
-      form.fieldChange(entity, { path: "name", value: "Jane", validate })
-
-      expect(entity.errors.name).toBe("Too short")
-      expect(entity.isValid).toBe(false)
-    })
-
-    it("should clear a field's error when it becomes valid", () => {
-      const validate = (value) => (value.length < 10 ? "Too short" : null)
-      form.fieldChange(entity, { path: "name", value: "Jane", validate })
-      expect(entity.isValid).toBe(false)
-
-      form.fieldChange(entity, {
-        path: "name",
-        value: "Jane Doe The Great",
-        validate,
-      })
-
-      expect(entity.errors.name).toBe(null)
-      expect(entity.isValid).toBe(true)
-    })
-  })
-
-  describe("fieldBlur()", () => {
-    beforeEach(() => {
-      form.create(entity)
-    })
-
-    it("should mark a field as touched", () => {
-      form.fieldBlur(entity, { path: "name" })
-      expect(entity.touched.name).toBe(true)
-    })
-
-    it("should validate the field if a validate function is provided", () => {
-      const validate = (value) =>
-        value === "John Doe" ? "Cannot be John" : null
-      form.fieldBlur(entity, { path: "name", validate })
-
-      expect(entity.errors.name).toBe("Cannot be John")
-      expect(entity.isValid).toBe(false)
-    })
-  })
-
-  describe("field array operations", () => {
-    beforeEach(() => {
-      form.create(entity)
-    })
-
-    it("fieldArrayAppend: should append a value and metadata", () => {
-      form.fieldArrayAppend(entity, { path: "tags", value: "c" })
-
-      expect(entity.values.tags).toEqual(["a", "b", "c"])
-      expect(entity.errors.tags).toEqual([null, null, null])
-      expect(entity.touched.tags).toEqual([null, null, null])
-      expect(entity.isPristine).toBe(false)
-    })
-
-    it("fieldArrayRemove: should remove a value and metadata at an index", () => {
-      form.fieldArrayRemove(entity, { path: "tags", index: 0 })
-
-      expect(entity.values.tags).toEqual(["b"])
-      expect(entity.errors.tags).toEqual([null])
-      expect(entity.touched.tags).toEqual([null])
-      expect(entity.isPristine).toBe(false)
-    })
-
-    it("fieldArrayInsert: should insert a value and metadata at an index", () => {
-      form.fieldArrayInsert(entity, { path: "tags", index: 1, value: "c" })
-
-      expect(entity.values.tags).toEqual(["a", "c", "b"])
-      expect(entity.errors.tags).toEqual([null, null, null])
-      expect(entity.touched.tags).toEqual([null, null, null])
-      expect(entity.isPristine).toBe(false)
-    })
-
-    it("fieldArrayMove: should move a value and metadata", () => {
-      entity.errors.tags[0] = "Error on A"
-      entity.touched.tags[0] = true
-
-      form.fieldArrayMove(entity, { path: "tags", fromIndex: 0, toIndex: 1 })
-
-      expect(entity.values.tags).toEqual(["b", "a"])
-      expect(entity.errors.tags).toEqual([null, "Error on A"])
-      expect(entity.touched.tags).toEqual([null, true])
-      expect(entity.isPristine).toBe(false)
-    })
-
-    it("fieldArray operations should warn if path is not an array", () => {
-      const spy = vi.spyOn(console, "warn").mockImplementation(() => {})
-
-      form.fieldArrayAppend(entity, { path: "name", value: "c" })
-      expect(spy).toHaveBeenCalledWith("Field at path 'name' is not an array")
-
-      spy.mockRestore()
-    })
-  })
-
-  describe("validate()", () => {
-    beforeEach(() => {
-      form.create(entity)
-    })
-
-    it("should set errors and isValid based on the validation function", () => {
-      const validate = (values) => {
-        const errors = {}
-        if (values.name !== "Jane Doe") {
-          errors.name = "Name must be Jane Doe"
-        }
-        return errors
-      }
-
-      form.validate(entity, { validate })
-
-      expect(entity.errors.name).toBe("Name must be Jane Doe")
-      expect(entity.isValid).toBe(false)
-    })
-
-    it("should set isValid to true if there are no errors", () => {
-      const validate = () => ({})
-
-      entity.isValid = false
-      form.validate(entity, { validate })
-
-      expect(entity.errors).toEqual({})
-      expect(entity.isValid).toBe(true)
-    })
-  })
-
-  describe("validateAsync()", () => {
-    let api
-
-    beforeEach(() => {
-      form.create(entity)
-      api = { notify: vi.fn() }
-    })
-
-    it("should set isValidating to true and call the validation function", async () => {
-      const validate = vi.fn().mockResolvedValue({})
-      await form.validateAsync(entity, { validate }, api)
-      expect(entity.isValidating).toBe(true)
-      expect(validate).toHaveBeenCalledWith(entity.values)
-    })
-
-    it("should notify 'validationComplete' on successful validation", async () => {
-      const errors = { name: "Required" }
-      const validate = async () => errors
-      await form.validateAsync(entity, { validate }, api)
-
-      expect(api.notify).toHaveBeenCalledWith(
-        `#${entity.id}:validationComplete`,
-        {
-          errors,
-          isValid: false,
-        },
-      )
-    })
-
-    it("should notify 'validationError' on validation failure", async () => {
-      const error = new Error("Validation failed")
-      const validate = async () => {
-        throw error
-      }
-      await form.validateAsync(entity, { validate }, api)
-
-      expect(api.notify).toHaveBeenCalledWith(`#${entity.id}:validationError`, {
-        error: "Validation failed",
-      })
-    })
-  })
-
-  describe("validationComplete()", () => {
-    it("should update form state after async validation", () => {
-      form.create(entity)
-      entity.isValidating = true
-      const errors = { name: "Error" }
-
-      form.validationComplete(entity, { errors, isValid: false })
-
-      expect(entity.isValidating).toBe(false)
-      expect(entity.errors).toBe(errors)
-      expect(entity.isValid).toBe(false)
-    })
-  })
-
-  describe("validationError()", () => {
-    it("should update form state after an async validation error", () => {
-      form.create(entity)
-      entity.isValidating = true
-
-      form.validationError(entity, { error: "Network Error" })
-
-      expect(entity.isValidating).toBe(false)
-      expect(entity.submitError).toBe("Network Error")
-    })
-  })
-})
-
-describe("form helpers", () => {
-  let testForm
-
-  beforeEach(() => {
-    testForm = {
-      values: {
-        user: { name: "Alex" },
-        tags: ["one", "two"],
-      },
-      errors: {
-        user: { name: "Too short" },
-        tags: [null, "Invalid tag"],
-      },
-      touched: {
-        user: { name: true },
-        tags: [true, false],
-      },
-    }
-  })
-
-  describe("getFieldValue()", () => {
-    it("should return the value of a field at a given path", () => {
-      expect(getFieldValue(testForm, "user.name")).toBe("Alex")
-    })
-
-    it("should return an array value", () => {
-      expect(getFieldValue(testForm, "tags")).toEqual(["one", "two"])
-    })
-
-    it("should return a default value if path does not exist", () => {
-      expect(getFieldValue(testForm, "user.age", 30)).toBe(30)
-    })
-
-    it("should return undefined if path does not exist and no default is provided", () => {
-      expect(getFieldValue(testForm, "user.age")).toBeUndefined()
-    })
-  })
-
-  describe("getFieldError()", () => {
-    it("should return the error of a field at a given path", () => {
-      expect(getFieldError(testForm, "user.name")).toBe("Too short")
-    })
-
-    it("should return the error of a field in an array", () => {
-      expect(getFieldError(testForm, "tags.1")).toBe("Invalid tag")
-    })
-
-    it("should return null for a valid field in an array", () => {
-      expect(getFieldError(testForm, "tags.0")).toBeNull()
-    })
-
-    it("should return undefined if path does not exist", () => {
-      expect(getFieldError(testForm, "user.age")).toBe(undefined)
-    })
-  })
-
-  describe("isFieldTouched()", () => {
-    it("should return true if a field has been touched", () => {
-      expect(isFieldTouched(testForm, "user.name")).toBe(true)
-    })
-
-    it("should return true for a touched field in an array", () => {
-      expect(isFieldTouched(testForm, "tags.0")).toBe(true)
-    })
-
-    it("should return false for an untouched field in an array", () => {
-      expect(isFieldTouched(testForm, "tags.1")).toBe(false)
-    })
-
-    it("should return false if path does not exist", () => {
-      expect(isFieldTouched(testForm, "user.age")).toBe(false)
-    })
-  })
-})