display-primitives v0.0.10

Display Primitives

Tasks To Do:

• Build new design that uses grid and an image, too. Start with Mobile.
• Add examples for Next and Gatsby
• Finish this readme
• Add Social Preview in Github settings

Tasks I Might Do:

• Consider <flex.row> and <flex.col>
• Make importable <Flex> components with derived $- props
  • Auto-import or grobally available in tsconfig?
• SWC plugin? https://swc.rs/docs/usage/plugins

What is this?

The browser gives us <div/> for display: block; and <span/> for display: inline;, but what about the other display values like flex and grid? This babel transform adds these missing tags/elements.e

NOTE: could also show before and after screenshots of code editor with red underlines for <flex> and such.

Before

  <div /> // display: block;
  <span /> // display: inline;
  <table /> // display: table;

  // ❌ These don't exist (notice the red squiglies)
  <flex /> // display: flex;
  <grid /> // display: grid;

After

  <div /> // display: block;
  <span /> // display: inline;
  <table /> // display: table;

  // ✅ But we can make up their existence with a Babel Transform :smile: (notice absence of red squiglies)
  <flex /> // display: flex;
  <grid /> // display: grid;

Also added for convenience: row and column. See The Case for Row and Col for more.

For convenience, we've also added <block> and <inline>, even though div and span already exist.

Getting Started

Install...

API

Limitations

$ prop is used at compile time, so it can not be a variable. I.e. you can't have a wrapper component that passes in $={props.as}.

Questions/Answers

Why Babel? Why not just make components like <Flex>?

1. runtime perf (I assume)
2. no import needed
3. editor treats it (and colors it) like a normal html tag, which I like.
   1. I also like that the lowercase name (e.g. <flex>) denotes it as a leaf node in the render tree (not a compound component)