Add "meaninglessFileNames" option

The "meaninglessFileNames" option provides the user with more precise
control over the component display name.

This option is to be used in conjunction with "displayName" and
"fileName". If either is set to false, this option will have no effect.

Prior to this commit, when both "displayName" and "fileName" were set,
the behaviour was to prepend the file name to the component display name
if it was named anything other than "index", and to prepend the
directory name otherwise.

The "meaninglessFileNames" option enables developers to control when
exactly the directory name should be used instead of the file name. If
the file name is considered to be "meaningless", that is, it doesn't
provide the developer with any useful information, then the directory
name will be used instead.

By default, the only "meaningless file name" is "index", which means
that the default behaviour is unmodified.

src/utils/options.js

@@ -9,6 +9,7 @@ export const useTopLevelImportPaths = state =>
   getOption(state, 'topLevelImportPaths', [])
 export const useSSR = state => getOption(state, 'ssr', true)
 export const useFileName = state => getOption(state, 'fileName')
+export const useMeaninglessFileNames = state => getOption(state, 'meaninglessFileNames', ['index'])
 export const useMinify = state => getOption(state, 'minify')
 export const useTranspileTemplateLiterals = state =>
   getOption(state, 'transpileTemplateLiterals')

src/visitors/displayNameAndId.js

@@ -4,6 +4,7 @@ import {
   useFileName,
   useDisplayName,
   useSSR,
+  useMeaninglessFileNames,
   useNamespace,
 } from '../utils/options'
 import getName from '../utils/getName'
@@ -53,21 +54,22 @@ const addConfig = t => (path, displayName, componentId) => {
   }
 }
 
-const getBlockName = file => {
+const getBlockName = (file, meaninglessFileNames) => {
   const name = path.basename(
     file.opts.filename,
     path.extname(file.opts.filename)
   )
-  return name !== 'index'
-    ? name
-    : path.basename(path.dirname(file.opts.filename))
+
+  return meaninglessFileNames.includes(name)
+    ? path.basename(path.dirname(file.opts.filename))
+    : name
 }
 
 const getDisplayName = t => (path, state) => {
   const { file } = state
   const componentName = getName(t)(path)
   if (file) {
-    const blockName = getBlockName(file)
+    const blockName = getBlockName(file, useMeaninglessFileNames(state))
     if (blockName === componentName) {
       return componentName
     }