DEV Community

David Hill
David Hill

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode
$ git mv components/my-component.tsx components/my-component/index.tsx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

-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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

results in

$ tree components
components
└── my-component
    └── index.tsx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

results in

$ tree components
components
└── my-component
    └── index.tsx
    └── index.spec.ts
    └── index.css
Enter fullscreen mode Exit fullscreen mode

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

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay