Skip to content

Commit

Permalink
feat(dev): select previous state
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmm
tmm committed Feb 18, 2024
1 parent db78be6 commit 845829c
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 85 deletions.
162 changes: 81 additions & 81 deletions src/dev/components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {
checkCircledIcon,
chevronLeftIcon,
chevronRightIcon,
crossCircledIcon,
externalLinkIcon,
farcasterIcon,
fileTextIcon,
Expand All @@ -17,7 +19,7 @@ export type PreviewProps = {
baseUrl: string
contextHtml: string
frame: FrameType
log:
request:
| {
type: 'initial'
method: 'get'
Expand Down Expand Up @@ -72,25 +74,27 @@ export type PreviewProps = {
}

export function Preview(props: PreviewProps) {
const { baseUrl, contextHtml, frame, log, routes, state } = props
const { baseUrl, contextHtml, frame, request, routes, state } = props
return (
<div
x-data={`{
data: {
baseUrl: '${baseUrl}',
contextHtml: ${JSON.stringify(contextHtml)},
frame: ${JSON.stringify(frame)},
log: ${JSON.stringify(log)},
request: ${JSON.stringify(request)},
routes: ${JSON.stringify(routes)},
state: ${JSON.stringify(state)},
},
history: [],
id: -1,
inputText: '',
logs: [${JSON.stringify(log)}],
logs: [${JSON.stringify(props)}],
selectedLogIndex: -1,
get baseUrl() { return this.data.baseUrl },
get frame() { return this.data.frame },
get log() { return this.data.log },
get request() { return this.data.request },
get contextHtml() { return this.data.contextHtml },
get routes() { return this.data.routes },
Expand All @@ -106,7 +110,8 @@ export function Preview(props: PreviewProps) {
},
})
const json = await response.json()
this.logs = [...this.logs, json.log]
this.logs = [...this.logs, json]
this.selectedLogIndex = -1
return json
},
async postFrameAction(body) {
Expand All @@ -118,7 +123,8 @@ export function Preview(props: PreviewProps) {
},
})
const json = await response.json()
this.logs = [...this.logs, json.log]
this.logs = [...this.logs, json]
this.selectedLogIndex = -1
return json
},
async postFrameRedirect(body) {
Expand All @@ -131,6 +137,7 @@ export function Preview(props: PreviewProps) {
})
const json = await response.json()
this.logs = [...this.logs, json]
this.selectedLogIndex = -1
return json
},
Expand Down Expand Up @@ -298,7 +305,7 @@ function Navigator() {
class="bg-background-100 border rounded-md text-gray-700 px-2 rounded-r-md h-full"
type="button"
x-on:click={`
const body = history[id]?.body
const body = selectedLogIndex ? logs[selectedLogIndex]?.request.body : history[id]?.body
if (body) postFrameAction(body).then((json) => data = json).catch(console.error)
else getFrame().then((json) => data = json).catch(console.error)
`}
Expand Down Expand Up @@ -602,45 +609,54 @@ function Button() {
function Data() {
return (
<div
class="bg-background-100 border rounded-md overflow-hidden"
class="bg-background-100 border rounded-md overflow-hidden divide-y"
style={{ height: 'min-content' }}
x-data="{
get rows() {
return [
{ property: 'fc:frame', value: frame.version },
{ property: 'fc:frame:image', value: frame.imageUrl },
{ property: 'fc:frame:aspect_ratio', value: frame.imageAspectRatio },
{ property: 'fc:frame:post_url', value: frame.postUrl },
{ property: 'og:image', value: frame.image || 'Not Provided' },
{ property: 'og:title', value: frame.title || 'Not Provided' },
...(frame.input?.text ? [{ property: 'fc:frame:input:text', value: frame.input.text }] : []),
{ property: 'fc:frame', value: frame.version, status: 'valid' },
{ property: 'fc:frame:image', value: frame.imageUrl, status: 'valid' },
{ property: 'fc:frame:aspect_ratio', value: frame.imageAspectRatio, status: 'valid' },
{ property: 'fc:frame:post_url', value: frame.postUrl, status: frame.debug.postUrlTooLong ? 'error' : 'valid' },
{ property: 'og:image', value: frame.image || 'Not Provided', status: frame.image ? 'valid' : 'error' },
{ property: 'og:title', value: frame.title || 'Not Provided', status: frame.title ? 'valid' : 'error' },
...(frame.input?.text ? [{ property: 'fc:frame:input:text', value: frame.input.text, status: frame.debug.inputTextTooLong ? 'error' : 'valid' }] : []),
...(frame.buttons.map(button => ({
property: `fc:frame:button:${button.index}`,
value: `
<span>${button.title}</span>${button.type ? `, <span>${button.type}</span>` : ''}${button.target ? `, <span>${button.target}</span>` : ''}
`
`,
status: 'valid',
}))),
]
},
}"
>
<template x-for="(row, index) in rows">
<div
class="flex flex-row"
{...{
':style':
'index !== rows.length - 1 && { borderBottomWidth: `1px` }',
}}
class="items-center flex flex-row"
style={{ fontSize: '0.8125rem' }}
>
<div
class="text-sm text-gray-700 p-3 font-medium"
class="text-gray-700 p-3 font-medium"
x-text="row.property"
style={{ minWidth: '12rem' }}
style={{ minWidth: '10rem' }}
/>
<div
class="text-sm text-gray-1000 p-3 text-ellipsis overflow-hidden whitespace-nowrap"
class="text-gray-1000 p-3 text-ellipsis overflow-hidden whitespace-nowrap"
x-html="row.value"
/>
<div
class="flex p-3"
style={{ justifyContent: 'flex-end', flex: '1' }}
>
<template x-if="row.status === 'valid'">
<span class="text-green-600">{checkCircledIcon}</span>
</template>
<template x-if="row.status === 'error'">
<span class="text-red-600">{crossCircledIcon}</span>
</template>
</div>
</div>
</template>

