neo-cmp-cli 1.8.1 → 1.8.3

package/README.md

@@ -243,9 +243,93 @@ module.exports = {
 
 ### 3. 使用平台实体数据源
 
-可使用 OpenAPI SDK 对接平台实体数据源，详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
+可在自定义组件中使用 OpenAPI SDK 对接平台实体数据源，详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
+
+```typescript
+import { xObject } from 'neo-open-api';
+
+// 查询联系人列表
+const {data: contacts} = await xObject.query({
+  xObjectApiKey: 'Contact',
+  fields: ['name', 'phone', 'email'],
+  page: 1,
+  pageSize: 20,
+  orderBy: 'createdAt desc'
+});
+
+// 创建新联系人
+const {data: newContact} = await xObject.create('Contact', {
+  data: {
+    name: '王五',
+    phone: '13700137000',
+    email: 'wangwu@example.com'
+  }
+});
+
+// 更新联系人
+const {data: updatedContact} = await xObject.update('Contact', newContact.id, {
+  data: {
+    name: '王五（更新）'
+  }
+});
+
+// 获取联系人详情
+const {data: contactDetail} = await xObject.get('Contact', newContact.id);
+
+// 删除联系人
+await xObject.delete('Contact', newContact.id);
+```
+
+
+### 4. 使用平台自定义API
+
+可在自定义组件中使用 OpenAPI SDK 对接平台自定义API，详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
+
+```typescript
+import { customApi } from 'neo-open-api';
+
+// 基本用法
+const result = await customApi.run({
+  apiUrl: '/rest/custom/api/endpoint', // 自定义API地址
+  methodType: 'POST', // 请求方法，如 'GET', 'POST', 'PUT', 'DELETE' 等（可选，默认为 'POST'）
+  data: { // 请求数据
+    key1: 'value1',
+    key2: 'value2'
+  }
+});
+```
+
+**参数说明：**
+- `apiUrl`: 自定义API的完整地址（必填）
+- `methodType` 或 `method`: 请求方法，默认为 'POST'
+- `data`: 请求数据对象，会被包装在 `data` 字段中发送
+
+**返回结果：**
+```typescript
+{
+  status: boolean, // 返回 true 表示执行成功
+  code: number | string, // 返回码
+  msg: string, // 一般用于返回错误信息
+  data: any // API返回的数据
+}
+```
+
+**使用示例：**
+```typescript
+import { customApi } from 'neo-open-api';
+
+// 执行自定义API
+const result = await customApi.run({
+  apiUrl: '/rest/custom/api/processData',
+  methodType: 'POST',
+  data: {
+    param1: 'value1',
+    param2: 'value2'
+  }
+});
+```
 
-### 4. 默认复用平台第三方依赖
+### 5. 默认复用平台第三方依赖
 
 自定义组件构建过程中默认会剔除掉平台已有依赖模块（比如 antd、echarts、axios、lodash 等），确保自定义组件构建后的资源体积较小。
 
@@ -276,7 +360,7 @@ module.exports = {
 
 > **注意**：自定义组件中请使用依赖包支持的版本，如版本不匹配运行时可能出现异常。
 
-### 5. 本地调试自定义组件
+### 6. 本地调试自定义组件
 
 #### 步骤 1：启动外链调试模式
 
@@ -294,7 +378,7 @@ neo linkDebug
 
 页面设计器开启 debug 模式后，左侧会展示**外部链接**管理面板。将第 1 步生成的「外链脚本地址」添加进来，即可在此页面设计器 / 组件物料面板中看到对应自定义组件。
 
-### 6. 发布自定义组件至 NeoCRM
+### 7. 发布自定义组件至 NeoCRM
 
 执行 `neo push cmp` 即可构建并发布自定义组件至 NeoCRM 平台，其构建后资源也会上传到 NeoCRM 平台端提供的 CDN 中。
 
@@ -342,7 +426,7 @@ A: 请检查 `neo.config.js` 文件中是否配置了 `neoConfig.auth`，确保
 
 发布成功后，即可在对应租户环境下的页面设计器和表单设计器中使用此自定义组件。
 
-### 7. 拉取线上自定义组件至本地项目
+### 8. 拉取线上自定义组件至本地项目
 
 执行 `neo pull cmp` 即可从 NeoCRM 平台拉取自定义组件源码到当前项目。该命令会将线上自定义组件的源码下载并解析到当前项目的 `src/components` 目录下。
 
@@ -370,7 +454,7 @@ neo pull cmp -n xxCmp
 - 如果组件源码中包含新增的依赖包，拉取完成后会提示执行 `npm install` 或 `yarn install`
 - zip 源文件会保留在 `.neo-cli/zip-source` 目录下，可手动删除
 
-### 8. 删除线上自定义组件
+### 9. 删除线上自定义组件
 
 执行 `neo delete cmp` 即可从 NeoCRM 平台删除指定的自定义组件。该命令会删除平台上的自定义组件，删除后该组件将无法在页面设计器和表单设计器中使用。
 
@@ -397,7 +481,7 @@ neo delete cmp -n xxCmp
 - ⚠️ **影响范围**：删除组件后，所有使用该组件的页面和表单将受到影响，请确保没有正在使用的场景
 - 💡 **建议先备份**：删除前建议先使用 `neo pull cmp` 拉取组件源码到本地进行备份
 
-### 9. 发布自定义组件至 CDN
+### 10. 发布自定义组件至 CDN
 
 执行 `neo publish2oss` 即可构建对应自定义组件，并自动将构建后资源上传到对象存储（OSS）中。
 

package/bin/neo.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../src/module/index');
+require('../src/index');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Neo 自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",
@@ -11,9 +11,10 @@
   "bin": {
     "neo": "./bin/neo.js"
   },
-  "main": "src/module/main.js",
+  "main": "src/main.js",
   "scripts": {
     "neo": "neo",
+    "build2lib": "",
     "format": "prettier --write \"src/**/**/*.{js,jsx,vue,tsx,ts,scss,less,json}\""
   },
   "files": [
@@ -41,7 +42,7 @@
   },
   "dependencies": {
     "adm-zip": "^0.5.10",
-    "akfun": "^5.1.12",
+    "akfun": "^6.0.0",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.8",
     "chalk": "^4.0.0",
@@ -66,8 +67,8 @@
     "prettier": "^2.0.5"
   },
   "engines": {
-    "node": ">= 10.13.0",
-    "npm": ">= 6.4.1"
+    "node": ">= 16.0.0",
+    "npm": ">= 8.0.0"
   },
   "browserslist": [
     "> 1%",

package/src/{module/index.js → index.js}

@@ -3,21 +3,21 @@ const yargs = require('yargs'); // 命令行工具
 const chalk = require('chalk'); // 带样式的log输出
 const inquirer = require('inquirer'); // 问答式交互
 const ora = require('ora');
-const neoInit = require('./neoInit.js');
-const neoInitByCopy = require('./neoInitByCopy.js');
-const inspect = require('./inspect.js'); // 输出当前项目配置文件
-const neoConfigInit = require('../utils/neoConfigInit.js');
-const { validateProjectName } = require('../utils/projectNameValidator.js');
-const mainAction = require('./main.js'); // 入口文件
-const getCmpTypeByDir = require('../utils/cmpUtils/getCmpTypeByDir.js');
-const NeoService = require('../neo/neoService.js');
-const NeoLoginService = require('../neo/neoLogin.js');
-const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
-const hasNeoProject = require('../utils/projectUtils/hasNeoProject.js');
-const consoleTag = require('../utils/neoParams').consoleTag;
-const { errorLog, successLog } = require('../utils/common');
+const neoInit = require('./module/neoInit.js');
+const neoInitByCopy = require('./module/neoInitByCopy.js');
+const inspect = require('./module/inspect.js'); // 输出当前项目配置文件
+const neoConfigInit = require('./utils/neoConfigInit.js');
+const { validateProjectName } = require('./utils/projectNameValidator.js');
+const getCmpTypeByDir = require('./utils/cmpUtils/getCmpTypeByDir.js');
+const NeoService = require('./neo/neoService.js');
+const NeoLoginService = require('./neo/neoLogin.js');
+const curConfig = require('./config/index'); // 获取当前项目根目录下的配置文件
+const hasNeoProject = require('./utils/projectUtils/hasNeoProject.js');
+const consoleTag = require('./utils/neoParams').consoleTag;
+const { errorLog, successLog } = require('./utils/common');
 // neo 的 package 文件
-const neoPackage = require('../../package.json');
+const neoPackage = require('../package.json');
+const mainAction = require('./main.js'); // 入口文件
 
 const titleTip = function (msg) {
   return chalk.green(chalk.bold(msg));

package/src/{module/main.js → main.js}

@@ -1,23 +1,23 @@
 const akfun = require('akfun');
 const _ = require('lodash');
-const neoInit = require('./neoInit');
-const neoInitByCopy = require('./neoInitByCopy');
-const inspect = require('./inspect');
-const neoConfigInit = require('../utils/neoConfigInit.js');
-const { consoleTag } = require('../utils/neoParams');
-const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
-const publish2oss = require('../oss/publish2oss');
-const pushCmp = require('../utils/cmpUtils/pushCmp');
-const previewCmp = require('../utils/cmpUtils/previewCmp');
-const generateEntries = require('../utils/generateEntries');
-// const { MFPlugins } = require('../neo/webpack.mf');
-const createCmpByTemplate = require('../utils/cmpUtils/createCmpByTemplate');
-const createCmpProjectByTemplate = require('../utils/projectUtils/createCmpProjectByTemplate');
-const pullCmp = require('../utils/cmpUtils/pullCmp');
-const deleteCmp = require('../utils/cmpUtils/deleteCmp');
-const openProject = require('../utils/projectUtils/openProject');
-const { configureNeoBuild } = require('../utils/configureNeoBuild');
-const { errorLog, successLog } = require('../utils/common');
+const neoInit = require('./module/neoInit');
+const neoInitByCopy = require('./module/neoInitByCopy');
+const inspect = require('./module/inspect');
+const neoConfigInit = require('./utils/neoConfigInit.js');
+const { consoleTag } = require('./utils/neoParams');
+const curConfig = require('./config/index'); // 获取当前项目根目录下的配置文件
+const publish2oss = require('./oss/publish2oss');
+const pushCmp = require('./utils/cmpUtils/pushCmp');
+const previewCmp = require('./utils/cmpUtils/previewCmp');
+const generateEntries = require('./utils/generateEntries');
+// const { MFPlugins } = require('./neo/webpack.mf');
+const createCmpByTemplate = require('./utils/cmpUtils/createCmpByTemplate');
+const createCmpProjectByTemplate = require('./utils/projectUtils/createCmpProjectByTemplate');
+const pullCmp = require('./utils/cmpUtils/pullCmp');
+const deleteCmp = require('./utils/cmpUtils/deleteCmp');
+const openProject = require('./utils/projectUtils/openProject');
+const { configureNeoBuild } = require('./utils/configureNeoBuild');
+const { errorLog, successLog } = require('./utils/common');
 
 const getValue = (originValue, defaultValue) => {
   return originValue !== undefined ? originValue : defaultValue;

package/src/module/neoInitByCopy.js

@@ -9,27 +9,27 @@ const { errorLog } = require('../utils/common');
 const templateList = {
   react: {
     projectName: 'react-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/react-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/react-custom-cmp-template')
   },
   'react-ts': {
     projectName: 'react-ts-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/react-ts-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/react-ts-custom-cmp-template')
   },
   antd: {
     projectName: 'antd-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/antd-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/antd-custom-cmp-template')
   },
   echarts: {
     projectName: 'echarts-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/echarts-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/echarts-custom-cmp-template')
   },
   neo: {
     projectName: 'neo-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/neo-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/neo-custom-cmp-template')
   },
   vue2: {
     projectName: 'vue2-custom-cmp-template',
-    dir: path.resolve(__dirname, '../template/vue2-custom-cmp-template')
+    dir: path.resolve(__dirname, '../../template/vue2-custom-cmp-template')
   }
 };
 

