GithubHelp home page GithubHelp logo

facebook / yoga Goto Github PK

View Code? Open in Web Editor NEW
16.9K 395.0 1.4K 24.71 MB

Yoga is an embeddable layout engine targeting web standards.

Home Page: https://yogalayout.dev/

License: MIT License

C 0.46% Java 24.61% Python 0.17% C++ 48.21% Shell 0.03% JavaScript 1.07% HTML 2.34% Ruby 0.02% Batchfile 0.01% CMake 0.15% CSS 0.13% TypeScript 22.23% MDX 0.56% Swift 0.01%

yoga's Introduction

Yoga Support Ukraine CocoaPods npm Maven Central

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.

Building

Yoga's main implementation targets C++ 20 with accompanying build logic in CMake. A wrapper is provided to build the main library and run unit tests.

./unit_tests <Debug|Release>

While not required, this script will use ninja if it is installed for faster builds.

Yoga is additionally part of the vcpkg collection of ports maintained by Microsoft and community contributors. If the version is out of date, please create an issue or pull request on the vcpkg repository.

Adding Tests

Many of Yoga's tests are automatically generated, using HTML fixtures describing node structure. These are rendered in Chrome to generate an expected layout result for the tree. New fixtures can be added to gentest/fixtures.

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

To generate new tests from added fixtures:

  1. Ensure you have yarn classic installed.
  2. Run yarn install to install dependencies for the test generator.
  3. Run yarn gentest in the yoga directory.

Debugging

Yoga provides a VSCode "launch.json" configuration which allows debugging unit tests. Simply add your breakpoints, and run "Debug C++ Unit tests (lldb)" (or "Debug C++ Unit tests (vsdbg)" on Windows).

yoga's People

Contributors

amir-shalem avatar astreet avatar colineberhardt avatar cortinico avatar d16r avatar danielbuechele avatar davidaurelio avatar daviskoh avatar dependabot[bot] avatar devongovett avatar emilsjolander avatar frantic avatar hartbit avatar javache avatar joevilches avatar lucasr avatar nickgerleman avatar passy avatar prenaux avatar priteshrnandgaonkar avatar rmarinho avatar rozele avatar shergin avatar sidharthguglani-zz avatar splhack avatar swolchok avatar ttsugriy avatar vjeux avatar woehrl01 avatar zertosh 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  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

yoga's Issues

Does this handle text?

The example in the JSFiddle seems to imply that <Text> tags automatically size based on their content, but I don't see text content being mentioned in the supported attributes

Could you clarify how this library should be used when the size of the text content is not known in advance?

Integratation with React

The API requires passing a node tree but walking React component tree doesn't give you what you need to pass to this API in one go . Walking through a component's _renderedChildren gives you the nodebut not the props.style, walking through props.children gives you props.style but not node.

How does it fit into React?

Any exmaples by now? I don't think such grammar is easy to be used in React:

computeLayout(
  {style: {padding: 50}, children: [
    {style: {padding: 10, alignSelf: 'stretch'}}
  ]}
);
// =>
{width: 120, height: 120, top: 0, left: 0, children: [
  {width: 20, height: 20, top: 50, left: 50}
]}

Percentage widths support

