Skip to content

Commit

Permalink
perf: 优化相关文件的规范统一
Browse files Browse the repository at this point in the history
  • Loading branch information
@79E
79E committed Oct 18, 2022
1 parent c9e19b6 commit 916bfb0
Show file tree
Hide file tree
Showing 799 changed files with 21,480 additions and 21,628 deletions.
87 changes: 39 additions & 48 deletions .dumi/theme/builtins/Previewer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,51 @@
import React, {
useRef,
useEffect,
useState,
useContext,
useCallback,
} from 'react'
import { context } from 'dumi/theme'
import type { IPreviewerProps } from 'dumi-theme-default/es/builtins/Previewer'
import Previewer from 'dumi-theme-default/es/builtins/Previewer'
import './Previewer.less'
import React, { useRef, useEffect, useState, useContext, useCallback } from 'react';
import { context } from 'dumi/theme';
import type { IPreviewerProps } from 'dumi-theme-default/es/builtins/Previewer';
import Previewer from 'dumi-theme-default/es/builtins/Previewer';
import './Previewer.less';

export const ACTIVE_MSG_TYPE = 'dumi:scroll-into-demo'
export const ACTIVE_MSG_TYPE = 'dumi:scroll-into-demo';

export default (props: IPreviewerProps) => {
const ref = useRef<HTMLDivElement>()
const { meta } = useContext(context)
const [previewerProps, setPreviewerProps] = useState<null | IPreviewerProps>(
null
)
const [isActive, setIsActive] = useState(false)
const isInactive = meta.mobile !== false && !isActive
const isHidden = props.hidden == true ? true : false

const ref = useRef<HTMLDivElement>();
const { meta } = useContext(context);
const [previewerProps, setPreviewerProps] = useState<null | IPreviewerProps>(null);
const [isActive, setIsActive] = useState(false);
const isInactive = meta.mobile !== false && !isActive;
const isHidden = props.hidden == true ? true : false;

const activeSelf = useCallback(() => {
if(!isHidden) return
if (!isHidden) return;
window.postMessage(
{
type: ACTIVE_MSG_TYPE,
value: JSON.stringify({
identifier: props.identifier,
demoUrl: props.demoUrl,
simulator: props.simulator,
hidden: isHidden
hidden: isHidden,
}),
},
'*'
)
setIsActive(true)
}, [props])
);
setIsActive(true);
}, [props]);

useEffect(() => {
// skip if page not loaded
/* istanbul ignore next */
if (!meta.title) return
if (!meta.title) return;

if(isHidden){
activeSelf()
if (isHidden) {
activeSelf();
}

if (
// only render mobile phone when screen max than 960px
window?.outerWidth > 960 &&
// do not disable mobile simulator
meta.mobile !== false
) {

setPreviewerProps(
Object.assign({}, props, {
// omit iframe
Expand All @@ -64,17 +55,15 @@ export default (props: IPreviewerProps) => {
// show source code
defaultShowCode: true,
// hide external action
hideActions: ['EXTERNAL' as IPreviewerProps['hideActions'][0]].concat(
props.hideActions
),
hideActions: ['EXTERNAL' as IPreviewerProps['hideActions'][0]].concat(props.hideActions),
})
)
);
} else {
// use standard mode if screen min than 960px
setPreviewerProps(props)
setPreviewerProps(props);
}
return () => {}
}, [props, meta])
return () => {};
}, [props, meta]);

useEffect(() => {
const handler = ev => {
Expand All @@ -83,23 +72,25 @@ export default (props: IPreviewerProps) => {
isActive &&
JSON.parse(ev.data.value).identifier !== props.identifier
) {
setIsActive(false)
setIsActive(false);
}
}
};

window.addEventListener('message', handler);

window.addEventListener('message', handler)

return () => window.removeEventListener('message', handler)
})
return () => window.removeEventListener('message', handler);
});

