gre / kenburns

Ken Burns effect for DOM, Canvas2D, WebGL
http://kenburns.surge.sh/
ISC License
74 stars 9 forks source link

Fix package main #9

Closed strarsis closed 7 years ago

strarsis commented 7 years ago

In package.json the old path is still used: https://github.com/gre/kenburns/blob/master/package.json#L4

I currently have to use a resolve alias in webpack for resolving it correctly:

[...]
  resolve. {
    alias: {
      kenburns: "kenburns/src"
    }
  }
[...]
gre commented 7 years ago

this path is actually correct. the library is published on NPM with the lib/ folder that is the 'built' version. lib folder is exported with the .js 'babel compiled' files, the .js.map sourcemaps and even the *.js.flow flowtypes.

when you install via npm:

➜ tree node_modules/kenburns
node_modules/kenburns
├── LICENSE
├── README.md
├── kenburns.js
├── lib
│   ├── Base.js
│   ├── Base.js.flow
│   ├── Base.js.map
│   ├── Canvas2D.js
│   ├── Canvas2D.js.flow
│   ├── Canvas2D.js.map
│   ├── DOM.js
│   ├── DOM.js.flow
│   ├── DOM.js.map
│   ├── WebGL.js
│   ├── WebGL.js.flow
│   ├── WebGL.js.map
│   ├── index.js
│   ├── index.js.flow
│   ├── index.js.map
│   └── utils
│       ├── cssRgba.js
│       ├── cssRgba.js.flow
│       └── cssRgba.js.map
├── package.json
└── src
    ├── Base.js
    ├── Canvas2D.js
    ├── DOM.js
    ├── WebGL.js
    ├── index.js
    └── utils
        └── cssRgba.js

4 directories, 28 files

and then you should not have to do any alias, it should work if you import "kenburns" / require("kenburns")

strarsis commented 7 years ago

What would be the best approach importing the kenburns DOM module standalone?

With the webpack resolve alias, I currently use - but how to avoid it for /DOM, too?

[...]
import KenBurnsDOM  from 'kenburns/DOM';
[...]
gre commented 7 years ago

https://github.com/gre/kenburns/blob/master/README.md

see in the main README:

import KenBurnsDOM from "kenburns/lib/DOM";
import rectCrop from "rect-crop";
import bezierEasing from "bezier-easing";
const image = new Image();
image.src = "http://i.imgur.com/Uw2EQEk.jpg";
image.onload = () => {
  var div = document.createElement("div");
  document.body.appendChild(div);
  div.style.width = "400px";
  div.style.height = "400px";
  var kenBurns = new KenBurnsDOM(div);
  kenBurns.animate(
    image,
    rectCrop(0.4, [0.15, 0.38]),
    rectCrop.largest,
    5000,
    bezierEasing(0.6, 0.0, 1.0, 1.0)
  );
};
strarsis commented 7 years ago

Thanks!