Skip to content

Commit e451e10

Browse files
serhalpserhalp
committed
chore: reformat with eslint-stylistic
1 parent 8972326 commit e451e10

14 files changed

+482
-452
lines changed

‎app/app.vue

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
11
<script setup lang="ts">
22
interface Run {
3-
url: string;
4-
status: number;
5-
cacheHeaders: Record<string, string>;
6-
durationInMs: number;
3+
url: string
4+
status: number
5+
cacheHeaders: Record<string, string>
6+
durationInMs: number
77
}
88
9-
const runs = ref<Run[]>([]);
10-
const error = ref<string | null>(null);
9+
const runs = ref<Run[]>([])
10+
const error = ref<string | null>(null)
1111
1212
const handleRequestFormSubmit = async ({
1313
url,
1414
}: {
15-
url: string;
15+
url: string
1616
}): Promise<void> => {
1717
try {
1818
// Destructuring would be confusing, since the response body contains fields named `status` and
1919
// `headers` (it's a request about a request...)
2020
const responseBody = await $fetch(
2121
`/api/inspect-url/${encodeURIComponent(url)}`,
22-
);
22+
)
2323
2424
runs.value.push({
2525
url,
2626
status: responseBody.status,
2727
cacheHeaders: getCacheHeaders(responseBody.headers),
2828
durationInMs: responseBody.durationInMs,
29-
});
30-
31-
error.value = null;
32-
// TODO(serhalp) nuxt doesn't appear to re-export the `FetchError` types from ofetch. Look into this.
33-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
34-
} catch (err: any) {
35-
error.value =
36-
err?.data?.message ??
37-
err?.toString?.() ??
38-
new Error(`Fetch error: ${err}`);
39-
return;
29+
})
30+
31+
error.value = null
32+
}
33+
catch (
34+
// TODO(serhalp) nuxt doesn't appear to re-export the `FetchError` types from ofetch. Look into this.
35+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
36+
err: any
37+
) {
38+
error.value
39+
= err?.data?.message
40+
?? err?.toString?.()
41+
?? new Error(`Fetch error: ${err}`)
42+
return
4043
}
41-
};
44+
}
4245
4346
const handleClickClear = (): void => {
44-
runs.value = [];
45-
};
47+
runs.value = []
48+
}
4649
</script>
4750

4851
<template>
@@ -59,17 +62,29 @@ const handleClickClear = (): void => {
5962
<main>
6063
<RequestForm @submit="handleRequestFormSubmit" />
6164

62-
<div v-if="error" class="error">
65+
<div
66+
v-if="error"
67+
class="error"
68+
>
6369
{{ error }}
6470
</div>
6571

6672
<div class="flex-btwn run-panels">
67-
<RunPanel v-for="(run, i) in runs" v-bind="run" :key="i" />
73+
<RunPanel
74+
v-for="(run, i) in runs"
75+
v-bind="run"
76+
:key="i"
77+
/>
6878
</div>
6979
</main>
7080

7181
<div class="reset-container">
72-
<button v-if="runs.length > 0" @click="handleClickClear()">Clear</button>
82+
<button
83+
v-if="runs.length > 0"
84+
@click="handleClickClear()"
85+
>
86+
Clear
87+
</button>
7388
</div>
7489
</template>
7590

@@ -79,6 +94,7 @@ body {
7994
text-align: left;
8095
}
8196
</style>
97+
8298
<style scoped>
8399
header {
84100
text-align: center;

‎app/components/CacheAnalysis.vue

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
<script setup lang="ts">
2-
import { formatDuration, intervalToDuration } from "date-fns";
2+
import { formatDuration, intervalToDuration } from 'date-fns'
33
44
const props = defineProps<{
5-
cacheHeaders: Record<string, string>;
6-
}>();
5+
cacheHeaders: Record<string, string>
6+
}>()
77
88
const formatSeconds = (seconds: number): string => {
9-
return `${seconds} s`;
10-
};
9+
return `${seconds} s`
10+
}
1111
1212
const formatHumanSeconds = (seconds: number): string => {
13-
const d = new Date(); // arbitrary date
13+
const d = new Date() // arbitrary date
1414
return formatDuration(
1515
intervalToDuration({
1616
start: d,
1717
end: new Date(d.getTime() + Math.abs(seconds) * 1000),
1818
}),
19-
);
20-
};
19+
)
20+
}
2121
2222
const formatDate = (date: Date): string =>
2323
date.toLocaleString(undefined, {
24-
timeZoneName: "short",
25-
});
24+
timeZoneName: 'short',
25+
})
2626
27-
const now = ref(Date.now());
27+
const now = ref(Date.now())
2828
2929
const cacheAnalysis = computed(() =>
3030
getCacheAnalysis(props.cacheHeaders, now.value),
31-
);
31+
)
3232
33-
let timerId: NodeJS.Timeout | null = null;
33+
let timerId: NodeJS.Timeout | null = null
3434
3535
onMounted(() => {
3636
timerId = setInterval(() => {
37-
now.value = Date.now();
38-
}, 1000);
39-
});
37+
now.value = Date.now()
38+
}, 1000)
39+
})
4040
4141
onUnmounted(() => {
42-
if (timerId) clearInterval(timerId);
43-
});
42+
if (timerId) clearInterval(timerId)
43+
})
4444
</script>
4545

