babel-plugin-filenamespace 📂

Use file structure to namespace your code

📄 Description

Directories and filenames are typically descriptive by nature so let's use them to namespace our code.

Think about unit test describe blocks, Storybook stories and Redux action types (DDD).

Node provides __dirname and __filename which are perfect for this, but with code bundling and client-side JS they lose their meaning. The purpose of this plugin is to give that meaning back.

// src/components/Button.test.js
describe(__filenamespace, () => {})

// is transformed into
describe('src/components/Button', () => {})

📦 Install

npm install --save-dev babel-plugin-filenamespace

🚀 Usage

Via .babelrc

{
  "plugins": [
    "filenamespace"
  ]
}

Via .eslintrc

{
  "globals": {
    "__filenamespace": false
  }
}

Then in any file you want a filename based namespace generated use the placeholder __filenamespace.

⚙️ Options

Use Babel's plugin options by replacing the plugin string with an array of the plugin name and an object with the options:

root: (Default: project root)
- Specify root directory relative to project src (e.g. src).
separator: (Default: "/")
- Specify directory separator.
dropAllFilenames: (Default: false)
- Setting to true will exclude all filenames and use directory structure only.
- Note: files named index OR have a name that match the parent directory (file extention ignored) are always dropped, regardless of this setting, as they do not provide meaning.
dropExtensions: (Default: [".spec", ".test", ".story", ".stories"])
- Specify the extensions you want removed.
- Note: file extension are always removed, these extensions are for removing extensions from common file naming conventions (e.g. path/to/file.test.js will transform to path/to/file).
customPlaceholders: (Default: [])
- Specify custom placeholders, each with their own configuration (all above options) e.g. [{ "placeholder": "__testnamespace", "separator": "." }].

✨ Examples

`root`:

{
  "plugins": [
    [
      "filenamespace",
      {
        "root": "app",
      }
    ]
  ]
}

// app/container/App/data/file.js
const namespace = __filenamespace;

// is transformed into
const namespace = 'container/App/data/file';

`separator`:

{
  "plugins": [
    [
      "filenamespace",
      {
        "separator": "👌"
      }
    ]
  ]
}

// app/container/App/data/file.js
const namespace = __filenamespace;

// is transformed into
const namespace = 'app👌container👌App👌data👌file';

`dropAllFilenames`:

{
  "plugins": [
    [
      "filenamespace",
      {
        "dropAllFilenames": true
      }
    ]
  ]
}

// app/container/HomePage/Home.js
const namespace = __filenamespace;

// is transformed into
const namespace = 'app/container/HomePage';

`dropExtensions`:

{
  "plugins": [
    [
      "filenamespace",
      {
        "dropExtensions": [".test"]
      }
    ]
  ]
}

// app/container/HomePage/Home.test.js
const namespace = __filenamespace;

// is transformed into
const namespace = 'app/container/HomePage/Home';

`customPlaceholders`:

{
  "plugins": [
    [
      "filenamespace",
      {
        "separator": ".",
        "customPlaceholders": [
          {
            "placeholder": "__dotDot",
            "separator": ".."
          },
          {
            "placeholder": "__dotDotDot",
            "separator": "...",
            "root": "app",
            "dropAllFilenames": true
          }
        ]
      }
    ]
  ]
}

// app/container/App/data/file.js
const namespace = __filenamespace;
const dotDotNamespace = __dotDot;
const dotDotDotNamespace = __dotDotDot;

// is transformed into
const namespace = 'app.container.App.data.file';
const dotDotNamespace = 'app.container..App..data..file';
const dotDotDotNamespace = 'container...App...data';

🤝 Contributing

Contributions, issues and feature requests are welcome.
Feel free to check the Contributing page if you want to contribute.

samit4me / babel-plugin-filenamespace Goto Github PK