Skip to content

Commit e54e7d2

Browse files
authored
docs: displaying function sizes (#36)
* docs: function sizes * save sizes to file * display function size * reset prettier formatting * use small size * import sizes from json * added sizes to Data component * added sizes to Helpers component * added sizes to Format and Parse components * added script to generate file with sizes * fix root directory * added variable for output file
1 parent 546e640 commit e54e7d2

File tree

11 files changed

+644
-6
lines changed

11 files changed

+644
-6
lines changed

docs/assets/func-sizes.json

+454
Large diffs are not rendered by default.

docs/components/GithubLinkAndSize.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
githubLink: string
4+
functionSize: string | undefined
5+
}>()
6+
</script>
7+
8+
<template>
9+
<div class="flex items-center">
10+
<p
11+
v-if="functionSize"
12+
class="!text-xs !m-0 bg-slate-300 p-1 rounded-md shrink-0 !leading-4"
13+
>
14+
<span class="pr-1">size </span>
15+
<span class="font-bold">{{ functionSize }}</span>
16+
</p>
17+
<a
18+
:href="githubLink"
19+
class="p-1 bg-slate-300 ml-3 rounded-md"
20+
target="_blank"
21+
>
22+
<IconGitHub class="opacity-70" />
23+
</a>
24+
</div>
25+
</template>

docs/components/IconGitHub.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 15 15"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
fill-rule="evenodd"
11+
clip-rule="evenodd"
12+
d="M7.49936 0.850006C3.82767 0.850006 0.849976 3.8273 0.849976 7.50023C0.849976 10.4379 2.75523 12.9306 5.39775 13.8104C5.73047 13.8712 5.85171 13.6658 5.85171 13.4895C5.85171 13.3315 5.846 12.9135 5.84273 12.3587C3.99301 12.7604 3.60273 11.4671 3.60273 11.4671C3.30022 10.6988 2.86423 10.4942 2.86423 10.4942C2.26044 10.0819 2.90995 10.0901 2.90995 10.0901C3.57742 10.137 3.9285 10.7755 3.9285 10.7755C4.52167 11.7916 5.48512 11.4981 5.86396 11.3279C5.92438 10.8984 6.09625 10.6053 6.28608 10.4391C4.80948 10.2709 3.25695 9.70063 3.25695 7.15241C3.25695 6.42615 3.51618 5.83298 3.94157 5.368C3.87299 5.1998 3.64478 4.52375 4.00689 3.60807C4.00689 3.60807 4.56494 3.42926 5.83538 4.28941C6.36568 4.14204 6.93477 4.06856 7.50018 4.0657C8.06518 4.06856 8.63386 4.14204 9.16498 4.28941C10.4346 3.42926 10.9918 3.60807 10.9918 3.60807C11.3548 4.52375 11.1266 5.1998 11.0584 5.368C11.4846 5.83298 11.7418 6.42615 11.7418 7.15241C11.7418 9.70716 10.1868 10.2693 8.70571 10.4338C8.94412 10.6392 9.15681 11.045 9.15681 11.6655C9.15681 12.5542 9.14865 13.2715 9.14865 13.4895C9.14865 13.6675 9.26867 13.8745 9.60588 13.8095C12.2464 12.9282 14.15 10.4375 14.15 7.50023C14.15 3.8273 11.1723 0.850006 7.49936 0.850006Z"
13+
fill="#000000"
14+
/>
15+
</svg>
16+
</template>

