[labs] Reactive controller adapters for other frameworks

[justinfagnani]

We would like to enable a framework-agnostic subset of reactive controller to work across frameworks. To do this we need two things from the frameworks: a way to emulate or map the framework lifecycle to the reactive controller lifecycle, and a native composition API or way to extend the framework component model to make adding controllers possible.

Many frameworks seem to have the basic lifecycle required by reactive controllers: hostConnected, hostDisconnected, hostUpdate, hostUpdated, and host.requestUpdate() - or they can be emulated. Not all have a way of extending the component model though

Lifecycle	React hooks	Angular	Vue	Ember	Svelte
hostConnected	✅ initial render	✅ ngAfterContentInit	✅ onMounted	✅ init	✅ onMount
hostDisconnected	✅ useLayoutEffect	✅ ngOnDestroy	✅ onUnmounted	✅ didDestroyElement	✅ onDestroy
hostUpdate	✅ hook body	✅ ngOnChanges	✅ onBeforeUpdate	✅ willUpdate	✅ beforeUpdate
hostUpdated	✅ useLayoutEffect	✅ ngAfterContentChecked	✅ onUpdated	✅ didUpdate	✅ afterUpdate
requestUpdate	✅ useState	⚠️ not needed w/ zones?	✅ getCurrentInstance().update()	⚠️ ?	✅ writable store
updateComplete	✅ useLayoutEffect	✅ ngOnChanges w/ Promise	✅ nextTick	⚠️ ?	✅ tick
Composition or Extendable	✅ custom hook	✅ mixins	✅ composition API	⚠️ ? Mixin or CoreObject?	✅ lifecycle hooks and stores
PR / Prototype	#1532	Prototype	Prototype		Prototype

✅ = There's a way to emulate
⚠️ ? = Unsure how to implement, but there's probably a way
🆘 = Seems like there isn't a way to emulate

We would like the mapping or controller wrapper to end up being as idiomatic as possible in the host framework. If the framework already has a composition API, like React hooks, we want to wrap reactive controllers into that API. If the framework doesn't have a similar API, then we could try to extend the component model with a subclass or mixin and add a way to declare controllers.

See #1532 for an example of creating a useController() hook for React that emulates and drives the reactive controller lifecycle. After wrapping a reactive controller with useController(), the resulting hook is used like any other hook:

Definition:

import * as React from 'react';
import {useController} from '@lit-labs/react/use-controller.js';
import {MouseController} from '@example/mouse-controller';

export const useMouse = () => {
  const controller = useController(React, (host) => new MouseController(host));
  return controller.position;
};

Idiomatic usage:

import {useMouse} from './use-mouse.js';

const Component = (props) => {
  const mousePosition = useMouse();
  return (
    <pre>
      x: {mousePosition.x}
      y: {mousePosition.y}
    </pre>
  );
};

[justinfagnani]

I had thought that Svelte didn't have a way for an external object to hook the lifecycle or force an update, but @RyanCarniato
helped me out on Twitter. I have a PoC of a Svelte wrapper now: https://svelte.dev/repl/51e7c2c30311490dbf2078a781ed1e2c?version=3.35.0

Svelte usage seems like it could be fairly idiomatic. The controller is modeled as a store and with auto-bindings you can refer to the controller state in the component and template:

import {makeSvelteController} from './controllers.js';
import {MouseController} from './mouse-controller.js';
export const mouseController = makeSvelteController((host) => new MouseController(host))

<script>
 import {mouseController} from './svelte-mouse-controller.js'
 const mouse = mouseController();
</script>
<pre>
x: {$mouse.pos.x}
y: {$mouse.pos.y}
</pre>

[justinfagnani]

Proof-of-concept AngularControllerHost here: https://stackblitz.com/edit/angular-ivy-uuiqpj?file=src%2Fapp%2Fangular-controller-host.ts

[tsavo-vdb-knott]

Love to see all of this 🎉

Nevertheless, will you be targeting both Renderer2 and/only Ivy lifecycles for Angular?

[userquin]

For vue 2/3, you can use $forceUpdate component instance method for requestUpdate, but using it, in 99.99% of cases, you’ve made a mistake somewhere:

• vue 2: Forcing an Update entry
• vue 3: Forcing an Update entry

[justinfagnani]

will you be targeting both Renderer2 and/only Ivy lifecycles for Angular?

I'm not sure. What are those? :)

[userquin]

For vue you can see vue-lit.
For vue composition api, you can see a collection on vueuse and vue-composable.

[justinfagnani]

@userquin how do you call $forceUpdate from within a setup function? I don't see how to get a reference to the instance.

[userquin]

Try this:

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent({
  setup() {
    const vm = getCurrentInstance()
    const update = () => {
      vm?.ctx?.$forceUpdate()
    }
    return { update }
  },
})
</script>
<template>
  <div>
    ...
  </div>
  <button @click="update">
    Refresh
  </button>
</template>

[userquin]

or just use vm?.update():

[userquin]

or with script setup (similar to svelte but without exports):

<script setup lang="ts">
import { getCurrentInstance } from 'vue'    

const vm = getCurrentInstance()

const update = () => {
  vm?.update()
}
</script>
<template>
  <div>
    ...
  </div>
  <button @click="update">
    Refresh
  </button>
</template>

[userquin]

@justinfagnani the problem is that with vue 3 I cannot make it to rebuild, the nodes are marked as literals, so there is no need to update the content once on dom.

If we include some reactive state, we don't need to force repaint... just changing the reactive object will be enough...

For example:

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue'
export default defineComponent({
  setup() {
    const counter = ref(0)
    const vm = getCurrentInstance()
    const update = () => {
      counter.value++
      //vm?.update()
    }
    return { update, counter }
  },
})
</script>
<template>
  <div>
    <button @click="update">
      Refresh
    </button>
    <div :class="`c-${counter}`">
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
    </div>
  </div>
</template>

With no ctx?.update() , also the children are not rerendered (just open dev tool and see how the class attr is rerendered)... with vue 2 this will be another history.

[userquin]

to be sure the update is triggering, use this, you will see UPDATED on console:

<script lang="ts">
import { defineComponent, getCurrentInstance/*, ref */, onUpdated } from 'vue'
export default defineComponent({
  setup() {
    // const counter = ref(0)
    const vm = getCurrentInstance()
    const update = () => {
      // counter.value++
      vm?.update()
    }
    onUpdated(() => {
      console.log('UPDATED')
    })
    return { update/*, counter */ }
  },
})
</script>
<template>
  <div>
    <button @click="update">
      Refresh
    </button>
    <!--    <div :class="`c-${counter}`">-->
    <div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
      <div>hey</div>
    </div>
  </div>
</template>

[justinfagnani]

Thanks @userquin - getCurrentInstance() worked. Proof of concept makeVueController() here: https://stackblitz.com/edit/vue-qniewc?file=src%2Fcomponents%2FHelloWorld.vue