@inglorious/web 4.1.0 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +67 -0
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1474,6 +1474,73 @@ This hybrid approach gives you the best of both worlds: architectural consistenc
1474
1474
 
1475
1475
  ---
1476
1476
 
1477
+ ## Simplifying Entity Setup with `autoCreateEntities`
1478
+
1479
+ 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.
1480
+
1481
+ ```javascript
1482
+ const types = {
1483
+ app: {
1484
+ render(entity, api) {
1485
+ return html`
1486
+ <div class="app">${api.render("header")} ${api.render("content")}</div>
1487
+ `
1488
+ },
1489
+ },
1490
+
1491
+ header: {
1492
+ render(entity, api) {
1493
+ return html`<header>${entity.title}</header>`
1494
+ },
1495
+ },
1496
+
1497
+ content: {
1498
+ render(entity, api) {
1499
+ return html`<main>${entity.text}</main>`
1500
+ },
1501
+ },
1502
+ }
1503
+
1504
+ // Without autoCreateEntities - you need to define every entity
1505
+ const entities = {
1506
+ app: { type: "app" },
1507
+ header: { type: "header", title: "Welcome" },
1508
+ content: { type: "content", text: "Hello World" },
1509
+ }
1510
+
1511
+ // With autoCreateEntities - entities are created automatically
1512
+ const store = createStore({
1513
+ types,
1514
+ entities: {}, // Can be empty!
1515
+ autoCreateEntities: true,
1516
+ })
1517
+ ```
1518
+
1519
+ If you want to initialize an entity with specific data, you can use the `create()` event handler:
1520
+
1521
+ ```javascript
1522
+ const header = {
1523
+ create(entity) {
1524
+ entity.title = "Welcome"
1525
+ },
1526
+
1527
+ render(entity, api) {
1528
+ return html`<header>${entity.title}</header>`
1529
+ },
1530
+ }
1531
+ ```
1532
+
1533
+ The `create()` handler runs for each entity of that type 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.
1534
+
1535
+ **When to use `autoCreateEntities` in web apps:**
1536
+
1537
+ - ✅ Single-page applications with singleton services
1538
+ - ✅ Component-like entities (headers, footers, navigation)
1539
+ - ✅ Rapid prototyping where structure matters more than initial state
1540
+ - ✅ Apps where you want to focus on behavior, not boilerplate
1541
+
1542
+ ---
1543
+
1477
1544
  ## API Reference
1478
1545
 
1479
1546
  **`mount(store, renderFn, element)`**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inglorious/web",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
5
5
  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
6
6
  "license": "MIT",
@@ -68,7 +68,7 @@
68
68
  "dependencies": {
69
69
  "@lit-labs/ssr-client": "^1.1.8",
70
70
  "lit-html": "^3.3.1",
71
- "@inglorious/store": "9.1.0",
71
+ "@inglorious/store": "9.3.0",
72
72
  "@inglorious/utils": "3.7.2"
73
73
  },
74
74
  "devDependencies": {