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
Top comments (0)