Karl O'Keeffe
5cda955efc
* Add new fill primitive and use it to wrap text in JSX This adds a new `fill` primitive that can be used to fill lines with as much code as possible before moving to a new line with the same indentation. It is used here layout JSX children. This gives us nicer wrapping for JSX elements containings lots of text interspersed with tags. * Quick fix for jsx whitespace regressions * Fix a couple more bugs * Tidy up the `fill` algorithm Attempt to make the algorithm a little more regular, and improve the naming of variables to make it a little easier to understand (I hope!). * Small tidy up of JSX whitespace declarations * Remove unnecessary code It turns out that `children` is only used in the case when the element is printed on a single line, in which case all the types of JSX whitespaces behave the same, so we don't need to special case leading/trailing/solitary whitespace. * A little more tidy up based on PR feedback * Fix up tests after rebasing * Make it explicit that we keep multiple consecutive spaces * Add an explanatory comment * Fix broken snapshot in master * Ignore existing commands when deciding whether content will fit when using fill * Fix a bug where children would get incorrectly filled onto a line * Tidy up JSX whitespace names
196 lines
3.7 KiB
Plaintext
196 lines
3.7 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`test.js 1`] = `
|
|
after =
|
|
<span>
|
|
foo <span>bar</span>
|
|
</span>
|
|
|
|
before =
|
|
<span>
|
|
<span>bar</span> foo
|
|
</span>
|
|
|
|
before_break1 =
|
|
<span>
|
|
<span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
|
|
</span>
|
|
|
|
before_break2 =
|
|
<span>
|
|
<span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
|
|
</span>
|
|
|
|
after_break =
|
|
<span>
|
|
foo <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
|
|
</span>
|
|
|
|
within =
|
|
<span>
|
|
foo <span> bar </span>
|
|
</span>
|
|
|
|
break_components =
|
|
<div>
|
|
<Foo />
|
|
<Bar>
|
|
<p>foo<span>bar bar bar</span></p><h1><span><em>yep</em></span></h1>
|
|
</Bar>
|
|
<h2>nope</h2>
|
|
</div>
|
|
|
|
var x = <div>
|
|
hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
|
|
</div>;
|
|
|
|
nest_plz =
|
|
<div>
|
|
<div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
regression_not_transformed_1 =
|
|
<span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
|
|
|
|
regression_not_transformed_2 =
|
|
<span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
|
|
|
|
similar_1 =
|
|
<span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
|
|
|
|
similar_2 =
|
|
<span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
|
|
|
|
similar_3 =
|
|
<span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" /></span>;
|
|
|
|
not_broken_end =
|
|
<div>
|
|
long text long text long text long text long text long text long text long text <link>url</link> long text long text
|
|
</div>
|
|
|
|
not_broken_begin =
|
|
<div>
|
|
<br /> long text long text long text long text long text long text long text long text<link>url</link> long text long text
|
|
</div>
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
after = (
|
|
<span>
|
|
foo <span>bar</span>
|
|
</span>
|
|
);
|
|
|
|
before = (
|
|
<span>
|
|
<span>bar</span> foo
|
|
</span>
|
|
);
|
|
|
|
before_break1 = (
|
|
<span>
|
|
<span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
|
|
{" "}
|
|
foo
|
|
</span>
|
|
);
|
|
|
|
before_break2 = (
|
|
<span>
|
|
<span
|
|
barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
|
|
/>
|
|
{" "}
|
|
foo
|
|
</span>
|
|
);
|
|
|
|
after_break = (
|
|
<span>
|
|
foo
|
|
{" "}
|
|
<span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
|
|
</span>
|
|
);
|
|
|
|
within = (
|
|
<span>
|
|
foo <span> bar </span>
|
|
</span>
|
|
);
|
|
|
|
break_components = (
|
|
<div>
|
|
<Foo />
|
|
<Bar>
|
|
<p>foo<span>bar bar bar</span></p><h1><span><em>yep</em></span></h1>
|
|
</Bar>
|
|
<h2>nope</h2>
|
|
</div>
|
|
);
|
|
|
|
var x = (
|
|
<div>
|
|
hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
|
|
</div>
|
|
);
|
|
|
|
nest_plz = (
|
|
<div>
|
|
<div>
|
|
<div />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
regression_not_transformed_1 = (
|
|
<span>
|
|
{" "}
|
|
<Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
|
|
</span>
|
|
);
|
|
|
|
regression_not_transformed_2 = (
|
|
<span>
|
|
<Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
|
|
{" "}
|
|
</span>
|
|
);
|
|
|
|
similar_1 = (
|
|
<span>
|
|
{" "}
|
|
<Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
|
|
</span>
|
|
);
|
|
|
|
similar_2 = (
|
|
<span>
|
|
<Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
|
|
{" "}
|
|
</span>
|
|
);
|
|
|
|
similar_3 = (
|
|
<span>
|
|
<Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" />
|
|
</span>
|
|
);
|
|
|
|
not_broken_end = (
|
|
<div>
|
|
long text long text long text long text long text long text long text long
|
|
text <link>url</link> long text long text
|
|
</div>
|
|
);
|
|
|
|
not_broken_begin = (
|
|
<div>
|
|
<br /> long text long text long text long text long text long text long text
|
|
long text<link>url</link> long text long text
|
|
</div>
|
|
);
|
|
|
|
`;
|