detect element mount

[Lightnet]

Not sure how to code but there couple ways but I wonder how to detect element create and added. I am trying to create simple three.js build test. But knowing that it can't init since it not create element yet.

https://threejs.org/

const test = ()=>{

function initTest(){
//create three web gl.
}

initTest();
return div(
 div({id:''})
)
}

Will get error. I wanted to know simple way to set up when it mount detect and create the 3d web gl.

Well I wish there was better way to find thing on search engine is trouble since base other topics and not match. There should be some helper scripts or add on what the user needs for it.

[Tao-VanJS]

Sorry @Lightnet I don't quite understand what exactly you want to achieve. Could you elaborate? What is the error message you got?

[Lightnet]

Sorry. It took time to do some work. Is there way to detect element add to document render.

const renderEL = () => {

  function init(){
    //const renderer = new THREE.WebGLRenderer();
    console.log(document.getElementById('test'));//null
  }

  init();

  return div(
    div({id:'test'}) //check if added to element
  )
}
van.add(document.body, renderEL())

Might be incorrect way to set up. I wanted to see if there way to detect element change. I guess it not render yet.

const renderEL = () => {

  const render = div({id:'test'})
  function init(){
    //const renderer = new THREE.WebGLRenderer();
    console.log(render);//
  }

  init();

  return div(
    div(
      render
    )
  )
}
van.add(document.body, renderEL())

After reread it. I was thinking of of react and solid stuff. For mount event.

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.1.min.js";
const {button, canvas, input, label, div, script, pre, p, ul, li, a} = van.tags;

const ThreeEL = () => {

  //const threeCanvas = canvas();
  const threeCanvas = div();

  function initThree(){
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    //document.body.appendChild( renderer.domElement );
    threeCanvas.append(renderer.domElement )

    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }
    animate();
    console.log("init threejs")
  }

  initThree()

  return div(
    threeCanvas
  )
}

van.add(document.body, ThreeEL())

Got the sample to work and I was over thinking things.

[Tao-VanJS]

Glad to see you have gotten your sample to work 😁. So just to confirm, is the issue resolved on your end?

[Hunter-Gu]

I try to understand this discussion. Sometimes we want to do something after the element mount to document.

In React, we can do this by useEffect/useLayoutEffect and that happens when component is added to the DOM:

const Component = () => {
  useEffect(() => {
    // this element is outside of current component
    const el = document.querySelector('...')
  }, [])

  return <>...<>
}

Move back to VanJS:

const Component = () => {
  // the el is null
  const el = document.querySelector('...')

  return <>...<>
}

The workaround is use timeout, but I'm not sure if this can work for all cases:

const Component = () => {
  setTimeout(() => {
      const el = document.querySelector('...')
  }, 0)

  return <>...<>
}

And also, sometimes we want to do someting when component is removed from the DOM. It is really useful for scenarios like data tracking, accessibility, ...

Will it be difficult to add a lifecycle called when component is mount/unmount to the DOM ?

[Tao-VanJS]

My feeling is that for most of the cases, you don't need to subscribe the changes of the actual DOM tree, subscribing to the changes of the underlying states that cause the DOM tree changes are enough, which can be done with van.derive and stateful binding. setTimeout can be used if you want the code to be executed after DOM change is materialized.

If you really need to subscribe to the DOM tree changes, MutationObserver can be used as well.

[Hunter-Gu]

I imaged this use case:

function Main() {
  const timeId = setTimeout(() => {
    alert('Hello World')
  }, 2000)

  return div('Main')
}

function App() {
  const toggleState = van.state(false)

  return div(
    'Never alert',
    Toggle({ on: toggleState }),
    'Will alert',
    () => toggleState.val ? Main() : ''
  )
}

Example on sandbox

I don't have chance to cancel the timer in Main component.

Off course I can move timer outside Main component, but today's web dev is component-oriented, user will try to put related logic in current component.

One solution is to pass toggleState down to Main component, and setTimer/cancelTimer in toggleState side effect.

[Tao-VanJS]

My belief is that the following code is actually better:

let timeoutID
van.derive(() => 
  timeoutID = toggleState.val ?
    setTimeout(() => alert("Hello World"), 2000) :
    clearTimeout(timeoutID)
)

The code would be cleaner if we separate side effects from UI components.