@dooboostore/dom-render 1.0.114 → 1.0.116

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2016-21 these people
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -63,21 +63,19 @@ state = result.rootObject;
 
 ## Public API (Root Export)
 
-`@dooboostore/dom-render` now exposes modules from root entry:
-
-- `components`
-- `configs`
-- `decorators`
-- `events`
-- `lifecycle`
-- `messenger`
-- `operators`
-- `rawsets`
-- `types`
-- `DomRender`
-- `DomRenderProxy`
-
-This enables single-entry usage without relying on package subpath exports.
+`@dooboostore/dom-render`'s root entry (`src/index.ts`) re-exports as flat named exports — there is no `components`/`configs`/etc. namespace object to import:
+
+```typescript
+import { DomRender, DomRenderProxy, ComponentBase, attribute, Appender, DomRenderConfig } from '@dooboostore/dom-render';
+```
+
+This covers: a selected set of built-in components/helpers (`If`, `This`, `AppenderComponent`, `PromiseSwitch`, `Choose`, `CheckBox`, `Radio`, `Select`, `Timer`, `Details`, `Input`, `Route`, `RouterOutlet`, `A`, `ComponentSet`, `ComponentRouterBase`, `ComponentBase`, `attribute`, and the combined `drComponent` map used to register them all at once), plus everything from `configs`, `decorators`, `events`, `lifecycle`, `messenger`, `operators` (including the `Appender` collection class), `rawsets`, `types`, `DomRender` and `DomRenderProxy`.
+
+The `query` and `event` decorators are **not** re-exported from the root; import them via the `./*` subpath export:
+
+```typescript
+import { query, event } from '@dooboostore/dom-render/components/ComponentBase';
+```
 
 ---
 
@@ -129,11 +127,11 @@ Conditional rendering based on expression truthiness.
 
 ### `dr-for`
 
-Classic loop-style directive.
+Classic `for(...)` loop. `dr-option-it` is evaluated per iteration and its value is substituted for `#it#` in the cloned markup.
 
 ```html
-<li dr-for="let i=0; i<@this@.items.length; i++" dr-option-it="@this@.items[i]">
-  ${destIt.name}$
+<li dr-for="let i=0; i<@this@.items.length; i++" dr-option-it="i">
+  ${@this@.items[#it#].name}$
 </li>
 ```
 
@@ -183,19 +181,24 @@ Strip wrapper element while preserving children.
 
 - `dr-inner-html`: bind `innerHTML`
 - `dr-inner-text`: bind `innerText`
-- `dr-attr`: bind attribute object
 - `dr-this`, `dr-this-property`: bind target context object
-- `dr-before`, `dr-after`: pre/post scripts around operator execution
+- `dr-option-before`, `dr-option-after`: pre/post scripts attached alongside another directive on the same element
+
+- `dr-value`, `dr-src`, `dr-checked`, `dr-selected`, `dr-readonly`, `dr-disabled`, `dr-hidden`, `dr-required`, `dr-open`, `dr-class`, `dr-style`: bind the corresponding property/attribute from an expression
+- `dr-attr="{key: expr, ...}"`: shorthand that expands each pair into `key="${expr}$"`
+
+Plain attributes can also be bound by putting a template expression inside the attribute value itself:
 
 ```html
 <div dr-inner-text="@this@.plainText"></div>
 <div dr-inner-html="@this@.trustedHtml"></div>
-<img dr-attr="{ src: @this@.imageUrl, alt: @this@.alt }" />
+<img src="${@this@.imageUrl}$" alt="${@this@.alt}$" />
+<img dr-attr="{src: @this@.imageUrl, alt: @this@.alt}" />
 ```
 
 ### Form utility (`dr-form`)
 
-`dr-form` wires fields and optional validator metadata.
+`dr-form` wires every `[name]` child to the target object (optionally with `Validator`/`ValidatorArray` from `@dooboostore/core`). Per-field options: `dr-form:name`, `dr-form:event` (default `change`), `dr-form:validator`.
 
 ```html
 <form dr-form="@this@.formState">
@@ -317,6 +320,7 @@ const userCard = DomRender.createComponent({
   template: `<div>${@this@.name}$</div>`
 });
 
+// DomRender.run({...}) is a shorthand that returns the proxied rootObject directly.
 const app = new DomRender({
   rootObject: { users: [] },
   target: document.querySelector('#app')!,
@@ -331,13 +335,16 @@ const app = new DomRender({
 Implement interfaces to receive lifecycle callbacks:
 
 - `onProxyDomRender(config)`
-- `onCreateRender(...args)`
+- `onCreateRender(...args)` / `onCreateRendered(...args)`
 - `onCreateRenderData(data)`
+- `onCreatedThisChild(child, childData)`
 - `onInitRender(param, rawSet)`
 - `onRawSetRendered(rawSet, otherData)`
-- `onChildRawSetRendered()`
+- `onChildRawSetRendered()` (interface in `lifecycle/OnChildRawSetRendered`, not re-exported from `lifecycle/index`)
+- `onChildRenderedByProperty(key, value)`
 - `onDestroyRender(params)`
 - `onChangeAttrRender(name, value, other)`
+- `onBeforeReturnGet(name, value, fullPath)` / `onBeforeReturnSet(name, value, fullPath)`
 
 ```typescript
 class ViewModel {
@@ -388,9 +395,9 @@ Use this when direct parent-child access is not suitable.
 
 This section is added for teams using both `dom-render` and `simple-web-component`.
 
-### `@addEventListener` (extended)
+### `@event` / `@addEventListener` (extended)
 
-`@addEventListener` is a decorator from `@dooboostore/simple-web-component`, not from `dom-render` directly.
+`@event` (alias of `@addEventListener`) is a decorator from `@dooboostore/simple-web-component`; it is unrelated to dom-render's own `@event({ query, name })`.
 
 In `dom-render`, equivalent patterns are:
 
@@ -425,9 +432,9 @@ updateRows(container: HTMLElement, nodes: Node[]) {
 
 For reactive templates, prefer declarative updates over manual replacement.
 
-### `@appendChild` (extended)
+### `@insertBeforeEnd` (extended)
 
-`@appendChild` is from `simple-web-component`.
+`simple-web-component` appends via `@insertBeforeEnd` (there is no `@appendChild` decorator).
 
 `dom-render` alternatives: