leanweb 1.2.3 → 1.2.6

package/README.md

@@ -253,8 +253,8 @@ items = ["one", "two", "three"];
 
 #### access DOM from lw-for
 
-`lw-for` binds the DOM to the list of elements respectively if `typeof element`
-evaluates `object`. To access the DOM node, use `element.getDom()`.
+You could access DOM nodes for each element in a `lw-for` loop by calling
+`elem.getDom()` as long as `typeof elem` evaluates `object`.
 
 ### lw-model and lw-on:
 
@@ -324,14 +324,13 @@ imageWidth = 400;
 `demo-parent.html`
 
 ```html
-<demo-child lw-input:parent="self" lw-input:userData="user"></demo-child>
+<demo-child lw-input:parent="this" lw-input:userData="user"></demo-child>
 ```
 
 `demo-parent.js`
 
 ```javascript
 // ...
-// self is defined in LWElement as `self = this`;
 user = { firstname: "Qian", lastname: "Chen" };
 // ...
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.2.3",
+   "version": "1.2.6",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",

package/templates/lib/lw-element.js

@@ -97,7 +97,6 @@ const nextAllSiblings = (el, selector) => {
 };
 
 export default class LWElement extends HTMLElement {
-   self = this;
    constructor(ast) {
       super();
       this.ast = ast;
@@ -133,7 +132,7 @@ export default class LWElement extends HTMLElement {
 
    _getNodeContext(node) {
       const contextNode = node.closest('[lw-context]');
-      return contextNode?.['lw-context'] ?? [this, globalThis];
+      return contextNode?.['lw-context'] ?? [{ 'this': this }, this, globalThis];
    }
 
    update(rootNode = this.shadowRoot) {
@@ -230,10 +229,9 @@ export default class LWElement extends HTMLElement {
             }
             eventNode[attrName] = true;
             const interpolation = this.ast[attrValue];
-
-            const context = this._getNodeContext(eventNode);
             interpolation.lwValue.split(',').forEach(eventType => {
                eventNode.addEventListener(eventType.trim(), (event => {
+                  const context = this._getNodeContext(eventNode);
                   const eventContext = { '$event': event, '$node': eventNode };
                   const parsed = parser.evaluate(interpolation.ast, [eventContext, ...context], interpolation.loc);
 
@@ -262,8 +260,8 @@ export default class LWElement extends HTMLElement {
       }
       modelNode['model_event_bound'] = true;
       const interpolation = this.ast[key];
-      const context = this._getNodeContext(modelNode);
       modelNode.addEventListener('input', (event => {
+         const context = this._getNodeContext(modelNode);
          const astModel = interpolation.ast[0].expression;
          let object;
          let propertyExpr;

package/templates/lib/lw-expr-parser.js

@@ -127,6 +127,14 @@ const nodeHandlers = {
          return context[node.name];
       }
    },
+   'ThisExpression': (node, context) => {
+      if (Array.isArray(context)) {
+         const hitContext = context.find(contextObj => 'this' in contextObj);
+         return hitContext ? hitContext['this'] : undefined;
+      } else if (typeof context === 'object') {
+         return context['this'];
+      }
+   },
 
    'CallExpression': (node, context) => callFunction(node, context),
    'OptionalCallExpression': (node, context) => callFunction(node, context),