search

formkit / tempo

📆 Parse, format, manipulate, and internationalize dates and times in JavaScript and TypeScript.
https://tempo.formkit.com
MIT License
2.37k stars 33 forks source link

docs: displaying function sizes #36

Closed aleksandrjet closed 8 months ago

aleksandrjet commented 8 months ago

After discussing https://github.com/formkit/tempo/pull/28 I prepared mr showing the function sizes in documentation. @justin-schroeder talked about table with sizes at the end of docs, but I think it would be helpful for users to see the sizes right next to the description. Also I think a github link for each function would be useful.

I made a few variants with different sizes:

Icon size - 24px, font-size - 14px (sm), padding - 8px lead6_p2

Icon size - 24px, font-size - 14px (sm), padding - 4px lead6_p1

Icon size - 16px, font-size - 12px (xs), padding - 4px lead4_p1

Usage of sizes from the file is not ready yet, I'm still waiting for comments on the design

What do you think? Should I choose one of the variants or should I still make a table?

vercel[bot] commented 8 months ago

@aleksandrjet is attempting to deploy a commit to the Formkit Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 8 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tempo-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 7, 2024 2:25pm
justin-schroeder commented 8 months ago

Awesome! I like the smaller ones @aleksandrjet — and if we need to tweak them we can. I way prefer the small ones over the table. When you get it to a good place where you are wanting me to merge I can do that. If we need to do any further polishing we can. Great work!

aleksandrjet commented 8 months ago

I added the npm run post:build script to create a docs/assets/func-sizes.json file with function sizes. This file is then used in each top-level component (Parse, Helpers, etc.). I did not find info about deployment, but I think that this script should be added to CI.

Also you need to pay attention to displaying sizes of format and parse functions, because their style is different from the other functions. Perhaps these styles should be changed example_big_header-min example_small_header-min

p.s. The yearEnd and yearStart functions were not exported and I added re-export to index.ts

p.p.s. I see that there is no link to Helpers in the table of contents, although this is a large section, perhaps it should be added

justin-schroeder commented 8 months ago

Awesome! great work @aleksandrjet. Ive merged this and iterated a bit more on the styles.

One thought I had on this all — there is an initial size in brotli and gzip which is included in each of those. if you sum the total of all the functions its way more than the total size of the package because each contains quite a bit of compression information. addDays for example, is 524Bytes on the page, but its incremental size is tiny. I dont know exactly how we could make that more clear on the site though