@siyu/sdm2

GitHub：https://github.com/JstLkSiyu/sdm2

Npm：https://www.npmjs.com/package/@siyu/sdm2

一个提供React数据双向绑定（伪）功能以及globalStore功能的库，通过joinSdm向组件props注入$sdm变量，在组件内部直接修改$sdm属性的值，可以触发渲染更新，createGlobalSdm可以定义全局绑定数据，在$sdm值被改变时可以更新所有组件。

样例：

import React, { Component } from 'react';
import { joinSdm, createGlobalSdm, SDP } from '@siyu/sdm2';

const sdm = {
  hello: 'world'
}

const globalSdm = createGlobalSdm({
  font: {
    size: 12,
    color: 'green'
  },
  hello: 'world'
});

const FunctionComponentWithSdm = joinSdm<typeof sdm, {}>(function(props) {
  return (
    <div>
      <h1>Function Component With Local Sdm</h1>
      <p>{props.$sdm.hello}</p>
      <input value={props.$sdm.hello} onChange={($e) => props.$sdm.hello = $e.target.value} />
    </div>
  )
}, sdm);

const ClassComponentWithSdm = joinSdm(class extends Component<SDP<typeof sdm, {}>> {
  render() {
    return (
      <div>
        <h1>Class Component With Local Sdm</h1>
        <p>{this.props.$sdm.hello}</p>
        <input value={this.props.$sdm.hello} onChange={($e) => this.props.$sdm.hello = $e.target.value} />
      </div>
    )
  }
}, sdm);

const FunctionComponentWithGlobalSdm = joinSdm<typeof globalSdm, {}>(function(props) {
  let { color, size } = props.$sdm.font;
  return (
    <div>
      <h1>Function Component With Global Sdm</h1>
      <p style={{ color: color, fontSize: size + 'px' }}>{props.$sdm.hello}</p>
      <input value={props.$sdm.hello} onChange={($e) => {
        props.$sdm.hello = $e.target.value;
        props.$sdm.font = {
          size: 16,
          color: 'red'
        }
      }} />
    </div>
  )
}, globalSdm);

const ClassComponentWithGlobalSdm = joinSdm(class extends Component<SDP<typeof globalSdm, {}>> {
  render() {
    let { color, size } = this.props.$sdm.font;
    return (
      <div>
        <h1>Function Component With Global Sdm</h1>
        <p style={{ color: color, fontSize: size + 'px' }}>{this.props.$sdm.hello}</p>
        <input value={this.props.$sdm.hello} onChange={($e) => {
          this.props.$sdm.hello = $e.target.value;
          this.props.$sdm.font = {
            size: 16,
            color: 'red'
          }
        }} />
      </div>
    )
  }
}, globalSdm);

function App() {
  return (
    <div>
      <FunctionComponentWithSdm />
      <ClassComponentWithSdm />
      <FunctionComponentWithGlobalSdm />
      <ClassComponentWithGlobalSdm />
    </div>
  )
}

export default App

样例2：提供了composed global sdm功能，可以组合多个global sdm

import { createGlobalSdm, joinSdm, composeGlobalSdm } from './sdm2';
import React, { FC, useState } from 'react';

const sdm1 = createGlobalSdm({
  sdm1: 0
});

const sdm2 = createGlobalSdm({
  sdm2: 0
});

const sdm3 = createGlobalSdm({
  sdm3: 0
});

const composedSdm1 = composeGlobalSdm(sdm1, sdm2);
const composedSdm2 = composeGlobalSdm(sdm3, sdm2);

const Csdm1 = joinSdm<typeof composedSdm1, {  }>(function(props) {
  return (
    <div>
      <p>{props.$sdm.sdm1}</p>
      <p>{props.$sdm.sdm2}</p>
      <button onClick={() => props.$sdm.sdm2 ++}>change sdm2</button>
    </div>
  )
}, composedSdm1);

const Gsdm = joinSdm<typeof sdm2, {}>(function(props) {
  const [ _, renew ] = useState(false);
  console.log('renew')
  return (
    <div>
      <p>{props.$sdm.sdm2}</p>
      <button onClick={() => props.$sdm.sdm2 ++}>change sdm2</button>
      <button onClick={() => renew(_ => !_)}>renew</button>
    </div>
  )
}, sdm2);

const Csdm2 = joinSdm<typeof composedSdm2, {}>(function(props) {
  return (
    <div>
      <p>{props.$sdm.sdm2}</p>
      <button onClick={() => props.$sdm.sdm2 ++}>dd</button>
    </div>
  )
}, composedSdm2);

export const Main: FC<any> = function(props) {
  return (
    <div>
      <h1>sdm1 and sdm2</h1>
      <Csdm1 />
      <h1>sdm2 and sdm3</h1>
      <Csdm2 />
      <h1>only sdm2</h1>
      <Gsdm />
    </div>
  )
}

1.0.7新增：支持composeGlobalSdm接受多个global sdm参数