Link, Script, and Style tag changes update mechanism to be figured out.

[atulbhatt-system32]

We have disabled update of link, style, and script tags. Whenever there is some change in the html, we have to compare the entire html tree. For some reason morphdom treats these tags specially script tag and removes it and add a new.

I am yet to find a way to be able to compare them with some combination and prevent this.

If I don't do prevent this:

• There's a refresh kind of feeling is there.

• Web Components or anything related to JS goes crazy.

• [x] #391

• [x] #393

• [x] #394

[mrmatthewnguyen105]

@atulbhatt-system32 , so you mean morphdom behaves strangely even without changing the script tags?

[atulbhatt-system32]

@atulbhatt-system32 , so you mean morphdom behaves strangely even without changing the script tags?

@jasonliu7040 it doesn't behaves strangely I think. It behaves in that way because something is definitely changing and is different when we get html from stage and when we parse and generate it from parser.

Something can be rnbw-stage-id for example.

Also, when the sequence of the content is changes for example:

</body>
<script src="https://guide.rnbw.dev/rnbw-map.js"></script>
<script src="rnbw-editor.js"></script>
<script src="rnbw-header.js"></script>
<script src="rnbw-files.js"></script>
<script src="rnbw-blog.js"></script>
<script src="rnbw-nav.js"></script>
<script src="rnbw-keyboard.js"></script>
<script src="rnbw-footer.js"></script>
<script src="rnbw-preview.js"></script>

If I just remove <script src="https://guide.rnbw.dev/rnbw-map.js"></script> this. It will compare all of them sequentially for changes.

And remove each node and add a node which came in place of it.

[atulbhatt-system32]

PROBLEM:

When I parse html and create a html string called htmlInApp (htmlInApp1), which basically adds a unique key(stageNodeId) based on the encounter of a node during parsing.

Now, whenever some change happens in the original code, I parse it again and generate htmlInApp again (htmlInApp2).

Now, the stageNodeId changes as the sequence in which the node appeared may or may not be same.

The problem is that when I do dom-diffing between both htmlInApp1 and htmlInApp2, there is no way to identify that a node is not removed it's just a new node is added in between.

SOLUTION:

To solve this issue and prevent a node to get removed and get added if it already exists is to somehow generate a uniqueId which doesn't change even when the html is parsed again.

Implementing something like below:

const parse5 = require('parse5');
const crypto = require('crypto');

// Function to generate a stable identifier for a parse5 node
function getNodeIdentifier(node) {
  // Extract relevant information from the node
  const tag = node.tagName || '';
  const attributes = node.attrs ? JSON.stringify(node.attrs) : '';
  const content = parse5.serialize(node);

  // Combine the information to create a stable identifier
  const identifierData = `${tag}${attributes}${content}`;

  // Generate a SHA-256 hash as the stable identifier
  const hash = crypto.createHash('sha256');
  const identifier = hash.update(identifierData).digest('hex');

  return identifier;
}

// Example usage with parse5
const html = '<div class="example">Hello, World!</div>';
const parsedTree = parse5.parse(html);

// Get the identifier for a specific node
const firstNode = parsedTree.childNodes[0];
const nodeIdentifier = getNodeIdentifier(firstNode);

console.log('Node Identifier:', nodeIdentifier);

[edenvidal]

@atulbhatt-system32 is this relevant? seems old. let's resolve it or delete it.

[atulbhatt-system32]

This is pending and needs to be validated. I will test this.