4646
<template>
@@ -65,9 +65,11 @@ onUnmounted(() => {
6565
<dd />
6666

6767
<template
68-
v-for="(
68+
v-for="(
6969
{ cacheName, parameters }, cacheIndex
70-
) in cacheAnalysis.cacheStatus" :key="cacheIndex">
70+
) in cacheAnalysis.cacheStatus"
71+
:key="cacheIndex"
72+
>
7173
<!-- This is a bit of a hack to use the pretty <dt> styling but with sections. -->
7274
<!-- I should probably just do something custom instead. -->
7375
<dt class="cache-heading">
@@ -157,23 +159,27 @@ v-for="(
157159
</template>
158160

159161
<template v-if="cacheAnalysis.cacheControl.ttl">
160-
<dt>TTL{{
161-
cacheAnalysis.cacheControl.netlifyCdnTtl ||
162-
cacheAnalysis.cacheControl.cdnTtl
162+
<dt>
163+
TTL{{
164+
cacheAnalysis.cacheControl.netlifyCdnTtl
165+
|| cacheAnalysis.cacheControl.cdnTtl
163166
? " (browser)"
164167
: ""
165-
}}</dt>
168+
}}
169+
</dt>
166170
<dd :title="formatHumanSeconds(cacheAnalysis.cacheControl.ttl)">
167171
{{ formatSeconds(cacheAnalysis.cacheControl.ttl) }}
168172
</dd>
169173
</template>
170174

171175
<template v-if="cacheAnalysis.cacheControl.cdnTtl">
172-
<dt>TTL ({{
176+
<dt>
177+
TTL ({{
173178
cacheAnalysis.cacheControl.netlifyCdnTtl
174179
? "other CDNs"
175180
: "Netlify CDN"
176-
}})</dt>
181+
}})
182+
</dt>
177183
<dd :title="formatHumanSeconds(cacheAnalysis.cacheControl.cdnTtl)">
178184
{{ formatSeconds(cacheAnalysis.cacheControl.cdnTtl) }}
179185
</dd>

‎app/components/RawCacheHeaders.vue

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
<script setup lang="ts">
22
const props = defineProps<{
3-
cacheHeaders: Record<string, string>;
4-
}>();
3+
cacheHeaders: Record<string, string>
4+
}>()
55
6-
const el = useTemplateRef("code-block");
6+
const el = useTemplateRef('code-block')
77
const highlightJson = () => {
88
if (el.value != null) {
9-
hljs.highlightElement(el.value);
9+
hljs.highlightElement(el.value)
1010
}
11-
};
12-
onMounted(highlightJson);
13-
onUpdated(highlightJson);
11+
}
12+
onMounted(highlightJson)
13+
onUpdated(highlightJson)
1414
</script>
1515

1616
<template>
1717
<pre>
18-
<code ref="code-block" class="hljs language-json">{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
18+
<code
19+
ref="code-block"
20+
class="hljs language-json"
21+
>{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
1922
</pre>
2023
</template>
2124

‎app/components/RequestForm.vue

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<script setup lang="ts">
22
const inputUrl = ref(
3-
"https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page",
4-
);
3+
'https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page',
4+
)
55
6-
const emit = defineEmits(["submit"]);
6+
const emit = defineEmits(['submit'])
77
88
const handleSubmit = () => {
9-
if (!inputUrl.value.startsWith("http")) {
10-
inputUrl.value = `https://${inputUrl.value}`;
9+
if (!inputUrl.value.startsWith('http')) {
10+
inputUrl.value = `https://${inputUrl.value}`
1111
}
1212
13-
emit("submit", { url: inputUrl.value });
14-
};
13+
emit('submit', { url: inputUrl.value })
14+
}
1515
</script>
1616

1717
<template>
1818
<div class="form">
1919
<label class="url-input">
2020
<strong>URL:</strong>
21-
<input v-model.trim="inputUrl" @keyup.enter="handleSubmit()" />
21+
<input
22+
v-model.trim="inputUrl"
23+
@keyup.enter="handleSubmit()"
24+
/>
2225
</label>
23-
<button @click="handleSubmit()">Inspect</button>
26+
<button @click="handleSubmit()">
27+
Inspect
28+
</button>
2429
</div>
2530
</template>
2631

‎app/components/RunPanel.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script setup lang="ts">
22
const props = defineProps<{
3-
url: string;
4-
status: number;
5-
durationInMs: number;
6-
cacheHeaders: Record<string, string>;
7-
}>();
3+
url: string
4+
status: number
5+
durationInMs: number
6+
cacheHeaders: Record<string, string>
7+
}>()
88
</script>
99

1010
<template>

0 commit comments

Comments
 (0)