npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cbd-wujie-components/ab-test

v1.0.5-beta.0

Published

```shell npm install --save @cbd-wujie-components/ab-test ```

Downloads

28

Readme

@cbd-wujie-components/ab-test

安装

npm install --save @cbd-wujie-components/ab-test
yarn install --save @cbd-wujie-components/ab-test
pnpm install @cbd-wujie-components/ab-test

使用

import React from 'react'
import { ABTest, type ABTestConfig } from 'cbd-wujie-components'
const App = () => {
  const configAdd = {
    env: 'DEV',
    type: 'add',
    maId: 'maId',
    startTime: '2023-04-27T07:32:39.000+00:00',
    endTime: '2023-07-27T07:32:39.000+00:00',
    ComponentId: 'ComponentIds',
    maName: 'maName2',
    close: (res: ABTestRes) => {
      console.log(res)
    },
  } as ABTestConfig
  
  return (
    <div>
      <ABTest config={configAdd} />
    </div>
  )
}
export default App

组件 props

export interface ABTestProps {
  config: ABTestConfig
  hooks?: {
    beforeLoad?: () => void
    beforeMount?: () => void
    afterMount?: () => void
    beforeUnmount?: () => void
    afterUnmount?: () => void
  }
}

| 名称 | 说明 | 必填说明 | |----------|---------------------|------| | config | ab-test 的配置参数 | 必填 | | hooks | wujie子应用载入的 hooks| 可选 |

export interface ABTestConfig {
  authId: string | number
  env: 'DEV' | 'PROD'
  type: 'add' | 'edit'
  
  startTime: string // e.g. 2023-04-27T07:32:39.000+00:00
  endTime: string // e.g. 2023-07-27T07:32:39.000+00:00
  ComponentId: string | number
  maId: string | number
  maName: string
  
  expId: string | number
  close: (res: ABTestRes) => void
}

| 名称 | 说明 | 必填说明 | |-------------|-------------------------------|------| | env | 环境配置,决定请求 ab-test 的地址是开发还是生产 | 必填 | | type | 操作类型,分别对应使用场景为创建实验、编辑实验 | 必填 | | startTime | 活动开始时间 | 必填 | | endTime | 活动结束时间 | 必填 | | ComponentId | 当前组件ID | 必填 | | maId | 画布id | 必填 | | maName | 画布名称 | 必填 | | expId | 实验id, 实验编辑时必填!! | 可选 | | close | ab-test 关闭时的回调方法,根据场景出参 | 必填 |

props config 中的 close 方法返回值

export interface ABTestRes {
  status: 'complete' | 'interrupt'
  type: 'add' | 'edit'
  data: {
    // 版本信息数据
    versions: Array<{
      // 版本名称
      name: string
      // 版本分流权重
      weight: number
      // 版本描述
      desc: string
      // 版本id
      id: string
      // 分流白名单
      whitelist: string
    }>
    // 实验信息数据
    experiment: {
      // 实验名称
      name: string
      // 实验分流权重
      weight: number
      // 实验描述
      desc: string
      // 实验 key
      key: string
    }
    // 版本信息数据
    maId: string | number
  } | null
}

| 名称 | 说明 | |---------|-----------------------------| | status | 表示流程是否被中断 | | type | 操作类型 | | data | 点选人群后返回的数据,包含画布id和分流实验、版本数据 |

  • 在新建时点击保存按钮按钮 ABTestRes 的返回值
  • 实验创建和编辑的保存皆为伪保存,需要在画布调用Api abTestSave 来保存

const res = {
  status: "complete",
  data: {
    maId: "maId",
    versions: [
      {
        name: "对照版本",
        weight: 1,
        desc: "",
        id: "9185023865946"
      },
      {
        name: "实验版本",
        weight: 99,
        desc: "",
        id: "2655946237622"
      }
    ],
    experiment: {
      name: "maName2-maId-ComponentId4",
      weight: 10,
      desc: "maName2-maId-ComponentId4自动生成的实验",
      key: "14251453774656"
    }
  },
  type: add
}
  • 在創建时,點擊取消或關閉按鈕
const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}
  • 在编辑时点击保存按钮按钮 ABTestRes 的返回值
  • 实验创建和编辑的保存皆为伪保存,需要在画布调用Api abTestSave 来保存

