Skip to content

Commit 366e058

Browse files
author
liangxiaoming
committed
feat: add demo case
1 parent 7680552 commit 366e058

File tree

17 files changed

+1785
-374
lines changed

17 files changed

+1785
-374
lines changed

‎demos/react-host/emp.config.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {defineConfig} from '@empjs/cli'
2+
import pluginReact from '@empjs/plugin-react'
3+
import {pluginRspackEmpShare} from '@empjs/share'
4+
export default defineConfig(store => {
5+
const ip = store.getLanIp()
6+
return {
7+
plugins: [
8+
pluginReact(),
9+
pluginRspackEmpShare({
10+
name: 'mfHost',
11+
shared: {
12+
react: {
13+
singleton: true,
14+
requiredVersion: '18',
15+
},
16+
'react-dom': {
17+
singleton: true,
18+
requiredVersion: '18',
19+
},
20+
},
21+
exposes: {
22+
'./App': './src/App',
23+
'./CountComp': './src/CountComp',
24+
},
25+
empRuntime: {
26+
runtimeLib: "https://unpkg.yy.com/@empjs/[email protected]/dist/index.js",
27+
frameworkLib: "https://unpkg.yy.com/@empjs/[email protected]/dist/runtime.umd.js",
28+
frameworkGlobal: 'EMP_ADAPTER_REACT',
29+
framework: 'react',
30+
},
31+
// experiments: {
32+
// federationRuntime: 'hoisted',
33+
// },
34+
}),
35+
],
36+
build: {
37+
polyfill: 'entry',
38+
// polyfill: 'usage',
39+
browserslist: store.browserslistOptions.h5,
40+
swcConfig: {
41+
transform: {
42+
useDefineForClassFields: false,
43+
},
44+
},
45+
},
46+
html: {
47+
template: 'src/index.html',
48+
},
49+
server: {
50+
port: 6001,
51+
open: false,
52+
},
53+
debug: {
54+
// showRsconfig: true,
55+
// clearLog: false,
56+
},
57+
chain(config) {
58+
config.module
59+
.rule('sass')
60+
.use('sassLoader')
61+
.tap(options => {
62+
return {
63+
...options,
64+
additionalData: `@import '~@/css/mixin';`,
65+
}
66+
})
67+
},
68+
}
69+
})

‎demos/react-host/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "react-host",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"type": "module",
7+
"scripts": {
8+
"dev": "emp dev",
9+
"build": "emp build",
10+
"start": "emp serve",
11+
"stat": "emp build --analyze",
12+
"emp": "emp"
13+
},
14+
"keywords": [],
15+
"author": "",
16+
"license": "ISC",
17+
"devDependencies": {
18+
"@empjs/cli": "3.1.1",
19+
"@empjs/plugin-react": "3.1.1",
20+
"@types/react": "^18.2.30",
21+
"@types/react-dom": "^18.2.14"
22+
},
23+
"dependencies": {
24+
"@empjs/share": "3.1.2",
25+
"core-js": "^3.36.1",
26+
"mobx": "^6.12.3",
27+
"mobx-react": "^9.1.1",
28+
"react": "^18.2.0",
29+
"react-dom": "^18.2.0"
30+
}
31+
}

