naming #2
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
import * as TW from "https://esm.sh/v126/@twind/core@1.1.3/es2022/core.mjs";
|
||||||
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
import TWPreTail from "https://esm.sh/v126/@twind/preset-tailwind@1.1.3/es2022/preset-tailwind.mjs";
|
||||||
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
import TWPreAuto from "https://esm.sh/v126/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
|
||||||
|
|
||||||
const Configure =
|
const Configure =
|
||||||
{
|
{
|
||||||
@ -24,42 +24,6 @@ export const Shadow =(inElement:HTMLElement, inConfig?:TW.TwindUserConfig)=>
|
|||||||
return ShadowDiv;
|
return ShadowDiv;
|
||||||
};
|
};
|
||||||
|
|
||||||
let booted = false;
|
|
||||||
export const Boot =async(inSettings:{App:()=>React.JSX.Element, CSS?:TW.TwindUserConfig, DOM?:string})=>
|
|
||||||
{
|
|
||||||
if(booted){return;}
|
|
||||||
booted = true;
|
|
||||||
|
|
||||||
const settings = {CSS:{...Configure, ...inSettings.CSS||{} }, DOM:inSettings.DOM||"#app", App:inSettings.App};
|
|
||||||
|
|
||||||
console.log("Clinet boot called")
|
|
||||||
|
|
||||||
let dom = document.querySelector(settings.DOM);
|
|
||||||
if(!dom)
|
|
||||||
{
|
|
||||||
console.log(`element "${settings.DOM}" not found.`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
dom = Shadow(dom as HTMLElement, settings.CSS)
|
|
||||||
|
|
||||||
const app = React.createElement(()=> React.createElement(settings.App, null), null);
|
|
||||||
if(React.render)
|
|
||||||
{
|
|
||||||
React.render(app, dom);
|
|
||||||
return ()=>dom && React.unmountComponentAtNode(dom);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
const reactDom = await import(`https://esm.sh/react-dom@${React.version}/client`);
|
|
||||||
const root = reactDom.createRoot(dom);
|
|
||||||
root.render(app);
|
|
||||||
return root.unmount;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
|
export default async(inSelector:string, inModulePath:string, inMemberApp="default", inMemberCSS="CSS"):Promise<(()=>void)|false>=>
|
||||||
{
|
{
|
||||||
let dom = document.querySelector(inSelector);
|
let dom = document.querySelector(inSelector);
|
@ -1,5 +1,4 @@
|
|||||||
import { type StateCapture } from "./react.tsx";
|
import { type StateCapture } from "./hmr-react.tsx";
|
||||||
|
|
||||||
|
|
||||||
const FileListeners = new Map() as Map<string, Array<(module:unknown)=>void>>;
|
const FileListeners = new Map() as Map<string, Array<(module:unknown)=>void>>;
|
||||||
export const FileListen =(inPath:string, inHandler:()=>void)=>
|
export const FileListen =(inPath:string, inHandler:()=>void)=>
|
||||||
@ -21,7 +20,6 @@ Socket.addEventListener('message', async(event:{data:string})=>
|
|||||||
Socket.addEventListener("error", ()=>{clearInterval(SocketTimer); console.log("HMR socket lost")})
|
Socket.addEventListener("error", ()=>{clearInterval(SocketTimer); console.log("HMR socket lost")})
|
||||||
const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000);
|
const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000);
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Each custom component is secretly modified to have an extra state and id.
|
Each custom component is secretly modified to have an extra state and id.
|
||||||
@ -46,10 +44,8 @@ When there is an HMR update:
|
|||||||
- statesNew is moved into *statesOld*
|
- statesNew is moved into *statesOld*
|
||||||
- statesNew is cleared.
|
- statesNew is cleared.
|
||||||
|
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
const HMR =
|
const HMR =
|
||||||
{
|
{
|
||||||
reloads:1,
|
reloads:1,
|
@ -1,5 +1,5 @@
|
|||||||
import * as ReactParts from "react-original";
|
import * as ReactParts from "react-original";
|
||||||
import { HMR } from "./hmr.tsx";
|
import { HMR } from "./hmr-listen.tsx";
|
||||||
|
|
||||||
export type StateType = boolean|number|string|Record<string, string>
|
export type StateType = boolean|number|string|Record<string, string>
|
||||||
export type StateCapture = {state:StateType, set:ReactParts.StateUpdater<StateType>, reload:number};
|
export type StateCapture = {state:StateType, set:ReactParts.StateUpdater<StateType>, reload:number};
|
@ -1,4 +1,4 @@
|
|||||||
import "@able/boot.tsx";
|
import "@able/boot-server.tsx";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const CTXString = React.createContext("lol");
|
const CTXString = React.createContext("lol");
|
||||||
|
@ -21,7 +21,7 @@ Configure({
|
|||||||
Remap: (inImports)=>
|
Remap: (inImports)=>
|
||||||
{
|
{
|
||||||
inImports["react-original"] = inImports["react"];
|
inImports["react-original"] = inImports["react"];
|
||||||
inImports["react"] = "/_lib_/react.tsx";
|
inImports["react"] = "/_lib_/hmr-react.tsx";
|
||||||
return inImports;
|
return inImports;
|
||||||
},
|
},
|
||||||
async Serve(inReq, inURL, inExt, inMap, inProxy)
|
async Serve(inReq, inURL, inExt, inMap, inProxy)
|
||||||
@ -33,7 +33,7 @@ Configure({
|
|||||||
for( const key in imp ) { members.push(key); }
|
for( const key in imp ) { members.push(key); }
|
||||||
|
|
||||||
const code =`
|
const code =`
|
||||||
import {FileListen} from "/_lib_/hmr.tsx";
|
import {FileListen} from "/_lib_/hmr-listen.tsx";
|
||||||
import * as Import from "${inURL.pathname}?reload=0";
|
import * as Import from "${inURL.pathname}?reload=0";
|
||||||
${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join("\n") }
|
${ members.map(m=>`let proxy_${m} = Import.${m}; export { proxy_${m} as ${m} };`).join("\n") }
|
||||||
FileListen("${inURL.pathname}", (updatedModule)=>
|
FileListen("${inURL.pathname}", (updatedModule)=>
|
||||||
|
@ -74,12 +74,14 @@ let Configuration:Configuration =
|
|||||||
`<!doctype html>
|
`<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
<meta charset="utf-8"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="importmap">${JSON.stringify(inMap)}</script>
|
<script type="importmap">${JSON.stringify(inMap)}</script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import Mount from "/_lib_/mount.tsx";
|
import Mount from "/_lib_/boot-browser.tsx";
|
||||||
Mount("#app", "${parts[1]??"/app.tsx"}");
|
Mount("#app", "${parts[1]??"/app.tsx"}");
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
@ -192,9 +194,9 @@ HTTP.serve(async(req: Request)=>
|
|||||||
let path;
|
let path;
|
||||||
if(url.pathname.startsWith("/_lib_/"))
|
if(url.pathname.startsWith("/_lib_/"))
|
||||||
{
|
{
|
||||||
if(url.pathname.endsWith("boot.tsx"))
|
if(url.pathname.startsWith("/_lib_/boot"))
|
||||||
{
|
{
|
||||||
path = import.meta.url+"/../_lib_/mount.tsx";
|
path = import.meta.url+"/../_lib_/boot-browser.tsx";
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user