Skip to content

Support SSR without error #1

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

Open
flobacher wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Support SSR without error #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fb6e39
align version with package.json
flobacher Aug 15, 2019
366b68c
add a fallback for scenarios without IntersectionObserver -> server s…
flobacher Aug 15, 2019
9d6d1a7
extract configuration to singleton, seperate ssr from fallbackmode
flobacher Sep 5, 2019
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
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 34 additions & 0 deletions src/components/nice-anim/nice-anim-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export enum SSRMode {
Static = 'STATIC',
Rehydrate = 'REHYDRATE',
}

export class NiceAnimConfig {

public fallbackCssClass: string;

public ssrMode: SSRMode;

public get ssrCssClass(): string {
if (this.ssrMode === SSRMode.Static) {
return '';
} else if (this.ssrMode === SSRMode.Rehydrate) {
return 'nice-anim';
}
}


private static instance: NiceAnimConfig = null;

private constructor() {
this.ssrMode = SSRMode.Rehydrate;
this.fallbackCssClass = '';
}

static getInstance() {
if (!NiceAnimConfig.instance) {
NiceAnimConfig.instance = new NiceAnimConfig();
}
return NiceAnimConfig.instance;
}
}
30 changes: 25 additions & 5 deletions src/components/nice-anim/nice-anim.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component, Element, Prop, h } from '@stencil/core';
import { Component, Element, Prop, h, Build } from '@stencil/core';

import { NiceAnimConfig } from './nice-anim-config';

@Component({
tag: 'nice-anim',
Expand Down Expand Up @@ -35,10 +37,28 @@ export class NiceAnim {

io: IntersectionObserver;

hasIOSupport: boolean;

config: NiceAnimConfig;

cssClass: string;

constructor() {
this.hasIOSupport = typeof IntersectionObserver !== 'undefined';
this.config = NiceAnimConfig.getInstance();
this.cssClass = Build.isBrowser
? this.hasIOSupport
? 'nice-anim'
: this.config.fallbackCssClass
: this.config.ssrCssClass;
}

componentDidLoad() {
this.addIntersectionObserver();
const animationDistance = this.direction === 'right' || this.direction === 'down' ? '-' + this.animationDistance : this.animationDistance;
(this.el.querySelector('.nice-anim') as HTMLElement).style.setProperty('--distance', animationDistance);
if (this.hasIOSupport) {
this.addIntersectionObserver();
const animationDistance = this.direction === 'right' || this.direction === 'down' ? '-' + this.animationDistance : this.animationDistance;
(this.el.querySelector('.nice-anim') as HTMLElement).style.setProperty('--distance', animationDistance);
}
Copy link
Copy Markdown
Owner

@Nicell Nicell Aug 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}
} else {
this.el.querySelector('.nice-anim').classList.add(`slide-${this.direction}`);
}

Instead of adding a new property, it may be better to just apply the "slide-{direction}" class if this.hasIOSupport is false. That way everything will still animate in the way it was originally intended, just not on intersection.

This could maybe even be extended to just a helper method instead of having it in two places in the code.

Copy link
Copy Markdown
Author

@flobacher flobacher Aug 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the thing is.. there are 2 different use cases...
one: u rehydrate a ssr app.. this way, the element should be opacity 0 after the ssr, so that there is no flickering
two: ssr only... the element should be visible straight away, or like with your improved version, slide in instantly.. whats your take on this?

Copy link
Copy Markdown
Author

@flobacher flobacher Aug 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey since it was late for me already I was a bit quick .. so first of all.. thank you for your great component and for sharing it!!

Copy link
Copy Markdown
Owner

@Nicell Nicell Aug 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The question is, can we tell if it's a SSR only or a rehydration...? If we could, then handling all three situations will work great. Otherwise, we may have some issues. I'm not sure if there's a solid way to check the difference, especially if people use this component without StencilJS.

Also, requiring a property every time may be a pain for people doing SSR. Possibly a global setting could work?

Copy link
Copy Markdown
Author

@flobacher flobacher Aug 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know of a way to tell this..
when ssring with stencil there is a prop, but I intentionally did not use this so it works with all wc-setups..
I think the standard use-case is rehydration... its also what stencil does.. thats why I left the .nice-anim as default class.. pure ssr only setups would have to set a fallbackCSSClass="" on all the <nice-anim> instances... I think thats ok, since its not the main use case...

Copy link
Copy Markdown
Owner

@Nicell Nicell Sep 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@flobacher I'm looking at this soon. I'll need to test out the configuration to get a feel for how it works. Would be super helpful if you could explain the way you implemented the configuration and why? It looks nice, I'd just like to hear the reasoning behind it. I still have lots to learn :)

Copy link
Copy Markdown
Owner

@Nicell Nicell Sep 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ An example code piece of usage would be great.

Copy link
Copy Markdown
Author

@flobacher flobacher Sep 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will try to provide this asap.. I already used/tested it in a project where I use nice-anim =)

Copy link
Copy Markdown
Owner

@Nicell Nicell Sep 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were you able to get that example? I do understand what this does now. Does the class persist between each NiceAnim and updates to it in plain TS? I'm unable to test this right now, but probably will tonight. Also I'm wondering if Build.isBrowser will error on something that isn't Stencil.

Copy link
Copy Markdown
Owner

@Nicell Nicell Dec 6, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@flobacher I'd like to get this merged. So I'm still unsure on if the configuration persists between all NiceAnim instances, and if having Build.isBrowser will error on a non-Stencil site. Once I have those figured out I'll be merging this finally 😄

}

addIntersectionObserver() {
Expand All @@ -63,7 +83,7 @@ export class NiceAnim {
render() {
return (
<div
class="nice-anim"
class={this.cssClass}
style={{
animationDuration: `${this.duration}ms`,
animationDelay: `${this.delay}ms`
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './components';
export * from './components/nice-anim/nice-anim-config'