Comments (10)
Interesting point.
Having the velocity-react components short-circuit out and not do anything on the server (including not requiring Velocity) I expect would be trivial.
I would assume that in most cases the rest would just work; for consistency you'd want to “finish” the Velocity animation as soon as the client was in play. While that has the potential for jumpiness, I think that in a lot of cases the "end" state for an animation matches the neutral rendering of the element, so you wouldn't notice.
Is the short-circuiting something you're interested in putting together? If not I can take a look. I haven't done any isomorphic React, so if you could point me to a good toy starter project I could toss in a VelocityComponent
and see what happens.
Certainly being able to “finish” an animation on the server would be ideal, to have the DOM match more correctly. I don't know how feasible that is or if it's on a roadmap. (cc: @kenwheeler)
from velocity-react.
I could probably have a crack at the short circuiting behaviour, but regrettably I don't have the time to figure out a nicer solution. Ideally you'd pre-calculate the styles on the server, but I think that's impossible particularly for stuff like slideDown
as it depends on the height of rendered elements on the client. Some way of "snapping" the elements into their animated states would work ok, and it might even happen automagically if velocity-react
binds to the componentDidMount
event properly.
from velocity-react.
In my experience writing componentry for isomorphic environments, I've typically used https://www.npmjs.com/package/exenv to check whether I should be doing any window referencing. That said, certain things can be abstracted away from the dom, but others require dom querying. I have also experimented with circumventing this by storing dimensions in a cookie on the first request and querying them server side on the next request. I'll look at the source to see what I can do to avoid throwing on the server.
from velocity-react.
I've just had a quick go at trying to monkey patch Velocity on the server to no avail. Velocity depends heavily on the DOM so it would be pretty difficult to tear it away from it. I tried a conditional require (ew, I know)...
if(typeof window !== 'undefined') {
var Velocity = require('velocity-animate');
} else {
var Velocity = function() { }
}
... but I get an odd error on the client:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
Really not sure why this is triggered, but my React (0.13 FWIW) component is very basic and I don't think I'm doing anything wrong React-wise.
from velocity-react.
I'll take a look and see if I can sort this out in core velocity with a window existence check or something
from velocity-react.
@jamwaffles I think the firstChild
error can come up if you don't have a child for the VelocityComponent
. (Which is something that perhaps we should be tolerant of; though VelocityComponent
has no DOM footprint of its own, and relies on a child to have a presence on the page.)
from velocity-react.
OK, I traced this out a bit. VelocityComponent
plays fast-and-loose with findDOMNode
to try and avoid having its own DOM footprint. This seems incompatible with server-side rendering.
The alternate trick of trying to add a ref
to the child by cloning it also seems to fail in my testing of 0.13, possibly also because of VelocityComponent
’s lack of its own node.
My plan is to get this package working with 0.14, then see if the problem persists or if any new solutions present themselves.
As a last resort, we could make VelocityComponent
take an optional prop that would cause it to render its own DOM node (a la ReactTransitionGroup
) and that would likely smooth this over.
from velocity-react.
OK, pals. Looks like my investigations above were ERRONEOUS. Turns out (and I need to tattoo this to my trackpad or something), npm link
and React do not play well together. That is, using npm link
to pull in a dev version of velocity-react
from a local repo does not work because velocity-react
will resolve a different copy of react
than the main app.
@jamwaffles I believe this accounts for the firstChild
error the two of us saw, and later “Only a ReactOwner can have refs” errors I found.
I'll close this since it's fixed on master, and get out a 1.0.1 release that includes the shim from #22.
from velocity-react.
@phopkins oh yeah the npm link
+ dupe React bit me too. I ended up pushing to a branch at Github and using npm install --save github:owner/repo#branch
to test.
from velocity-react.
Thanks for taking the time to investigate this and fix it everyone. I'll try out the new release asap.
from velocity-react.
Related Issues (20)
- Conditional rendering inside VelocityTransitionGroup error in 1.4.0 HOT 2
- velocityHelpers is exported with a lowercase starting letter.
- examples
- Can't resolve velocity on create-react-app v2 HOT 5
- Update react-transition-group dep version
- No way to set duration or speed on VelocityTransitionGroup
- TypeError Cannot read property 'length' of null in velocity-component.js (v1.4.1) HOT 5
- Error caused by require TransitionGroup module directly HOT 4
- velocity-animate@^2.0.0 compatibility HOT 1
- next is not a function HOT 1
- slideDown finishes "too early" HOT 1
- Missing typings HOT 2
- Is this project still being developed? HOT 5
- Update react-transition-group HOT 3
- TransitionGroup CJS require not valid HOT 1
- Issue in Webpack production build
- VelocityTransitionGroup throws Strict Mode warnings HOT 3
- How to use sequences?
- TypeError: this.updater.enqueueCallback is not a function
- Upgrading to react 17 gives error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from velocity-react.