@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.
- package/README.md +67 -0
- 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.
|
|
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.
|
|
71
|
+
"@inglorious/store": "9.3.0",
|
|
72
72
|
"@inglorious/utils": "3.7.2"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|