fix mobx issue where defaults/define-vars was updating state during r…

…ender. new createspecials datactx function which creates a new context map without using setPathInternal (so it is mobx safe). fixed issue with nested lvalues (bulma modalbutton)

changelog.md

@@ -18,6 +18,7 @@
 * added innerhtml and outerhtml to node var
 * bugfix: class.[class] was not being properly set to false when set to the Hibiki value false
 * bugfix: and/or operators were not correctly evaluating 'noattr' as false
+* bugfix: fix component defaults, define-vars, and h-withcontext, to never update mobx state
 
 ## v0.2.0
 

src/datactx.ts

@@ -2789,25 +2789,19 @@ function ParseContextAssignListThrow(ctxStr : string) : {key : string, expr : HE
     return actions;
 }
 
-function ParseAndCreateContextThrow(ctxStr : string, rootName : "context" | "c", dataenv : DataEnvironment, htmlContext : string) : DataEnvironment {
-    let ctxDataenv : DataEnvironment = null;
-    if (rootName === "context") {
-        ctxDataenv = dataenv.makeChildEnv({}, {htmlContext: htmlContext});
-    }
-    else {
-        ctxDataenv = dataenv;
-    }
+function ParseAndCreateSpecialsThrow(ctxStr : string, dataenv : DataEnvironment, htmlContext : string) : HibikiValObj {
     let caList = ParseContextAssignListThrow(ctxStr);
     let rtctx = new RtContext();
     rtctx.pushContext(htmlContext, null);
+    let specials : HibikiValObj = {};
     for (let i=0; i<caList.length; i++) {
         let caVal = caList[i];
-        let expr = evalExprAst(caVal.expr, ctxDataenv, "natural");
-        let setop = caVal.setop ?? "set";
-        let path : PathType = [{pathtype: "root", pathkey: rootName}, {pathtype: "map", pathkey: caVal.key}];
-        setPathWrapper(setop, path, ctxDataenv, expr, {allowContext: true});
+        let evalDataenv = dataenv.makeChildEnv(specials, {htmlContext: htmlContext});
+        let expr = evalExprAst(caVal.expr, evalDataenv, "natural");
+        let specialKey = caVal.key;
+        specials[specialKey] = expr;
     }
-    return ctxDataenv;
+    return specials;
 }
 
 function EvalSimpleExpr(exprStr : string, dataenv : DataEnvironment, rtContext? : string) : any {
@@ -2995,7 +2989,7 @@ function setLValue(lv : LValue, setVal : HibikiVal) : void {
     rlv.set(setVal);
 }
 
-export {ParsePath, ResolvePath, SetPath, ParsePathThrow, ResolvePathThrow, SetPathThrow, StringPath, JsonStringify, EvalSimpleExpr, ParseSetPathThrow, ParseSetPath, HibikiBlob, ObjectSetPath, DeepEqual, DeepCopy, CheckCycle, LValue, BoundLValue, ObjectLValue, ReadOnlyLValue, getShortEMsg, CreateReadOnlyLValue, demobx, BlobFromRRA, ExtBlobFromRRA, isObject, convertSimpleType, ParseStaticCallStatement, evalExprAst, ParseAndCreateContextThrow, BlobFromBlob, formatVal, ExecuteHandlerBlock, ExecuteHAction, makeIteratorFromExpr, rawAttrStr, getUnmergedAttributeStr, getUnmergedAttributeValPair, SYM_NOATTR, HActionBlock, valToString, valToBool, compileActionStr, FireEvent, makeErrorObj, OpaqueValue, ChildrenVar, Watcher, LambdaValue, blobPrintStr, asNumber, hibikiTypeOf, JsonReplacerFn, valToAttrStr, resolveLValue, resolveUnmergedCnArray, isUnmerged, resolveUnmergedStyleMap, asStyleMap, asStyleMapFromPair};
+export {ParsePath, ResolvePath, SetPath, ParsePathThrow, ResolvePathThrow, SetPathThrow, StringPath, JsonStringify, EvalSimpleExpr, ParseSetPathThrow, ParseSetPath, HibikiBlob, ObjectSetPath, DeepEqual, DeepCopy, CheckCycle, LValue, BoundLValue, ObjectLValue, ReadOnlyLValue, getShortEMsg, CreateReadOnlyLValue, demobx, BlobFromRRA, ExtBlobFromRRA, isObject, convertSimpleType, ParseStaticCallStatement, evalExprAst, BlobFromBlob, formatVal, ExecuteHandlerBlock, ExecuteHAction, makeIteratorFromExpr, rawAttrStr, getUnmergedAttributeStr, getUnmergedAttributeValPair, SYM_NOATTR, HActionBlock, valToString, valToBool, compileActionStr, FireEvent, makeErrorObj, OpaqueValue, ChildrenVar, Watcher, LambdaValue, blobPrintStr, asNumber, hibikiTypeOf, JsonReplacerFn, valToAttrStr, resolveLValue, resolveUnmergedCnArray, isUnmerged, resolveUnmergedStyleMap, asStyleMap, asStyleMapFromPair, ParseAndCreateSpecialsThrow};
 
 export type {PathType, HAction, HExpr, HIteratorExpr};
 

src/dbctx.ts

@@ -675,26 +675,17 @@ class DBCtx {
         this.dataenv.dbstate.NodeDataMap.delete(this.uuid);
     }
 
-    getNodeData(compName : string) : mobx.IObservableValue<HibikiVal> {
+    getNodeData(compName : string, defaultsObj? : HibikiValObj) : mobx.IObservableValue<HibikiValObj> {
         let box = this.dataenv.dbstate.NodeDataMap.get(this.uuid);
         if (box == null) {
             let uuidName = "id_" + this.uuid.replace(/-/g, "_");
-            box = mobx.observable.box({_hibiki: {"customtag": compName, uuid: this.uuid}}, {name: uuidName});
+            let nodeData = Object.assign({}, defaultsObj, {_hibiki: {"customtag": compName, uuid: this.uuid}});
+            box = mobx.observable.box(nodeData, {name: uuidName});
             this.dataenv.dbstate.NodeDataMap.set(this.uuid, box);
         }
         return box;
     }
 
-    getNodeDataLV(compName : string) : DataCtx.ObjectLValue {
-        let box = this.dataenv.dbstate.NodeDataMap.get(this.uuid);
-        if (box == null) {
-            let uuidName = "id_" + this.uuid.replace(/-/g, "_");
-            box = mobx.observable.box({_hibiki: {"customtag": compName, uuid: this.uuid}}, {name: uuidName});
-            this.dataenv.dbstate.NodeDataMap.set(this.uuid, box);
-        }
-        return new DataCtx.ObjectLValue(null, box);
-    }
-
     makeNodeVar(withAttrs : boolean) : HibikiValObj {
         let node = this.node;
         if (node == null) {
@@ -770,13 +761,12 @@ function bindSingleNode(node : HibikiNode, dataenv : DataEnvironment, injectedAt
             return [makeErrorDBCtx("<define-vars> no context attribute", dataenv), false, null];
         }
         try {
-            let ctxDataenv = DataCtx.ParseAndCreateContextThrow(contextAttr, "context", dataenv, "<define-vars>");
-            return [null, false, ctxDataenv];
+            let specials = DataCtx.ParseAndCreateSpecialsThrow(contextAttr, dataenv, "<define-vars>");
+            return [null, false, dataenv.makeChildEnv(specials, {htmlContext: "<define-vars>"})];
         }
         catch (e) {
             return [makeErrorDBCtx("<define-vars> Error parsing/executing context block: " + e, dataenv), false, null];
         }
-        return [null, false, null];
     }
     if (node.tag === "define-handler") {
         if (!isRoot) {
@@ -837,8 +827,7 @@ function expandChildrenNode(ctx : DBCtx) : DBCtx[] {
     let contextattr = ctx.resolveAttrStr("datacontext");
     if (contextattr != null) {
         try {
-            let ctxEnv = DataCtx.ParseAndCreateContextThrow(contextattr, "context", ctx.dataenv, nodeStr(ctx.node));
-            ctxSpecials = ctxEnv.specials;
+            ctxSpecials = DataCtx.ParseAndCreateSpecialsThrow(contextattr, ctx.dataenv, nodeStr(ctx.node));
         }
         catch (e) {
             let msg = nodeStr(ctx.node) + " Error parsing/executing context block: " + e;

src/nodes.tsx

@@ -17,7 +17,7 @@ import {parseHtml, HibikiNode, NodeAttrType} from "./html-parser";
 import * as NodeUtils from "./nodeutils";
 import {RtContext, HibikiError} from "./error";
 import type {HAction} from "./datactx";
-import type {EHandlerType} from "./state";
+import type {EHandlerType, DataEnvironmentOpts} from "./state";
 
 declare var window : any;
 
@@ -629,14 +629,13 @@ class CustomNode extends React.Component<HibikiReactProps & {component : Compone
         let ctxHandlers = NodeUtils.makeHandlers(ctx.node, ctx.injectedAttrs, null, null);
         let eventCtx = sprintf("%s", nodeStr(ctx.node));
         let eventDE = ctx.dataenv.makeChildEnv(null, {eventBoundary: "hard", handlers: ctxHandlers, htmlContext: eventCtx});
-        let nodeDataLV = ctx.getNodeDataLV(componentName);
         let specials : Record<string, any> = {};
         specials.children = ctx.makeChildrenVar();
         specials.node = nodeVar;
         let argsRoot = resolveArgsRoot(ctx);
         let handlers = NodeUtils.makeHandlers(implNode, null, component.libName, ["event"]);
-        let envOpts = {
-            componentRoot: unbox(ctx.getNodeData(componentName)),
+        let envOpts : DataEnvironmentOpts = {
+            componentRoot: {},
             argsRoot: argsRoot,
             handlers: handlers,
             htmlContext: sprintf("<define-component %s>", componentName),
@@ -645,15 +644,22 @@ class CustomNode extends React.Component<HibikiReactProps & {component : Compone
         };
         let childEnv = eventDE.makeChildEnv(specials, envOpts);
         if (initialize && rawImplAttrs.defaults != null) {
+            let htmlContext = sprintf("<define-component %s>:defaults", componentName);
+            let defaultsObj = {};
             try {
-                DataCtx.ParseAndCreateContextThrow(DataCtx.rawAttrStr(rawImplAttrs.defaults), "c", childEnv, sprintf("<define-component %s>:defaults", componentName));
+                let defaultsStr = DataCtx.rawAttrStr(rawImplAttrs.defaults);
+                defaultsObj = DataCtx.ParseAndCreateSpecialsThrow(defaultsStr, childEnv, htmlContext);
             }
             catch (e) {
                 console.log(sprintf("ERROR parsing/executing 'defaults' in <define-component %s>", componentName), e);
             }
+            childEnv.componentRoot = unbox(ctx.getNodeData(componentName, defaultsObj));
             let implCtx = makeCustomDBCtx(implNode, childEnv, null);
             implCtx.handleInitEvent();
         }
+        else {
+            childEnv.componentRoot = unbox(ctx.getNodeData(componentName));
+        }
         return childEnv;
     }
 
@@ -755,7 +761,8 @@ class WithContextNode extends React.Component<HibikiReactProps, {}> {
             return <ErrorMsg message={sprintf("%s no context attribute", nodeStr(ctx.node))}/>;
         }
         try {
-            let ctxDataenv = DataCtx.ParseAndCreateContextThrow(contextattr, "context", ctx.dataenv, nodeStr(ctx.node));
+            let specials = DataCtx.ParseAndCreateSpecialsThrow(contextattr, ctx.dataenv, nodeStr(ctx.node));
+            let ctxDataenv = ctx.dataenv.makeChildEnv(specials, {htmlContext: nodeStr(ctx.node)});
             return ctxRenderHtmlChildren(ctx, ctxDataenv);
         }
         catch (e) {

src/state.ts

@@ -883,7 +883,7 @@ class HibikiState {
     DataNodeStates : Record<string, {query : string, dnstate : any}> = {};
     ResourceCache : Record<string, boolean> = {};
     HasRendered = false;
-    NodeDataMap : Map<string, mobx.IObservableValue<HibikiVal>> = new Map();  // TODO clear on unmount
+    NodeDataMap : Map<string, mobx.IObservableValue<HibikiValObj>> = new Map();
     ExtHtmlObj : mobx.ObservableMap<string,any> = mobx.observable.map({}, {name: "ExtHtmlObj", deep: false});
     Config : HibikiConfig = {};
     PageName : mobx.IObservableValue<string> = mobx.observable.box("default", {name: "PageName"});
@@ -1337,4 +1337,4 @@ function hasHtmlRR(rra : any[]) : boolean {
 
 
 export {HibikiState, DataEnvironment, HibikiExtState};
-export type {EHandlerType};
+export type {EHandlerType, DataEnvironmentOpts};

static/libs/bulma.html

@@ -3,7 +3,7 @@
     <div class="control" unwrap="!$args.control" automerge="control">
       <button component="*$args.buttoncomponent" class="button" automerge click.handler="fire->click()">
         <span if="$args.icon" class="icon" automerge="icon"><i class="*$args.icon"></i></span>
-        <h-fragment if="!!$args.icon && fn:len(@children.list) > 0">
+        <h-fragment if="!!$args.icon && @children.size">
           <span><h-children bind="@children"></h-children></span>
         </h-fragment>
         <h-fragment if="!$args.icon">
@@ -132,10 +132,10 @@
     <div class="dropdown" automerge class.is-active="* @active" active="*@active" hibiki-mark>
       <div class="dropdown-trigger">
         <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" click.handler="log('menu-click'); @active = !@active">
-          <h-if condition="fn:len(@activechildren.list) > 0">
+          <h-if condition="@activechildren.size">
             <h-children bind="@activechildren.first" datacontext="@label=true"></h-children>
           </h-if>
-          <h-if condition="fn:len(@activechildren.list) == 0">
+          <h-if condition="!@activechildren.size">
             <span if="$args.label">{{ $args.label }}</span>
             <h-children bind="@children.byslot['label']"></h-children>
           </h-if>
@@ -196,10 +196,13 @@
   </define-component>
 
   <define-component name="modalbutton" defaults="show=false;">
-    <local-modal show="*ref($c.show)">
+    <define-vars>
+      @show = raw($args.show) ?? ref($c.show);
+    </define-vars>
+    <local-modal show="*@show">
       <h-children bind="@children.noslot"></h-children>
     </local-modal>
-    <button if="!$.show_modal" class="button" automerge="button" click.handler="$c.show = true;">
+    <button if="!$.show_modal" class="button" automerge="button" click.handler="@show = true;">
       <h-children text="*$args.label" bind="@children.byslot['label']"></h-children>
     </button>
   </define-component>