feat(stringify): inline/block detection and #default slot emission

packages/comark/SPEC/MDC/component-empty.md

@@ -36,5 +36,6 @@ timeout:
 ## Markdown
 
 ```md
-:component
+::component
+::
 ```

packages/comark/SPEC/MDC/component-multiple-colons.md

@@ -36,5 +36,6 @@ timeout:
 ## Markdown
 
 ```md
-:component
+::component
+::
 ```

packages/comark/SPEC/MDC/component-short+block.md

@@ -8,7 +8,7 @@ timeout:
 ## Input
 
 ```md
-:shorthand-block
+:no-sugar-syntax
 
 ::component
 #first
@@ -27,7 +27,7 @@ Second Paragraph
   "meta": {},
   "nodes": [
     [
-      "shorthand-block",
+      "no-sugar-syntax",
       {}
     ],
     [
@@ -63,7 +63,7 @@ Second Paragraph
 ## HTML
 
 ```html
-<shorthand-block></shorthand-block>
+<no-sugar-syntax></no-sugar-syntax>
 <component>
   <template name="first">
     <p>First Paragraph</p>
@@ -77,7 +77,8 @@ Second Paragraph
 ## Markdown
 
 ```md
-:shorthand-block
+::no-sugar-syntax
+::
 
 ::component
 #first

packages/comark/SPEC/MDC/component-slot-default-named.md

@@ -0,0 +1,59 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+::component
+#default
+Default slot content
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "component",
+      {},
+      [
+        "template",
+        {
+          "name": "default"
+        },
+        [
+          "p",
+          {},
+          "Default slot content"
+        ]
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<component>
+  <template name="default">
+    <p>Default slot content</p>
+  </template>
+</component>
+```
+
+## Markdown
+
+```md
+::component
+Default slot content
+::
+```

packages/comark/SPEC/MDC/component-slot-default.md

