Porting Boring Avatars using Mitosis

About Me

Senior Frontend Engineer at Fairwinds

cmgriffing on most platforms:

What did one cell say to his sister cell when she stepped on his toe?

Mitosis!

Boring Avatars (original)

More fun than a generic user icon

  • Procedurally-generated
  • SVG (use at any size)
  • React-only

https://boringavatars.com/

Styles

Similar Libraries

  • Avataars: https://www.npmjs.com/package/avataaars
  • Gravatar: https://en.gravatar.com/
  • Dicebear: https://dicebear.com/

Other Frameworks

List of Other Libraries

Why was the amoeba sad?

His parents just split.

React Native

One Big Issue

Why?

react-native-svg (also used by Expo’s wrapper)

const SIZE = 36;
/// ...
    <Svg
      viewBox={'0 0 ' + SIZE + ' ' + SIZE}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      width={props.size}
      height={props.size}
    >
<Rect
  x={20 + data.eyeSpread}

Why? (Visual)

The Fix

const { name, colors, size } = props;
  // ...
    <Svg
      viewBox={'0 0 ' + size + ' ' + size}
      fill="none"
      width={size}
      height={size}
    >
const scaleNumber = createScaleNumber(36, size);
const EYE_RIGHT_X = scaleNumber(20);
// ...
    <Rect
      x={EYE_RIGHT_X + eyeSpread}

My Fork

https://github.com/cmgriffing/react-native-boring-avatars

Mitosis

Made by builder.io

  • Builder.io: A Drag and Drop Visual CMS
  • They ship SDKs for various frameworks

Who should use it?

Three main categories:

  • Design Systems Maintainers
  • Teams using multiple web frameworks
  • Teams building web SDKs

Context

  • Experimental or unsupported in some Targets

Web Components?

  • No Context specific support

  • Not a great DX. attaching to global registry, etc

  • Stencil is really close

Why do biologists like to travel?

It makes them more cultured.

Even More Boring

Component Example

Quirks

  • utils must be in separate file
  • generators use string building under the hood
  • barebones output

Boilerplates

  • Vite config or other
  • folder structure
  • package.json templating and dependencies, etc.

“mitosis compile”

  • Per file
  • No knowledge of greater project (imports, etc.)

enum Target {
  Angular = "angular",
// ...
Object.values(Target).forEach((target) => {
  // ...
  mitosisFiles.forEach((filePrefix) => {
    // ...
    const execCommand = `pnpm mitosis compile -t=${target} --out=${outPath} ${inputFile} --force`;

Plugins

{
  // ...
  pre: (code: string) => {
    let newCode = code;

    newCode = newCode.replace(
      new RegExp(`(import \\S+ from ".\\/avatars\\/avatar-\\S+)";`, "gm"),
      `$1.component";`
    );

I’m Not Alone

https://www.youtube.com/watch?v=07UW3REM6k8

Mitosis bugs and fixes

It’s a big surface area.

Common issues I ran into:

  • SVG (feFlood, stroke-width vs strokeWidth)

Why did the scuba diver fail biology?

He was below “C” level.

A Moment About Plugins

What they do

  • json: modify parsed json structure
  • code: modify string output before or after prettier

Lifecycle

  • mitosis parser into json
  • plugins: json.pre
  • plugins: json.post
  • target generator (react/vue/etc) (a string builder)
  • plugins: code.pre (string)
  • prettier: if enabled for target
  • plugins: code.post (string)

Even More Boringer

“mitosis build”

Fixed several Naming and File pathing issues

  • Still need boilerplates

Demo sites

  • Simplest starters for a static site because of GH-pages
  • Clone of boringavatars.com

Components for the Demo site

Sounds like a job for Mitosis!

Result

https://cmgriffing.github.io/boringer-avatars/

NPM

Figma

ProductHunt

Reddit Post

Reddit Recap

Why are there so few Biology jokes about the eye?

Because they keep getting cornea and cornea.

Wrapping Up

Thanks