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

docs/components/GithubLinkAndSize.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+defineProps<{
+  githubLink: string
+  functionSize: string | undefined
+}>()
+</script>
+
+<template>
+  <div class="flex items-center">
+    <p
+      v-if="functionSize"
+      class="!text-xs !m-0 bg-slate-300 p-1 rounded-md shrink-0 !leading-4"
+    >
+      <span class="pr-1">size </span>
+      <span class="font-bold">{{ functionSize }}</span>
+    </p>
+    <a
+      :href="githubLink"
+      class="p-1 bg-slate-300 ml-3 rounded-md"
+      target="_blank"
+    >
+      <IconGitHub class="opacity-70" />
+    </a>
+  </div>
+</template>

docs/components/IconGitHub.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      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"
+      fill="#000000"
+    />
+  </svg>
+</template>

docs/components/content/Data.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import sizes from "../../assets/func-sizes.json"
 import type { FunctionRef, ObjectRef } from "../../src/types"
+
 const fns: Record<
   string,
   {
@@ -266,7 +268,14 @@ const fns: Record<
       data that is commonly needed to build applications.
     </p>
     <div v-for="(def, fn) in fns">
-      <h3 :id="def?.name">{{ fn }}</h3>
+      <div class="flex items-center justify-between mb-3">
+        <h3 :id="def?.name" class="!m-0">{{ fn }}</h3>
+        <GithubLinkAndSize
+          :githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
+          :functionSize="sizes[fn]?.esm?.formattedSize"
+        />
+      </div>
+
       <FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
       <p v-html="def.description" />
       <CodeExample v-if="def.example" :file="def.example" />

docs/components/content/Format.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { format } from "@formkit/tempo"
+import sizes from "../../assets/func-sizes.json"
 </script>
 
 <template>
   <PageSection>
-    <HeadingSection title="Format" class="text-sky-500" />
+    <div class="flex items-center justify-between mb-8">
+      <HeadingSection title="Format" class="text-sky-500 !mb-0" />
+      <GithubLinkAndSize
+        githubLink="https://github.com/formkit/tempo/blob/main/src/format.ts"
+        :functionSize="sizes.format.esm.formattedSize"
+      />
+    </div>
+
     <FunctionReference function="format" :arguments="[
       {
         name: 'date',

docs/components/content/Helpers.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import sizes from "../../assets/func-sizes.json"
 import type { FunctionRef } from "../../src/types"
+
 const fns: Record<
   string,
   {
@@ -145,7 +147,14 @@ const fns: Record<
       8601 string or a Date object and return a <em>boolean</em>.
     </p>
     <div v-for="(def, fn) in fns">
-      <h3 :id="fn">{{ fn }}</h3>
+      <div class="flex items-center justify-between mb-3">
+        <h3 :id="fn" class="!m-0">{{ fn }}</h3>
+        <GithubLinkAndSize
+          :githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
+          :functionSize="sizes[fn]?.esm?.formattedSize"
+        />
+      </div>
+
       <FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
       <p v-html="def.description" />
       <CodeExample v-if="def.example" :file="def.example" />

docs/components/content/Modify.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import sizes from "../../assets/func-sizes.json"
 import type { FunctionRef } from "../../src/types"
+
 const fns: Record<
   string,
   {
@@ -348,8 +350,19 @@ const fns: Record<
       do not change the date argument).
     </p>
     <div v-for="(def, fn) in fns">
-      <h3 :id="def?.name">{{ fn }}</h3>
-      <FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
+      <div class="flex items-center justify-between mb-3">
+        <h3 :id="def?.name" class="!m-0">{{ fn }}</h3>
+        <GithubLinkAndSize
+          :githubLink="'https://github.com/formkit/tempo/blob/main/src/' + fn + '.ts'"
+          :functionSize="sizes[fn]?.esm?.formattedSize"
+        />
+      </div>
+
+      <FunctionReference
+        :function="fn"
+        :arguments="def.arguments"
+        :return="def.return"
+      />
       <p v-html="def.description" />
       <CodeExample v-if="def.example" :file="def.example" />
       <CalloutInfo v-if="def.tip">

docs/components/content/Parse.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import sizes from "../../assets/func-sizes.json"
+
 const parseOptionsProperties = [
   { name: "date", type: "string", jsdoc: [`A string representing a date.`] },
   {
@@ -40,7 +42,14 @@ const parseOptionsProperties = [
 
 <template>
   <PageSection>
-    <HeadingSection title="Parse" class="text-sky-500" />
+    <div class="flex items-center justify-between mb-8">
+      <HeadingSection title="Parse" class="text-sky-500 !mb-0" />
+      <GithubLinkAndSize
+        githubLink="https://github.com/formkit/tempo/blob/main/src/parse.ts"
+        :functionSize="sizes.parse.esm.formattedSize"
+      />
+    </div>
+
     <FunctionReference function="parse" :arguments="[
       {
         name: 'date',

package.json

@@ -20,6 +20,7 @@
   "scripts": {
     "dev": "cd ./docs && pnpm nuxt dev",
     "build": "tsup",
+    "post:build": "node scripts/size-limit/index.js",
     "test": "TZ=\"America/New_York\" vitest",
     "docs-build": "cd ./docs && pnpm run build",
     "publint": "publint",

scripts/size-limit/index.js

@@ -0,0 +1,92 @@
+import path from "path"
+import fs from "fs"
+import sizeLimit from "size-limit"
+import filePlugin from "@size-limit/file"
+import esbuildPlugin from "@size-limit/esbuild"
+import bytes from "bytes-iec"
+
+import * as funcs from "../../dist/index.cjs"
+
+const OUTPUT_FILE = "docs/assets/func-sizes.json"
+
+const formatBytes = (size) => {
+  return bytes.format(size, { unitSeparator: " " })
+}
+
+const getConfigFromIndexFile = (pathToIndexFile, functionNames) => {
+  return functionNames
+    .map((name) => {
+      if (name === "default") {
+        return
+      }
+
+      return {
+        path: pathToIndexFile,
+        import: { [pathToIndexFile]: `{ ${name} }` },
+        name,
+        files: [pathToIndexFile],
+      }
+    })
+    .filter(Boolean)
+}
+
+const baseDir = process.cwd()
+const esmPath = path.resolve(baseDir, "./dist/index.mjs")
+const cjsPath = path.resolve(baseDir, "./dist/index.cjs")
+
+const functionNames = Object.keys(funcs)
+
+const esmFiles = getConfigFromIndexFile(esmPath, functionNames)
+const cjsFiles = getConfigFromIndexFile(cjsPath, functionNames)
+
+const allImports = [
+  {
+    path: esmPath,
+    limit: "5.1 kb",
+    import: { [esmPath]: "*" },
+    name: "all esm",
+    files: [esmPath],
+    sizeLimit: 5100,
+  },
+  {
+    path: cjsPath,
+    limit: "5.4 kb",
+    import: { [cjsPath]: "*" },
+    name: "all cjs",
+    files: [cjsPath],
+    sizeLimit: 5400,
+  },
+]
+
+const allFiles = [...esmFiles, ...cjsFiles, ...allImports]
+
+const getFuncSizes = async () => {
+  const result = await sizeLimit([filePlugin, esbuildPlugin], {
+    cwd: process.cwd(),
+    configPath: ".size-limit.cjs",
+    checks: allFiles,
+  })
+
+  const funcs = {}
+
+  result.forEach((funcSize, index) => {
+    const funcItem = allFiles[index]
+    const { size } = funcSize
+    const { name, path } = funcItem
+
+    const importType = path === esmPath ? "esm" : "cjs"
+
+    if (!funcs[name]) funcs[name] = {}
+
+    funcs[name][importType] = { size, formattedSize: formatBytes(size) }
+
+    console.log("\n  " + name, importType, size, formatBytes(size))
+  })
+
+  return funcs
+}
+
+getFuncSizes().then((sizes) => {
+  const pathToSave = path.resolve(baseDir, OUTPUT_FILE)
+  fs.writeFileSync(pathToSave, JSON.stringify(sizes, null, 2))
+})

src/index.ts

@@ -42,4 +42,6 @@ export { yearEnd } from "./yearEnd"
 export { isBefore } from "./isBefore"
 export { isAfter } from "./isAfter"
 export { isEqual } from "./isEqual"
+export { yearEnd } from "./yearEnd"
+export { yearStart } from "./yearStart"
 export * from "./types"