DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Provide asm.js compiled assets in npm package #444

New Issue
Closed
opened 2017-02-28 18:35:12 -08:00 by pseudo-su · 28 comments
pseudo-su commented 2017-02-28 18:35:12 -08:00 (Migrated from github.com)
Copy Link

I'd like to use yoga to handle svg positioning + generation from a browser similar to this

http://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html

I was expecting to be able to install the yoga-layout npm package and

require('yoga-layout/dist/Yoga.browser.js')

Providing the asm.js bundled library could also help to implement #419

I'd like to use yoga to handle svg positioning + generation from a browser similar to this http://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html I was expecting to be able to install the yoga-layout npm package and ```js require('yoga-layout/dist/Yoga.browser.js') ``` Providing the asm.js bundled library could also help to implement #419
👍 10
arcanis commented 2017-03-22 05:33:38 -07:00 (Migrated from github.com)
Copy Link

The asm.js build should already be distributed along with the npm package. You just have to use require("yoga-layout"), and your bundler will pick the right build (because of this line).

The asm.js build should already be distributed along with the npm package. You just have to use `require("yoga-layout")`, and your bundler will pick the right build (because of [this line](https://github.com/facebook/yoga/blob/master/javascript/package.json#L12)).
jaladankisuresh commented 2017-03-24 00:45:04 -07:00 (Migrated from github.com)
Copy Link

@arcanis I dont seem to find asm.js as part of the npm package. I have installed it on window 10 using these steps

I had built svg layout engine called placard which uses yoga-layout internally for generating dynamic svg layouts. Yes, it is inspired by scottlogic post from Colin Eberhard.

I hope, it could be of some help to the javascript/node community

@arcanis I dont seem to find asm.js as part of the npm package. I have installed it on window 10 using these [steps](https://github.com/facebook/yoga/issues/411#issuecomment-288963275) I had built svg layout engine called [placard](https://github.com/jaladankisuresh/placard) which uses yoga-layout internally for generating dynamic svg layouts. Yes, it is inspired by [scottlogic post](http://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html) from Colin Eberhard. I hope, it could be of some help to the javascript/node community
arcanis commented 2017-04-18 09:47:02 -07:00 (Migrated from github.com)
Copy Link

I just checked and the asm.js build is in the latest release:

❯ [mael-mbp?] /tmp ❯ ll node_modules/yoga-layout/build/Release

total 952K
drwxr-xr-x 3 mael wheel  102 Apr 18 17:45 obj.target
-rw-r--r-- 1 mael wheel 391K Feb 24 16:12 nbind.js
-rwxr-xr-x 1 mael wheel 559K Apr 18 17:45 nbind.node
I just checked and the asm.js build is in the latest release: ``` ❯ [mael-mbp?] /tmp ❯ ll node_modules/yoga-layout/build/Release total 952K drwxr-xr-x 3 mael wheel 102 Apr 18 17:45 obj.target -rw-r--r-- 1 mael wheel 391K Feb 24 16:12 nbind.js -rwxr-xr-x 1 mael wheel 559K Apr 18 17:45 nbind.node ```
emilsjolander commented 2017-04-26 09:36:00 -07:00 (Migrated from github.com)
Copy Link

Closing as it seems to be there. I'll also make a new release this Friday. Re-open if you still have issues after that 👍

Closing as it seems to be there. I'll also make a new release this Friday. Re-open if you still have issues after that 👍
👍 1
gevgeny commented 2017-04-28 07:14:31 -07:00 (Migrated from github.com)
Copy Link

Should it also work in a browser ? Webpack answers with an error:

ERROR in ./~/yoga-layout/build/Release/nbind.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/yoga-layout/build/Release'
 @ ./~/yoga-layout/build/Release/nbind.js 1:1365-1378
 @ ./~/yoga-layout/sources/entry-browser.js
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx
Should it also work in a browser ? Webpack answers with an error: ``` ERROR in ./~/yoga-layout/build/Release/nbind.js Module not found: Error: Can't resolve 'fs' in '.../node_modules/yoga-layout/build/Release' @ ./~/yoga-layout/build/Release/nbind.js 1:1365-1378 @ ./~/yoga-layout/sources/entry-browser.js @ ./src/index.tsx @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx ```
arcanis commented 2017-04-28 07:19:53 -07:00 (Migrated from github.com)
Copy Link

That's weird - the build shouldn't need the fs module. Maybe a debug fopen symbol or similar has been left unguarded?

That's weird - the build shouldn't need the `fs` module. Maybe a debug `fopen` symbol or similar has been left unguarded?
gevgeny commented 2017-04-28 07:41:54 -07:00 (Migrated from github.com)
Copy Link

Found such code ...var nodeFS=require("fs");var nodePath=require("path")... in node_modules/yoga-layout/build/Release/nbind.js

Found such code `...var nodeFS=require("fs");var nodePath=require("path")...` in `node_modules/yoga-layout/build/Release/nbind.js`
gevgeny commented 2017-04-28 10:43:05 -07:00 (Migrated from github.com)
Copy Link

@arcanis btw, Does it make sense to use yoga in a browser if a browser has native css flexbox support ? what are the prose if does ?

@arcanis btw, Does it make sense to use yoga in a browser if a browser has native css flexbox support ? what are the prose if does ?
emilsjolander commented 2017-04-28 10:44:58 -07:00 (Migrated from github.com)
Copy Link

Yeah its useful at times in the browser :) for example if building webgl experiences.

Yeah its useful at times in the browser :) for example if building webgl experiences.
gevgeny commented 2017-04-28 10:47:58 -07:00 (Migrated from github.com)
Copy Link

What about DOM layout based on yoga ?

What about DOM layout based on yoga ?
emilsjolander commented 2017-04-28 10:49:55 -07:00 (Migrated from github.com)
Copy Link

Possibly, i'm not the right person to know that though

Possibly, i'm not the right person to know that though
👍 1
chrisregnier commented 2017-04-30 02:24:30 -07:00 (Migrated from github.com)
Copy Link

I've spent a week trying to get this library working in the browser with no luck :(

I've got the same issues that it Can't resolve 'fs' in nbind.js . But after manually taking out the node code it fails with Uncaught TypeError: Cannot read property 'slice' of null, because var sourceRegex = /^function\s*\(([^)]*)\)\s*{\s*([^*]*?)[\s;]*(?:return\s*(.*?)[;\s]*)?}$/; fails to parse the functions its used on.

