31:T92e, function HelloWorldComponent() { // Create a ref object using the useRef hook properly const messageRef = useRef({ message: "Hello, World!", greetings: { english: "Hello, World!", spanish: "¡Hola, Mundo!", french: "Bonjour, Monde!" }, language: "english", addLanguage: function(language) { this.greetings[language] = this.greetings[language] || ""; }, removeLanguage: function(language) { if (language in this.greetings && Object.keys(this.greetings).length > 1) { delete this.greetings[language]; } }, update: function() { console.log("Updated message configuration"); } }); const [currentGreeting, setCurrentGreeting] = useState(messageRef.current.message); const [currentLanguage, setCurrentLanguage] = useState("english"); //default language const handleGreetingChange = (newGreeting) => { messageRef.current.message = newGreeting; setCurrentGreeting(newGreeting); messageRef.current.update(); }; const addNewLanguage = (newLanguage) => { messageRef.current.addLanguage(newLanguage); messageRef.current.update(); }; const deleteLanguage = (languageName) => { if (currentLanguage === languageName) { setCurrentLanguage(Object.keys(messageRef.current.greetings)[0]); messageRef.current.language = Object.keys(messageRef.current.greetings)[0]; } messageRef.current.removeLanguage(languageName); messageRef.current.update(); }; const handleLanguageAdd = (languageName) => { messageRef.current.addLanguage(languageName); messageRef.current.update(); }; const handleLanguageRemove = (languageName) => { messageRef.current.removeLanguage(languageName); messageRef.current.update(); }; return jsx`

<${Header} onLanguageAdd={handleLanguageAdd} onLanguageRemove={handleLanguageRemove} onGreetingChange=${handleGreetingChange} messageRef=${messageRef} addNewLanguage=${addNewLanguage} deleteLanguage=${deleteLanguage} currentLanguage=${currentLanguage} setCurrentLanguage=${setCurrentLanguage} currentLanguage={currentLanguage} /> <${Display} messageRef=${messageRef} currentGreeting=${currentGreeting} currentLanguage=${currentLanguage}/>

`; }32:T867,function Header({ onLanguageAdd, onLanguageRemove, onGreetingChange, messageRef, addNewLanguage, deleteLanguage, currentLanguage, setCurrentLanguage }) { const [newLanguageName, setNewLanguageName] = useState(""); const [customGreeting, setCustomGreeting] = useState(""); const handleLanguageSelect = (e) => { const selectedLanguage = e.target.value; setCurrentLanguage(selectedLanguage); onGreetingChange(messageRef.current.greetings[selectedLanguage]); }; const handleAddLanguage = () => { if (newLanguageName && customGreeting) { messageRef.current.greetings[newLanguageName.toLowerCase()] = customGreeting; addNewLanguage(newLanguageName.toLowerCase()); setNewLanguageName(""); setCustomGreeting(""); } }; const handleRemoveLanguage = (language) => { if (Object.keys(messageRef.current.greetings).length > 1) { deleteLanguage(language); } }; return jsx`

Select Language:

setNewLanguageName(e.target.value)} /> setCustomGreeting(e.target.value)} />

${Object.keys(messageRef.current.greetings).map(lang => jsx` `)}

`; } 33:[] 2f:{"title":"preact compatibility","cells":[{"id":0,"value":"# preact compatibility\n\n@j-f1/react stopped working... so I made it continue working","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"preact = ({\n hooks: await import(\"https://esm.sh/preact/hooks\"),\n htm: await import(\"https://esm.sh/htm\"),\n preact: await import(\"https://esm.sh/preact\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"useRef = preact.hooks.useRef;","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"useState = preact.hooks.useState","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"useEffect = preact.hooks.useEffect","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"jsx = preact.htm.default.bind(preact.preact.h)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"function render(componentFactory) {\n const elementToRender = componentFactory(); // Call the factory function to get the JSX element\n if (!elementToRender) {\n console.error(\n \"Component factory passed to render did not return an element.\"\n );\n return null;\n }\n\n const tempContainer = document.createElement(\"div\");\n\n // Use preact.preact.render\n preact.preact.render(elementToRender, tempContainer);\n return tempContainer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"function App() {\n return html`

Hello, Preact World! (Dynamically Loaded)

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"//This works\nfunction SimpleHelloWorld() {\n return jsx`\n

\n Hello World!\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"render((_) => jsx`<${SimpleHelloWorld}/>`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"//This fails\nfunction SimpleHelloWorld2() {\n var ref = useState();\n return jsx`\n

\n Hello World!\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"function CounterComponent() {\n // 1. Initialize state using useState with an initial value of 0\n // 2. Destructure the returned array into the state variable (count)\n // and the setter function (setCount)\n const [count, setCount] = useState(0);\n\n // 3. Define a function to handle the button click\n const increment = () => {\n // 4. Use the setter function to update the state.\n // Using a function ensures we update based on the *previous* state.\n setCount((prevCount) => prevCount + 1);\n };\n\n // 5. Return JSX using the jsx tagged template literal\n return jsx`\n

Counter Example

Current Count: ${count}

\n \n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"render((_) => jsx`<${CounterComponent}/>`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"render((_) => jsx`<${HelloWorldComponent}/>`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"function Display({ messageRef, currentGreeting, currentLanguage }) {\n const getBackgroundColor = () => {\n const colorMap = {\n english: \"#e0f7fa\",\n spanish: \"#fff9c4\",\n french: \"#e8eaf6\",\n german: \"#f1f8e9\",\n japanese: \"#fce4ec\"\n };\n\n return colorMap[currentLanguage] || \"#f5f5f5\";\n };\n\n return jsx`\n

${currentGreeting}

${\n currentLanguage.charAt(0).toUpperCase() + currentLanguage.slice(1)\n } greeting

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}