Clarify whether a `PreprocessorSpecificBlock` and `Element` are emptiable, static or dynamic, and sync or async.

[YusukeHirao]

Motivation

The new option checkingRequiredOwnedElements added to wai-aria rule in v3. The option checks the conformance of whether a role owns the required descendant role. But in an actual source code, it cannot compute whether the element is empty when including the particular block sometimes. And in the checking, it also checks whether an onwer role has aria-busy=true because its element's descendants may be rendered delayed.

<ul aria-busy="true"><!-- The list role require the listitem role --></ul>

For it computes the above, it needs metadata that whether the context is emptiable, static or dynamic rendering, and sync or async rendering.

It assumes the developer or a plugin author specifies this metadata.

Example

Pug

ul
  each item in list // This is PreprocessorSpecificBlock
    li= item // The content is possibly empty and static

{
  type: 'PreprocessorSpecificBlock',
  regex: /^each\s/i,
  empty: true,
  dynamic: false,
  async: false, 
}

Even more: if, case, include, block, +(Mixin), and more. Ref: https://pugjs.org/api/getting-started.html

JSX

<ul>
  {list.map(item => { // This is PreprocessorSpecificBlock
    return <li>{item}</li>; // The content is possibly empty, dynamic, and sync
  })}
</ul>

{
  type: 'PreprocessorSpecificBlock',
  regex: /\.\s*map\s*\(/,
  empty: true,
  dynamic: true,
  async: false, 
}

Currently, I don't have a good idea. I think it can infer the block returns JSXElement through the parser but the implementation will be complicated.

React Suspense

<ul>
  <Suspense>
    <li>content</li>{/* This content is possibly empty, dynamic, and async */}
  </Suspense>
</ul>

{
  type: 'Element',
  matches: 'Suspense',
  transparent: true,
  empty: true,
  dynamic: true,
  async: true, 
}

{
  type: 'Element',
  matches: 'Suspense[fallback]',
  transparent: true,
  empty: false, // Because it has the fallback prop
  dynamic: true,
  async: true, 
}

Svelte

<ul>
  {#await promise}
    {content}{/* This content is possibly empty, dynamic, and async */}
  {/await}
</ul>

{
  type: 'PreprocessorSpecificBlock',
  regex: /^{#await\s/,
  empty: true,
  dynamic: true,
  async: true, 
}

Even more: #if, #each, and #key. Ref: https://svelte.dev/docs#template-syntax

<svelte:element this={"div"}></svelte:element>

https://svelte.dev/docs#template-syntax-svelte-element

Vue

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

{
  type: 'Element',
  matches: '[v-for]',
  empty: true,
  dynamic: true,
  async: false, 
}

Even more: v-if, v-else, v-else-if, and v-show. Ref: https://vuejs.org/guide/essentials/conditional.html https://vuejs.org/guide/essentials/list.html