Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

[SSR] Refactor Component rendering #1153

Closed
1 task done
jstarry opened this issue Apr 27, 2020 · 1 comment
Closed
1 task done

[SSR] Refactor Component rendering #1153

jstarry opened this issue Apr 27, 2020 · 1 comment
Labels
feature-request A feature request

Comments

@jstarry
Copy link
Member

jstarry commented Apr 27, 2020

Problem

It's not possible to get an html string representation of a component virtual node

How Yew creates component virtual nodes

  1. html! { <MyComponent /> } creates a VChild here
  2. The VChild is transformed into a VNode here
  3. The conversion from VChild to VComp happens here

How Yew renders components

  1. Yew uses the VDiff trait to compare the VComp to the current virtual node in the desired place in the virtual DOM tree
  2. If the current virtual node is also a component node and is the same type of Component, Yew will update the existing component. Otherwise it creates a new instance.
  3. In either case, Yew then invokes VComp's generator closure.
  4. Which in the case of component creation, creates a scope (which manages the state of a component) and calls mount_in_place. Scope manages a state machine and starts in the ReadyState.
  5. That method puts two tasks on the scheduler queue: CreateComponent and MountedComponent. CreateComponent is all we want for static rendering and is defined here.
  6. CreateComponent first advances the scope state machine from ReadyState to CreatedState and calls the create() method on a Component.
  7. CreateComponent then calls update() which will call the view() method of a Component (via render()) and then diffs the virtual dom tree produced from the Component::view

Objectives

  1. Need a reference to the underlying Component from VComp so that we can call view() on it to get its virtual DOM tree.
  2. Need to create a code path for SSR that does not involve any browser APIs. Currently, those APIs are called when diffing virtual dom trees inside VDiff implementations.
Objective 1

For this part, it's important to understand how the state machine of VComp works. Its state is represented in the MountState enum. Unmounted contains a generator closure which holds the component props which is needed for creating the component.

We probably need to

  1. add a new GeneratorType for SSR .. maybe something called GeneratorType::ServerRender
  2. change the return type of Generator to MountState because we wouldn't want GeneratorType::ServerRender to return a Mounted because that references actual dom elements which won't exist on the server
Objective 2
  • We could split CreatedState::update so that we don't couple the call to render() with the mounting to the browser through VDiff::apply
@jstarry
Copy link
Member Author

jstarry commented Jun 20, 2020

A lot of the issue context is out of date after this change: #1333

@jstarry jstarry closed this as completed Jun 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request A feature request
Projects
None yet
Development

No branches or pull requests

1 participant