leanweb 1.2.5 → 1.2.8

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" };
 // ...
 ```
@@ -388,7 +387,6 @@ checkedValues = [];
 checked = false;
 toggleCheckbox() {
     this.checked = !this.checked;
-    this.update();
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.2.5",
+   "version": "1.2.8",
    "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) {

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),