Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Conflict with app.config.compilerOptions.whitespace = 'preserve', lost whitespace. #10

Open
yuanjinyong opened this issue May 19, 2024 · 2 comments

Comments

@yuanjinyong
Copy link

In Vue SFC file, with the following code

<template>
  <jy-form-dialog ref="form" v-model:entity="entity" v-bind="options" max-col="4">
        <jy-form-item label="输入控件配置说明" col="2">
          <pre>
{
  "tag": "jy-dict", //
  "data": {
    "props": {
      "type": "radio", // 显示类型:radio、单选按钮;checkbox、多选按钮;其他取值为下拉框
      "dict": "Common_YesNo", // 字典编码或者字典项列表如:["所属机构", "系统名称", "不显示名称" ]
      "dataType": "String" // 如果取值为字符串,需要指定为为String,否则会当做数值类型处理
    }
  }
}</pre
          >
        </jy-form-item>
  </jy-form-dialog>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'SettingDetail'
})
</script>

And in vite.config.ts file, use this plugin

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import PreprocessorDirectives from 'unplugin-preprocessor-directives/vite'

// https://vitejs.dev/config/
export default defineConfig((configEnv:any) => {
  return {
    plugins: [PreprocessorDirectives({ /* options */ }), vue()], // with PreprocessorDirectives plugin, the pre tag display not ok
    // plugins: [vue()] // use this line, the pre tag display ok
  }
})

I want to keep the whitespace in pre tag content for indentation display, if use PreprocessorDirectives plugin, the indentation lost.

I used following versions:
"vue": "^3.4.24",
"@vitejs/plugin-vue": "^5.0.4",
"unplugin-preprocessor-directives": "^1.0.3",
"vite": "^5.2.10",

@KeJunMao
Copy link
Owner

KeJunMao commented May 19, 2024

抱歉,最近没有时间来更新这个插件,您可以临时这样实现来保留缩进(运行时):

<pre>{{ JSON.stringify({...}, null, 2) }}</pre>

@yuanjinyong
Copy link
Author

通过JSON.stringify的方式,没法保留行尾的注释说明,这个本意是想通过样例说明讲解传达如何使用属性。

我现在临时通过 PreprocessorDirectives({include: /src/common/plugins/./}) 的方式,仅包含极个别使用了条件宏定义的源码文件来规避过去。

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants