❤
npm
Sign UpSign In

reactfy

0.1.1 • Public • Published

Coverage Status Build Status Standard - JavaScript Style Guide

Reactfy [STILL IN EXPERIMENTAL PHASE]

Reactfy

No more painfull React's setup

Summary

Why Reactfy?

You've probably already lost hours configuring Webpack by adding / removing babel plugins for each feature you want to control in a simple project. Reactfy promises to meet all the basic needs of a React application by simply installing.

Reactfy commits to deliver from the project bundle to the SSR layer. In addition to bringing SSR support for Electron. Everything is ready, with the promise of working from ES5 to the present.

Already behind ecosystem support for flow, object-rest-spread, class-properties ...

Getting

npm install -D reactfy

Examples

Pure React

React with Flow and Apollo

Usage

Bundling

Not available yet, working in progress.

SSR usage

greeting.js
import React from 'react'
 
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}
 
export default Greeting
apply it
const reactfy = require('reactfy')
console.log(reactfy({path: './greeting.js', resolve: 'string'}))
output
<h1 data-reactroot="" data-reactid="1" data-react-checksum="1601575969"><!-- react-text: 2 -->Hello, <!-- /react-text --></h1>

Parsing to ReactElement

const reactfy = require('reactfy')
console.log(reactfy({path: './greeting.js', resolve: 'react'}))
/*
{ '$$typeof': Symbol(react.element),
  type: [Function: Dialog],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {} }
*/

Resolving as Node Module

const reactfy = require('reactfy')
console.log(reactfy({path: './greeting.js', resolve: 'module'}))
/*
 
*/

Electron Usage

main.js

const reactfy = require('reactfy')
const template = require('./template')
 
function createWindow() {
  let mainWindow = new BrowserWindow(config)
 
  mainWindow.loadURL(reactfy({
    path: 'src/App.js',
    template: template
  }))
 
  mainWindow.on('closed', function() {
    mainWindow = null
  })
 
  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  })
}

template.js

module.exports = (app) => {
  return `<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"/>
      <title>My Template</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="root">${app}</div>
      <script async src="bundle.js"></script>
    </body>
  </html>`

Can I use it for develop beyond Electron apps?

I strongly recommend: NO.

Why? Reactfy reads any code and parse/transpile it in runtime. It cost a lot, just imagine for every process, you will read/parse/transpile/tokenize/write.

How it works?

  1. Read and transpile main component filepath, generating a node module
  2. Every require in this node module is replaced by smart require (which transpile the source in runtime before nodejs parse start)
  3. Parse'n deliver this module and repeat this it for every import/require missing.
  4. Create a dynamic HTML file based on render result
  5. When nodejs dispatch exit, SIGINT or uncaughtException event: delete _.html

Who's using:

If you're using, let me know :)

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.1
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.1
    0
  • 0.1.0
    0

Package Sidebar

Install

npm i reactfy

Weekly Downloads

0

Version

0.1.1

License

MIT

Last publish

Collaborators

  • raphamorim
Try on RunKit
Report malware