@dwebghost/flutjsx-core NPM

Flutjsx 🔥

Welcome to flutjsx project. This project is a proof of concept of a JSX to Flutter compiler.

How to use:

Create a new react project
npm i -D @dwebghost/flutjsx-core
Transpile your JSX files to Flutter

import { JSXToFlutter } from "@dwebghost/flutjsx-core";
import { Main } from "./src/components/main"; //This is your main component

JSXToFlutter(
    {
        component: <Main></Main>,
        outputDir: "./dist/dart-code"
    }
)

This TSX code:

import Column from '@dwebghost/flutjsx-core/dist/components/Column'
import Container from '@dwebghost/flutjsx-core/dist/components/Container'
import Scaffold from '@dwebghost/flutjsx-core/dist/components/Scaffold'
import Text from '@dwebghost/flutjsx-core/dist/components/Text'
export default function MainScreen() {
    const name = "Lukebana Ndontoni"
    return (
        <Scaffold>
            <Column>
                <Container>
                    <Text>Hello {name}</Text>
                </Container>
                <Text>How are you doing today?</Text>
            </Column>
        </Scaffold>
    )
}

Will be compiled to:

import 'package:flutter/material.dart';

class FlutjsxWidget extends StatelessWidget {
  const FlutjsxWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Text("Hello Lukebana Ndontoni2"),
          ),
          Text("How are you doing today?"),
        ],
      ),
    );
  }
}