return (
<div
className={`
${meta.mobile !== false ? '__dumi-default-mobile-previewer' : null} ${isHidden ? '__dumi-default-previewer--hidden' : ''}
${meta.mobile !== false ? '__dumi-default-mobile-previewer' : null} ${
isHidden ? '__dumi-default-previewer--hidden' : ''
}
`}
onClick={() => {
if (isInactive) {
activeSelf()
activeSelf();
}
}}
data-inactive={isInactive || undefined}
Expand All @@ -112,5 +103,5 @@ export default (props: IPreviewerProps) => {
/>
)}
</div>
)
}
);
};
60 changes: 26 additions & 34 deletions .dumi/theme/components/Device.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,50 @@
import React, { useState, useContext, useEffect, useRef } from 'react'
import QRCode from 'qrcode.react'
import { context, usePrefersColor } from 'dumi/theme'
import { ROUTE_MSG_TYPE } from '../layouts/demo'
import './Device.less'
import type { FC } from 'react'
import React, { useState, useContext, useEffect, useRef } from 'react';
import QRCode from 'qrcode.react';
import { context, usePrefersColor } from 'dumi/theme';
import { ROUTE_MSG_TYPE } from '../layouts/demo';
import './Device.less';
import type { FC } from 'react';

interface IDeviceProps {
className?: string
url: string
className?: string;
url: string;
}

const Device: FC<IDeviceProps> = ({ url, className }) => {
const iframeRef = useRef<HTMLIFrameElement>()
const [iframeSrc, setIframeSrc] = useState<string>()
const [renderKey, setRenderKey] = useState(Math.random())
const [color] = usePrefersColor()
const iframeRef = useRef<HTMLIFrameElement>();
const [iframeSrc, setIframeSrc] = useState<string>();
const [renderKey, setRenderKey] = useState(Math.random());
const [color] = usePrefersColor();
const {
config: { mode, theme },
} = useContext(context)
} = useContext(context);

const carrier = theme?.carrier || 'dumi'
const time = theme?.time || '10:24'
const carrier = theme?.carrier || 'dumi';
const time = theme?.time || '10:24';

// re-render iframe if prefers color changed
useEffect(() => {
setRenderKey(Math.random())
}, [color])
setRenderKey(Math.random());
}, [color]);

// control iframe page update
useEffect(() => {
const { origin } = window.location
const { origin } = window.location;

if (!iframeSrc || !url?.startsWith(origin)) {
// set iframe src directly if it is the first render or custom url
setIframeSrc(url)
setIframeSrc(url);
} else {
const pathname = url
// discard origin prefix
.replace(origin, '')
// discard router base
.replace(`${(window as any)?.routerBase || ''}`.replace(/\/$/, ''), '')
.replace(`${(window as any)?.routerBase || ''}`.replace(/\/$/, ''), '');

// update iframe page route via postmessage, to avoid page refresh
iframeRef.current?.contentWindow.postMessage(
{ type: ROUTE_MSG_TYPE, value: pathname },
'*'
)
iframeRef.current?.contentWindow.postMessage({ type: ROUTE_MSG_TYPE, value: pathname }, '*');
}
}, [url])
}, [url]);

return (
<div
Expand All @@ -60,12 +57,7 @@ const Device: FC<IDeviceProps> = ({ url, className }) => {
<span className='__dumi-default-device-status-carrier'>{carrier}</span>
<span>{time}</span>
</div>
<iframe
ref={iframeRef}
title='dumi-previewer'
src={iframeSrc}
key={renderKey}
/>
<iframe ref={iframeRef} title='dumi-previewer' src={iframeSrc} key={renderKey} />
<div className='__dumi-default-device-action'>
<button
className='__dumi-default-icon'
Expand All @@ -84,7 +76,7 @@ const Device: FC<IDeviceProps> = ({ url, className }) => {
/>
</div>
</div>
)
}
);
};

export default Device
export default Device;
82 changes: 40 additions & 42 deletions .dumi/theme/layouts/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,53 @@
import React, { useEffect, useContext, useRef } from 'react'
import type { IRouteComponentProps } from '@umijs/types'
import { history } from 'dumi'
import { context } from 'dumi/theme'
import TouchEmulator from 'f2-touchemulator'
import vl from 'umi-hd'
import flex from 'umi-hd/lib/flex'
import vw from 'umi-hd/lib/vw'
import vh from 'umi-hd/lib/vh'
import type IThemeConfig from '../typings/config'

export const ROUTE_MSG_TYPE = 'dumi:update-iframe-route'
import React, { useEffect, useContext, useRef } from 'react';
import type { IRouteComponentProps } from '@umijs/types';
import { history } from 'dumi';
import { context } from 'dumi/theme';
import TouchEmulator from 'f2-touchemulator';
import vl from 'umi-hd';
import flex from 'umi-hd/lib/flex';
import vw from 'umi-hd/lib/vw';
import vh from 'umi-hd/lib/vh';
import type IThemeConfig from '../typings/config';

export const ROUTE_MSG_TYPE = 'dumi:update-iframe-route';

// available HD modes
const HD_MODES = {
vl,
flex,
vw,
vh,
}
};

const MobileDemoLayout: React.FC<IRouteComponentProps> = ({ children }) => {
const { config } = useContext(context)
const target = useRef<HTMLDivElement>(null)
const { hd: { rules = [{ mode: 'vw', options: [100, 750] }] } = {} } =
config.theme as IThemeConfig
const { config } = useContext(context);
const target = useRef<HTMLDivElement>(null);
const {
hd: { rules = [{ mode: 'vw', options: [100, 750] }] } = {},
} = config.theme as IThemeConfig;

useEffect(() => {
// Simulate the touch event of mobile terminal
if (target.current) {
// fix https://github.com/umijs/dumi/issues/996
TouchEmulator(document)
TouchEmulator(document);
}

// listen route change message
const handler = (ev: MessageEvent) => {
if (ev.data.type === ROUTE_MSG_TYPE) {
history.push(ev.data.value)
history.push(ev.data.value);
}
}
};

window.addEventListener('message', handler)
window.addEventListener('message', handler);

return () => window.removeEventListener('message', handler)
}, [])
return () => window.removeEventListener('message', handler);
}, []);

useEffect(() => {
const handler = () => {
const { clientWidth } = document.documentElement
const { clientWidth } = document.documentElement;

rules
// discard invalid rules
Expand All @@ -55,38 +56,35 @@ const MobileDemoLayout: React.FC<IRouteComponentProps> = ({ children }) => {
.some(rule => {
if (
// without min & max width
(Number.isNaN(rule.minWidth * 1) &&
Number.isNaN(rule.maxWidth * 1)) ||
(Number.isNaN(rule.minWidth * 1) && Number.isNaN(rule.maxWidth * 1)) ||
// min width only
(Number.isNaN(rule.maxWidth * 1) && clientWidth > rule.minWidth) ||
// max width only
(Number.isNaN(rule.minWidth * 1) && clientWidth < rule.maxWidth) ||
// both min & max width
(clientWidth > rule.minWidth && clientWidth < rule.maxWidth)
) {
HD_MODES[rule.mode](...[].concat(rule.options))
document.documentElement.setAttribute('data-scale', 'true')
return true
HD_MODES[rule.mode](...[].concat(rule.options));
document.documentElement.setAttribute('data-scale', 'true');
return true;
}
})
}

handler()
window.addEventListener('resize', handler)

document.documentElement.setAttribute('style', 'font-size: 0px;')
document.documentElement.removeAttribute('style')
});
};

return () => window.removeEventListener('resize', handler)
handler();
window.addEventListener('resize', handler);

document.documentElement.setAttribute('style', 'font-size: 0px;');
document.documentElement.removeAttribute('style');

}, [rules])
return () => window.removeEventListener('resize', handler);
}, [rules]);

return (
<div className='__dumi-default-mobile-demo-layout' ref={target}>
{children}
</div>
)
}
);
};

export default MobileDemoLayout
export default MobileDemoLayout;
Loading

0 comments on commit 916bfb0

Please sign in to comment.