@advdominion/babel-plugin-nunjucks
This commit is contained in:
70
packages/babel-plugin-nunjucks/README.md
Normal file
70
packages/babel-plugin-nunjucks/README.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# babel-plugin-nunjucks
|
||||
|
||||
Плагин для [babel-loader](https://github.com/babel/babel-loader), позволяющий использовать шаблонизатор [Nunjucks](https://mozilla.github.io/nunjucks/) внутри JS-файлов.
|
||||
|
||||
## Установка
|
||||
|
||||
```bash
|
||||
yarn add -D @advdominion/babel-plugin-nunjucks
|
||||
```
|
||||
|
||||
## Использование
|
||||
|
||||
Используются [Tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) с тегом `njk`:
|
||||
|
||||
```js
|
||||
njk`
|
||||
{% from "./item.njk" import item as item %}
|
||||
|
||||
<div class="items">
|
||||
{% for n in range(0, 10) %}
|
||||
{{item()}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
Пример конфигурации Webpack:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: [/mocks\.js$/],
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /mocks\.js$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
compact: false,
|
||||
plugins: [
|
||||
[
|
||||
'@advdominion/babel-plugin-nunjucks',
|
||||
{
|
||||
templatesFolder: 'src/templates/',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## Опции
|
||||
|
||||
- `templatesFolder` - строка, обязательный параметр. Путь до папки с файлами шаблонов
|
||||
- `globals` - массив, необязательный параметр. Глобальные переменные для Nunjucks (например, `[{name: "message", value: "Hello, world!"}]`)
|
||||
|
||||
**Важно:** Параметр `cacheDirectory` в опциях babel-loader должен быть отключён.
|
||||
129
packages/babel-plugin-nunjucks/index.js
Normal file
129
packages/babel-plugin-nunjucks/index.js
Normal file
@@ -0,0 +1,129 @@
|
||||
/* eslint-disable unicorn/no-useless-spread */
|
||||
|
||||
import js from '@eslint/js';
|
||||
import eslintConfigPrettier from 'eslint-config-prettier';
|
||||
import simpleImportSort from 'eslint-plugin-simple-import-sort';
|
||||
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
|
||||
import pluginVue from 'eslint-plugin-vue';
|
||||
import globals from 'globals';
|
||||
|
||||
const config = [
|
||||
{
|
||||
languageOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.nodeBuiltin,
|
||||
},
|
||||
},
|
||||
},
|
||||
js.configs.recommended,
|
||||
{
|
||||
rules: {
|
||||
...{
|
||||
'array-callback-return': 'error',
|
||||
'no-await-in-loop': 'warn',
|
||||
'no-duplicate-imports': 'warn',
|
||||
'no-promise-executor-return': 'error',
|
||||
'no-self-compare': 'error',
|
||||
'no-template-curly-in-string': 'warn',
|
||||
'no-unassigned-vars': 'warn',
|
||||
'no-unmodified-loop-condition': 'error',
|
||||
'no-unreachable-loop': 'error',
|
||||
'no-use-before-define': 'error',
|
||||
'no-useless-assignment': 'warn',
|
||||
},
|
||||
...{
|
||||
'dot-notation': 'warn',
|
||||
'eqeqeq': 'error',
|
||||
'no-implicit-coercion': 'warn',
|
||||
'no-negated-condition': 'warn',
|
||||
'no-useless-concat': 'warn',
|
||||
'object-shorthand': 'warn',
|
||||
'func-style': 'error',
|
||||
'no-console': ['warn', { allow: ['warn', 'error'] }],
|
||||
'no-param-reassign': 'error',
|
||||
'no-var': 'error',
|
||||
'one-var': ['warn', 'never'],
|
||||
'prefer-const': 'warn',
|
||||
'prefer-template': 'warn',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
plugins: {
|
||||
'simple-import-sort': simpleImportSort,
|
||||
},
|
||||
rules: {
|
||||
'simple-import-sort/imports': 'warn',
|
||||
},
|
||||
},
|
||||
{
|
||||
plugins: {
|
||||
unicorn: eslintPluginUnicorn,
|
||||
},
|
||||
rules: {
|
||||
...Object.fromEntries(
|
||||
Object.entries(eslintPluginUnicorn.configs.recommended.rules).map(([rule, level]) => [
|
||||
rule,
|
||||
level === 'off' ? 'off' : 'warn',
|
||||
]),
|
||||
),
|
||||
'unicorn/better-regex': 'warn',
|
||||
'unicorn/filename-case': ['warn', { cases: { kebabCase: true, pascalCase: true } }],
|
||||
'unicorn/prefer-global-this': 'off',
|
||||
'unicorn/prefer-import-meta-properties': 'warn',
|
||||
'unicorn/prefer-top-level-await': 'off',
|
||||
'unicorn/prevent-abbreviations': 'off',
|
||||
},
|
||||
},
|
||||
...pluginVue.configs['flat/recommended'],
|
||||
{
|
||||
rules: {
|
||||
...{
|
||||
'vue/no-v-html': 'off',
|
||||
'vue/one-component-per-file': 'off',
|
||||
},
|
||||
...{
|
||||
'vue/component-name-in-template-casing': 'warn',
|
||||
'vue/component-options-name-casing': 'warn',
|
||||
'vue/custom-event-name-casing': 'warn',
|
||||
'vue/match-component-file-name': ['warn', { extensions: ['vue'], shouldMatchCase: true }],
|
||||
'vue/match-component-import-name': 'warn',
|
||||
'vue/no-boolean-default': 'warn',
|
||||
'vue/no-potential-component-option-typo': 'warn',
|
||||
'vue/no-useless-mustaches': 'warn',
|
||||
'vue/no-useless-v-bind': 'warn',
|
||||
'vue/require-direct-export': 'warn',
|
||||
'vue/require-name-property': 'warn',
|
||||
'vue/v-for-delimiter-style': 'warn',
|
||||
'vue/v-on-handler-style': ['warn', 'inline'],
|
||||
},
|
||||
...{
|
||||
'vue/dot-notation': 'warn',
|
||||
'vue/eqeqeq': 'error',
|
||||
'vue/no-console': ['warn', { allow: ['warn', 'error'] }],
|
||||
'vue/no-constant-condition': 'error',
|
||||
'vue/no-empty-pattern': 'error',
|
||||
'vue/no-implicit-coercion': 'warn',
|
||||
'vue/no-irregular-whitespace': 'error',
|
||||
'vue/no-loss-of-precision': 'error',
|
||||
'vue/no-negated-condition': 'warn',
|
||||
'vue/no-sparse-arrays': 'error',
|
||||
'vue/no-useless-concat': 'warn',
|
||||
'vue/object-shorthand': 'warn',
|
||||
'vue/prefer-template': 'warn',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.vue'],
|
||||
rules: {
|
||||
'no-useless-assignment': 'off', // ESLint не умеет работать с этим правилом внутри <template>
|
||||
},
|
||||
},
|
||||
eslintConfigPrettier,
|
||||
];
|
||||
|
||||
export default config;
|
||||
20
packages/babel-plugin-nunjucks/package.json
Normal file
20
packages/babel-plugin-nunjucks/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "@advdominion/babel-plugin-nunjucks",
|
||||
"version": "3.0.0",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"nunjucks": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user