farc - npm Package Compare versions

Comparing version 0.0.1-main.20240215T203749 to 0.0.1-main.20240215T213721

_lib/dev/components.d.ts

 import { type Frame as FrameType } from './types.js';
-import { type State, type getInspectorData } from './utils.js';
+import { type State } from './utils.js';
 export type PreviewProps = {
     baseUrl: string;
+    contextHtml: string;
     frame: FrameType;
-    inspectorData: Awaited<ReturnType<typeof getInspectorData>>;
     routes: readonly string[];
@@ -8,0 +8,0 @@ speed: number;

_lib/dev/components.js

@@ -5,3 +5,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "farc/jsx/jsx-runtime";
 export function Preview(props) {
-    const { baseUrl, frame, inspectorData, routes, speed, state } = props;
+    const { baseUrl, contextHtml, frame, routes, speed, state } = props;
     return (_jsx("div", { class: "flex flex-col items-center p-4", "x-data": `{
@@ -11,3 +11,3 @@ baseUrl: '${baseUrl}',
           frame: ${JSON.stringify(frame)},
-          inspectorData: ${JSON.stringify(inspectorData)},
+          contextHtml: ${JSON.stringify(contextHtml)},
           routes: ${JSON.stringify(routes)},
@@ -70,3 +70,3 @@ speed: ${speed},
         }
-      }`, children: _jsxs("div", { class: "grid gap-2.5 w-full", style: { maxWidth: '68rem' }, "x-data": "{\n          get inspectorData() { return data.inspectorData },\n          get routes() { return data.routes },\n          get state() { return data.state },\n          get buttonCount() { return frame.buttons?.length ?? 0 },\n          get hasIntents() { return Boolean(frame.input || frame.buttons.length) },\n        }", children: [_jsx(Navigator, {}), _jsxs("div", { class: "container gap-4", style: { minHeight: '25.5rem' }, children: [_jsx(Frame, {}), _jsxs("div", { class: "w-full scrollbars", children: [_jsxs("div", { children: ["Version: ", _jsx("span", { "x-text": "frame.version" })] }), _jsxs("div", { children: ["Image: ", _jsx("span", { "x-text": "frame.imageUrl" })] }), _jsxs("div", { children: ["Image Aspect Ratio: ", _jsx("span", { "x-text": "frame.imageAspectRatio" })] }), _jsxs("div", { children: ["Post URL: ", _jsx("span", { "x-text": "frame.postUrl" })] })] })] }), _jsxs("div", { class: "border divide-x rounded-md container", children: [_jsx("div", { class: "p-4 scrollbars", style: { height: '22.75rem' }, children: _jsx(Inspector, {}) }), _jsx("div", { class: "p-4 scrollbars", style: { height: '22.75rem' }, children: _jsx(Timeline, {}) })] })] }) }));
+      }`, children: _jsxs("div", { class: "grid gap-2.5 w-full", style: { maxWidth: '68rem' }, "x-data": "{\n          get contextHtml() { return data.contextHtml },\n          get routes() { return data.routes },\n          get state() { return data.state },\n          get buttonCount() { return frame.buttons?.length ?? 0 },\n          get hasIntents() { return Boolean(frame.input || frame.buttons.length) },\n        }", children: [_jsx(Navigator, {}), _jsxs("div", { class: "container gap-4", style: { minHeight: '25.5rem' }, children: [_jsx(Frame, {}), _jsxs("div", { class: "w-full scrollbars", children: [_jsxs("div", { children: ["Version: ", _jsx("span", { "x-text": "frame.version" })] }), _jsxs("div", { children: ["Image: ", _jsx("span", { "x-text": "frame.imageUrl" })] }), _jsxs("div", { children: ["Image Aspect Ratio: ", _jsx("span", { "x-text": "frame.imageAspectRatio" })] }), _jsxs("div", { children: ["Post URL: ", _jsx("span", { "x-text": "frame.postUrl" })] })] })] }), _jsxs("div", { class: "border divide-x rounded-md container", children: [_jsx("div", { class: "p-4 scrollbars", style: { height: '22.75rem' }, children: _jsx("div", { class: "grayscale", "x-html": "contextHtml" }) }), _jsx("div", { class: "scrollbars", style: { height: '22.75rem' }, children: _jsx(Timeline, {}) })] })] }) }));
 }
@@ -194,10 +194,7 @@ function Navigator() {
 function Timeline() {
-    return (_jsx("div", { class: "w-full flex", style: {
+    return (_jsx("div", { class: "w-full flex divide-y-reverse", style: {
             flexDirection: 'column-reverse',
             justifyContent: 'flex-end',
-        }, children: _jsx("template", { "x-for": "log in logs", children: _jsxs("div", { class: "flex flex-col", children: [_jsxs("div", { class: "flex flex-row", style: { justifyContent: 'space-between' }, children: [_jsxs("div", { children: [_jsx("span", { "x-text": "log.method" }), _jsx("span", { "x-text": "`${formatSpeed(log.speed)}ms`" })] }), _jsx("span", { "x-text": "new Date(log.time).toLocaleTimeString()" })] }), _jsxs("div", { children: [_jsx("span", { "x-text": "`${formatUrl(log.url)}`" }), _jsx("template", { "v-if": "log.body", children: _jsxs("div", { children: [_jsx("span", { "x-text": "log.body.buttonIndex" }), _jsx("span", { "x-text": "log.body.inputText" })] }) })] })] }) }) }));
+        }, children: _jsx("template", { "x-for": "log in logs", children: _jsxs("div", { class: "flex flex-col p-4 gap-1.5", children: [_jsxs("div", { class: "flex flex-row", style: { justifyContent: 'space-between' }, children: [_jsxs("div", { class: "flex gap-1.5 font-mono text-fg2", children: [_jsx("div", { class: "bg-bn px-1 rounded-sm", "x-text": "log.method" }), _jsx("span", { "x-text": "`${formatSpeed(log.speed)}ms`" })] }), _jsx("span", { class: "font-mono text-fg2", "x-text": "new Date(log.time).toLocaleTimeString()" })] }), _jsx("div", { class: "flex gap-1.5 font-mono text-fg2", children: _jsx("span", { "x-text": "`${formatUrl(log.url)}`" }) })] }) }) }));
 }
-function Inspector() {
-    return _jsx("div", { "x-html": "inspectorData.contextHtml" });
-}
 export function Styles() {
@@ -236,2 +233,6 @@ const styles = `
 
+    ::selection {
+      background-color: #2860CA;
+    }
+
     html {
@@ -382,2 +383,6 @@ background-color: var(--bg);
     }
+    .divide-y-reverse > * + * {
+      border-top-width: 0px;
+      border-bottom-width: 1px;
+    }
     .font-bold { font-weight: 700; }
@@ -413,2 +418,3 @@ .font-mono { font-family: monospace; }
     .pb-0 { padding-bottom: 0; }
+    .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
     .px-1\\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
@@ -454,3 +460,2 @@ .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
       scrollbar-color: var(--br) transparent;
-      scrollbar-gutter: stable;
       scrollbar-width: thin;
@@ -466,2 +471,6 @@ }
 
