bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/ai/source/BbIcon.md

@@ -6,8 +6,12 @@
 
 ```vue
 <template>
-	<!-- eslint-disable-next-line vue/no-v-html -- content is library-controlled SVG markup, never user input -->
-	<svg v-bind="iconAttributes" data-allow-mismatch v-html="content"></svg>
+	<!-- eslint-disable vue/no-v-html -- content is library-controlled SVG markup, never user input -->
+	<svg
+		v-bind="iconAttributes"
+		data-allow-mismatch
+		v-html="parsed?.content"
+	></svg>
 </template>
 
 <script setup lang="ts">
@@ -28,31 +32,27 @@ import {
 	ICONS_LEGACY_KEY,
 	type IconRegistry,
 } from '@/utilities/misc/iconsInjectionKey';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
+import {
+	cacheKeyFor as cacheKey,
+	EMPTY_ICON,
+	parseIcon,
+	parsedIcons,
+	type ParsedIcon,
+} from './iconCache';
 import type { BbIconProps, BbIconSize } from './types';
-export type { BbIconProps, BbIconSize as Size };
 
 const props = withDefaults(defineProps<BbIconProps>(), {
 	size: 'md',
 });
+const config = useConfig();
+export type { BbIconProps, BbIconSize as Size };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbIcon', removedPropsFor('BbIcon'));
 
 const logger = useLogger();
 const icons = ref<IconRegistry>();
-const icon = ref<string | null>(null);
-const content = computed(() => {
-	if (icon.value) {
-		// Quote-aware like EVENT_HANDLER_ATTR: a `>` inside a quoted attribute
-		// value must not end the wrapper tag early.
-		return icon.value
-			.replace(/<\?xml[^?]*\?>/gi, '')
-			.replace(/<!DOCTYPE[^>]*>/gi, '')
-			.replace(/<\/?svg(?:[^>"']|"[^"]*"|'[^']*')*>/gi, '');
-	}
-	return null;
-});
 
 const loadIcons = () => {
 	// Prefer the typed Symbol key; fall back to the legacy string key for one
@@ -96,20 +96,39 @@ const unsafeSvgReason = (value: string): string | null => {
 	return null;
 };
 
+const cacheKeyFor = (value: string) => cacheKey(value, isSvgPayload(value));
+
+/**
+ * Seeded from the module cache: an icon this page has already resolved renders
+ * complete in the FIRST render pass, with no loader promise and no regex.
+ */
+const parsed = ref<ParsedIcon | null>(
+	parsedIcons.get(cacheKeyFor(props.icon)) ?? null
+);
+
 const getIcon = async () => {
+	const key = cacheKeyFor(props.icon);
+	const cached = parsedIcons.get(key);
+	if (cached) {
+		parsed.value = cached;
+		return;
+	}
+
 	if (isSvgPayload(props.icon)) {
 		const reason = unsafeSvgReason(props.icon);
 		if (reason) {
-			// Dropped, not scrubbed: render nothing at all. Because `icon.value`
-			// stays empty this also stops the root-attribute copy in
+			// Dropped, not scrubbed: render nothing at all. Because the parsed
+			// icon stays empty this also stops the root-attribute copy in
 			// `iconAttributes` from rebinding the handlers onto the host <svg>.
-			icon.value = '';
+			// Deliberately NOT cached: the warning is the point, and it should
+			// fire for every component that tries to render the bad payload.
+			parsed.value = EMPTY_ICON;
 			logger.warn(
 				`Inline SVG icon rejected: it carries ${reason} and did not pass sanitation, so the icon was dropped. bitboss-ui never sanitizes inline SVG — pass trusted markup (e.g. an import with \`?raw\`), never a string from a CMS, an API, or user input.`
 			);
 			return;
 		}
-		icon.value = props.icon;
+		parsed.value = parsedIcons.set(key, parseIcon(props.icon)).get(key)!;
 		return;
 	}
 
@@ -117,13 +136,13 @@ const getIcon = async () => {
 		logger.throw('Icons have not been loaded');
 	}
 
-	const key = props.icon.includes(':') ? props.icon : `local:${props.icon}`;
 	const iconLoader = icons.value![key];
 	if (!iconLoader) {
 		logger.throw(`Icon "${key}" does not exist.`);
 	}
 
-	icon.value = await iconLoader();
+	const source = await iconLoader();
+	parsed.value = parsedIcons.set(key, parseIcon(source)).get(key)!;
 };
 
 onServerPrefetch(async () => {
@@ -132,10 +151,13 @@ onServerPrefetch(async () => {
 });
 
 onBeforeMount(async () => {
+	// Still resolved even on a cache hit: the registry has to be in hand for a
+	// later `icon` prop change, which is watched outside setup where `inject`
+	// can no longer reach it.
 	if (!icons.value && !isSvgPayload(props.icon)) {
 		loadIcons();
 	}
-	if (!icon.value) {
+	if (!parsed.value) {
 		await getIcon();
 	}
 });
@@ -169,21 +191,9 @@ const iconAttributes = computed(() => {
 		'--w': iconWidth.value,
 	};
 
-	const inheritedAttributes: Record<string, any> = {};
-	if (icon.value) {
-		const svgTag = icon.value.match(/<svg((?:[^>"']|"[^"]*"|'[^']*')*)>/i);
-		if (svgTag) {
-			const attrRegex = /([\w-]+)="([^"]*)"/g;
-			let match;
-			while ((match = attrRegex.exec(svgTag[1])) !== null) {
-				inheritedAttributes[match[1]] = match[2];
-			}
-		}
-	}
-
 	const base: Record<string, any> = {
 		viewBox: '0 0 1 1',
-		...inheritedAttributes,
+		...(parsed.value?.attributes ?? {}),
 		class: classes,
 		style,
 	};

package/dist/ai/source/BbNumberInput.md

@@ -82,22 +82,21 @@
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseNumberInput from '../BbBaseNumberInput/BbBaseNumberInput.vue';
 import { computed, ref } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { isNotNil } from '@/utilities/functions/isNotNil';
 import type {
 	BbNumberInputProps,
 	BbNumberInputEvents,
 	BbNumberInputSlots,
 } from './types';
-export type { BbNumberInputProps, BbNumberInputEvents, BbNumberInputSlots };
 
 const props = withDefaults(defineProps<BbNumberInputProps>(), {
 	modelValue: null,
 });
-
 const emit = defineEmits<BbNumberInputEvents>();
-
 defineSlots<BbNumberInputSlots>();
+const config = useConfig();
+export type { BbNumberInputProps, BbNumberInputEvents, BbNumberInputSlots };
 
 const active = ref(false);
 const showHint = computed(() => props.persistentHint || active.value);