eddev 2.1.6 → 2.2.0-beta.2

package/dist/app/lib/devtools/components/ui/QueryMonitorDisplay.d.ts

@@ -0,0 +1,7 @@
+import { QueryMonitor } from "../../../../utils/query-monitor";
+type Props = {
+    entries?: QueryMonitor.Entry[];
+};
+export declare function QueryMonitorDisplay(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=QueryMonitorDisplay.d.ts.map

package/dist/app/lib/devtools/components/ui/QueryMonitorDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryMonitorDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/QueryMonitorDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAI9D,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,YAAY,CAAC,KAAK,EAAE,CAAA;CAC/B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,kDAS/C"}

package/dist/app/lib/devtools/components/ui/QueryMonitorDisplay.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useState } from "react";
+import { JSONInspector } from "./JSONInspector";
+import { Expander } from "./Expander";
+export function QueryMonitorDisplay(props) {
+    if (!props.entries || props.entries.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-col gap-1", children: props.entries?.map((entry, index) => (_jsx(MonitorEntry, { entry: entry }, index))) }));
+}
+function MonitorEntry({ entry, indent }) {
+    const hasChildren = entry.log.length > 0 || entry.children?.length > 0;
+    const [expanded, setExpanded] = useState(true);
+    return (_jsxs("div", { className: "", children: [_jsx("div", { className: "border-t border-neutral-200/5 py-[0.2em]", children: _jsx(Indented, { level: indent || 0, children: _jsx(Expander, { expanded: expanded, onChange: setExpanded, canExpand: hasChildren, children: _jsxs("div", { children: [_jsxs("span", { className: "text-cyan-700", children: [entry.label, " "] }), _jsx("code", { className: "text-cyan-400", children: entry.file }), " (", Math.round(entry.duration * 1000), "ms)"] }) }) }) }), expanded && hasChildren && (_jsxs("div", { children: [entry.log?.map((logEntry, logIndex) => (_jsx("div", { className: "text-sm text-neutral-400", children: _jsx(LogEntry, { entry: logEntry, indent: indent ? indent + 1 : 1 }) }, logIndex))), entry.children?.map((child, childIndex) => (_jsx(MonitorEntry, { entry: child, indent: indent ? indent + 1 : 1 }, childIndex)))] }))] }));
+}
+function Indented(props) {
+    return _jsx("div", { style: { paddingLeft: `${props.level * 1.25}em` }, children: props.children });
+}
+function LogMessagePart(props) {
+    const part = props.part;
+    if (typeof part === "string") {
+        return _jsx(_Fragment, { children: part });
+    }
+    else {
+        return (_jsx("span", { className: "text-purple-400 inline-flex", onClick: (e) => e.stopPropagation(), children: _jsx(JSONInspector, { data: part }) }));
+    }
+}
+function LogEntry({ entry, indent }) {
+    let style = {
+        colorClass: "text-white/50",
+        icon: "💬",
+    };
+    if (entry.type === "php_warning" || entry.type === "warn") {
+        style.colorClass = "text-yellow-400";
+        style.icon = "⚠️";
+    }
+    else if (entry.type === "error" || entry.type === "php_error") {
+        style.colorClass = "text-red-400";
+        style.icon = "❌";
+    }
+    else if (entry.type === "debug" || entry.type === "GRAPHQL_DEBUG") {
+        style.colorClass = "text-blue-400";
+        style.icon = "ℹ️";
+    }
+    else if (entry.type === "php_notice") {
+        style.colorClass = "text-cyan-400";
+        style.icon = "💡";
+    }
+    let formattedMessage = null;
+    if (Array.isArray(entry.message)) {
+        formattedMessage = entry.message.map((msg, i) => (_jsxs(Fragment, { children: [_jsx(LogMessagePart, { part: msg }), " "] }, i)));
+    }
+    else {
+        formattedMessage = _jsx(LogMessagePart, { part: entry.message });
+    }
+    let prefix = _jsxs("span", { children: ["[", entry.type, "]"] });
+    const [expanded, setExpanded] = useState(false);
+    return (_jsx("div", { className: `${style.colorClass} border-t border-neutral-200/5 py-[0.2em]`, children: _jsx(Indented, { level: indent || 0, children: _jsx("div", { className: "inline-flex gap-[0.5em]", children: _jsx("div", { children: _jsxs(Expander, { expanded: expanded, onChange: setExpanded, children: [_jsx("div", { className: "mr-1", children: style.icon }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { children: [prefix, " ", _jsx("span", { children: formattedMessage })] }), _jsxs("div", { className: "flex flex-col", children: [!!entry.parentType && !!entry.fieldName ? (_jsxs("div", { className: `italic ${expanded ? "" : "opacity-50"}`, children: [_jsx("span", { className: "opacity-50", children: " selecting " }), entry.parentType, ".", entry.fieldName] })) : null, expanded && entry.path?.length && (_jsxs("div", { onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { children: [_jsx("span", { className: "opacity-50", children: "at path " }), entry.path?.length && _jsx("span", { children: entry.path.join(".") })] }), entry.trace?.length > 0 && (_jsxs("div", { children: [_jsx("span", { className: "opacity-50", children: "Trace:" }), entry.trace?.map((row, i) => (_jsxs("div", { className: "line-clamp-1", children: [_jsx("span", { className: "opacity-50", children: "- " }), _jsx("span", { children: row.call }), _jsx("span", { className: "opacity-50", children: " line " }), _jsx("span", { children: row.line }), _jsx("span", { className: "opacity-50", children: " in " }), _jsx("span", { children: row.file })] }, i)))] }))] }))] })] })] }) }) }) }) }));
+}