const res = {
  status: "complete",
  data: {
    maId: "maId",
    versions: [
      {
        name: "对照版本",
        weight: 1,
        desc: "",
        id: "9185023865946"
      },
      {
        name: "实验版本",
        weight: 99,
        desc: "",
        id: "2655946237622"
      }
    ],
    experiment: {
      name: "maName2-maId-ComponentId4",
      weight: 10,
      desc: "maName2-maId-ComponentId4自动生成的实验",
      key: "14251453774656"
    }
  },
  type: add
}
  • 在编辑时,點擊取消或關閉按鈕
const res = {
  status: 'interrupt',
  data: null,
  type: 'add'
}
  • 在编辑或新增时,如果传入的参数生成实验名称等信息不符合表单校验规则(见Tips 1.),
const res = {
  status: 'interrupt',
  data: null,
  type: 'add' | 'edit'
}

组件 Api

abTestSave

在画布保存时调用, 对编辑或创建的实验进行保存

declare function abTestSave( 
  maId: string | number, 
  ComponentId: string | number,
  type: "add" | "edit"): Promise<AbTestSaveRes>

| 名称 | 说明 | 类型 | 必填 | |--------------|--------|------------------------|------| | maId | 画布id | string or number | 必填 | | ComponentId | 组件id | string or number | 必填 | | type | 操作类型 | "add" or "edit" | 必填 |


export interface AbTestSaveRes {
 status: 'complete' | 'interrupt'
 type: 'add' | 'edit'
 data: {
   // 实验配置
   experiment: {
     name: string;
     weight: number;
     desc: string;
     key: string;
     id: number;
   };
   // 版本信息
   versions: Array<{
     name: string;
     weight: number;
     desc: string;
     whitelist: string[];
     id: number;
   }>
   // 画布 id
   maId: string | number
 } | null
}

abTestPublish

在画布保存时调用, 对实验进行发布

declare function abTestPublish(expId: string | number): Promise<any>;

| 名称 | 说明 | 类型 | 必填 | |--------------|------|------------------------|------| | expId | 实验id | string or number | 必填 |

参数示例

创建实验

 const configAdd = {
  authId: '1828168xxxx',
  env: 'DEV',
  type: 'add',
  maId: 'maId',
  startTime: '2023-04-27T07:32:39.000+00:00',
  endTime: '2023-07-27T07:32:39.000+00:00',
  ComponentId: 'ComponentId5',
  maName: 'maName2',
  close: (res: ABTestRes) => {
    console.log(res)
  },
} as ABTestConfig

编辑实验

 const configEdit = {
    authId: '1828168xxxx',
    env: 'DEV',
    type: 'edit',
    maId: 'maId',
    startTime: '2023-03-27T07:32:39.000+00:00',
    endTime: '2023-07-27T07:32:39.000+00:00',
    ComponentId: 'ComponentId4',
    expId: '17',
    maName: 'maName4444',
    close: (res: ABTestRes) => {
      console.log(res)
    },
  } as ABTestConfig

创建实验保存

import { abTestSave } from '@cbd-wujie-components/ab-test'
 const handleSave = async() => {
  const res = await abTestSave('maId', 'ComponentId5', 'add')
  console.log(res)
}

编辑实验保存

import { abTestSave } from '@cbd-wujie-components/ab-test'
 const handleSave = async() => {
  const res = await abTestSave('maId', 'ComponentId5', 'edit')
  console.log(res)
}

实验发布

import { abTestPublish } from '@cbd-wujie-components/ab-test'
 const handlePublish = async() => {
   const res = await abTestPublish(17)
  console.log(res)
}

❗❗❗ Tips

  • 1.ab-test 根据产品文档,实验名称的生成规则为 画布名称+画布id+组件id,而由于数据库限制字符为50,估需要确保传入参数长度符合规则。
  • 2.ab-test 由于和人群圈选使用不同的登录,目前没有鉴权,需要进一步讨论
  • 3.暴露的方法 abTestPublishabTestSave 实际上是在子应用中挂载到 window中调用的,因此调用前必须打开过组件页面
  • 4.由于 ab-test 接口请求频次限制,不可以同时打开两个 ab-test
  • 5.ab-test 组件基于 是基于 wujie 的微前端封装,如果无法访问,这与网站访问安全策略有关,需要找誉博一同解决