Skip to content

Bug: remap['file-tree-icon-file'] unreachable as fallback with set: 'complete' or set: 'standard' #707

@StefanDBTLabs

Description

@StefanDBTLabs

Prerequisites

Describe the issue

When using set: 'complete' or set: 'standard', the remap entry for 'file-tree-icon-file' has no effect as a fallback for unknown file types.

Root cause: resolveBuiltInFileIconToken returns 'default' for any extension it doesn't recognize, rather than undefined. Because the resolver always returns a non-null token for these sets, resolveIcon returns early with the built-in default icon and never reaches the iconRemap check at the bottom of the function.

With set: 'minimal' or set: 'none', resolveBuiltInFileIconToken returns undefined, so the fallback remap is reachable. This means custom fallback icons and colored icons (colored: true, only effective with set: 'complete') are mutually exclusive — there's no single configuration that supports both.

Expected behavior: remap['file-tree-icon-file'] should be usable as a fallback for unknown file types regardless of which built-in set is active, including set: 'complete'.

Workaround: Use set: 'minimal', inject the complete sprite manually via spriteSheet, and enumerate all desired extensions explicitly in byFileExtension. Icon colors must also be injected manually via unsafeCSS since colored: true has no effect with set: 'minimal'. This can work but is very awkward.

  • this issue was written with the help of AI tools.

Reproduction

import { FileTree as FileTreeModel } from '@pierre/trees';
import { FileTree } from '@pierre/trees/react';

const model = new FileTreeModel({
  paths: ['src/index.ts', 'src/unknown.xyz'],
  icons: {
    set: 'complete',
    remap: {
      // Expected: .xyz files use this icon. Actual: never fires.
      'file-tree-icon-file': { name: 'my-custom-icon', viewBox: '0 0 16 16' },
    },
    spriteSheet: `
      <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
        <symbol id="my-custom-icon" viewBox="0 0 16 16">
          <rect width="16" height="16" fill="red" />
        </symbol>
      </svg>
    `,
  },
});

export function App() {
  return <FileTree model={model} />;
}

What browser(s) are you seeing the problem on?

Chrome

What version of @pierre/diffs are you using?

1.0.0-beta.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions