im trying to “create” my own framework as an exercise using snabbdom, but my parent element keeps not showing up in the DOM, and im not sure why it does this. this is my element.js + quote.js. (renderQuote gets rendered in my index.js)
import { h } from 'snabbdom';
const createElement = (tag, content, options = {}) => {
console.log(`Creating element: ${tag}`, content, options);
return h(tag, options, content);
};
export const p = (content, options) => createElement("p", content, options);
export const h3 = (content, options) => createElement("h3", content, options);
export const div = (content, options) => createElement("div", content, options);
And here is my quote.js:
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
} from 'snabbdom';
import { h3, div } from "../framework/element.js";
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule,
]);
// Initial state
let state = {
author: 'and author',
text: 'Click to edit text',
};
// Function to update the state and re-render
const updateState = (newState) => {
state = { ...state, ...newState };
console.log('State updated:', state); // Debugging step
renderQuote();
};
// Function to change the text and author
const changeValues = () => {
const newText = prompt('Enter new text:');
const newAuthor = prompt('Enter new author:');
if (newText && newAuthor) {
updateState({ text: newText, author: newAuthor });
}
};
// Function to render the quote
const renderQuote = () => {
const parent = document.querySelector('.quote');
if (!parent) {
console.error('Parent element not found');
return;
}
const el = h3({ on: { click: changeValues } }, `${state.text} ${state.author}`);
console.log('Rendering element:', el); // Debugging step
patch(parent, el);
};
export default renderQuote;
This is my index.html aswell, as you can see the quote div does exist at the start:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snabbdom Example</title>
</head>
<body>
<div class="quote"></div>
<div id="list"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
I tried debugging everything, which didnt get me much further, earlier, when i did not add the onClick, it did show all the info i needed it to show.