After looking into that, it seems webpack/babel added names to the anonymous functions cause they weren't in the source and the regex doesn't parse functions with names. After fixing that I'm stuck at this one :
Uncaught ReferenceError: _a is not defined from
_a = _typeModule(_typeModule), _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;

I suspect a lot of the problems are due to babel mangling things, but I've been trying for hours to figure out how to load a script as is w/o running it through babel-loader, and I can't find what I need.

Has anyone gotten this to work using webpack and got a solution for the require('fs') issue to start with?
As well, are there any actually working examples/tests that you have to validate that this works in the browser as published? And works by using require('yoga-layout')?

I've spent a week trying to get this library working in the browser with no luck :( I've got the same issues that it `Can't resolve 'fs' `in nbind.js . But after manually taking out the node code it fails with `Uncaught TypeError: Cannot read property 'slice' of null`, because `var sourceRegex = /^function\s*\(([^)]*)\)\s*{\s*([^*]*?)[\s;]*(?:return\s*(.*?)[;\s]*)?}$/;` fails to parse the functions its used on. After looking into that, it seems webpack/babel added names to the anonymous functions cause they weren't in the source and the regex doesn't parse functions with names. After fixing that I'm stuck at this one : `Uncaught ReferenceError: _a is not defined` from `_a = _typeModule(_typeModule), _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;` I suspect a lot of the problems are due to babel mangling things, but I've been trying for hours to figure out how to load a script as is w/o running it through babel-loader, and I can't find what I need. Has anyone gotten this to work using webpack and got a solution for the require('fs') issue to start with? As well, are there any actually working examples/tests that you have to validate that this works in the browser as published? And works by using require('yoga-layout')?
👍 1
emilsjolander commented 2017-04-30 02:25:54 -07:00 (Migrated from github.com)
Copy Link

