mirror of
https://github.com/dream-num/univer.git
synced 2026-08-31 01:42:03 +08:00
白熱
196 lines
7.8 KiB
HTML
196 lines
7.8 KiB
HTML
<head>
|
|
<script
|
|
src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"
|
|
integrity="sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"
|
|
integrity="sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script>
|
|
/**
|
|
* Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.
|
|
* It is recommended to migrate to module script[^2] and a more modern build system.
|
|
*
|
|
* [^1]: [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html
|
|
* [^2]: [support for React 19] https://github.com/dream-num/univer/pull/4247
|
|
*/
|
|
|
|
/**
|
|
* Fix `Uncaught TypeError: client.createRoot is not a function`
|
|
* If using UMD React < 18, you might need the following code.
|
|
*/
|
|
(function (global) {
|
|
'use strict';
|
|
if (!global.ReactDOM) {
|
|
throw new Error('ReactDOM must be loaded before ReactCreateRoot.');
|
|
}
|
|
const ReactDOM = global.ReactDOM;
|
|
if (!ReactDOM.createRoot) {
|
|
ReactDOM.createRoot = function (container) {
|
|
return {
|
|
render: (element) => {
|
|
ReactDOM.render(element, container);
|
|
},
|
|
};
|
|
};
|
|
}
|
|
})(this);
|
|
|
|
/**
|
|
* Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
|
|
* If using UMD React, you might need the following code.
|
|
* Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js
|
|
*/
|
|
(function (global) {
|
|
'use strict';
|
|
if (!global.React) {
|
|
throw new Error('React must be loaded before ReactJSXRuntime.');
|
|
}
|
|
const React = global.React;
|
|
if (!React.jsx || !React.jsxs) {
|
|
const REACT_ELEMENT_TYPE = Symbol.for('react.element');
|
|
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
const RESERVED_PROPS = {
|
|
key: true,
|
|
ref: true,
|
|
__self: true,
|
|
__source: true,
|
|
};
|
|
const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
|
|
function createReactElement(type, config, maybeKey) {
|
|
const props = {};
|
|
let key = null;
|
|
let ref = null;
|
|
if (maybeKey !== undefined) {
|
|
key = `${maybeKey}`;
|
|
}
|
|
if (config.key !== undefined) {
|
|
key = `${config.key}`;
|
|
}
|
|
if (config.ref !== undefined) {
|
|
ref = config.ref;
|
|
}
|
|
for (var propName in config) {
|
|
if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
|
|
props[propName] = config[propName];
|
|
}
|
|
}
|
|
if (type && type.defaultProps) {
|
|
const defaultProps = type.defaultProps;
|
|
for (var propName in defaultProps) {
|
|
if (props[propName] === undefined) {
|
|
props[propName] = defaultProps[propName];
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
$$typeof: REACT_ELEMENT_TYPE,
|
|
type,
|
|
key,
|
|
ref,
|
|
props,
|
|
_owner: ReactCurrentOwner.current,
|
|
};
|
|
}
|
|
React.jsx = createReactElement;
|
|
React.jsxs = createReactElement;
|
|
}
|
|
})(this);
|
|
</script>
|
|
<script
|
|
src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"
|
|
integrity="sha384-Opyi337NBU4M11Xx1aRUN4dZejlRWsq277uHWHyysNm4frJzmqu7KvgkHu4YWTqk"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"
|
|
integrity="sha384-pPi0zxBAoDu6+JXW/C68UZLvBUUtU+7zonhif43rqj7pxsGyqyqzcian2Rj37Rss"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/index.js"
|
|
integrity="sha384-F4WZII63zjCUVMrITB+Vu6vQFNeE93iOJ8Qovkx5rdYxskyLdx0JnJZY4QLLCjk3"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/react-bindings/index.js"
|
|
integrity="sha384-jJdF43Ttfx58SshGsOzzjyBHEuP03xjyRVMmHmrwARzwOnVrnVvFJARk6O8tW/OF"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<script src="/packages/themes/lib/umd/index.js"></script>
|
|
<script src="/packages/protocol/lib/umd/index.js"></script>
|
|
<script src="/packages/core/lib/umd/index.js"></script>
|
|
<script src="/packages/network/lib/umd/index.js"></script>
|
|
<script src="/packages/telemetry/lib/umd/index.js"></script>
|
|
<script src="/packages/rpc/lib/umd/index.js"></script>
|
|
<script src="/packages/design/lib/umd/index.js"></script>
|
|
<script src="/packages/engine-render/lib/umd/index.js"></script>
|
|
<script src="/packages/engine-formula/lib/umd/index.js"></script>
|
|
<script src="/packages/drawing/lib/umd/index.js"></script>
|
|
<script src="/packages/ui/lib/umd/index.js"></script>
|
|
<script src="/packages/docs/lib/umd/index.js"></script>
|
|
<script src="/packages/docs-ui/lib/umd/index.js"></script>
|
|
|
|
<script src="/packages/core/lib/umd/facade.js"></script>
|
|
<script src="/packages/engine-formula/lib/umd/facade.js"></script>
|
|
<script src="/packages/ui/lib/umd/facade.js"></script>
|
|
<script src="/packages/docs-ui/lib/umd/facade.js"></script>
|
|
|
|
<script src="/packages/design/lib/umd/locale/en-US.js"></script>
|
|
<script src="/packages/ui/lib/umd/locale/en-US.js"></script>
|
|
<script src="/packages/docs-ui/lib/umd/locale/en-US.js"></script>
|
|
|
|
<link rel="stylesheet" href="/packages/design/lib/index.css" />
|
|
<link rel="stylesheet" href="/packages/ui/lib/index.css" />
|
|
<link rel="stylesheet" href="/packages/docs-ui/lib/index.css" />
|
|
|
|
<style>
|
|
html,
|
|
body,
|
|
#root,
|
|
#app {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<script>
|
|
const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore;
|
|
const { FUniver } = UniverCoreFacade;
|
|
const { UniverRenderEnginePlugin } = UniverEngineRender;
|
|
const { UniverFormulaEnginePlugin } = UniverEngineFormula;
|
|
const { UniverUIPlugin } = UniverUi;
|
|
const { UniverDocsPlugin } = UniverDocs;
|
|
const { UniverDocsUIPlugin } = UniverDocsUi;
|
|
|
|
const univer = new Univer({
|
|
locale: LocaleType.EN_US,
|
|
locales: {
|
|
[LocaleType.EN_US]: mergeLocales(UniverDesignEnUS, UniverUiEnUS, UniverDocsUiEnUS),
|
|
},
|
|
});
|
|
|
|
univer.registerPlugin(UniverRenderEnginePlugin);
|
|
univer.registerPlugin(UniverFormulaEnginePlugin);
|
|
|
|
univer.registerPlugin(UniverUIPlugin, {
|
|
container: 'app',
|
|
});
|
|
|
|
univer.registerPlugin(UniverDocsPlugin);
|
|
univer.registerPlugin(UniverDocsUIPlugin);
|
|
|
|
univer.createUnit(UniverInstanceType.UNIVER_DOC, {});
|
|
|
|
const univerAPI = FUniver.newAPI(univer);
|
|
</script>
|
|
</body>
|