@frukmruk/html

1. Quick start

This lib is aiming to build parser that transforms our custom format into JSX. It tries to fix a few issues we generally have with JSX, especially when used with TailwindCSS. Namely, readability becomes an issue

But if we use pythonic indent-style nesting and multiline classes, it becomes much more managable. You can also have your predefined ordering of which utility classes you group together, for example you start with mobile, in the next row you use md: etc.

# src/App.js file in your React app

import React from "react";

import { fruktal } from "@frukmruk/html";

const App = () => {
  return (
    <>
      {fruktal`


        div#
        :class flex flex-row flex-wrap
        :class w-screen h-screen


          div#optional-id
          :class w-20 h-20
            
            Jello mello 1


          div#
          :class w-20 h-20
                
            span#
              Jello mello 2


      `}
    </>
  );
}

export default App;

1.1. Additional utility classes we append to tailwind

We were always confused with justfy-items align-content stuff, so we made more intuitive classes which dictate how is content behaving along either row or col, regardless of flex-direction.

.col-center
.row-center

.col-start
.row-start

.col-end
.row-end

.col-evenly
.row-evenly

2. More complex example with tailwind

Let's show case a more complex example with assuming that tailwind is configured.

This is the usual boilerplate on top of the file, which also includes example custom component

<TextBox text="Some text">

that we also want to be able to use.

import { fruktal, register } from "@frukmruk/html";


//  set --debug var to 1 to show debug borders
import "./App.css";


const TextBox = (props) => {
  return <div class="w-full h-10">{props.text}</div>;
};
TextBox.displayName = "TextBox";


// fruk component registrations
register(TextBox);

Below is the layout we want to achieve (the top-most one component is <TextBox />).

Here is the @frukmruk/html code that accomplishes to produce it.

const App = () => {
  return (
    <>
      {fruktal`


        div#
        :class flex flex-row flex-wrap
        :class col-evenly row-end
        :class w-screen h-screen
        :class px-5
        

          TextBox#my-id-if-needed
          :text Jello from inside component


          div#
          :class w-full
            Jello from inside child

        

          div#
          :class flex flex-row row-evenly
          :class w-full
          :class py-2

            div#
            :class w-20 h-20
              Hey #2

            div#
            :class w-20 h-20
              Hey #3

        

          div#
          :class w-20 h-20
            Hey #4
        


          div#
          :class w-20 h-20
            Hey #5
        
          

          <!-- Use separators using '=' or '-' symbols -->
          <!-- Set any length that suits us -->
          <!-- Also newlines as convenient -->
          ================================================
        
          div#
          :class flex flex-row row-evenly
          :class w-full
          :class py-2

            div#
            :class w-20 h-20
              Hey #6

            div#
            :class w-20 h-20
              Hey #7
          
          ================================================


      `}
    </>
  );
};

export default App;