@jxsuite/studio 0.22.1 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -31,9 +31,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.22.1",
-    "@jxsuite/runtime": "^0.22.1",
-    "@jxsuite/schema": "^0.22.1",
+    "@jxsuite/parser": "^0.23.0",
+    "@jxsuite/runtime": "^0.23.0",
+    "@jxsuite/schema": "^0.23.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/panels/events-panel.js

@@ -3,6 +3,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transactDoc, mutateUpdateProperty } from "../tabs/transact.js";
+import { renderExpressionEditor } from "../ui/expression-editor.js";
 
 export const EVENT_NAMES = [
   "onclick",
@@ -66,7 +67,7 @@ export function eventsSidebarTemplate(helpers) {
     if (!k.startsWith("on")) return false;
     const v = node[k];
     if (!v || typeof v !== "object") return false;
-    return v.$ref || v.$prototype === "Function";
+    return v.$ref || v.$prototype === "Function" || v.$expression;
   });
 
   return html`
@@ -79,6 +80,8 @@ export function eventsSidebarTemplate(helpers) {
         ${eventKeys.map((evKey) => {
           const evVal = node[evKey];
           const isInline = evVal.$prototype === "Function";
+          const isExpression = evVal.$expression != null;
+          const currentMode = isInline ? "inline" : isExpression ? "$expression" : "ref";
           return html`
             <div class="event-binding">
               <div class="event-row">
