Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 添加createApp全局配置缓存 #64

Merged
merged 1 commit into from
Aug 15, 2022
Merged

feat: 添加createApp全局配置缓存 #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 77 additions & 43 deletions examples/main-react/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,70 +12,104 @@ import credentialsFetch from "./fetch";
import lifecycles from "./lifecycle";
import plugins from "./plugin";

const { preloadApp, bus } = WujieReact;
const { createApp, preloadApp, bus } = WujieReact;
const isProduction = process.env.NODE_ENV === "production";
bus.$on("click", (msg) => window.alert(msg));

const degrade = window.localStorage.getItem("degrade") === "true" || !window.Proxy || !window.CustomElementRegistry;
// 创建应用，主要是设置配置，preloadApp、startApp的配置基于这个配置做覆盖
createApp({
name: "react16",
url: hostMap("//localhost:7600/"),
attrs: isProduction ? { src: hostMap("//localhost:7600/") } : {},
exec: true,
fetch: credentialsFetch,
plugins,
prefix: { "prefix-dialog": "/dialog", "prefix-location": "/location" },
degrade,
// 修正iframe的url，防止github pages csp报错
react16Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7600/") } : {},
...lifecycles,
});

createApp({
name: "react17",
url: hostMap("//localhost:7100/"),
attrs: isProduction ? { src: hostMap("//localhost:7100/") } : {},
exec: true,
alive: true,
fetch: credentialsFetch,
degrade,
react17Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7100/") } : {},
...lifecycles,
});

createApp({
name: "vue2",
url: hostMap("//localhost:7200/"),
attrs: isProduction ? { src: hostMap("//localhost:7200/") } : {},
exec: true,
fetch: credentialsFetch,
degrade,
vue2Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7200/") } : {},
...lifecycles,
});

createApp({
name: "vue3",
url: hostMap("//localhost:7300/"),
attrs: isProduction ? { src: hostMap("//localhost:7300/") } : {},
exec: true,
alive: true,
plugins: [{ cssExcludes: ["https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"] }],
// 引入了的第三方样式不需要添加credentials
fetch: (url, options) =>
url.includes(hostMap("//localhost:7300/")) ? credentialsFetch(url, options) : window.fetch(url, options),
degrade,
vue3Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7300/") } : {},
...lifecycles,
});

createApp({
name: "angular12",
url: hostMap("//localhost:7400/"),
attrs: isProduction ? { src: hostMap("//localhost:7400/") } : {},
exec: true,
fetch: credentialsFetch,
degrade,
angular12Attrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7400/") } : {},
...lifecycles,
});

createApp({
name: "vite",
url: hostMap("//localhost:7500/"),
attrs: isProduction ? { src: hostMap("//localhost:7500/") } : {},
exec: true,
fetch: credentialsFetch,
degrade,
viteAttrs: process.env.NODE_ENV === "production" ? { src: hostMap("//localhost:7500/") } : {},
...lifecycles,
});

if (window.localStorage.getItem("preload") !== "false") {
const degrade = window.localStorage.getItem("degrade") === "true" || !window.Proxy || !window.CustomElementRegistry;
preloadApp({
name: "react16",
url: hostMap("//localhost:7600/"),
attrs: isProduction ? {src: hostMap("//localhost:7600/")} : {},
exec: true,
fetch: credentialsFetch,
degrade,
plugins,
...lifecycles,
});
preloadApp({
name: "react17",
url: hostMap("//localhost:7100/"),
attrs: isProduction ? {src: hostMap("//localhost:7100/")} : {},
exec: true,
alive: true,
fetch: credentialsFetch,
degrade,
...lifecycles,
});
preloadApp({
name: "vue2",
url: hostMap("//localhost:7200/"),
attrs: isProduction ? {src: hostMap("//localhost:7200/")} : {},
exec: true,
fetch: credentialsFetch,
degrade,
...lifecycles,
});
preloadApp({
name: "vue3",
url: hostMap("//localhost:7300/"),
attrs: isProduction ? {src: hostMap("//localhost:7300/")} : {},
exec: true,
alive: true,
// 引入了的第三方样式不需要添加credentials
fetch: (url, options) =>
url.includes(hostMap("//localhost:7300/")) ? credentialsFetch(url, options) : window.fetch(url, options),
degrade,
...lifecycles,
});
preloadApp({
name: "angular12",
url: hostMap("//localhost:7400/"),
attrs: isProduction ? {src: hostMap("//localhost:7400/")} : {},
exec: true,
fetch: credentialsFetch,
degrade,
...lifecycles,
});
preloadApp({
name: "vite",
url: hostMap("//localhost:7500/"),
attrs: isProduction ? {src: hostMap("//localhost:7500/")} : {},
exec: true,
fetch: credentialsFetch,
degrade,
...lifecycles,
});
}

Expand Down
78 changes: 0 additions & 78 deletions examples/main-react/src/pages/All.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React from "react";
import hostMap from "../hostMap";
import fetch from "../fetch";
import WujieReact from "wujie-react";
import { useNavigate } from "react-router-dom";
import lifecycles from "../lifecycle";

export default function React16() {
const navigation = useNavigate();
Expand All @@ -14,15 +12,6 @@ export default function React16() {
const vite = hostMap("//localhost:7500/");
const angular12Url = hostMap("//localhost:7400/");
// 修正iframe的url，防止github pages csp报错
const react16Attrs = process.env.NODE_ENV === "production" ? { src: react16Url } : {};
const react17Attrs = process.env.NODE_ENV === "production" ? { src: react17Url } : {};
const vue2Attrs = process.env.NODE_ENV === "production" ? { src: vue2Url } : {};
const vue3Attrs = process.env.NODE_ENV === "production" ? { src: vue3Url } : {};
const viteAttrs = process.env.NODE_ENV === "production" ? { src: vite } : {};
const angular12Attrs = process.env.NODE_ENV === "production" ? { src: angular12Url } : {};
const degrade = window.localStorage.getItem("degrade") === "true";
const vue3Fetch = (url, options) =>
url.includes(hostMap("//localhost:7300/")) ? fetch(url, options) : window.fetch(url, options);
const props = {
jump: (name) => {
navigation(`/${name}`);
Expand All @@ -37,19 +26,7 @@ export default function React16() {
name="react16"
url={react16Url}
sync={true}
fetch={fetch}
props={props}
attrs={react16Attrs}
degrade={degrade}
prefix={{ "prefix-dialog": "/dialog", "prefix-location": "/location" }}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
<div className="all-item">
Expand All @@ -59,19 +36,8 @@ export default function React16() {
name="react17"
url={react17Url}
sync={true}
fetch={fetch}
props={props}
attrs={react17Attrs}
alive={true}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
<div className="all-item">
Expand All @@ -81,18 +47,7 @@ export default function React16() {
name="vue2"
url={vue2Url}
sync={true}
fetch={fetch}
props={props}
attrs={vue2Attrs}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
<div className="all-item">
Expand All @@ -102,19 +57,8 @@ export default function React16() {
name="vue3"
url={vue3Url}
sync={true}
fetch={vue3Fetch}
props={props}
attrs={vue3Attrs}
alive={true}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
<div className="all-item">
Expand All @@ -124,18 +68,7 @@ export default function React16() {
name="vite"
url={vite}
sync={true}
fetch={fetch}
props={props}
attrs={viteAttrs}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
<div className="all-item">
Expand All @@ -145,18 +78,7 @@ export default function React16() {
name="angular12"
url={angular12Url}
sync={true}
fetch={fetch}
props={props}
attrs={angular12Attrs}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
</div>
</div>
Expand Down
16 changes: 0 additions & 16 deletions examples/main-react/src/pages/Angular12.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import React from "react";
import hostMap from "../hostMap";
import fetch from "../fetch";
import WujieReact from "wujie-react";
import { useNavigate } from "react-router-dom";
import lifecycles from "../lifecycle";

export default function Angular12() {
const navigation = useNavigate();
const angular12Url = hostMap("//localhost:7400/");
const degrade = window.localStorage.getItem("degrade") === "true";
// 修正iframe的url，防止github pages csp报错
const attrs = process.env.NODE_ENV === "production" ? { src: angular12Url } : {};
const props = {
jump: (name) => {
navigation(`/${name}`);
Expand All @@ -23,18 +18,7 @@ export default function Angular12() {
name="angular12"
url={angular12Url}
sync={true}
fetch={fetch}
props={props}
attrs={attrs}
degrade={degrade}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
);
}
19 changes: 0 additions & 19 deletions examples/main-react/src/pages/React16.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
import React from "react";
import hostMap from "../hostMap";
import fetch from "../fetch";
import WujieReact from "wujie-react";
import { useNavigate, useLocation } from "react-router-dom";
import lifecycles from "../lifecycle";
import plugins from "../plugin";

export default function React16() {
const navigation = useNavigate();
const location = useLocation();
const path = location.pathname.replace("/react16-sub", "").replace("/react16", "").replace("/",""); ////
const react16Url = hostMap("//localhost:7600/") + path;
const degrade = window.localStorage.getItem("degrade") === "true";
// 修正iframe的url，防止github pages csp报错
const attrs = process.env.NODE_ENV === "production" ? { src: react16Url } : {};
const props = {
jump: (name) => {
navigation(`/${name}`);
Expand All @@ -27,20 +21,7 @@ export default function React16() {
name="react16"
url={react16Url}
sync={true}
fetch={fetch}
props={props}
degrade={degrade}
plugins={plugins}
attrs={attrs}
prefix={{ "prefix-dialog": "/dialog", "prefix-location": "/location" }}
beforeLoad={lifecycles.beforeLoad}
beforeMount={lifecycles.beforeMount}
afterMount={lifecycles.afterMount}
beforeUnmount={lifecycles.beforeUnmount}
afterUnmount={lifecycles.afterUnmount}
activated={lifecycles.activated}
deactivated={lifecycles.deactivated}
loadError={lifecycles.loadError}
></WujieReact>
);
}
Loading