haikuteam / core Goto Github PK

View Code? Open in Web Editor NEW

762.0 762.0 43.0 15.75 MB

:rice: Interactive UI animation engine for the Web. Core renderer for Haiku Animator.

Home Page: https://www.haikuforteams.com

License: Other

JavaScript 3.06% TypeScript 96.94%

animation svg web

core's People

Contributors

Stargazers

Watchers

core's Issues

Cannot resize an SVG element

Hi,

Just tried the app and can't make it work with some SVG files.

Description of the bug

Tried to scale an imported SVG file through the main view but it keep throwing me errors.
Everytime I try to close the errors, a new one comes.
Also, while I'm getting those errors, I can't do anything on the rest of the app except closing the errors.

How to reproduce

I drag-dropped this simple SVG file in the Haiku view:

<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 268.5 319.2">
  <path fill="#92c9ed" d="M134.256 242.731c-58.7 0-106.3-47.6-106.3-106.3 0-58.7 47.6-106.3 106.3-106.3s106.3 47.6 106.3 106.3c0 58.7-47.6 106.3-106.3 106.3m134.3-108.5c0-74.2-60.1-134.3-134.3-134.3-74.2 0-134.3 60.1-134.3 134.3 0 59.1 38.2 109.4 91.4 127.3l42.9 57.7 42.9-57.7h-.1c53.2-17.9 91.5-68.1 91.5-127.3"/>
</svg>

Throw these errors:

Version:
OS: macOS 10.13.3
App version: 3.1.4

Install @haiku@core in angular project

Having trouble with Haiku Animator? Realtime support is available in our Haiku Community Slack. Thank you for your interest in Haiku!
Hello Team,

I am trying to install @haiku/core in my angular project but it says...

´´´
hrathod@Mini-de-hexasys poc-haiku-animator % npm i @haiku/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"^14.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^6.0.9" from @haiku/[email protected]
npm ERR! node_modules/@haiku/core
npm ERR! @haiku/core@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/hrathod/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/hrathod/.npm/_logs/2022-07-01T08_28_54_948Z-debug-0.log

´´´
Can you please tell me how to install the haiku core in an angular project?
Also,
Can you add me to the haiku slack community so I can ask all the problems I am facing, please!!!!

We couldn't load the contents of ..

Hi, I'm trying to add sketch file or svg file without success on the mac app.
I'm having a: "We couldn't load the contents of designs/icon.svg"

file is here:
icon_huit.svg.zip

Thanks you

Custom style attributes

Hi Haiku,

I'm using Haiku for Mac, and would like to know if custom style css could be added to elements, just like cursor, z-index, and so on. One example would be "fill" attribute for svgs. Example: angry state could result in my character being red instead of black. I tried to manually add it into code.js, but it didn't change anything.

Thank you!

problems to use the app

I just created my account, downloaded the app but I can't log in. Apparently t's not the password or the email that is wrong or anything like that, but it keeps showing just an "Uncategorized Error" message, so I don't really know, no feedbacks.

Working vanilla JS code example

Is this project still maintained? I tried many examples and none of them worked.

In docs it's stated to use

<script src="https://code.haiku.ai/scripts/core/HaikuCore.VERSION.js"></script>

but it doesn't seem to work. Can you provide codepen to working example, where HaikuCore is imported from CDN (no React/Vue project)?

Thanks!

timeline.matchesCriteria is not a function

I have the next issue apparently with Haiku. When I make a build and run on local It works fine but when I deploy on my https web page It just doesn't work.