I'll have a look at this before making the 1.5 release this coming week.

I'll have a look at this before making the 1.5 release this coming week.
gevgeny commented 2017-04-30 02:48:49 -07:00 (Migrated from github.com)
Copy Link

I fixed the require('fs') issue. Just added

node: {
  fs: "empty",
  module: "empty"
}

to the webpack config and it works in my TypeScript + webpack env. Also i can instruct how to generate typescript typings for the yoga if necessary ;)

I fixed the `require('fs')` issue. Just added ``` node: { fs: "empty", module: "empty" } ``` to the webpack config and it works in my TypeScript + webpack env. Also i can instruct how to generate typescript typings for the yoga if necessary ;)
gevgeny commented 2017-04-30 02:55:28 -07:00 (Migrated from github.com)
Copy Link

The lib works like a charm in DOM. Here is how I render layouted elements:

render() {
  const {layout } = this.props;
  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: layout.width,
        height: layout.height,
        transform: `translate3d(${layout.left}px, ${layout.top}px, 0px)`
      }}
    >

    </div>
   )
}
The lib works like a charm in DOM. Here is how I render layouted elements: ```jsx render() { const {layout } = this.props; return ( <div style={{ position: 'absolute', top: 0, left: 0, width: layout.width, height: layout.height, transform: `translate3d(${layout.left}px, ${layout.top}px, 0px)` }} > </div> ) } ```
gevgeny commented 2017-04-30 02:56:38 -07:00 (Migrated from github.com)
Copy Link

The only issue to me right now is very small javascript documentation ;(

The only issue to me right now is very small javascript documentation ;(
👍 1
emilsjolander commented 2017-04-30 03:00:00 -07:00 (Migrated from github.com)
Copy Link

Awesome! Yeah docs are sorely lacking. We would be very greatfull if you helped us out on that front as you are using it :)

Awesome! Yeah docs are sorely lacking. We would be very greatfull if you helped us out on that front as you are using it :)
gevgeny commented 2017-04-30 03:03:36 -07:00 (Migrated from github.com)
Copy Link

I will try to share some source with basic layouts later

I will try to share some source with basic layouts later
chrisregnier commented 2017-04-30 04:31:08 -07:00 (Migrated from github.com)
Copy Link

Bah! Moving back to the code in node_modules with your fs: 'empty' fixes things. Looks like all the other issues were symptoms of working on the code locally.

I now have it loading in the browser finally! Only a bunch of weird warnings about it parsing the .hh and .cc files still left to go.
Thanks for the help!

Also as another example of using this lib in the browser, I'm trying to use this to position svg elements within react, where each component starts with <g> and a transform for the position. So this lib is super useful for me. Thanks.

Bah! Moving back to the code in node_modules with your fs: 'empty' fixes things. Looks like all the other issues were symptoms of working on the code locally. I now have it loading in the browser finally! Only a bunch of weird warnings about it parsing the .hh and .cc files still left to go. Thanks for the help! Also as another example of using this lib in the browser, I'm trying to use this to position svg elements within react, where each component starts with `<g>` and a transform for the position. So this lib is super useful for me. Thanks.
pseudo-su commented 2017-04-30 18:33:47 -07:00 (Migrated from github.com)
Copy Link

I think my original issue would have been resolved by the fs: 'empty' and module: 'empty'.

Because I was getting errors resolving .cc and .hh files I assumed that the default entry point of the module mustn't have been the browser version.

I eventually got emscripten and llvm working on my machine and realised that I got the same error messages when I manually compiled yoga for the browser.

I did also find this library on npm that ended up working for the demo I was creating.

I think my original issue would have been resolved by the `fs: 'empty'` and `module: 'empty'`. Because I was getting errors resolving .cc and .hh files I assumed that the default entry point of the module mustn't have been the browser version. I eventually got emscripten and llvm working on my machine and realised that I got the same error messages when I manually compiled yoga for the browser. I did also find [this](https://www.npmjs.com/package/css-layout) library on npm that ended up working for the demo I was creating.
chrisregnier commented 2017-04-30 19:04:41 -07:00 (Migrated from github.com)
Copy Link