+    .grayscale {
+      filter: grayscale(100%);
+    }
+
     [x-cloak] { display: none !important; }
@@ -468,0 +477,0 @@

_lib/dev/routes.js

@@ -9,3 +9,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "farc/jsx/jsx-runtime";
 import { Preview, Scripts, Styles } from './components.js';
-import { fetchFrame, getInspectorData, getRoutes, htmlToFrame, htmlToState, validatePostBody, } from './utils.js';
+import { fetchFrame, getCodeHtml, getRoutes, htmlToFrame, htmlToState, validatePostBody, } from './utils.js';
 export function routes(app, path) {
@@ -27,5 +27,12 @@ app.hono
         const state = htmlToState(text);
-        const inspectorData = await getInspectorData(frame, state);
+        const contextHtml = await getCodeHtml(JSON.stringify(state.context, null, 2), 'json');
         const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
-        const props = { baseUrl, frame, inspectorData, routes, speed, state };
+        const props = {
+            baseUrl,
+            contextHtml,
+            frame,
+            routes,
+            speed,
+            state,
+        };
         return c.render(_jsx(Preview, { ...props }));
@@ -43,5 +50,12 @@ });
         const state = htmlToState(text);
-        const inspectorData = await getInspectorData(frame, state);
+        const contextHtml = await getCodeHtml(JSON.stringify(state.context, null, 2), 'json');
         const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
-        return c.json({ baseUrl, frame, inspectorData, routes, speed, state });
+        return c.json({
+            baseUrl,
+            contextHtml,
+            frame,
+            routes,
+            speed,
+            state,
+        });
     })
@@ -66,5 +80,12 @@ .post(`${parsePath(path)}/dev/frame/action`, validator('json', validatePostBody), async (c) => {
         const state = htmlToState(text);
-        const inspectorData = await getInspectorData(frame, state);
+        const contextHtml = await getCodeHtml(JSON.stringify(state.context, null, 2), 'json');
         const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
-        return c.json({ baseUrl, frame, inspectorData, routes, speed, state });
+        return c.json({
+            baseUrl,
+            contextHtml,
+            frame,
+            routes,
+            speed,
+            state,
+        });
     })
