Streamlining File Organisation in JS Projects: Automating file Nesting with Bash

David Hill — Sun, 13 Oct 2024 19:14:39 +0000

In a JS project often you start of with a single file for a component, or anything for that matter.

At some stage you might find that you need additional files, for tests etc.

e.g.

my-component.tsx
my-component.spec.ts
my-component.module.css
my-component.stories.tsx

I avoid that,
I feel it is much tidier to put all related files inside a folder and use the index file naming convention.

So, as soon as I need a second file I would generally move my-component.tsx into as
folder my-component/index.tsx

`index.js` files

For CommonJS and esm modules, these two files are equivalent

my-service.ts
my-service/index.ts

A nice feature of this, is that the import: import { Foo } from "./my-service" will work with both my-service.ts and my-service/index.ts files, without requiring any changes to the import path

The Problem Annoyance

I find it a bit tiresome to do the dance of...

$ mkdir -p components/my-service

$ git mv components/my-component.tsx components/my-component/index.tsx

And if I mis-remember whether the file is not under version control yet, I might get a

fatal: not under version control, source=components/my-component.tsx,
 destination=components/my-component/index.tsx

-more annoyance..

Or perhaps more annoyingly, if I get it wrong the other way around and use mv, I could end up with a git status of

Changes not staged for commit:
        deleted:    components/my-component.tsx

Untracked files:
        components/my-component/

As the default mv command gets treated as a deletion and creation of a new file by git

My Solution

I have written a bash script to automate the dance

Example

$ ./nest.sh components/my-component.tsx

results in

$ tree components
components
└── my-component
    └── index.tsx

If the file is under version control, the script uses git mv otherwise uses plain old mv

Example 2

multiple files...

$ ./nest.sh components/my-component.tsx
$ ./nest.sh components/my-component.spec.ts
$ ./nest.sh components/my-component.css

results in

$ tree components
components
└── my-component
    └── index.tsx
    └── index.spec.ts
    └── index.css

See the bash script in a Github Gist here

I have the script named as nest which is in a bin folder in my $PATH so I can use it as a command anywhere