Идея

Данная система генерации кода состоит из трёх частей: модели, шаблона и соединителя. Пользователь может свободно определять свои собственные модели, правила и следовать этим правилам. Шаблоны кода определяются пользователем в соответствии с этими правилами. Я считаю, что пользовательский шаблон для генерации кода является лучшим шаблоном. Соединитель связывает модель и шаблон и определяет путь к файлу результата.

Шаблон

Синтаксис

Синтаксис похож на синтаксис Razor и вдохновлён Vash. Он ориентирован на генерацию кода и уделяет внимание форматированию кода, включая отступы и переносы строк. Поэтому был разработан собственный синтаксис шаблонов, использующий лексический анализатор, подобный тому, который используется в Jade.

1. Вывод типа кода с использованием @(<code>). Пример: @(model.name).
2. Логические блоки кода с использованием @{<code>}. Пример:

   @{
       let pName = ng.toPascalCase(name);
   }
3. Однострочный текст с использованием @:<text>\n. Выведенный текст не будет иметь символ переноса строки в конце.
4. Текстовые блоки с использованием @:{<text>@:}.
5. Экранирование с использованием @@, представляющего @.
6. Разделитель @!. Если необходимо вывести {xxx} в однострочном формате, можно использовать @:{xxx}, но это конфликтует с обозначением логического блока кода. Можно добавить разделитель @:@!{xxx} для вывода {xxx}.

Дополнительные примеры:

Шаблон для цикла for:

@{
    if(model && model.arr && model.arr.length){
        for(let i in model.arr){
            let item = model.arr[i];
            let split = i == 0 ? '' : (model.split || '');
@(split)@(ng.include(model.template, item))
        }
    }
}

Макет

На данный момент не включена концепция мастер-шаблона, поскольку в этом нет необходимости.

Подшаблоны

Подшаблоны используются с помощью ng.include(<подшаблонFilePath>, <модель>).

Заполнитель

Заполнитель задерживает вывод до тех пор, пока весь шаблон не будет сгенерирован, после чего содержимое заменяется.

1. Используйте @[<placeholderName>] для размещения заполнителя.
2. Используйте @[<placeholderName>(,<tag>)]{<code>} для определения содержимого заполнителя.

Роль тега в заполнителе: Обычно при определении содержимого заполнителя, если тег не указан, содержимое добавляется в заполнитель по умолчанию. Например, существует @[p]. В двух местах шаблона определено содержимое этого заполнителя.

@[p]{
@:paragraph1
}
@[p]{
@:paragraph2
}

Тогда в конечном итоге в позиции @[p] выводимый текст будет paragraph1paragraph2. Если добавлен тег, то будет добавлено только содержимое с одинаковым тегом.

@[p,tag1]{
@:paragraph1
}
@[p,tag1]{
@:paragraph2
}
@[p,tag2]{
@:paragraph3
}

В конечном итоге в @[p] будет выведен текст paragraph1paragraph3, а вторая часть будет проигнорирована.

Перенос строк и отступы

Можно добавить пробелы для переноса строк и изменения режима отступов в ng.include и @[<placeHolderName>]. Конкретные шаги следующие:

Пример использования ng.include: Пример:

<Form.Item label="@(model.display)" {...formItemLayout}>
    {getFieldDecorator('@(model.name)', {
        rules: [@(ng.include(' for', {arr: model.rules, template: 'frontend/create/rule', split: ',\n'}))]
    })(
        <Input @(model.isPassword ? ' type="password"' : '')
            placeholder="@(model.display)"
        />
    )}
</Form.Item>

Здесь ng.include('for' перед "подшаблономFilePath" добавлен пробел, поэтому при выводе будет следующий эффект:

<Form.Item label="Name1" {...formItemLayout}>
    {getFieldDecorator('ccc', {
        rules: [{required: true, message: 'Must required'},
                {validator: this.emailValidate, message: 'Must be email format'}]
    })(
        <Input 
            placeholder="Name1"
        />
    )}
</Form.Item>

Если убрать пробел:

<Form.Item label="@(model.display)" {...formItemLayout}>
    {getFieldDecorator('@(model.name)', {
        rules: [@(ng.include('for', {arr: model.rules, template: 'frontend/create/rule', split: ',\n'}))]
    })(
        <Input @(model.isPassword ? ' type="password"' : '')
            placeholder="@(model.display)"
        />
    )}
</Form.Item>

Результат будет следующим:

<Form.Item label="Name1" {...formItemLayout}>
    {getFieldDecorator('ccc', {
        rules: [{required: true, message: 'Must required'},
                {validator: this.emailValidate, message: 'Must be email format'}]
    })(
        <Input 
            placeholder="Name1"
        />
    )}
</Form.Item>

То есть, если перед строкой добавлен пробел, отступ при переносе строки будет соответствовать этому пробелу; если пробел не добавлен, отступ будет соответствовать тексту.

Использование @[] Заполнитель также следует тем же правилам. Пример: заполнитель:

import {
    Form@[ antd]
} from 'antd';

Определение содержимого заполнителя:

@[antd,input]{@:{,
Input@:}}

С пробелом результат будет таким:

import {
    Form,
    Input
} from 'antd';

Без пробела:

import {
    Form@[antd]
} from 'antd';

Результатом будет:

import {
    Form,
        Input
} from 'antd';

Модель

Пользователь может свободно определить свою собственную JS-модель и различные правила.

Встроенные атрибуты

Сама модель

Члены модели

Для членов объекта: _ref: если определено ref: '<filePath>' (здесь <filePath> — это относительный путь к файлу модели относительно конфигурации модели), _ref будет указывать на соответствующую модель.

module.exports = {
    ccc: {
        display: 'Name1',
        ref: 'order-manage/test.js',
        rules:[{type: 'required', message: 'Must required'},{type: 'email', message: 'Must be email format'}]
    }
};

Файл конфигурации (включая соединитель)

Модель объекта, возвращаемая коннектором

Область действия поддерживает древовидную структуру, разделённую на ., например, root может содержать root.module1, root.module1.module1_1. Если вы определили @[p]{<code>} в шаблоне области действия root.module1, вы можете использовать содержимое @[p] в шаблоне, определённом в области действия root.