‎demos/react-host/src/App.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.logo {
2+
height: 300px;
3+
will-change: filter;
4+
}
5+
6+
.logo:hover {
7+
filter: drop-shadow(0 0 2em #646cffaa);
8+
}
9+
10+
.logo.react:hover {
11+
filter: drop-shadow(0 0 2em #61dafbaa);
12+
}
13+
14+
@keyframes logo-spin {
15+
from {
16+
transform: rotate(0deg);
17+
}
18+
19+
to {
20+
transform: rotate(360deg);
21+
}
22+
}
23+
24+
.logo {
25+
animation: logo-spin infinite 20s linear;
26+
}
27+
28+
29+
.card {
30+
padding: 2em;
31+
}
32+
33+
.read-the-docs {
34+
color: #888;
35+
}
36+
37+
.imageList {
38+
display: flex;
39+
}
40+
41+
.imageList span {
42+
flex: 1;
43+
44+
45+
}

‎demos/react-host/src/App.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import {useState, version} from 'react'
2+
import './App.css'
3+
import ReactLogo from './assets/react.svg'
4+
import ReactInline from './assets/react.svg?inline'
5+
6+
import {CountComp, ShowCountComp} from './CountComp'
7+
import Section from './component/Section'
8+
//
9+
type AppType = {
10+
from?: string
11+
version?: string
12+
component?: any
13+
nameformRemote?: string
14+
}
15+
16+
function App(o: AppType) {
17+
const [count, setCount] = useState(0)
18+
return (
19+
<div className="App">
20+
<div>
21+
<a rel="noreferrer">
22+
<img src={ReactLogo} className="logo react" alt="React logo" />
23+
{/* <ReactLogo /> */}
24+
</a>
25+
</div>
26+
<h1>EMP 3.0 React {version}</h1>
27+
<ShowCountComp />
28+
{o.from ? <p>{o.from}</p> : ''}
29+
{o.nameformRemote ? <p>{o.nameformRemote}</p> : ''}
30+
{o.version ? <p>React Version {o.version}</p> : ''}
31+
<h2>Inject Diff Component</h2>
32+
{o.component && <o.component />}
33+
<Section />
34+
<CountComp />
35+
<h2>Image List</h2>
36+
<div className="imageList">
37+
<span>
38+
inline: <img src={ReactInline} />
39+
</span>
40+
<span>
41+
url: <img src={ReactLogo} />
42+
</span>
43+
</div>
44+
</div>
45+
)
46+
}
47+
48+
export default App

‎demos/react-host/src/CountComp.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {observer} from 'mobx-react'
2+
import {version} from 'react'
3+
import css from './count.module.scss'
4+
import {countStore} from './store'
5+
export const CountComp = observer(() => {
6+
const {count} = countStore
7+
return (
8+
<div>
9+
<h3>
10+
Mobx setCount React {version}{' '}
11+
<button className={css['button-1']} onClick={() => countStore.setCount(count + 1)}>
12+
count is {count}
13+
</button>
14+
</h3>
15+
</div>
16+
)
17+
})
18+
export const ShowCountComp = observer(() => {
19+
return (
20+
<h1>
21+
Mobx Count <b className={css.cpink}>{countStore.count}</b>
22+
</h1>
23+
)
24+
})

‎demos/react-host/src/assets/react.svg

Lines changed: 1 addition & 0 deletions
Loading

‎demos/react-host/src/bootstrap.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {createRoot} from 'react-dom/client'
2+
import App from './App'
3+
const dom = document.getElementById('emp-root')!
4+
const root = createRoot(dom)
5+
root.render(<App />)

‎demos/react-host/src/component/Section.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import css from './index.module.scss'
2+
3+
const Section = () => {
4+
return <div className={css.wrap2}>mixin test</div>
5+
}
6+
7+
export default Section

‎demos/react-host/src/component/index.module.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// @import '~@/css/mixin';
2+
3+
.wrap2 {
4+
@include clearfix();
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
width: 100px;
9+
height: 100px;
10+
font-size: 16px;
11+
background: yellow;
12+
}

‎demos/react-host/src/count.module.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* CSS */
2+
.button-1 {
3+
background-color: #EA4C89;
4+
border-radius: 8px;
5+
border-style: none;
6+
box-sizing: border-box;
7+
color: #FFFFFF;
8+
cursor: pointer;
9+
display: inline-block;
10+
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
11+
font-size: 14px;
12+
font-weight: 500;
13+
height: 40px;
14+
line-height: 20px;
15+
list-style: none;
16+
margin: 0;
17+
outline: none;
18+
padding: 10px 16px;
19+
position: relative;
20+
text-align: center;
21+
text-decoration: none;
22+
transition: color 100ms;
23+
vertical-align: baseline;
24+
user-select: none;
25+
-webkit-user-select: none;
26+
touch-action: manipulation;
27+
}
28+
29+
.button-1:hover,
30+
.button-1:focus {
31+
background-color: #F082AC;
32+
}
33+
34+
.cpink {
35+
color: #EA4C89;
36+
}

0 commit comments

Comments
 (0)