package/src/neo/webpack.mf.js

@@ -1,12 +1,12 @@
 // 模块联邦插件
 const webpack = require('webpack');
 const { ModuleFederationPlugin } = require('webpack').container;
+const { getConfigObj } = require('akfun');
 
 // 解析 webpack 模块联邦 remotes 中的变量
 const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
 
 const { catchCurPackageJson } = require('../utils/pathUtils');
-const getConfigObj = require('../utils/getConfigObj');
 
 // 获取当前项目的package文件
 const currentPackageJsonDir = catchCurPackageJson();

package/src/oss/publish2oss.js

@@ -3,8 +3,8 @@ const fs = require('fs');
 const path = require('path');
 const _ = require('lodash');
 const ora = require('ora');
+const { getConfigObj } = require('akfun');
 const { catchCurPackageJson } = require('../utils/pathUtils');
-const getConfigObj = require('../utils/getConfigObj');
 const updatePublishLog = require('../utils/projectUtils/updatePublishLog');
 const { errorLog, warningLog, successLog } = require('../utils/common');
 

package/src/utils/cmpUtils/createCmpByZip.js

@@ -113,14 +113,14 @@ function formatConfigObject(obj, indent = 0, fileDir = '') {
  * @param {*} cmpZipUrl 自定义组件源码文件地址（zip包地址）
  * @param {*} cmpName 自定义组件名称
  * @param {*} componentBaseDir 自定义组件目录
- * 
+ *
  * 拉取线上自定义组件源码 规则：
  * 1、对于 组件源码中 src/components 中的所有文件 copy 至 当前项目 src/components，非覆盖式（copy 前判断是否存在）；
  * 2、对于 组件源码中的 配置文件（neo.config.js）内容 和 当前项目配置 进行 非覆盖式 merge 处理；
  * 3、对于 组件源码中的 tsconfig.json 文件内容 和 当前项目 tsconfig  进行 非覆盖式 merge 处理；
  * 4、对于 组件源码中的 package.json 文件内容 和 当前项目 package.json  进行 非覆盖式 merge 处理，并识别新增 依赖，提示用户 重新安装依赖
  */
-module.exports = async function (cmpZipUrl, option = {}) {
+async function createCmpByZip(cmpZipUrl, option = {}) {
   const { token, cmpName, componentBaseDir = './src/components' } = option || {};
   const finalCmpName = cmpName;
 
@@ -158,7 +158,7 @@ module.exports = async function (cmpZipUrl, option = {}) {
       response = await axios.get(cmpZipUrl, {
         headers: {
           Authorization: `Bearer ${token}`,
-          'xsy-inner-source': 'bff',
+          'xsy-inner-source': 'bff'
         },
         responseType: 'arraybuffer',
         timeout: 60000, // 60秒超时
@@ -171,7 +171,7 @@ module.exports = async function (cmpZipUrl, option = {}) {
         }
       });
     } catch (axiosError) {
-      const errorMessage = axiosError.response 
+      const errorMessage = axiosError.response
         ? `下载文件失败: HTTP ${axiosError.response.status} - ${axiosError.message}`
         : `下载文件失败: ${axiosError.message}`;
       errorLog(errorMessage, spinner);
@@ -403,4 +403,6 @@ module.exports = async function (cmpZipUrl, option = {}) {
 
     return false;
   }
-};
+}
+
+module.exports = createCmpByZip;

package/src/utils/cmpUtils/pullCmp.js

@@ -1,6 +1,6 @@
 const _ = require('lodash');
+const { getConfigObj } = require('akfun');
 const { catchCurPackageJson } = require('../pathUtils');
-const getConfigObj = require('../getConfigObj');
 const ora = require('ora');
 const NeoService = require('../../neo/neoService');
 const { getFramework, errorLog, successLog } = require('../common');

package/src/utils/cmpUtils/pushCmp.js

@@ -1,8 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 const _ = require('lodash');
+const { getConfigObj } = require('akfun');
 const { catchCurPackageJson } = require('../pathUtils');
-const getConfigObj = require('../getConfigObj');
 const ora = require('ora');
 const NeoService = require('../../neo/neoService');
 const { getFramework, errorLog, successLog } = require('../common');
@@ -12,7 +12,6 @@ const createCmpProjectZip = require('../projectUtils/createCmpProjectZip');
 const currentPackageJsonDir = catchCurPackageJson();
 const currentPackageJson = getConfigObj(currentPackageJsonDir);
 
-
 // 获取属性 propsSchema 数据结构
 const getPropsSchema = (propsSchema = []) => {
   return propsSchema.map((item) => {
@@ -98,10 +97,10 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
       label: modelInstance.label || cmpType,
       description: modelInstance.description || '',
       componentCategory: (modelInstance.tags || ['自定义组件']).join(','),
-      targetPage: (modelInstance.targetPage || ['customPage']), // 支持的页面类型
-      targetObject: (modelInstance.targetObject || ['all']), // 支持的实体类型
-      targetApplication: (modelInstance.targetApplication || ['all']), // 支持的应用类型
-      targetDevice: (modelInstance.targetDevice || 'all'), // 支持的设备类型。只有这个字段是字符串数值，其他都是数组
+      targetPage: modelInstance.targetPage || ['customPage'], // 支持的页面类型
+      targetObject: modelInstance.targetObject || ['all'], // 支持的实体类型
+      targetApplication: modelInstance.targetApplication || ['all'], // 支持的应用类型
+      targetDevice: modelInstance.targetDevice || 'all', // 支持的设备类型。只有这个字段是字符串数值，其他都是数组
       iconUrl: modelInstance.iconSrc || modelInstance.iconUrl,
       defaultProps: JSON.stringify(modelInstance.defaultComProps || {}),
       previewProps: JSON.stringify(modelInstance.previewComProps || {}),
@@ -116,7 +115,10 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
         modelInstance.enableDuplicate !== undefined ? modelInstance.enableDuplicate : true
     };
 
-    console.log(`自定义组件模型信息（${cmpType}）:`, _.omit(curCmpInfo, ['assetFile', 'modelAssetFile', 'cssAssetFile', 'codeLibFile']));
+    console.log(
+      `自定义组件模型信息（${cmpType}）:`,
+      _.omit(curCmpInfo, ['assetFile', 'modelAssetFile', 'cssAssetFile', 'codeLibFile'])
+    );
     return curCmpInfo;
   } catch (error) {
     errorLog(`自定义组件模型文件解析失败 (${modelFile || '未知路径'}): ${error.message}`);

package/src/utils/projectUtils/updatePublishLog.js

@@ -4,7 +4,7 @@ const { resolveToCurrentRoot } = require('../pathUtils');
 /**
  * 更新发布日志
  */
-module.exports = (curHistoryData) => {
+module.exports = function (curHistoryData) {
   // 创建存放 cli 的临时目录
   const cliTempDir = resolveToCurrentRoot('./.neo-cli');
   if (!fs.existsSync(cliTempDir)) {

package/test/demo.js

@@ -1,4 +1,4 @@
-const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy, previewCmp } = require('../src/module/main');
+const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy, previewCmp } = require('../src/main');
 const getEntries = require('../src/utils/projectUtils/getEntries');
 const getEntriesWithAutoRegister = require('../src/utils/projectUtils/getEntriesWithAutoRegister');
 // inspect('dev');

package/test/demo3.js

@@ -1,3 +1,3 @@
-const openEditor = require('../src/module/main').openEditor;
+const openEditor = require('../dist/main.js').openEditor;
 
 openEditor('auto', 'src');

package/test/neo.config.js

@@ -0,0 +1,77 @@
+'use strict';
+const path = require('path');
+// 统一路径解析
+function resolve(dir) {
+  return path.resolve(__dirname, dir);
+}
+
+// 包括生产和开发的环境配置信息
+module.exports = {
+  settings: {
+    enableESLint: false, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: false, // 是否自动修正代码格式，默认不自动修正
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    resolve: {
+      // webpack的resolve配置
+      extensions: ['.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      alias: {
+        '@': resolve('src'),
+      },
+      // conditionNames: ['require']
+    },
+    target: 'node',
+    createDeclaration: true, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
+    allowList: [], // ignoreNodeModules为true时生效
+    externals: [],
+    projectDir: ['src'],
+    // cssLoaderUrl: true,
+    moduleRules: [], // 用于配置自定义loaders
+    plugins: [], // 用于配置自定义plugins
+  },
+  build2lib: {
+    entry: {
+      index: './src/index.js', // 构建lib的入口
+      main: './src/main.js', // 构建lib的入口
+    },
+    output: {
+      filename: '[name].js',
+      library: {
+        type: 'commonjs2', // 使用 CommonJS 模式构建
+      }
+    },
+    // 用于构建生产环境代码的相关配置信息
+    NODE_ENV: 'development', // development / production
+    assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径）
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    ignoreNodeModules: true, // 打包时是否忽略 node_modules
+    // allowList: ['vue'], // ignoreNodeModules为true时生效
+    productionSourceMap: false,
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'json'],
+    // bundleAnalyzerReport: false
+  },
+  build2esm: {
+    type: 'js',
+    compress: false,
+    input: {
+      index: resolve('src/index.js'),
+      main: resolve('src/main.js')
+    },
+    output: {
+      dir: resolve('dist'),
+      format: 'cjs', // which can be one of "amd", "cjs", "system", "es", "iife" or "umd".
+      preserveModules: true, // 关键：保留原始模块结构，不合并文件
+      preserveModulesRoot: 'src', // 指定模块根目录
+      entryFileNames: '[name].js',
+      exports: 'auto', // 自动处理导出（适配 ES 模块的默认导出/命名导出）
+      // interop: 'auto' // 自动处理 CJS/ES 模块互操作（如 __esModule 标记）
+    },
+    // 不将以下依赖打包到输出文件中
+    excludeList: []
+  }
+};

package/src/template/antd-custom-cmp-template/.prettierrc.js

@@ -1,12 +0,0 @@
-/*
-  prettier 配置文件
-  更多配置信息：https://prettier.io/docs/en/options.html
- */
-module.exports = {
-  semi: true, // Semicolons 分号，默认需要分号
-  tabWidth: 2, // 空格，默认 2,
-  useTabs: false,
-  singleQuote: true, // 单引号还是双引号，默认为false 双引号
-  trailingComma: 'all', // 逗号
-  jsxBracketSameLine: false, // 默认为false，Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
-};