@eficy/core

v2.0.0

Published

5 months ago

A modern React component system with signals reactivity for B-end applications.

Downloads

0High
0Medium
0Low

xiaobe

Eficy

Eficy is a no-compilation JSX rendering engine for React components. As LLMs become increasingly capable at generating HTML web pages, Eficy bridges the gap by providing a way to render React components without compilation barriers. Originally built as a low-code rendering engine, Eficy now fully supports JSX rendering in non-compilation environments, enabling LLMs to generate precise, concise pages with just one sentence.

English | 简体中文

🎯 Why Eficy?

While LLMs excel at generating HTML web pages, React ecosystem components still face compilation barriers that prevent direct rendering in pure HTML environments. Eficy solves this by providing:

Signal-based reactive system - Reducing anti-intuitive React features like Hooks, minimizing complexity and debugging costs
No compilation required - Directly transpile and run content within <script type="text/eficy"> tags in browser environments
Protocol rendering - Register React components in environment variables and use e-Button for consistent rendering, reducing LLM variability

✨ Key Features

🔄 Signal-based Reactive System

Intuitive State Management: Eliminates the need for complex React Hooks
Automatic Dependency Tracking: Signals used in JSX are automatically tracked
Fine-grained Updates: Only components using changed signals re-render
Async Data Support: Built-in async signals with automatic loading/error handling

🚀 No-compilation Rendering

Direct Browser Execution: Run JSX directly in browser environments
Script Tag Support: Use <script type="text/eficy"> for inline JSX
Real-time Transpilation: Instantly convert JSX to executable JavaScript

🧩 Protocol-based Component Rendering

Prefix-based Components: Use e-Button syntax for registered components
Global Component Registry: Register components once, use everywhere
Consistent LLM Output: Reduce variability in LLM-generated components

🎨 UnoCSS Integration

Atomic CSS Generation: Automatically generate styles from className attributes
Real-time Style Processing: Extract and generate CSS during rendering
Smart Caching: Avoid regenerating identical styles

📦 Seamless React Integration

Full React Compatibility: Work with existing React component libraries
Custom JSX Runtime: Transparent integration with signals
TypeScript Support: Complete type safety

📦 Installation

npm install eficy
# or
yarn add eficy
# or
pnpm add eficy

🚀 Quick Start

Browser Usage (No Compilation)

<!DOCTYPE html>
<html>
<head>
  <title>Eficy Demo</title>
  <script type="module" src="https://unpkg.com/@eficy/[email protected]/dist/standalone.mjs"></script>
</head>
<body>
  <div id="root"></div>
  
  <script type="text/eficy">
    import { signal } from 'eficy';
    import * as antd from 'antd';
    
    // Register components
    Eficy.registerComponents(antd);
    
    const App = () => {
      const count = signal(0);
      const name = signal('World');
      
      return (
        <div className="p-6 bg-gray-100 min-h-screen">
          <h1 className="text-2xl font-bold mb-4">Hello, {name}!</h1>
          <p className="mb-4">Count: {count}</p>
          
          <input 
            className="border p-2 mr-2"
            value={name}
            onChange={(e) => name.set(e.target.value)}
            placeholder="Enter your name"
          />
          
          <e-Button 
            type="primary" 
            onClick={() => count.set(count() + 1)}
          >
            Increment
          </e-Button>
        </div>
      );
    };
    
    Eficy.render(App, document.getElementById('root'));
  </script>
</body>
</html>

Node.js Usage

import React from 'react';
import { createRoot } from 'react-dom/client';
import { create, EficyProvider } from 'eficy';
import { signal } from '@eficy/reactive';
import * as antd from 'antd';

// Create Eficy instance
const core = await create();

// Register components
core.registerComponents(antd);

const App = () => {
  const count = signal(0);
  const name = signal('Eficy');
  
  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <h1 className="text-2xl font-bold mb-4">Hello, {name}!</h1>
      <p className="mb-4">Count: {count}</p>
      
      <input 
        className="border p-2 mr-2"
        value={name}
        onChange={(e) => name.set(e.target.value)}
        placeholder="Enter your name"
      />
      
      <e-Button 
        type="primary" 
        onClick={() => count.set(count() + 1)}
      >
        Increment
      </e-Button>
    </div>
  );
};

// Render application
const root = createRoot(document.getElementById('root'));
root.render(
  <EficyProvider core={core}>
    <App />
  </EficyProvider>
);

🧠 Core Concepts

Signals for State Management

import { signal, computed } from 'eficy';

// Create signals for state
const count = signal(0);
const name = signal('World');

// Create computed values
const greeting = computed(() => `Hello, ${name()}!`);

// Use in JSX (automatic subscription)
const App = () => (
  <div>
    <h1>{greeting}</h1>
    <p>Count: {count}</p>
    <button onClick={() => count.set(count() + 1)}>
      Increment
    </button>
  </div>
);

Async Data Handling

import { asyncSignal } from 'eficy';

const userList = asyncSignal(async () => {
  const response = await fetch('/api/users');
  return response.json();
});

const UserList = () => (
  <div>
    {userList.loading() && <div>Loading...</div>}
    {userList.error() && <div>Error: {userList.error().message}</div>}
    {userList.data() && (
      <ul>
        {userList.data().map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    )}
  </div>
);

Protocol-based Components

// Register components globally
core.registerComponents({
  Button: ({ children, ...props }) => (
    <button className="px-4 py-2 bg-blue-500 text-white rounded" {...props}>
      {children}
    </button>
  )
});

// Use with e- prefix
const App = () => (
  <div>
    <e-Button onClick={() => console.log('Clicked!')}>
      Click me
    </e-Button>
  </div>
);

📦 Included Modules

The Eficy package includes the following core modules:

Core Framework

@eficy/core-jsx - Third-generation core engine based on custom JSX runtime
@eficy/reactive - High-performance reactive state management system
@eficy/reactive-react - React reactive integration
@eficy/reactive-async - Async reactive support

Built-in Plugins

@eficy/plugin-unocss - UnoCSS atomic CSS auto-generation plugin

Special Packages

@eficy/browser - Browser-ready bundle for no-compilation usage

🖥 Environment Support

Modern browsers
Node.js environments
Server-side Rendering
Electron

| IE / Edge | Firefox | Chrome | Safari | Electron | |---|---|---|---|---| | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

📚 Related Documentation

Core Framework Documentation - Detailed documentation for @eficy/core-jsx
Reactive System Documentation - Detailed documentation for @eficy/reactive
React Reactive Integration Documentation - Detailed documentation for @eficy/reactive-react
Async Reactive Documentation - Detailed documentation for @eficy/reactive-async
UnoCSS Plugin Documentation - Detailed documentation for @eficy/plugin-unocss
Browser Package Documentation - Documentation for browser usage
Playground Examples - Complete application examples

🔗 API Reference

Core API

create() - Create a pre-configured Eficy instance
EficyProvider - Component that provides Eficy context
useEficyContext() - Hook to get Eficy instance

Reactive API

signal(value) - Create reactive signal
computed(fn) - Create computed property
asyncSignal(fn, options) - Create async signal
useObserver(fn) - React Hook to observe signal changes

Plugin API

core.install(Plugin, config) - Install plugin
core.registerComponent(name, component) - Register single component
core.registerComponents(components) - Batch register components

🤝 Contributing

We welcome issues and pull requests!

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add some amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgements

Thanks for the inspiration and support from the following open-source projects:

React - User interface library
Preact Signals - Reactive system foundation
@preact/signals-react - React reactive integration
UnoCSS - Atomic CSS engine
TSyringe - Dependency injection container
Ant Design - Enterprise UI design language