Skip to content

Commit

Permalink
fix ssr render fail(HTML to contain a matching)
Browse files Browse the repository at this point in the history
  • Loading branch information
@imagine10255
imagine10255 committed Oct 10, 2023
1 parent e67c3e8 commit ce0537c
Show file tree
Hide file tree
Showing 11 changed files with 420 additions and 325 deletions.
50 changes: 50 additions & 0 deletions example/public/test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2" as="font" crossorigin=""
type="font/woff2"/>
<link rel="preload" as="image" href="/vercel.svg" fetchPriority="high"/>
<link rel="preload" as="image" href="/logo.svg" fetchPriority="high"/>
<link rel="stylesheet" href="/_next/static/css/app/layout.css?v=1696862811492"
data-precedence="next_static/css/app/layout.css"/>
<link rel="stylesheet" href="/_next/static/css/app/page.css?v=1696862811492"
data-precedence="next_static/css/app/page.css"/>
<link rel="preload" href="/_next/static/chunks/webpack.js?v=1696862811492" as="script" fetchPriority="low"/>
<script src="/_next/static/chunks/main-app.js?v=1696862811492" async=""></script>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<meta name="next-size-adjust"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body class="__className_e66fe9">
<main class="page_main__GlU4n">
<div class="page_description__86bsR"><p>Get started by editing <code
class="page_code__9lUUd">src/app/page.tsx</code></p>
<div>
<a href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=appdir-template&amp;utm_campaign=create-next-app"
target="_blank" rel="noopener noreferrer">By<!-- --> <img alt="Vercel Logo" fetchPriority="high"
width="100" height="24" decoding="async"
data-nimg="1" class="page_vercelLogo__rOY_u"
style="color:transparent"
src="/vercel.svg"/></a></div>
</div>
<div class="page_center__5oHG7" style="font-size:45px"><img alt="Next.js Logo" fetchPriority="high" width="80"
height="80" decoding="async" data-nimg="1"
style="color:transparent;margin-right:10px"
src="/logo.svg"/>Bear React Carousel + NextJS
</div>
<div data-testid="bear-carousel"
style="--carousel-height:400px;--carousel-content-position:absolute;--carousel-space-between:0px;--carousel-slide-width:100%"
class="bear-react-carousel__root" data-gpu-render="" data-mouse-move="">
<div class="bear-react-carousel__content">
<div class="bear-react-carousel__container" data-testid="bear-carousel-container"></div>
</div>
</div>

</main>

</body>
</html>
128 changes: 72 additions & 56 deletions src/BearCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ import {SlideProvider} from './components/SlideProvider/SlideProvider';
import {NavNextButton, NavPrevButton} from './components/NavButton';
import CarouselRoot from './components/CarouselRoot';
import {logEnable} from './config';
import ElState from './manager/Elementor/ElState';



interface IState {
windowSize: number,
windowSize: number
isClientReady: boolean
}


Expand Down Expand Up @@ -53,12 +55,13 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
isSlideItemMemo: false,
};
_isEnableGpuRender = checkIsDesktop();
state = {windowSize: 0};
state = {windowSize: 0, isClientReady: false};

_stater: Stater;
_configurator: Configurator;
_windowSizer: WindowSizer;
_elementor: Elementor;
_elState: ElState;
_controller: Controller;
_autoPlayer: AutoPlayer;
_dragger: Dragger;
Expand All @@ -69,81 +72,94 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
super(props);
// this._device = checkIsMobile() ? EDevice.mobile : EDevice.desktop;

const setting = getSetting(props);
this._configurator = new Configurator(props.breakpoints, setting, globalThis.window);
this._elementor = new Elementor({
configurator: this._configurator,
stater: this._stater
});
}


