fix(parse): keep attr="true|false" as string (#321)

Co-authored-by: Arash Ari Sheyda <hi@arashsheyda.me>

Author: farnabaz

docs/content/2.syntax/2.components.md

@@ -306,7 +306,6 @@ Nested components can read the enclosing component's resolved props through the
 - Unknown paths resolve to `undefined`: the prop is passed as `undefined` rather than the raw string.
 - Only props authored with the `:` prefix participate in data binding. Plain `prop="value"` attributes are always passed as literal strings.
 
-
 ::callout{color="info" icon="i-lucide-replace"}
 Need to interpolate a value directly into text rather than a prop? The [Binding plugin](/plugins/built-in/binding) adds a `{{ path || default }}` inline shorthand that resolves against the same render context.
 ::

packages/comark/SPEC/COMARK/component-block-props-types.md

@@ -30,7 +30,7 @@ Component content
       {
         "title": "Hello World",
         "count": "42",
-        ":enabled": "true",
+        "enabled": "true",
         "hidden": "false",
         "tags": [
           "markdown",

packages/comark/SPEC/COMARK/component-nested4.md

@@ -97,7 +97,7 @@ timeout:
             "button",
             {
               ":data-testid": "$doc.snippet.description",
-              ":external": "true",
+              "external": "true",
               ":to": "$doc.snippet.link",
               "appearance": "primary"
             },

packages/comark/SPEC/COMARK/component-props-boolean-false.md

@@ -0,0 +1,54 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+options:
+  maxInlineAttributes: 5
+---
+
+## Input
+
+```md
+::my-component{block reverse square="false" disabled="true" count="5"}
+My button
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "my-component",
+      {
+        ":block": "true",
+        ":reverse": "true",
+        "count": "5",
+        "disabled": "true",
+        "square": "false"
+      },
+      "My button"
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<my-component block reverse square="false" disabled count="5">
+  My button
+</my-component>
+```
+
+## Markdown
+
+```md
+::my-component{block reverse square="false" disabled="true" count="5"}
+My button
+::
+```

packages/comark/src/internal/parse/syntax/props.ts

@@ -51,15 +51,16 @@ export function searchProps(content: string, index = 0) {
       }
       const char = content[index]
       if (start !== index) {
-        const key = content.slice(start, index).trim()
+        let key = content.slice(start, index).trim()
         let value = ''
         if (char === '=') {
           index += 1
           value = searchValue()
         } else {
+          key = key[0] === ':' ? key : `:${key}`
           value = 'true'
         }
-        if (key.match(/^:?[a-z_][a-z0-9_-]+$/gi)) {
+        if (key.match(/^:?[a-z_][a-z0-9_-]*$/gi)) {
           props.push([key, value])
         }
       }

packages/comark/src/internal/parse/token-processor.ts

@@ -109,7 +109,7 @@ function processAttributes(
     filterEmpty?: boolean
   } = {}
 ): Record<string, unknown> {
-  const { handleBoolean = true, handleJSON = true, filterEmpty = false } = options
+  const { handleJSON = true, filterEmpty = false } = options
   const attrs: Record<string, unknown> = {}
 
   if (!attrsArray || !Array.isArray(attrsArray)) {
@@ -126,12 +126,6 @@ function processAttributes(
         continue
       }
 
-      // Handle boolean attributes: {bool} -> {":bool": "true"}
-      if (handleBoolean && !key.startsWith(':') && !key.startsWith('#') && !key.startsWith('.') && value === 'true') {
-        attrs[`:${key}`] = 'true'
-        continue
-      }
-
       // Handle JSON values
       if (handleJSON && typeof value === 'string') {
         if (value.startsWith('{') && value.endsWith('}')) {
@@ -412,7 +406,7 @@ function processBlockToken(
   if (token.type === 'heading_open') {
     const level = Number.parseInt(token.tag.replace('h', ''), 10)
     const headingTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-    const userAttrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false })
+    const userAttrs = processAttributes(token.attrs, { handleJSON: false })
     // Process heading children with inHeading flag for Comark component handling
     const children = processBlockChildren(
       tokens,
@@ -444,7 +438,7 @@ function processBlockToken(
 
   // Handle list items - paragraphs should be unwrapped
   if (token.type === 'list_item_open') {
-    const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false })
+    const attrs = processAttributes(token.attrs, { handleJSON: false })
     const children = processBlockChildren(tokens, startIndex + 1, 'list_item_close', false, false, true, state)
     if (children.nodes.length > 0) {
       return { node: ['li', attrs, ...children.nodes] as ComarkNode, nextIndex: children.nextIndex + 1 }
@@ -455,7 +449,7 @@ function processBlockToken(
   // Handle generic block-level open/close pairs (includes blockquote, lists, tables, etc.)
   const tagName = BLOCK_TAG_MAP[token.type]
   if (tagName) {
-    const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false })
+    const attrs = processAttributes(token.attrs, { handleJSON: false })
     const closeType = token.type.replace('_open', '_close')
 
     const isNestedContext = ['td', 'th'].includes(tagName)
@@ -464,7 +458,7 @@ function processBlockToken(
   }
 
   const componentName = token.tag || 'component'
-  const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false })
+  const attrs = processAttributes(token.attrs, { handleJSON: false })
   return { node: [componentName, attrs], nextIndex: startIndex + 1 }
 }
 
@@ -957,7 +951,7 @@ function processInlineToken(
   }
 
   if (token.type === 'image') {
-    const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false, filterEmpty: true })
+    const attrs = processAttributes(token.attrs, { handleJSON: false, filterEmpty: true })
     // Override alt with token.content if available
     if (token.content) {
       attrs.alt = token.content
@@ -971,7 +965,7 @@ function processInlineToken(
   }
 
   if (token.type === 'link_open') {
-    const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false })
+    const attrs = processAttributes(token.attrs, { handleJSON: false })
     const children = processInlineChildren(tokens, startIndex + 1, 'link_close', inHeading)
 
     // Check if there's a props token right after the link_close token

packages/comark/test/misc.test.ts

@@ -6,4 +6,41 @@ describe('misc', () => {
     const tree = await parse(':Alert{id="1"" }')
     expect(tree.nodes).toEqual([['alert', { id: '1' }]])
   })
+
+  describe('boolean attribute coercion', () => {
+    it('promotes bare, explicit-true, and explicit-false attrs to :bindings', async () => {
+      const tree = await parse('::x{flag other="true" off="false" count="5"}\n::')
+      expect((tree.nodes[0] as any)[1]).toEqual({
+        ':flag': 'true',
+        other: 'true',
+        off: 'false',
+        count: '5',
+      })
+    })
+
+    it('promotes unquoted true/false the same way', async () => {
+      const tree = await parse('::x{on=true off=false}\n::')
+      expect((tree.nodes[0] as any)[1]).toEqual({
+        on: 'true',
+        off: 'false',
+      })
+    })
+
+    it('leaves explicit :bindings and non-boolean strings alone', async () => {
+      const tree = await parse('::x{:flag="false" label="falsey" zero="0"}\n::')
+      expect((tree.nodes[0] as any)[1]).toEqual({
+        ':flag': 'false',
+        label: 'falsey',
+        zero: '0',
+      })
+    })
+
+    it('applies the same rules to inline components', async () => {
+      const tree = await parse(':badge{disabled="false" active}')
+      expect((tree.nodes[0] as any)[1]).toEqual({
+        disabled: 'false',
+        ':active': 'true',
+      })
+    })
+  })
 })

packages/comark/test/syntax/props.test.ts

@@ -18,14 +18,14 @@ describe('parseProps', () => {
       "
       class=foo
       id=my-id
-      no-border=true
+      :no-border=true
       "
     `)
 
     expect(parse('{foo=bar baz}')).toMatchInlineSnapshot(`
       "
       foo=bar
-      baz=true
+      :baz=true
       "
     `)