@inglorious/web 2.6.1 → 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": "2.6.1",
+  "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",
@@ -26,6 +26,26 @@
       "types": "./types/index.d.ts",
       "import": "./src/index.js"
     },
+    "./form": {
+      "types": "./types/form.d.ts",
+      "import": "./src/form/index.js"
+    },
+    "./list": {
+      "types": "./types/list.d.ts",
+      "import": "./src/list/index.js"
+    },
+    "./router": {
+      "types": "./types/router.d.ts",
+      "import": "./src/router/index.js"
+    },
+    "./select": {
+      "types": "./types/select.d.ts",
+      "import": "./src/select/index.js"
+    },
+    "./table": {
+      "types": "./types/table.d.ts",
+      "import": "./src/table/index.js"
+    },
     "./table/base.css": "./src/table/base.css",
     "./table/theme.css": "./src/table/theme.css",
     "./select/base.css": "./src/select/base.css",
@@ -33,19 +53,22 @@
   },
   "files": [
     "src",
+    "!src/**/*.test.js",
     "types"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "lit-html": "^3.3.1",
-    "@inglorious/store": "8.0.0",
-    "@inglorious/utils": "3.7.0"
+    "@inglorious/store": "8.0.1",
+    "@inglorious/utils": "3.7.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",
-    "vite": "^7.1.3",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.1"
   },

package/src/{form.js → form/index.js}

@@ -1,21 +1,21 @@
 import { clone, get, set } from "@inglorious/utils/data-structures/object.js"
 
 /**
- * @typedef {import('../types/form.js').FormEntity} FormEntity
- * @typedef {import('../types/form.js').FormFieldChangePayload} FormFieldChangePayload
- * @typedef {import('../types/form.js').FormFieldBlurPayload} FormFieldBlurPayload
+ * @typedef {import('../../types/form.js').FormEntity} FormEntity
+ * @typedef {import('../../types/form.js').FormFieldChangePayload} FormFieldChangePayload
+ * @typedef {import('../../types/form.js').FormFieldBlurPayload} FormFieldBlurPayload
  *
  * @typedef {object} FormValidatePayload
  * @property {string|number} entityId - The ID of the target form entity.
- * @property {(values: object) => import('../types/form.js').FormErrors<object>} validate - A function that validates the entire form's values and returns a complete error object.
+ * @property {(values: object) => import('../../types/form.js').FormErrors<object>} validate - A function that validates the entire form's values and returns a complete error object.
  *
  * @typedef {object} FormValidateAsyncPayload
  * @property {string|number} entityId - The ID of the target form entity.
- * @property {(values: object) => Promise<import('../types/form.js').FormErrors<object>>} validate - An async function that validates the entire form's values.
+ * @property {(values: object) => Promise<import('../../types/form.js').FormErrors<object>>} validate - An async function that validates the entire form's values.
  *
  * @typedef {object} FormValidationCompletePayload
  * @property {string|number} entityId - The ID of the target form entity.
- * @property {import('../types/form.js').FormErrors<object>} errors - The validation errors.
+ * @property {import('../../types/form.js').FormErrors<object>} errors - The validation errors.
  * @property {boolean} isValid - Whether the form is valid.
  *
  * @typedef {object} FormValidationErrorPayload

package/src/index.js

@@ -1,13 +1,8 @@
-export { form, getFieldError, getFieldValue, isFieldTouched } from "./form.js"
-export { list } from "./list.js"
 export { mount } from "./mount.js"
-export { router } from "./router.js"
-export { select } from "./select.js"
-export { table } from "./table.js"
 export { createStore } from "@inglorious/store"
 export { createDevtools } from "@inglorious/store/client/devtools.js"
 export { createSelector } from "@inglorious/store/select.js"
-export { trigger } from "@inglorious/store/test"
+export { trigger } from "@inglorious/store/test.js"
 export { html, render, svg } from "lit-html"
 export { choose } from "lit-html/directives/choose.js"
 export { classMap } from "lit-html/directives/class-map.js"

package/src/{list.js → list/index.js}

@@ -6,8 +6,8 @@ const LIST_START = 0
 const PRETTY_INDEX = 1
 
 /**
- * @typedef {import('../types/list').ListEntity} ListEntity
- * @typedef {import('../types/mount').Api} Api
+ * @typedef {import('../../types/list').ListEntity} ListEntity
+ * @typedef {import('../../types/mount').Api} Api
  * @typedef {import('lit-html').TemplateResult} TemplateResult
  */
 

package/src/{router.js → router/index.js}

@@ -1,7 +1,7 @@
 /**
- * @typedef {import("../types/router").RouterType} RouterType
- * @typedef {import("../types/router").RouterEntity} RouterEntity
- * @typedef {import("../types/router").Api} Api
+ * @typedef {import("../../types/router").RouterType} RouterType
+ * @typedef {import("../../types/router").RouterEntity} RouterEntity
+ * @typedef {import("../../types/router").Api} Api
  */
 
 const SKIP_FULL_MATCH_GROUP = 1 // .match() result at index 0 is the full string
@@ -83,6 +83,18 @@ export const router = {
     })
   },
 
+  create(entity) {
+    entity.routes ??= {}
+  },
+
+  routeAdd(entity, route) {
+    entity.routes[route.path] = route.entityType
+  },
+
+  routeRemove(entity, path) {
+    delete [entity.routes[path]]
+  },
+
   /**
    * Handles navigation to a new route.
    * @param {RouterEntity} entity - The router entity.

package/src/select/index.js

@@ -0,0 +1,7 @@
+import { logic } from "./logic.js"
+import { rendering } from "./rendering.js"
+
+export const select = {
+  ...logic,
+  ...rendering,
+}

package/src/table/filters.js

@@ -1,10 +1,10 @@
 import { choose, html } from "@inglorious/web"
 
-import { dateFilter } from "./filters/date"
-import { numberFilter } from "./filters/number"
-import { rangeFilter } from "./filters/range"
-import { selectFilter } from "./filters/select"
-import { textFilter } from "./filters/text"
+import { dateFilter } from "./filters/date.js"
+import { numberFilter } from "./filters/number.js"
+import { rangeFilter } from "./filters/range.js"
+import { selectFilter } from "./filters/select.js"
+import { textFilter } from "./filters/text.js"
 
 export const filters = {
   render(entity, column, api) {

package/src/table/index.js

@@ -0,0 +1,7 @@
+import { logic } from "./logic.js"
+import { rendering } from "./rendering.js"
+
+export const table = {
+  ...logic,
+  ...rendering,
+}

package/src/table/rendering.js

@@ -2,8 +2,8 @@ import { html } from "lit-html"
 import { classMap } from "lit-html/directives/class-map.js"
 import { ref } from "lit-html/directives/ref.js"
 
-import { filters } from "./filters"
-import { getPaginationInfo, getRows, getSortDirection } from "./logic"
+import { filters } from "./filters.js"
+import { getPaginationInfo, getRows, getSortDirection } from "./logic.js"
 
 const DIVISOR = 2
 const FIRST_PAGE = 0

package/src/table/theme.css

@@ -1,83 +1,83 @@
-.iw-table {
-  .iw-table-header {
-    border-bottom: 1px solid grey;
-    padding: 1em 0;
-    row-gap: 1em;
-  }
-
-  .iw-table-header-row {
-    align-items: flex-start;
-    column-gap: 1em;
-  }
-
-  .iw-table-header-column {
-    row-gap: 0.5em;
-  }
-
-  .iw-table-header-title {
-    font-weight: bold;
-    white-space: nowrap;
-  }
-
-  .iw-table-body {
-    max-height: 35em;
-    overflow: auto;
-    border-bottom: 1px solid grey;
-  }
-
-  .iw-table-row {
-    align-items: center;
-    column-gap: 1em;
-  }
-
-  .iw-table-row-even {
-    background-color: aliceblue;
-  }
-
-  .iw-table-row-selected {
-    border-left: 1px solid cornflowerblue;
-    border-right: 1px solid cornflowerblue;
-  }
-
-  :not(.iw-table-row-selected) + .iw-table-row-selected {
-    border-top: 1px solid cornflowerblue;
-    margin-top: -1px;
-  }
-
-  .iw-table-row-selected + :not(.iw-table-row-selected) {
-    border-top: 1px solid cornflowerblue;
-    margin-top: -1px;
-  }
-
-  .iw-table-cell {
-    padding: 1em;
-  }
-
-  .iw-table-cell-number,
-  .iw-table-cell-date {
-    text-align: right;
-  }
-
-  .iw-table-cell-boolean {
-    text-align: center;
-  }
-
-  .iw-table-footer {
-    padding: 1em 0;
-  }
-
-  .iw-table-footer-row {
-    justify-content: space-between;
-    align-items: center;
-    column-gap: 1em;
-  }
-
-  .iw-table-page-input {
-    min-width: 4em;
-    text-align: right;
-  }
-
-  .iw-table-pagination-button {
-    white-space: nowrap;
-  }
-}
+.iw-table {
+  .iw-table-header {
+    border-bottom: 1px solid grey;
+    padding: 1em 0;
+    row-gap: 1em;
+  }
+
+  .iw-table-header-row {
+    align-items: flex-start;
+    column-gap: 1em;
+  }
+
+  .iw-table-header-column {
+    row-gap: 0.5em;
+  }
+
+  .iw-table-header-title {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+
+  .iw-table-body {
+    max-height: 35em;
+    overflow: auto;
+    border-bottom: 1px solid grey;
+  }
+
+  .iw-table-row {
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-row-even {
+    background-color: aliceblue;
+  }
+
+  .iw-table-row-selected {
+    border-left: 1px solid cornflowerblue;
+    border-right: 1px solid cornflowerblue;
+  }
+
+  :not(.iw-table-row-selected) + .iw-table-row-selected {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-row-selected + :not(.iw-table-row-selected) {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-cell {
+    padding: 1em;
+  }
+
+  .iw-table-cell-number,
+  .iw-table-cell-date {
+    text-align: right;
+  }
+
+  .iw-table-cell-boolean {
+    text-align: center;
+  }
+
+  .iw-table-footer {
+    padding: 1em 0;
+  }
+
+  .iw-table-footer-row {
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-page-input {
+    min-width: 4em;
+    text-align: right;
+  }
+
+  .iw-table-pagination-button {
+    white-space: nowrap;
+  }
+}