HaikuTimeline.js?abdd:411 Uncaught TypeError: timeline.matchesCriteria is not a function
    at eval (HaikuTimeline.js?abdd:411)
    at Array.filter (<anonymous>)
    at Function.HaikuTimeline.where (HaikuTimeline.js?abdd:410)
    at HaikuComponent.fetchTimelines (HaikuComponent.js?4537:325)
    at eval (HaikuComponent.js?4537:315)
    at HaikuComponent.HaikuBase.cacheFetch (HaikuBase.js?419e:78)
    at HaikuComponent.getTimelines (HaikuComponent.js?4537:314)
    at HaikuComponent.assignConfig (HaikuComponent.js?4537:258)
    at new HaikuComponent (HaikuComponent.js?4537:110)
    at new HaikuContext (HaikuContext.js?b900:80)
    at HaikuComponentFactory (HaikuContext.js?b900:338)
    at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.createContext (HaikuReactDOMAdapter.js?4056:138)
    at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:502)
    at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.attemptMount (HaikuReactDOMAdapter.js?4056:60)
    at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:502)
    at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.componentDidMount (HaikuReactDOMAdapter.js?4056:56)
    at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:492)
    at commitLifeCycles (react-dom.development.js?5cd0:8770)
    at commitAllLifeCycles (react-dom.development.js?5cd0:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js?5cd0:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?5cd0:581)
    at invokeGuardedCallback (react-dom.development.js?5cd0:438)
    at commitRoot (react-dom.development.js?5cd0:10050)
    at performWorkOnRoot (react-dom.development.js?5cd0:11017)
    at performWork (react-dom.development.js?5cd0:10967)
    at requestWork (react-dom.development.js?5cd0:10878)
    at scheduleWorkImpl (react-dom.development.js?5cd0:10732)
    at scheduleWork (react-dom.development.js?5cd0:10689)
    at Object.enqueueSetState (react-dom.development.js?5cd0:6212)
    at ProxyComponent.Component.setState (react.development.js?a3af:237)
    at ProxyComponent._callee8$ (index.js?4b73:670)
    at tryCatch (runtime.js?d004:62)
    at Generator.invoke [as _invoke] (runtime.js?d004:296)
    at Generator.prototype.(/anonymous function) [as next] (webpack-internal:///../../../regenerator-runtime/runtime.js:114:21)
    at step (index.js?4b73:481)
    at eval (index.js?4b73:481)
(anonymous) @ HaikuTimeline.js?abdd:411
HaikuTimeline.where @ HaikuTimeline.js?abdd:410
HaikuComponent.fetchTimelines @ HaikuComponent.js?4537:325
(anonymous) @ HaikuComponent.js?4537:315
HaikuBase.cacheFetch @ HaikuBase.js?419e:78
HaikuComponent.getTimelines @ HaikuComponent.js?4537:314
HaikuComponent.assignConfig @ HaikuComponent.js?4537:258
HaikuComponent @ HaikuComponent.js?4537:110
HaikuContext @ HaikuContext.js?b900:80
HaikuComponentFactory @ HaikuContext.js?b900:338
HaikuReactDOMAdapter.HaikuReactComponentInternal.createContext @ HaikuReactDOMAdapter.js?4056:138
wrappedMethod @ react-hot-loader.development.js?d9b4:502
HaikuReactDOMAdapter.HaikuReactComponentInternal.attemptMount @ HaikuReactDOMAdapter.js?4056:60
wrappedMethod @ react-hot-loader.development.js?d9b4:502
HaikuReactDOMAdapter.HaikuReactComponentInternal.componentDidMount @ HaikuReactDOMAdapter.js?4056:56
wrappedMethod @ react-hot-loader.development.js?d9b4:492
commitLifeCycles @ react-dom.development.js?5cd0:8770
commitAllLifeCycles @ react-dom.development.js?5cd0:9946
callCallback @ react-dom.development.js?5cd0:542
invokeGuardedCallbackDev @ react-dom.development.js?5cd0:581
invokeGuardedCallback @ react-dom.development.js?5cd0:438
commitRoot @ react-dom.development.js?5cd0:10050
performWorkOnRoot @ react-dom.development.js?5cd0:11017
performWork @ react-dom.development.js?5cd0:10967
requestWork @ react-dom.development.js?5cd0:10878
scheduleWorkImpl @ react-dom.development.js?5cd0:10732
scheduleWork @ react-dom.development.js?5cd0:10689
enqueueSetState @ react-dom.development.js?5cd0:6212
Component.setState @ react.development.js?a3af:237
_callee8$ @ index.js?4b73:670
tryCatch @ runtime.js?d004:62
invoke @ runtime.js?d004:296
prototype.(anonymous function) @ runtime.js?d004:114
step @ index.js?4b73:481
(anonymous) @ index.js?4b73:481
Promise.then (async)
step @ index.js?4b73:481
(anonymous) @ index.js?4b73:481
(anonymous) @ index.js?4b73:481
RouteData._this2.loadRouteData @ index.js?4b73:680
componentWillMount @ index.js?4b73:688
wrappedMethod @ react-hot-loader.development.js?d9b4:502
callComponentWillMount @ react-dom.development.js?5cd0:6370
mountClassInstance @ react-dom.development.js?5cd0:6435
updateClassComponent @ react-dom.development.js?5cd0:7840
beginWork @ react-dom.development.js?5cd0:8225
performUnitOfWork @ react-dom.development.js?5cd0:10224
workLoop @ react-dom.development.js?5cd0:10288
callCallback @ react-dom.development.js?5cd0:542
invokeGuardedCallbackDev @ react-dom.development.js?5cd0:581
invokeGuardedCallback @ react-dom.development.js?5cd0:438
renderRoot @ react-dom.development.js?5cd0:10366
performWorkOnRoot @ react-dom.development.js?5cd0:11014
performWork @ react-dom.development.js?5cd0:10967
requestWork @ react-dom.development.js?5cd0:10878
scheduleWorkImpl @ react-dom.development.js?5cd0:10732
scheduleWork @ react-dom.development.js?5cd0:10689
scheduleTopLevelUpdate @ react-dom.development.js?5cd0:11193
updateContainer @ react-dom.development.js?5cd0:11231
(anonymous) @ react-dom.development.js?5cd0:15226
unbatchedUpdates @ react-dom.development.js?5cd0:11102
renderSubtreeIntoContainer @ react-dom.development.js?5cd0:15225
render @ react-dom.development.js?5cd0:15290
render @ index.js?84b3:14
(anonymous) @ index.js?84b3:18
(anonymous) @ index.js?84b3:19
../../../../src/index.js @ app.225e5abc.js:1149
__webpack_require__ @ app.225e5abc.js:679
fn @ app.225e5abc.js:89
0 @ app.225e5abc.js:5822
__webpack_require__ @ app.225e5abc.js:679
(anonymous) @ app.225e5abc.js:725
(anonymous) @ app.225e5abc.js:728
index.js?4bfd:2177 The above error occurred in the <HaikuReactComponentInternal> component:
    in HaikuReactComponentInternal (created by Unknown)
    in div (created by StyledComponents__MainAnimation)
    in StyledComponents__MainAnimation (created by Unknown)
    in div (created by StyledComponents__MainSection)
    in StyledComponents__MainSection (created by Unknown)
    in div (created by Unknown)
    in div (created by StyledComponents__HomeContainer)
    in StyledComponents__HomeContainer (created by Unknown)
    in div (created by Unknown)
    in Unknown (created by RouteData)
    in RouteData (created by Route)
    in Route (created by withRouter(RouteData))
    in withRouter(RouteData) (created by ConnectedRouteData)
    in ConnectedRouteData (created by Route)
    in Route (created by Routes)
    in Routes (created by App)
    in div (created by App__AppStyles)
    in App__AppStyles (created by App)
    in RouterScroller (created by Route)
    in Route (created by withRouter(RouterScroller))
    in withRouter(RouterScroller) (created by Router)
    in Router (created by Router)
    in Router (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp

React will try to recreate this component tree from scratch using the error boundary you provided, Router.

PLEASE SUPPORT WINDOWS 10!

Demos throw type error

Checking out master and running demos gives,

bash-3.2$ yarn install
bash-3.2$ yarn compile
bash-3.2$ yarn demos
yarn run v1.15.2
$ yarn ts ./scripts/demos.ts
$ cross-env NODE_ENV=test ts-node -r tsconfig-paths/register -P tsconfig.all.json ./scripts/demos.ts

.../core/node_modules/ts-node/src/index.ts:253
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
scripts/demos.ts(19,3): error TS2345: Argument of type '{ stdio: string; cwd: string; }' is not assignable to parameter of type 'SpawnOptions'.
  Types of property 'stdio' are incompatible.
    Type 'string' is not assignable to type 'StdioOptions'.

    at createTSError (.../core/node_modules/ts-node/src/index.ts:253:12)
    at getOutput (.../core/node_modules/ts-node/src/index.ts:363:40)
    at Object.compile (.../core/node_modules/ts-node/src/index.ts:551:11)
    at Module.m._compile (.../core/node_modules/ts-node/src/index.ts:435:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Object.require.extensions.(anonymous function) [as .ts] (.../core/node_modules/ts-node/src/index.ts:438:12)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command

yet all tests pass successfully.

Position of Sketch Elements to be Synced

Thanks for such a nice concept. It would be great if you Haiku can retain the position of sketch elements.

Currently, the only workaround is copy pasting Sketch - Position > X to Haiku - Position X which is not effective for multiple Slices

UI to revert back to old version

Thanks for such a nice concept.

The problem is all changes get auto-saved by clicking Back Arrow ( Next to Haiku Logo )

It would be great if you Haiku UI can provide git versions to revert back/ or Alert user should change be auto saved.

Currently, the only workaround is Developer > Open in Terminal > $git reset --hard HEAD~1

Potential Trademark Issues

It's possible that Haiku might conflict with the trademarks of Haiku, Inc. and Haiku (the operating system)

The similar Industry (Software) and similar branding could cause consumer confusion.
Haiku is proud of its branding and has enjoyed use of the trademark (registered and unregistered) since 2003. Haiku lives in the open-source ecosystem, so I'm posting this here publically to document our concerns.

"TypeError: Cannot read property 'defaultView' of undefined"

Hello guys! Nice concept!

I just tried importing the exported vue component,

<template>
    <div>
        <percy :loop="true"></percy>
    </div>
</template>

<script>
    import Vue from 'vue'
    import percy from '@haiku/trusktr-percy'

    export default Vue.extend( {
        components: { percy },
    } )
</script>

and I get an error in the browser console:

Any ideas?

Use ES6 throughout

First, congrats on open sourcing this! Really excited to see where this project goes. I was curious if there is a roadmap for converting things to use ES6? I'd love to take a stab at converting things if possible, seems simple enough and I'd love to learn more about the interworkings of everything 😇please let me know and I can start working on a PR.

Update to support react 17

Update react adapter to support react 17 and remove warning:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: HaikuReactComponentInternal

Add Elm support.

Would it be possible to add support for Elm? Our entire front-end is written in Elm and we try hard to shy away from porting out to JavaScript as much as possible. Having Elm support would provide us with greater flexibility.

haikuteam / core Goto Github PK

core's People

Contributors

Stargazers

Watchers

Forkers

core's Issues

Description of the bug

How to reproduce

Recommend Projects

Recommend Topics

Recommend Org