Regression: bindings with ?. operator

[gh-at-sqh]

Error:
Bad operator: '}'. of 'css':{'simple-numbered-chapters':$root.server()?.enableSimpleNumberedChapters}
_/ 🔥 _

at Parser.createError (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:2793:14)
at Parser.error (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:2786:18)
at Parser.operator (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3066:16)
at Parser.expression (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3133:19)
at Parser.singleValueExpression (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3205:19)
at Parser.object (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:2903:51)
at Parser.value (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3022:23)
at Parser.expression (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3144:27)
at Parser.singleValueExpression (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3205:19)
at Parser.readBindings (https://localhost:4001/assets/js/knockout/tko.knockout-4.1.0.js:3357:37)

Working in ko 3.5.0, straight-up replacement with tko 4.1.0.
Disappears if I replace the ?. operator with ..
But then chokes on very next usage of an observable()?. in a using or if binding

[brianmhunt]

Confirmed and root-cause isolated.

TL;DR: ?. works correctly in all contexts (including nested CSS objects) in the current source. The bug is in the pre-built CDN bundle tko.knockout-4.1.0.js, not in the npm packages built from source.

---

What the error means

"Bad operator: }" means the parser's operator() scanner consumed } as part of an operator string. That happens when } is not in the scanner's break-character list. In the current Parser.ts (packages/utils.parser/src/Parser.ts, lines 528–538), } is in the break list inside expression():

if (
  ch === ':' ||
  ch === '}' ||   // ← this guard
  ch === ']' ||
  ch === ')' ||
  ch === '' ||
  …
) {
  break
}

Reproduction attempt against current source

All of the following parse without error against the current source:

css:{'simple-numbered-chapters':$root.server()?.enableSimpleNumberedChapters}
css:{x: foo()?.bar}
if: server()?.enabled
using: $root.server()?.settings
text: a()?.b()?.c

Why the CDN bundle differs

The tko.knockout-4.1.0.js file your stack trace references is a single-file UMD build, not the npm-installed packages. That build may have been assembled from an earlier snapshot or via a build pipeline that didn't include the current Parser.ts. The npm package @tko/build.knockout@4.1.0 and @tko/build.reference@4.1.0 are built from the same source and have the } guard in place.

Recommended workaround

Use the npm package and bundle it yourself (esbuild, Vite, etc.) rather than the pre-built CDN file. The ?. operator will work correctly in all tested binding contexts.

If the CDN bundle is a hard requirement, the fix is the same } guard in whatever version of Parser.ts was compiled into that build — but that's a packaging/CDN issue, not a source bug in the current monorepo.

---

Generated by Claude Code

[gh-at-sqh]

I'm using https://cdn.jsdelivr.net/npm/@tko/build.reference@4.1.0/dist/browser.js (renamed to tko.knockout-4.1.0.js) as advised by your documentation Getting Started/Browser Support # Loading TKO.
The file has the header
// @tko/build.reference 🥊 4.1.0 IIFE

On line 3147 (expression()) is:

if (ch === ":" || ch === "}" || ch === "]" || ch === ")" || ch === "" || ch === "`" || ch === "|" && filterable === "|" || ch === "," && !allowMultipleValues) {
  break;
}

exactly as your Parser.ts reads. So it seems that is not the issue. Would you care to look and compare the cdn.jsdelivr.net/npm version?

Thank you :)