# @symph/joy

> The React Framework

Latest version **2.0.0-canary.6** (published 2022-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @symph/joy
pnpm add @symph/joy
yarn add @symph/joy
bun add @symph/joy
```

Provides the command `joy`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-canary.6 |
| Published | 2022-04-01 |
| First published | 2018-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 138 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lnlfps |

## Links

- npm: https://www.npmjs.com/package/@symph/joy
- Repository: https://github.com/lnlfps/symph-joy/packages/joy
- Homepage: https://lnlfps.github.io/symph-joy
- Issues: https://github.com/lnlfps/symph-joy/issues
- npm.io page: https://npm.io/package/@symph/joy

## Dependencies (138)

- [arg](https://npm.io/package/arg.md) 4.1.0
- [del](https://npm.io/package/del.md) 6.0.0
- [ora](https://npm.io/package/ora.md) 4.0.4
- [conf](https://npm.io/package/conf.md) 5.0.0
- [etag](https://npm.io/package/etag.md) 1.8.1
- [send](https://npm.io/package/send.md) 0.17.1
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [fresh](https://npm.io/package/fresh.md) 0.5.2
- [json5](https://npm.io/package/json5.md) 2.1.3
- [yargs](https://npm.io/package/yargs.md) ^17.1.0
- [buffer](https://npm.io/package/buffer.md) 5.6.0
- [cookie](https://npm.io/package/cookie.md) 0.4.1
- [dotenv](https://npm.io/package/dotenv.md) 8.2.0
- [is-wsl](https://npm.io/package/is-wsl.md) 2.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [merge2](https://npm.io/package/merge2.md) ^1.4.1
- [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4
- [nanoid](https://npm.io/package/nanoid.md) ^3.1.30
- [recast](https://npm.io/package/recast.md) 0.18.5
- [semver](https://npm.io/package/semver.md) 7.3.2
- [terser](https://npm.io/package/terser.md) 5.1.0
- [cacache](https://npm.io/package/cacache.md) ^15.2.0
- [devalue](https://npm.io/package/devalue.md) 2.0.1
- [find-up](https://npm.io/package/find-up.md) 4.1.0
- [postcss](https://npm.io/package/postcss.md) ^8.3.11
- [process](https://npm.io/package/process.md) 0.11.10
- [resolve](https://npm.io/package/resolve.md) 1.11.0
- [tapable](https://npm.io/package/tapable.md) 1.1.3
- [unfetch](https://npm.io/package/unfetch.md) 4.1.0
- [webpack](https://npm.io/package/webpack.md) 5.64.4
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0
- [get-port](https://npm.io/package/get-port.md) ^5.0.0
- [raw-body](https://npm.io/package/raw-body.md) 2.4.1
- [react-is](https://npm.io/package/react-is.md) 16.13.1
- [unistore](https://npm.io/package/unistore.md) ^3.5.2
- [ast-types](https://npm.io/package/ast-types.md) 0.13.2
- [gzip-size](https://npm.io/package/gzip-size.md) 5.1.1
- [is-docker](https://npm.io/package/is-docker.md) 2.0.0
- [lru-cache](https://npm.io/package/lru-cache.md) 5.1.1
- [neo-async](https://npm.io/package/neo-async.md) ^2.6.2
- [watchpack](https://npm.io/package/watchpack.md) ^2.2.0
- [async-sema](https://npm.io/package/async-sema.md) 3.0.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.5.0
- [handlebars](https://npm.io/package/handlebars.md) ^4.7.7
- [http-proxy](https://npm.io/package/http-proxy.md) 1.18.0
- [image-size](https://npm.io/package/image-size.md) ^1.0.1
- [native-url](https://npm.io/package/native-url.md) 0.3.4
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.7
- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [source-map](https://npm.io/package/source-map.md) 0.6.1
- [strip-ansi](https://npm.io/package/strip-ansi.md) 6.0.0
- [styled-jsx](https://npm.io/package/styled-jsx.md) 3.3.0
- [text-table](https://npm.io/package/text-table.md) 0.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.6.2
- [web-vitals](https://npm.io/package/web-vitals.md) 0.2.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.13.10
- [@symph/core](https://npm.io/package/@symph/core.md) 2.0.0-canary.6
- [async-retry](https://npm.io/package/async-retry.md) ^1.3.3
- [compression](https://npm.io/package/compression.md) 1.7.4
- [file-loader](https://npm.io/package/file-loader.md) 6.0.0
- [is-animated](https://npm.io/package/is-animated.md) ^2.0.2
- [less-loader](https://npm.io/package/less-loader.md) ^10.2.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^12.3.0
- [string-hash](https://npm.io/package/string-hash.md) 1.1.3
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.13.0
- [@hapi/accept](https://npm.io/package/@hapi/accept.md) ^5.0.2
- [@squoosh/lib](https://npm.io/package/@squoosh/lib.md) ^0.4.0
- [@symph/react](https://npm.io/package/@symph/react.md) 2.0.0-canary.6
- [@tsed/schema](https://npm.io/package/@tsed/schema.md) ^6.62.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2
- [browserslist](https://npm.io/package/browserslist.md) ^4.16.3
- [cache-loader](https://npm.io/package/cache-loader.md) 4.1.0
- [caniuse-lite](https://npm.io/package/caniuse-lite.md) ^1.0.30001113
- [comment-json](https://npm.io/package/comment-json.md) 3.0.2
- [content-type](https://npm.io/package/content-type.md) 1.0.4
- [jsonwebtoken](https://npm.io/package/jsonwebtoken.md) 8.5.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [lodash.curry](https://npm.io/package/lodash.curry.md) 4.1.1
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^4.0.2
- [schema-utils](https://npm.io/package/schema-utils.md) 2.6.6
- [style-loader](https://npm.io/package/style-loader.md) 1.2.1
- [@symph/server](https://npm.io/package/@symph/server.md) 2.0.0-canary.6
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 5.1.0
- [ignore-loader](https://npm.io/package/ignore-loader.md) 0.1.2
- [react-refresh](https://npm.io/package/react-refresh.md) 0.9.0
- [thread-loader](https://npm.io/package/thread-loader.md) 2.1.3
- [vm-browserify](https://npm.io/package/vm-browserify.md) 1.1.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10
- [cssnano-simple](https://npm.io/package/cssnano-simple.md) 1.2.0
- [find-cache-dir](https://npm.io/package/find-cache-dir.md) 3.3.1
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) 6.2.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.2.0
- [get-orientation](https://npm.io/package/get-orientation.md) ^1.1.2
- [path-browserify](https://npm.io/package/path-browserify.md) 1.0.1
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^3.2.2
- [finally-polyfill](https://npm.io/package/finally-polyfill.md) 0.2.0
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^1.2.19
- [use-subscription](https://npm.io/package/use-subscription.md) 1.4.1
- [@babel/code-frame](https://npm.io/package/@babel/code-frame.md) ^7.12.13
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.13.10
- [amphtml-validator](https://npm.io/package/amphtml-validator.md) 1.0.31
- [crypto-browserify](https://npm.io/package/crypto-browserify.md) 3.12.0
- [source-map-loader](https://npm.io/package/source-map-loader.md) ^3.0.0
- [stream-browserify](https://npm.io/package/stream-browserify.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) ^1.7.0
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^6.7.0
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) 3.1.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.12.13
- [content-disposition](https://npm.io/package/content-disposition.md) ^0.5.4
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) 2.0.0
- [@babel/preset-modules](https://npm.io/package/@babel/preset-modules.md) ^0.1.4
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.2.5
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^5.0.2
- [@next/polyfill-nomodule](https://npm.io/package/@next/polyfill-nomodule.md) ^12.0.8
- [@next/react-dev-overlay](https://npm.io/package/@next/react-dev-overlay.md) 10.1.3
- [babel-plugin-syntax-jsx](https://npm.io/package/babel-plugin-syntax-jsx.md) ^6.18.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.4.3
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.5.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.16.0
- [@next/react-refresh-utils](https://npm.io/package/@next/react-refresh-utils.md) 10.1.3
- [@babel/plugin-syntax-bigint](https://npm.io/package/@babel/plugin-syntax-bigint.md) ^7.8.3
- [speed-measure-webpack-plugin](https://npm.io/package/speed-measure-webpack-plugin.md) ^1.5.0
- [@ampproject/toolbox-optimizer](https://npm.io/package/@ampproject/toolbox-optimizer.md) 2.6.0
- [babel-plugin-transform-define](https://npm.io/package/babel-plugin-transform-define.md) ^2.0.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.13.10
- [babel-plugin-dynamic-import-node](https://npm.io/package/babel-plugin-dynamic-import-node.md) 2.3.3
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.16.7
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.13.0
- [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) ^7.12.13
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.13.8
- [@babel/plugin-transform-modules-commonjs](https://npm.io/package/@babel/plugin-transform-modules-commonjs.md) ^7.13.8
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.13.8
- [babel-plugin-transform-typescript-metadata](https://npm.io/package/babel-plugin-transform-typescript-metadata.md) ^0.3.2
- [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.12.13
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) ^0.4.24
- [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.13.8

## Recent versions

- 2.0.0-canary.6 (latest) — 2022-04-01
- 2.0.0-canary.5 — 2022-02-16
- 2.0.0-canary.4 — 2022-01-20
- 2.0.0-canary.3 — 2022-01-20
- 2.0.0-canary.2 — 2022-01-20
- 1.3.1 — 2020-12-17
- 1.3.0 — 2020-12-16
- 1.2.7 — 2019-09-23
- 1.2.6 — 2019-09-23
- 1.2.5 — 2019-09-21
- 1.2.4 — 2019-09-20
- 1.2.3 — 2019-09-17
- 1.2.2 — 2019-09-17
- 1.2.1 — 2019-06-12
- 1.2.0 — 2019-04-05
- … 51 more at https://npm.io/package/@symph/joy/versions

## README

# [@symph/joy](https://lnlfps.github.io/symph-joy)

## 介绍

官网：[https://lnlfps.github.io/symph-joy](https://lnlfps.github.io/symph-joy)

@symph/joy 让我们轻松的进行前端应用开发，零配置可用，简单清晰的业务和数据管理模块，已集成大量最佳实践的优化方案，即使你才刚接触 React，也可以轻松创建高可用、可维护的前端应用。

> 该项目已在生产环境大量使用，如有任何疑问、使用帮助、bug 反馈、特性讨论，请和我们联系(邮件：lnlfps@gmail.com; QQ 群：929743297)，或者到 github 创建 issue，欢迎加入。

## 特征

- 零配置可用，优化的默认配置，快速开发，已集成 react、redux、react-router4 和 ES6、7 语法支持等
- 支持服务端渲染，在业务组件内部获取渲染数据，组件内聚更高，便于维护
- MVC 架构，模块化设计，简化 redux 的学习和使用
- 依赖自动注入，专注组件内部实现，依赖关系更明确，方便调用
- 支持`@`装饰器将普通 Class 申明为 Controller 或 Model 等，不侵入业务代码
- 支持 react hook 模式开发函数式组件，轻松链接 Model 管理业务流程
- 全局支持 async 语法，复杂的业务逻辑也能轻松找到解决方案
- 支持静态版本导出，脱离 Node.js 运行，也可单独导出静态页面
- 内置网络请求代理服务，解决跨域和服务中转问题，前后端分离开发畅通无阻
- 支持插件化配置，便于功能扩展

## 安装和开始

运行`npm init`创建一个空工程，并填写项目的基本信息，当然也可以在一个已有的项目中直接安装。

```bash
npm install --save  @symph/joy react react-dom
```

> @symph/joy 只支持 [React 16](https://reactjs.org/blog/2017/09/26/react-v16.0.html)及以上版本

添加 NPM 脚本到 package.json 文件：

```json
{
  "scripts": {
    "dev": "joy dev"
  }
}
```

然后就可以开始正式工作了，下面从`hello world`示例开始，首先编写一个 Model 组件来管理应用的数据和业务。

```javascript
// /src/models/HelloModel.js

import model from "@symph/joy/model";

@model() // 标明这是一个Model。
export default class HelloModel {
  namespace = "hello";

  // model的初始状态数据
  initState = {
    message: "Welcome to @symph/joy!",
  };

  // async业务方法，从服务端异步获取新的欢迎消息
  async fetchMessage() {
    let newMsg = await fetch("/hello_message");
    //更新model的状态，界面的状态也会自动更新
    this.setState({
      message: newMsg,
    });
  }
}
```

接下来编写界面，展示欢迎消息。`@symph/joy`默认使用`/src/index.js`文件作为应用的启动入口组件，可以在这里初始化基础功能模块和设置子页面路由等。

```javascript
// /src/index.js
import React, { Component } from "react";
import { controller, Inject } from "@symph/joy/controller";
import HelloModel from "./models/HelloModel";

@controller((store) => {
  // 标明这是一个Controller
  return {
    message: store.hello.message, // 绑定model中的数据
  };
})
export default class ThirdHelloController extends Component {
  @Inject() // 声明依赖的Model
  helloModel: HelloModel;

  async componentDidMount() {
    await this.helloModel.fetchMessage(); //调用model
  }

  render() {
    return <div>${this.props.message}</div>;
  }
}
```

最后运行`npm run dev`命令，在浏览器中输入访问地址`http://localhost:3000`，即可看到刚才写的页面。如果需要使用其它端口来启动应用 `npm run dev -- -p <your port here>`

到目前为止，一个简单完整的前端应用已经创建完成，可以开始工作了。还有很多神奇的特性，请查看 [详细使用指南](https://lnlfps.github.io/symph-joy/#/getting-started)

## 文档

[https://lnlfps.github.io/symph-joy](https://lnlfps.github.io/symph-joy)

快速连接：

- [使用指南](https://lnlfps.github.io/symph-joy/#/getting-started)
- [配置文档](https://lnlfps.github.io/symph-joy/#/configurations)
- [插件列表](https://lnlfps.github.io/symph-joy/#/plugins)
- [升级日志](https://lnlfps.github.io/symph-joy/#/change-log)

## 联系我们

邮件：lnlfps@gmail.com
QQ 群：929743297

---
_Source: https://npm.io/package/@symph/joy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._