leanweb 1.2.4 → 1.2.7

package/README.md

@@ -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.4",
+   "version": "1.2.7",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",
@@ -35,10 +35,10 @@
       "node-watch": "^0.7.3",
       "parse5": "^7.0.0",
       "raw-loader": "^4.0.2",
-      "sass": "^1.54.3",
+      "sass": "^1.54.4",
       "sass-loader": "^13.0.2",
       "semver": "^7.3.7",
       "webpack": "^5.74.0",
-      "webpack-dev-server": "^4.9.3"
+      "webpack-dev-server": "^4.10.0"
    }
 }

package/templates/lib/lw-element.js

@@ -77,6 +77,7 @@ globalThis.addEventListener('hashchange', () => {
    leanweb.componentsListeningOnUrlChanges.forEach(component => {
       setTimeout(() => {
          component?.urlHashChanged?.call(component);
+         component?.update?.call(component);
       });
    });
 }, false);
@@ -97,7 +98,6 @@ const nextAllSiblings = (el, selector) => {
 };
 
 export default class LWElement extends HTMLElement {
-   self = this;
    constructor(ast) {
       super();
       this.ast = ast;
@@ -133,7 +133,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 +230,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 +261,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),