@inglorious/web 4.0.6 → 4.0.7

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>
       `
     },

package/package.json

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