Text nodes with document.implementation.createHTMLDocument
#1
Comments
aralroca
changed the title
document.implementation.createHTMLDocument
|
Hi @aralroca, I did a quick test with just the document and it seems to render as I would expect: const doc = document.implementation.createHTMLDocument();
doc.write('<div>');
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div></div></body></html>
doc.write('text a');
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text a</div></body></html>
doc.write('text b');
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text atext b</div></body></html>
doc.write('</div>');
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text atext b</div></body></html>I'm not entirely sure if it's related, but you probably want a single const doc = document.implementation.createHTMLDocument();
const decoder = new TextDecoder();
doc.write(decoder.decode(new TextEncoder().encode('<div>')));
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div></div></body></html>
doc.write(decoder.decode(new TextEncoder().encode('text a')));
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text a</div></body></html>
doc.write(decoder.decode(new TextEncoder().encode('text b')));
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text atext b</div></body></html>
doc.write(decoder.decode(new TextEncoder().encode('</div>')));
console.log(doc.documentElement.outerHTML); // <html><head></head><body><div>text atext b</div></body></html>I feel like Also just out of curiosity, how exactly are you trying to use this technique? Are you experiment with HTML fragments for a particular use case? I'm just interested to know what you're hoping to do here. |
|
@dgp1130 I realize that the problem is that is happening only in 
I had moved from happy-dom to jsdom to have support for |
I don't use fragments, although maybe I could use them, I found out about your article today. I was looking for a solution to a problem, and I saw that you had also been fighting with streaming for something similar. I implemented a diff DOM algorithm with streaming to solve the server actions in the framework I am developing (transfer HTML), but then I found some bugs and I'm trying to solve them. However, the test environment works differently than browsers confuses me a lot. Instead of "fragments" I'm using this implementation: https://github.com/aralroca/parse-html-stream Do you recommend to change to fragments? |
This might be a case where testing with a real browser is useful. Maybe Web Test Runner, Puppeteer, Playwright, Cypress, WebDriverIO might be more appropriate? The e2e testing tools might be a little tricker to use depending on the kind of test you're hoping to write.
I'm not 100% following the source code in your repo, but it seems like you're trying to build something pretty similar to my "HTML fragment" still doesn't have a great definition, but it's more of an abstract architectural idea based around requesting specific pieces of HTML content after initial page load and then swapping them into the document dynamically. Honestly your repo seems like it's already trying to do that. The web components and declarative shadow DOM stuff in this demo is cool, but not strictly necessary to the general idea of HTML fragments. |
|
Thank you @dgp1130 very much for your help. It's funny because I switched from happy-dom to jsdom because of other bugs with And if it takes too long, I'll look at Playwright. Feel free to close this issue! 😊 And I'm very happy to know that there are more people solving similar things and that I'm not the only crazy one ! heh |
|
I have a version of the DOM diff algorithm with HTML streaming working 🥳 (~1kb) I will look into making it open-source soon. Thanks! |
I see that in this stream example:
Then the
document.implementation.createHTMLDocumentwith thedoc.writeis transforming to:<html><head></head><body><div></div></body></html><html><head></head><body><div>text a</div></body></html><html><head></head><body><div>text c</div></body></html><html><head></head><body><div></div></body></html>I did a
console.logwithdoc.documentElement.outerHTML:@dgp1130 I see that it's doing fine for elements, but for text nodes, it does strange things to me. How can I solve this? Thank you!
The text was updated successfully, but these errors were encountered: