@inglorious/web 4.0.5 → 4.0.7

package/LICENSE

@@ -1,9 +1,9 @@
-The MIT License (MIT)
-
-Copyright © 2025 Inglorious Coderz Srl.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -261,7 +261,6 @@ import { createStore, html } from "@inglorious/web"
 const types = {
   counter: {
     increment(entity, id) {
-      if (entity.id !== id) return
       entity.value++
     },
 
@@ -270,7 +269,9 @@ const types = {
       return html`
         <div>
           <span>Count: ${entity.value}</span>
-          <button @click=${() => api.notify("increment", entity.id)}>+1</button>
+          <button @click=${() => api.notify(`#${entity.id}:increment`)}>
+            +1
+          </button>
         </div>
       `
     },
@@ -940,6 +941,91 @@ See `src/list.js` in the package for the implementation details and the `example
 
 ---
 
+## Using Third-Party Web Components
+
+Inglorious Web works seamlessly with any Web Component library, such as Shoelace, Material Web Components, or Lion. Thanks to lit-html's efficient diffing algorithm, Web Components maintain their internal state even when the full tree re-renders - the component only updates when its properties change.
+
+### ⚠️ SSG/SSR Considerations
+
+**Inglorious Web's built-in components** (`table`, `list`, `select`, `form`) are fully compatible with [@inglorious/ssx](https://npmjs.com/package/@inglorious/ssx) for static site generation. They render to complete HTML at build time and hydrate seamlessly on the client.
+
+**Third-party Web Components** currently have limited SSR/SSG support. Most Web Component libraries (including Shoelace and Material Web Components) require client-side JavaScript to initialize and render, which means:
+
+- They won't appear in the pre-rendered HTML
+- They're not SEO-friendly in their initial state
+- They may cause FOUC (Flash of Unstyled Content)
+- They should be treated as client-only enhancements
+
+**Recommendation for SSX projects:**
+
+- Use Inglorious Web components for content that needs to be pre-rendered (product listings, blog posts, documentation)
+- Use Web Components for interactive, client-only features (color pickers, rich text editors, admin tools)
+
+**Use Inglorious Web's built-in components when:**
+
+✅ You want full architectural consistency
+✅ You need fine-grained control over behavior
+✅ You want to compose behaviors via type composition
+✅ You need time-travel debugging of component state
+✅ You want minimal bundle size
+✅ You're building a core pattern used throughout your app
+✅ You want the simplest possible tests
+✅ You need custom behavior that third-party components don't provide
+✅ You're using SSX for static site generation
+
+**Use Web Components (like Shoelace) when:**
+
+✅ You need complex, battle-tested UI (date pickers, rich text editors)
+✅ You want a comprehensive design system out of the box
+✅ Speed of development matters more than architectural purity
+✅ You need features you don't want to build yourself (color pickers, tree views)
+✅ The component is isolated or used infrequently
+✅ You're okay with some state living outside the store
+✅ You're building a client-only application (not using SSX)
+
+### Example: Hybrid Approach
+
+```javascript
+import { table } from "@inglorious/web/table"
+import "@shoelace-style/shoelace/dist/components/color-picker/color-picker.js"
+
+const types = {
+  // Inglorious Web component - full store integration
+  productTable: {
+    ...table,
+    data: products,
+    columns: [
+      { id: "name", label: "Product Name" },
+      { id: "price", label: "Price" },
+    ],
+  },
+
+  // Web Component - for specialized UI
+  themeEditor: {
+    colorChange(entity, color) {
+      entity.primaryColor = color
+    },
+
+    render(entity, api) {
+      return html`
+        <div>
+          <label>Primary Color</label>
+          <sl-color-picker
+            value=${entity.primaryColor}
+            @sl-change=${(e) =>
+              api.notify("#themeEditor:colorChange", e.target.value)}
+          ></sl-color-picker>
+        </div>
+      `
+    },
+  },
+}
+```
+
+This hybrid approach gives you the best of both worlds: architectural consistency for core patterns, and battle-tested components for complex UI.
+
+---
+
 ## API Reference
 
 **`mount(store, renderFn, element)`**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "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",

package/src/list/index.js

@@ -1,5 +1,6 @@
 import { html } from "lit-html"
 import { ref } from "lit-html/directives/ref.js"
+import { repeat } from "lit-html/directives/repeat.js"
 import { styleMap } from "lit-html/directives/style-map.js"
 
 const LIST_START = 0
@@ -108,23 +109,31 @@ export const list = {
             position: "relative",
           })}
         >
-          ${visibleItems.map((item, idx) => {
-            const absoluteIndex = visibleRange.start + idx
-            const top = absoluteIndex * height
-
-            return html`
-              <div
-                style=${styleMap({
-                  position: "absolute",
-                  top: `${top}px`,
-                  width: "100%",
-                })}
-                data-index=${absoluteIndex}
-              >
-                ${type.renderItem(item, absoluteIndex, api)}
-              </div>
-            `
-          })}
+          ${repeat(
+            visibleItems,
+            (item) => item.id,
+            (item, index) => {
+              const absoluteIndex = visibleRange.start + index
+              const top = absoluteIndex * height
+
+              return html`
+                <div
+                  style=${styleMap({
+                    position: "absolute",
+                    top: `${top}px`,
+                    width: "100%",
+                  })}
+                  data-index=${absoluteIndex}
+                >
+                  ${type.renderItem(
+                    entity,
+                    { item, index: absoluteIndex },
+                    api,
+                  )}
+                </div>
+              `
+            },
+          )}
         </div>
       </div>
     `
@@ -138,8 +147,10 @@ export const list = {
    * @returns {TemplateResult}
    */
   // eslint-disable-next-line no-unused-vars
-  renderItem(item, index, api) {
-    return html`<div>${index + PRETTY_INDEX}. ${JSON.stringify(item)}</div>`
+  renderItem(entity, { item, index }, api) {
+    return html`<div class="iw-list-item">
+      ${index + PRETTY_INDEX}. ${JSON.stringify(item)}
+    </div>`
   },
 }
 

package/src/select/rendering.js

@@ -226,7 +226,7 @@ export const rendering = {
       ${repeat(
         filteredOptions,
         (option) => getOptionValue(option),
-        (option, index) => type.renderOption(entity, option, index, api),
+        (option, index) => type.renderOption(entity, { option, index }, api),
       )}
     </div>`
   },
