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

@digiforce-cloud/dvd-plugin-datasource-pane

v1.0.6

Published

低代码引擎数据源面板

Downloads

7

Readme

低代码引擎 - 数据源面板插件

配置页面的数据源。

一个 pluginProps 的例子

{
  importPlugins: [],
  exportPlugins: [],
  formComponents: {},
  tagSelector: () => {},
  dataSourceTypes: [
    {
      type: 'mopen',
      schema: {
        type: 'object',
        properties: {
          options: {
            type: 'object',
            properties: {
              uri: {
                title: 'api',
              },
              v: {
                title: 'v',
                type: 'string',
              },
              appKey: {
                title: 'appKey',
                type: 'string',
              },
            },
          },
        },
      },
    },
  ],
}

使用预置的数据源类型

import {
  DataSourceTypeFetch,
  DataSourceTypeJsonp,
  DataSourceTypeMtop,
} from '@digiforce-cloud/dvd-plugin-datasource-pane';

如何定制

定制数据源类型

类型定义

内置 fetch,mtop,jsonp 类型,支持传入自定义类型。

type DataSourceType = {
  type: string;
  optionsSchema: JSONSchema6
};

数据源类型需要在集团规范约束下扩展。目前只允许在 options 下添加扩展字段。

比如 mtop 类型,需要添加 options.v (版本)字段。

formily 组件

下钻

定制数据源信息展示标签

通过 renderDataSourceInfoTags 方法控制数据源的信息展示

(dataSourceConfig) => {
  if (dataSourceConfig.type = 'fetch') {
    return [{
      type: 'primary',
      content: dataSourceConfig.type
    }];
  }
}

定制导入插件

导入组件示例

导入组件引入方式参考 pluginProps

import { DataSourceImportPluginTest } from './DataSourceImportPluginTest';

{
  ...
    importPlugins: [
        {
            name: '这里可以导入',
            title: '这里可以导入',
            component: DataSourceImportPluginTest,
            componentProps: {
                onImport: (res) => {
                    console.log('ceshi ')

                },
                onCancel: () => {
                    console.log('ceshi2 ')

                }
            }
        }
    ],
        exportPlugins: [],
            formComponents: { },
  ...
}

// DataSourceImportPluginTest.jsx

/**
 * 源码导入插件
 * @todo editor 关联 types,并提供详细的出错信息
 */
import React, { PureComponent } from 'react';
import { Button } from '@alifd/next';
import _noop from 'lodash/noop';
import _isArray from 'lodash/isArray';
import _last from 'lodash/last';
import _isPlainObject from 'lodash/isPlainObject';
import { RuntimeDataSourceConfig as DataSourceConfig } from '@digiforce-cloud/dvd-datasource-types';
import { JSONSchema6 } from 'json-schema';
import type { ComponentType } from 'react';
export interface DataSourceType {
    type: string;
    schema: JSONSchema6;
    plugin?: ComponentType;
}
export interface DataSourcePaneImportPluginComponentProps {
    dataSourceTypes: DataSourceType[];
    onImport?: (dataSourceList: DataSourceConfig[]) => void;
    onCancel?: () => void;
}
export interface DataSourceImportPluginCodeProps
    extends DataSourcePaneImportPluginComponentProps {
    defaultValue?: DataSourceConfig[];
}
export interface DataSourceImportPluginCodeState {
    code: string;
    isCodeValid: boolean;
}
export class DataSourceImportPluginCode extends PureComponent<
    DataSourceImportPluginCodeProps,
    DataSourceImportPluginCodeState
> {
    handleComplete = () => {
        console.log('确认')
    };
    onCancel = () => {
        console.log('取消')
    };
    render() {
        return (
            <div className="lowcode-plugin-datasource-import-plugin-code">
                此处代码可以自定义
                <p className="btns">
                    <Button onClick={this.onCancel}>取消</Button>
                    <Button type="primary" onClick={this.handleComplete}>
                        确认
                    </Button>
                </p>
            </div>
        );
    }
}

具体的 component 可参考 DataSourceImportPluginCode 查看

demo 截图 Alt

定制导出插件

WIP

事件钩子

依赖

  • formily v2
  • xstate
  • manaco
  • react-dnd

和之前版本的区别

  • 支持导出并自定义导出插件
  • 支持排序
  • 支持信息标签
  • 体验更好的对象参数编辑
  • 支持字段配置表达式

贡献代码

欢迎提 MR

未来计划

  • 详情页下钻
  • 支持多语言处理
  • 单元测试

参考