1.1.0 • Published 10 years ago

@yummies/babel-plugin-yummies v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 years ago

npm travis deps gitter

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';
1.1.0

10 years ago

2.0.0

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.5.0-beta.3

10 years ago

0.5.0-beta.2

10 years ago

0.5.0-beta.1

10 years ago

0.4.1

10 years ago

0.4.0

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago