@inglorious/web 4.0.11 → 4.1.1

package/README.md

@@ -527,7 +527,7 @@ test("full user interaction flow", () => {
 #### Testing Computed State
 
 ```javascript
-import { createSelector } from "@inglorious/store"
+import { compute } from "@inglorious/store"
 
 test("filtered todos excludes completed", () => {
   const todos = [
@@ -536,8 +536,9 @@ test("filtered todos excludes completed", () => {
     { id: 3, text: "Write tests", completed: false },
   ]
 
-  const getActiveTodos = createSelector([() => todos], (todos) =>
-    todos.filter((t) => !t.completed),
+  const getActiveTodos = compute(
+    (todos) => todos.filter((t) => !t.completed),
+    [() => todos],
   )
 
   const result = getActiveTodos()
@@ -1473,6 +1474,73 @@ This hybrid approach gives you the best of both worlds: architectural consistenc
 
 ---
 
+## Simplifying Entity Setup with `autoCreateEntities`
+
+Let's be real: in a web app you very rarely need to create more than one entity for each type, and juggling between the types file and the entities file is annoying. That's why you can initialize the store with the `autoCreateEntities` flag, which will automatically create an entity with the same id as the type name.
+
+```javascript
+const types = {
+  app: {
+    render(entity, api) {
+      return html`
+        <div class="app">${api.render("header")} ${api.render("content")}</div>
+      `
+    },
+  },
+
+  header: {
+    render(entity, api) {
+      return html`<header>${entity.title}</header>`
+    },
+  },
+
+  content: {
+    render(entity, api) {
+      return html`<main>${entity.text}</main>`
+    },
+  },
+}
+
+// Without autoCreateEntities - you need to define every entity
+const entities = {
+  app: { type: "app" },
+  header: { type: "header", title: "Welcome" },
+  content: { type: "content", text: "Hello World" },
+}
+
+// With autoCreateEntities - entities are created automatically
+const store = createStore({
+  types,
+  entities: {}, // Can be empty!
+  autoCreateEntities: true,
+})
+```
+
+If you want to initialize an entity with specific data, you can use the `init()` event handler:
+
+```javascript
+const header = {
+  init(entity) {
+    entity.title = "Welcome"
+  },
+
+  render(entity, api) {
+    return html`<header>${entity.title}</header>`
+  },
+}
+```
+
+The `init()` handler runs once when the entity is first created, making it perfect for setting up default values. This pattern works great for web apps where most entities are singletons that behave more like components than game objects.
+
+**When to use `autoCreateEntities` in web apps:**
+
+- ✅ Single-page applications with singleton services
+- ✅ Component-like entities (headers, footers, navigation)
+- ✅ Rapid prototyping where structure matters more than initial state
+- ✅ Apps where you want to focus on behavior, not boilerplate
+
+---
+
 ## API Reference
 
 **`mount(store, renderFn, element)`**
@@ -1506,7 +1574,8 @@ import {
   // from @inglorious/store
   createStore,
   createDevtools,
-  createSelector,
+  compute,
+  createSelector, // for Redux compatibility
   // from @inglorious/store/test
   trigger,
   // from lit-html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "4.0.11",
+  "version": "4.1.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",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@lit-labs/ssr-client": "^1.1.8",
     "lit-html": "^3.3.1",
-    "@inglorious/store": "9.0.1",
+    "@inglorious/store": "9.2.0",
     "@inglorious/utils": "3.7.2"
   },
   "devDependencies": {

package/src/index.js

@@ -1,6 +1,7 @@
 export { mount } from "./mount.js"
 export { createStore } from "@inglorious/store"
 export { createDevtools } from "@inglorious/store/client/devtools.js"
+export { compute } from "@inglorious/store/select.js"
 export { createSelector } from "@inglorious/store/select.js"
 export { trigger } from "@inglorious/store/test.js"
 export { html, svg } from "lit-html"

package/types/store.d.ts

@@ -7,6 +7,7 @@ export {
   TypesConfig,
 } from "@inglorious/store"
 
+export { compute } from "@inglorious/store/select"
 export { createSelector } from "@inglorious/store/select"
 export { trigger } from "@inglorious/store/test"