vite babel 获取组件的 children 代码, 填写到 jsxCode 属性中

最终效果

<DocsModule title="类型"><Button>默认按钮</Button><Button type="primary">主要按钮</Button><Button type="success">成功按钮</Button><Button type="danger">危险按钮</Button>
</DocsModule>

转换为 ↓↓↓↓ ( 自动生成 , 再也不用手动写这些重复的代码了)

<DocsModule title="类型" jsxCode={`<Button>默认按钮</Button><Button type="primary">主要按钮</Button><Button type="success">成功按钮</Button><Button type="danger">危险按钮</Button>`}
><Button>默认按钮</Button><Button type="primary">主要按钮</Button><Button type="success">成功按钮</Button><Button type="danger">危险按钮</Button>
</DocsModule>

jsxCode 中格式比较乱, 无所谓,
组件内部会使用 prettier 格式化代码,
还有 highlight.js 给代码高亮

组件中还可以封装 代码前内容代码后内容 属性
用来自定义前后的内容
在这里插入图片描述

测试 行高亮

<DocsModuletitle="类型"codeLineHighLight={[{ line: 1, type: "info" },{ line: 2, type: "info" },{ line: 5, type: "error" },{ line: 6, type: "error" },]}
><Button>默认按钮</Button><Button type="primary">主要按钮</Button><Button type="success">成功按钮</Button><Button type="info">信息按钮</Button><Button type="warning">警告按钮</Button><Button type="danger">危险按钮</Button>
</DocsModule>

在这里插入图片描述

安装依赖

"devDependencies": {"@babel/core": "^7.22.9","@babel/generator": "^7.22.9","@babel/parser": "^7.22.7","@babel/plugin-syntax-jsx": "^7.22.5","@babel/preset-env": "^7.22.9","@babel/preset-typescript": "^7.22.5","@babel/traverse": "^7.22.8","@babel/types": "^7.22.5","@types/babel__generator": "^7.6.4","@types/babel__traverse": "^7.20.1",  
},

vite.config.ts