@@ -0,0 +1,50 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+::component
+Default slot content
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "component",
+      {},
+      [
+        "p",
+        {},
+        "Default slot content"
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<component>
+  <p>Default slot content</p>
+</component>
+```
+
+## Markdown
+
+```md
+::component
+Default slot content
+::
+```

packages/comark/SPEC/MDC/component-slots-with-default-named.md

@@ -0,0 +1,80 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+::component
+#first
+First Paragraph
+
+#default
+Second Paragraph
+::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "component",
+      {},
+      [
+        "template",
+        {
+          "name": "first"
+        },
+        [
+          "p",
+          {},
+          "First Paragraph"
+        ]
+      ],
+      [
+        "template",
+        {
+          "name": "default"
+        },
+        [
+          "p",
+          {},
+          "Second Paragraph"
+        ]
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<component>
+  <template name="first">
+    <p>First Paragraph</p>
+  </template>
+  <template name="default">
+    <p>Second Paragraph</p>
+  </template>
+</component>
+```
+
+## Markdown
+
+```md
+::component
+#first
+First Paragraph
+
+#default
+Second Paragraph
+::
+```

packages/comark/SPEC/MDC/emoji-inside-component-autounwrap.md

@@ -56,7 +56,11 @@ options:
 ## Markdown
 
 ```md
-:alert[✅ Successfully deployed! 🚀]{type="success"}
+::alert{type="success"}
+✅ Successfully deployed! 🚀
+::
 
-:alert[⚠️ Please backup your data before proceeding]{type="warning"}
+::alert{type="warning"}
+⚠️ Please backup your data before proceeding
+::
 ```

packages/comark/SPEC/MDC/inline-component-text-sibling.md

@@ -0,0 +1,47 @@
+---
+timeout:
+  parse: 5ms
+  html: 5ms
+  markdown: 5ms
+---
+
+## Input
+
+```md
+inline :component syntax
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "p",
+      {},
+      "inline ",
+      [
+        "component",
+        {}
+      ],
+      " syntax"
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<p>
+  inline <component></component> syntax
+</p>
+```
+
+## Markdown
+
+```md
+inline :component syntax
+```

packages/comark/SPEC/MDC/inline-component-with-content-atrributes.md

@@ -40,5 +40,7 @@ timeout:
 ## Markdown
 
 ```md
-:inline[Syntax]{with="prop"}
+::inline{with="prop"}
+Syntax
+::
 ```

packages/comark/SPEC/MDC/inline-component-with-content.md

@@ -38,5 +38,7 @@ timeout:
 ## Markdown
 
 ```md
-:inline[Syntax]
+::inline
+Syntax
+::
 ```

packages/comark/src/internal/stringify/handlers/emphesis.ts

@@ -5,7 +5,7 @@ import { comarkAttributes } from '../attributes'
 export function emphesis(node: ComarkElement, state: State) {
   const [_, attrs, ...children] = node
 
-  const content = children.map(child => state.one(child, state))
+  const content = children.map(child => state.one(child, state, node))
     .join('')
     .trim()
 

packages/comark/src/internal/stringify/handlers/mdc.ts

@@ -4,6 +4,9 @@ import { indent } from '../indent'
 import { comarkAttributes, comarkYamlAttributes } from '../attributes'
 import { html } from './html'
 
+// HTML elements that always create an inline context for their children
+const INLINE_HTML_ELEMENTS = new Set(['a', 'strong', 'em', 'span'])
+
 export function mdc(node: ComarkElement, state: State, parent?: ComarkElement) {
   const [tag, attributes, ...children] = node
 
@@ -13,28 +16,18 @@ export function mdc(node: ComarkElement, state: State, parent?: ComarkElement) {
 
   const attributeEntries = Object.entries(attributes)
   const hasObjectAttributes = attributeEntries.some(([, value]) => typeof value === 'object')
-  // if component has only text children, it is inline
-  let inline = children.every((child: ComarkNode) => typeof child === 'string')
 
-  // if component has object attributes, it is not inline
-  if (hasObjectAttributes) {
-    inline = false
-  }
+  // Component is inline if it has text siblings in parent
+  // or is inside an inline HTML element
+  const hasTextSiblings = parent?.some((child, index) => index > 1 && typeof child === 'string') ?? false
+  const insideInlineElement = parent !== undefined && INLINE_HTML_ELEMENTS.has(String(parent[0]))
+  let inline = hasTextSiblings || insideInlineElement
 
-  if (parent && parent?.length > 3 && parent?.every((child, index) => index < 2 || typeof child !== 'string')) {
+  // if component has object attributes, it cannot be inline
+  if (hasObjectAttributes) {
     inline = false
   }
 
-  // components inside paragraphs are inline
-  if (parent?.[0] === 'p') {
-    inline = true
-  }
-
-  // if component has a text sibling, it is inline
-  if (!inline && parent?.some((child, index) => index > 1 && typeof child === 'string')) {
-    inline = true
-  }
-
   const content = children.map((child: ComarkNode) => state.one(child, { ...state, nodeDepthInTree: (state.nodeDepthInTree || 0) + 1 }, node))
     .join('').trimEnd()
 
@@ -54,7 +47,7 @@ export function mdc(node: ComarkElement, state: State, parent?: ComarkElement) {
       result = `${fence}${tag}\n${yamlAttrs}${content ? `\n${content}` : ''}\n${fence}` + state.context.blockSeparator
     }
     else {
-      result = `${fence}${tag}${attrs}\n${content}\n${fence}` + state.context.blockSeparator
+      result = `${fence}${tag}${attrs}${content ? `\n${content}` : ''}\n${fence}` + state.context.blockSeparator
     }
   }
 

packages/comark/src/internal/stringify/handlers/strong.ts

@@ -5,7 +5,7 @@ import { comarkAttributes } from '../attributes'
 export function strong(node: ComarkElement, state: State) {
   const [_, attrs, ...children] = node
 
-  const content = children.map(child => state.one(child, state))
+  const content = children.map(child => state.one(child, state, node))
     .join('')
     .trim()