univer对接mendix-tool踩坑记录

univer官网https://univer.ai/

安装需要的依赖

npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui @univerjs/facade

对mendix-tool进行配置

const commonExternalLibs = [
    // "mendix" and internals under "mendix/"
    /^mendix($|\/)/,

    // "react"
    /^react$/,

    // "react/jsx-runtime"
    /^react\/jsx-runtime$/,

    // "react-dom"
    /^react-dom$/,
];
在此配置上 添加依赖 
const commonExternalLibs = [
    // "mendix" and internals under "mendix/"
    /^mendix($|\/)/,

    // "react"
    /^react$/,

    // "react/jsx-runtime"
    /^react\/jsx-runtime$/,

    // "react-dom"
    /^react-dom$/,

    /^fs$/
];

并且在 output配置中添加 以下开关

 inlineDynamicImports: true,

复制以下代码到组件的根jsx

import '@univerjs/design/lib/index.css';
import '@univerjs/ui/lib/index.css';
import '@univerjs/sheets-ui/lib/index.css';
import '@univerjs/sheets-formula/lib/index.css';
import './index.css';

import { Univer } from '@univerjs/core';
import { defaultTheme } from '@univerjs/design';
import { UniverDocsPlugin } from '@univerjs/docs';
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import { UniverUIPlugin } from '@univerjs/ui';
import { forwardRef, useEffect, useImperativeHandle, useRef,createElement } from 'react';

// eslint-disable-next-line react/display-name
const HelloWorldSample = forwardRef(({ data }, ref) => {
    const univerRef = useRef(null);
    const workbookRef = useRef(null);
    const containerRef = useRef(null);
  
    useImperativeHandle(ref, () => ({
      getData,
    }));
  
    /**
     * Initialize univer instance and workbook instance
     * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
     */
    const init = (data = {}) => {
      if (!containerRef.current) {
        throw Error('container not initialized');
      }
      const univer = new Univer({
        theme: defaultTheme,
      });
      univerRef.current = univer;
  
      // core plugins
      univer.registerPlugin(UniverRenderEnginePlugin);
      univer.registerPlugin(UniverFormulaEnginePlugin);
      univer.registerPlugin(UniverUIPlugin, {
        container: containerRef.current,
        header: true,
        toolbar: true,
        footer: true,
      });
  
      // doc plugins
      univer.registerPlugin(UniverDocsPlugin, {
        hasScroll: false,
      });
      univer.registerPlugin(UniverDocsUIPlugin);
  
      // sheet plugins
      univer.registerPlugin(UniverSheetsPlugin);
      univer.registerPlugin(UniverSheetsUIPlugin);
      univer.registerPlugin(UniverSheetsFormulaPlugin);
  
      // create workbook instance
      workbookRef.current = univer.createUniverSheet(data);
    };
  
    /**
     * Destroy univer instance and workbook instance
     */
    const destroyUniver = () => {
      univerRef.current?.dispose();
      univerRef.current = null;
      workbookRef.current = null;
    };
  
    /**
     * Get workbook data
     */
    const getData = () => {
      if (!workbookRef.current) {
        throw new Error('Workbook is not initialized');
      }
      return workbookRef.current.save();
    };
  
    useEffect(() => {
      init(data);
      return () => {
        destroyUniver();
      };
    }, [data]);
  
    return <div ref={containerRef} className="univer-container" />;
});

export default HelloWorldSample;

修改preview文件

// import { createElement } from "react";
// import { HelloWorldSample } from "./components/HelloWorldSample";
import { useRef, useState,createElement } from 'react';
import HelloWorldSample from './components/HelloWorldSample';
export function preview({ sampleText }) {
    const univerRef = useRef();
    return  <HelloWorldSample style={{ flex: 1 }} ref={univerRef}  />
}

修改jsx主文件

// import { createElement } from "react";
import { useRef, useState,createElement } from 'react';
// import { HelloWorldSample } from "./components/HelloWorldSample";
import HelloWorldSample from './components/HelloWorldSample';
import "./ui/Demo.css";

export function Demo({ sampleText }) {
    const univerRef = useRef();
    return  <HelloWorldSample style={{ flex: 1 }} ref={univerRef}  />
}

结构目录如下