Compare commits

...

2 Commits

Author SHA1 Message Date
214667d85d only preact is viable 2025-10-10 13:47:43 -04:00
d3e186aa45 investigate state 2025-10-10 08:03:29 -04:00
7 changed files with 35 additions and 46 deletions

View File

@ -1,2 +0,0 @@
{
}

View File

@ -1,20 +1,21 @@
import React from "react"; import React from "react";
export function App(){ function App(){
const [countGet, countSet] = React.useState(2); const [countGet, countSet] = React.useState(2);
return <> return <>
<p style={{padding:"2rem", background:"red", color:"white"}}>test paragraph</p> <p style={{padding:"2rem", background:"black", color:"white"}}>test paragraph</p>
<button onClick={()=>{countSet(countGet+1)}}>{countGet}</button> <button onClick={()=>{countSet(countGet+1)}}>{countGet}</button>
</> </>
} }
export const Other =()=>{ const Other =()=>
{
return <p>other app component</p> return <p>other app component</p>
} }
export default function Root() export default function Root()
{ {
return <div><h1>rooted</h1><App/><Other/></div> return <div><h1>rooted</h1><App/><Other/></div>
} }

View File

@ -10,10 +10,7 @@
] ]
}, },
"imports": { "imports": {
"react":"https://esm.sh/react@19.2.0", "react":"npm:preact/compat",
"react/":"https://esm.sh/react@19.2.0/", "react-original":"npm:preact/compat"
"react-dom/":"https://esm.sh/react-dom@19.2.0/",
"react-original": "https://esm.sh/react@19.2.0"
} }
} }

View File

@ -1,25 +1,22 @@
{ {
"version": "5", "version": "5",
"specifiers": { "specifiers": {
"jsr:@std/media-types@*": "1.1.0" "jsr:@std/media-types@*": "1.1.0",
"npm:preact@*": "10.27.2"
}, },
"jsr": { "jsr": {
"@std/media-types@1.1.0": { "@std/media-types@1.1.0": {
"integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4" "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
} }
}, },
"redirects": { "npm": {
"https://esm.sh/scheduler@^0.27.0?target=denonext": "https://esm.sh/scheduler@0.27.0?target=denonext" "preact@10.27.2": {
"integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg=="
}
}, },
"remote": { "workspace": {
"https://esm.sh/react-dom@19.2.0/client": "489f23e19c36110c4d6361c09cd969e304665799d974ddc90ea36d9a7346e249", "dependencies": [
"https://esm.sh/react-dom@19.2.0/denonext/client.mjs": "d12f88ffe04230ba1e9722c97157d86b8e287e71911de06488187abbdd216726", "npm:preact@*"
"https://esm.sh/react-dom@19.2.0/denonext/react-dom.mjs": "d7bae53f5407fc0f29e04fd1866deb4a17e4e0df5ede1cdc50c791fbe21c3b06", ]
"https://esm.sh/react@19.2.0": "c69a4f37d5f2e04b5088c1fe6bc24f6bf0728704544f902b553d0852a7fdfae0",
"https://esm.sh/react@19.2.0/denonext/jsx-runtime.mjs": "75cd15682ab2ac7ffa971367359974541bbcfc8af7217c3fdb62f2a21b9be765",
"https://esm.sh/react@19.2.0/denonext/react.mjs": "6ffb8433fe90ae15017245e8b461f5824590e5dee07568afe31bab19e10b03ae",
"https://esm.sh/react@19.2.0/jsx-runtime": "11cfe447d2aed82e4469f0b856899b053d5fe1daf059d53cbfa75c5e5b706acc",
"https://esm.sh/scheduler@0.27.0/denonext/scheduler.mjs": "b1ba1723bf253d62b0aa1c3c0603d0d025010642158b0e746ae1fd6f7500deeb",
"https://esm.sh/scheduler@0.27.0?target=denonext": "d5e7a8b3ddf1c77fdd56083413b9ed29648e017b1000b85b3d3059a226627742"
} }
} }

View File