componentDidMount() {
if(this.props.isDebug && logEnable.componentDidMount) logger.printInText('[componentDidMount]');
const {breakpoints, onMount} = this.props;


const setting = getSetting(this.props);
this._configurator = new Configurator(this.props.breakpoints, setting, globalThis.window);
this._windowSizer = new WindowSizer({
breakpoints: props.breakpoints,
breakpoints,
win: globalThis.window,
configurator: this._configurator,
});
this._stater = new Stater(this._configurator, props.data);
this._elementor = new Elementor({
this._stater = new Stater(this._configurator, this.props.data);


this._stater.onChange(this._onChange);

this._elState = new ElState({
configurator: this._configurator,
elementor: this._elementor,
stater: this._stater
});

this._controller = new Controller({
configurator: this._configurator,
stater: this._stater,
elementor: this._elementor,
elState: this._elState,
});

this._dragger = new Dragger({
configurator: this._configurator,
elementor: this._elementor,
elState: this._elState,
stater: this._stater,
});

this._autoPlayer = new AutoPlayer({
configurator: this._configurator,
});

this._stater.onChange(this._onChange);
this.state = {windowSize: this._windowSizer.size};
}

// Move to the correct position for the first time
this._controller.slideToPage(1, false);

componentDidMount() {
if(this.props.isDebug && logEnable.componentDidMount) logger.printInText('[componentDidMount]');

if(this.props.onMount) this.props.onMount();


if (this._elementor) {
// Move to the correct position for the first time
this._controller.slideToPage(1, false);
this._windowSizer.onResize(this._onResize);
this._autoPlayer.onTimeout(this._onAutoPlay);

this._windowSizer.onResize(this._onResize);
this._autoPlayer.onTimeout(this._onAutoPlay);
this._dragger.onDragStart(this._onDragStart);
this._dragger.onDragMove(this._onDragMove);
this._dragger.onDragEnd(this._onDragEnd);

this._dragger.onDragStart(this._onDragStart);
this._dragger.onDragMove(this._onDragMove);
this._dragger.onDragEnd(this._onDragEnd);

this._controller.onSlideBefore(this._onSlideBefore);
this._controller.onSlideAfter(this._onSlideAfter);

this._syncCarousel = new SyncCarousel(this.props.syncCarouselRef);
}
this._controller.onSlideBefore(this._onSlideBefore);
this._controller.onSlideAfter(this._onSlideAfter);

this._syncCarousel = new SyncCarousel(this.props.syncCarouselRef);
this._setController();
this._elementor.onSlideAnimation();
this._elState.onSlideAnimation();
this._init();

if(onMount) onMount();

}

componentWillUnmount() {
if(this.props.isDebug && logEnable.componentWillUnmount) logger.printInText('[componentWillUnmount]');
this._windowSizer.offResize(this._onResize);
this._autoPlayer.offTimeout(this._onAutoPlay);
this._dragger.offDragStart(this._onDragStart);
this._dragger.offDragMove(this._onDragMove);
this._dragger.offDragEnd(this._onDragEnd);

this._controller.offSlideBefore(this._onSlideBefore);
this._controller.offSlideAfter(this._onSlideAfter);
this._autoPlayer?.offTimeout(this._onAutoPlay);
if(this._dragger){
this._dragger.offDragStart(this._onDragStart);
this._dragger.offDragMove(this._onDragMove);
this._dragger.offDragEnd(this._onDragEnd);
}

this._elementor.offSlideAnimation();
if(this._controller){
this._controller.offSlideBefore(this._onSlideBefore);
this._controller.offSlideAfter(this._onSlideAfter);
}

if(this._elState){
this._elState.offSlideAnimation();
}
this._stater.offChange(this._onChange);
}

Expand All @@ -155,10 +171,12 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
shouldComponentUpdate(nextProps: IBearCarouselProps, nextState: IState) {
if(this._configurator.setting.isDebug && logEnable.shouldComponentUpdate) logger.printInText('[shouldComponentUpdate]');

const {windowSize: nextWindowSize} = nextState;
const {windowSize: nextWindowSize, isClientReady} = nextState;


if(isPropsDiff(this.props, nextProps, ['data', 'moveEffect']) ||
this.state.windowSize !== nextWindowSize ||
this.state.isClientReady !== isClientReady ||
this.props.data?.length !== nextProps.data?.length
){
this._configurator.init(nextProps.breakpoints, getSetting(nextProps));
Expand Down Expand Up @@ -190,6 +208,7 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
className.add(elClassName.containerInit);
}
}
this.setState({isClientReady: true});
};

/**
Expand All @@ -205,8 +224,6 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
/**
*
* set OnAutoPlay emit
* @param index
* @param isUseAnimation
*/
private _onAutoPlay = () => {
this._controller.slideToNextPage();
Expand All @@ -217,8 +234,6 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
/**
*
* set OnSlideBefore emit
* @param index
* @param isUseAnimation
*/
private _onSlideBefore = () => {
this._autoPlayer.pause();
Expand Down Expand Up @@ -371,36 +386,37 @@ class BearCarousel extends React.Component<IBearCarouselProps, IState> {
render(){
const {style, className, isDebug, isLazy, renderLazyPreloader} = this.props;

if(!window){
return null;
}

// if(!this.state.isClientReady){
// return null;
// }
return (
<CarouselRoot
ref={this._elementor._rootRef}
style={style}
className={className}
setting={this._configurator.setting}
setting={this._configurator?.setting}
isDebug={isDebug}
extendStyle={this._configurator.style}
isEnableGpuRender={this._isEnableGpuRender}
extendStyle={this._configurator?.style}
isEnableGpuRender={globalThis.window && this._isEnableGpuRender}
>
{this._stater.isVisibleNavButton && this._renderNavButton()}
{this.state.isClientReady && this._stater.isVisibleNavButton && this._renderNavButton()}

<div className={elClassName.content}>
<div ref={this._elementor._containerRef} className={elClassName.container} data-testid="bear-carousel-container">
<SlideProvider
isLazy={isLazy}
renderLazyPreloader={!!renderLazyPreloader ? renderLazyPreloader: () => <div>loading...</div>}
>
{this._renderSlideItems()}
{this.state.isClientReady && this._renderSlideItems()}
</SlideProvider>
</div>
</div>

{this._stater.isVisiblePagination && this._renderPagination()}
{this.state.isClientReady && <>
{this._stater.isVisiblePagination && this._renderPagination()}
{isDebug && <WindowSize size={this._windowSizer.size}/>}
</>}

{isDebug && <WindowSize size={this._windowSizer.size}/>}
</CarouselRoot>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/CarouselRoot/CarouselRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {ISetting} from '../../types';
interface IProps {
style: CSS.Properties
className: string
setting: ISetting
children?: JSX.Element[]
setting?: ISetting
children?: JSX.Element | JSX.Element[]
extendStyle?: CSSProperties
isDebug?: boolean
isEnableGpuRender?: boolean
Expand All @@ -34,8 +34,8 @@ const CarouselRoot = forwardRef<HTMLDivElement, IProps>(({
}}
className={[className, elClassName.root].join(' ').trim()}
data-gpu-render={booleanToDataAttr(isEnableGpuRender)}
data-per-view-auto={booleanToDataAttr(setting.slidesPerView === 'auto')}
data-mouse-move={booleanToDataAttr(setting.isEnableMouseMove)}
data-per-view-auto={booleanToDataAttr(setting?.slidesPerView === 'auto')}
data-mouse-move={booleanToDataAttr(setting?.isEnableMouseMove)}
// data-actual={[actual.minIndex, actual.firstIndex, actual.lastIndex, actual.maxIndex].join(' / ')}
data-debug={booleanToDataAttr(isDebug)}
>
Expand Down

0 comments on commit ce0537c

Please sign in to comment.