@inglorious/web 4.0.2 → 4.0.4

package/README.md

@@ -312,6 +312,37 @@ The `mount` function subscribes to the store and automatically re-renders your t
 
 ---
 
+## JSX Support
+
+If you prefer JSX syntax over template literals, you can use **[`@inglorious/vite-plugin-jsx`](https://www.npmjs.com/package/@inglorious/vite-plugin-jsx)**.
+
+This Vite plugin transforms standard JSX/TSX into optimized `lit-html` templates at compile time. You get the familiar developer experience of JSX without React's runtime, hooks, or VDOM overhead.
+
+To use it:
+
+1. Install the plugin: `npm install -D @inglorious/vite-plugin-jsx`
+2. Add it to your `vite.config.js`
+3. Write your render functions using JSX
+
+```jsx
+export const counter = {
+  render(entity, api) {
+    return (
+      <div className="counter">
+        <span>Count: {entity.value}</span>
+        <button onClick={() => api.notify(`#${entity.id}:increment`)}>
+          +1
+        </button>
+      </div>
+    )
+  },
+}
+```
+
+See the plugin documentation for full details on control flow, attributes, and engine components.
+
+---
+
 ## Redux DevTools Integration
 
 `@inglorious/web` ships with first-class support for the **Redux DevTools Extension**, allowing you to:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "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/select/base.css

@@ -1,52 +1,52 @@
-.iw-select {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-
-  .iw-select-control {
-    display: flex;
-    align-items: center;
-
-    cursor: pointer;
-    user-select: none;
-
-    .iw-select-value,
-    .iw-select-placeholder,
-    .iw-select-multi-value {
-      flex: 1;
-    }
-
-    .iw-select-multi-value {
-      display: flex;
-      flex-wrap: wrap;
-
-      .iw-select-multi-value-tag {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .iw-select-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-
-    .iw-select-dropdown-search {
-      width: 100%;
-    }
-
-    .iw-select-dropdown-options {
-      .iw-select-dropdown-options-option {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-      }
-    }
-  }
-}
+.iw-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  .iw-select-control {
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+    user-select: none;
+
+    .iw-select-value,
+    .iw-select-placeholder,
+    .iw-select-multi-value {
+      flex: 1;
+    }
+
+    .iw-select-multi-value {
+      display: flex;
+      flex-wrap: wrap;
+
+      .iw-select-multi-value-tag {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .iw-select-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+
+    .iw-select-dropdown-search {
+      width: 100%;
+    }
+
+    .iw-select-dropdown-options {
+      .iw-select-dropdown-options-option {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+}

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;
+  }
+}

package/types/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./form"
 export * from "./list"
+export * from "./lit-html"
 export * from "./mount"
 export * from "./router"
 export * from "./select"
+export * from "./store"
 export * from "./table"

package/types/lit-html.d.ts

@@ -0,0 +1,9 @@
+export { html, TemplateResult } from "lit-html"
+
+export { choose } from "lit-html/directives/choose"
+export { classMap } from "lit-html/directives/class-map"
+export { ref } from "lit-html/directives/ref"
+export { repeat } from "lit-html/directives/repeat"
+export { styleMap } from "lit-html/directives/style-map"
+export { unsafeHTML } from "lit-html/directives/unsafe-html"
+export { when } from "lit-html/directives/when"

package/types/mount.d.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit-html"
-import type { Store, Api as StoreApi } from "@inglorious/store"
+import type { BaseEntity, Store, Api as StoreApi } from "@inglorious/store"
 
 export type Api = StoreApi & {
   /**
@@ -21,8 +21,8 @@ export type Api = StoreApi & {
  * @param element The DOM element to mount the template to.
  * @returns An unsubscribe function.
  */
-export function mount(
-  store: Store,
+export function mount<Entity = BaseEntity, State = BaseState>(
+  store: Store<Entity, State>,
   renderFn: (api: Api) => TemplateResult | null,
   element: HTMLElement | DocumentFragment,
 ): () => void

package/types/store.d.ts

@@ -0,0 +1,14 @@
+export {
+  BaseEntity,
+  EntitiesState,
+  Event,
+  Middleware,
+  createStore,
+  TypesConfig,
+} from "@inglorious/store"
+
+export { createSelector } from "@inglorious/store/select"
+export { trigger } from "@inglorious/store/test"
+
+export { createDevtools } from "@inglorious/store/client/devtools"
+export { multiplayerMiddleware } from "@inglorious/store/client/multiplayer-middleware"