This issue has been brought up before (#57) and has been closed, which I think should not be the case.

It's currently not possible to give an element a width of 50% without creating an empty dummy element next to it and assigning appropriate flexbox properties to both of them, which is of course a very weird solution. (http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid)

Also the lack of percentage support, makes it really hard to use proper media queries. Example:
You have 12 elements in a single container. On a small screen with you want to align them in 6 rows of 2 columns. On a bigger screen, you want them to align in 4 rows of 3 columns, using media queries.

Normally you'd like to give the elements a width of 50% in the first scenarios and 33.33% when the media query kicks in. This is not possible since we can only 'fake' percentage widths when we introduce a 'row container'. So in order to make the app responsive, we'd need to use Javascript to dynamically move the items around between the row containers, which is less than ideal.

Contents stop respecting parent's top

I've made a small renderer for turning the generated boxes into an SVG image, and it seems that children within one of my elements keep being positioned relative to the top of the image, rather than the top of their parent.

Specifically, in my example, the content element's children keep being positioned relative to the top. Their width and height seem to be working properly, but the top and left aren't.

I've tried fiddling with the style extensively: removing the flex from them content and setting a height on the children, removing the elements beside content, changing the flexDirection, and it keeps happening.

The weird part is that the header element seems to be working properly.

Any idea what might be up? Is my input just malformed, or is this a bug?

(You can change the JSON in the textarea and click update to re-render)

Centering

With flexbox, what is the way to create a header layout like found in a navigation bar? E.g, [< Navigation Title ], where inside the container there is a back button followed by a centered title. I assume that the container would be set to align:items:center and justify-content: center and the back arrow would be set to align-self: flex-start. This is not working for me, I have to make the back button position set to absolute to get it work. Is there no way to make a single item always align to it's container center despite the size of it's siblings?

Labels and image views baseline alignment support

Hi all,

Flexbox natively supports baseline alignment, but it seems like react-native has not implemented this yet.
I suppose that it would be awesome if css-layout could offer controls like labels or image views to work with baseline mode. Plus, the native auto layout tech supports baseline alignment too.

Many thanks. I appreciate all you excellent work.

Update npm package

Looks like I might finally get some time to work on my project using css-layout. And of course I can clone it to use the updated js api. But, it would be nice if the npm package was updated.

Thanks for the awesome work on react and this library.

Percentage widths and heights

Hi, this is an awesome library and I wrapped it easily in Objective-C and am loving the easy layout. One thing I ran into today, my third day with the lib, was how to update the bounding box of a layout when it's used in a different situation since the library doesn't support percentage based widths? E.g, an orientation change. How to specify that a layout should fill it's container at 100%? Is there a simple heuristic you all use in React Native or elsewhere for this? I assume I can recurse into the layout and update the widths and heights manually as I need but just want to make sure that I get your official position before I think about this too much.

Example in readme does not run.

Running the example in the readme will result in "node.layout is undefined" error.

computeLayout(
  {style: {padding: 50}, children: [
    {style: {padding: 10, alignSelf: 'stretch'}}
  ]}
);

This doesn't occur in the tests because of the preprocessing the node goes through in the testing suite. Particularly in the computeCSSLayout function.

I'm not sure if this is the expected behavior for the library or if the preprocessing should be moved internally, but either way the readme example should change to reflect this.

extractNodes puts objects into slow mode

extractNodes calls delete on objects which puts them into slow mode in v8 and other JS engines. Specifically calling delete node.layout; and delete node.children; is bad.

It also adds a children property to the layout objects which means that the code inside the layout algorithm and the code outside are using two different "kinds" of objects in terms of what the JS engine thinks the types are.

It seems like if the layout algorithm wants to create a separate tree of objects it should do that during layout instead of trying to mutate the node tree after the layout. There's also no reason to try to "clean up" the children property if it's empty, just leave the empty arrays. It's better to make all the objects look consistent.

measure should be on node, not style.

The measure callback seems to be designed for text, but the text is stored in the node itself not in the style of a node, which means to use the node.style.measure callback you need to create a new closure for every node that reflects back to the node's value.

node.style.measure = function(width) {
var text = node.textContent;
return measureText(text, width);
};

instead if the method was placed on node itself you wouldn't need a closure for every node which is better for memory usage and startup performance.

Node.prototype.measure = function(width) {
return measureText(this.textContent, width);
};

must run examples in Chrome

From the readme:

For the JS tests: Open RunLayoutTests.html and RunLayoutRandomTests.html in Chrome

I'm curious, why do the examples/tests depend on one browser?

version

the css-layout Supports cross-platform ? including anrdoid and ios ?

Style checks force code to go polymorphic or worse

width/height/top/left use isDimDefined and isPosDefined which checks for undefined. margin and padding properties use the "in" operator which isn't fast and also means you need to totally omit those properties from your object if you want them to have "no value" for layout.

ex.

if (pos in node.style) {
    return node.style[pos];
}
return 0;

should just be return node.style[pos] || 0;

For getSpacing it should do:

return node.style[key] || node.style[type + suffix] || 0;

This means your style object can have that property all the time and just use the value undefined to get the default. The current code forces you to have many different "types" of Style objects which makes v8 and other JS engines go slow.

fillNodes overwrites the layout and children properties

If node already has a layout object it should leave it alone, this just means allocating new Rect like objects each time this is called even if layout has been done before.

Also if you define node.style.measure it clears the children property, but that's bad if the measure function wanted to be able to look at the children or call layout on them.

Add C# version to the grunt build (and CI)

Currently the build does the following:

  • Runs static code analysis on the JS code
  • Runs the JS tests
  • Transpiles to Java and runs tests
  • Transpiles to C and runs tests
  • Packages / bundles all of the above.

The CI runs all of the above too.

The C# code is very much absent from this process!

Tests failing on Chrome OS X 40.0.2214.94 (64-bit)

101 specs, 3 failures, 5 pending specs
Spec List | Failures
Layout should layout text with flexDirection row
Expected {name: 'expected-dom', width: 200, height: 58, top: 0, left: 0, children: [{width: 200, height: 58, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 56, top: 0, left: 0, children: [{width: 200, height: 56, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]}.
Error: Expected {name: 'expected-dom', width: 200, height: 58, top: 0, left: 0, children: [{width: 200, height: 58, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 56, top: 0, left: 0, children: [{width: 200, height: 56, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]}.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at testNamedLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:248:8)
    at layoutTestUtils.testLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:387:7)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-test.js:895:56)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
Layout should layout with text and margin
Expected {name: 'expected-dom', width: 200, height: 76, top: 0, left: 0, children: [{width: 200, height: 76, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 72, top: 0, left: 0, children: [{width: 200, height: 72, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]}.
Error: Expected {name: 'expected-dom', width: 200, height: 76, top: 0, left: 0, children: [{width: 200, height: 76, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 72, top: 0, left: 0, children: [{width: 200, height: 72, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]}.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at testNamedLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:248:8)
    at layoutTestUtils.testLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:387:7)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-test.js:910:41)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
Layout tests consts keeps browser text measurements in sync with predefined consts
Expected {smallWidth: 34.671875, smallHeight: 18, bigWidth: 172.421875, bigHeight: 36, bigMinWidth: 100.453125} 
to equal {smallWidth: 34.671875, smallHeight: 16, bigWidth: 172.421875, bigHeight: 32, bigMinWidth: 100.453125}, 'Looks like browser has updated its text measurements functions. You need to update `preDefinedTextSizes` in Layout-test-utils.js'.
Error: Expected {smallWidth: 34.671875, smallHeight: 18, bigWidth: 172.421875, bigHeight: 36, bigMinWidth: 100.453125} 
to equal {smallWidth: 34.671875, smallHeight: 16, bigWidth: 172.421875, bigHeight: 32, bigMinWidth: 100.453125}, 'Looks like browser has updated its text measurements functions. You need to update `preDefinedTextSizes` in Layout-test-utils.js'.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-consts-test.js:16:33)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
    at QueueRunner.run (https://jasmine.github.io/2.0/lib/jasmine.js:1498:9)
    at QueueRunner.execute (https://jasmine.github.io/2.0/lib/jasmine.js:1485:10)
    at Spec.Env.queueRunnerFactory (https://jasmine.github.io/2.0/lib/jasmine.js:518:35)

Polyfill

Is there potential for a flexbox polyfill for IE8 and IE9 (and IE10)?

fillNodes should be an optional step

The current public JS API adapts computeLayout to add a fillNodes step, which tramples over any existing layout properties, see #62

I think the public API should make this optional ...

computeLayout(..., false); // fillNodes turned off

Currently within d3fc we do not use the adapted version of the API.

constraint solver

Have you guys though of building in a constraint solver? I believe this is how Apple does layout. This way you can do things like set two elements equidistant from the center, or set the distance between to items. I think this would really take the web to the next level.

https://www.npmjs.com/package/cassowary

Dead code

dead code in Layout.c at line 1121
eq(layout->last_direction, direction);

QUESTION: Are the tests in C redundant?

Just a quick question, the tests in 'C' look like they are all transpiled from the JS tests. Would it be OK if these were removed if the JavaScript tests were run through Travis instead?

I'm just looking to simplify things as much as possible :-)

Support for percentage width/height for cross-axis dimension?

Currently only pixels are supported for lengths (e.g., min-height, max-height, height).
While flex can be used to handle percentage-like calculations along the primary axis (see #57 #27), there's currently no way to do percentage-like calculations along the cross-axis. (Just align-items: stretch on the parent, which corresponds to width: 100% or height: 100% on the child.)

Would ya'll be open to a pull request adding percentage support?
If so, is there a writeup of the code architecture/algorithm beyond the source?

flexStart is same as flexEnd

Incorrect implementation of the UMD pattern for browser clients

Currently main.js and Layout.js implement the UMD pattern based on this variant:

https://github.com/umdjs/umd/blob/master/returnExports.js

However, both implementations have the following lines:

// Browser globals (root is window)
root.returnExports = factory(); 

This means that in the absence of an AMD or CommonJS environment, the module will be added as a returnExports function on the window object.

When using UMD this property name should be edited!

npm release

Last npm release was in September, but some changes have happened since then. Can someone release a new version to npm? Thanks!

View not stretching vertically in column layout

@corbt said in facebook/react-native#2724 (comment)

I think I may have found a couple of inconsistencies that are related to my problem. I've created what I believe are equivalent layouts in React Native and HTML/CSS that appear to demonstrate different flexbox behavior. Am I just crazy or is this a bug?

HTML

JSFiddle here

React Native

<View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}>
  <View style={{backgroundColor: 'red'}}>
    <View style={{backgroundColor: 'green'}}>
      <Text style={{backgroundColor: 'purple', alignSelf: 'center'}}>
        Column 1
      </Text>
    </View>
  </View>
  <Text style={{backgroundColor: '#B2DBFF', height: 150}}>Column 2</Text>
</View>

Output on my Android device:
device

Differences

In React Native the intermediary green div doesn't expand to fill the column vertically, and the "Column 1" text is not centered vertically either. On my machine (OS X/Chrome 45) the HTML version does.

Create a release process

This has turned into a really popular library, which I have seen used in a number of interesting ways - 👍 - however, it currently seems to lack a release process.

I am interested in this because I am contributor to a library, http://d3fc.io/, which depends on css-layout. As a result, I am primarily interested in the JavaScript version of css-layout.

I'd really like to give our users options for obtaining dependencies (d3 and css-layout) other than npm, simply because there will be many front-end devs who do not use npm.

What I'd really love to see is the following:

  • minified JavaScript files
  • more frequent releases to npm
  • GitHub releases with associated source-code
  • the JavaScript code available via CDNJS

Minification could be achieved by adding a very simple grunt build (you already have test and pre-tests steps in package.json, having them in grunt would be cleaner in my opinion).

The release process could all be managed via travis, see our deploy configuration here:

https://github.com/ScottLogic/d3fc/blob/master/.travis.yml

See: d3fc/d3fc#467

Question: performance of reusing layout object.

I am writing a Mac app that use Layout.c wrapped in Obj-C with a React like component virtual rendering model. I am wondering how much performance is gained by reusing the same Layout object on subsequent layouts. I am trying to evaluate whether it's worth it to keep a stateful Layout.c backed object between renders or not. I notice there is logic in Layout.c that check dirty bits and previous dimensions and the like. Is the performance consideration substantial (e.g. akin to auto layout incremental calculations) or perhaps not worth it, compared to the ease of programming of not having to track adding, removing, renaming and updating of layout params on a stateful layout object? My own intuition is leaning towards keeping layout stateful.

Different behavior for flex child in css-layout implementation

The following html and css: http://jsfiddle.net/mme911he/2/ when implemented via css-layout (layout.h) result in the "broken" div's height being reduced to zero. In other words, we see a red box on the web and a purple box in our c code. The bug seem to occur when a flex child (broken) is inside a flex container and that container's sibling has a fixed size. If we set the min height, the same as fixedChild, for the broken div, in the c code, the output is identical to the web version.

Here's the corresponding c-code:

        css_node_t *topNode = new_test_css_node();
        setNodeDimensions(topNode, OSView::GetFullScreenResolution());
        topNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
        topNode->style.align_items = CSS_ALIGN_STRETCH;              // defines alignment along cross axis

            init_css_node_children(topNode, 1);
            css_node_t *rootNode = topNode->get_child(topNode->context, 0);
            rootNode->style.flex = 1.0f;
            rootNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
            init_css_node_children(rootNode, 1);

                css_node_t *row = rootNode->get_child(rootNode->context, 0);
                row->style.flex_direction = CSS_FLEX_DIRECTION_ROW;       // defines main axis
                init_css_node_children(row, 2);

                    css_node_t *flexChild = row->get_child(row->context, 0);
                    flexChild->style.flex = 1.0f;
                    init_css_node_children(flexChild, 1);

                        css_node_t *broken = flexChild->get_child(flexChild->context, 0);
                        broken->style.flex = 1.0f;

                    css_node_t *fixedChild = row->get_child(row->context, 1);
                    fixedChild->style.dimensions[CSS_WIDTH] = 50;
                    fixedChild->style.dimensions[CSS_HEIGHT] = 50;

Here's the output from print_css_node (notice the 0 height child):

{layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 640, height: 1136, children: [
  {layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
    {layout: {width: 640, height: 50, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, children: [
      {layout: {width: 590, height: 50, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
        {layout: {width: 590, height: 0, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, },
      ]},
      {layout: {width: 50, height: 50, top: 0, left: 590}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 50, height: 50, },
    ]},
  ]},
]},

how to run java version

import into java project ,but error with :the import javax.annotation.Nullable cannot be resolved, The import com.facebook.infer cannot be resolved

Publish to npm

You have a beautiful package.json, but it seems like css-layout is not in the npm registry registry.

Could you publish this to npm, please?

npm run pretest fails

There are currently a number of eslint issues

$ npm run pretest

> [email protected] pretest /Users/colineberhardt/Projects/css-layout
> ./node_modules/eslint/bin/eslint.js src


src/Layout-test-utils.js
  418:42  error  'navigator' is not defined                no-undef
  453:45  error  expectedLayout is defined but never used  no-unused-vars

src/__tests__/Layout-test.js
  2125:10  error  Trailing comma                           no-comma-dangle
  2140:10  error  Trailing comma                           no-comma-dangle
  2155:10  error  Trailing comma                           no-comma-dangle
  2198:42  error  Trailing comma                           no-comma-dangle
  2206:54  error  Trailing comma                           no-comma-dangle
  2333:18  error  Multiple spaces found before '{'         no-multi-spaces
  2334:18  error  Multiple spaces found before '{'         no-multi-spaces
  2335:18  error  Multiple spaces found before '{'         no-multi-spaces
  2336:18  error  Multiple spaces found before '{'         no-multi-spaces
  2337:18  error  Multiple spaces found before '{'         no-multi-spaces
  2338:18  error  Multiple spaces found before '{'         no-multi-spaces
  2339:18  error  Multiple spaces found before '{'         no-multi-spaces
  2340:18  error  Multiple spaces found before '{'         no-multi-spaces
  2341:18  error  Multiple spaces found before '{'         no-multi-spaces
  2342:18  error  Multiple spaces found before '{'         no-multi-spaces
  2347:62  error  Trailing comma                           no-comma-dangle
  2348:8   error  Trailing comma                           no-comma-dangle
  2350:50  error  Multiple spaces found before 'children'  no-multi-spaces
  2376:20  error  Multiple spaces found before '{'         no-multi-spaces
  2377:20  error  Multiple spaces found before '{'         no-multi-spaces
  2378:20  error  Multiple spaces found before '{'         no-multi-spaces
  2379:20  error  Multiple spaces found before '{'         no-multi-spaces
  2380:20  error  Multiple spaces found before '{'         no-multi-spaces
  2381:20  error  Multiple spaces found before '{'         no-multi-spaces
  2382:20  error  Multiple spaces found before '{'         no-multi-spaces
  2383:20  error  Multiple spaces found before '{'         no-multi-spaces
  2384:20  error  Multiple spaces found before '{'         no-multi-spaces
  2385:20  error  Multiple spaces found before '{'         no-multi-spaces
  2390:64  error  Trailing comma                           no-comma-dangle
  2391:10  error  Trailing comma                           no-comma-dangle

src/transpile.js
   23:37  error    node is defined but never used    no-unused-vars
  277:29  warning  Multiple spaces found before '+'  no-multi-spaces
  278:29  warning  Multiple spaces found before '+'  no-multi-spaces
  279:29  warning  Multiple spaces found before '+'  no-multi-spaces
  280:29  warning  Multiple spaces found before '+'  no-multi-spaces
  282:29  warning  Multiple spaces found before '+'  no-multi-spaces
  283:29  warning  Multiple spaces found before '+'  no-multi-spaces

✖ 39 problems (33 errors, 6 warnings)

And linting / hinting should probably be added to the build. I'll have a look at this alongside #101

The children items are not vertically 'stretched' properly when the height of the parent is defined.

The children items are not vertically 'stretched' properly when the height of the parent is defined.

in Chrome

in Chrome

in React Native

in React Native

Sample HTML used in Chrome

<style>
/*=== Normalize ========================================================*/
* { margin: 0; padding: 0; border: none; outline: none; }
* {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
}
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, button, input, select, textarea {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #111;
}
html, body { height: 100%; width: 100%; margin: 0; }

/*=== Flex box everywhere ==============================================*/
div, span {
  background-color: #fff;

  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;

  border: 0 solid black;
  margin: 0;
  padding: 0;
}

/*=== Our Styles =======================================================*/
.container {
  background-color: #333333;
  width: 300px;
  height: 300px;
  flex-direction: row;
  flex-wrap: wrap;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
}
</style>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div> 

Document measure method

css-layout looks for a measure method on the node.style object. Can you please describe how this is used within the library and whether it is required?

CSS Grids: Is there any interest in integrating a grid implementation?

Hi,

I'm the maintainer of the CSS Grid Polyfill https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/css-grid/lib/grid-layout.js and I think your probject is awesome. I was wondering whether you would be interested to incorporate a css grid implementation in your project.

My implementation is independent of the fact it polyfills real CSS+DOM as the layout is performed on pure JS objects (which are imported from the DOM, and then exported to it), which is a good thing given your layout system doesn't use a similar DOM.

However, to the contrary of css flexbox (which you implemented), the syntax for defining css grids is rather complex and requires some kind of parser. If we want to avoid a dependency on a real css parser, a new (more JS-like) input format will have to be defined; it would be different (but could be similar) to how grids are defined in CSS (and it would require some work).

My questions for you are thus the following ones: Would you be interested by integrating css grid layout into your project? Is that matching your current interests at the moment? Given the code will require customizations to adapt to your needs, are you ready to spend some time defining with me the specifications of the input/output interfaces you would prefer, and possibly spend some time implementing or testing those interfaces with me?

Best regards,
François

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.