Directory Tree to JS Object Converter

Representing a file system hierarchy as a structured JavaScript object is a foundational task in build tools, documentation generators, static site scaffolding, and asset management pipelines. Manual construction of these trees is error-prone and scales poorly beyond a few dozen entries. This tool uses the browser's File System Access API to recursively traverse a selected directory and produce a faithful nested object matching the output format of the popular directory-tree npm package (~100k weekly downloads). Extension filtering accepts any valid RegExp pattern such as /\.(js|ts|html)$/, and path exclusion removes entire subtrees matching a second regex. Depth limiting caps traversal at level d, leaving deeper directory sizes as undefined to avoid misleading partial sums. The tool approximates file sizes from File.size bytes where available. Limitations: browsers do not expose Unix file mode, mtime, or symlink targets, so attribute options are constrained to what the Web API provides. The webkitdirectory fallback reconstructs the tree from flat relative paths and cannot detect empty directories.

The directory tree is constructed via recursive depth-first traversal. For each directory entry at depth d, the algorithm checks against the depth limit and exclusion pattern before descending.

File inclusion is determined by the extensions filter applied to each entry name:

Directory size aggregation sums all child sizes bottom-up. If any child has undefined size (depth-limited), the parent size propagates as undefined:

Where dir is the current directory handle, d is current depth level, maxDepth is the user-configured limit (defaults to ∞), extRegex is the compiled extensions pattern, and n is the count of children in the directory.