babel-plugin-mithril-add-data-attribute

babel-plugin-mithril-add-data-attribute

BETA. This plugin adds a data-component attribute to top-level DOM elements rendered by mithril component function m. Intended for development - bloats HTML. Helps debug - find your components in a large repo from generated HTML. Adds component name and file to component data attributes which will be visible in the generated HTML.

• only adds to outer component
• tries to figure out component name from function or variable def
• if no name found it tries to use the file name, so you'll know where to start

Needs more tests and better support for function/class-declarations.

Examples

In

const MyComponent = () => m("div");

const InnerComp = {};
const OuterComp = () => {
  return m("div", m(InnerComp));
};

Out

const MyComponent = () =>
  m("div", {
    "data-component": "MyComponent",
  });

const InnerComp = {};
const OuterComp = () => {
  return m(
    "div",
    {
      "data-component": "OuterComp",
    },
    m(InnerComp)
  );
};

Installation

# yarn
yarn add --dev babel-plugin-mithril-add-data-attribute

# npm
npm install --save-dev babel-plugin-mithril-add-data-attribute

Usage

Via .babelrc

.babelrc

{
  "plugins": ["mithril-add-data-attribute"]
}

Via CLI

babel --plugins mithril-add-data-attribute script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["mithril-add-data-attribute"],
});

Options

Under development

Contribute

Please do.