@compass-aiden/vwb-renderer NPM

@compass-aiden/vwb-renderer

可视化站点渲染器

快速上手

pnpm add @compass-aiden/vwb-core @compass-aiden/vwb-renderer 安装包

前置依赖 systemjs

<!-- 也可以采用其他可用CDN地址 -->
<script src="https://aidenoss.cpolar.cn/compass-open/3rd/systemjs/system.min.js"></script>

完整示例:

<body>
  <div id="root"></div>
  <script src="https://aidenoss.cpolar.cn/compass-open/3rd/systemjs/system.min.js"></script>
  <script type="module">
    import React, { createElement } from 'react';
    import { createRoot } from 'react-dom/client';
    import { VWBApplication, VWBPage, VWBWidget } from '@compass-aiden/vwb-core';
    import { VWBAppRenderer, registerComponent } from '@compass-aiden/vwb-renderer';

    window.React = React;

    const page = new VWBPage({
      layouts: [
        {
          i: '0001',
          w: 2,
          h: 2,
          x: 0,
          y: 0,
        },
      ],
      widgets: [
        new VWBWidget({
          id: '0001',
          material: {
            componentName: 'text',
            from: 'remote',
            type: 'react-component',
            url: 'http://127.0.0.1:5174/dist/vwb-material-text.umd.js',
          },
          props: {
            text: 'test',
          },
        }),
      ],
    });
    const appConfig = new VWBApplication({
      pages: [page],
      selectedPageId: page.id,
    });

    // 注册后可以使用本地物料组件 material: { from: 'preset' }
    // registerComponent('text', createElement(Text, { text: 'Hi, this is Text component' }));

    const root = createRoot(document.querySelector('#root'));

    root.render(createElement(VWBAppRenderer, { appConfig }));
  </script>
</body>

导出的import { VWBAppRenderer, VWBPageRenderer, VWBWidgetRenderer } from '@compass-aiden/vwb-renderer';都可以独立使用

VWBAppRenderer 是用来渲染多页应用程序的渲染器,详细参数请参考 VWBAppRendererProps

VWBPageRenderer 是用来渲染单页界面的渲染器,详细参数请参考 VWBPageRendererProps

VWBWidgetRenderer 是用来渲染局部组件的渲染器,详细参数请参考 VWBWidgetRendererProps

react-grid-layout @compass-aiden/styles node-stdlib-browser

@everything-registry/sub-chunk-193

0.1.1

7 months ago

0.1.1-29

9 months ago

0.1.1-28

9 months ago