fix(components): draw a built-in on the web, not the native primitive of its name

The native primitives are a web page's components of last resort, but the
check for a user override of a built-in searched them too. So in a dev
server every <Icon> rendered the primitive's empty span in place of the
built-in's SVG.

Author: chrisbbreuer

packages/stx/src/component-renderer.ts

@@ -1184,9 +1184,16 @@ async function processCustomElementTags(
       // A project-authored component file of the same name takes precedence so
       // users can override built-ins (e.g. a custom `components/Icon.stx`
       // shadowing the built-in Lucide `Icon`).
+      //
+      // The native primitives are components of last resort and nobody's
+      // override: a built-in is the web's own implementation of its name.
+      // Counted as a user file, the primitive `Icon` took every `<Icon>` on a
+      // web page from the built-in's SVG and drew an empty
+      // `<span data-native="Icon">`. A render target that owns the name (a
+      // native screen's `_targetComponentDirs`) still takes it.
       const builtinDef = registry.getBuiltin(tag.tagName)
       const overriddenByUser = builtinDef
-        ? await userComponentFileExists(tag.tagName, componentsDir, context, filePath, options)
+        ? await userComponentFileExists(tag.tagName, componentsDir, context, filePath, { ...options, _nativePrimitivesFallback: undefined })
         : false
       const sharedImage = tag.tagName === 'Image'
         && usesSharedImageApi([

packages/stx/test/native-primitives-on-web.test.ts

@@ -46,6 +46,21 @@ it('an app component of the same name wins over the primitive', async () => {
   finally { clearComponentCache(); await rm(root, { recursive: true, force: true }) }
 })
 
+it('a built-in of the same name is the web page\'s, not the primitive', async () => {
+  const root = await realpath(createTempDir('stx-web-primitives-builtin-'))
+  try {
+    await Bun.write(path.join(root, 'stx.config.ts'), 'export default {}')
+    clearComponentCache()
+    const config = await loadStxConfig(root)
+    const html = await render(root, '<button><Icon name="plus" size="15" /> New plan</button>', config)
+    // The built-in Icon draws the picture; the primitive of last resort left an empty span.
+    expect(html).toContain('<svg')
+    expect(html).toContain('width="15"')
+    expect(html).not.toContain('data-native="Icon"')
+  }
+  finally { clearComponentCache(); await rm(root, { recursive: true, force: true }) }
+})
+
 it('leaves ordinary HTML elements of the same spelling alone', async () => {
   const root = await realpath(createTempDir('stx-web-primitives-html-'))
   try {