package/dist/app/lib/devtools/components/ui/TabBar.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+type Props<K> = {
+    tabs: {
+        value: K;
+        label: string;
+        badge?: ReactNode;
+    }[];
+    activeTab?: K;
+    onTabChange?: (tab: K) => void;
+};
+export declare function TabBar<K extends string>(props: Props<K>): import("react/jsx-runtime").JSX.Element;
+export declare function useTabBar<K extends string>(id: string, tabs: {
+    value: K;
+    label: string;
+    badge?: ReactNode;
+}[]): {
+    tab: K;
+    setTab: (value: K | ((current: K) => K)) => void;
+    tabBar: import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/app/lib/devtools/components/ui/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,KAAK,KAAK,CAAC,CAAC,IAAI;IACd,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAA;KAAE,EAAE,CAAA;IACtD,SAAS,CAAC,EAAE,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAgBvD;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,EAAE;;;;EAI7G"}

package/dist/app/lib/devtools/components/ui/TabBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePersistState } from "../../hooks/usePersistState";
+import { Button } from "./Button";
+export function TabBar(props) {
+    return (_jsx("div", { className: "flex gap-2 flex-none p-2 pb-0", children: props.tabs.map((t) => (_jsxs(Button, { variant: "tab", active: props.activeTab === t.value, onClick: () => props.onTabChange?.(t.value), children: [t.label, t.badge ? _jsx("span", { className: "bg-neutral-200/20 rounded-md px-1", children: t.badge }) : null] }, t.value))) }));
+}
+export function useTabBar(id, tabs) {
+    const [tab, setTab] = usePersistState(`tab:${id}`, tabs[0].value);
+    const tabBar = _jsx(TabBar, { tabs: tabs, activeTab: tab, onTabChange: setTab });
+    return { tab, setTab, tabBar };
+}

package/dist/app/lib/devtools/components/ui/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+type Props<K> = {
+    id: string;
+    tabs: {
+        value: K;
+        label: string;
+        badge?: ReactNode;
+        content: () => ReactNode;
+    }[];
+};
+export declare function Tabs<K extends string>(props: Props<K>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/app/lib/devtools/components/ui/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,KAAK,KAAK,CAAC,CAAC,IAAI;IACd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,SAAS,CAAA;KAAE,EAAE,CAAA;CACjF,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAkBrD"}

package/dist/app/lib/devtools/components/ui/Tabs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePersistState } from "../../hooks/usePersistState";
+import { Button } from "./Button";
+export function Tabs(props) {
+    const [tab, setTab] = usePersistState(`tab:${props.id}`, props.tabs[0].value);
+    return (_jsxs("div", { className: "flex flex-col flex-1 gap-2 max-h-[calc(100vh-90px)]", children: [_jsx("div", { className: "flex gap-2 flex-none p-2 pb-0", children: props.tabs.map((t) => (_jsxs(Button, { variant: "tab", active: tab === t.value, onClick: () => setTab(t.value), children: [t.label, t.badge ? _jsx("span", { className: "bg-neutral-200/20 rounded-md px-1", children: t.badge }) : null] }, t.value))) }), _jsx("div", { className: "flex-1 overflow-auto max-h-[80%] basis-auto pt-0 p-2", children: props.tabs.find((t) => t.value === tab)?.content() })] }));
+}

package/dist/app/lib/devtools/hooks/usePersistState.d.ts

@@ -1,2 +1,5 @@
 export declare function usePersistState<T>(id: string, initial: T): [T, (value: T | ((current: T) => T)) => void];
+export declare namespace usePersistState {
+    var clearAll: () => void;
+}
 //# sourceMappingURL=usePersistState.d.ts.map

package/dist/app/lib/devtools/hooks/usePersistState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePersistState.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/hooks/usePersistState.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,eAAe,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAiBxG"}
+{"version":3,"file":"usePersistState.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/hooks/usePersistState.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,eAAe,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAiBxG;yBAjBe,eAAe"}

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -38,3 +38,10 @@ export function usePersistState(id, initial) {
         },
     ];
 }
+usePersistState.clearAll = () => {
+    for (const key in localStorage) {
+        if (key.startsWith("devui_")) {
+            localStorage.removeItem(key);
+        }
+    }
+};