form组件内嵌space组件，space和其中的内容不渲染

[wthvosk]

Bug report 🐞

同标题，在开发环境下一切正常，打包部署后和其中的内容不渲染，换成div用flex gap就可以，已知：

1. 组件确认有被正确引用和打包，单独使用没有问题。
2. 没有更改过这两个组件的样式。

Version & Environment

node 20.11.1 "vue": "3.3.4", "@varlet/ui": "3.2.4", "vite": "4.4.8"

Expectation

开发环境

Actual results (or Errors)

打包上生产环境，无了

[haoziqaq]

没能复现这个问题，需要提供一下最小化的可复现 demo。

[wthvosk]

找到问题了，是表单内传给input的验证规则引起的

<var-input
                        v-model="model.username"
                        :placeholder="$t('page.login.common.userNamePlaceholder')"
                        :rules="new Rules().required().value"
                        size="small"
                        variant="outlined"
                    >
                        <template #prepend-icon>
                            <var-icon name="account-circle"/>
                        </template>
                    </var-input>

export class Rules {
    rules = []

    get value() {
        return this.rules;
    }

    required(errorMessage = '不能为空') {
        this.rules.push((v) => {
            if (v === null || v === undefined) return errorMessage;
            if (typeof v === 'string' && v.trim() === '') return errorMessage;
            if (Array.isArray(v) && v.length === 0) return errorMessage;
            if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage;
            return true;
        });
        return this;
    }
}

[haoziqaq]

理论上提供的代码不会影响到渲染，可以提供一个最小复现吗？github 仓库，线上 playground 地址都可以。

---原始邮件--- 发件人: @.> 发送时间: 2024年5月6日(周一) 中午11:59 收件人: @.>; 抄送: @.@.>; 主题: Re: [varletjs/varlet] form组件内嵌space组件，space和其中的内容不渲染 (Issue #1609)

找到问题了，是表单内传给input的验证规则引起的 <var-input v-model="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" :rules="new Rules().required().value" size="small" variant="outlined" > <template #prepend-icon> <var-icon name="account-circle"/> </template> </var-input> export class Rules { rules = [] get value() { return this.rules; } required(errorMessage = '不能为空') { this.rules.push((v) => { if (v === null || v === undefined) return errorMessage; if (typeof v === 'string' && v.trim() === '') return errorMessage; if (Array.isArray(v) && v.length === 0) return errorMessage; if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage; return true; }); return this; } }
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

[wthvosk]

午休了，下午整一个

[wthvosk]

抱歉，水平有限，起新项目实在是复现不出来，总而言之换了种导出方式后问题解决了（还是一样，开发时正常，生产环境才出问题），可能是打包时类名压缩啥的出的问题，所以新项目不会出现。

class formRules{
    rules = []

    get value() {
        return this.rules;
    }

    required(errorMessage = '不能为空') {
        this.rules.push((v) => {
            if (v === null || v === undefined) return errorMessage;
            if (typeof v === 'string' && v.trim() === '') return errorMessage;
            if (Array.isArray(v) && v.length === 0) return errorMessage;
            if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage;
            return true;
        });
        return this;
    }
}

export const Rules = new formRules();

<var-form ref="formRef">
        <var-space
            direction="column"
            size="5vmin"
        >
            <var-input
                v-model="model.username"
                :placeholder="$t('page.login.common.userNamePlaceholder')"
                :rules="Rules.required().value"
                size="small"
                variant="outlined"
                @keydown.enter="handleSubmit"
            >
                <template #prepend-icon>
                    <var-icon name="account-circle"/>
                </template>
            </var-input>
<var-input
                v-model="model.password"
                :placeholder="$t('page.login.common.passwordPlaceholder')"
                :rules="Rules.required().value"
                size="small"
                type="password"
                variant="outlined"
                @keydown.enter="handleSubmit"
            >
                <template #prepend-icon>
                    <var-icon name="lock"/>
                </template>
            </var-input>
</var-space>
</var-form>

[haoziqaq]

这种现象很像是构建触发了 tree-shaking 导致部分代码被摇掉了。这个 issue 暂时开启一段时间，有问题可以留在这边。