GithubHelp home page GithubHelp logo

raf's Introduction

raf

Browser Support

requestAnimationFrame polyfill for node and the browser.

var raf = require('raf')

raf(function tick() {
  // Animation logic
  raf(tick)
})

Note: The stream/event emitter logic found in versions prior to 1.0.0 can be found in raf-stream.

Getting started

CommonJS (Node, Browserify, Webpack, etc.)

Install raf from npm:

npm install --save raf

Require it like you would any other module:

const raf = require('raf')

AMD (require.js, etc)

Download the UMD-bundle from wzrd.in (remember to include the current version number in the filename).

Add it to your AMD module loader config and require it like you would any other module:

define(['raf'], raf => {...})

<script>

Download the UMD-bundle from wzrd.in (remember to include the current version number in the filename).

Then include it via a script tag:

<script src="raf-x.x.x.js"></script>

The API will be available on window.raf.

API

Documentation at Mozilla Developer Network, W3 Specification

var handle = raf(callback)

callback is the function to invoke in the next frame. handle is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value.

raf.cancel(handle)

handle is the entry identifier returned by raf(). Removes the queued animation frame callback (other queued callbacks will still be invoked unless cancelled).

raf.polyfill([object])

Shorthand to polyfill window.requestAnimationFrame and window.cancelAnimationFrame if necessary (Polyfills global in node).

Alternatively you can require raf/polyfill which will act the same as require('raf').polyfill().

If you provide object the polyfills are attached to that given object, instead of the inferred global. Useful if you have an instance of a fake window object, and want to add raf and caf to it.

Acknowledgments

Based on work by Erik Möller, Paul Irish, and Tino Zijdel (https://gist.github.com/paulirish/1579671)

License

MIT

raf's People

Contributors

caseywebb avatar chrisdickinson avatar cmtegner avatar devinrhode2 avatar dylanpiercey avatar heyimalex avatar hughsk avatar iclanzan avatar ljharb avatar max-mapper avatar patricksmms avatar raynos avatar simenb avatar soenkekluth avatar tombyrer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

raf's Issues

poor debugging experience in Chrome

It seems like errors inside the raf handler are not really handled elegantly by Chrome.

require('raf')(function() {
    var foo = undefined;
    foo.bar()
})

Screen shot of debugger which breaks on errors. It doesn't give us any indication of where the error is actually coming from.

img

Using a normal requestAnimationFrame function works fine; Chrome can pinpoint the problem and break on it.

requestAnimationFrame(function() {
    var foo = undefined;
    foo.bar()
})

Proposal: Splitting up and improving raf

Hi!

I've been doing quite a bit of research around requestAnimationFrame (rAF) over the past few days in conjunction with a couple of pet projects. I went looking for a rAF polyfill in the form of a NPM module which could be used both in Node and in the browser (via browserify). I was hoping that this module was the answer, but after a bit of trial and error I've come to a couple of realisations:

  1. This isn't really just a polyfill, it's a polyfill wrapped in a event emitter, essentially making it a rAF stream. This isn't necessarily a bad thing, but I think the main point of a polyfill is to deliver a feature which follows the spec as closely as possible. While this module covers the functional part of the spec, it forces a usage pattern which differs significantly from the spec.
  2. The setTimeout/setImmediate fallback is wrong. rAF is supposed to trigger 60 times a second (every 16.6ms), but your fallback triggers as fast as the system allows it. In Node on my Mac I got about 1k "FPS".

My proposal:

  1. Split this module in two. raf and raf-stream (or similar). raf will cover the polyfill part, delivering a near-as-possible spec version of rAF, to be used in the browser (via browserify) and in Node. raf-stream will use raf and build a streaming interface on the top of it.
  2. Use Erik Möller and Paul Irish's work to create a working fallback in raf.

If you think this sounds reasonable then I'm willing to put in the work to get it done.

GraalVM support? ReferenceError: global is not defined

Just a small feature request:
Add support for undefined global namespace, if js-runtime environment is not a browser and not a nodejs.

TL;DR

// webpackBootstrap
require("raf");
org.graalvm.polyglot.PolyglotException: ReferenceError: global is not defined
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/raf/index.js?:2)

Workaround

var global = {};
// run webpack stuff:
require("raf");
// webpack import ok

Full GraalVM backtrace

Mostly useless.

EXPAND BACKTRACES
Exception in thread "ScalaGraal-pool-1-thread-1" japgolly.scalagraal.ExprError$EvalError: ReferenceError: global is not defined
	at japgolly.scalagraal.ExprError$InEval$.unapply(ExprError.scala:23)
	at japgolly.scalagraal.Expr$.$anonfun$apply$2(Expr.scala:168)
	at japgolly.scalagraal.Expr.$anonfun$$greater$greater$1(Expr.scala:144)
	at japgolly.scalagraal.Expr.evalOrThrow(Expr.scala:25)
	at japgolly.scalagraal.GraalContext$Builder.evalOrThrow$1(GraalContext.scala:131)
	at japgolly.scalagraal.GraalContext$Builder.$anonfun$build$3(GraalContext.scala:134)
	at japgolly.scalagraal.GraalContext$Builder.$anonfun$build$3$adapted(GraalContext.scala:134)
	at scala.Option.foreach(Option.scala:437)
	at japgolly.scalagraal.GraalContext$Builder.build(GraalContext.scala:134)
	at japgolly.scalagraal.GraalContextPool$Builder$Fixed$Step2A.$anonfun$build$1(GraalContextPool.scala:84)
	at scala.Function1.$anonfun$andThen$1(Function1.scala:85)
	at japgolly.scalagraal.GraalContextPool$Builder$Fixed$Step2B.$anonfun$build$2(GraalContextPool.scala:96)
	at japgolly.scalagraal.GraalContextPool$DefaultContextThread$$anon$2.run(GraalContextPool.scala:164)
	at java.base/java.lang.Thread.run(Thread.java:829)
