leanweb 1.2.9 → 1.3.2

package/commands/init.js

@@ -103,7 +103,8 @@ const require = createRequire(import.meta.url);
       });
       console.log('\nSome useful commands:');
       console.log('"lw s" to start the dev server.');
-      console.log('"lw d" to build for production. The output will be in dist/ directory.');
+      console.log('"lw di" to build for production. The output will be in dist/ directory.');
       console.log('"lw g my-new-component" to generate a new standard web component.');
+      console.log('"lw h" to get more help information.');
    }
 })();

package/package.json

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

package/templates/lib/lw-element.js

@@ -143,7 +143,6 @@ export default class LWElement extends HTMLElement {
                this._bindModels(rootNode);
                this._bindEvents(rootNode);
                this._bindInputs(rootNode);
-               rootNode.removeAttribute('lw-elem-bind');
             }
             if (rootNode.hasAttribute('lw-if')) {
                this.updateIf(rootNode);
@@ -162,11 +161,17 @@ export default class LWElement extends HTMLElement {
       const treeWalker = document.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT, {
          acceptNode: node => {
             if (node.hasAttribute('lw-elem')) {
+               if (node.hasAttribute('lw-for')) {
+                  this.updateFor(node);
+                  return NodeFilter.FILTER_REJECT;
+               }
+               if (node.hasAttribute('lw-for-parent')) {
+                  return NodeFilter.FILTER_REJECT;
+               }
                if (node.hasAttribute('lw-elem-bind')) {
                   this._bindModels(node);
                   this._bindEvents(node);
                   this._bindInputs(node);
-                  node.removeAttribute('lw-elem-bind');
                }
                if (node.hasAttribute('lw-if')) {
                   this.updateIf(node);
@@ -174,13 +179,6 @@ export default class LWElement extends HTMLElement {
                if (node.hasAttribute('lw-false')) {
                   return NodeFilter.FILTER_REJECT;
                }
-               if (node.hasAttribute('lw-for-parent')) {
-                  return NodeFilter.FILTER_REJECT;
-               }
-               if (node.hasAttribute('lw-for')) {
-                  this.updateFor(node);
-                  return NodeFilter.FILTER_REJECT;
-               }
                this.updateEval(node);
                this.updateClass(node);
                this.updateBind(node);
@@ -202,7 +200,13 @@ export default class LWElement extends HTMLElement {
       });
    }
 
+   // properties:
+   // lw_input_bound: boolean
    _bindInputs(inputNode) {
+      if (inputNode['lw_input_bound']) {
+         return;
+      }
+      inputNode['lw_input_bound'] = true;
       for (const attr of inputNode.attributes) {
          const attrName = attr.name;
          const attrValue = attr.value;
@@ -218,31 +222,32 @@ export default class LWElement extends HTMLElement {
    }
 
    // properties:
-   // lw-on:click: true
+   // lw_event_bound: boolean
    _bindEvents(eventNode) {
+      if (eventNode['lw_event_bound']) {
+         return;
+      }
+      eventNode['lw_event_bound'] = true;
       const me = this;
       for (const attr of eventNode.attributes) {
          const attrName = attr.name;
          const attrValue = attr.value;
          if (attrName.startsWith('lw-on:')) {
-            if (eventNode[attrName]) {
-               continue;
-            }
-            eventNode[attrName] = true;
             const interpolation = this.ast[attrValue];
             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);
-
-                  const promises = parsed.filter(p => typeof p?.then === 'function');
+                  const promises = parsed.filter(p => typeof p?.then === 'function' && typeof p?.finally === 'function');
                   if (parsed.length > promises.length) {
                      me.update();
                   }
-                  if (promises.length > 0) {
-                     Promise.allSettled(promises).then(_ => me.update());
-                  }
+                  promises.forEach(p => {
+                     p?.finally(() => {
+                        me.update();
+                     });
+                  });
                }).bind(me));
             });
          }
@@ -250,16 +255,16 @@ export default class LWElement extends HTMLElement {
    }
 
    // properties:
-   // model_event_bound: boolean
+   // lw_model_bound: boolean
    _bindModels(modelNode) {
       const key = modelNode.getAttribute('lw-model');
       if (!key) {
          return;
       }
-      if (modelNode['model_event_bound']) {
+      if (modelNode['lw_model_bound']) {
          return;
       }
-      modelNode['model_event_bound'] = true;
+      modelNode['lw_model_bound'] = true;
       const interpolation = this.ast[key];
       modelNode.addEventListener('input', (event => {
          const context = this._getNodeContext(modelNode);

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

@@ -24,6 +24,25 @@ const binaryOperations = {
    //  '|>': (a, b) => a |> b,
 };
 
+const assignmentOperations = {
+   '=': (c, a, b) => { c[a] = b; },
+   '+=': (c, a, b) => { c[a] += b; },
+   '-=': (c, a, b) => { c[a] -= b; },
+   '*=': (c, a, b) => { c[a] *= b; },
+   '/=': (c, a, b) => { c[a] /= b; },
+   '%=': (c, a, b) => { c[a] %= b; },
+   '**=': (c, a, b) => { c[a] **= b; },
+   '&&=': (c, a, b) => { c[a] &&= b; },
+   '??=': (c, a, b) => { c[a] ??= b; },
+   '||=': (c, a, b) => { c[a] ||= b; },
+   '>>=': (c, a, b) => { c[a] >>= b; },
+   '>>>=': (c, a, b) => { c[a] >>>= b; },
+   '<<=': (c, a, b) => { c[a] <<= b; },
+   '&=': (c, a, b) => { c[a] &= b; },
+   '|=': (c, a, b) => { c[a] |= b; },
+   '^=': (c, a, b) => { c[a] ^= b; },
+};
+
 const logicalOperators = {
    '||': (a, b) => a || b,
    '&&': (a, b) => a && b,
@@ -43,9 +62,9 @@ const unaryOperators = {
 
 const updateOperators = (operator, prefix) => {
    if (operator === '++') {
-      return prefix ? a => ++a : a => a++;
+      return (c, a) => prefix ? ++c[a] : c[a]++;
    } else if (operator === '--') {
-      return prefix ? a => --a : a => a--;
+      return (c, a) => prefix ? --c[a] : c[a]--;
    }
 };
 
@@ -75,9 +94,16 @@ const nodeHandlers = {
 
    'ExpressionStatement': (node, context) => evalNode(node.expression, context),
    'BinaryExpression': (node, context) => binaryOperations[node.operator](evalNode(node.left, context), evalNode(node.right, context)),
+   'AssignmentExpression': (node, context) => {
+      const immediateCtx = immediateContext(node.left, context);
+      assignmentOperations[node.operator](immediateCtx, node.left.name, evalNode(node.right, context));
+   },
    'LogicalExpression': (node, context) => logicalOperators[node.operator](evalNode(node.left, context), evalNode(node.right, context)),
    'UnaryExpression': (node, context) => unaryOperators[node.operator](evalNode(node.argument, context)),
-   'UpdateExpression': (node, context) => updateOperators(node.operator, node.prefix)(evalNode(node.argument, context)),
+   'UpdateExpression': (node, context) => {
+      const immediateCtx = immediateContext(node.argument, context);
+      updateOperators(node.operator, node.prefix)(immediateCtx, node.argument.name, evalNode(node.argument, context));
+   },
    'ConditionalExpression': (node, context) => {
       const test = evalNode(node.test, context);
       const consequent = evalNode(node.consequent, context);
@@ -144,6 +170,14 @@ const nodeHandlers = {
    'DirectiveLiteral': (node, context) => node.value,
 };
 
+const immediateContext = (node, context) => {
+   if (Array.isArray(context)) {
+      return context.find(contextObj => node.name in contextObj);
+   } else if (typeof context === 'object') {
+      return context;
+   }
+}
+
 const evalNode = (node, context) => nodeHandlers[node.type](node, context);
 
 const evaluate = (ast, context = {}, loc = {}) => {