This release adds an option for arrow function parens in arguments, support for the new JSX fragment syntax (<>
), support for .editorconfig
files, and nice additions to our GraphQL and Markdown support.
When printing arrow functions, Prettier omitted parens around the arguments if they weren’t strictly necessary, like so:
We received feedback that formatting a JSX file with a really long text (~1000 lines) was really slow and noticed there was two performance bottlenecks in our fill
primitive, which prints text until it reaches the print width and then insert a line break.
After the release of our Markdown support, we received feedback that breaking text to respect the print width could affect some renderers that could be sensitive to line breaks. In 1.8.2 we released a new option proseWrap: false
that would print a paragraph in a single line, and users would rely on the "soft wrapping" feature of editors.
When GraphQL support was released, Prettier did not support interpolation so it would skip formatting if any interpolations were present, because interpolations make formatting very difficult. While that works well for the most part, users of the Apollo Client were missing out on Prettier’s GraphQL support sometimes, because Apollo Client uses interpolation to share fragments between queries. The good news is that only top-level interpolations are allowed, and that was way easier to add support for in Prettier.
(Prettier will continue to skip formatting if the interpolation is inside a query or mutation or so.)
Prettier will now respect intentional line breaks inside GraphQL queries (but limit to 1), where before it would remove them.
CSS is mostly case insensitive, so Prettier has been lowercasing stuff for a while to keep things consistent. Turns out we overlooked a detail in the CSS spec. Element and attribute names in selectors depend on the markup language: In HTML they are case insensitive, but in SVG (XML) they are not. Previously Prettier would incorrectly lowercase element and attribute names, but now we don’t anymore.
Prettier won't break an element with no attributes anymore, keeping elements like <br />
as an unit.
In the previous release we tried a new strategy of breaking template literals with expressions inside to respect the print width. We've received feedback that for some cases it was actually preferred that it would exceed print width than breaking in multiple lines.
From now on, template literals expressions that contain a single identifier won't break anymore:
Fixes an edge case where Prettier was moving comments around breaking tools like Webpack:
There was a case where comments between a decorator and a class property were moved to an invalid position.
We were accidentally dropping flow mixins, this has been fixed, but only for the babylon
parser.
This was inconsistent with JavaScript and Flow, Prettier won't print a trailing comma in the following cases, when using the TypeScript parser:
Fixes cases where Prettier would insert extra whitespace like in the following examples:
Prettier now considers not only ASCII punctuation characters but Unicode as well.
We already supported YAML in the front matter of Markdown files and we added the TOML format as well, since some static site generators support it.
* parent list item
<span class="pl-v">*</span> child list item
* [x] parent task list item
<span class="pl-v">*</span> [x] child task list item</pre></div>
would become:
* parent list item
* child list item
* [x] parent task list item
<span class="pl-v">*</span> [x] child task list item</pre></div>
Preserve non-breaking whitespaces (#3327) by @ikatyang
Non-breaking whitespaces are useful to keep words separated by spaces together in the same line (i.e. number and units or multi-word product names). Prettier was wrongfully converting them to regular whitespaces.
Do not break before special prefix (#3347) by @ikatyang
Fixes a bug where Prettier could break text if it went over the print width right before a number followed by .
which would be parsed as a numbered list:
She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?
Omit semicolon in simple JSX expressions (#3330) by @sapegin
Prettier will omit the semicolon (before and after) inside code samples if it's a simple JSX expression:
No semi:
jsx</span><span class="pl-s1"></span> <span class="pl-s1"><div>Example</div></span> <span class="pl-s1"></span><span class="pl-c1">
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
RFC: Dangerously Override Jest Config
Summary
Specify overrides to jest config in sku.config.js
Motivation
Currently sku's jest config hardcodes a pattern for mapping modules to identity-obj-proxy
. Since this is the most convenient way to mock modules for jest tests, testing scripts that import anything outside that hardcoded pattern is more awkward with sku than it would be without.
Allowing selective overrides of jest config covers this more pressing use case, and any others that may arise, without requiring premature development of a more explicit jest configuration API.
Detailed design
If a dangerouslyOverrideJestConfig
property is present on the first build in sku.config.js, it will be spread onto the existing Jest config object before being passed to jest during
sku test`.
We use the first build because in most cases there will be only one build, and in a monorepo situation we have no clear way of dealing with multiple dangerouslyOverrideJestConfig
objects. sku currently has no way to set global config affecting all builds.
How We Teach This
Since this is in the dangerouslyDoSomething
genre, we don't need to document or teach it. We can make consumers aware of it if/when they come for help with jest mocking.
Usage (or lack thereof) of this option will guide us on development of a more specific API for configuring jest; teaching that would be heavily informed by any lessons we learn from this capability.
Drawbacks
Apart from the obvious dangers of dangerouslyOverrideJestConfig
, that config is passed in from outside sku; resolving to anything internal to sku will be difficult and require deep sku knowledge.
Taking the first build's config only avoids the problem of build vs global config, but may be confusing for monorepo consumers (it would at least be harmless if the same config was set multiple times).
Improvements made to jest config would be missed by consumers overriding them.
Alternatives
Two obvious alternatives present themselves:
-
Force consumers to mock imports to jest tests by other means, don't touch jest config until forced by at least one more use case.
-
Make a specific jest configuration API now, starting with allowing a string or array of strings to be passed in config for identity-obj-proxy
Version 16.1.0 of react was just published.
Branch
|
Build failing 🚨
|
Dependency
|
react
|
Current Version
|
16.0.0
|
Type
|
devDependency
|
This version is covered by your current version range and after updating it in your project the build failed.
react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
v16.1.0
16.1.0 (November 9, 2017)
Discontinuing Bower Releases
Starting with 16.1.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your Bower configs to the React UMD builds hosted on unpkg that mirror npm releases and will continue to be updated.
All Packages
- Fix an accidental extra global variable in the UMD builds. (@gaearon in #10935)
React
- Add support for portals in
React.Children
utilities. (@MatteoVH in #11378)
- Warn when a class has a
render
method but doesn't extend a known base class. (@sw-yx in #11168)
- Improve the warning when accidentally returning an object from constructor. (@deanbrophy in #11395)
React DOM
React DOM Server
- Add a new
suppressHydrationWarning
attribute for intentional client/server text mismatches. (@sebmarkbage in #11126)
- Fix markup generation when components return strings. (@gaearon in #11109)
- Fix obscure error message when passing an invalid style value. (@iamdustan in #11173)
- Include the
autoFocus
attribute into SSR markup. (@gaearon in #11192)
- Include the component stack into more warnings. (@gaearon in #11284)
React Test Renderer and Test Utils
- Fix multiple
setState()
calls in componentWillMount()
in shallow renderer. (@Hypnosphi in #11167)
- Fix shallow renderer to ignore
shouldComponentUpdate()
after forceUpdate()
. (@d4rky-pl in #11239 and #11439)
- Handle
forceUpdate()
and React.PureComponent
correctly. (@koba04 in #11440)
- Add back support for running in production mode. (@gaearon in #11112)
- Add a missing
package.json
dependency. (@gaearon in #11340)
React ART
- Add a missing
package.json
dependency. (@gaearon in #11341)
- Expose
react-art/Circle
, react-art/Rectangle
, and react-art/Wedge
. (@gaearon in #11343)
React Reconciler (Experimental)
React Call Return (Experimental)
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)
Version 7.2.0 of autoprefixer was just published.
Branch
|
Build failing 🚨
|
Dependency
|
autoprefixer
|
Current Version
|
7.1.6
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
autoprefixer is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
7.2 “Ordem e Progresso”
Autoprefixer 7.2 brings better Grid support for IE
and autoprefixer-info
CLI tool.
Grid Layout
With grid: true
option Autoprefixer adds -ms-
prefixes to Grid Layout properties. But this feature was very limited.
In 7.0 we dramatically improved Grid support for IE. @Alex7Kom added grid-area
and improved grid-row
and grid-column
support. @evgeny-petukhov added grid-template-areas
and grid-template
support.
Even this complex emoji example will work with new Autoprefixer (output):
body {
display: grid;
grid-template-rows: auto 300px;
grid-template-columns: 3fr 1fr;
grid-template-areas: "🎩 🎩"
"🍔 📰"
"👞 👞";
}
header {
grid-area: 🎩;
}
nav {
grid-area: 🍔;
}
main {
grid-area: 📰;
}
footer {
grid-area: 👞;
}
Just don’t forget to set grid: true
option:
auoprefixer({ grid: true })
Info CLI Tool
Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed.
Just go to your project directory and run npx autoprefixer-info
:
Browsers:
Edge: 16
These browsers account for 0.04% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
user-select: ms
hyphens: ms
appearance: webkit
scroll-snap-type: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
flow-into: ms
flow-from: ms
region-fragment: ms
text-spacing: ms
Also, @pdokas added default value (current working dir) for from
option in autoprefixer.info()
.
Other Changes
- Add wrong
radial-gradient
properties warning.
- Do not prefix
reverse
animation direction.
- Improve test coverage (by @Semigradsky).
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Version 16.2.0 of react was just published.
Branch
|
Build failing 🚨
|
Dependency
|
react
|
Current Version
|
16.1.1
|
Type
|
devDependency
|
This version is covered by your current version range and after updating it in your project the build failed.
react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
v16.2.0
React
- Add
Fragment
as named export to React. (@clemmy in #10783)
- Support experimental Call/Return types in
React.Children
utilities. (@MatteoVH in #11422)
React DOM
- Fix radio buttons not getting checked when using multiple lists of radios. (@landvibe in #11227)
- Fix radio buttons not receiving the
onChange
event in some cases. (@jquense in #11028)
React Test Renderer
- Fix
setState()
callback firing too early when called from componentWillMount
. (@accordeiro in #11507)
React Reconciler
- Expose
react-reconciler/reflection
with utilities useful to custom renderers. (@rivenhk in #11683)
Internal Changes
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Version 16.1.0 of react-dom was just published.
Branch
|
Build failing 🚨
|
Dependency
|
react-dom
|
Current Version
|
16.0.0
|
Type
|
devDependency
|
This version is covered by your current version range and after updating it in your project the build failed.
react-dom is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
v16.1.0
16.1.0 (November 9, 2017)
Discontinuing Bower Releases
Starting with 16.1.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your Bower configs to the React UMD builds hosted on unpkg that mirror npm releases and will continue to be updated.
All Packages
- Fix an accidental extra global variable in the UMD builds. (@gaearon in #10935)
React
- Add support for portals in
React.Children
utilities. (@MatteoVH in #11378)
- Warn when a class has a
render
method but doesn't extend a known base class. (@sw-yx in #11168)
- Improve the warning when accidentally returning an object from constructor. (@deanbrophy in #11395)
React DOM
React DOM Server
- Add a new
suppressHydrationWarning
attribute for intentional client/server text mismatches. (@sebmarkbage in #11126)
- Fix markup generation when components return strings. (@gaearon in #11109)
- Fix obscure error message when passing an invalid style value. (@iamdustan in #11173)
- Include the
autoFocus
attribute into SSR markup. (@gaearon in #11192)
- Include the component stack into more warnings. (@gaearon in #11284)
React Test Renderer and Test Utils
- Fix multiple
setState()
calls in componentWillMount()
in shallow renderer. (@Hypnosphi in #11167)
- Fix shallow renderer to ignore
shouldComponentUpdate()
after forceUpdate()
. (@d4rky-pl in #11239 and #11439)
- Handle
forceUpdate()
and React.PureComponent
correctly. (@koba04 in #11440)
- Add back support for running in production mode. (@gaearon in #11112)
- Add a missing
package.json
dependency. (@gaearon in #11340)
React ART
- Add a missing
package.json
dependency. (@gaearon in #11341)
- Expose
react-art/Circle
, react-art/Rectangle
, and react-art/Wedge
. (@gaearon in #11343)
React Reconciler (Experimental)
React Call Return (Experimental)
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Summary
Enables HMR, both for ssr and in the front-end
Motivation
HMR is useful for improving development experience and speed, avoiding to have to rebuild the project manually systematically
Detailed design
The design is based on this article: https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0
A basic and incomplete implementation can be found at: https://github.com/seek-oss/sku/tree/hmr-with-dev-server
Taks
- Update
webpack.config
to support hmr when in dev mode
- extra entries
- output.publicPath for client side hmr
- externals for server-side rendering
- extra plugins
- Update
babel.config
to support hmr (might not be required)
- Refactor
start.js
and build.js
to be more re-usable
Usage
- The user calls
sku start
- If the config is of type
render
, start.js
creates the webpack devserver with hmr support
- If the config is of type
server
,start.js
creates the webpack devserver with hmr support and build the server-side bundle
API changes
Two port numbers are now required when using server-side rendering. I would keep the current port
option, but allow an array to be passed in. The first value would user by the server-side rendering, the second by the client-side hmr.
How We Teach This
We should point to general documentation about hmr
Drawbacks
webpack.config
is going to become very complex, with test over dev/prod, static/ssr
- that functionality is react-centric and relies on
react-hot-loader
Alternatives
I looked at using middleware, instead of webpack dev server. The solution requires a lot more rewriting (branch here: https://github.com/seek-oss/sku/tree/hmr)
Unresolved questions
Initial tests showed some potential issues with async/await. Will need to investigate more
The 'Environment Variables' section of the README states that NODE_ENV
is avaiable both on the client and server, however, NODE_ENV
is not defined in the browser when running sku start
.
The DefinePlugin
is configured by composing envVars
, which does not contain NODE_ENV
, and some production specific variables, which does include NODE_ENV
, but only when it's value is production
.
If I log the plugins section of my computed webpack config I get:
[ DefinePlugin {
definitions:
{ 'process.env.SKU_TENANT': '""',
'process.env.SKU_ENV': '"development"',
'process.env.PORT': '8080' } },
Is this a bug, i.e. we should be setting NODE_ENV
in development, or do you prefere SKU_ENV
and the docs are out of date? My preference would be to include NODE_ENV
as it's so widely used.
Mike
There appears to be something somewhat different in the behaviour of the compilation of this and the create-react-app, where I consistently get my upstream auth0-js
library's dependency reqwest
failing due to an undefined this
:
reqwest.js, as transpiled, looks like this:
!function (name, context, definition) {
if (typeof module != 'undefined' && module.exports) module.exports = definition();
else if (true) !(__WEBPACK_AMD_DEFINE_FACTORY__ = (definition),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
__WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));else context[name] = definition();
}('reqwest', undefined, function () {
// context here is undefined:
var context = this;
// causing an error here, because it's attempting to access a property on an undefined object
if ('window' in context) {
var doc = document,
byTag = 'getElementsByTagName',
head = doc[byTag]('head')[0];
} else {
var XHR2;
try {
Whereas, the working version has the this
keyword set correctly, and looks like this I think:
!function (name, context, definition) {
if (typeof module != 'undefined' && module.exports) module.exports = definition()
else if (typeof define == 'function' && define.amd) define(definition)
else context[name] = definition()
}('reqwest', this, function () {
// context is window here
var context = this
if ('window' in context) {
var doc = document
, byTag = 'getElementsByTagName'
, head = doc[byTag]('head')[0]
} else {
var XHR2
try {
XHR2 = require('xhr2')
} catch (ex) {
throw new Error('Peer dependency `xhr2` required! Please npm install xhr2')
}
}
- I don't see any tickets for this error on either the Auth0 library or Reqwest.
- config for the repo I'm working on is here
Version 1.8.0 of prettier was just published.
Branch
|
Build failing 🚨
|
Dependency
|
prettier
|
Current Version
|
1.7.4
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
1.8.0: Markdown Support
This release adds Markdown support, a new --insert-pragma
flag, fixes a number of formatting issues, adds support for some new experimental operators, and improves our editor integration support.
Highlights
Markdown Support
You can now run Prettier on Markdown files! 🎉
The implementation is highly compliant with the CommonMark spec, and backed by the excellent remark-parse
package.
Word Wrap
One of Prettier's core features is its ability to wrap code at a specified line length. This applies to Markdown too, which means you can maintain nice and clean 80-character-wide Markdown files without having to re-adjust line breaks manually when you add or delete words.
Input:
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honour to meet you and you may call me V.
Output:
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity,
is a vestige of the vox populi, now vacant, vanished. However, this valourous
visitation of a bygone vexation stands vivified and has vowed to vanquish these
venal and virulent vermin vanguarding vice and vouchsafing the violently vicious
and voracious violation of volition! The only verdict is vengeance; a vendetta
held as a votive, not in vain, for the value and veracity of such shall one day
vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage
veers most verbose, so let me simply add that it's my very good honour to meet
you and you may call me V.
Note for CJK users: If your markdown renderer does not support CJK line ending, you'll have to use plugin like markdown-it-perfect-newline-for-cjk, hexo-filter-fix-cjk-spacing, etc. to remove additional spaces.
// Source
一二三
四五六
七八九
// Rendered content with unsupported renderer
一二三 四五六 七八九
// Rendered content with supported renderer or via plugin
一二三四五六七八九
Code Formatting
Powered by Prettier's generic "multiparser", Prettier will format code blocks in Markdown! We use the language code provided with the code block to determine which language it is, and thus we can format any language that Prettier supports (including Markdown itself, if you're into that).
Input:
```js
reallyUgly (
javascript
)
```
.h1 { color : red }
```</pre></div>
<p>Output:</p>
<div class="highlight highlight-source-lisp"><pre>```js
reallyUgly(javascript)<span class="pl-c"><span class="pl-c">;</span></span>
.h1 {
color: red<span class="pl-c"><span class="pl-c">;</span></span>
}
```</pre></div>
<blockquote>
<p>Note: In some cases you may not want to format your code in Markdown, and just like in other languages, in Markdown you can use <code><!-- prettier-ignore --></code> before the code block to ignore it from formatting.</p>
</blockquote>
<p><strong>Lists</strong></p>
<p>When rearranging list items, after running Prettier all the numbers will be fixed!</p>
<p><a href="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966" target="_blank"><img src="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966" alt="Markdown Lists" style="max-width:100%;"></a></p>
<blockquote>
<p>Note: you can actually opt out of this by using <code>1.</code> for all list items if you want to optimize for cleaner diffs.</p>
</blockquote>
<p><strong>Tables</strong></p>
<p>Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.</p>
<p><a href="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966" target="_blank"><img src="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966" alt="Markdown Tables" style="max-width:100%;"></a></p>
<p><strong>Markdown-in-JS</strong></p>
<p>By using either <code>md</code> or <code>markdown</code> tagged template literals, you can format markdown code inside JavaScript.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">markdown</span> <span class="pl-k">=</span> md<span class="pl-s"><span class="pl-pds">`</span></span>
<span class="pl-s"> # heading</span>
<span class="pl-s"></span>
<span class="pl-s"> 1. list item</span>
<span class="pl-s"><span class="pl-pds">`</span></span>;</pre></div>
<h2>CLI</h2>
<h3>Add option to insert <code>@format</code> to first docblock if absent (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2865" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="258974830" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2865">#2865</a>) by <a href="https://urls.greenkeeper.io/samouri" class="user-mention">@samouri</a></h3>
<p>In 1.7, we added an option called <code>--require-pragma</code> to require files contain an <code>/** @format */</code> pragma to be formatted. In order to add this pragma to a large set of files you can now use <a href="https://prettier.io/docs/en/cli.html#insert-pragma"><code>--insert-pragma</code></a> flag.</p>
<pre><code>prettier --write "folder/**/*.js" --insert-pragma
</code></pre>
<h3>Add <code>--loglevel</code> option (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2992" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263707174" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2992">#2992</a>) by <a href="https://urls.greenkeeper.io/ikatyang" class="user-mention">@ikatyang</a></h3>
<p>This <a href="https://prettier.io/docs/en/cli.html#loglevel">nifty feature</a> allows you to opt in (or out) of Prettier's logging. We've also cleaned up the logging substantially since 1.7.</p>
<div class="highlight highlight-source-shell"><pre>$ prettier --loglevel=debug blarg
$ ./bin/prettier.js --loglevel=debug blarg
[debug] normalized argv: {<span class="pl-s"><span class="pl-pds">"</span>_<span class="pl-pds">"</span></span>:[<span class="pl-s"><span class="pl-pds">"</span>blarg<span class="pl-pds">"</span></span>],<span class="pl-s"><span class="pl-pds">"</span>bracket-spacing<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span>:true,<span class="pl-s"><span class="pl-pds">"</span>debug-check<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>debug-print-doc<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>flow-parser<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>insert-pragma<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>jsx-bracket-same-line<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>list-different<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>require-pragma<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>semi<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>single-quote<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>stdin<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>use-tabs<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>version<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>with-node-modules<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>write<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>loglevel<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>debug<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>ignore-path<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>.prettierignore<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>config-precedence<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>cli-override<span class="pl-pds">"</span></span>}
[error] No matching files. Patterns tried: blarg <span class="pl-k">!</span><span class="pl-k">**</span>/node_modules/<span class="pl-k">**</span> <span class="pl-k">!</span>./node_modules/<span class="pl-k">**</span>
</pre></div>
<h2>JavaScript</h2>
<h3>Fix indentation for JSDoc comments (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2470" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="242554023" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2470">#2470</a>) by <a href="https://urls.greenkeeper.io/maxdeviant" class="user-mention">@maxdeviant</a></h3>
<p>This has been a long-time known issue with Prettier. When formatting code that results in a change of indentation level, the JSDoc comments would end up being out of alignment. We're happy to report this is now fixed!</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">function</span> <span class="pl-en">theFunction2</span>(<span class="pl-smi">action$</span>, <span class="pl-smi">store</span>) {
<span class="pl-c"><span class="pl-c">/*</span></span>
<span class="pl-c"> * comments</span>
<span class="pl-c"> <span class="pl-c">*/</span></span>
<span class="pl-k">return</span> <span class="pl-c1">true</span>;
}
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">function</span> <span class="pl-en">theFunction2</span>(<span class="pl-smi">action$</span>, <span class="pl-smi">store</span>) {
<span class="pl-c"><span class="pl-c">/*</span></span>
<span class="pl-c"> * comments</span>
<span class="pl-c"> <span class="pl-c">*/</span></span>
<span class="pl-k">return</span> <span class="pl-c1">true</span>;
}</pre></div>
<h3>Print pipeline and nullish-coalescing operators (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3036" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265544605" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3036">#3036</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>We've added support for two new proposed operators to Prettier: the <em>pipeline operator</em> and the <em>nullish coalescing operator</em>.</p>
<p>The <a href="https://urls.greenkeeper.io/tc39/proposal-pipeline-operator/">pipeline operator</a> is currently a stage one proposal.</p>
<blockquote>
<p>This proposal introduces a new operator |> similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. It's a backwards-compatible way of streamlining chained function calls in a readable, functional manner, and provides a practical alternative to extending built-in prototypes.</p>
</blockquote>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">let</span> result <span class="pl-k">=</span> <span class="pl-en">exclaim</span>(<span class="pl-en">capitalize</span>(<span class="pl-en">doubleSay</span>(<span class="pl-s"><span class="pl-pds">"</span>hello<span class="pl-pds">"</span></span>)));
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">let</span> result <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>hello<span class="pl-pds">"</span></span>
<span class="pl-k">|</span><span class="pl-k">></span> doubleSay
<span class="pl-k">|</span><span class="pl-k">></span> capitalize
<span class="pl-k">|</span><span class="pl-k">></span> exclaim;</pre></div>
<p>The <a href="https://urls.greenkeeper.io/tc39-transfer/proposal-nullish-coalescing">nullish coalescing operator</a> is another stage one proposal.</p>
<blockquote>
<p>When performing optional property access in a nested structure in conjunction with the optional chaining operator, it is often desired to provide a default value if the result of that property access is null or undefined.</p>
</blockquote>
<p>This operator is similar to <code>||</code> except it only evaluates the right-hand-side if the left is <code>undefined</code> or <code>null</code>, not <code>""</code>, <code>0</code>, <code>NaN</code>, etc.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">foo</span> <span class="pl-k">=</span> <span class="pl-smi">object</span>.<span class="pl-smi">foo</span> <span class="pl-k">??</span> <span class="pl-s"><span class="pl-pds">"</span>default<span class="pl-pds">"</span></span>;</pre></div>
<h3>Improved template literal expresions line breaks (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3124" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="269808048" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3124">#3124</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>This was another known issue with Prettier, when printing a template literal string with expressions inside that went over the print width, it would wrap the code in weird places inside the expressions. Now, if Prettier needs to insert a line break, it should happen right between <code>${</code> and <code>}</code>.</p>
<div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">const</span> <span class="pl-smi">description</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">The value of the <span class="pl-e">${<span class="pl-smi">cssName</span>}</span> css of the <span class="pl-e">${<span class="pl-c1">this</span></span></span></span>
<span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">.</span><span class="pl-smi">_name</span>}</span> element</span><span class="pl-s">`</span></span>;
<span class="pl-k">const</span> <span class="pl-smi">foo</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">mdl-textfield mdl-js-textfield <span class="pl-e">${<span class="pl-smi">className</span>}</span> <span class="pl-e">${<span class="pl-smi">content</span><span class="pl-k">.</span><span class="pl-smi">length</span><span class="pl-k"> ></span> <span class="pl-c1">0</span></span></span></span>
<span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">?</span> <span class="pl-s"><span class="pl-pds">"</span>is-dirty<span class="pl-pds">"</span></span></span></span></span>
<span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>}</span> combo-box__input</span><span class="pl-s">`</span></span>;
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">const</span> <span class="pl-smi">description</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">The value of the \${cssName} css of the \${</span></span>
<span class="pl-s"><span class="pl-s"> this._name</span></span>
<span class="pl-s"><span class="pl-s">} element</span><span class="pl-s">`</span></span>;
<span class="pl-k">const</span> <span class="pl-smi">foo</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">mdl-textfield mdl-js-textfield <span class="pl-e">${<span class="pl-smi">className</span>}</span> <span class="pl-e">${</span></span></span>
<span class="pl-s"><span class="pl-s"><span class="pl-e"><span class="pl-smi"> content</span><span class="pl-k">.</span><span class="pl-smi">length</span><span class="pl-k"> ></span> <span class="pl-c1">0</span> <span class="pl-k">?</span> <span class="pl-s"><span class="pl-pds">'</span>is-dirty<span class="pl-pds">'</span></span> <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span></span></span></span>
<span class="pl-s"><span class="pl-s"><span class="pl-e">}</span> combo-box__input</span><span class="pl-s">`</span></span></pre></div>
<h2>JSX</h2>
<h3>Don't inline trailing <code>}</code> for arrow functions attributes (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3110" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="268739661" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3110">#3110</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>In order to align closer to the <a href="https://urls.greenkeeper.io/airbnb/javascript/">Airbnb style guide</a>, and since it was never intentionally printed this way, we've moved the <code>}</code> from to the next line in JSX. This is more diff friendly, and makes it easier to move code around by shifting lines in your editor.</p>
<div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<<span class="pl-ent"><span class="pl-c1">BookingIntroPanel</span></span>
<span class="pl-e">logClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">data</span> <span class="pl-k">=></span></span>
<span class="pl-s1"> <span class="pl-en">doLogClick</span>(<span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span><span class="pl-pse">}</span>
/>;
<span class="pl-c"><span class="pl-c">//</span> After</span>
<<span class="pl-ent"><span class="pl-c1">BookingIntroPanel</span></span>
<span class="pl-e">logClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">data</span> <span class="pl-k">=></span></span>
<span class="pl-s1"> <span class="pl-en">doLogClick</span>(<span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span>
<span class="pl-s1"> </span><span class="pl-pse">}</span>
/>;</pre></div>
<h1>Other Changes</h1>
<h2>JavaScript</h2>
<h3>Make the factory detection handle multiple elements (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3112" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="268967545" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3112">#3112</a>) by <a href="https://urls.greenkeeper.io/vjeux" class="user-mention">@vjeux</a></h3>
<p>There was a bug in the heuristic that Prettier uses to determine whether an expression is a factory or not. It now works correctly with longer member expressions.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-c1">window</span>.<span class="pl-smi">FooClient</span>
.<span class="pl-en">setVars</span>({
locale<span class="pl-k">:</span> <span class="pl-en">getFooLocale</span>({ page }),
authorizationToken<span class="pl-k">:</span> <span class="pl-smi">data</span>.<span class="pl-smi">token</span>
})
.<span class="pl-en">initVerify</span>(<span class="pl-s"><span class="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>);
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-c1">window</span>.<span class="pl-smi">FooClient</span>.<span class="pl-en">setVars</span>({
locale<span class="pl-k">:</span> <span class="pl-en">getFooLocale</span>({ page }),
authorizationToken<span class="pl-k">:</span> <span class="pl-smi">data</span>.<span class="pl-smi">token</span>
}).<span class="pl-en">initVerify</span>(<span class="pl-s"><span class="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>);</pre></div>
<h3>Handle comments between function name and open paren (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2979" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263070152" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2979">#2979</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>Printing comments in the right place is an endless challenge <g-emoji alias="wink" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f609.png" ios-version="6.0">😉</g-emoji>. This fix ensures that comments next to function names are re-printed correctly.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">function</span> <span class="pl-en">f</span>(<span class="pl-c"><span class="pl-c">/*</span> comment<span class="pl-c">*/</span></span> <span class="pl-smi">promise</span>) {}
<span class="pl-c"><span class="pl-c">//</span> After </span>
<span class="pl-k">function</span> f <span class="pl-c"><span class="pl-c">/*</span> comment<span class="pl-c">*/</span></span>(<span class="pl-smi">promise</span>) {}</pre></div>
<h3>Support sequential CallExpressions in member chains (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2990" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263677479" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2990">#2990</a>) by <a href="https://urls.greenkeeper.io/chrisvoll" class="user-mention">@chrisvoll</a></h3>
<p>Member chains are one of the most complex parts of Prettier. This PR fixes an issue where repeated calls lead to the next method not being pushed to the next line.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
wrapper
.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>)
.<span class="pl-en">prop</span>(<span class="pl-s"><span class="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)().<span class="pl-en">then</span>(<span class="pl-k">function</span>() {
<span class="pl-en">doSomething</span>();
});
<span class="pl-c"><span class="pl-c">//</span> After</span>
wrapper
.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>)
.<span class="pl-en">prop</span>(<span class="pl-s"><span class="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)()
.<span class="pl-en">then</span>(<span class="pl-k">function</span>() {
<span class="pl-en">doSomething</span>();
});</pre></div>
<h3>Account for empty lines in long member call chain (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3035" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265515302" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3035">#3035</a>) by <a href="https://urls.greenkeeper.io/jackyho112" class="user-mention">@jackyho112</a></h3>
<p>Previously, Prettier would delete all newlines within a member chain. Now we keep up to one if it's in the source. This is nice for fluent APIs that you want to break up over multiple lines.</p>
<div class="highlight highlight-source-js"><pre>angular
.<span class="pl-en">module</span>(<span class="pl-s"><span class="pl-pds">"</span>AngularAppModule<span class="pl-pds">"</span></span>)
<span class="pl-c"><span class="pl-c">//</span> Constants.</span>
.<span class="pl-en">constant</span>(<span class="pl-s"><span class="pl-pds">"</span>API_URL<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>http://localhost:8080/api<span class="pl-pds">"</span></span>)
<span class="pl-c"><span class="pl-c">//</span> App configuration.</span>
.<span class="pl-en">config</span>(appConfig)
.<span class="pl-en">run</span>(appRun);</pre></div>
<h3>Fix issue where first argument is left behind when line breaks (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3079" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267371127" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3079">#3079</a>) by <a href="https://urls.greenkeeper.io/mutdmour" class="user-mention">@mutdmour</a></h3>
<p>This addresses an issue where due to our special object inline behaviour, the indentation missing from the function call.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-smi">db</span>.<span class="pl-en">collection</span>(<span class="pl-s"><span class="pl-pds">"</span>indexOptionDefault<span class="pl-pds">"</span></span>).<span class="pl-en">createIndex</span>({ a<span class="pl-k">:</span> <span class="pl-c1">1</span> },
{
indexOptionDefaults<span class="pl-k">:</span> <span class="pl-c1">true</span>
},
<span class="pl-k">function</span>(<span class="pl-smi">err</span>) {
<span class="pl-c"><span class="pl-c">//</span> code</span>
});
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-smi">db</span>.<span class="pl-en">collection</span>(<span class="pl-s"><span class="pl-pds">"</span>indexOptionDefault<span class="pl-pds">"</span></span>).<span class="pl-en">createIndex</span>(
{ a<span class="pl-k">:</span> <span class="pl-c1">1</span> },
{
indexOptionDefaults<span class="pl-k">:</span> <span class="pl-c1">true</span>
},
<span class="pl-k">function</span>(<span class="pl-smi">err</span>) {
<span class="pl-c"><span class="pl-c">//</span> code</span>
}
);</pre></div>
<h3>Break parens for binaries in member expression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2958" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262164203" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2958">#2958</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>Similarly, there was another edge case where indentation was missing from logical expressions. This is fixed, too.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">const</span> <span class="pl-c1">someLongVariable</span> <span class="pl-k">=</span> (<span class="pl-en">idx</span>(
<span class="pl-c1">this</span>.<span class="pl-smi">props</span>,
<span class="pl-smi">props</span> <span class="pl-k">=></span> <span class="pl-smi">props</span>.<span class="pl-smi">someLongPropertyName</span>
) <span class="pl-k">||</span> []
).<span class="pl-en">map</span>(<span class="pl-smi">edge</span> <span class="pl-k">=></span> <span class="pl-smi">edge</span>.<span class="pl-smi">node</span>);
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">const</span> <span class="pl-c1">someLongVariable</span> <span class="pl-k">=</span> (
<span class="pl-en">idx</span>(<span class="pl-c1">this</span>.<span class="pl-smi">props</span>, <span class="pl-smi">props</span> <span class="pl-k">=></span> <span class="pl-smi">props</span>.<span class="pl-smi">someLongPropertyName</span>) <span class="pl-k">||</span> []
).<span class="pl-en">map</span>(<span class="pl-smi">edge</span> <span class="pl-k">=></span> <span class="pl-smi">edge</span>.<span class="pl-smi">node</span>);</pre></div>
<h3>Prevent breaking MemberExpression inside NewExpression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3075" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267232001" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3075">#3075</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>There are so many ways to break a line. Some of them look much worse than others. Breaking between in this case looked really weird, so it has been fixed!</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-k">function</span> <span class="pl-en">functionName</span>() {
<span class="pl-k">if</span> (<span class="pl-c1">true</span>) {
<span class="pl-c1">this</span>.<span class="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">this</span>
.<span class="pl-en">Promise</span>((<span class="pl-smi">resolve</span>, <span class="pl-smi">reject</span>) <span class="pl-k">=></span> {
<span class="pl-c"><span class="pl-c">//</span> do something</span>
});
}
}
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">function</span> <span class="pl-en">functionName</span>() {
<span class="pl-k">if</span> (<span class="pl-c1">true</span>) {
<span class="pl-c1">this</span>.<span class="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">this.Promise</span>(
(<span class="pl-smi">resolve</span>, <span class="pl-smi">reject</span>) <span class="pl-k">=></span> {
<span class="pl-c"><span class="pl-c">//</span> do something</span>
}
);
}
}</pre></div>
<h3>Fix array acessors in method chains (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3137" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="270637812" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3137">#3137</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>In a method chain we split lines by grouping elements together and accessing an array should be printed in the end of a group instead of the beginning.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-en">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>)
[<span class="pl-c1">0</span>].<span class="pl-c1">getAttribute</span>(<span class="pl-s"><span class="pl-pds">'</span>href<span class="pl-pds">'</span></span>)
.<span class="pl-c1">indexOf</span>(<span class="pl-c1">this</span>.<span class="pl-smi">landingPageLink</span>)
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-en">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>)[<span class="pl-c1">0</span>]
.<span class="pl-c1">getAttribute</span>(<span class="pl-s"><span class="pl-pds">'</span>href<span class="pl-pds">'</span></span>)
.<span class="pl-c1">indexOf</span>(<span class="pl-c1">this</span>.<span class="pl-smi">landingPageLink</span>)</pre></div>
<h2>Flow and TypeScript</h2>
<h3>Fix indentation of intersection object types (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3074" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267225804" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3074">#3074</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>This was a minor alignment bug in intersection types, and has now been fixed.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
type intersectionTest <span class="pl-k">=</span> {
propA<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propB<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propC<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propD<span class="pl-k">:</span> <span class="pl-c1">X</span>
};
<span class="pl-c"><span class="pl-c">//</span> After</span>
type Props <span class="pl-k">=</span> {
propA<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propB<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propC<span class="pl-k">:</span> <span class="pl-c1">X</span>
} <span class="pl-k">&</span> {
propD<span class="pl-k">:</span> <span class="pl-c1">X</span>
};</pre></div>
<h3>Keep parens around TSAsExpression in ConditionalExpression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3053" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="266402555" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3053">#3053</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>We missed a case where we need to keep the parenthesis with TypeScript's <code>as</code> assertions. This is now fixed.</p>
<div class="highlight highlight-source-ts"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<span class="pl-c"></span><span class="pl-smi">aValue</span> <span class="pl-k">as</span> <span class="pl-c1">boolean</span> ? <span class="pl-c1">0</span> : <span class="pl-k">-</span><span class="pl-c1">1</span>;
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-c"></span>(<span class="pl-smi">aValue</span> <span class="pl-k">as</span> <span class="pl-c1">boolean</span>) <span class="pl-k">?</span> <span class="pl-c1">0</span> <span class="pl-k">:</span> <span class="pl-k">-</span><span class="pl-c1">1</span>;</pre></div>
<h2>JSX</h2>
<h3>Collapse multiple JSX whitespaces (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2973" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262564212" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2973">#2973</a>) by <a href="https://urls.greenkeeper.io/karl" class="user-mention">@karl</a></h3>
<p>This fixes up the issue where JSX formatting occasionally needed to be run twice to become stable. This occurred when you had multiple JSX whitespace elements or JSX whitespace followed by a space.</p>
<div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
<<span class="pl-ent">div</span>>
<span class="pl-pse">{</span><span class="pl-s1"><span class="pl-s"><span class="pl-pds">"</span> <span class="pl-pds">"</span></span></span><span class="pl-pse">}</span> <<span class="pl-ent"><span class="pl-c1">Badge</span></span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">notificationIconPng</span></span><span class="pl-pse">}</span> />
</<span class="pl-ent">div</span>>;
<span class="pl-c"><span class="pl-c">//</span> After</span>
<<span class="pl-ent">div</span>>
<span class="pl-pse">{</span><span class="pl-s1"><span class="pl-s"><span class="pl-pds">"</span> <span class="pl-pds">"</span></span></span><span class="pl-pse">}</span>
<<span class="pl-ent"><span class="pl-c1">Badge</span></span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">notificationIconPng</span></span><span class="pl-pse">}</span> />
</<span class="pl-ent">div</span>></pre></div>
<h3>Don't print JSX bracket on same line when it has trailing comments (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3088" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267549517" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3088">#3088</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>This was an issue with the <code>--jsx-bracket-same-line</code> option. Turns out you can't <em>always</em> put the bracket on the same line...</p>
<div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Input</span>
<<span class="pl-ent">div</span>
<span class="pl-c"> <span class="pl-c">//</span> comment</span>
>
<span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span>
</<span class="pl-ent">div</span>>
<span class="pl-c"><span class="pl-c">//</span> Before</span>
<<span class="pl-ent">div</span>>
// comment
<span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span>
</<span class="pl-ent">div</span>>;
<span class="pl-c"><span class="pl-c">//</span> After</span>
<<span class="pl-ent">div</span>
<span class="pl-c"><span class="pl-c">//</span> comment</span>
>
<span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span>
</<span class="pl-ent">div</span>>;</pre></div>
<h2>CSS</h2>
<h3>Preserve line breaks in grid declarations (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3133" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="270384528" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3133">#3133</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>Prettier will now preserve line breaks included in the source code when formatting the <code>grid</code> and <code>grid-template-*</code> rules, since those are important to keep in separate lines, but still applies the formatting like other rules (e.g., numbers and quotes).</p>
<div class="highlight highlight-source-css"><pre><span class="pl-c"><span class="pl-c">/*</span> Original Input <span class="pl-c">*/</span></span>
<span class="pl-ent">div</span> {
<span class="pl-c1"><span class="pl-c1">grid</span></span>:
[wide-start] <span class="pl-s"><span class="pl-pds">'</span>header header header<span class="pl-pds">'</span></span> <span class="pl-c1">200.000<span class="pl-k">px</span></span>
[wide-end] <span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">.50<span class="pl-k">fr</span></span>
/ <span class="pl-c1">auto</span> <span class="pl-c1">50.000<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>;
}
<span class="pl-c"><span class="pl-c">/*</span> Before <span class="pl-c">*/</span></span>
<span class="pl-ent">div</span> {
<span class="pl-c1"><span class="pl-c1">grid</span></span>: [wide-start] <span class="pl-s"><span class="pl-pds">"</span>header header header<span class="pl-pds">"</span></span> <span class="pl-c1">200<span class="pl-k">px</span></span> [wide-end]
<span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">0.5<span class="pl-k">fr</span></span> / <span class="pl-c1">auto</span> <span class="pl-c1">50<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>;
}
<span class="pl-c"><span class="pl-c">/*</span> After <span class="pl-c">*/</span></span>
<span class="pl-ent">div</span> {
<span class="pl-c1"><span class="pl-c1">grid</span></span>:
[wide-start] <span class="pl-s"><span class="pl-pds">"</span>header header header<span class="pl-pds">"</span></span> <span class="pl-c1">200<span class="pl-k">px</span></span>
[wide-end] <span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">0.5<span class="pl-k">fr</span></span>
/ <span class="pl-c1">auto</span> <span class="pl-c1">50<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>;
}</pre></div>
<h2>SCSS</h2>
<h3>Format SCSS maps like CSS rules (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3070" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267054763" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3070">#3070</a>) by <a href="https://urls.greenkeeper.io/asmockler" class="user-mention">@asmockler</a></h3>
<p>Turns out SCSS maps are much prettier when printed over multiple lines.</p>
<div class="highlight highlight-source-scss"><pre><span class="pl-c">// Before</span>
<span class="pl-smi">$map</span>: (color: <span class="pl-c1">#111111</span>, <span class="pl-c1">text</span><span class="pl-c1">-</span>shadow:<span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 0</span> <span class="pl-bu">salmon</span>)
// After
<span class="pl-smi">$map</span>: (
color: <span class="pl-c1">#111111</span>,
<span class="pl-c1">text</span><span class="pl-c1">-</span>shadow:<span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 0</span> <span class="pl-bu">salmon</span>
);</pre></div>
<h2>CSS-in-JS</h2>
<h3>Fix formatting styled(Foo).attrs(...)`` (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3073" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267192603" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3073">#3073</a>) by <a href="https://urls.greenkeeper.io/existentialism" class="user-mention">@existentialism</a></h3>
<p>Prettier will now format the CSS in styled-components code that looks like this:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-en">styled</span>(Component).<span class="pl-en">attrs</span>({})<span class="pl-s"><span class="pl-pds">`</span></span>
<span class="pl-s"> color: red;</span>
<span class="pl-s"><span class="pl-pds">`</span></span>;</pre></div>
<h2>GraphQL</h2>
<h3>Prevent formatting GraphQL template literals with expressions (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2975" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262809788" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2975">#2975</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3>
<p>Prettier doesn't support formatting JavaScript expressions in GraphQL. See <a href="https://urls.greenkeeper.io/prettier/prettier/issues/2640" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="251412470" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2640">#2640</a> for tracking. There was a bug where formatting an expression lead to invalid code, so we've completely disabled formatting GraphQL when it contains JavaScript expressions until we fully support it.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span>
(invalid code)
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-en">graphql</span>(schema, <span class="pl-s"><span class="pl-pds">`</span>{ query test { id }} <span class="pl-s1"><span class="pl-pse">${</span>fragment<span class="pl-pse">}</span></span><span class="pl-pds">`</span></span>)</pre></div>
<h2>CLI</h2>
<h3>Don't use ANSI codes if stdout isn't a TTY (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2903" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="260810621" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2903">#2903</a>) by <a href="https://urls.greenkeeper.io/narigo" class="user-mention">@Narigo</a></h3>
<p>Previously, piping the output of <code>--list-different</code> to other tools was troublesome due to the ANSI color codes we use to show whether a file was modified or not. This PR disables the use of color when Prettier is piped to a different process.</p>
<h2>Configuration</h2>
<h3>Use relative paths with CLI (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2969" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262449905" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2969">#2969</a>) by <a href="https://urls.greenkeeper.io/ahmedelgabri" class="user-mention">@ahmedelgabri</a></h3>
<p>This fixes a bug where passing a path starting with <code>./</code> to the CLI wouldn't match patterns used in <code>.prettierignore</code>.</p>
<pre><code># .prettierignore
path/to/*.js
</code></pre>
<p>After this fix, no files will be written to when executing:</p>
<div class="highlight highlight-source-shell"><pre>$ prettier --write ./path/to/<span class="pl-k">*</span>.js</pre></div>
<h3>Resolve file paths relative to config file (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3037" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265550594" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3037">#3037</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>This fixes an issue where <code>.prettierrc</code> overrides, under certain conditions, were not being respected for absolute paths with the <code>resolveConfig</code> API.</p>
<h2>Core</h2>
<h3>Respect CJK width and Combined Characters (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3003" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264227112" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3003">#3003</a>, <a href="https://urls.greenkeeper.io/prettier/prettier/pull/3015" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264803229" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3015">#3015</a>) by <a href="https://urls.greenkeeper.io/ikatyang" class="user-mention">@ikatyang</a></h3>
<p>Chinese, Japanese and Korean characters are now considered two characters wide.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before (exceeds print width when CJK characters are 2x monospace chars)</span>
<span class="pl-k">const</span> <span class="pl-c1">x</span> <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>];
<span class="pl-c"><span class="pl-c">//</span> After</span>
<span class="pl-k">const</span> <span class="pl-c1">x</span> <span class="pl-k">=</span> [
<span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>,
<span class="pl-c"><span class="pl-c">//</span> ...</span>
<span class="pl-s"><span class="pl-pds">"</span>中文<span class="pl-pds">"</span></span>
];</pre></div>
<p><a href="https://urls.greenkeeper.io/prettier/prettier/pull/3015" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264803229" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3015">#3015</a> also ensures that combining characters (e.g. <code>Á</code>) are counted as one character.</p>
<h2>Editor Support</h2>
<h3>Implement getSupportInfo() and use it for inference (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3033" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265494522" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3033">#3033</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3>
<p>We've added a new function to the API (<code>prettier.getSupportInfo([version])</code>), and the CLI <code>--support-info</code>. This can be used to interrogate Prettier to find out which languages the current version, or an older version, supports. It also provides useful information such as CodeMirror IDs, tmScopes, etc, which can be used to automate some of the work done with lookup tables in text editor integrations.</p>
<p>Internally, we use this information to drive which extensions trigger which parsers, and support some common files that don't have extensions, like <code>.prettierrc</code>, <code>Jakefile</code>, etc.</p>
<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> prettier knows that this file is JSON now.</span>
$ prettier --write .prettierrc</pre></div>
<h3>Split source elements relative to their language. (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3069" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="266872265" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3069">#3069</a>) by <a href="https://urls.greenkeeper.io/cigit" class="user-mention">@CiGit</a></h3>
<p>This fixes an issue in editors that support range formatting, where formatting an object would cause Prettier to crash.</p>
<hr>
<h1>Thanks! <g-emoji alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" ios-version="6.0">❤️</g-emoji></h1>
<p>Thanks to everyone who contributed to this release, as well as those who raised issues! Prettier has become a highly stable piece of software that a large amount of people trust with their code. We take that trust seriously, and fix rare issues that break code with the highest priority. We can't fix these issues if we don't know about them, so never be afraid to <a href="https://urls.greenkeeper.io/prettier/prettier/issues/new">create an issue</a>!</p>
</details>
<details>
<summary>FAQ and help</summary>
There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html). If those don’t help, you can always [ask the humans behind Greenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).
</details>
---
Your [Greenkeeper](https://greenkeeper.io) Bot :palm_tree:
Tasks to complete:
We currently have the sku eslint config here which enables us to expose the settings to an IDE (such as Atom).
Summary
Prototyping workflow via a sku proto
command, inspired by kyt's proto command.
Motivation
Sometimes developers and designers want to quickly throw together some components to kick off a design process. The mature our style guide gets, the more efficient it is to prototype in the browser with prefab components instead of using design tools that are heavily disconnected from the underlying medium. To ease this process, it seems like a good idea to make prototyping a first class workflow in sku.
Detailed design
First of all, in terms of naming, I wanted to expand the name to "prototype", but quickly realised this causes issues once you're in JavaScript and "prototype" means something very different, so "proto" works well enough as a shorthand.
The entry point from a user's perspective would be the sku proto
command, but probably via npm scripts (npm run proto
).
This would necessitate the introduction of another entry point, which means your sku config would change like this:
module.exports = {
entry: {
client: 'src/client.js',
+ proto: 'src/proto.js',
render: 'src/render.js'
}
};
We could potentially support this in zero-config mode by using src/proto.js
as the default value, similar to how we handle src/client.js
and src/render.js
.
I imagine this would inherit all the same settings as running sku start
in terms of environment variables, etc.
To keep things simple, the code in proto.js
would be purely client-side. I'm thinking you'll have no access to the underlying index.html
(probably generated with html-webpack-plugin.
Running sku proto
would open the page in a browser with hot reloading enabled, similar to sku start
.
How We Teach This
I think we'd introduce this early in the docs, since it would also be used early in the design phase. Ideally we'll have some sort of sku init
step built out at some point, which would ease adoption of this workflow.
A big focus on this feature would be highlighting that it's for both developers and designers. Again, the future introduction of sku init
would really complement our work in this regard.
Drawbacks
- Adds config complexity, requiring yet another entry point (we've got server rendering on the way, so we'll be up to four potential options)
- Makes the internals of sku quite a bit more complicated
- Not everyone will need a prototyping workflow
Alternatives
We could avoid a sku proto
command entirely, and just force people to create separate sku projects when they want to prototype. We could instead create a prototyping boilerplate one of the options in a future sku init
script.
Unresolved questions
Does prototyping deserve to be a first-class part of sku? What makes prototyping a special case? Are there specific features you'd want while prototyping but not while building your app?
Should you be able to server render a prototype? If so, why?
Currently sku
handles formatting with prettier for you and therefore owns the version of prettier. Most editors will honour your version of prettier per project by looking at the package.json. This clashes with sku
though as the editor doesn't see prettier as a direct dependency of the app your working on and therefore uses its own internal version (which can differ).
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Repository problems
These problems occurred while renovating this repository. View logs.
- WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.
Open
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
Detected dependencies
github-actions
.github/workflows/release.yml
.github/workflows/snapshot.yml
seek-oss/changesets-snapshot v0
.github/workflows/validate.yml
npm
docs/package.json
fixtures/assertion-removal/package.json
fixtures/braid-design-system/package.json
braid-design-system ^32.0.0
fixtures/configure/package.json
fixtures/custom-src-paths/package.json
fixtures/jest-test/package.json
fixtures/library-build/package.json
fixtures/library-file/package.json
fixtures/lint-format/package.json
fixtures/multiple-routes/package.json
fixtures/public-path/package.json
fixtures/react-css-modules/package.json
fixtures/sku-test/package.json
fixtures/sku-webpack-plugin/package.json
braid-design-system ^32.0.0
fixtures/sku-with-https/package.json
fixtures/source-maps/package.json
fixtures/ssr-hello-world/package.json
fixtures/storybook-config/package.json
braid-design-system ^32.0.0
fixtures/styling/package.json
fixtures/translations/package.json
fixtures/typescript-css-modules/package.json
package.json
eslint-config-seek ^12.0.1
renovate-config-seek ^0.4.0
typescript *
packages/sku/package.json
browserslist-config-seek ^2.1.0
eslint-config-seek ^12.0.1
typescript ~5.3.0
braid-design-system ^32.0.0
test-utils/package.json
nvm
.nvmrc
Version 4.0.1 of inquirer was just published.
Branch
|
Build failing 🚨
|
Dependency
|
inquirer
|
Current Version
|
4.0.0
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
inquirer is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Release Notes
v4.0.1
- Update dependency to fix a LGPL license issue.
Commits
The new version differs by 3 commits.
00f5050
4.0.1
9895054
Bumped version to 4.1.0, bumped external-editor dependency to ^2.1.0 … (#616)
62a72d4
Fix typo (#612)
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Version 16.2.0 of react-dom was just published.
Branch
|
Build failing 🚨
|
Dependency
|
react-dom
|
Current Version
|
16.1.1
|
Type
|
devDependency
|
This version is covered by your current version range and after updating it in your project the build failed.
react-dom is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes
v16.2.0
React
- Add
Fragment
as named export to React. (@clemmy in #10783)
- Support experimental Call/Return types in
React.Children
utilities. (@MatteoVH in #11422)
React DOM
- Fix radio buttons not getting checked when using multiple lists of radios. (@landvibe in #11227)
- Fix radio buttons not receiving the
onChange
event in some cases. (@jquense in #11028)
React Test Renderer
- Fix
setState()
callback firing too early when called from componentWillMount
. (@accordeiro in #11507)
React Reconciler
- Expose
react-reconciler/reflection
with utilities useful to custom renderers. (@rivenhk in #11683)
Internal Changes
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Branch
|
Build failing 🚨
|
Dependency
|
babel-plugin-flow-react-proptypes
|
Current Version
|
9.1.1
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
babel-plugin-flow-react-proptypes is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Commits
The new version differs by 2 commits.
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Version 4.0.3 of fs-extra was just published.
Branch
|
Build failing 🚨
|
Dependency
|
fs-extra
|
Current Version
|
4.0.2
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
fs-extra is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Commits
The new version differs by 10 commits.
bd3376b
4.0.3
f934357
Merge pull request #520 from arcanis/patch-1
d21da93
Fixes fs-extra on linux
a6e8cd6
Add issue template (#514)
2599b67
Merge pull request #501 from jprichardson/rimraf-backports
ddb5cb4
Use octal notation for chmod values in rimraf.js
cc6d425
Merge pull request #500 from revelt/patch-1
d416fa7
typo fixed
41a33c2
Merge pull request #497 from nico29/docs/copy-improvements
4f01664
docs: update copy to show differences with cp
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Code splitting by route, get test failure
Summary of all failing tests
FAIL src/App/App.spec.js
● Test suite failed to run
/Users/slee/projects/adv-account-management-ui/node_modules/sku/@loadable/component/index.ts:3
import loadable, { loadableReady } from '@loadable/component';
^^^^^^^^
SyntaxError: Unexpected identifier
16 | import UnhandledErrorPage from './UnhandledErrorPage';
17 | import { trackOnce } from 'src/utils/trackError';
> 18 | import loadable from 'sku/@loadable/component';
| ^
19 |
20 | import {
21 | selectIsPendingActivation,
at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at Object.<anonymous> (src/App/App.js:18:1)
sku version 8.5.0
Following CONTRIBUTING.md
, the instructions fail at npm install
because seek-style-guide only accepts React 16 a peer dependency. Although it is deprecated, the quickest fix may work just to add || ^17.0.0
to seek-style-guide's react dependencies (and update to use that version). I'm happy to submit a PR with that change if it is appropriate.
The long-term fix is of course to replace the usages of seek-style-guide with equivalents from braid-design-system (if they exist). It looks like only Text
from seek-style-guide/react is referred to in the codebase.
If there are existing sku projects that have been built up using seek-style-guide then it may not be sensible to remove the dependency until a solid migration path is provided.
Here is the output from npm install
. Note that npm install -f
succeeds.
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from [email protected]
npm ERR! node_modules/seek-style-guide
npm ERR! dev seek-style-guide@"^42.0.0" 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 C:\Users\drdma\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\drdma\AppData\Local\npm-cache\_logs\2022-11-27T23_45_15_212Z-debug-0.log
Version 1.9.1 of prettier was just published.
Branch
|
Build failing 🚨
|
Dependency
|
prettier
|
Current Version
|
1.9.0
|
Type
|
dependency
|
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi, sorry for asking a question here but wasn't sure where else. I'm thinking of moving over from react-static since I'm building a white-label product and the multi-site support seems cool. How best to go about implementing multiple entry points for each site?
As a developer, I want to be able to use hmr with zero configuration enabled by some flags.
Detailed design
We need to add some logic and wrapper for our webpack and App.jsx configuration to make it possible to work with hmr.
How We Teach This
Any existing sku project can use this benefits. Existing users must add the following code to their package.json:
"scripts": {
"hmr": "sku hmr"
}
Drawbacks
There is no drawback since it's only a development tool and doesn't affect any code at production level.
Alternatives
As usual, we can use sku start
which reloads the entire app for any changes.
Unresolved questions
Optional, but suggested for first drafts. What parts of the design are still
TBD?
Hi:
After running:
$ npx sku storybook
The storybook server does not start. The script removes the forwards slashes from the path on Windows. Please see the error below:
`
$ npx sku storybook
@seek/sku-telemetry not installed
To help us improve sku, please install our private telemetry package
that gives us insights on usage, errors and performance.
yarn add --dev @seek/sku-telemetry
Non SEEK based usage can disable this message with `SKU_TELEMETRY=false`
info @storybook/react v6.3.8
info
info => Loading presets
info => Loading 1 config file in "C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start"
info => Adding stories defined in "C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start\main.js"
info => Using implicit CSS loaders
@seek/sku-telemetry not installed
To help us improve sku, please install our private telemetry package
that gives us insights on usage, errors and performance.
yarn add --dev @seek/sku-telemetry
Non SEEK based usage can disable this message with `SKU_TELEMETRY=false`
info => Loading custom Webpack config (full-control mode).
[webpack-dev-middleware] wait until bundle finished
info => Ignoring cached manager due to change in manager config
[webpack-dev-middleware] wait until bundle finished
assets by chunk 4.45 MiB (id hint: vendors)
assets by status 4.14 MiB [big]
asset vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.77 MiB [emitted] [big] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 372 KiB [emitted] [big] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 196 KiB [emitted] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 112 KiB [emitted] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.6 KiB [emitted] (id hint: vendors)
asset runtimemain.manager.bundle.js 13.5 KiB [emitted] (name: runtimemain)
asset index.html 3.11 KiB [emitted]
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.27 KiB [emitted]
asset main.manager.bundle.js 818 bytes [emitted] (name: main)
Entrypoint main [big] 3.79 MiB = runtime~main.manager.bundle.js 13.5 KiB vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.77 MiB main.manager.bundle.js 818 bytes
orphan modules 1.51 MiB [orphan] 350 modules
runtime modules 8.34 KiB 13 modules
javascript modules 4.01 MiB 797 modules
json modules 1.52 KiB
./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]manager (webpack 5.54.0) compiled successfully in 4172 ms
webpack built preview c251a0c7c61cf3fc8dc9 in 4868ms
ERROR in ./node_modules/sku/config/storybook/start/generated-stories-entry.js 7:37-146
Module not found: Error: Can't resolve 'C:UsersMauriciosites
d-braidsrc' in 'C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start'
preview compiled with 1 error
ModuleNotFoundError: Module not found: Error: Can't resolve 'C:UsersMauriciosites
d-braidsrc' in 'C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start'
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\lib\Compilation.js:1779:28
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\lib\ContextModuleFactory.js:210:15
at C:\Users\Mauricio\sites\nd-braid\node_modules\neo-async\async.js:2830:7
at C:\Users\Mauricio\sites\nd-braid\node_modules\neo-async\async.js:6877:13
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\lib\ContextModuleFactory.js:180:26
at finishWithoutResolve (C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:296:11)
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:362:15
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1)
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\forEachBail.js:16:12
at C:\Users\Mauricio\sites\nd-braid\node_modules\webpack\node_modules\enhanced-resolve\lib\AliasPlugin.js:103:14
resolve 'C:UsersMauriciosites
d-braidsrc' in 'C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start'
Parsed request is a module
using description file: C:\Users\Mauricio\sites\nd-braid\node_modules\sku\package.json (relative path: ./config/storybook/start)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\start\node_modules doesn't exist or is not a directory
C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\storybook\node_modules doesn't exist or is not a directory
C:\Users\Mauricio\sites\nd-braid\node_modules\sku\config\node_modules doesn't exist
or is not a directory
looking for modules in C:\Users\Mauricio\sites\nd-braid\node_modules\sku\node_modules
C:\Users\Mauricio\sites\nd-braid\node_modules\sku\node_modules\C:UsersMauriciosites
d-braidsrc doesn't exist
C:\Users\Mauricio\sites\nd-braid\node_modules\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\Mauricio\sites\nd-braid\node_modules
C:\Users\Mauricio\sites\nd-braid\node_modules\C:UsersMauriciosites
d-braidsrc doesn't exist
looking for modules in C:\Users\Mauricio\sites\node_modules
C:\Users\Mauricio\sites\node_modules\C:UsersMauriciosites
d-braidsrc doesn't exist
looking for modules in C:\Users\Mauricio\node_modules
C:\Users\Mauricio\node_modules\C:UsersMauriciosites
d-braidsrc doesn't exist
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
`
This part of the error shows a wrong path:
Module not found: Error: Can't resolve 'C:UsersMauriciositesnd-braidsrc
The path should be: C:Users\Mauricio\sites\nd-braid\src
How can this issue be fixed on a Windows machine?
Kind regards
Summary
The current SSR implementation implies that users have to implement their own server. We should provide an express server handling this kind of functionality.
Motivation
This is a required stepping stone for further improvements, such as routing and server-side API resolution.
Detailed design
- Add "scripts/server.js" to the project
- In this file, create and start an express server
- Expose this file through sku methods
- Allow extra middlewares to be passed in through the sku config and consumed by the express app
How We Teach This
Readme should be updated to explain how to use and extend the express server.
Drawbacks
That extra configuration option might make sku configs more complex and harder to understand.
Alternatives
We could let users duplicate the logic in their applications.
Unresolved questions
- This does not cover extra middleware we will want to include at some stage (hot module reloading for instance)
- There might be some confusion for end users between "sku start" and "sku server"
Summary
Static files (eg main.js
, styles.css
) generated into the specified dist folder should be served by the supplied express server without further configuration. This is a setting for development, not production builds.
Motivation
Without this, unless the appropriate express.static
call is passed into middleware, requests for static files will fall into the render function fallback. In a typical case this would cause the app to return a rendered 404 html page instead of the js or css requested.
Detailed design
In config/server/server.js
, after the express app is instantiated but before the render function fallback, we should include a line much like the following:
app.use(express.static(path.join(__dirname, './')));
How We Teach This
This should cause local server rendering to work as expected, and should not require teaching.
Drawbacks
This is not limited to sku-generated static files, if the server finds any others in its root it'll happily serve them too. That's still probably behaving as expected.
Alternatives
You can just pass this in manually as middleware, that just seems like an odd thing to require.
Unresolved questions
Is it worth creating a static
folder for this purpose?
Recommend Projects
-
-
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
An Open Source Machine Learning Framework for Everyone
-
The Web framework for perfectionists with deadlines.
-
A PHP framework for web artisans
-
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
Some thing interesting about web. New door for the world.
-
A server is a program made to process requests and deliver data to clients.
-
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Some thing interesting about visualization, use data art
-
Some thing interesting about game, make everyone happy.
-
Recommend Org
-
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Open source projects and samples from Microsoft.
-
Google ❤️ Open Source for everyone.
-
Alibaba Open Source for everyone
-
Data-Driven Documents codes.
-
China tencent open source team.
-