shendu-portal-plugin-vue/src/rules.js

const api = require('./api');
const arrayRefs = require('./array-refs');
const asyncComponents = require('./async-components');
const customDirectives = require('./custom-directives');
const attrsIncludesClassStyle = require('./attrs-includes-class-style');
const children = require('./children');
const emitsOptions = require('./emits-option');
const eventsApi = require('./events-api');
const filters = require('./filters');
const functionalComponents = require('./functional-components');
const globalApiTreeshaking = require('./global-api-treeshaking');
const globalApi = require('./global-api');
const keyAttribute = require('./key-attribute');
const keycodeModifiers = require('./keycode-modifiers');
const lifeCycle = require('./life-cycle');
const listenersRemoved = require('./listeners-removed');
const renderFunctionApi = require('./render-function-api');
const slotsUnification = require('./slots-unification');
const transitionGroup = require('./transition-group');
const transition = require('./transition');
const vBind = require('./v-bind');
const vIfvFor = require('./v-if-v-for');
const vModel = require('./v-model-pro');
const vOnNativeModifierRemoved = require('./v-on-native-modifier-removed');
const watch = require('./watch');
const router = require('./vue-router');
const vuex = require('./vue-vuex');
const packageJson = require('./package-json');

module.exports = [
    { name: 'api', rule: api, test: /\.vue$|\.js$|\.ts$/ },
    { name: 'router', rule: router, test: /\.vue$|\.js$|\.ts$/ },
    { name: 'vuex', rule: vuex, test: /\.js$|\.ts$/ },
    {
        name: 'globalApiTreeshaking',
        rule: globalApiTreeshaking,
        test: /\.vue$|\.js$|\.ts$/,
    },
    { name: 'arrayRefs', rule: arrayRefs, test: /\.vue$/ },
    {
        name: 'asyncComponents',
        rule: asyncComponents,
        test: /\.vue$|\.js$|\.ts$/,
    },
    {
        name: 'customDirectives',
        rule: customDirectives,
        test: /\.vue$|\.js$|\.ts$/,
    },
    {
        name: 'attrsIncludesClassStyle',
        rule: attrsIncludesClassStyle,
        test: /\.vue$/,
    },
    { name: 'children', rule: children, test: /\.vue$|\.js$|\.ts$/ },
    { name: 'emitsOptions', rule: emitsOptions, test: /\.vue$|\.js$|\.ts$/ },
   
    { name: 'filters', rule: filters, test: /\.vue$|\.js$|\.ts$/ },
    {
        name: 'functionalComponents',
        rule: functionalComponents,
        test: /\.vue$|\.js$|\.ts$/,
    },
    { name: 'globalApi', rule: globalApi, test: /\.vue$|\.js$|\.ts$/ },
    
    { name: 'keycodeModifiers', rule: keycodeModifiers, test: /\.vue$/ },
    { name: 'lifeCycle', rule: lifeCycle, test: /\.vue$|\.js$|\.ts$/ },
    { name: 'listenersRemoved', rule: listenersRemoved, test: /\.vue$/ },
    {
        name: 'renderFunctionApi',
        rule: renderFunctionApi,
        test: /\.vue$|\.js$|\.ts$/,
    },
    { name: 'slotsUnification', rule: slotsUnification, test: /\.vue$/ },
    { name: 'transition', rule: transition, test: /\.vue$/ },
    { name: 'transitionGroup', rule: transitionGroup, test: /\.vue$/ },
    { name: 'vBind', rule: vBind, test: /\.vue$/ },
    { name: 'vIfvFor', rule: vIfvFor, test: /\.vue$/ },
    { name: 'vModel', rule: vModel, test: /\.vue$|\.js$|\.ts$/ },
    {
        name: 'vOnNativeModifierRemoved',
        rule: vOnNativeModifierRemoved,
        test: /\.vue$/,
    },
    { name: 'watch', rule: watch, test: /\.vue$|\.js$|\.ts$/ },
    //keyAttribute 规则要放到 vIfvFor 后面执行
    { name: 'keyAttribute', rule: keyAttribute, test: /\.vue$/ },
    {
        name: 'package-json',
        rule: packageJson,
        test: /package\.json$/,
        notParseAst: false,
    },
    { name: 'eventsApi', rule: eventsApi, test: /\.vue$|\.js$|\.ts$/ },
    { name: 'common', rule: (ast, { gogocode: $ }, options) => {
        let scriptAst = ast.find('<script></script>')
        scriptAst.replace(`this.$store.state`, `this.$store`);
        scriptAst.remove(`import {$_$} from 'vuex'`);
        scriptAst.replace(`import {$$$} from 'ruibo-components-ui'`, `import {$$$} from '@/utils'`);
        scriptAst.replace(`import {$$$} from 'ruibo-components-ui/packages/service/fetch'`, `import {$$$} from '@/utils'`);
        // this.closeNavTab
        scriptAst.replace(`this.closeNavTab`, `this.$store.closeNavTab`);

        // // format="yyyy-MM-dd HH:mm:ss" 转成 format="YYYY-MM-DD HH:mm:ss"
        // scriptAst.replace(`format="yyyy-MM-dd $$$1"`, 'format="YYYY-MM-DD $$$1"');
        // // value-format="yyyy-MM-dd HH:mm:ss" 转成 value-format="YYYY-MM-DD HH:mm:ss"
        // scriptAst.replace(`format="yyyy-MM-dd $$$1"`, 'format="YYYY-MM-DD $$$1"');

        const vueContent = ast.generate();

        // 使用正则表达式替换 /deep/ 选择器
        let newVueContent = vueContent.replace(
            /(\s*)\/deep\/(\s*)([^{]+?)\s*{/g, 
            (match, space1, space2, selectorGroup) => {
              // 分割选择器组，确保正确处理逗号分隔的选择器
              const processedSelectors = selectorGroup
                .split(',')
                .map(selector => {
                  // 清理每个选择器
                  const cleaned = selector
                    .trim()
                    .replace(/\s*>\s*/g, ' > ')
                    .replace(/\s*~\s*/g, ' ~ ')
                    .replace(/\s*\+\s*/g, ' + ');
                  
                  // 移除可能残留的 /deep/ 并包裹在 :deep() 中
                  return cleaned.replace(/\s*\/deep\/\s*/g, ' ').trim();
                })
                .filter(selector => selector.length > 0) // 过滤空选择器
                .map(selector => `:deep(${selector})`)
                .join(', ');
              
              return `${space1}${processedSelectors} {`;
            }
          );
        newVueContent = newVueContent.replace(/format=\"yyyy-MM-dd/g, 'format="YYYY-MM-DD')
        newVueContent = newVueContent.replace(/value-format=\"yyyy-MM-dd/g, 'value-format="YYYY-MM-DD')
        // 重新解析为 AST
        return $(newVueContent, { parseOptions: { language: 'vue' } });
    }, test: /\.vue/},
    { name: 'js-common', rule: (ast, {gogocode: $}, options) => {
        ast.replace(`import {http} from 'ruibo-components-ui'`, `import { http } from '@/utils/service'`);
        ast.replace(`import { http } from 'ruibo-components-ui'`, `import { http } from '@/utils/service'`);   
        ast.replace(`import {$$$} from 'ruibo-components-ui/packages/service/fetch'`, `import {$$$} from '@/utils'`);
        const vueContent = ast.generate();
        let newVueContent = vueContent.replace(/ruibo-components-ui/g, '@/utils')
        return  $(newVueContent);
    }, test: /\.js$|\.ts$/ }

];