feat/data bcc name

component-library/.gitignore

@@ -14,6 +14,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.tsbuildinfo
 
 node_modules
 .pnpm-store

component-library/package.json

@@ -83,6 +83,7 @@
 		"@vitejs/plugin-vue": "^6.0.0",
 		"@vitest/browser-playwright": "4.1.9",
 		"@vitest/coverage-v8": "4.1.9",
+		"@vue/compiler-sfc": "^3.5.38",
 		"@vue/eslint-config-prettier": "^10.2.0",
 		"@vue/test-utils": "^2.4.6",
 		"@vue/tsconfig": "^0.7.0",

component-library/src/components/custom/BccAppNavigation/BccAppNavigation.vue

@@ -46,6 +46,16 @@ const itemWidth = computed(() => {
 
 	return 'flex-1';
 });
+
+function itemBindings(item: BccAppNavigationItem) {
+	const { icon, key, component, ...rest } = item;
+
+	void icon;
+	void key;
+	void component;
+
+	return rest;
+}
 </script>
 
 <template>
@@ -54,10 +64,15 @@ const itemWidth = computed(() => {
 			<template v-for="item in items" :key="item.key">
 				<component
 					:is="item.component ?? linkComponent ?? 'a'"
-					v-bind="item"
+					v-bind="itemBindings(item)"
 					class="bcc-app-nav-item"
+					:data-key="item.key"
 					active-class="bcc-app-nav-item--active"
-					:class="{ 'bcc-app-nav-item--active': activeKey === item.key, [itemWidth]: true }"
+					:class="{
+						'bcc-app-nav-item--active': activeKey === item.key,
+						[itemWidth]: true,
+						[`bcc-app-nav-item-key-${item.key}`]: true,
+					}"
 					@click="emits('select', item)"
 				>
 					<div class="relative px-3">

component-library/tsconfig.node.json

@@ -7,5 +7,5 @@
 		"types": ["Node"],
 		"strict": true
 	},
-	"include": ["vite.config.ts", "scripts/**/*.mjs"]
+	"include": ["vite.config.ts", "vite-plugin-component-attr.ts", "scripts/**/*.mjs"]
 }

component-library/vite-plugin-component-attr.ts

@@ -0,0 +1,44 @@
+import { parse } from '@vue/compiler-sfc';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+/**
+ * Injects `data-component="<ComponentName>"` on the root element of every
+ * Vue SFC found under a `/components/` path segment. Runs before plugin-vue
+ * so the attribute is part of the compiled output.
+ */
+export function componentDataAttrPlugin(): Plugin {
+	return {
+		name: 'bcc-component-data-attr',
+		enforce: 'pre',
+		transform(code, id) {
+			if (!id.endsWith('.vue') || !id.includes('/components/')) return null;
+
+			const componentName = path
+				.basename(id, '.vue')
+				.replace(/^Bcc/, '')
+				.replace(/([A-Z])/g, (_, c, offset) => (offset === 0 ? c.toLowerCase() : `-${c.toLowerCase()}`));
+			const { descriptor, errors } = parse(code);
+
+			if (errors.length || !descriptor.template?.ast) return null;
+
+			const { ast } = descriptor.template;
+
+			// Find the first element node in the template root (NodeTypes.ELEMENT === 1)
+			const root = ast.children.find(n => n.type === 1);
+			if (!root) return null;
+
+			// ElementNode has `tag` and `loc` — cast from TemplateChildNode
+			const el = root as { tag: string; loc: { start: { offset: number } } };
+
+			// root.loc.start.offset is absolute (relative to the SFC file start),
+			// so insert right after `<tagName` with no further adjustment
+			const insertAt = root.loc.start.offset + 1 + el.tag.length;
+
+			return {
+				code: code.slice(0, insertAt) + ` data-bcc-name="${componentName}"` + code.slice(insertAt),
+				map: null,
+			};
+		},
+	};
+}

component-library/vite.config.ts

@@ -3,11 +3,12 @@ import vue from '@vitejs/plugin-vue';
 import { fileURLToPath } from 'node:url';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
+import { componentDataAttrPlugin } from './vite-plugin-component-attr';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 export default defineConfig({
-	plugins: [vue(), tailwindcss()],
+	plugins: [componentDataAttrPlugin(), vue(), tailwindcss()],
 	resolve: {
 		alias: {
 			'@': resolve(__dirname, './src'),