README_EN.md

Gyron

Gyron is a simple zero-dependency responsive framework . Core code size: 。

It also has a very good performance performance, details of which can be found in js-framework-benchmark

• Readme
  • 中文
  • Official Website

Quick Start

We provide plugins for various build platforms to parse and optimize Gyron code. For a quick start, you can use the @gyron/cli scaffolding. Below is a TODO application written in Gyron.

import { useValue, createGyron, FC } from 'gyron'

export const APP = FC(() => {
  const list = useValue<number[]>([])
  function add() {
    list.value.push(Date.now())
  }
  function remove(item: number) {
    const index = list.value.findIndex((value) => value === item)
    list.value.splice(index, 1)
  }
  return (
    <>
      <ul>
        {list.value.map((item) => (
          <li>
            {item} <button onClick={() => remove(item)}>-</button>
          </li>
        ))}
      </ul>
      <button onClick={add} class="add">
        +
      </button>
    </>
  )
})

createGyron(<APP />).render('#app')

Feature

Gyron has done all the expected features, you can refer to http://gyron.970819.xyz/ to see all the feature descriptions.

If you want to see how these features differ from other frameworks in the community you can open Issues to communicate and learn together, or clone the code and see the corresponding module.

TSC Command

The easiest way to use it is to add the following configuration to tsconfig.json and then add import { reactCreateElement as h } from '@gyron/jsx-runtime' to each file.

{
  "compilerOptions": {
    "jsxFactory": "h"
  }
}

Or just add /** @jsx h */ to the file.

/** @jsx h */
import { h } from '@gyron/jsx-runtime'

const App = () => {
  return <div>Hello World</div>
}

Use builder

• vite
• webpack
• rollup
• parcel

The current template is based on vite, you can read jsx this document when adapting to other platforms, which has updated detailed tutorials.

Core

The "core" refers to the peripheral ecology that may be used in front-end projects, and the ones listed below are maintained by the author himself.

Among them router and redux are also runtime code to solve complex projects when the project's routing and state manager. dom-client and dom-server correspond to the client-side rendering interface and the server-side rendering interface, respectively.

Name	Version	Description
babel-plugin-jsx		Convert jsx syntax into a runnable expression that generates hot update helper code in the development environment
cli		Scaffolding for customizable projects
dom-client		Docking browser document tools, customizable to access applications that support the ecma standard
dom-server		Docking server-side node tools for server-side rendering
redux		Global state manager
jsx-runtime		Support for runtimes with jsx syntax, such as babel's transform-react-jsx plugin
reactivity		Responsive Core
router		route manager
runtime		renderer and application entry
shared		public utility functions
sync		Sync third-party data tool functions to make third-party data responsive

CLI

# global install CLI
npm install @gyron/cli -g
# Create project
gyron create <instance-name>
# Enter the project
cd <instance-name>
# Install dependencies
npm install
# Run
npm run start

Additional Notes

This note is presented in this document as an additional note on top of the MIT base.

The following are additional notes.

Any case anyone in the company without the author's authorization is not allowed to release or push as a KPI project, to protect the legitimate rights of open source projects.

SSR

Improve the documentation please read SSR

Update the record

For details, see [CHANGELOG.md](. /CHANGELOG.md)

Test

Please clone the project and run yarn, and then yarn test.

To learn more, see https://gyron.970819.xyz/.

Appreciation

If the project is helpful to you, you can star or scan the QR code below on WeChat