Trying to import zdog with es6 syntax

[sammdec]

When es6 import syntax none of the modules are exported or available on the Zdog class
Test case: https://codesandbox.io/embed/hungry-darwin-59jh7

[desandro]

This is indeed a bug. I totally forgot to attach the classes to the Zdog namespace for CommonJS

[sammdec]

I know what it’s like trying to do projects in between being a new parent, I think it’s amazing you managed to do all this. A few bugs are bound to slip through! Really awesome project. Would you like me to have a go at a PR?

[desandro]

I'll take care of this in the next release. Thanks for the offer and the kind words 🐶

[davekiss]

Just installed your patch, and I'm seeing an error after calling illo.updateRenderGraph() in a React/babelfied env when attempting to render

Uncaught ReferenceError: Zdog is not defined
    at anchor.js:158
    at Array.forEach (<anonymous>)
    at Item.Anchor.renderGraphCanvas (anchor.js:157)
    at Item.Illustration.renderGraphCanvas (illustration.js:146)
    at Item.Illustration.renderGraph (illustration.js:107)
    at Item.Illustration.updateRenderGraph (illustration.js:116)

I was able to fix by forcing the window variable after import

import Zdog from "zdog";
window.Zdog = Zdog;

[Merak1]

import Zdog from "zdog";
window.Zdog = Zdog;

Im also trying it on React, although Im not as experienced with neither react nor web development in general,I was having the same issue about Zdog being undefined, then I tried your fixed and worked but now I keep getting this error

any Ideas on how to solve this issue?

I installed Zdog with npm

[desandro]

@davekiss Ah. That looks to be a separate bug. I've pushed up a fix. Thanks so much for reporting that one.

@Merak1 The fix has yet to be released. You'll have to wait a bit before using Zdog with npm & React.

[boardfish]

@desandro Are there plans for full React compatibility? Right now an Illustration, among other objects, needs to reference an element on the page in order to be rendered. It'd be nice to see them wrapped in React components that can be dropped in as with any other.

[sammdec]

It’s maybe not your ideal solution but I managed to implement it in a react app by using refs in react. You will need to use effect as well as ref is undefined when the page loads

[marcelinollano]

I'm trying to import Zdog using npm from master and I keep getting the following error when trying to do dragRotate: true:

dragger.js:84 Uncaught TypeError: window.addEventListener is not a function
    at Item.Dragger.dragStart (dragger.js:84)
    at Item.Illustration.dragStart (illustration.js:230)
    at Item.Dragger.onmousedown.Dragger.onpointerdown (dragger.js:73)
    at Item.Dragger.handleEvent (dragger.js:67)

Not sure what's going on 🤔

The same code runs fine with:

<script src="https://unpkg.com/[email protected]/dist/zdog.dist.min.js"></script>

[desandro]

v1.0.2 has been released with fixes for these bug. Please update! Closing as fixed.

[mkaemmerer]

I tried out the 1.0.2 release today, and it looks like although the es6 imports are working now, I ran into the same dragger bug @marcelinollano mentioned.

dragger.js:84 Uncaught TypeError: window.addEventListener is not a function
    at Item.Dragger.dragStart (dragger.js:84)
    at Item.Illustration.dragStart (illustration.js:232)
    at Item.Dragger.onmousedown.Dragger.onpointerdown (dragger.js:73)
    at Item.Dragger.handleEvent (dragger.js:67)

[desandro]

@mkaemmerer I've opened #49 to track this separate issue.