app.js

let myAppState = [];
let myAppStateCursor = 0;
const resourceCache = {};
const createResource = (asyncTask, key) => {
    if (resourceCache[key])
        return resourceCache[key];
    throw { promise: asyncTask(), key };
};
const React = {
    createElement: (tag, props, ...children) => {
        if (typeof tag === "function") {
            try {
                return tag(props, ...children);
            }
            catch ({ promise, key }) {
                promise.then((value) => {
                    resourceCache[key] = value;
                    reRender();
                });
                promise.catch((error) => {
                    console.error(error);
                });
                return { tag: "h2", props: null, children: ["loading your image"] };
            }
        }
        const el = { tag, props, children };
        return el;
    },
};
const useState = (initialState) => {
    const stateCursor = myAppStateCursor;
    myAppState[stateCursor] = myAppState[stateCursor] || initialState;
    console.log(`${stateCursor}에 있는 useState는 ${myAppState[stateCursor]}로 초기화되었습니다.`);
    const setState = (newState) => {
        console.log(`setState는 ${stateCursor}에 있는 newState와 함께 호출되었습니다.`, newState);
        myAppState[stateCursor] = newState;
        reRender();
    };
    myAppStateCursor++;
    console.log(`stateDump`, myAppState);
    return [myAppState[stateCursor], setState];
};
const reRender = () => {
    console.log("reRendering");
    const rootNode = document.getElementById("myapp");
    rootNode.innerHTML = "";
    myAppStateCursor = 0;
    render(React.createElement(App, null), rootNode);
};
const render = (el, container) => {
    let domEl;
    if (typeof el === "string") {
        domEl = document.createTextNode(el);
        container.appendChild(domEl);
        return;
    }
    domEl = document.createElement(el.tag);
    let elProps = el.props ? Object.keys(el.props) : null;
    if (elProps && elProps.length > 0) {
        elProps.forEach((prop) => (domEl[prop] = el.props[prop]));
    }
    if (el.children && el.children.length > 0) {
        el.children.forEach((node) => render(node, domEl));
    }
    container.appendChild(domEl);
};
const photoURL = "https://placehold.co/600x400";
const getMyAwesomePic = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(photoURL);
        }, 1500);
    });
};
const App = () => {
    const [name, setName] = useState("FrogSoo");
    const [count, setCount] = useState(0);
    const photo = createResource(getMyAwesomePic, "photo");
    return (React.createElement("div", { draggable: true },
        React.createElement("h2", null,
            "Hello ",
            name,
            "!"),
        React.createElement("p", null, "I am a paragraph"),
        React.createElement("input", { type: "text", placeholder: "\uD14D\uC2A4\uD2B8\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694", value: name, onchange: (e) => setName(e.target.value) }),
        React.createElement("h2", null,
            "Counter value: ",
            count),
        React.createElement("button", { onclick: () => setCount(count + 1) }, "+1"),
        React.createElement("button", { onclick: () => setCount(count - 1) }, "-1"),
        React.createElement("h2", null, "Photo Album"),
        React.createElement("img", { src: photo, alt: "My Awesome Pic" })));
};
render(React.createElement(App, null), document.getElementById("myapp"));
//# sourceMappingURL=app.js.map