Options
All
  • Public
  • Public/Protected
  • All
Menu

手动传入组件类进行-render

使用编译产出的组件类存在的问题

在 ssr 过程中,模板可能需要读取组件实例上的属性或方法,因此我们需要在每次渲染时创建组件的一个实例。

当编译输出字符串时,会有以下问题:

  • 当输入为 JavaScript 或 TypeScript 时,San-SSR 会将组件类的字符串定义直接输出在产物中,之后在渲染阶段根据这些类创建组件实例。当组件书写方式过于复杂时,解析可能会失败。
  • 当输入为 Class 时,San-SSR 会尝试将内存中的类字符串化。该方法只能输出组件自身内容,如果组件类引用了外部变量等,执行阶段会报错。

编译输出为 render 函数时,则可以避免上述问题。

基于以上,San-SSR 提供了在执行阶段手动传入组件 Class 进行渲染的能力,此时编译产物中不会含有组件类代码,San-SSR 的产物与组件代码需要一起上到线上执行。

使用方式

编译阶段

const MyComponent = require('./component')
const sanProject = new SanProject()
const res = sanProject.compileToSource(MyComponent, 'js', {
    useProvidedComponentClass: true
})

fs.writeFileSync(path.resolve(__dirname, './output.js'), res)

线上执行

只需传入根组件即可

const Component = require('./component')
const render = require('./output')

const html = render({}, { ComponentClass: Component })

与 markExternalComponent 特性配合使用

当与 markExternalComponent 配合使用时,由于定义外部组件引用的 specifier 为组件类文件,我们需要使用 customSSRFilePath 来帮助 San-SSR 找到外部组件所对应的 San-SSR 产物位置:

const Component = require('./component')
const render = require('./output')

const html = render({}, {
    ComponentClass: Component,
    parentCtx: {
        context: {
            customSSRFilePath ({ specifier }) {
                if (specifier.endsWith('childA.san')) {
                    return specifier + '.ssr'
                }
            }
        }
    }
})

如果我们想要完全改变子组件的路径,则可以再配合 customComponentFilePath 方法,替换所使用的子组件类:

const Component = require('./component')
const render = require('./output')

const html = render({}, {
    ComponentClass: Component,
    parentCtx: {
        context: {
            customSSRFilePath ({ specifier, id, tagName }) {
                if (specifier.endsWith('childA.san')) {
                    return specifier + '.ssr'
                }
            },
            customComponentFilePath ({ specifier, id, tagName }) {
                if (specifier === './childA.san') {
                    if (tagName === 'x-b') {
                        return path.resolve(__dirname, './childB.san')
                    }
                    return path.resolve(__dirname, './childA.san')
                }
            },
        }
    }
})

Generated using TypeDoc