Question

我正在开发一个Symfony应用程序，只是使用https://github.com/spatie/server-side-rendering获得了JS的SSR。到目前为止，我只使用了适用于React的“现成” SSR解决方案，但目前我正在尝试使用hyperHTML / viperHTML，并且遇到了一些我到目前为止无法通过查看可用的文档/示例来解决的问题。

我当前的测试片段是：

const viperHTML = require('viperhtml');

class Component extends viperHTML.Component {    
    constructor(props) {
        super();
        this.props = props;
    }

    render() {
        return this.html`
      <h1>Hello, ${this.props.name}</h1>`;
    }
}

console.log(new Component({ name: 'Joe' }).render().toString());

这里的事情是，没有显式调用render()，我不会得到任何输出。查看一些官方示例，这不是必需的，至少对于Component来说不是必需的。例如，我已经尝试在构造函数中使用setState()，但是没有区别。

同样，在不同时使用console.log()和toString()的情况下，我也没有输出。这是意外的。我知道这里可能需要toString()（没有渲染<buffer />），但是console.log()似乎很奇怪。当然，这可能与viperHTML完全无关。但是实例化组件是我唯一需要的事情。

我还不清楚如何编写同构/通用组件，即，一个具有标记，事件处理程序等的文件在服务器上呈现，然后在客户端上合并。当我根据文档（https://viperhtml.js.org/hyperhtml/documentation/#essentials-6）添加内联事件处理程序时，它实际上会内联到呈现的标记中，这不是我想要的。我检查了hypermorphic和viperNews应用程序，但到目前为止，这并没有真正帮助我。

Answer 1

如果有帮助，您可以read viperHTML tests查看如何使用组件。

这里的事情是，没有显式调用render（），我就没有输出。

组件用于在服务器或客户端上渲染布局。这意味着，如果您将组件实例传递给hyper / viperHTML视图，则不必担心调用任何事情，它已经为您完成了。

const {bind, Component} = require('viperhtml');

class Hello extends Component {    
  constructor(props) {
    super().props = props;
  }
  render() {
    return this.html`<h1>Hello, ${this.props.name}</h1>`;
  }
}

console.log(
  // you need a hyper/viperHTML literal to render components
  bind({any:'ref'})`${Hello.for({ name: 'Joe' })}`
    // by default you have a buffer to stream in NodeJS
    // if you want a string you need to use toString()
    .toString()
);

由于NodeJS默认情况下会流缓冲，因此viperHTML生成的任何布局都将是缓冲区，因此可以在组合时流式传输（即以Promises作为插值）。

我还不清楚如何编写同构/通用组件，即一个具有标记，事件处理程序等的文件在服务器上呈现然后在客户端上合并。

hyperHTML的原始版本有一种称为adopt()的方法，目的是通过相同的模板文字来混合活动节点。

尽管viperHTML具有viperhtml.adoptable = true开关以呈现可采用的内容，但hyperHTML adopt功能仍为not quite there yet，因此暂时您可以轻松地在SSR和FE之间共享视图，但是您需要在SSR页面登陆后接管客户端，或者第一次做出不同的反应，然后远距离接管客户端。

这不是最佳选择，但恐怕正确的水合位会很费时，而且我还没有找到确定最终的时间并发货的时间。

目前可能是hyperHTML v3。

我希望这个答案有助于了解viperHTML的工作原理以及目前的状态。

使用viperHTML

1 个答案: