Babel plugin that implements multilayer components inheritance for Yummies.

Install

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

Usage

.babelrc:

1{
2  …
3  "plugins": [ "@yummies/babel-plugin-yummies" ]
4}

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:

1files:
2  main: index.js
3
4layers:
5  - src/core-components/
6  - src/my-components/

source:

1import Example from '#example';

result:

1var Example = require('yummies').yummify([
2    {
3        type: 'main',
4        module: require('./src/core-components/example/index.js')
5    },
6    {
7        type: 'main',
8        module: require('./src/my-components/example/index.js')
9    }
10]);

Styles

fs:

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

config:

1files:
2  main: index.js
3  styles: styles.less
4
5layers:
6  - src/core-components/
7  - src/my-components/

source:

1import Example from '#example';

result:

1var Example = require('yummies').yummify([
2    {
3        type: 'main',
4        module: require('./src/core-components/example/index.js')
5    },
6    {
7        type: 'styles',
8        module: require('./src/core-components/example/styles.less')
9    },
10    {
11        type: 'main',
12        module: require('./src/my-components/example/index.js')
13    },
14    {
15        type: 'styles',
16        module: require('./src/my-components/example/styles.less')
17    }
18]);

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:

1files:
2  main: index.js
3  propTypes: prop-types.js
4
5layers:
6  - src/core-components/
7  - src/my-components/

source:

1import Example from '#example';

result:

1var Example = require('yummies').yummify([
2    {
3        type: 'main',
4        module: require('./src/core-components/example/index.js')
5    },
6    {
7        type: 'propTypes',
8        module: require('./src/core-components/example/prop-types.js')
9    },
10    {
11        type: 'main',
12        module: require('./src/my-components/example/index.js')
13    },
14    {
15        type: 'propTypes',
16        module: require('./src/my-components/example/prop-types.js')
17    }
18]);

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:

1files:
2  main: index.js
3  styles: styles.less
4
5layers:
6  - src/core-components/
7  - src/my-components/

source:

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

result:

1var ExampleTypeTest = require('yummies').yummify([
2    {
3        type: 'main',
4        module: require('./src/core-components/example/index.js')
5    },
6    {
7        type: 'styles',
8        module: require('./src/core-components/example/styles.less')
9    },
10    {
11        type: 'main',
12        module: require('./src/my-components/example/index.js')
13    },
14    {
15        type: 'styles',
16        module: require('./src/my-components/example/styles.less')
17    },
18    {
19        type: 'main',
20          module: require('./src/core-components/example/_type/test/index.js')
21    },
22    {
23        type: 'styles',
24        module: require('./src/my-components/example/_type/test/styles.less')
25    }
26]);

Multiple mods

The same process as for single mod:

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

Ignore styles

1import ExampleIndexOnly from '#example?-styles';

"Raw" (call .yummifyRaw())

1import ExampleRaw from '#example?raw';