Last active
November 16, 2025 15:51
-
-
Save kenwebb/23f56d963eb380fa3b1485c62e8386d1 to your computer and use it in GitHub Desktop.
preactjs - Test 1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sun Nov 16 2025 10:50:56 GMT-0500 (Eastern Standard Time)--> | |
| <XholonWorkbook> | |
| <Notes><![CDATA[ | |
| Xholon | |
| ------ | |
| Title: preactjs - Test 1 | |
| Description: | |
| Url: http://www.primordion.com/Xholon/gwt/ | |
| InternalName: 23f56d963eb380fa3b1485c62e8386d1 | |
| Keywords: | |
| My Notes | |
| -------- | |
| 2025 Nov 15 | |
| In this workbook, I test how to use preact with Xholon. | |
| Xholon focuses on modeling, while preact and react focus on building web apps and GUIs. | |
| Nov 16 | |
| ------ | |
| An alternative way to manually insert the preact content: | |
| - start the Xholon app, and go to Dev Tools | |
| - paste <script type="importmap">...</script> as last child of "head". | |
| - paste <div id="app"></div> as last child of "xhappspecific". | |
| - paste <script type="module">...</script> as last child of "xhappspecific". | |
| - this works | |
| Perhaps this could be done by code, using createElement and then giving the new element attributes and content. | |
| #### new div - this works in Dev Tools | |
| var newDiv = document.createElement("div"); | |
| newDiv.setAttribute("id", "appx"); | |
| document.body.append(newDiv); | |
| #### new script - does not work ? | |
| var src = "javascript:var a = 2; var b = 3; console.log(a + b)"; | |
| var s = document.createElement( 'script' ); | |
| s.setAttribute( 'src', src ); | |
| document.body.appendChild( s ); | |
| ### References | |
| (1) https://preactjs.com/ | |
| Fast 3kB alternative to React with the same modern API | |
| (2) https://preactjs.com/tutorial | |
| Learn Preact | |
| Have you ever wondered what Preact is all about, or how it works? | |
| The simplest answer is that Preact provides the tools needed to construct complex web applications | |
| out of small reusable pieces called Components. | |
| What makes Preact unique is that it provides these tools in a uniquely small package: | |
| just 3kb of JavaScript code, or around one page of text. | |
| (3) https://preactjs.com/guide/v10/no-build-workflows/#basic-usage | |
| This is the code I am using in this Xholon workbook KSW | |
| No-Build Workflows | |
| Whilst build tools like Webpack, Rollup, and Vite are incredibly powerful and useful, | |
| Preact fully supports building applications without them. | |
| No-build workflows are a way to develop web applications while forgoing build tooling, | |
| instead relying on the browser to facilitate module loading and execution. | |
| This is a great way to get started with Preact and can continue to work very well at all scales. | |
| (4) https://esm.sh/#docs | |
| Create modern(es2015+) web apps easily with NPM packages in browser/deno. | |
| No build tools needed! | |
| esm.sh allows you to import JavaScript modules from http URLs, no installation/build steps needed. | |
| Transforming .ts(x)/.vue/.svelte on the Fly | |
| esm.sh allows you to import .ts(x), .vue, and .svelte files directly in the browser without any build steps. | |
| ]]></Notes> | |
| <_-.XholonClass> | |
| <PhysicalSystem/> | |
| <PreactJs/> | |
| <PreactjsCode superClass="Attribute_String"/> | |
| </_-.XholonClass> | |
| <xholonClassDetails> | |
| <PreactJs><Color>yellow</Color></PreactJs> | |
| <PreactjsCode><Color>green</Color></PreactjsCode> | |
| <!--<PreactJsbehavior><Color>purple</Color></PreactJsbehavior> setting a color here does not work --> | |
| <Avatar><Color>red</Color></Avatar> | |
| </xholonClassDetails> | |
| <PhysicalSystem> | |
| <PreactJs> | |
| <!-- The preact example HTML --> | |
| <PreactjsCode><![CDATA[ | |
| <html> | |
| <head> | |
| <title>Preact HTM</title> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "preact": "https://esm.sh/[email protected]", | |
| "preact/": "https://esm.sh/[email protected]/", | |
| "@preact/signals": "https://esm.sh/@preact/[email protected]?external=preact", | |
| "htm/preact": "https://esm.sh/[email protected]/preact?external=preact" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="module"> | |
| import { render } from 'preact'; // KSW had to add this line | |
| import { useState } from 'preact/hooks'; | |
| import { html } from 'htm/preact'; | |
| function Button({ action, children }) { | |
| return html` | |
| <button onClick=${action}>${children}</button> | |
| `; | |
| } | |
| function Counter() { | |
| const [count, setCount] = useState(0); | |
| return html` | |
| <div class="counter-container"> | |
| <${Button} action=${() => setCount(count + 1)}>Increment<//> | |
| <input readonly value=${count} /> | |
| <${Button} action=${() => setCount(count - 1)}>Decrement<//> | |
| </div> | |
| `; | |
| } | |
| render( | |
| html`<${Counter} />`, | |
| document.getElementById('app') | |
| ); | |
| </script> | |
| </body> | |
| </html> | |
| ]]></PreactjsCode> | |
| </PreactJs> | |
| </PhysicalSystem> | |
| <PreactJsbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
| var me, beh = { | |
| postConfigure: function() { | |
| me = this.cnode.parent(); | |
| me.println(me.name()); | |
| this.cnode.color("purple"); | |
| // TODO paste code into HTML div xhappspecific, as last child | |
| let div = $doc.querySelector("#xhappspecific"); | |
| console.log(me.name()); | |
| console.log(div); | |
| console.log("Copy the following HTML text, and paste it into the xhappspecific div, as last child:"); | |
| let code = me.first().text().trim(); | |
| console.log(code); | |
| // I tried several different ways to append the code to the existing HTML | |
| // nothing works, probably for security reasons | |
| //div.appendChild(code); // error | |
| //div.innerHTML = code; // this just appends it as text that does not execute or do anything visible | |
| //div.append(code); // just appends the code | |
| //div.innerHTML += code; | |
| // It does work if I manually paste the content as the last child of xhappspecific (using Dev Tools) | |
| // also, I can copy the whole xhappspecific outerHTML and then paste it back in using paste before | |
| }, | |
| act: function() { | |
| //me.println(me.name()); | |
| } | |
| } | |
| //# sourceURL=PreactJsbehavior.js | |
| ]]></PreactJsbehavior> | |
| <SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, | |
| <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"> | |
| <g> | |
| <title>PreactJs</title> | |
| <rect id="PhysicalSystem/PreactJs" fill="#98FB98" height="50" width="50" x="25" y="0"/> | |
| <g> | |
| <title>Height</title> | |
| <rect id="PhysicalSystem/PreactJs/PreactjsCode" fill="#6AB06A" height="50" width="10" x="80" y="0"/> | |
| </g> | |
| </g> | |
| </svg> | |
| ]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> | |
| </XholonWorkbook> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment