This content originally appeared on DEV Community and was authored by David Hill
In a JS project often you start of with a single file for a component, or anything for that matter.
At some stage I might find that I additional files, for tests etc.
e.g.
my-component.tsxmy-component.spec.tsmy-component.module.cssmy-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
This content originally appeared on DEV Community and was authored by David Hill
David Hill | Sciencx (2024-10-13T19:14:39+00:00) Bash script to speed up folder structure revision. Retrieved from https://www.scien.cx/2024/10/13/bash-script-to-speed-up-folder-structure-revision/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.