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.

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

feat(sandbox): add disableLinkTransformToStyle sandbox config #668

Merged
merged 7 commits into from
Jun 19, 2024
Merged
Changes from 1 commit
Commits
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
Next Next commit
feat(sandbox): add disableLinkTransformToStyle sandbox config
zhoushaw committed May 6, 2024
commit 746de993df49946f224abde58ee6f59e2bec659c
1 change: 1 addition & 0 deletions dev/app-main/src/constant.ts
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ export const localApps: AppInfo = [
activeWhen: '/react17',
sandbox: {
fixStaticResourceBaseUrl: false,
disableLinkTransformToStyle: true,
},
// 子应用的入口地址,可以为 HTML 地址和 JS 地址
// 注意:entry 地址不可以与主应用+子应用激活地址相同,否则刷新时将会直接返回子应用内容
3 changes: 3 additions & 0 deletions dev/app-react-17/public/a.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.hello {
color: red;
}
3 changes: 3 additions & 0 deletions dev/app-react-17/public/b.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.world {
color: blue;
}
8 changes: 8 additions & 0 deletions dev/app-react-17/public/index.html
Original file line number Diff line number Diff line change
@@ -3,6 +3,14 @@
<head>
<meta charset="UTF-8">
<title>app react v17</title>
<link rel="stylesheet" href="http://localhost:8091/a.css" />
<script>
let link = document.createElement('link');
link.ref = 'stylesheet';
link.setAttribute('ref','stylesheet');
link.setAttribute('href','http://localhost:8091/b.css');
document.head.appendChild(link);
</script>
</head>
<body>
<img data-test="img-pre-fix-app-17" src="/img" />
7 changes: 5 additions & 2 deletions packages/browser-vm/src/dynamicNode/processor.ts
Original file line number Diff line number Diff line change
@@ -356,9 +356,12 @@ export class DynamicNodeProcessor {
this.monitorChangesOfStyle();
}
// The link node of the request css needs to be changed to style node
else if (this.is('link')) {
else if (
this.is('link') &&
!this.sandbox.options.disableLinkTransformToStyle
) {
parentNode = this.findParentNodeInApp(context, 'head');
if (this.el.rel === 'stylesheet' && this.el.href) {
if (this.el.getAttribute('ref') === 'stylesheet' && this.el.href) {
convertedNode = this.addDynamicLinkNode((styleNode) => {
this.nativeAppend.call(parentNode, styleNode);
});
3 changes: 3 additions & 0 deletions packages/browser-vm/src/pluginify.ts
Original file line number Diff line number Diff line change
@@ -133,6 +133,9 @@ function createOptions(Garfish: interfaces.Garfish) {
fixOwnerDocument: Boolean(appInfo.sandbox?.fixOwnerDocument),
disableWith: Boolean(appInfo.sandbox?.disableWith),
disableElementtiming: Boolean(appInfo.sandbox?.disableElementtiming),
disableLinkTransformToStyle: Boolean(
appInfo.sandbox?.disableLinkTransformToStyle,
),
strictIsolation: Boolean(appInfo.sandbox?.strictIsolation),
// 缓存模式,不收集副作用
disableCollect:
1 change: 1 addition & 0 deletions packages/browser-vm/src/types.ts
Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@ export interface SandboxOptions {
disableWith?: boolean;
strictIsolation?: boolean;
disableElementtiming?: boolean;
disableLinkTransformToStyle?: boolean;
disableCollect?: boolean;
modules?: Array<Module>;
addSourceList?: (
1 change: 1 addition & 0 deletions packages/core/src/config.ts
Original file line number Diff line number Diff line change
@@ -125,6 +125,7 @@ export const createDefaultOptions = () => {
disableWith: false,
strictIsolation: false,
disableElementtiming: false,
disableLinkTransformToStyle: false,
fixOwnerDocument: false,
},
// global hooks
1 change: 1 addition & 0 deletions packages/core/src/interface.ts
Original file line number Diff line number Diff line change
@@ -81,6 +81,7 @@ export namespace interfaces {
disableWith?: boolean;
strictIsolation?: boolean;
disableElementtiming?: boolean;
disableLinkTransformToStyle?: boolean;
fixOwnerDocument?: boolean;
}

8 changes: 8 additions & 0 deletions packages/core/src/module/app.ts
Original file line number Diff line number Diff line change
@@ -752,6 +752,14 @@ export class App {
},

link: (node) => {
if (
this.appInfo.sandbox &&
typeof this.appInfo.sandbox === 'object' &&
this.appInfo.sandbox.disableLinkTransformToStyle
) {
return DOMApis.createElement(node);
}

if (DOMApis.isCssLinkNode(node)) {
const styleManager = this.resources.link.find((manager) =>
manager.isSameOrigin(node),
23 changes: 13 additions & 10 deletions packages/core/src/module/resource.ts
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { AppInfo } from './app';

// Fetch `script`, `link` and `module meta` elements
function fetchStaticResources(
appName: string,
appInfo: AppInfo,
loader: Loader,
entryManager: TemplateManager,
) {
@@ -22,10 +22,7 @@ function fetchStaticResources(
.map((node) => {
const src = entryManager.findAttributeValue(node, 'src');
const type = entryManager.findAttributeValue(node, 'type');
let crossOrigin = entryManager.findAttributeValue(
node,
'crossorigin',
);
let crossOrigin = entryManager.findAttributeValue(node, 'crossorigin');
if (crossOrigin === '') {
crossOrigin = 'anonymous';
}
@@ -42,7 +39,7 @@ function fetchStaticResources(
// we have a preload mechanism, so we don’t need to deal with it.
return loader
.load<JavaScriptManager>({
scope: appName,
scope: appInfo.name,
url: fetchUrl,
crossOrigin,
defaultContentType: type,
@@ -55,7 +52,7 @@ function fetchStaticResources(
jsManager.setDefferAttribute(toBoolean(defer));
return jsManager;
} else {
warn(`[${appName}] Failed to load script: ${fetchUrl}`);
warn(`[${appInfo.name}] Failed to load script: ${fetchUrl}`);
}
})
.catch(() => null);
@@ -78,20 +75,26 @@ function fetchStaticResources(
.findAllLinkNodes()
.map((node) => {
if (!entryManager.DOMApis.isCssLinkNode(node)) return;
if (
appInfo.sandbox &&
typeof appInfo.sandbox === 'object' &&
appInfo.sandbox.disableLinkTransformToStyle
)
return;
const href = entryManager.findAttributeValue(node, 'href');
if (href) {
const fetchUrl = entryManager.url
? transformUrl(entryManager.url, href)
: href;
return loader
.load<StyleManager>({ scope: appName, url: fetchUrl })
.load<StyleManager>({ scope: appInfo.name, url: fetchUrl })
.then(({ resourceManager: styleManager }) => {
if (styleManager) {
styleManager.setDep(node);
styleManager?.correctPath();
return styleManager;
} else {
warn(`${appName} Failed to load link: ${fetchUrl}`);
warn(`${appInfo.name} Failed to load link: ${fetchUrl}`);
}
})
.catch(() => null);
@@ -147,7 +150,7 @@ export async function processAppResources(loader: Loader, appInfo: AppInfo) {
if (entryManager instanceof loader.TemplateManager) {
isHtmlMode = true;
const [js, link, modules] = await fetchStaticResources(
appInfo.name,
appInfo,
loader,
entryManager,
);
Loading
Oops, something went wrong.
Loading
Oops, something went wrong.