@yummies/babel-plugin-yummies v1.1.0

Babel plugin that implements multilayer components inheritance for Yummies.

Install

npm i -S @yummies/babel-plugin-yummies

Usage

.babelrc:

{
  …
  "plugins": [ "@yummies/babel-plugin-yummies" ]
}

Process

• find all the special require('#…')s (which starts with # symbol)
• run through layers dirs array (defined in .yummies.yml in the root of project) and collect a CHAIN of existing files in special order
• rewrite original require('#…') with require('yummies').yummify(CHAIN)

Examples

Simple

fs:

.
└── src/
    ├── core-components/
    │   └── example/
    │       └── index.js
    └── my-components/
        └── example/
            └── index.js

config:

files:
  main: index.js

layers:
  - src/core-components/
  - src/my-components/

source:

import Example from '#example';

result:

var Example = require('yummies').yummify([
    {
        type: 'main',
        module: require('./src/core-components/example/index.js')
    },
    {
        type: 'main',
        module: require('./src/my-components/example/index.js')
    }
]);

Styles

fs:

.
└── src/
    ├── core-components/
    │   └── example/
    │       ├── index.js
    │       └── styles.less
    └── my-components/
        └── example/
            ├── index.js
            └── styles.less

config:

files:
  main: index.js
  styles: styles.less

layers:
  - src/core-components/
  - src/my-components/

source:

import Example from '#example';

result:

var Example = require('yummies').yummify([
    {
        type: 'main',
        module: require('./src/core-components/example/index.js')
    },
    {
        type: 'styles',
        module: require('./src/core-components/example/styles.less')
    },
    {
        type: 'main',
        module: require('./src/my-components/example/index.js')
    },
    {
        type: 'styles',
        module: require('./src/my-components/example/styles.less')
    }
]);

propTypes

Resulted Class will have propTypes static property with React propTypes collected and extended through layers.

fs:

.
└── src/
    ├── core-components/
    │   └── example/
    │       ├── index.js
    │       └── prop-types.js
    └── my-components/
        └── example/
            ├── index.js
            └── prop-types.js

config:

files:
  main: index.js
  propTypes: prop-types.js

layers:
  - src/core-components/
  - src/my-components/

source:

import Example from '#example';

result:

var Example = require('yummies').yummify([
    {
        type: 'main',
        module: require('./src/core-components/example/index.js')
    },
    {
        type: 'propTypes',
        module: require('./src/core-components/example/prop-types.js')
    },
    {
        type: 'main',
        module: require('./src/my-components/example/index.js')
    },
    {
        type: 'propTypes',
        module: require('./src/my-components/example/prop-types.js')
    }
]);

Mods

fs:

.
└── src/
    ├── core-components/
    │   └── example/
    │       ├── _type/
    │       │   └── test/
    │       │       └── index.js
    │       ├── index.js
    │       └── styles.less
    └── my-components/
        └── example/
            ├── _type/
            │   └── test/
            │       └── styles.less
            ├── index.js
            └── styles.less

config:

files:
  main: index.js
  styles: styles.less

layers:
  - src/core-components/
  - src/my-components/

source:

import ExampleTypeTest from '#example?_type=test';

result:

var ExampleTypeTest = require('yummies').yummify([
    {
        type: 'main',
        module: require('./src/core-components/example/index.js')
    },
    {
        type: 'styles',
        module: require('./src/core-components/example/styles.less')
    },
    {
        type: 'main',
        module: require('./src/my-components/example/index.js')
    },
    {
        type: 'styles',
        module: require('./src/my-components/example/styles.less')
    },
    {
        type: 'main',
          module: require('./src/core-components/example/_type/test/index.js')
    },
    {
        type: 'styles',
        module: require('./src/my-components/example/_type/test/styles.less')
    }
]);

Multiple mods

The same process as for single mod:

import ExampleTypeTestSizeBig from '#example?_type=test&_size=big';

Ignore styles

import ExampleIndexOnly from '#example?-styles';

"Raw" (call .yummifyRaw())

import ExampleRaw from '#example?raw';