@ -1,6 +1,4 @@
import * as ReactOriginal from "react-original"; import * as ReactParts from "react-original";
const ReactParts = ReactOriginal.default ? ReactOriginal.default : ReactOriginal;
/* /*
@ -174,5 +172,6 @@ const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike,
}; };
export * from "react-original"; export * from "react-original";
export {ProxyCreate as createElement, ProxyState as useState, ProxyReducer as useReducer }; const Fragment = ReactParts.Fragment;
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer}; export {ProxyCreate as createElement, ProxyCreate as jsx, ProxyCreate as jsxs, Fragment, ProxyState as useState, ProxyReducer as useReducer };
export default {...ReactParts, createElement:ProxyCreate, jsx:ProxyCreate, jsxs:ProxyCreate, Fragment, useState:ProxyState, useReducer:ProxyReducer};

View File

@ -5,11 +5,12 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div id="root"></div>
<script type="module"> <script type="module">
import ReactDOM from "react-dom/client"; import Compat from "react-original";
import React from "react"; import React from "react";
import App from "/app.tsx"; import App from "/app.tsx";
ReactDOM.createRoot(document.body).render(React.createElement(App)); Compat.render(React.createElement(()=>React.createElement(App)), document.querySelector("#root"))
</script> </script>
</body> </body>
</html> </html>

View File

@ -14,18 +14,15 @@ const extractExtension =(path:string)=>
const RootRunning = new URL(`file://${Deno.cwd()}`).toString(); const RootRunning = new URL(`file://${Deno.cwd()}`).toString();
const RootSiblings = import.meta.resolve("./"); const RootSiblings = import.meta.resolve("./");
console.log(RootRunning);
console.log(RootSiblings);
const bakeConfigPackage:Deno.bundle.Options = const bakeConfigPackage:Deno.bundle.Options =
{ {
entrypoints:[""], entrypoints:[""],
platform: "browser", platform: "browser",
format:"esm", format:"esm",
write: false, write: false,
minify: true, minify: false,
} }
const bakeConfigLocal:Deno.bundle.Options = {...bakeConfigPackage, minify:false, sourcemap:"inline", inlineImports:false }; const bakeConfigLocal:Deno.bundle.Options = {...bakeConfigPackage, sourcemap:"inline", inlineImports:false };
async function BakeForce(path:string, type?:"package") async function BakeForce(path:string, type?:"package")
{ {
// If already baking, return the in-flight promise. (Caller may also call BakeCheck which handles this.) // If already baking, return the in-flight promise. (Caller may also call BakeCheck which handles this.)
@ -85,7 +82,6 @@ type CachedTranspile = [file:string, profile:string]
const BakeCache:Record<string, CachedTranspile | Promise<CachedTranspile|undefined> | undefined> = {} const BakeCache:Record<string, CachedTranspile | Promise<CachedTranspile|undefined> | undefined> = {}
const denoBody = await fetch(RootRunning+"/deno.json").then(resp=>resp.json()); const denoBody = await fetch(RootRunning+"/deno.json").then(resp=>resp.json());
for(const key in denoBody.imports) for(const key in denoBody.imports)
{ {
const value = denoBody.imports[key]; const value = denoBody.imports[key];
@ -94,13 +90,14 @@ for(const key in denoBody.imports)
denoBody.imports[key] = "/>/"+value; denoBody.imports[key] = "/>/"+value;
} }
} }
const react = denoBody.compilerOptions.jsxImportSource;
denoBody.imports["react-original"] = denoBody.imports[react];
denoBody.imports[react] = "/^/hmr/hmr-react.tsx";
denoBody.imports[react+"/jsx-runtime"] = "/^/hmr/hmr-react.tsx";
denoBody.imports["react-original"] = denoBody.imports[denoBody.compilerOptions.jsxImportSource];
denoBody.imports["react"] = "/^/hmr/hmr-react.tsx";
console.log(denoBody.imports); console.log(denoBody.imports);
const importMap = `<script type="importmap">{"imports":${JSON.stringify(denoBody.imports, null, 2)}}</script>`;
const importMap = `<script type="importmap">{"imports":${JSON.stringify(denoBody.imports)}}</script>`;
let htmlPageBody = await fetch(RootRunning+"/index.html").then(resp=>resp.text()); let htmlPageBody = await fetch(RootRunning+"/index.html").then(resp=>resp.text());
htmlPageBody = htmlPageBody.replace("<head>", "<head>"+importMap); htmlPageBody = htmlPageBody.replace("<head>", "<head>"+importMap);
@ -163,6 +160,7 @@ Deno.serve(async(req:Request)=>
if(keysExtension.includes(extension)) if(keysExtension.includes(extension))
{ {
const transpiled = await BakeCheck(url.pathname); const transpiled = await BakeCheck(url.pathname);
//return JSResponse(transpiled[0]);
return JSResponse(transpiled[url.searchParams.has(keyReload) ? 0 : 1]); return JSResponse(transpiled[url.searchParams.has(keyReload) ? 0 : 1]);
} }
@ -174,8 +172,6 @@ Deno.serve(async(req:Request)=>
return new Response(); return new Response();
}); });
const SocketsLive:Set<WebSocket> = new Set(); const SocketsLive:Set<WebSocket> = new Set();
const SocketsSend =(inData:string)=> const SocketsSend =(inData:string)=>
{ {