@@ -239,7 +239,7 @@ export const rendering = {
    * @param {Api} api
    * @returns {TemplateResult}
    */
-  renderOption(entity, option, index, api) {
+  renderOption(entity, { option, index }, api) {
     const optionLabel = getOptionLabel(option)
     const isSelected = isOptionSelected(
       option,

package/src/table/rendering.js

@@ -1,6 +1,7 @@
 import { html } from "lit-html"
 import { classMap } from "lit-html/directives/class-map.js"
 import { ref } from "lit-html/directives/ref.js"
+import { repeat } from "lit-html/directives/repeat.js"
 
 import { filters } from "./filters.js"
 import { getPaginationInfo, getRows, getSortDirection } from "./logic.js"
@@ -45,8 +46,11 @@ export const rendering = {
           }
         })}
       >
-        ${entity.columns.map((column) =>
-          type.renderHeaderColumn(entity, column, api),
+        ${repeat(
+          entity.columns,
+          (column) => column.id,
+          (column, index) =>
+            type.renderHeaderColumn(entity, { column, index }, api),
         )}
       </div>
 
@@ -54,7 +58,7 @@ export const rendering = {
     </div>`
   },
 
-  renderHeaderColumn(entity, column, api) {
+  renderHeaderColumn(entity, { column }, api) {
     return html`<div
       class="iw-table-header-column"
       style=${getColumnStyle(column)}
@@ -88,13 +92,15 @@ export const rendering = {
     const type = api.getType(entity.type)
 
     return html`<div class="iw-table-body">
-      ${getRows(entity).map((row, index) =>
-        type.renderRow(entity, row, index, api),
+      ${repeat(
+        getRows(entity),
+        (row) => row.id,
+        (row, index) => type.renderRow(entity, { row, index }, api),
       )}
     </div>`
   },
 
-  renderRow(entity, row, index, api) {
+  renderRow(entity, { row, index }, api) {
     const type = api.getType(entity.type)
     const rowId = row[entity.rowId ?? "id"]
 
@@ -105,13 +111,16 @@ export const rendering = {
         "iw-table-row-selected": entity.selection?.includes(rowId),
       })}"
     >
-      ${entity.columns.map((column, index) =>
-        type.renderCell(entity, row[column.id], index, api),
+      ${repeat(
+        entity.columns,
+        (column) => column.id,
+        (column, index) =>
+          type.renderCell(entity, { cell: row[column.id], index }, api),
       )}
     </div>`
   },
 
-  renderCell(entity, cell, index, api) {
+  renderCell(entity, { cell, index }, api) {
     const type = api.getType(entity.type)
     const column = entity.columns[index]
 
@@ -123,11 +132,11 @@ export const rendering = {
       })}"
       style=${getColumnStyle(column)}
     >
-      ${type.renderValue(cell, column, api)}
+      ${type.renderValue(entity, { value: cell, column, index }, api)}
     </div>`
   },
 
-  renderValue(value) {
+  renderValue(_, { value }) {
     return value
   },