Skip to content

Latest commit

 

History

History
335 lines (260 loc) · 11.3 KB

README.md

File metadata and controls

335 lines (260 loc) · 11.3 KB

Eficy

Using TypeScript MIT License NPM downloads

Eficy is a zero‑build JSX runtime for React. It renders JSX directly in the browser using existing React components without bundlers or compilation. Register React components once and use them as protocol elements (e.g., e-Button). Built‑in signals make state simple. Great for LLM‑generated pages.

English | 简体中文

⚡ Quick Page Generation (LLM + shadcn/ui prompts)

If you want to quickly generate pages with Eficy, you can use the prompt set provided in llm_shadcn.txt.

  • What it includes: best-practice prompts for Eficy + shadcn/ui, component protocol with e- prefix, ready-to-use HTML template, and common examples
  • How to use:
    1. Open the prompts in llm_shadcn.txt
    2. In an LLM client that supports HTML preview (e.g., Cherry Studio), ask it to generate a page using Eficy + shadcn/ui with these prompts
    3. Preview the result directly in the chat window — no manual copy-paste into HTML is required
  • Related: Browser usage guide

llm_shadcn.txt

🎯 Why Eficy?

Eficy helps you:

  1. Run JSX with no build — use <script type="text/eficy"> in a plain HTML page
  2. Protocol components — register React components and use them as e-Button, ensuring consistent LLM output
  3. Simple reactive state — signals with fine‑grained updates
  4. Optional UnoCSS plugin — generate atomic CSS from className

✨ 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/browser@1.0.19/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
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

📚 Related Documentation

🔗 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!

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit changes (git commit -m 'Add some amazing feature')
  4. Push to branch (git push origin feature/amazing-feature)
  5. 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:

Enabling LLMs to truly generate pages with one sentence