Pass simple vanillajs from server to the browser

[lordanubi]

In SSR when I was using preact's renderToString I was able to write some code like this (to add small fast interactivity in a component)

<>
                <svg onload="autoBox()" style={'visibility: hidden'} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                    {children}
                </svg>
                <script>{
                    function autoBox() {
                          const svg = document.querySelector('svg');
                          const size = svg.getBBox();
                          svg.setAttribute('viewBox', '0 0 '+size.width+' '+size.height);
                          svg.style.visibility = 'initial'
                    }
                }</script>
            </>

Which was really cool cause I was able to have the js fromatted as js in vs code and I was still able to ship the function to the broser and reference it in the onload attribute of the component
In nanojsx for some reason the onchange attribute gets removed and the function inside the <script> tag gets exectued

     <>
                <svg style={'visibility: hidden'}>{children}</svg>
                <script>{
                    `const svg = document.querySelector('svg');
                    const size = svg.getBBox();
                    svg.setAttribute('viewBox', '0 0 '+size.width+' '+size.height);
                    svg.style.visibility = 'initial'
                    `
                }</script>
            </>

I have to do it like this, which still works but I cannot bind the function using event attributes and also I don't have the nice js formatting but instead I see it as a string.
Someone knows any nice and clean Idea to to do this with nanojsx?

[yandeu]

Try:

<>
  <svg
    id="svg"
    onload="autoBox()"
    style={'visibility: hidden'}
    width="100%"
    height="100%"
    xmlns="http://www.w3.org/2000/svg"
  >
    {this.props.children}
  </svg>
  <script>
    {`
    "use strict";

    function autoBox() {
      console.log('autoBox');
      const svg = document.querySelector('svg');
      const size = svg.getBBox();
      svg.setAttribute('viewBox', '0 0 ' + size.width + ' ' + size.height);
      svg.style.visibility = 'initial';
    }
    
    var svg = document.getElementById("svg");
    svg.onload = autoBox;
    `}
  </script>
</>

Also, if you add inline scripts, I recommend transpiling it with babel first: https://babeljs.io/repl

[lordanubi]

Thanks! Still not really convenient for the js syntax though cause it's still a string and I have to use the semi-colon etc... really annoying.
I think I'll maybe fix this with a <Script> component and a high order function.
Will let know if I have any news :)
Anyway is there a cloneElement function like? I used it a lot in my composition when I want my parent component to edit the props of it's children.
I didn't see anything on the docs any suggestion for that?

[yandeu]

No, you can't really manipulate the DOM on the server.

[lordanubi]

But still you could add attributes to the html node or props to the object if it's a component right?

[yandeu]

I'm not sure what you mean.

[lordanubi]

In React and Preact you have a function named cloneElement to add props/attributes to the props.children object. It works both on ssr and csr on both components and normal nodes. I use it like this when I need my parent to edit some values of the its children

let Child = (updatedProps) =>  cloneElement(props.children, updatedProps)
return <Child id="newProp" />

[yandeu]

Nope, there is nothing like that in NanoJSX.