mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
VDom 11 (#1224)
* Fix VDom url caching -- use regular requests * new boilerplate to make writing apps easier * render-blocking global styles (to prevent render flash) * bug fixes and new functionality etc.
This commit is contained in:
Mike Sawka
GitHub
parent
993d33585b
commit
f50ce9565c
@ -1,42 +0,0 @@
|
||||
.root {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background-inner {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.bg-item {
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bg-item:hover {
|
||||
background-color: var(--button-grey-hover-bg);
|
||||
}
|
||||
|
||||
.bg-preview {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
.bg-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
package cmd
|
||||
|
||||
import (
|
||||
"context"
|
||||
_ "embed"
|
||||
"log"
|
||||
|
||||
"github.com/spf13/cobra"
|
||||
"github.com/wavetermdev/waveterm/pkg/vdom"
|
||||
"github.com/wavetermdev/waveterm/pkg/vdom/vdomclient"
|
||||
"github.com/wavetermdev/waveterm/pkg/waveobj"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshrpc"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshrpc/wshclient"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshutil"
|
||||
)
|
||||
|
||||
//go:embed htmlstyle.css
|
||||
var htmlStyleCSS []byte
|
||||
|
||||
var htmlCmdNewBlock bool
|
||||
var HtmlVDomClient *vdomclient.Client = vdomclient.MakeClient(&vdom.VDomBackendOpts{CloseOnCtrlC: true})
|
||||
|
||||
func init() {
|
||||
htmlCmd.Flags().BoolVarP(&htmlCmdNewBlock, "newblock", "n", false, "create a new block")
|
||||
rootCmd.AddCommand(htmlCmd)
|
||||
}
|
||||
|
||||
var htmlCmd = &cobra.Command{
|
||||
Use: "html",
|
||||
Hidden: true,
|
||||
Short: "launch demo vdom application",
|
||||
RunE: htmlRun,
|
||||
}
|
||||
|
||||
// Prop Types
|
||||
type BgItemProps struct {
|
||||
Bg string `json:"bg"`
|
||||
Label string `json:"label"`
|
||||
OnClick func() `json:"onClick"`
|
||||
}
|
||||
|
||||
type BgListProps struct {
|
||||
Items []BgItem `json:"items"`
|
||||
}
|
||||
|
||||
type BgItem struct {
|
||||
Bg string `json:"bg"`
|
||||
Label string `json:"label"`
|
||||
}
|
||||
|
||||
// Components
|
||||
var Style = vdomclient.DefineComponent[struct{}](HtmlVDomClient, "Style",
|
||||
func(ctx context.Context, _ struct{}) any {
|
||||
return vdom.E("wave:style",
|
||||
vdom.P("src", "vdom:///style.css"),
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
var BgItemTag = vdomclient.DefineComponent[BgItemProps](HtmlVDomClient, "BgItem",
|
||||
func(ctx context.Context, props BgItemProps) any {
|
||||
return vdom.E("div",
|
||||
vdom.Class("bg-item"),
|
||||
vdom.E("div",
|
||||
vdom.Class("bg-preview"),
|
||||
vdom.PStyle("background", props.Bg),
|
||||
),
|
||||
vdom.E("div",
|
||||
vdom.Class("bg-label"),
|
||||
props.Label,
|
||||
),
|
||||
vdom.P("onClick", props.OnClick),
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
var BgList = vdomclient.DefineComponent[BgListProps](HtmlVDomClient, "BgList",
|
||||
func(ctx context.Context, props BgListProps) any {
|
||||
setBackground := func(bg string) func() {
|
||||
return func() {
|
||||
blockInfo, err := wshclient.BlockInfoCommand(HtmlVDomClient.RpcClient, HtmlVDomClient.RpcContext.BlockId, nil)
|
||||
if err != nil {
|
||||
log.Printf("error getting block info: %v\n", err)
|
||||
return
|
||||
}
|
||||
err = wshclient.SetMetaCommand(HtmlVDomClient.RpcClient, wshrpc.CommandSetMetaData{
|
||||
ORef: waveobj.ORef{OType: "tab", OID: blockInfo.TabId},
|
||||
Meta: map[string]any{"bg": bg},
|
||||
}, nil)
|
||||
if err != nil {
|
||||
log.Printf("error setting meta: %v\n", err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return vdom.E("div",
|
||||
vdom.Class("background"),
|
||||
vdom.E("div",
|
||||
vdom.Class("background-inner"),
|
||||
vdom.ForEach(props.Items, func(item BgItem) any {
|
||||
return BgItemTag(BgItemProps{
|
||||
Bg: item.Bg,
|
||||
Label: item.Label,
|
||||
OnClick: setBackground(item.Bg),
|
||||
})
|
||||
}),
|
||||
),
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
var App = vdomclient.DefineComponent[struct{}](HtmlVDomClient, "App",
|
||||
func(ctx context.Context, _ struct{}) any {
|
||||
inputText, setInputText := vdom.UseState(ctx, "start")
|
||||
|
||||
bgItems := []BgItem{
|
||||
{Bg: "", Label: "default"},
|
||||
{Bg: "#ff0000", Label: "red"},
|
||||
{Bg: "#00ff00", Label: "green"},
|
||||
{Bg: "#0000ff", Label: "blue"},
|
||||
}
|
||||
|
||||
return vdom.E("div",
|
||||
vdom.Class("root"),
|
||||
Style(struct{}{}),
|
||||
vdom.E("h1", nil, "Set Background"),
|
||||
vdom.E("div", nil,
|
||||
vdom.E("wave:markdown",
|
||||
vdom.P("text", "*quick vdom application to set background colors*"),
|
||||
vdom.P("scrollable", false),
|
||||
vdom.P("rehype", false),
|
||||
),
|
||||
),
|
||||
vdom.E("div", nil,
|
||||
BgList(BgListProps{Items: bgItems}),
|
||||
),
|
||||
vdom.E("div", nil,
|
||||
vdom.E("img",
|
||||
vdom.PStyle("width", "100%"),
|
||||
vdom.PStyle("height", "100%"),
|
||||
vdom.PStyle("maxWidth", "300px"),
|
||||
vdom.PStyle("maxHeight", "300px"),
|
||||
vdom.PStyle("objectFit", "contain"),
|
||||
vdom.P("src", "vdom:///test.png"),
|
||||
),
|
||||
),
|
||||
vdom.E("div", nil,
|
||||
vdom.E("input",
|
||||
vdom.P("type", "text"),
|
||||
vdom.P("value", inputText),
|
||||
vdom.P("onChange", func(e vdom.VDomEvent) {
|
||||
setInputText(e.TargetValue)
|
||||
}),
|
||||
),
|
||||
vdom.E("div", nil, "text ", inputText),
|
||||
),
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
func htmlRun(cmd *cobra.Command, args []string) error {
|
||||
WriteStderr("running wsh html %q\n", RpcContext.BlockId)
|
||||
client := HtmlVDomClient
|
||||
err := client.Connect()
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
client.SetRootElem(App(struct{}{}))
|
||||
client.RegisterFileHandler("/style.css", vdomclient.FileHandlerOption{
|
||||
Data: htmlStyleCSS,
|
||||
MimeType: "text/css",
|
||||
})
|
||||
client.RegisterFileHandler("/test.png", vdomclient.FileHandlerOption{
|
||||
FilePath: "~/Downloads/IMG_1939.png",
|
||||
})
|
||||
|
||||
err = client.CreateVDomContext(&vdom.VDomTarget{NewBlock: htmlCmdNewBlock})
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
go func() {
|
||||
<-client.DoneCh
|
||||
wshutil.DoShutdown("vdom closed by FE", 0, true)
|
||||
}()
|
||||
|
||||
<-client.DoneCh
|
||||
return nil
|
||||
}
|
||||
@ -1,112 +0,0 @@
|
||||
import { protocol } from "electron";
|
||||
import { RpcApi } from "../frontend/app/store/wshclientapi";
|
||||
import { base64ToArray } from "../frontend/util/util";
|
||||
import { ElectronWshClient } from "./emain-wsh";
|
||||
|
||||
export function registerVDomProtocol() {
|
||||
protocol.registerSchemesAsPrivileged([
|
||||
{
|
||||
scheme: "vdom",
|
||||
privileges: {
|
||||
standard: true,
|
||||
supportFetchAPI: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
export function setupVdomUrlHandler() {
|
||||
protocol.handle("vdom", async (request) => {
|
||||
// Only handle GET requests for now
|
||||
if (request.method !== "GET") {
|
||||
return new Response(null, {
|
||||
status: 405,
|
||||
headers: {
|
||||
"Content-Type": "text/plain",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const parts = request.url.split("/");
|
||||
const uuid = parts[2];
|
||||
// simple error checking for uuid
|
||||
if (!uuid || uuid.length !== 36) {
|
||||
return new Response(null, {
|
||||
status: 400,
|
||||
headers: {
|
||||
"Content-Type": "text/plain",
|
||||
},
|
||||
});
|
||||
}
|
||||
const path = "/" + parts.slice(3).join("/");
|
||||
|
||||
// Convert Headers object to plain object
|
||||
const headers: Record<string, string> = {};
|
||||
for (const [key, value] of request.headers.entries()) {
|
||||
headers[key] = value;
|
||||
}
|
||||
|
||||
const data: VDomUrlRequestData = {
|
||||
method: "GET",
|
||||
url: path,
|
||||
headers: headers,
|
||||
};
|
||||
|
||||
try {
|
||||
const respStream = RpcApi.VDomUrlRequestCommand(ElectronWshClient, data, {
|
||||
route: `proc:${uuid}`,
|
||||
});
|
||||
|
||||
// Get iterator for the stream
|
||||
const iterator = respStream[Symbol.asyncIterator]();
|
||||
|
||||
// Get first chunk to extract headers and status
|
||||
const firstChunk = await iterator.next();
|
||||
if (firstChunk.done) {
|
||||
throw new Error("No response received from backend");
|
||||
}
|
||||
|
||||
const firstResp = firstChunk.value as VDomUrlRequestResponse;
|
||||
const statusCode = firstResp.statuscode ?? 200;
|
||||
const responseHeaders = firstResp.headers ?? {};
|
||||
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
try {
|
||||
// Enqueue the body from the first chunk if it exists
|
||||
if (firstResp.body) {
|
||||
controller.enqueue(base64ToArray(firstResp.body));
|
||||
}
|
||||
|
||||
// Process the rest of the stream
|
||||
while (true) {
|
||||
const chunk = await iterator.next();
|
||||
if (chunk.done) break;
|
||||
|
||||
const resp = chunk.value as VDomUrlRequestResponse;
|
||||
if (resp.body) {
|
||||
controller.enqueue(base64ToArray(resp.body));
|
||||
}
|
||||
}
|
||||
controller.close();
|
||||
} catch (err) {
|
||||
controller.error(err);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
status: statusCode,
|
||||
headers: responseHeaders,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("VDOM URL handler error:", err);
|
||||
return new Response(null, {
|
||||
status: 500,
|
||||
headers: {
|
||||
"Content-Type": "text/plain",
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -2,7 +2,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import * as electron from "electron";
|
||||
import { registerVDomProtocol, setupVdomUrlHandler } from "emain/emain-vdomhandler";
|
||||
import { FastAverageColor } from "fast-average-color";
|
||||
import fs from "fs";
|
||||
import * as child_process from "node:child_process";
|
||||
@ -700,7 +699,6 @@ async function appMain() {
|
||||
electronApp.quit();
|
||||
return;
|
||||
}
|
||||
registerVDomProtocol();
|
||||
makeAppMenu();
|
||||
try {
|
||||
await runWaveSrv(handleWSEvent);
|
||||
@ -710,7 +708,6 @@ async function appMain() {
|
||||
const ready = await getWaveSrvReady();
|
||||
console.log("wavesrv ready signal received", ready, Date.now() - startTs, "ms");
|
||||
await electronApp.whenReady();
|
||||
setupVdomUrlHandler();
|
||||
configureAuthKeyRequestInjection(electron.session.defaultSession);
|
||||
const fullConfig = await services.FileService.GetFullConfig();
|
||||
ensureHotSpareTab(fullConfig);
|
||||
|
||||
@ -10,6 +10,7 @@ import { RpcApi } from "@/app/store/wshclientapi";
|
||||
import { makeFeBlockRouteId } from "@/app/store/wshrouter";
|
||||
import { DefaultRouter, TabRpcClient } from "@/app/store/wshrpcutil";
|
||||
import { applyCanvasOp, mergeBackendUpdates, restoreVDomElems } from "@/app/view/vdom/vdom-utils";
|
||||
import { getWebServerEndpoint } from "@/util/endpoints";
|
||||
import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
|
||||
import debug from "debug";
|
||||
import * as jotai from "jotai";
|
||||
@ -215,6 +216,33 @@ export class VDomModel {
|
||||
return blockData?.meta?.["vdom:route"];
|
||||
}
|
||||
|
||||
transformVDomUrl(url: string): string {
|
||||
if (url == null || url == "") {
|
||||
return null;
|
||||
}
|
||||
if (!url.startsWith("vdom://")) {
|
||||
return url;
|
||||
}
|
||||
const absUrl = url.substring(7);
|
||||
return this.makeVDomUrl(absUrl);
|
||||
}
|
||||
|
||||
makeVDomUrl(path: string): string {
|
||||
if (path == null || path == "") {
|
||||
return null;
|
||||
}
|
||||
if (!path.startsWith("/")) {
|
||||
return null;
|
||||
}
|
||||
const backendRouteId = this.getBackendRouteId();
|
||||
if (backendRouteId == null) {
|
||||
return null;
|
||||
}
|
||||
const wsEndpoint = getWebServerEndpoint();
|
||||
const fullUrl = wsEndpoint + "/vdom/" + backendRouteId + path;
|
||||
return fullUrl;
|
||||
}
|
||||
|
||||
keyDownHandler(e: WaveKeyboardEvent): boolean {
|
||||
if (this.backendOpts?.closeonctrlc && checkKeyPressed(e, "Ctrl:c")) {
|
||||
this.shouldDispose = true;
|
||||
|
||||
@ -61,16 +61,13 @@ export function validateAndWrapCss(model: VDomModel, cssText: string, wrapperCla
|
||||
}
|
||||
}
|
||||
}
|
||||
// transform url(vdom:///foo.jpg) => url(vdom://blockId/foo.jpg)
|
||||
if (node.type === "Url") {
|
||||
const url = node.value;
|
||||
if (url != null && url.startsWith("vdom://")) {
|
||||
const absUrl = url.substring(7);
|
||||
if (!absUrl.startsWith("/")) {
|
||||
// transform url(vdom:///foo.jpg)
|
||||
if (node.type === "Url" && node.value != null && node.value.startsWith("vdom://")) {
|
||||
const newUrl = model.transformVDomUrl(node.value);
|
||||
if (newUrl == null) {
|
||||
list.remove(item);
|
||||
} else {
|
||||
node.value = "vdom://" + model.blockId + url.substring(7);
|
||||
}
|
||||
node.value = newUrl;
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -88,19 +85,20 @@ function cssTransformStyleValue(model: VDomModel, property: string, value: strin
|
||||
try {
|
||||
const ast = csstree.parse(value, { context: "value" });
|
||||
csstree.walk(ast, {
|
||||
enter(node) {
|
||||
enter(node: CssNode, item: ListItem<CssNode>, list: List<CssNode>) {
|
||||
// Transform url(#id) in filter/mask properties
|
||||
if (node.type === "Url" && (property === "filter" || property === "mask")) {
|
||||
if (node.value.startsWith("#")) {
|
||||
node.value = `#${convertVDomId(model, node.value.substring(1))}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Transform vdom:/// URLs
|
||||
if (node.type === "Url" && node.value.startsWith("vdom:///")) {
|
||||
const absUrl = node.value.substring(7);
|
||||
if (absUrl.startsWith("/")) {
|
||||
node.value = `vdom://${model.blockId}${absUrl}`;
|
||||
// transform vdom:// urls
|
||||
if (node.type === "Url" && node.value != null && node.value.startsWith("vdom://")) {
|
||||
const newUrl = model.transformVDomUrl(node.value);
|
||||
if (newUrl == null) {
|
||||
list.remove(item);
|
||||
} else {
|
||||
node.value = newUrl;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -282,16 +282,12 @@ function convertProps(elem: VDomElem, model: VDomModel): [GenericPropsType, Set<
|
||||
}
|
||||
}
|
||||
if (key == "src" && val != null && val.startsWith("vdom://")) {
|
||||
// we're going to convert vdom:///foo.jpg to vdom://blockid/foo.jpg. if it doesn't start with "/" it is not valid
|
||||
const vdomUrl = val.substring(7);
|
||||
if (!vdomUrl.startsWith("/")) {
|
||||
// transform vdom:// urls
|
||||
const newUrl = model.transformVDomUrl(val);
|
||||
if (newUrl == null) {
|
||||
continue;
|
||||
}
|
||||
const backendRouteId = model.getBackendRouteId();
|
||||
if (backendRouteId == null) {
|
||||
continue;
|
||||
}
|
||||
props[key] = "vdom://" + backendRouteId + vdomUrl;
|
||||
props[key] = newUrl;
|
||||
continue;
|
||||
}
|
||||
props[key] = val;
|
||||
@ -375,7 +371,7 @@ function StyleTag({ elem, model }: { elem: VDomElem; model: VDomModel }) {
|
||||
return <style>{sanitizedCss}</style>;
|
||||
}
|
||||
|
||||
function WaveStyle({ src, model }: { src: string; model: VDomModel }) {
|
||||
function WaveStyle({ src, model, onMount }: { src: string; model: VDomModel; onMount?: () => void }) {
|
||||
const [styleContent, setStyleContent] = React.useState<string | null>(null);
|
||||
React.useEffect(() => {
|
||||
async function fetchAndSanitizeCss() {
|
||||
@ -391,14 +387,22 @@ function WaveStyle({ src, model }: { src: string; model: VDomModel }) {
|
||||
if (sanitizedCss) {
|
||||
setStyleContent(sanitizedCss);
|
||||
} else {
|
||||
onMount?.();
|
||||
console.error("Failed to sanitize CSS");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching CSS:", error);
|
||||
onMount?.();
|
||||
}
|
||||
}
|
||||
fetchAndSanitizeCss();
|
||||
}, [src, model]);
|
||||
// Trigger onMount after styleContent has been set and mounted
|
||||
React.useEffect(() => {
|
||||
if (styleContent) {
|
||||
onMount?.();
|
||||
}
|
||||
}, [styleContent, onMount]);
|
||||
if (!styleContent) {
|
||||
return null;
|
||||
}
|
||||
@ -481,13 +485,29 @@ type VDomViewProps = {
|
||||
blockId: string;
|
||||
};
|
||||
|
||||
function VDomInnerView({ blockId, model }: VDomViewProps) {
|
||||
let [styleMounted, setStyleMounted] = React.useState(!model.backendOpts?.globalstyles);
|
||||
const handleStylesMounted = () => {
|
||||
setStyleMounted(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{model.backendOpts?.globalstyles ? (
|
||||
<WaveStyle src={model.makeVDomUrl("/wave/global.css")} model={model} onMount={handleStylesMounted} />
|
||||
) : null}
|
||||
{styleMounted ? <VDomRoot model={model} /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function VDomView({ blockId, model }: VDomViewProps) {
|
||||
let viewRef = React.useRef(null);
|
||||
let contextActive = jotai.useAtomValue(model.contextActive);
|
||||
model.viewRef = viewRef;
|
||||
const vdomClass = "vdom-" + blockId;
|
||||
return (
|
||||
<div className={clsx("view-vdom", vdomClass)} ref={viewRef}>
|
||||
<VDomRoot model={model} />
|
||||
{contextActive ? <VDomInnerView blockId={blockId} model={model} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
1
frontend/types/gotypes.d.ts
vendored
1
frontend/types/gotypes.d.ts
vendored
@ -642,6 +642,7 @@ declare global {
|
||||
type VDomBackendOpts = {
|
||||
closeonctrlc?: boolean;
|
||||
globalkeyboardevents?: boolean;
|
||||
globalstyles?: boolean;
|
||||
};
|
||||
|
||||
// vdom.VDomBackendUpdate
|
||||
|
||||
@ -197,6 +197,15 @@ func ForEach[T any](items []T, fn func(T) any) []any {
|
||||
return elems
|
||||
}
|
||||
|
||||
func ForEachIdx[T any](items []T, fn func(T, int) any) []any {
|
||||
var elems []any
|
||||
for idx, item := range items {
|
||||
fnResult := fn(item, idx)
|
||||
elems = append(elems, fnResult)
|
||||
}
|
||||
return elems
|
||||
}
|
||||
|
||||
func Props(props any) map[string]any {
|
||||
m, err := utilfn.StructToMap(props)
|
||||
if err != nil {
|
||||
@ -209,6 +218,10 @@ func PStyle(styleAttr string, propVal any) any {
|
||||
return styleAttrWrapper{StyleAttr: styleAttr, Val: propVal}
|
||||
}
|
||||
|
||||
func Fragment(parts ...any) any {
|
||||
return parts
|
||||
}
|
||||
|
||||
func P(propName string, propVal any) any {
|
||||
if propVal == nil {
|
||||
return map[string]any{propName: nil}
|
||||
|
||||
@ -140,13 +140,19 @@ func validateCFunc(cfunc any) error {
|
||||
if rtype.In(0) != reflect.TypeOf((*context.Context)(nil)).Elem() {
|
||||
return fmt.Errorf("Component function first argument must be context.Context")
|
||||
}
|
||||
// second can a map, or a struct, or ptr to struct (we'll reflect the value into it)
|
||||
// second can a map[string]any, or a struct, or ptr to struct (we'll reflect the value into it)
|
||||
arg2Type := rtype.In(1)
|
||||
if arg2Type.Kind() == reflect.Ptr {
|
||||
arg2Type = arg2Type.Elem()
|
||||
}
|
||||
if arg2Type.Kind() != reflect.Map && arg2Type.Kind() != reflect.Struct {
|
||||
return fmt.Errorf("Component function second argument must be a map or a struct")
|
||||
if arg2Type.Kind() == reflect.Map {
|
||||
if arg2Type.Key().Kind() != reflect.String ||
|
||||
!(arg2Type.Elem().Kind() == reflect.Interface && arg2Type.Elem().NumMethod() == 0) {
|
||||
return fmt.Errorf("Map argument must be map[string]any")
|
||||
}
|
||||
} else if arg2Type.Kind() != reflect.Struct &&
|
||||
!(arg2Type.Kind() == reflect.Interface && arg2Type.NumMethod() == 0) {
|
||||
return fmt.Errorf("Component function second argument must be map[string]any, struct, or any")
|
||||
}
|
||||
return nil
|
||||
}
|
||||
@ -374,7 +380,13 @@ func getRenderContext(ctx context.Context) *VDomContextVal {
|
||||
func callCFunc(cfunc any, ctx context.Context, props map[string]any) any {
|
||||
rval := reflect.ValueOf(cfunc)
|
||||
arg2Type := rval.Type().In(1)
|
||||
arg2Val := reflect.New(arg2Type)
|
||||
|
||||
var arg2Val reflect.Value
|
||||
if arg2Type.Kind() == reflect.Interface && arg2Type.NumMethod() == 0 {
|
||||
// For any/interface{}, pass nil properly
|
||||
arg2Val = reflect.New(arg2Type)
|
||||
} else {
|
||||
arg2Val = reflect.New(arg2Type)
|
||||
// if arg2 is a map, just pass props
|
||||
if arg2Type.Kind() == reflect.Map {
|
||||
arg2Val.Elem().Set(reflect.ValueOf(props))
|
||||
@ -384,6 +396,7 @@ func callCFunc(cfunc any, ctx context.Context, props map[string]any) any {
|
||||
fmt.Printf("error unmarshalling props: %v\n", err)
|
||||
}
|
||||
}
|
||||
}
|
||||
rtnVal := rval.Call([]reflect.Value{reflect.ValueOf(ctx), arg2Val.Elem()})
|
||||
if len(rtnVal) == 0 {
|
||||
return nil
|
||||
|
||||
@ -177,6 +177,7 @@ type VDomRefUpdate struct {
|
||||
type VDomBackendOpts struct {
|
||||
CloseOnCtrlC bool `json:"closeonctrlc,omitempty"`
|
||||
GlobalKeyboardEvents bool `json:"globalkeyboardevents,omitempty"`
|
||||
GlobalStyles bool `json:"globalstyles,omitempty"`
|
||||
}
|
||||
|
||||
type VDomRenderUpdate struct {
|
||||
|
||||
@ -5,12 +5,14 @@ package vdomclient
|
||||
|
||||
import (
|
||||
"context"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
"sync"
|
||||
"time"
|
||||
"unicode"
|
||||
@ -25,8 +27,17 @@ import (
|
||||
"github.com/wavetermdev/waveterm/pkg/wshutil"
|
||||
)
|
||||
|
||||
type AppOpts struct {
|
||||
CloseOnCtrlC bool
|
||||
GlobalKeyboardEvents bool
|
||||
GlobalStyles []byte
|
||||
RootComponentName string // defaults to "App"
|
||||
NewBlockFlag string // defaults to "n" (set to "-" to disable)
|
||||
}
|
||||
|
||||
type Client struct {
|
||||
Lock *sync.Mutex
|
||||
AppOpts AppOpts
|
||||
Root *vdom.RootElem
|
||||
RootElem *vdom.VDomElem
|
||||
RpcClient *wshutil.WshRpc
|
||||
@ -39,8 +50,11 @@ type Client struct {
|
||||
DoneCh chan struct{}
|
||||
Opts vdom.VDomBackendOpts
|
||||
GlobalEventHandler func(client *Client, event vdom.VDomEvent)
|
||||
GlobalStylesOption *FileHandlerOption
|
||||
UrlHandlerMux *mux.Router
|
||||
OverrideUrlHandler http.Handler
|
||||
NewBlockFlag bool
|
||||
SetupFn func()
|
||||
}
|
||||
|
||||
func (c *Client) GetIsDone() bool {
|
||||
@ -68,19 +82,70 @@ func (c *Client) SetOverrideUrlHandler(handler http.Handler) {
|
||||
c.OverrideUrlHandler = handler
|
||||
}
|
||||
|
||||
func MakeClient(opts *vdom.VDomBackendOpts) *Client {
|
||||
func MakeClient(appOpts AppOpts) *Client {
|
||||
if appOpts.RootComponentName == "" {
|
||||
appOpts.RootComponentName = "App"
|
||||
}
|
||||
if appOpts.NewBlockFlag == "" {
|
||||
appOpts.NewBlockFlag = "n"
|
||||
}
|
||||
client := &Client{
|
||||
Lock: &sync.Mutex{},
|
||||
AppOpts: appOpts,
|
||||
Root: vdom.MakeRoot(),
|
||||
DoneCh: make(chan struct{}),
|
||||
UrlHandlerMux: mux.NewRouter(),
|
||||
Opts: vdom.VDomBackendOpts{
|
||||
CloseOnCtrlC: appOpts.CloseOnCtrlC,
|
||||
GlobalKeyboardEvents: appOpts.GlobalKeyboardEvents,
|
||||
},
|
||||
}
|
||||
if opts != nil {
|
||||
client.Opts = *opts
|
||||
if len(appOpts.GlobalStyles) > 0 {
|
||||
client.Opts.GlobalStyles = true
|
||||
client.GlobalStylesOption = &FileHandlerOption{Data: appOpts.GlobalStyles, MimeType: "text/css"}
|
||||
}
|
||||
client.SetRootElem(vdom.E(appOpts.RootComponentName))
|
||||
return client
|
||||
}
|
||||
|
||||
func (client *Client) runMainE() error {
|
||||
if client.SetupFn != nil {
|
||||
client.SetupFn()
|
||||
}
|
||||
err := client.Connect()
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
err = client.CreateVDomContext(&vdom.VDomTarget{NewBlock: client.NewBlockFlag})
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
<-client.DoneCh
|
||||
return nil
|
||||
}
|
||||
|
||||
func (client *Client) AddSetupFn(fn func()) {
|
||||
client.SetupFn = fn
|
||||
}
|
||||
|
||||
func (client *Client) RegisterDefaultFlags() {
|
||||
if client.AppOpts.NewBlockFlag != "-" {
|
||||
flag.BoolVar(&client.NewBlockFlag, client.AppOpts.NewBlockFlag, false, "new block")
|
||||
}
|
||||
}
|
||||
|
||||
func (client *Client) RunMain() {
|
||||
if !flag.Parsed() {
|
||||
client.RegisterDefaultFlags()
|
||||
flag.Parse()
|
||||
}
|
||||
err := client.runMainE()
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
os.Exit(1)
|
||||
}
|
||||
}
|
||||
|
||||
func (client *Client) Connect() error {
|
||||
jwtToken := os.Getenv(wshutil.WaveJwtTokenVarName)
|
||||
if jwtToken == "" {
|
||||
@ -185,7 +250,10 @@ func DefineComponent[P any](client *Client, name string, renderFn func(ctx conte
|
||||
if !unicode.IsUpper(rune(name[0])) {
|
||||
panic("Component name must start with an uppercase letter")
|
||||
}
|
||||
client.RegisterComponent(name, renderFn)
|
||||
err := client.RegisterComponent(name, renderFn)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
return func(props P) *vdom.VDomElem {
|
||||
return vdom.E(name, vdom.Props(props))
|
||||
}
|
||||
@ -244,6 +312,7 @@ type FileHandlerOption struct {
|
||||
Reader io.Reader // optional reader for content
|
||||
File fs.File // optional embedded or opened file
|
||||
MimeType string // optional mime type
|
||||
ETag string // optional ETag (if set, resource may be cached)
|
||||
}
|
||||
|
||||
func determineMimeType(option FileHandlerOption) (string, []byte) {
|
||||
@ -299,50 +368,92 @@ func determineMimeType(option FileHandlerOption) (string, []byte) {
|
||||
return "application/octet-stream", nil
|
||||
}
|
||||
|
||||
func (c *Client) RegisterFileHandler(path string, option FileHandlerOption) {
|
||||
c.UrlHandlerMux.HandleFunc(path, func(w http.ResponseWriter, r *http.Request) {
|
||||
// ServeFileOption handles serving content based on the provided FileHandlerOption
|
||||
func ServeFileOption(w http.ResponseWriter, r *http.Request, option FileHandlerOption) error {
|
||||
// Determine MIME type and get buffered data if needed
|
||||
contentType, bufferedData := determineMimeType(option)
|
||||
w.Header().Set("Content-Type", contentType)
|
||||
// Handle ETag
|
||||
if option.ETag != "" {
|
||||
w.Header().Set("ETag", option.ETag)
|
||||
|
||||
if option.FilePath != "" {
|
||||
// Serve file from path
|
||||
// Check If-None-Match header
|
||||
if inm := r.Header.Get("If-None-Match"); inm != "" {
|
||||
// Strip W/ prefix and quotes if present
|
||||
inm = strings.Trim(inm, `"`)
|
||||
inm = strings.TrimPrefix(inm, "W/")
|
||||
etag := strings.Trim(option.ETag, `"`)
|
||||
etag = strings.TrimPrefix(etag, "W/")
|
||||
|
||||
if inm == etag {
|
||||
// Resource not modified
|
||||
w.WriteHeader(http.StatusNotModified)
|
||||
return nil
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle the content based on the option type
|
||||
switch {
|
||||
case option.FilePath != "":
|
||||
filePath := wavebase.ExpandHomeDirSafe(option.FilePath)
|
||||
http.ServeFile(w, r, filePath)
|
||||
} else if option.Data != nil {
|
||||
// Set content length and serve content from in-memory data
|
||||
|
||||
case option.Data != nil:
|
||||
w.Header().Set("Content-Length", fmt.Sprintf("%d", len(option.Data)))
|
||||
w.WriteHeader(http.StatusOK) // Ensure headers are sent before writing body
|
||||
w.WriteHeader(http.StatusOK)
|
||||
if _, err := w.Write(option.Data); err != nil {
|
||||
http.Error(w, "Failed to serve content", http.StatusInternalServerError)
|
||||
return fmt.Errorf("failed to write data: %v", err)
|
||||
}
|
||||
} else if option.File != nil {
|
||||
// Write buffered data if available, then continue with remaining File content
|
||||
|
||||
case option.File != nil:
|
||||
if bufferedData != nil {
|
||||
w.Header().Set("Content-Length", fmt.Sprintf("%d", len(bufferedData)))
|
||||
if _, err := w.Write(bufferedData); err != nil {
|
||||
http.Error(w, "Failed to serve content", http.StatusInternalServerError)
|
||||
return
|
||||
return fmt.Errorf("failed to write buffered data: %v", err)
|
||||
}
|
||||
}
|
||||
// Serve remaining content from File
|
||||
if _, err := io.Copy(w, option.File); err != nil {
|
||||
http.Error(w, "Failed to serve content", http.StatusInternalServerError)
|
||||
return fmt.Errorf("failed to copy from file: %v", err)
|
||||
}
|
||||
} else if option.Reader != nil {
|
||||
// Write buffered data if available, then continue with remaining Reader content
|
||||
|
||||
case option.Reader != nil:
|
||||
if bufferedData != nil {
|
||||
if _, err := w.Write(bufferedData); err != nil {
|
||||
http.Error(w, "Failed to serve content", http.StatusInternalServerError)
|
||||
return fmt.Errorf("failed to write buffered data: %v", err)
|
||||
}
|
||||
}
|
||||
if _, err := io.Copy(w, option.Reader); err != nil {
|
||||
return fmt.Errorf("failed to copy from reader: %v", err)
|
||||
}
|
||||
|
||||
default:
|
||||
return fmt.Errorf("no content available")
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
func (c *Client) RegisterFilePrefixHandler(prefix string, optionProvider func(path string) (*FileHandlerOption, error)) {
|
||||
c.UrlHandlerMux.PathPrefix(prefix).HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
option, err := optionProvider(r.URL.Path)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
if option == nil {
|
||||
http.Error(w, "no content available", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
// Serve remaining content from Reader
|
||||
if _, err := io.Copy(w, option.Reader); err != nil {
|
||||
http.Error(w, "Failed to serve content", http.StatusInternalServerError)
|
||||
}
|
||||
} else {
|
||||
http.Error(w, "No content available", http.StatusNotFound)
|
||||
if err := ServeFileOption(w, r, *option); err != nil {
|
||||
http.Error(w, fmt.Sprintf("Failed to serve content: %v", err), http.StatusInternalServerError)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
func (c *Client) RegisterFileHandler(path string, option FileHandlerOption) {
|
||||
c.UrlHandlerMux.HandleFunc(path, func(w http.ResponseWriter, r *http.Request) {
|
||||
if err := ServeFileOption(w, r, option); err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -100,7 +100,6 @@ func (impl *VDomServerImpl) VDomRenderCommand(ctx context.Context, feUpdate vdom
|
||||
}
|
||||
|
||||
func (impl *VDomServerImpl) VDomUrlRequestCommand(ctx context.Context, data wshrpc.VDomUrlRequestData) chan wshrpc.RespOrErrorUnion[wshrpc.VDomUrlRequestResponse] {
|
||||
log.Printf("VDomUrlRequestCommand: url=%q\n", data.URL)
|
||||
respChan := make(chan wshrpc.RespOrErrorUnion[wshrpc.VDomUrlRequestResponse])
|
||||
writer := NewStreamingResponseWriter(respChan)
|
||||
|
||||
@ -133,7 +132,10 @@ func (impl *VDomServerImpl) VDomUrlRequestCommand(ctx context.Context, data wshr
|
||||
for key, value := range data.Headers {
|
||||
httpReq.Header.Set(key, value)
|
||||
}
|
||||
|
||||
if httpReq.URL.Path == "/wave/global.css" && impl.Client.GlobalStylesOption != nil {
|
||||
ServeFileOption(writer, httpReq, *impl.Client.GlobalStylesOption)
|
||||
return
|
||||
}
|
||||
if impl.Client.OverrideUrlHandler != nil {
|
||||
impl.Client.OverrideUrlHandler.ServeHTTP(writer, httpReq)
|
||||
return
|
||||
|
||||
@ -451,6 +451,7 @@ func RunWebServer(listener net.Listener) {
|
||||
gr.HandleFunc("/wave/file", WebFnWrap(WebFnOpts{AllowCaching: false}, handleWaveFile))
|
||||
gr.HandleFunc("/wave/service", WebFnWrap(WebFnOpts{JsonErrors: true}, handleService))
|
||||
gr.HandleFunc("/wave/log-active-state", WebFnWrap(WebFnOpts{JsonErrors: true}, handleLogActiveState))
|
||||
gr.HandleFunc("/vdom/{uuid}/{path:.*}", WebFnWrap(WebFnOpts{AllowCaching: true}, handleVDom))
|
||||
gr.PathPrefix(docsitePrefix).Handler(http.StripPrefix(docsitePrefix, docsite.GetDocsiteHandler()))
|
||||
handler := http.TimeoutHandler(gr, HttpTimeoutDuration, "Timeout")
|
||||
if wavebase.IsDevMode() {
|
||||
|
||||
110
pkg/web/webvdomproto.go
Normal file
110
pkg/web/webvdomproto.go
Normal file
@ -0,0 +1,110 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
package web
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"io"
|
||||
"log"
|
||||
"net/http"
|
||||
"strings"
|
||||
|
||||
"github.com/wavetermdev/waveterm/pkg/wshrpc"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshrpc/wshclient"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshrpc/wshserver"
|
||||
"github.com/wavetermdev/waveterm/pkg/wshutil"
|
||||
)
|
||||
|
||||
// Add the new handler function
|
||||
func handleVDom(w http.ResponseWriter, r *http.Request) {
|
||||
// Extract UUID and path from URL
|
||||
pathParts := strings.Split(strings.TrimPrefix(r.URL.Path, "/vdom/"), "/")
|
||||
if len(pathParts) < 1 {
|
||||
http.Error(w, "Invalid VDOM URL format", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
uuid := pathParts[0]
|
||||
// Simple UUID validation
|
||||
if len(uuid) != 36 {
|
||||
http.Error(w, "Invalid UUID format", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Reconstruct the remaining path
|
||||
path := "/" + strings.Join(pathParts[1:], "/")
|
||||
if r.URL.RawQuery != "" {
|
||||
path += "?" + r.URL.RawQuery
|
||||
}
|
||||
|
||||
// Read request body if present
|
||||
var body []byte
|
||||
var err error
|
||||
if r.Body != nil {
|
||||
body, err = io.ReadAll(r.Body)
|
||||
if err != nil {
|
||||
http.Error(w, fmt.Sprintf("Error reading request body: %v", err), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
defer r.Body.Close()
|
||||
}
|
||||
|
||||
// Convert headers to map
|
||||
headers := make(map[string]string)
|
||||
for key, values := range r.Header {
|
||||
if len(values) > 0 {
|
||||
headers[key] = values[0]
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare RPC request data
|
||||
data := wshrpc.VDomUrlRequestData{
|
||||
Method: r.Method,
|
||||
URL: path,
|
||||
Headers: headers,
|
||||
Body: body,
|
||||
}
|
||||
|
||||
// Get RPC client
|
||||
client := wshserver.GetMainRpcClient()
|
||||
|
||||
// Make RPC call with route to specific process
|
||||
route := wshutil.MakeProcRouteId(uuid)
|
||||
respCh := wshclient.VDomUrlRequestCommand(client, data, &wshrpc.RpcOpts{
|
||||
Route: route,
|
||||
})
|
||||
|
||||
// Handle first response to set headers
|
||||
firstResp := true
|
||||
for respUnion := range respCh {
|
||||
if respUnion.Error != nil {
|
||||
http.Error(w, fmt.Sprintf("RPC error: %v", respUnion.Error), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
resp := respUnion.Response
|
||||
if firstResp {
|
||||
firstResp = false
|
||||
// Set status code and headers from first response
|
||||
if resp.StatusCode > 0 {
|
||||
w.WriteHeader(resp.StatusCode)
|
||||
} else {
|
||||
w.WriteHeader(http.StatusOK)
|
||||
}
|
||||
// Copy headers
|
||||
for key, value := range resp.Headers {
|
||||
w.Header().Set(key, value)
|
||||
}
|
||||
}
|
||||
|
||||
// Write body chunk if present
|
||||
if len(resp.Body) > 0 {
|
||||
_, err = w.Write(resp.Body)
|
||||
if err != nil {
|
||||
log.Printf("Error writing response: %v", err)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user