Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Overview

free-from-jsx.macro

A babel macro that transforms flutter render like syntax to jsx, allowing you to write react components almost without JSX:

Note: this is a proof of concept, and is not meant to be used in production. For that reason I'm not currently planing into publishing this in npm.

What it does?

Transforms this:

import ffj from 'free-from-jsx.macro'

const MyComponent = () => ffj(
  View({
    children: [
      Text({ children: ['Hello World'] }),
    ],
  })
);

Into this:

const MyComponent = () => (
  <View
    children={[
      <Text>Hello World</Text>
    ]}
  />
);

Plans

  • We could consider compiling directly to createReactElement calls:

All tooling may be better working with JSX... for example, preserving JSX allows plugin-transform-react-constant-elements to keep working properly

  • Implement a way to transform DOM elements:

Currently, the plugin treats all the lowercase started CallExpressions as only function calls, and therefore things like div() span() etc. are not transformed.

Current problems

DOM elements

Like said above, DOM elements seems to be treated differently in JSX, so currently it's not possible to use them (unless you rename them with PascalCase)... its ambiguous whether they are functions or components:

MyComponent({
  children: [
    // In the future we will assume some reserved keywords 
    // to be DOM elements and threat them differently
    div({ children: ["Hello World"] }),

    // Not started with upper case letter, we assume it as a function call
    myCall({ children: ["Hello World"] }),

    // Started with upper case letter, we assume it as a component
    MyOtherComp()
  ]
})

Class components and ts

Typescript will not be happy with "calling a class", so if a component is declared as class for TS, it will not type check, unfortunately.

You can hack ts though:

> = React.FC > // usage of this is typed and accepted const View = RNView as unknown as HackCtoFC ;">
import React from "react";
import { View as RNView } from 'react-native';


type HackCtoFC<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
  React.FC<React.ComponentProps<T>>

// usage of this is typed and accepted
const View = RNView as unknown as HackCtoFC<typeof RNView>;

Note: This is too hacky in my opinion. Not sure if I would recommend this approach.

Keys

I don't know why, but using children as prop instead of implicit makes react complain about requiring keys.

<Component
  children={[
    // react complains about elements not having keys...
    <div>Hello World</div>,
    <div>Hello World</div>,
  ]}
/>

Motivations

I personally don't like JSX (XML stuff in general), and having worked with flutter previously I miss how good is to compose components in it, while we can do the same composition with JSX, it's just unreadable to have nested trees of components with JSX that uses child slots other than children:

const MyComponent = () => {
  return (
    <Foo
      title={
        <Wrap
          text={<ContextText>Hello World</ContextText>}
        />
      }
      content={[
        <SectionStyleProvider style={styles.section}>
          <RedBox
            topContent={
              <Wrap
                text={<ContextText>Hello World</ContextText>}
              />
            }
          />
          <BlueBox
            bottomContent={
              <Wrap
                text={<ContextText>Hello World</ContextText>}
              />
            }
          />
        </SectionStyleProvider>,
      ]}
    />
  );
};

Some references and maybe inspirations:

You might also like...
React Server Component for syntax highlighting

React Server Component for syntax highlighting

A minimal skeleton for building testable React apps using Babel

Essential React A minimal skeleton for building testable React apps using Babel. Design Goals Getting Started Commands server build test coveralls cle

demo with react,ant-design,redux,react-router,webpack,babel
demo with react,ant-design,redux,react-router,webpack,babel

star-initReact-example A demo with star-initReact-example ##效果截图 首页 列表页 弹框 表格组件 echart 使用技术和实现功能 webpack + React +React-router + React-redux +ES6 + an

A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone https://github.com/jovey-zheng/react-start-kit.git Install dependenices: $ npm i Start the project: $ npm

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Starting project with react from scratch using webpack and babel
Starting project with react from scratch using webpack and babel

React Part 2 Meliuz Iniciando projeto com react do zero usando webpack e babel. O que é? (Onde vivem? O que comem?) webpack (com “w” minúsculo, respei

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Babel React Koa Hot Universal Boilerplate

Babel React Koa - Hot Universal Boilerplate Breko Hub Breko hub is a github repository that helps anyone create new JavaScript applications. Giving yo

A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Owner
Gabriel Rohden
Android, react-native and flutter dev. Interested in FP languages and their concepts
Gabriel Rohden
React-jsx-classnames - React JSX runtime for adding a classNames or clsx prop

@tpdewolf/react-jsx-classnames JSX runtime for adding a classNames or clsx prop.

Tim de Wolf 2 Jan 15, 2022
Just want to try react, vite and twin.macro

React + Vite + twin.macro Getting Started Clone this repository git clone https://github.com/hendraaagil/react-vite-twin-macro.git Go to project direc

Hendra Agil Syaputra 17 Aug 27, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Preact 495 Sep 28, 2022
CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

Malakhov Mikhail 4 May 24, 2022
reactive like `hankey` implementation of JSX for browser

deuce-x reactive like ?? implementation of JSX for browser. this is opinion on how JSX should be implemented inspired by: curiosity about crank-js and

Alexander Betaev 2 Jan 18, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 20 Oct 24, 2021
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

?? little-vdom Forked from developit's little-vdom gist. npm: npm i @luwes/little-vdom cdn: unpkg.com/@luwes/little-vdom 650B Virtual DOM Components S

wesley luyten 85 Sep 16, 2022
A developer blog starter for 2021 (Next.js + React + TypeScript + Markdown + syntax highlighting)

Devii A developer blog starter for 2020. Next.js React TypeScript Markdown syntax highlighting SEO RSS generation if you're happy and you know it, sta

Colin McDonnell 453 Sep 27, 2022