@@ -103,9 +106,10 @@ export function eventsSidebarTemplate(helpers) {
                 <sp-picker
                   size="s"
                   class="event-mode"
-                  .value=${live(isInline ? "inline" : "ref")}
+                  .value=${live(currentMode)}
                   @change=${(/** @type {Event} */ e) => {
-                    if (/** @type {HTMLInputElement} */ (e.target).value === "inline") {
+                    const newMode = /** @type {HTMLInputElement} */ (e.target).value;
+                    if (newMode === "inline") {
                       transactDoc(activeTab.value, (t) =>
                         mutateUpdateProperty(t, selection, evKey, {
                           $prototype: "Function",
@@ -113,6 +117,12 @@ export function eventsSidebarTemplate(helpers) {
                           parameters: [],
                         }),
                       );
+                    } else if (newMode === "$expression") {
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateProperty(t, selection, evKey, {
+                          $expression: { operator: "=", target: null },
+                        }),
+                      );
                     } else {
                       const firstFn = functionDefs[0];
                       transactDoc(activeTab.value, (t) =>
@@ -127,6 +137,7 @@ export function eventsSidebarTemplate(helpers) {
                   }}
                 >
                   <sp-menu-item value="inline">inline</sp-menu-item>
+                  <sp-menu-item value="$expression">$expression</sp-menu-item>
                   <sp-menu-item value="ref">$ref</sp-menu-item>
                 </sp-picker>
                 <sp-action-button
@@ -176,35 +187,50 @@ export function eventsSidebarTemplate(helpers) {
                       </sp-action-button>
                     </div>
                   `
-                : html`
-                    <sp-picker
-                      size="s"
-                      class="event-handler"
-                      .value=${live(evVal.$ref || "__none__")}
-                      @change=${(/** @type {Event} */ e) => {
-                        if (
-                          /** @type {HTMLInputElement} */ (e.target).value &&
-                          /** @type {HTMLInputElement} */ (e.target).value !== "__none__"
-                        ) {
-                          transactDoc(activeTab.value, (t) =>
-                            mutateUpdateProperty(t, selection, evKey, {
-                              $ref: /** @type {HTMLInputElement} */ (e.target).value,
-                            }),
-                          );
-                        } else {
-                          transactDoc(activeTab.value, (t) =>
-                            mutateUpdateProperty(t, selection, evKey, undefined),
-                          );
-                        }
-                      }}
-                    >
-                      <sp-menu-item value="__none__">— none —</sp-menu-item>
-                      ${functionDefs.map(
-                        ([fName]) =>
-                          html`<sp-menu-item value=${`#/state/${fName}`}>${fName}</sp-menu-item>`,
-                      )}
-                    </sp-picker>
-                  `}
+                : isExpression
+                  ? html`
+                      <div class="event-body-row">
+                        ${renderExpressionEditor(
+                          evVal.$expression,
+                          (/** @type {any} */ newNode) =>
+                            transactDoc(activeTab.value, (t) =>
+                              mutateUpdateProperty(t, selection, evKey, {
+                                $expression: newNode,
+                              }),
+                            ),
+                          { stateDefs: Object.keys(defs), allowEventRef: true },
+                        )}
+                      </div>
+                    `
+                  : html`
+                      <sp-picker
+                        size="s"
+                        class="event-handler"
+                        .value=${live(evVal.$ref || "__none__")}
+                        @change=${(/** @type {Event} */ e) => {
+                          if (
+                            /** @type {HTMLInputElement} */ (e.target).value &&
+                            /** @type {HTMLInputElement} */ (e.target).value !== "__none__"
+                          ) {
+                            transactDoc(activeTab.value, (t) =>
+                              mutateUpdateProperty(t, selection, evKey, {
+                                $ref: /** @type {HTMLInputElement} */ (e.target).value,
+                              }),
+                            );
+                          } else {
+                            transactDoc(activeTab.value, (t) =>
+                              mutateUpdateProperty(t, selection, evKey, undefined),
+                            );
+                          }
+                        }}
+                      >
+                        <sp-menu-item value="__none__">— none —</sp-menu-item>
+                        ${functionDefs.map(
+                          ([fName]) =>
+                            html`<sp-menu-item value=${`#/state/${fName}`}>${fName}</sp-menu-item>`,
+                        )}
+                      </sp-picker>
+                    `}
             </div>
           `;
         })}

package/src/panels/right-panel.js

@@ -108,12 +108,14 @@ export function unmount() {
   _lastTab = null;
 }
 
+let _rafId = 0;
+
 export function render() {
   if (!_ctx) return;
   if (_rendering) return;
   if (!_scheduled) {
     _scheduled = true;
-    queueMicrotask(_flush);
+    _rafId = requestAnimationFrame(_flush);
   }
 }
 
@@ -143,8 +145,10 @@ function _ensureContainers() {
 
 function _flush() {
   _scheduled = false;
+  _rafId = 0;
   if (!_ctx) return;
   if (_rendering) return;
+  if (_hasFocus || isColorPopoverOpen()) return;
   _rendering = true;
   try {
     const ctx = /** @type {RightPanelCtx} */ (_ctx);

package/src/panels/signals-panel.js

@@ -18,6 +18,7 @@ import {
   mutateRenameDef,
 } from "../tabs/transact.js";
 import { renderFieldRow } from "../ui/field-row.js";
+import { renderExpressionEditor, expressionHint } from "../ui/expression-editor.js";
 import { renderMediaPicker } from "../ui/media-picker.js";
 import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.js";
 
@@ -118,6 +119,7 @@ const DEF_TEMPLATES = /** @type {Record<string, SignalDef>} */ ({
   map: { $prototype: "Map", default: {} },
   formData: { $prototype: "FormData", fields: {} },
   function: { $prototype: "Function", body: "", parameters: [] },
+  expression: { $expression: { operator: "=", target: null } },
   external: { $prototype: "", $src: "" },
 });
 
@@ -148,6 +150,7 @@ const STUDIO_RESERVED_KEYS = new Set([
 export function defCategory(def) {
   if (!def) return "state";
   const d = /** @type {SignalDef} */ (def);
+  if (d.$expression) return "expression";
   if (d.$handler || d.$prototype === "Function") return "function";
   if (d.$compute) return "computed";
   if (d.$prototype) return "data";
@@ -162,6 +165,7 @@ export function defCategory(def) {
 export function defBadgeLabel(def) {
   if (!def) return "S";
   const d = /** @type {SignalDef} */ (def);
+  if (d.$expression) return "E";
   if (d.$handler || d.$prototype === "Function") return "F";
   if (d.$compute) return "C";
   if (d.$prototype) return d.$prototype.charAt(0);
@@ -176,6 +180,7 @@ export function defBadgeLabel(def) {
  */
 export function defHint(name, def) {
   if (!def) return "";
+  if (def.$expression) return expressionHint(def.$expression);
   if (def.$prototype === "Function") {
     if (def.body) return def.body.length > 20 ? def.body.slice(0, 20) + "..." : def.body;
     if (def.$src) return def.$src;
@@ -314,6 +319,7 @@ export function renderSignalsTemplate(S, ctx) {
     state: [],
     computed: [],
     data: [],
+    expression: [],
     function: [],
   });
   for (const [name, def] of entries) {
@@ -324,6 +330,7 @@ export function renderSignalsTemplate(S, ctx) {
     { key: "state", label: "State", items: groups.state },
     { key: "computed", label: "Computed", items: groups.computed },
     { key: "data", label: "Data", items: groups.data },
+    { key: "expression", label: "Expressions", items: groups.expression },
     { key: "function", label: "Functions", items: groups.function },
   ];
 
@@ -462,6 +469,7 @@ export function renderSignalsTemplate(S, ctx) {
                 )}`
             : nothing}
           <sp-menu-divider></sp-menu-divider>
+          <sp-menu-item value="expression">Expression</sp-menu-item>
           <sp-menu-item value="function">Function</sp-menu-item>
         </sp-picker>
       </div>
@@ -697,6 +705,16 @@ function renderSignalEditorTemplate(
     fields = renderDataSourceFields(S, name, def, textareaRow, pickerRow, ctx);
   } else if (cat === "function") {
     fields = renderFunctionFields(S, name, def, textareaRow, ctx);
+  } else if (cat === "expression") {
+    const exprNode = def.$expression || { operator: "=", target: null };
+    fields = html`
+      ${renderExpressionEditor(
+        exprNode,
+        (/** @type {any} */ newNode) =>
+          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $expression: newNode })),
+        { stateDefs: Object.keys(S.document.state || {}), allowEventRef: false },
+      )}
+    `;
   }
 
   return html`${nameField}${fields}`;

package/src/store.js

@@ -131,7 +131,11 @@ export function stripEventHandlers(node) {
   /** @type {Record<string, unknown>} */
   const out = {};
   for (const [k, v] of Object.entries(node)) {
-    if (k.startsWith("on") && typeof v === "object" && (v?.$ref || v?.$prototype === "Function"))
+    if (
+      k.startsWith("on") &&
+      typeof v === "object" &&
+      (v?.$ref || v?.$prototype === "Function" || v?.$expression)
+    )
       continue;
     if (k === "children") {
       out.children = Array.isArray(v) ? v.map(stripEventHandlers) : stripEventHandlers(v);

package/src/studio.js

@@ -368,8 +368,9 @@ initWelcome({
   cloneRepository: () => cloneRepository({ openRecentProject }),
 });
 
-// Effect-driven canvas rendering: auto-triggers renderCanvas when reactive deps change
-let _canvasRenderScheduled = false;
+// Effect-driven canvas rendering: auto-triggers renderCanvas when reactive deps change.
+// Uses double-RAF so the canvas render yields to higher-priority panel paints first.
+let _canvasRafId = 0;
 effect(() => {
   const tab = activeTab.value;
   if (tab) {
@@ -383,15 +384,16 @@ effect(() => {
     void tab.session.ui.stylebookFilter;
     void tab.session.ui.stylebookCustomizedOnly;
   }
-  if (!_canvasRenderScheduled) {
-    _canvasRenderScheduled = true;
-    queueMicrotask(() => {
-      _canvasRenderScheduled = false;
-      try {
-        renderCanvas();
-      } catch (e) {
-        console.error("renderCanvas error:", e);
-      }
+  if (!_canvasRafId) {
+    _canvasRafId = requestAnimationFrame(() => {
+      _canvasRafId = requestAnimationFrame(() => {
+        _canvasRafId = 0;
+        try {
+          renderCanvas();
+        } catch (e) {
+          console.error("renderCanvas error:", e);
+        }
+      });
     });
   }
 });