I figured out the .hh/.cc errors were from a dynamic require expression that tried to parse all the files in the same dir (#535), so hopefully that should be cleaned up for the next release.

I figured out the .hh/.cc errors were from a dynamic require expression that tried to parse all the files in the same dir (#535), so hopefully that should be cleaned up for the next release.
👍 1
arcanis commented 2017-05-01 12:12:39 -07:00 (Migrated from github.com)
Copy Link

Oh, I see. By any chance, would you be using Webpack 2? I used the asmjs release with Webpack 3, but didn't notice the error before. It's possible the "static backtick strings" support has only been added recently.

Oh, I see. By any chance, would you be using Webpack 2? I used the asmjs release with Webpack 3, but didn't notice the error before. It's possible the "static backtick strings" support has only been added recently.
chrisregnier commented 2017-05-02 22:08:13 -07:00 (Migrated from github.com)
Copy Link

I've been using webpack 1, so perhaps they've fixed things in the newest versions.

I've been using webpack 1, so perhaps they've fixed things in the newest versions.
vincentriemer commented 2017-06-22 15:07:17 -07:00 (Migrated from github.com)
Copy Link

@chrisregnier I came across similar issues to you regarding babel and adding "ignore": [ "node_modules/yoga-layout" ] to .babelrc resolved the issue for me.

@chrisregnier I came across similar issues to you regarding babel and adding `"ignore": [ "node_modules/yoga-layout" ]` to `.babelrc` resolved the issue for me.
andrewrothman commented 2017-06-28 22:44:45 -07:00 (Migrated from github.com)
Copy Link

I'm trying to use the yoga-layout package in my app using TypeScript and Rollup. I deleted the node_modules folder, did a node-gyp rebuild in both the package's and my own directories, and npm rebuild, but I still get this same error in the Chrome JS console every time:

Uncaught Error: Could not locate the bindings file. Tried:
/Users/andrew/myProject/nbind.node
/Users/andrew/myProject/build/nbind.node
/Users/andrew/myProject/build/Debug/nbind.node
/Users/andrew/myProject/build/Release/nbind.node
/Users/andrew/myProject/out/Debug/nbind.node
/Users/andrew/myProject/Debug/nbind.node
/Users/andrew/myProject/out/Release/nbind.node
/Users/andrew/myProject/Release/nbind.node
/Users/andrew/myProject/build/default/nbind.node
/Users/andrew/myProject/compiled/6.5.0/darwin/x64/nbind.node
/Users/andrew/myProject/nbind.js
/Users/andrew/myProject/build/nbind.js
/Users/andrew/myProject/build/Debug/nbind.js
/Users/andrew/myProject/build/Release/nbind.js
/Users/andrew/myProject/out/Debug/nbind.js
/Users/andrew/myProject/Debug/nbind.js
/Users/andrew/myProject/out/Release/nbind.js
/Users/andrew/myProject/Release/nbind.js
/Users/andrew/myProject/build/default/nbind.js
/Users/andrew/myProject/compiled/6.5.0/darwin/x64/nbind.js

It seems to not be looking in the yoga-layout package folder for the bindings, and instead looking at my project's code. Any ideas regarding what's going on here?

I'm trying to use the `yoga-layout` package in my app using TypeScript and Rollup. I deleted the `node_modules` folder, did a `node-gyp rebuild` in both the package's and my own directories, and `npm rebuild`, but I still get this same error in the Chrome JS console every time: ``` Uncaught Error: Could not locate the bindings file. Tried: /Users/andrew/myProject/nbind.node /Users/andrew/myProject/build/nbind.node /Users/andrew/myProject/build/Debug/nbind.node /Users/andrew/myProject/build/Release/nbind.node /Users/andrew/myProject/out/Debug/nbind.node /Users/andrew/myProject/Debug/nbind.node /Users/andrew/myProject/out/Release/nbind.node /Users/andrew/myProject/Release/nbind.node /Users/andrew/myProject/build/default/nbind.node /Users/andrew/myProject/compiled/6.5.0/darwin/x64/nbind.node /Users/andrew/myProject/nbind.js /Users/andrew/myProject/build/nbind.js /Users/andrew/myProject/build/Debug/nbind.js /Users/andrew/myProject/build/Release/nbind.js /Users/andrew/myProject/out/Debug/nbind.js /Users/andrew/myProject/Debug/nbind.js /Users/andrew/myProject/out/Release/nbind.js /Users/andrew/myProject/Release/nbind.js /Users/andrew/myProject/build/default/nbind.js /Users/andrew/myProject/compiled/6.5.0/darwin/x64/nbind.js ``` It seems to not be looking in the `yoga-layout` package folder for the bindings, and instead looking at my project's code. Any ideas regarding what's going on here?
larsonjj commented 2017-09-25 21:28:01 -07:00 (Migrated from github.com)
Copy Link

Found that indeed the asmjs build is included with the npm package (v1.6.0), but it produces the following error when imported using node v8.5.0 and npm v5.4.0:

TypeError: {} is not a function. (In '{}("")', '{}' is an instance of Object)

I was able to solve the issue by compiling the asmjs script locally via npm run build:browser using emscripten v1.37.21 and the latest xcode command line tools (Apple LLVM version 9.0.0 (clang-900.0.37)). It produced the following file: https://gist.github.com/larsonjj/577c943f3a1ab7337c42940addf31270

If you replace your node_modules/yoga-layout/build/Release/nbind.js file with the linked gist above, it should alleviate the issues with fs and path imports.

This leads me to believe that the next asmjs build included in the npm package needs to be produced using the latest emscripten version to fix the problem going forward.

Found that indeed the asmjs build is included with the npm package (`v1.6.0`), but it produces the following error when imported using node v8.5.0 and npm v5.4.0: ``` TypeError: {} is not a function. (In '{}("")', '{}' is an instance of Object) ``` I was able to solve the issue by compiling the asmjs script locally via `npm run build:browser` using emscripten `v1.37.21` and the latest xcode command line tools (`Apple LLVM version 9.0.0 (clang-900.0.37)`). It produced the following file: https://gist.github.com/larsonjj/577c943f3a1ab7337c42940addf31270 If you replace your `node_modules/yoga-layout/build/Release/nbind.js` file with the linked gist above, it should alleviate the issues with `fs` and `path` imports. This leads me to believe that the next asmjs build included in the npm package needs to be produced using the latest emscripten version to fix the problem going forward.
👍 1
gordonwoodhull commented 2019-05-14 09:00:17 -07:00 (Migrated from github.com)
Copy Link

Yoga is useful for doing flexbox layout in SVG.

I ran into the _a is not defined error mentioned above and ended up just correcting the offending line. Everything worked after that. Have not tried a later emscripten yet.

Yoga is useful for doing flexbox layout in SVG. I ran into the `_a is not defined` error mentioned above and ended up just correcting the offending line. Everything worked after that. Have not tried a later emscripten yet.
scottmas commented 2024-10-28 14:55:39 -07:00 (Migrated from github.com)
Copy Link

@NickGerleman Could we begin providing the asm.js exports again? It would be pretty easy to begin distributing the asm.js versions again right? I'm running react-native and a library I'm consuming uses yoga-layout. I know it's weird since obviously there are native bindings to yoga in the project, but the library I'm consuming knows nothing about them. If we just could have the asm.js bindings back, the library would be happy. And in a RN environment, the code should execute at near native speeds as well since the asm.js will ultimately get compiled to Hermes bytecode (see https://github.com/facebook/hermes/issues/429)

I could take a whack at adding this back if there's no opposition from the maintainers

@NickGerleman Could we begin providing the asm.js exports again? It would be pretty easy to begin distributing the asm.js versions again right? I'm running react-native and a library I'm consuming uses yoga-layout. I know it's weird since obviously there are native bindings to yoga in the project, but the library I'm consuming knows nothing about them. If we just could have the asm.js bindings back, the library would be happy. And in a RN environment, the code should execute at near native speeds as well since the asm.js will ultimately get compiled to Hermes bytecode (see https://github.com/facebook/hermes/issues/429) I could take a whack at adding this back if there's no opposition from the maintainers
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#444
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?