Caused by: org.graalvm.polyglot.PolyglotException: ReferenceError: global is not defined
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/raf/index.js?:2)
	at <js>../node_modules/raf/index.js(showcasessr-fastopt-library.js:4941)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/react-motion/lib/Motion.js?:31)
	at <js>../node_modules/react-motion/lib/Motion.js(showcasessr-fastopt-library.js:5050)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/react-motion/lib/react-motion.js?:7)
	at <js>../node_modules/react-motion/lib/react-motion.js(showcasessr-fastopt-library.js:5116)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:anonymous(webpack://ScalaJSBundlerLibrary/./node_modules/react-stonecutter/lib/react-stonecutter.js?:1)
	at org.graalvm.sdk/org.graalvm.polyglot.Context.eval(Context.java:379)
	... 13 more
Exception in thread "ScalaGraal-pool-1-thread-2" japgolly.scalagraal.ExprError$EvalError: ReferenceError: global is not defined
	at japgolly.scalagraal.ExprError$InEval$.unapply(ExprError.scala:23)
	at japgolly.scalagraal.Expr$.$anonfun$apply$2(Expr.scala:168)
	at japgolly.scalagraal.Expr.$anonfun$$greater$greater$1(Expr.scala:144)
	at japgolly.scalagraal.Expr.evalOrThrow(Expr.scala:25)
	at japgolly.scalagraal.GraalContext$Builder.evalOrThrow$1(GraalContext.scala:131)
	at japgolly.scalagraal.GraalContext$Builder.$anonfun$build$3(GraalContext.scala:134)
	at japgolly.scalagraal.GraalContext$Builder.$anonfun$build$3$adapted(GraalContext.scala:134)
	at scala.Option.foreach(Option.scala:437)
	at japgolly.scalagraal.GraalContext$Builder.build(GraalContext.scala:134)
	at japgolly.scalagraal.GraalContextPool$Builder$Fixed$Step2A.$anonfun$build$1(GraalContextPool.scala:84)
	at scala.Function1.$anonfun$andThen$1(Function1.scala:85)
	at japgolly.scalagraal.GraalContextPool$Builder$Fixed$Step2B.$anonfun$build$2(GraalContextPool.scala:96)
	at japgolly.scalagraal.GraalContextPool$DefaultContextThread$$anon$2.run(GraalContextPool.scala:164)
	at java.base/java.lang.Thread.run(Thread.java:829)
Caused by: org.graalvm.polyglot.PolyglotException: ReferenceError: global is not defined
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/raf/index.js?:2)
	at <js>../node_modules/raf/index.js(showcasessr-fastopt-library.js:4941)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/react-motion/lib/Motion.js?:31)
	at <js>../node_modules/react-motion/lib/Motion.js(showcasessr-fastopt-library.js:5050)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:program(webpack://ScalaJSBundlerLibrary/./node_modules/react-motion/lib/react-motion.js?:7)
	at <js>../node_modules/react-motion/lib/react-motion.js(showcasessr-fastopt-library.js:5116)
	at <js>.__webpack_require__(showcasessr-fastopt-library.js:5808)
	at <js>.:anonymous(webpack://ScalaJSBundlerLibrary/./node_modules/react-stonecutter/lib/react-stonecutter.js?:1)
	at org.graalvm.sdk/org.graalvm.polyglot.Context.eval(Context.java:379)
	... 13 more

Add UMD bundle to npm package

Since wzrd.in doesn't work (SSL certificate issue) it's impossible to import raf directly from CDN. It'd be nice to add UMD bundle to npm package, this way we can import lib from unpkg.com - example

Instruction on how to use this in browser

This my be considered an issue from perspective of someone who is not nodejs ninja and don't have intentions on using this polyfill in non-browser environment .

What should one do to have browser code built from this?
From what I can see&understand this is for node use.

I have cloned this version locally, and run npm install - which gave me performance-now.

But still I don't get this.

I do care specifically about this polyfill since it is only one I could find that implements callback queueing - fantastic job.

not working on 0.10.30

The tests aren't working on the latest version of node stable, 0.10.30:

$ npm test
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info pretest [email protected]
npm info test [email protected]

> [email protected] test /home/substack/projects/raf
> node test.js

TAP version 13
# continues to emit events
ok 1 time has passed: 32.195365
ok 2 time has passed: 48.86203166666667
ok 3 time has passed: 65.52869833333334

and it times out after that line.

Everything works fine on 0.10.29 and below.

Security issue through preformance-now

Hi,

In your dependencies theres this performance-now package which has no Github page btw and wasn't touched since 4 years. This packages uses a deprecated coffee script version which is a security threat ( we were PEN tested recently and this came up there ).

To be honest this performance-now also doesn't looks okey, no Github page or any other, wasn't touched since years, etc.

Any chance for removing these in the future?

CHANGELOG missing

I just saw the package is updated to v3.4.1, but I can't find any CHANGELOG to check out the changes.

Would you guys be so kind to provide us with a decent CHANGELOG please? 🙂

Thanks for all your hard work! 🙂

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.