Egh NPM | npm.io

USAGE

npm i egh -S

reg resources

// resourceReg.tsx

import {regResource} from 'egh'

import * as modules from '../modules'  
import * as comps from '../compontents'



export default regResource({modules, comps});

rule api design

//api.ts
export const getRuleApi = () => {
    // mock data
    return Promise.resolve({id:'default',Module: 'Module', Comp: 'Comp'})
}

export const getAsyncRuleApi = (params) => {
    // mock data
    return Promise.resolve({id:'default',Module: params.opt == 'A'?'ModuleA':'ModuleB', Comp: 'Comp', ...params})
}

reg rule

// garyResource.tsx

import './resourceReg'
import {getRuleApi, getAsyncRuleApi} from '@/apis'


import {proxyGray, regRule, regAsyncRule, regParseRule} from 'egh'

regRule(getRuleApi)

regAsyncRule(getAsyncRuleApi)

regParseRule((chooseFlag, rule) => {
  return rule[chooseFlag]
})



export default proxyGray

Demo

记得在外层包 Suspense

import React, { useState } from 'react';
import grayResource from '../lib/grayResource'


const Demo = (props) => {

  const { Module } = grayResource.read();

  return (
    <div>
      {Array.from (new Array(10)).map((_, i) => (
        <Module key={i} var="foo" />
      ))}
    </div>
  );
}

Demo with Select

import React, {useState, useEffect} from 'react'
import {boardcast} from 'egh'
import {List,Radio} from 'antd-mobile'

const data = [
    { value: 'A', label: 'testA' },
    { value: 'B', label: 'testB' },
  ];

export default () => {
    const [val, setVal] = useState(0);
    useEffect(() => {
        boardcast.setProvider('opt',val)
    }, [val])

    const onChange = (v) => {
        setVal(v)
    }
    return (
        <List>
            {data.map(i => (
                <Radio.RadioItem key={i.value} checked={val == i.value}  onChange={_=>onChange(i.value)}>
                    {i.label}
                </Radio.RadioItem>
            ))}
        </List>
    )
}

import React, { useState } from 'react';
import grayResource from '../lib/grayResource'


const Demo = (props) => {

  const { Module } = grayResource.read({on: 'opt', dep: Demo});
  // const { Module } = grayResource.read({on: ['opt','opt2'], dep:Demo});
  // const { Module } = grayResource.readAsync({on: 'opt', dep:Demo});

  return (
    <div>
      {Array.from (new Array(10)).map((_, i) => (
        <Module key={i} var="foo" />
      ))}
    </div>
  );
}