feat: verify consistent node usages across frameeworks

.github/workflows/quality.yml

@@ -84,15 +84,15 @@ jobs:
       - name: Run typecheck
         run: bun run typecheck
 
-  # exports:
-  #   name: Check package exports
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout branch
-  #       uses: actions/checkout@v4
+  checks:
+    name: Check for various issues
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
 
-  #     - name: Install
-  #       uses: ./.github/composite-actions/install
+      - name: Install
+        uses: ./.github/composite-actions/install
 
-  #     - name: Run exports:check
-  #       run: bun run exports:check
+      - name: Run check:nodes
+        run: bun scripts check:node

frameworks/solid/src/components/slider/slider-value-text.tsx

@@ -2,11 +2,11 @@ import { mergeProps } from '@zag-js/solid'
 import { type HTMLArkProps, ark } from '../factory'
 import { useSliderContext } from './use-slider-context'
 
-export interface SliderValueTextProps extends HTMLArkProps<'div'> {}
+export interface SliderValueTextProps extends HTMLArkProps<'span'> {}
 
 export const SliderValueText = (props: SliderValueTextProps) => {
   const api = useSliderContext()
   const mergedProps = mergeProps(() => api().valueTextProps, props)
 
-  return <ark.div {...mergedProps}>{props.children || api().value.join(',')}</ark.div>
+  return <ark.span {...mergedProps}>{props.children || api().value.join(',')}</ark.span>
 }

frameworks/vue/src/components/accordion/accordion-root.vue

@@ -9,6 +9,7 @@ export interface AccordionRootEmits extends RootEmits {}
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { ark } from '../factory'
 import { RenderStrategyPropsProvider } from '../../utils'
 import { useAccordion } from './use-accordion'
 import { AccordionProvider } from './use-accordion-context'