docs/components/content/Data.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts" setup>
2+
import sizes from "../../assets/func-sizes.json"
23
import type { FunctionRef, ObjectRef } from "../../src/types"
4+
35
const fns: Record<
46
string,
57
{
@@ -266,7 +268,14 @@ const fns: Record<
266268
data that is commonly needed to build applications.
267269
</p>
268270
<div v-for="(def, fn) in fns">
269-
<h3 :id="def?.name">{{ fn }}</h3>
271+
<div class="flex items-center justify-between mb-3">
272+
<h3 :id="def?.name" class="!m-0">{{ fn }}</h3>
273+
<GithubLinkAndSize
274+
:githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
275+
:functionSize="sizes[fn]?.esm?.formattedSize"
276+
/>
277+
</div>
278+
270279
<FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
271280
<p v-html="def.description" />
272281
<CodeExample v-if="def.example" :file="def.example" />

docs/components/content/Format.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<script setup lang="ts">
22
import { format } from "@formkit/tempo"
3+
import sizes from "../../assets/func-sizes.json"
34
</script>
45

56
<template>
67
<PageSection>
7-
<HeadingSection title="Format" class="text-sky-500" />
8+
<div class="flex items-center justify-between mb-8">
9+
<HeadingSection title="Format" class="text-sky-500 !mb-0" />
10+
<GithubLinkAndSize
11+
githubLink="https://github.com/formkit/tempo/blob/main/src/format.ts"
12+
:functionSize="sizes.format.esm.formattedSize"
13+
/>
14+
</div>
15+
816
<FunctionReference function="format" :arguments="[
917
{
1018
name: 'date',

docs/components/content/Helpers.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts" setup>
2+
import sizes from "../../assets/func-sizes.json"
23
import type { FunctionRef } from "../../src/types"
4+
35
const fns: Record<
46
string,
57
{
@@ -145,7 +147,14 @@ const fns: Record<
145147
8601 string or a Date object and return a <em>boolean</em>.
146148
</p>
147149
<div v-for="(def, fn) in fns">
148-
<h3 :id="fn">{{ fn }}</h3>
150+
<div class="flex items-center justify-between mb-3">
151+
<h3 :id="fn" class="!m-0">{{ fn }}</h3>
152+
<GithubLinkAndSize
153+
:githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
154+
:functionSize="sizes[fn]?.esm?.formattedSize"
155+
/>
156+
</div>
157+
149158
<FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
150159
<p v-html="def.description" />
151160
<CodeExample v-if="def.example" :file="def.example" />

docs/components/content/Modify.vue

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts" setup>
2+
import sizes from "../../assets/func-sizes.json"
23
import type { FunctionRef } from "../../src/types"
4+
35
const fns: Record<
46
string,
57
{
@@ -348,8 +350,19 @@ const fns: Record<
348350
do not change the date argument).
349351
</p>
350352
<div v-for="(def, fn) in fns">
351-
<h3 :id="def?.name">{{ fn }}</h3>
352-
<FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
353+
<div class="flex items-center justify-between mb-3">
354+
<h3 :id="def?.name" class="!m-0">{{ fn }}</h3>
355+
<GithubLinkAndSize
356+
:githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
357+
:functionSize="sizes[fn]?.esm?.formattedSize"
358+
/>
359+
</div>
360+
361+
<FunctionReference
362+
:function="fn"
363+
:arguments="def.arguments"
364+
:return="def.return"
365+
/>
353366
<p v-html="def.description" />
354367
<CodeExample v-if="def.example" :file="def.example" />
355368
<CalloutInfo v-if="def.tip">

docs/components/content/Parse.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import sizes from "../../assets/func-sizes.json"
3+
24
const parseOptionsProperties = [
35
{ name: "date", type: "string", jsdoc: [`A string representing a date.`] },
46
{
@@ -40,7 +42,14 @@ const parseOptionsProperties = [
4042

4143
<template>
4244
<PageSection>
43-
<HeadingSection title="Parse" class="text-sky-500" />
45+
<div class="flex items-center justify-between mb-8">
46+
<HeadingSection title="Parse" class="text-sky-500 !mb-0" />
47+
<GithubLinkAndSize
48+
githubLink="https://github.com/formkit/tempo/blob/main/src/parse.ts"
49+
:functionSize="sizes.parse.esm.formattedSize"
50+
/>
51+
</div>
52+
4453
<FunctionReference function="parse" :arguments="[
4554
{
4655
name: 'date',

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"scripts": {
2121
"dev": "cd ./docs && pnpm nuxt dev",
2222
"build": "tsup",
23+
"post:build": "node scripts/size-limit/index.js",
2324
"test": "TZ=\"America/New_York\" vitest",
2425
"docs-build": "cd ./docs && pnpm run build",
2526
"publint": "publint",

scripts/size-limit/index.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import path from "path"
2+
import fs from "fs"
3+
import sizeLimit from "size-limit"
4+
import filePlugin from "@size-limit/file"
5+
import esbuildPlugin from "@size-limit/esbuild"
6+
import bytes from "bytes-iec"
7+
8+
import * as funcs from "../../dist/index.cjs"
9+
10+
const OUTPUT_FILE = "docs/assets/func-sizes.json"
11+
12+
const formatBytes = (size) => {
13+
return bytes.format(size, { unitSeparator: " " })
14+
}
15+
16+
const getConfigFromIndexFile = (pathToIndexFile, functionNames) => {
17+
return functionNames
18+
.map((name) => {
19+
if (name === "default") {
20+
return
21+
}
22+
23+
return {
24+
path: pathToIndexFile,
25+
import: { [pathToIndexFile]: `{ ${name} }` },
26+
name,
27+
files: [pathToIndexFile],
28+
}
29+
})
30+
.filter(Boolean)
31+
}
32+
33+
const baseDir = process.cwd()
34+
const esmPath = path.resolve(baseDir, "./dist/index.mjs")
35+
const cjsPath = path.resolve(baseDir, "./dist/index.cjs")
36+
37+
const functionNames = Object.keys(funcs)
38+
39+
const esmFiles = getConfigFromIndexFile(esmPath, functionNames)
40+
const cjsFiles = getConfigFromIndexFile(cjsPath, functionNames)
41+
42+
const allImports = [
43+
{
44+
path: esmPath,
45+
limit: "5.1 kb",
46+
import: { [esmPath]: "*" },
47+
name: "all esm",
48+
files: [esmPath],
49+
sizeLimit: 5100,
50+
},
51+
{
52+
path: cjsPath,
53+
limit: "5.4 kb",
54+
import: { [cjsPath]: "*" },
55+
name: "all cjs",
56+
files: [cjsPath],
57+
sizeLimit: 5400,
58+
},
59+
]
60+
61+
const allFiles = [...esmFiles, ...cjsFiles, ...allImports]
62+
63+
const getFuncSizes = async () => {
64+
const result = await sizeLimit([filePlugin, esbuildPlugin], {
65+
cwd: process.cwd(),
66+
configPath: ".size-limit.cjs",
67+
checks: allFiles,
68+
})
69+
70+
const funcs = {}
71+
72+
result.forEach((funcSize, index) => {
73+
const funcItem = allFiles[index]
74+
const { size } = funcSize
75+
const { name, path } = funcItem
76+
77+
const importType = path === esmPath ? "esm" : "cjs"
78+
79+
if (!funcs[name]) funcs[name] = {}
80+
81+
funcs[name][importType] = { size, formattedSize: formatBytes(size) }
82+
83+
console.log("\n " + name, importType, size, formatBytes(size))
84+
})
85+
86+
return funcs
87+
}
88+
89+
getFuncSizes().then((sizes) => {
90+
const pathToSave = path.resolve(baseDir, OUTPUT_FILE)
91+
fs.writeFileSync(pathToSave, JSON.stringify(sizes, null, 2))
92+
})

src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,6 @@ export { yearEnd } from "./yearEnd"
4242
export { isBefore } from "./isBefore"
4343
export { isAfter } from "./isAfter"
4444
export { isEqual } from "./isEqual"
45+
export { yearEnd } from "./yearEnd"
46+
export { yearStart } from "./yearStart"
4547
export * from "./types"

0 commit comments

Comments
 (0)