baidu / san

A fast, portable, flexible JavaScript component framework
https://baidu.github.io/san/
MIT License
4.73k stars 551 forks source link

fix: baidu/san-ssr#125 #678

Closed meixg closed 3 years ago

meixg commented 3 years ago

san-ssr 的输出格式较之前的提交:https://github.com/baidu/san/commit/8f07367f809cd1e57cfcfc9976e942e872a21237 https://github.com/baidu/san/commit/cd68628757bb95c8b65bb987462a8e773bd5d72c 已经有了较大变化。 目前 san-ssr 的渲染结果中,fragment 会输出 comment 标记,但是 slot 不会输出 comment 标记。 在反解时遇到 slot 尝试消耗 comment 标记与 san-ssr 行为不一致,会引入其他问题,因此将 slot-node 中相关代码移除。

测试了其他 case,没有发现问题:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>start - for</title>
</head>

<body>
    <script src="./node_modules/san/dist/san.js"></script>
    <div id="root">
        <div><!--s-data:{"aaa":"123"}--><div><!--s-text-->123456123456<!--/s-text--></div></div>
    </div>
    <script>

    let container = san.defineComponent({
        template: `
            <div>
                <slot/>
            </div>
        `
    })
    let MyApp = san.defineComponent({
        components: { 'x-l': container },
        template: '<div><x-l>{{ aaa | raw }}456{{ aaa | raw }}456</x-l></div>',
        initData() {
            return {
                aaa: '123'
            }
        }

    })
    let myApp = new MyApp({el: document.getElementById('root').firstElementChild});
    myApp.attach(document.getElementById('root'));
    </script>
</body>
</html>

更新了 san-html-cases 版本,增加了 slot 中嵌套 fragment 的情况。

meixg commented 3 years ago

针对讨论的 case,修改后:

  1. slot-node 只消耗 <!--s-slot-->标记。
  2. san-ssr 中,父组件以 slot 形式传入子组件的内容,如果边界处为 text-node,需要增加 <!--s-slot--> 标记。

同时,新增了两个测试用例: