Virtual DOM?

[micahlt]

Right now the code is super messy with all of the template strings and innerHTML references. I get not wanting to use a framework, but what about a Virtual DOM (maybe million.js?) that would simplify and speed up creating DOM elements?

[aidenybai]

Right now the code is super messy with all of the template strings and innerHTML references. I get not wanting to use a framework, but what about a Virtual DOM (maybe million.js?) that would simplify and speed up creating DOM elements?

Happy to help with this is you run into any problems!

[aidenybai]

Just got back to this issue. Integration of Million should be pretty simple -- Here are some general refactoring guides:

The <script> tag must have a type="module" attribute to import Million:

import { render } from 'https://unpkg.com/million';
import { html } from 'https://unpkg.com/million/dist/html.mjs';

const handler = () => alert('Hello! I was clicked!');
// A root (parent) node is required, cannot have multiple roots (e.g. html`<div>1</div><div>2</div>` is not allowed
const partial = html`<div>Random number: ${Math.floor(Math.random() * 100)}</div>`

// you can pass event listeners / non string data into the html`data`
render(
    document.getElementById('#example-el'), 
    html`<div>${partial} | Will be put into #example-el <button onclick=${handler}>Hello!</button></div>`
);

@lankybox02

[micahlt]

@lankybox02 what are your thoughts on this issue?

[lankybox02]

I'm going to try fixing this in version Beta 1.4 Thank you @micahlt @aidenybai

[lankybox02]

bruh

[aidenybai]

Can you try using the unpkg version? I dunno if skypack will work correctly

[lankybox02]

Can you try using the unpkg version? I dunno if skypack will work correctly

I did, this is what it returned:

[lankybox02]

@aidenybai

[aidenybai]

Hmm.. are you sure the script tag has a type="module"?

[lankybox02]

@aidenybai yes, everything works fine. The render function is being faulty.

[aidenybai]

I cannot repro the issue with a basic example. Can you send a screenshot of how you're using it?

(or a code sample would probably be more helpful)

[lankybox02]

import { render } from 'https://unpkg.com/million';
import { html } from 'https://unpkg.com/million/dist/html.mjs';

render(
    document.getElementById('#pageContent'), 
    html`<div>posttest</div>`
);

[aidenybai]

I'm still not able to repro the issue (demo: https://codesandbox.io/s/festive-surf-1228ym?file=/index.html)

Can you check if the #pageContent element exists on the page? Insert this code snippet prior to the render function call:

const el = document.getElementById('#pageContent');
if (document.body.contains(el) && el) {
    console.log('exists');
} else {
    console.log('does not exist, cannot render to an element that doesn\'t exist');
}

render(
    document.getElementById('#pageContent'), 
    html`<div>posttest</div>`
);

[lankybox02]

@aidenybai it exists

[micahlt]

@aidenybai @lankybox02 you're using document.getElementById like you would document.querySelector. The issue is the # symbol in the function. In other words, document.getElementById("#pageContent") should be just document.getElementById("pageContent").

[lankybox02]

Just pushed out beta 1.4, Pull Requests for million.js are open

[lankybox02]

I'm going to start working on this in 1.7 or 1.8

[lankybox02]

Progress is doing alright so far