@@ -24,7 +25,7 @@ RenderStrategyPropsProvider(
 </script>
 
 <template>
-  <div v-bind="accordion.rootProps" :as-child="asChild">
+  <ark.div v-bind="accordion.rootProps" :as-child="asChild">
     <slot></slot>
-  </div>
+  </ark.div>
 </template>

frameworks/vue/src/components/clipboard/clipboard-input.vue

@@ -5,15 +5,13 @@ export interface ClipboardInputProps extends PolymorphicProps {}
 </script>
 
 <script setup lang="ts">
-import { ark } from '../factory'
-import { useClipboardContext } from './use-clipboard-context'
+import { ark } from '../factory';
+import { useClipboardContext } from './use-clipboard-context';
 
 defineProps<ClipboardInputProps>()
 const clipboard = useClipboardContext()
 </script>
 
 <template>
-  <ark.div v-bind="clipboard.inputProps" :as-child="asChild">
-    <slot />
-  </ark.div>
+  <ark.input v-bind="clipboard.inputProps" :as-child="asChild" />
 </template>

frameworks/vue/src/components/date-picker/date-picker-next-trigger.vue

@@ -15,7 +15,7 @@ const viewProps = useDatePickerViewPropsContext()
 </script>
 
 <template>
-  <ark.div v-bind="datePicker.getNextTriggerProps(viewProps)" :as-child="asChild">
+  <ark.button v-bind="datePicker.getNextTriggerProps(viewProps)" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.button>
 </template>

frameworks/vue/src/components/date-picker/date-picker-table-head.vue

@@ -15,7 +15,7 @@ const tableProps = useDatePickerTablePropsContext()
 </script>
 
 <template>
-  <ark.head v-bind="datePicker.getTableHeadProps(tableProps)" :as-child="asChild">
+  <ark.thead v-bind="datePicker.getTableHeadProps(tableProps)" :as-child="asChild">
     <slot />
-  </ark.head>
+  </ark.thead>
 </template>

frameworks/vue/src/components/dialog/dialog-description.vue

@@ -13,7 +13,7 @@ const dialog = useDialogContext()
 </script>
 
 <template>
-  <ark.p v-bind="dialog.descriptionProps" :as-child="asChild">
+  <ark.div v-bind="dialog.descriptionProps" :as-child="asChild">
     <slot />
-  </ark.p>
+  </ark.div>
 </template>

frameworks/vue/src/components/editable/editable-edit-trigger.vue

@@ -13,7 +13,7 @@ const editable = useEditableContext()
 </script>
 
 <template>
-  <ark.div v-bind="editable.editTriggerProps" :as-child="asChild">
+  <ark.button v-bind="editable.editTriggerProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.button>
 </template>

frameworks/vue/src/components/editable/editable-preview.vue

@@ -13,7 +13,7 @@ const editable = useEditableContext()
 </script>
 
 <template>
-  <ark.div v-bind="editable.previewProps" :as-child="asChild">
+  <ark.span v-bind="editable.previewProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.span>
 </template>

frameworks/vue/src/components/file-upload/file-upload-item.vue

@@ -14,7 +14,7 @@ const fileUpload = useFileUploadContext()
 </script>
 
 <template>
-  <ark.div v-bind="fileUpload.getItemProps(props)" :as-child="asChild">
+  <ark.li v-bind="fileUpload.getItemProps(props)" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.li>
 </template>

frameworks/vue/src/components/menu/menu-trigger-item.vue

@@ -6,14 +6,14 @@ export interface MenuTriggerItemProps extends PolymorphicProps {}
 </script>
 
 <script setup lang="ts">
-import { ark } from '../factory'
+import { ark } from '../factory';
 
 defineProps<MenuTriggerItemProps>()
 const triggerItemProps = useMenuTriggerItemContext()
 </script>
 
 <template>
-  <ark.button v-bind="triggerItemProps" :as-child="asChild">
+  <ark.div v-bind="triggerItemProps" :as-child="asChild">
     <slot />
-  </ark.button>
+  </ark.div>
 </template>

frameworks/vue/src/components/pagination/pagination-root.vue

@@ -18,7 +18,7 @@ PaginationProvider(pagination)
 </script>
 
 <template>
-  <ark.div v-bind="pagination.rootProps" :as-child="asChild">
+  <ark.nav v-bind="pagination.rootProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.nav>
 </template>

frameworks/vue/src/components/progress/progress-circle-range.vue

@@ -13,7 +13,7 @@ const progress = useProgressContext()
 </script>
 
 <template>
-  <ark.div v-bind="progress.circleRangeProps" :as-child="asChild">
+  <ark.circle v-bind="progress.circleRangeProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.circle>
 </template>

frameworks/vue/src/components/progress/progress-circle-track.vue

@@ -13,7 +13,7 @@ const progress = useProgressContext()
 </script>
 
 <template>
-  <ark.div v-bind="progress.circleTrackProps" :as-child="asChild">
+  <ark.circle v-bind="progress.circleTrackProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.circle>
 </template>

frameworks/vue/src/components/slider/slider-marker.vue

@@ -14,7 +14,7 @@ const slider = useSliderContext()
 </script>
 
 <template>
-  <ark.div v-bind="slider.getMarkerProps(props)" :as-child="asChild">
+  <ark.span v-bind="slider.getMarkerProps(props)" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.span>
 </template>

frameworks/vue/src/components/slider/slider-value-text.vue

@@ -13,8 +13,8 @@ const slider = useSliderContext()
 </script>
 
 <template>
-  <ark.div v-bind="slider.valueTextProps" :as-child="asChild">
+  <ark.span v-bind="slider.valueTextProps" :as-child="asChild">
     <!-- TODO   {slots.default?.() || api.value.value.join(', ')} -->
     <slot />
-  </ark.div>
+  </ark.span>
 </template>

frameworks/vue/src/components/switch/switch-control.vue

@@ -20,8 +20,8 @@ const controlProps = computed(() => ({
 </script>
 
 <template>
-  <ark.div v-bind="controlProps" :as-child="asChild">
+  <ark.span v-bind="controlProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.span>
   <input v-bind="context.hiddenInputProps" />
 </template>

frameworks/vue/src/components/switch/switch-thumb.vue

@@ -13,7 +13,7 @@ const context = useSwitchContext()
 </script>
 
 <template>
-  <ark.div v-bind="context.thumbProps" :as-child="asChild">
+  <ark.span v-bind="context.thumbProps" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.span>
 </template>

frameworks/vue/src/components/tree-view/tree-view-branch-trigger.vue

@@ -15,7 +15,7 @@ const branchProps = useTreeViewBranchContext()
 </script>
 
 <template>
-  <ark.button v-bind="treeView.getBranchTriggerProps(branchProps)" :as-child="asChild">
+  <ark.div v-bind="treeView.getBranchTriggerProps(branchProps)" :as-child="asChild">
     <slot />
-  </ark.button>
+  </ark.div>
 </template>

frameworks/vue/src/components/tree-view/tree-view-branch.vue

@@ -23,7 +23,7 @@ TreeViewDepthProvider(depth + 1)
 </script>
 
 <template>
-  <ark.div v-bind="treeView.getBranchProps(branchProps)" :as-child="asChild">
+  <ark.li v-bind="treeView.getBranchProps(branchProps)" :as-child="asChild">
     <slot />
-  </ark.div>
+  </ark.li>
 </template>

scripts/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
+    "check:nodes": "bun run src/check-nodes.ts",
     "exports:check": "bun run src/exports-check.ts",
     "exports:files": "bun run src/exports-files.ts",
     "exports:sync": "bun run src/exports-sync.ts",

scripts/src/check-nodes.ts

@@ -0,0 +1,60 @@
+import { parse } from 'node:path'
+import { readFileSync } from 'fs-extra'
+import { globby } from 'globby'
+
+const main = async () => {
+  const components = await globby(['../frameworks/*/src/components/*/*.{tsx,vue}'])
+
+  const items = components
+    .filter((file) => !file.endsWith('.stories.tsx'))
+    .filter((file) => !file.endsWith('.stories.vue'))
+    .filter((file) => !file.endsWith('.test.tsx'))
+    .map((file) => {
+      const content = readFileSync(file, 'utf-8')
+      // search for the first occurent of ark.div, ark.span etc
+      // and log the result
+      const match = content.match(/<ark.([A-Za-z]*)/)
+      return {
+        name: parse(file).name,
+        node: match?.[1],
+      }
+    })
+
+  groupItems(items)
+}
+
+interface Item {
+  name: string
+  node?: string
+}
+
+function groupItems(items: Item[]): void {
+  const groupedItems = new Map<string, string[]>()
+
+  for (const item of items) {
+    if (!groupedItems.has(item.name)) {
+      groupedItems.set(item.name, [])
+    }
+    if (item.node !== undefined) {
+      // only add node if it's not undefined
+      groupedItems.get(item.name)?.push(item.node)
+    }
+  }
+
+  const result = Array.from(groupedItems).filter(([_, nodes]) => {
+    return nodes.length > 1 && new Set(nodes).size > 1
+  })
+
+  if (result.length > 0) {
+    console.log('The following components have mixed nodes:')
+    result.map(([name, nodes]) => {
+      console.log(name, nodes)
+    })
+    process.exit(1)
+  }
+}
+
+main().catch((err) => {
+  console.error(err.message)
+  process.exit(1)
+})