Expand All @@ -655,38 +671,25 @@ function Data() {
function Metrics() {
return (
<div
class="bg-background-100 border rounded-md flex flex-row gap-2 divide-x"
class="bg-background-100 border rounded-md flex flex-row divide-x"
style={{ justifyContent: 'space-around' }}
x-data={`{
metrics: [
{ icon: '${stopwatchIcon}', name: 'speed', value: formatSpeed(request.metrics.speed) },
{ icon: '${fileTextIcon}', name: 'frame size', value: formatFileSize(request.metrics.htmlSize) },
{ icon: '${imageIcon}', name: 'image size', value: formatFileSize(request.metrics.imageSize) },
]
}`}
>
<div
class="items-center flex font-mono gap-1.5 text-sm justify-center"
style={{ flex: '1', padding: '0.685rem' }}
>
<span class="text-gray-700">{stopwatchIcon}</span>
<div class="text-gray-1000" x-text="formatSpeed(log.metrics.speed)" />
</div>

<div
class="items-center flex font-mono gap-1.5 text-sm justify-center"
style={{ flex: '1', padding: '0.65rem' }}
>
<span class="text-gray-700">{fileTextIcon}</span>
<template x-for="metric in metrics">
<div
class="text-gray-1000"
x-text="formatFileSize(log.metrics.htmlSize)"
/>
</div>

<div
class="items-center flex font-mono gap-1.5 text-sm justify-center"
style={{ flex: '1', padding: '0.65rem' }}
>
<span class="text-gray-700">{imageIcon}</span>
<div
class="text-gray-1000"
x-text="formatFileSize(log.metrics.imageSize)"
/>
</div>
class="items-center flex font-mono gap-1.5 text-sm justify-center"
style={{ flex: '1', padding: '0.685rem' }}
>
<span class="text-gray-700" x-html="metric.icon" />
<div class="text-gray-1000" x-text="metric.value" />
</div>
</template>
</div>
)
}
Expand All @@ -703,11 +706,18 @@ function Timeline() {
<template x-for="(log, index) in logs">
<button
type="button"
class="bg-transparent flex flex-col p-4 gap-2 w-full"
class=" flex flex-col p-4 gap-2 w-full border-gray-200 hover:bg-gray-200"
{...{
':class':
'index === selectedLogIndex ? "bg-gray-200" : "bg-transparent"',
':style':
'(index !== 0 || logs.length < 7) && { borderBottomWidth: `1px` }',
':tabIndex': 'logs.length - index',
}}
x-on:click={`
data = log
selectedLogIndex = index
`}
>
<div
class="flex flex-row"
Expand All @@ -716,32 +726,32 @@ function Timeline() {
<div class="flex gap-1.5 font-mono text-gray-700 text-xs items-center">
<div
class="flex items-center border px-1.5 rounded-sm text-gray-900"
x-text="log.method"
x-text="log.request.method"
style={{ textTransform: 'uppercase' }}
/>
<div
class="flex items-center border px-1.5 rounded-sm"
x-text="log.response.status"
x-text="log.request.response.status"
style={{ textTransform: 'uppercase' }}
{...{
':class': `{
'border-green-100': log.response.success,
'text-green-900': log.response.success,
'border-red-100': !log.response.success,
'text-red-900': !log.response.success,
'border-green-100': log.request.response.success,
'text-green-900': log.request.response.success,
'border-red-100': !log.request.response.success,
'text-red-900': !log.request.response.success,
}`,
}}
/>
<span x-text="formatSpeed(log.metrics.speed)" />
<span x-text="formatSpeed(log.request.metrics.speed)" />
</div>
<span
class="font-mono text-gray-700 text-xs"
x-text="formatTime(log.timestamp)"
x-text="formatTime(log.request.timestamp)"
/>
</div>

<div class="flex gap-1.5 font-mono text-gray-1000 text-xs">
<span x-text="`${formatUrl(log.url)}`" />
<span x-text="`${formatUrl(log.request.url)}`" />
</div>
</button>
</template>
Expand Down Expand Up @@ -1497,14 +1507,6 @@ export function Styles() {
.border-t-0 { border-top-width: 0; }
.cursor-pointer { cursor: pointer; }
.display-block { display: block; }
.divide-y > * + * {
border-top-width: 1px;
border-bottom-width: 0px;
}
.divide-y-reverse > * + * {
border-top-width: 0px;
border-bottom-width: 1px;
}
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
Expand Down Expand Up @@ -1610,20 +1612,18 @@ export function Styles() {
width: 1px;
}
.md\\:divide-y-0 > * + * {
border-top-width: 0px;
.divide-y > *:not(template) + *:not(template) {
border-top-width: 1px;
border-bottom-width: 0px;
}
@media screen and (max-width: 768px) {
.md\\:divide-y-0 > * + * {
border-top-width: inherit;
}
}
.divide-x > * + * {
.divide-x > *:not(template) + *:not(template) {
border-right-width: 0;
border-left-width: 1px;
}
.hover\\:bg-gray-200 {
&:hover { background-color: var(--gray-200) !important; }
}
`
// biome-ignore lint/security/noDangerouslySetInnerHtml:
return <style dangerouslySetInnerHTML={{ __html: styles }} />
Expand Down
34 changes: 34 additions & 0 deletions src/dev/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,3 +185,37 @@ export const fileTextIcon = (
/>
</svg>
)

export const checkCircledIcon = (
<svg
aria-hidden="true"
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
</svg>
)

export const crossCircledIcon = (
<svg
aria-hidden="true"
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
</svg>
)
8 changes: 4 additions & 4 deletions src/dev/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function routes<
baseUrl,
contextHtml,
frame,
log: {
request: {
type: 'initial',
method: 'get',
metrics: {
Expand Down Expand Up @@ -117,7 +117,7 @@ export function routes<
baseUrl,
contextHtml,
frame,
log: {
request: {
type: 'initial',
method: 'get',
metrics: {
Expand Down Expand Up @@ -170,7 +170,7 @@ export function routes<
baseUrl,
contextHtml,
frame,
log: {
request: {
type: 'response',
body: {
...json,
Expand Down Expand Up @@ -230,7 +230,7 @@ export function routes<
},
timestamp: Date.now(),
url: postUrl,
} satisfies PreviewProps['log'])
} satisfies PreviewProps['request'])
},
)
}

0 comments on commit 845829c

Please sign in to comment.