// 导入
import * as babelParser from '@babel/parser';
import babelTraverse from '@babel/traverse';
import * as babelTypes from '@babel/types';
import babelGenerator from '@babel/generator';//插件
plugins: [{name: '自动获取 jsx 内容,填写到 jsxCode',enforce: 'pre',transform(code, id) {// 只处理自己的 pages 目录代码if (!id.includes("node_modules") && id.includes("/examples/src/pages/")) {const ast = babelParser.parse(code, {plugins: ["jsx", "typescript"],sourceType: "module",});babelTraverse(ast, {JSXOpeningElement(path) {// DocsModule 是自己封装的 组件if (path.node.name.type == "JSXIdentifier" && path.node.name.name === "DocsModule") {const attributes = path.node.attributes;const hasJsxCodeAttr = attributes.find(item =>item.type === 'JSXAttribute' &&babelTypes.isJSXIdentifier(item.name, { name: 'jsxCode' }) // 忘了判断 code,用的很少,就懒得搞了.);// 如果已经自定义了 jsxCode 属性, 则跳过本次处理if (hasJsxCodeAttr) {return;}// 开始开始拼装 属性, 并赋值给 组件if (path.parent.type == "JSXElement") {const children = path.parent.children.filter((node) => node.type === "JSXElement");                const childrenStr = children.map((child) => babelGenerator(child).code).join("");const jsxCodeAttribute = babelTypes.jsxAttribute(// 组件中会给 jsxCode 在前后 加上 <> </> , 因为 jsx 不允许一级结构存在多个组件 (组件中用了 prettier 格式化代码,所以会报错)// 多个组件就赋值给 jsxCodebabelTypes.jsxIdentifier(children.length > 1 ? "jsxCode" : "code"),babelTypes.jsxExpressionContainer(// 定义模版字符串babelTypes.templateLiteral([babelTypes.templateElement({ raw: childrenStr }, true)], [])));// 向原始属性列表中添加新的 jsxCode 属性attributes.push(jsxCodeAttribute);}}},});// 生成转换后的代码let transformedCode: string = babelGenerator(ast).code;// fix: ast处理后末尾出现了分号  // 莫名其妙的多了分号, 感觉是 babel 的 bug, 或者是 边缘情况, babel 给误判了. (不是标准的js代码, 是纯jsx)transformedCode = transformedCode.replaceAll(">;", ">")return {code: transformedCode,map: null};}// 不是 pages 目录的代码 就直接返回原codereturn {code: code,map: null};},},// 其他插件↓
],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/20520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年中职组“网络安全”赛项吉安市竞赛任务书

2023年中职组“网络安全”赛项 吉安市竞赛任务书 一、竞赛时间 总计&#xff1a;360分钟 竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略配置 A-3 流量完整性保护 A-4 事件监控 A-5 服务加固…

Python访问者模式介绍、使用

目录 一、Python访问者模式介绍 二、访问者模式使用 一、Python访问者模式介绍 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它能够将算法与对象结构分离&#xff0c;使得算法可以独立于对象结构而变化。这个模式的主要思想是&#…

关于大规模数据处理的解决方案

大规模数据处理已经成为了现代商业和科学的核心。随着互联网普及和物联网技术的发展&#xff0c;越来越多的数据被收集和存储&#xff0c;这些数据包含了各种各样的信息&#xff0c;例如客户行为、传感器读数、社交媒体活动等等。这些数据的数量和复杂性已经超出了传统数据处理…

docker logs 使用说明

docker logs 可以查看某个容器内的日志情况。 前置参数说明 c_name容器名称 / 容器ID logs 获取容器的日志 , 命令如下&#xff1a; docker logs [options] c_name option参数&#xff1a; -n 查看最近多少条记录&#xff1a;docker logs -n 5 c_name--tail与-n 一样 &#…

【iOS】锁

线程安全 当一个线程访问数据的时候&#xff0c;其他的线程不能对其进行访问&#xff0c;直到该线程访问完毕。简单来讲就是在同一时刻&#xff0c;对同一个数据操作的线程只有一个。而线程不安全&#xff0c;则是在同一时刻可以有多个线程对该数据进行访问&#xff0c;从而得…

【力扣】722. 删除注释

以下为力扣官方题解&#xff0c;及本人代码 722. 删除注释 题目题意示例 1示例 2提示 官方题解模拟思路与算法复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 给一个 C C C 程序&#xff0c;删除程序中的注释。这个程序 s o u r c e source source 是一个数组&a…

Android SharedPreferences 使用(详细版)

经典好文推荐,通过阅读本文,您将收获以下知识点: 一、 SharedPreferences 简介 二、SharedPreferences 保存数据的方法 三、SharedPreferences读取数据的方法 四、总结SharePerference Utils 封装类使用方法 五、SharedPreferences 数据保存位置 一、 SharedPreferences 简介…

openCV C++环境配置

文章目录 一、openCV 安装二、新建项目三、配置环境变量四、测试使用 编译器:vs2017 OpenCV:4.5.4 一、openCV 安装 将openCV安装到一个路径下&#xff0c;我安装到了D盘根目录下 二、新建项目 在vs2017新建控制台空项目&#xff0c;打开项目属性 在VC目录 -> 包含目录下…

webrtc的线程模型

目录 线程的声明 线程创建过程 向线程中投递消息 从消息队列中取消息的具体实现 处理线程消息 webrtc线程模块的实现逻辑在 rtc_base\thread.h 文件中 比如想创建一个线程&#xff1a; //声明要创建的线程指针&#xff0c;通过智能指针管理 std::unique_ptr<rtc::Thr…

使用Jackson自定义反序列化操作(Custom Deserialization in Jackson)

Maven依赖 <dependencies><!-- yaml --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.14.2</version><exclusions><exclusion><ar…

智慧林业~经典开源项目数字孪生智慧林业——开源工程及源码

东北林业局的工程和源码免费赠送&#xff0c;帮您实现深林防火的智慧林业。 项目介绍 东北林业局作为东北地区林业管理的重要机构&#xff0c;致力于森林资源保护和防火工作。他们的项目通过先进的技术手段&#xff0c;为林业管理提供可靠的解决方案。 本项目使用数字孪生技术&…

【实操教程】如何开始用Qt Widgets编程?(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

轮足机器人硬件总结

简介 本文主要根据“轮腿机器人Hyun”总结的硬件部分。 轮腿机器人Hyun开源地址&#xff1a;https://github.com/HuGuoXuang/Hyun 1 电源部分 1.1 78M05 78M05是一款三端稳压器芯片&#xff0c;它可以将输入电压稳定输出为5V直流电压. 1.2 AMS1117-3.3 AMS1117-3.3是一种输…

postgresql数据库表膨胀之pg_repack安装及使用

pg_repack是一个可以在线重建表和索引的扩展。它会在数据库中建立一个和需要清理的目标表一样的临时表&#xff0c;将目标表中的数据COPY到临时表&#xff0c;并在临时表上建立与目标表一样的索引&#xff0c;然后通过重命名的方式用临时表替换目标表。 环境&#xff1a; 1&a…

代码随想录算法训练营第五十天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

代码随想录算法训练营第五十九天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV 一、力扣123.买卖股票的最佳时机III 题目链接 思路&#xff1a;之前的类型是用数组记录当前是持有还是不持有&#xff0c;而这道题目多了两种状态&#xff0c;即为&#xff0c;第一次持…

Vue实现leafletMap自定义绘制线段 并且删除指定的已绘制的点位

效果&#xff1a;点击表格可实现选中地图点位&#xff0c;删除按钮点击可删除对应点位并且重新绘制线段&#xff0c;点击确定按钮 保存已经绘制的点位信息传给父组件 并且该组件已实现回显 完整的组件代码如下 文件名称为&#xff1a; leafletMakePointYt <!--* Descripti…

云原生周刊:Kubeflow 成为 CNCF 项目

开源项目推荐 OpenKruiseGame OpenKruiseGame&#xff08;OKG&#xff09;是简化游戏服云原生化的自定义 Kubernetes 工作负载&#xff0c;相比 Kubernetes 内置的无状态&#xff08;Deployment&#xff09;、有状态&#xff08;StatefulSet&#xff09;等工作负载而言&#…

FPGA优质开源模块 - SRIO

本文介绍一个FPGA常用模块&#xff1a;SRIO&#xff08;Serial RapidIO&#xff09;。SRIO协议是一种高速串行通信协议&#xff0c;在我参与的项目中主要是用于FPGA和DSP之间的高速通信。有关SRIO协议的详细介绍网上有很多&#xff0c;本文主要简单介绍一下SRIO IP核的使用和本…

SIFT算法原理:SIFT算法详细介绍

前面我们介绍了Harris和Shi-Tomasi角点检测算法&#xff0c;这两种算法具有旋转不变性&#xff0c;但不具有尺度不变性&#xff0c;以下图为例&#xff0c;在左侧小图中可以检测到角点&#xff0c;但是图像被放大后&#xff0c;在使用同样的窗口&#xff0c;就检测不到角点了。…

机器学习完整路径

一个机器学习项目从开始到结束大致分为 5 步&#xff0c;分别是定义问题、收集数据和预处理、选择算法和确定模型、训练拟合模型、评估并优化模型性能。是一个循环迭代的过程&#xff0c;优秀的模型都是一次次迭代的产物。 定义问题 要剖析业务场景&#xff0c;设定清晰的目标…