@@ -71,0 +92,0 @@ .post(`${parsePath(path)}/dev/frame/redirect`, validator('json', validatePostBody), async (c) => {

_lib/dev/utils.d.ts

 import { inspectRoutes } from 'hono/dev';
 import type { Context } from 'hono';
 import { type FrameContext, type FrameImageAspectRatio } from '../types.js';
-import { type Frame, type FrameButton } from './types.js';
+import { type FrameButton } from './types.js';
 export declare function htmlToMetaTags(html: string, selector: string): readonly HTMLMetaElement[];
@@ -58,7 +58,3 @@ export declare function parseProperties(metaTags: readonly HTMLMetaElement[]): {
 export declare function getRoutes(baseUrl: string, routes: ReturnType<typeof inspectRoutes>): string[];
-export declare function getInspectorData(frame: Frame, state: State): Promise<{
-    contextHtml: string;
-    frameHtml: string;
-    metaTagsHtml: string;
-}>;
+export declare function getCodeHtml(code: string, lang: string): Promise<string>;
 export declare function validatePostBody(value: Record<string, string | File>, c: Context): Response | {
@@ -65,0 +61,0 @@ buttonIndex: number;

_lib/dev/utils.js

@@ -208,31 +208,8 @@ import { Message } from '@farcaster/core';
 }
-export async function getInspectorData(frame, state) {
-    const { debug: { buttons: _b, imageAspectRatio: _ia, imageUrl: _iu, input: _in, postUrl: _pu, version: _v, htmlTags, ...debug } = {}, title: _t, buttons, ...rest } = frame;
+export async function getCodeHtml(code, lang) {
     const themes = {
         light: 'vitesse-light',
-        dark: 'vitesse-dark',
+        dark: 'vitesse-black',
     };
-    const [contextHtml, frameHtml, metaTagsHtml] = await Promise.all([
-        codeToHtml(JSON.stringify(state.context, null, 2), {
-            lang: 'json',
-            themes,
-        }),
-        codeToHtml(JSON.stringify({ ...rest, buttons }, null, 2), {
-            lang: 'json',
-            themes,
-        }),
-        codeToHtml((htmlTags ?? []).join('\n'), {
-            lang: 'html',
-            themes,
-        }),
-        codeToHtml(JSON.stringify(debug, null, 2), {
-            lang: 'json',
-            themes,
-        }),
-    ]);
-    return {
-        contextHtml,
-        frameHtml,
-        metaTagsHtml,
-    };
+    return codeToHtml(code, { lang, themes });
 }
@@ -239,0 +216,0 @@ export function validatePostBody(value, c) {

dev/utils.ts

@@ -267,47 +267,8 @@ import { Message } from '@farcaster/core'
 
-export async function getInspectorData(frame: Frame, state: State) {
-  const {
-    debug: {
-      buttons: _b,
-      imageAspectRatio: _ia,
-      imageUrl: _iu,
-      input: _in,
-      postUrl: _pu,
-      version: _v,
-      htmlTags,
-      ...debug
-    } = {},
-    title: _t,
-    buttons,
-    ...rest
-  } = frame
-
+export async function getCodeHtml(code: string, lang: string) {
   const themes = {
     light: 'vitesse-light',
-    dark: 'vitesse-dark',
+    dark: 'vitesse-black',
   }
-  const [contextHtml, frameHtml, metaTagsHtml] = await Promise.all([
-    codeToHtml(JSON.stringify(state.context, null, 2), {
-      lang: 'json',
-      themes,
-    }),
-    codeToHtml(JSON.stringify({ ...rest, buttons }, null, 2), {
-      lang: 'json',
-      themes,
-    }),
-    codeToHtml((htmlTags ?? []).join('\n'), {
-      lang: 'html',
-      themes,
-    }),
-    codeToHtml(JSON.stringify(debug, null, 2), {
-      lang: 'json',
-      themes,
-    }),
-  ])
-
-  return {
-    contextHtml,
-    frameHtml,
-    metaTagsHtml,
-  }
+  return codeToHtml(code, { lang, themes })
 }
@@ -314,0 +275,0 @@

package.json

 {
   "name": "farc",
-  "version": "0.0.1-main.20240215T203749",
+  "version": "0.0.1-main.20240215T213721",
   "type": "module",
@@ -5,0 +5,0 @@ "module": "_lib/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

394033

-0.35%

Lines of code

4009

-0.05%

No dependency changes