All Projects → qxtang → qw-sdk-demo

qxtang / qw-sdk-demo

Licence: other
将 react 业务组件打包成 umd

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Less
1899 projects

Projects that are alternatives of or similar to qw-sdk-demo

react-micro-frontend-example
One approach for a micro frontend in React.
Stars: ✭ 51 (+240%)
Mutual labels:  micro-frontend
scion-microfrontend-platform
SCION Microfrontend Platform is a TypeScript-based open-source library that helps to implement a microfrontend architecture using iframes.
Stars: ✭ 51 (+240%)
Mutual labels:  micro-frontend
doorman
Simple animation for revealing elements.
Stars: ✭ 38 (+153.33%)
Mutual labels:  umd
Microfrontends
Micro-frontend Architecture in Action-微前端的那些事儿
Stars: ✭ 2,696 (+17873.33%)
Mutual labels:  micro-frontend
Microbundle
📦 Zero-configuration bundler for tiny modules.
Stars: ✭ 6,622 (+44046.67%)
Mutual labels:  umd
crazycat
使用Canvas制作的围住神经猫,算法基于广度优先搜索实现。
Stars: ✭ 18 (+20%)
Mutual labels:  umd
magic-portal
⚡ A blazing fast micro-component and micro-frontend solution uses web-components under the hood.
Stars: ✭ 86 (+473.33%)
Mutual labels:  micro-frontend
react-use-comlink
Three ways to use Comlink web workers through React Hooks (and in a typesafe manner).
Stars: ✭ 39 (+160%)
Mutual labels:  umd
Pdf Lib
Create and modify PDF documents in any JavaScript environment
Stars: ✭ 3,426 (+22740%)
Mutual labels:  umd
convert
The smallest & fastest library for really easy, totally type-safe unit conversions in TypeScript & JavaScript.
Stars: ✭ 47 (+213.33%)
Mutual labels:  umd
SimpleWebAuthn
WebAuthn, Simplified. A collection of TypeScript-first libraries for simpler WebAuthn integration. Supports modern browsers and Node.
Stars: ✭ 206 (+1273.33%)
Mutual labels:  umd
WSHModule
WSHModule is a JavaScript virtual machine built in WSH/JScript.
Stars: ✭ 28 (+86.67%)
Mutual labels:  umd
angular-react-microfrontend
🚧 React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API
Stars: ✭ 17 (+13.33%)
Mutual labels:  micro-frontend
Qiankun
📦 🚀 Blazing fast, simple and complete solution for micro frontends.
Stars: ✭ 11,497 (+76546.67%)
Mutual labels:  micro-frontend
rallie
a library that helps users implement decentralized front-end micro service architecture
Stars: ✭ 285 (+1800%)
Mutual labels:  micro-frontend
vue-mfe
✨ The easiest way to build a Vue.js micro front-end App.
Stars: ✭ 38 (+153.33%)
Mutual labels:  micro-frontend
DotNetJS
Consume C# in JavaScript with comfort: single-file UMD library, auto-generated 2-way bindings and type definitions
Stars: ✭ 551 (+3573.33%)
Mutual labels:  umd
postmessagejs
postmessage-promise is a client-server like, WebSocket like, full Promise syntax (postMessage.then etc.) supported postMessage library. 一个类 client-server 模式、类 WebSocket 模式、全 Promise 语法支持的 postMessage 库
Stars: ✭ 33 (+120%)
Mutual labels:  micro-frontend
ragu
🔪 A micro-frontend framework with Server Side Rendering.
Stars: ✭ 85 (+466.67%)
Mutual labels:  micro-frontend
showcase
A Full Stack Journey with Micro Services and Micro Front Ends. Using dapr, kubernetes, react module federation and web assembly,
Stars: ✭ 45 (+200%)
Mutual labels:  micro-frontend
  • 将 react 开发的业务组件打包成 umd 供接入方使用,不受接入方技术栈限制的方案调研
  • iframe 的痛点:Why Not Iframe
  • 打包成 umd 或组件有类型提示,对接更友好

使用示例

安装

方式一:script 引入

<script src="//cdn.jsdelivr.net/npm/react-umd-demo@latest/dist/react-umd-demo.js"></script>

方式二:npm 安装

npm install react-umd-demo
import ReactUmdDemo from 'react-umd-demo';

使用

方式一

添加一个容器

<div id="container"></div>

生成

const instance = new ReactUmdDemo({
  container: 'container' // 容器元素 id
});

instance.render({
  type: 'Page1', // 字符串,要渲染哪一个页面

  // 自定义包裹元素样式
  style: {
    border: '1px solid red'
  },
  className: 'abc'
});

方式二:React 组件

import ReactUmdDemo from 'react-umd-demo/dist/react-umd-demo-component';

export default function App() {
  return (
    <div className="App">
      <ReactUmdDemo
        type="Page1"
        className="abc"
        style={{ color: 'red' }}
        // ...其他配置
      />
    </div>
  );
}

所有参数和方法

typings/index.d.ts

其他

  • 使用 preact/compat 代替 react 以减小打包体积

存在的问题

  • 鉴权方案
  • 样式污染接入方
  • 使用 react 组件形式接入,接入方 react 版本太低问题
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].