Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed. Designed for usage with braid-design-system, although this isn't a requirement.
This tool is heavily inspired by other work, most notably:
WARNING: While this software is open source, its primary purpose is to improve consistency, cross-team collaboration and code quality at SEEK. As a result, it’s likely that we will introduce more breaking API changes to this project than you’ll find in its alternatives.
Getting Started
Create a new project and start a local development environment:
$ npx sku init my-app
$ cd my-app
$ yarn start
By default, a new project's dependencies will be installed with the first supported package manager detected on your system.
Package managers are detected in the following order: yarn -> pnpm -> npm.
This can be overridden via the --packageManager flag:
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
Setup linter to run eslint as part of a lint (or more general analysis?) script
Decide on approach for module resolution linting. After playing with it I don't think the babel resolver is the way to go. Simplest option is to use the Node resolver which I'm thinking is the way to go.
We currently have the sku eslint config here which enables us to expose the settings to an IDE (such as Atom).
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"
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
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 Notesv16.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)
May i know is there a way to allow sku pickup .eslintrc or a way to override default eslint setting given by sku?
i have configured webpack for import path resolution, sku build is working fine, but hit the Unable to resolve path to module error when running sku lint. My configuration below :-
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:
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?
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 Notes7.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):
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().
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.
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:
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.
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
This version is covered by your current version range and after updating it in your project the build failed.
webpack 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 Notesv3.9.0
Features
add more descriptions to the schema for better validation errors
Handle arrow functions in AMD define/require
Bugfixes
added stats.all option to schema
UMD uses self before this as global object
Use window instead of this in JSONP
handle null in SourceMap correctly
Use Error name instead of instanceof to check for validation Error
Respect node.js deprecation configuration for some deprecation messages in webpack
Generate shorter identifiers for ConcatenatedModules to save memory
fix increasing delay when using HMR with multiStep: true
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
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:
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?
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
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 Notes1.9.0: JSX Fragments, EditorConfig and Arrow Parens
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:
// no parensfoo=> {};
// parens
(foo:Number) => {};
// parens
({ foo }) => {}
// parens
(foo=5) => {}
This lead to the most commented thread in our issue tracker. Prettier now has the --arrow-parens option (arrowParens in the config) that can assume two values today:
"avoid" - (default) preserve the behavior that omits parens when possible
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.
Markdown
Add an option to preserve text line breaks (#3340) by @ikatyang
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.
In 1.9 we are releasing a new option proseWrap: "preserve" which will respect the original line breaks of text, and lets the users decide where the text should break.
[WARNING] proseWrap with boolean value is deprecated, use "always", "never" or "preserve" instead.
[BREAKING CHANGE]proseWrap option now defaults to "preserve" as some renderers are linebreak-sensitive.
GraphQL
Support top-level interpolations (#3370) by @lydell
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.
In 1.9 we format GraphQL queries with top-level interpolation:
gql` query User { user(id: "Bob") { ...UserDetails } }${UserDetailsFragment}`
(Prettier will continue to skip formatting if the interpolation is inside a query or mutation or so.)
Preserve intentional new lines in GraphQL (#3252) by @duailibe
Prettier will now respect intentional line breaks inside GraphQL queries (but limit to 1), where before it would remove them.
queryUser {
name
age
}
CSS
Don't lowercase element names and attribute names in selectors (#3317) by @lydell
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.
It's taken a while, but Prettier will finally respect your .editorconfig file. This includes:
indent_style
indent_size/tab_width
max_line_length
The prettier CLI respects .editorconfig by default, but you can opt out with --no-editorconfig.
However, the API doesn't respect .editorconfig by default, in order to avoid potential editor integration issues (see here for details). To opt in, add editorconfig: true to the prettier.resolveConfig options.
Prettier won't break an element with no attributes anymore, keeping elements like <br /> as an unit.
Don't break identifiers inside template literals expressions (#3299) by @duailibe
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:
constfoo=`Hello ${username}. Today is ${month}${day}. You have ${newMessages} new messages`.
Fix formatting of comment inside arrow function (#3334) by @jackyho112
Fixes an edge case where Prettier was moving comments around breaking tools like Webpack:
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.
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:
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 Notesv16.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
Allow on as a custom attribute for AMP. (@nuc in #11153)
Fix onMouseEnter and onMouseLeave firing on wrong elements. (@gaearon in #11164)
Fix null showing up in a warning instead of the component stack. (@gaearon in #10915)
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?
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 Notesv16.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
Allow on as a custom attribute for AMP. (@nuc in #11153)
Fix onMouseEnter and onMouseLeave firing on wrong elements. (@gaearon in #11164)
Fix null showing up in a warning instead of the component stack. (@gaearon in #10915)
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 Notesv16.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)
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 Notes1.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.
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.
// 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>
<divclass="highlight highlight-source-lisp"><pre>```jsreallyUgly(javascript)<spanclass="pl-c"><spanclass="pl-c">;</span></span>
.h1 {
color: red<span class="pl-c"><span class="pl-c">;</span></span>
}
```</pre></div>
<blockquote>
<p>Note:InsomecasesyoumaynotwanttoformatyourcodeinMarkdown,andjustlikeinotherlanguages,inMarkdownyoucanuse <code><!--prettier-ignore--></code>beforethecodeblocktoignoreitfromformatting.</p>
</blockquote>
<p><strong>Lists</strong></p>
<p>Whenrearranginglistitems,afterrunningPrettierallthenumberswillbefixed!</p>
<p><ahref="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966"target="_blank"><imgsrc="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966"alt="Markdown Lists"style="max-width:100%;"></a></p>
<blockquote>
<p>Note:youcanactuallyoptoutofthisbyusing <code>1.</code>foralllistitemsifyouwanttooptimizeforcleanerdiffs.</p>
</blockquote>
<p><strong>Tables</strong></p>
<p>Tableswillalsoautomaticallybeadjustedtofittheircontents. Thiscouldbecompletelyunmaintainablewithoutanautomatedtool.</p>
<p><ahref="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966"target="_blank"><imgsrc="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966"alt="Markdown Tables"style="max-width:100%;"></a></p>
<p><strong>Markdown-in-JS</strong></p>
<p>Byusingeither <code>md</code>or <code>markdown</code>taggedtemplateliterals,youcanformatmarkdowncodeinsideJavaScript.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-k">const</span> <spanclass="pl-c1">markdown</span> <spanclass="pl-k">=</span>md<spanclass="pl-s"><spanclass="pl-pds">`</span></span>
<spanclass="pl-s">#heading</span>
<spanclass="pl-s"></span>
<spanclass="pl-s"> 1. listitem</span>
<spanclass="pl-s"><spanclass="pl-pds">`</span></span>;</pre></div>
<h2>CLI</h2>
<h3>Addoptiontoinsert <code>@format</code>tofirstdocblockifabsent (<ahref="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 <ahref="https://urls.greenkeeper.io/samouri"class="user-mention">@samouri</a></h3>
<p>In 1.7,weaddedanoptioncalled <code>--require-pragma</code>torequirefilescontainan <code>/** @format */</code>pragmatobeformatted. Inordertoaddthispragmatoalargesetoffilesyoucannowuse <ahref="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 (<ahref="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 <ahref="https://urls.greenkeeper.io/ikatyang"class="user-mention">@ikatyang</a></h3>
<p>This <ahref="https://prettier.io/docs/en/cli.html#loglevel">niftyfeature</a>allowsyoutooptin (orout) ofPrettier's logging. We'vealsocleaneduptheloggingsubstantiallysince 1.7.</p>
<divclass="highlight highlight-source-shell"><pre>$ prettier--loglevel=debugblarg
$ ./bin/prettier.js--loglevel=debugblarg
[debug] normalizedargv: {<spanclass="pl-s"><spanclass="pl-pds">"</span>_<span class="pl-pds">"</span></span>:[<span class="pl-s"><span class="pl-pds">"</span>blarg<spanclass="pl-pds">"</span></span>],<span class="pl-s"><span class="pl-pds">"</span>bracket-spacing<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>color<spanclass="pl-pds">"</span></span>:true,<span class="pl-s"><span class="pl-pds">"</span>debug-check<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>debug-print-doc<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>flow-parser<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>insert-pragma<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>jsx-bracket-same-line<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>list-different<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>require-pragma<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>semi<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>single-quote<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>stdin<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>use-tabs<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>version<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>with-node-modules<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>write<spanclass="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>loglevel<spanclass="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>debug<spanclass="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>ignore-path<spanclass="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>.prettierignore<spanclass="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>config-precedence<spanclass="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>cli-override<spanclass="pl-pds">"</span></span>}
[error] Nomatchingfiles. Patternstried:blarg <spanclass="pl-k">!</span><spanclass="pl-k">**</span>/node_modules/<spanclass="pl-k">**</span> <spanclass="pl-k">!</span>./node_modules/<spanclass="pl-k">**</span>
</pre></div>
<h2>JavaScript</h2>
<h3>FixindentationforJSDoccomments (<ahref="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 <ahref="https://urls.greenkeeper.io/maxdeviant"class="user-mention">@maxdeviant</a></h3>
<p>Thishasbeenalong-timeknownissuewithPrettier. Whenformattingcodethatresultsinachangeofindentationlevel,theJSDoccommentswouldendupbeingoutofalignment. We're happy to report this is now fixed!</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">function</span> <spanclass="pl-en">theFunction2</span>(<spanclass="pl-smi">action$</span>, <spanclass="pl-smi">store</span>) {
<spanclass="pl-c"><spanclass="pl-c">/*</span></span><span class="pl-c"> * comments</span><span class="pl-c"> <span class="pl-c">*/</span></span>
<spanclass="pl-k">return</span> <spanclass="pl-c1">true</span>;
}
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">function</span> <spanclass="pl-en">theFunction2</span>(<spanclass="pl-smi">action$</span>, <spanclass="pl-smi">store</span>) {
<spanclass="pl-c"><spanclass="pl-c">/*</span></span><span class="pl-c"> * comments</span><span class="pl-c"> <span class="pl-c">*/</span></span>
<spanclass="pl-k">return</span> <spanclass="pl-c1">true</span>;
}</pre></div>
<h3>Printpipelineandnullish-coalescingoperators (<ahref="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 <ahref="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 <ahref="https://urls.greenkeeper.io/tc39/proposal-pipeline-operator/">pipelineoperator</a>iscurrentlyastageoneproposal.</p>
<blockquote>
<p>Thisproposalintroducesanewoperator |> similartoF#,OCaml,Elixir,Elm,Julia,Hack,andLiveScript,aswellasUNIXpipes. 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>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">let</span>result <spanclass="pl-k">=</span> <spanclass="pl-en">exclaim</span>(<spanclass="pl-en">capitalize</span>(<spanclass="pl-en">doubleSay</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>hello<span class="pl-pds">"</span></span>)));
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">let</span>result <spanclass="pl-k">=</span> <spanclass="pl-s"><spanclass="pl-pds">"</span>hello<span class="pl-pds">"</span></span>
<spanclass="pl-k">|</span><spanclass="pl-k">></span>doubleSay
<spanclass="pl-k">|</span><spanclass="pl-k">></span>capitalize
<spanclass="pl-k">|</span><spanclass="pl-k">></span>exclaim;</pre></div>
<p>The <ahref="https://urls.greenkeeper.io/tc39-transfer/proposal-nullish-coalescing">nullishcoalescingoperator</a>isanotherstageoneproposal.</p>
<blockquote>
<p>Whenperformingoptionalpropertyaccessinanestedstructureinconjunctionwiththeoptionalchainingoperator,itisoftendesiredtoprovideadefaultvalueiftheresultofthatpropertyaccessisnullorundefined.</p>
</blockquote>
<p>Thisoperatorissimilarto <code>||</code>exceptitonlyevaluatestheright-hand-sideiftheleftis <code>undefined</code>or <code>null</code>,not <code>""</code>, <code>0</code>, <code>NaN</code>,etc.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-k">const</span> <spanclass="pl-c1">foo</span> <spanclass="pl-k">=</span> <spanclass="pl-smi">object</span>.<spanclass="pl-smi">foo</span> <spanclass="pl-k">??</span> <spanclass="pl-s"><spanclass="pl-pds">"</span>default<span class="pl-pds">"</span></span>;</pre></div>
<h3>Improvedtemplateliteralexpresionslinebreaks (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>ThiswasanotherknownissuewithPrettier,whenprintingatemplateliteralstringwithexpressionsinsidethatwentovertheprintwidth,itwouldwrapthecodeinweirdplacesinsidetheexpressions. Now,ifPrettierneedstoinsertalinebreak,itshouldhappenrightbetween <code>${</code>and <code>}</code>.</p>
<divclass="highlight highlight-source-js-jsx"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">const</span> <spanclass="pl-smi">description</span><spanclass="pl-k">=</span><spanclass="pl-s"> <spanclass="pl-s">`</span><spanclass="pl-s">Thevalueofthe <spanclass="pl-e">${<spanclass="pl-smi">cssName</span>}</span>cssofthe <spanclass="pl-e">${<spanclass="pl-c1">this</span></span></span></span>
<spanclass="pl-s"><spanclass="pl-s"><spanclass="pl-e"> <spanclass="pl-k">.</span><spanclass="pl-smi">_name</span>}</span>element</span><spanclass="pl-s">`</span></span>;
<spanclass="pl-k">const</span> <spanclass="pl-smi">foo</span><spanclass="pl-k">=</span><spanclass="pl-s"> <spanclass="pl-s">`</span><spanclass="pl-s">mdl-textfieldmdl-js-textfield <spanclass="pl-e">${<spanclass="pl-smi">className</span>}</span> <spanclass="pl-e">${<spanclass="pl-smi">content</span><spanclass="pl-k">.</span><spanclass="pl-smi">length</span><spanclass="pl-k">></span> <spanclass="pl-c1">0</span></span></span></span>
<spanclass="pl-s"><spanclass="pl-s"><spanclass="pl-e"> <spanclass="pl-k">?</span> <spanclass="pl-s"><spanclass="pl-pds">"</span>is-dirty<span class="pl-pds">"</span></span></span></span></span>
<spanclass="pl-s"><spanclass="pl-s"><spanclass="pl-e"> <spanclass="pl-k">:</span> <spanclass="pl-s"><spanclass="pl-pds">"</span><span class="pl-pds">"</span></span>}</span> combo-box__input</span><span class="pl-s">`</span></span>;
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">const</span> <spanclass="pl-smi">description</span><spanclass="pl-k">=</span><spanclass="pl-s"> <spanclass="pl-s">`</span><spanclass="pl-s">Thevalueofthe \${cssName} cssofthe \${</span></span>
<spanclass="pl-s"><spanclass="pl-s">this._name</span></span>
<spanclass="pl-s"><spanclass="pl-s">} element</span><spanclass="pl-s">`</span></span>;
<spanclass="pl-k">const</span> <spanclass="pl-smi">foo</span><spanclass="pl-k">=</span><spanclass="pl-s"> <spanclass="pl-s">`</span><spanclass="pl-s">mdl-textfieldmdl-js-textfield <spanclass="pl-e">${<spanclass="pl-smi">className</span>}</span> <spanclass="pl-e">${</span></span></span>
<spanclass="pl-s"><spanclass="pl-s"><spanclass="pl-e"><spanclass="pl-smi">content</span><spanclass="pl-k">.</span><spanclass="pl-smi">length</span><spanclass="pl-k">></span> <spanclass="pl-c1">0</span> <spanclass="pl-k">?</span> <spanclass="pl-s"><spanclass="pl-pds">'</span>is-dirty<span class="pl-pds">'</span></span> <spanclass="pl-k">:</span> <spanclass="pl-s"><spanclass="pl-pds">'</span><span class="pl-pds">'</span></span></span></span></span>
<spanclass="pl-s"><spanclass="pl-s"><spanclass="pl-e">}</span>combo-box__input</span><spanclass="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>Inordertoalignclosertothe <ahref="https://urls.greenkeeper.io/airbnb/javascript/">Airbnbstyleguide</a>,andsinceitwasneverintentionallyprintedthisway,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>
<divclass="highlight highlight-source-js-jsx"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<<spanclass="pl-ent"><spanclass="pl-c1">BookingIntroPanel</span></span>
<spanclass="pl-e">logClick</span><spanclass="pl-k">=</span><spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">data</span> <spanclass="pl-k">=></span></span>
<spanclass="pl-s1"> <spanclass="pl-en">doLogClick</span>(<spanclass="pl-s"><spanclass="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<spanclass="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span><span class="pl-pse">}</span>
/>;
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<<spanclass="pl-ent"><spanclass="pl-c1">BookingIntroPanel</span></span>
<spanclass="pl-e">logClick</span><spanclass="pl-k">=</span><spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">data</span> <spanclass="pl-k">=></span></span>
<spanclass="pl-s1"> <spanclass="pl-en">doLogClick</span>(<spanclass="pl-s"><spanclass="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<spanclass="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span>
<spanclass="pl-s1"> </span><spanclass="pl-pse">}</span>/>;</pre></div>
<h1>OtherChanges</h1>
<h2>JavaScript</h2>
<h3>Makethefactorydetectionhandlemultipleelements (<ahref="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 <ahref="https://urls.greenkeeper.io/vjeux"class="user-mention">@vjeux</a></h3>
<p>TherewasabugintheheuristicthatPrettierusestodeterminewhetheranexpressionisafactoryornot. Itnowworkscorrectlywithlongermemberexpressions.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-c1">window</span>.<spanclass="pl-smi">FooClient</span>
.<spanclass="pl-en">setVars</span>({
locale<spanclass="pl-k">:</span> <spanclass="pl-en">getFooLocale</span>({ page }),authorizationToken<spanclass="pl-k">:</span> <spanclass="pl-smi">data</span>.<spanclass="pl-smi">token</span>
})
.<spanclass="pl-en">initVerify</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>);
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-c1">window</span>.<spanclass="pl-smi">FooClient</span>.<spanclass="pl-en">setVars</span>({
locale<spanclass="pl-k">:</span> <spanclass="pl-en">getFooLocale</span>({ page }),authorizationToken<spanclass="pl-k">:</span> <spanclass="pl-smi">data</span>.<spanclass="pl-smi">token</span>
}).<spanclass="pl-en">initVerify</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>);</pre></div>
<h3>Handlecommentsbetweenfunctionnameandopenparen (<ahref="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 <ahref="https://urls.greenkeeper.io/azz"class="user-mention">@azz</a></h3>
<p>Printingcommentsintherightplaceisanendlesschallenge <g-emojialias="wink"fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f609.png"ios-version="6.0">😉</g-emoji>. Thisfixensuresthatcommentsnexttofunctionnamesarere-printedcorrectly.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">function</span> <spanclass="pl-en">f</span>(<spanclass="pl-c"><spanclass="pl-c">/*</span> comment<span class="pl-c">*/</span></span> <spanclass="pl-smi">promise</span>) {}
<spanclass="pl-c"><spanclass="pl-c">//</span> After </span>
<spanclass="pl-k">function</span>f <spanclass="pl-c"><spanclass="pl-c">/*</span> comment<span class="pl-c">*/</span></span>(<spanclass="pl-smi">promise</span>) {}</pre></div>
<h3>SupportsequentialCallExpressionsinmemberchains (<ahref="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 <ahref="https://urls.greenkeeper.io/chrisvoll"class="user-mention">@chrisvoll</a></h3>
<p>MemberchainsareoneofthemostcomplexpartsofPrettier. ThisPRfixesanissuewhererepeatedcallsleadtothenextmethodnotbeingpushedtothenextline.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
wrapper
.<spanclass="pl-c1">find</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>)
.<spanclass="pl-en">prop</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)().<span class="pl-en">then</span>(<span class="pl-k">function</span>() {
<spanclass="pl-en">doSomething</span>();
});
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
wrapper
.<spanclass="pl-c1">find</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>)
.<spanclass="pl-en">prop</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)()
.<spanclass="pl-en">then</span>(<spanclass="pl-k">function</span>() {
<spanclass="pl-en">doSomething</span>();
});</pre></div>
<h3>Accountforemptylinesinlongmembercallchain (<ahref="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 <ahref="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>Fixissuewherefirstargumentisleftbehindwhenlinebreaks (<ahref="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 <ahref="https://urls.greenkeeper.io/mutdmour"class="user-mention">@mutdmour</a></h3>
<p>Thisaddressesanissuewhereduetoourspecialobjectinlinebehaviour,theindentationmissingfromthefunctioncall.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-smi">db</span>.<spanclass="pl-en">collection</span>(<spanclass="pl-s"><spanclass="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<spanclass="pl-k">:</span> <spanclass="pl-c1">true</span>
},
<spanclass="pl-k">function</span>(<spanclass="pl-smi">err</span>) {
<spanclass="pl-c"><spanclass="pl-c">//</span> code</span>
});
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-smi">db</span>.<spanclass="pl-en">collection</span>(<spanclass="pl-s"><spanclass="pl-pds">"</span>indexOptionDefault<span class="pl-pds">"</span></span>).<span class="pl-en">createIndex</span>(
{ a<spanclass="pl-k">:</span> <spanclass="pl-c1">1</span> },
{
indexOptionDefaults<spanclass="pl-k">:</span> <spanclass="pl-c1">true</span>
},
<spanclass="pl-k">function</span>(<spanclass="pl-smi">err</span>) {
<spanclass="pl-c"><spanclass="pl-c">//</span> code</span>
}
);</pre></div>
<h3>Breakparensforbinariesinmemberexpression (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Similarly,therewasanotheredgecasewhereindentationwasmissingfromlogicalexpressions. Thisisfixed,too.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">const</span> <spanclass="pl-c1">someLongVariable</span> <spanclass="pl-k">=</span> (<spanclass="pl-en">idx</span>(
<spanclass="pl-c1">this</span>.<spanclass="pl-smi">props</span>,
<spanclass="pl-smi">props</span> <spanclass="pl-k">=></span> <spanclass="pl-smi">props</span>.<spanclass="pl-smi">someLongPropertyName</span>
) <spanclass="pl-k">||</span> []
).<spanclass="pl-en">map</span>(<spanclass="pl-smi">edge</span> <spanclass="pl-k">=></span> <spanclass="pl-smi">edge</span>.<spanclass="pl-smi">node</span>);
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">const</span> <spanclass="pl-c1">someLongVariable</span> <spanclass="pl-k">=</span> (
<spanclass="pl-en">idx</span>(<spanclass="pl-c1">this</span>.<spanclass="pl-smi">props</span>, <spanclass="pl-smi">props</span> <spanclass="pl-k">=></span> <spanclass="pl-smi">props</span>.<spanclass="pl-smi">someLongPropertyName</span>) <spanclass="pl-k">||</span> []
).<spanclass="pl-en">map</span>(<spanclass="pl-smi">edge</span> <spanclass="pl-k">=></span> <spanclass="pl-smi">edge</span>.<spanclass="pl-smi">node</span>);</pre></div>
<h3>PreventbreakingMemberExpressioninsideNewExpression (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Therearesomanywaystobreakaline. Someofthemlookmuchworsethanothers. Breakingbetweeninthiscaselookedreallyweird,soithasbeenfixed!</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-k">function</span> <spanclass="pl-en">functionName</span>() {
<spanclass="pl-k">if</span> (<spanclass="pl-c1">true</span>) {
<spanclass="pl-c1">this</span>.<spanclass="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <spanclass="pl-k">=</span> <spanclass="pl-k">new</span> <spanclass="pl-en">this</span>
.<spanclass="pl-en">Promise</span>((<spanclass="pl-smi">resolve</span>, <spanclass="pl-smi">reject</span>) <spanclass="pl-k">=></span> {
<spanclass="pl-c"><spanclass="pl-c">//</span> do something</span>
});
}
}
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">function</span> <spanclass="pl-en">functionName</span>() {
<spanclass="pl-k">if</span> (<spanclass="pl-c1">true</span>) {
<spanclass="pl-c1">this</span>.<spanclass="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <spanclass="pl-k">=</span> <spanclass="pl-k">new</span> <spanclass="pl-en">this.Promise</span>(
(<spanclass="pl-smi">resolve</span>, <spanclass="pl-smi">reject</span>) <spanclass="pl-k">=></span> {
<spanclass="pl-c"><spanclass="pl-c">//</span> do something</span>
}
);
}
}</pre></div>
<h3>Fixarrayacessorsinmethodchains (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Inamethodchainwesplitlinesbygroupingelementstogetherandaccessinganarrayshouldbeprintedintheendofagroupinsteadofthebeginning.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-en">find</span>(<spanclass="pl-s"><spanclass="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>)
[<spanclass="pl-c1">0</span>].<spanclass="pl-c1">getAttribute</span>(<spanclass="pl-s"><spanclass="pl-pds">'</span>href<span class="pl-pds">'</span></span>)
.<spanclass="pl-c1">indexOf</span>(<spanclass="pl-c1">this</span>.<spanclass="pl-smi">landingPageLink</span>)
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-en">find</span>(<spanclass="pl-s"><spanclass="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>)[<spanclass="pl-c1">0</span>]
.<spanclass="pl-c1">getAttribute</span>(<spanclass="pl-s"><spanclass="pl-pds">'</span>href<span class="pl-pds">'</span></span>)
.<spanclass="pl-c1">indexOf</span>(<spanclass="pl-c1">this</span>.<spanclass="pl-smi">landingPageLink</span>)</pre></div>
<h2>FlowandTypeScript</h2>
<h3>Fixindentationofintersectionobjecttypes (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Thiswasaminoralignmentbuginintersectiontypes,andhasnowbeenfixed.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
typeintersectionTest <spanclass="pl-k">=</span> {
propA<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propB<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propC<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propD<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
};
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
typeProps <spanclass="pl-k">=</span> {
propA<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propB<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propC<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
} <spanclass="pl-k">&</span> {
propD<spanclass="pl-k">:</span> <spanclass="pl-c1">X</span>
};</pre></div>
<h3>KeepparensaroundTSAsExpressioninConditionalExpression (<ahref="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 <ahref="https://urls.greenkeeper.io/azz"class="user-mention">@azz</a></h3>
<p>WemissedacasewhereweneedtokeeptheparenthesiswithTypeScript's <code>as</code> assertions. This is now fixed.</p>
<divclass="highlight highlight-source-ts"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<spanclass="pl-c"></span><spanclass="pl-smi">aValue</span> <spanclass="pl-k">as</span> <spanclass="pl-c1">boolean</span> ? <spanclass="pl-c1">0</span>: <spanclass="pl-k">-</span><spanclass="pl-c1">1</span>;
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-c"></span>(<spanclass="pl-smi">aValue</span> <spanclass="pl-k">as</span> <spanclass="pl-c1">boolean</span>) <spanclass="pl-k">?</span> <spanclass="pl-c1">0</span> <spanclass="pl-k">:</span> <spanclass="pl-k">-</span><spanclass="pl-c1">1</span>;</pre></div>
<h2>JSX</h2>
<h3>CollapsemultipleJSXwhitespaces (<ahref="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 <ahref="https://urls.greenkeeper.io/karl"class="user-mention">@karl</a></h3>
<p>ThisfixesuptheissuewhereJSXformattingoccasionallyneededtoberuntwicetobecomestable. ThisoccurredwhenyouhadmultipleJSXwhitespaceelementsorJSXwhitespacefollowedbyaspace.</p>
<divclass="highlight highlight-source-js-jsx"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<<spanclass="pl-ent">div</span>>
<spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-s"><spanclass="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> />
</<spanclass="pl-ent">div</span>>;
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<<spanclass="pl-ent">div</span>>
<spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-s"><spanclass="pl-pds">"</span> <span class="pl-pds">"</span></span></span><span class="pl-pse">}</span>
<<spanclass="pl-ent"><spanclass="pl-c1">Badge</span></span> <spanclass="pl-e">src</span><spanclass="pl-k">=</span><spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">notificationIconPng</span></span><spanclass="pl-pse">}</span>/>
</<spanclass="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>Thiswasanissuewiththe <code>--jsx-bracket-same-line</code>option. Turnsoutyoucan't <em>always</em> put the bracket on the same line...</p>
<divclass="highlight highlight-source-js-jsx"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Input</span>
<<spanclass="pl-ent">div</span>
<spanclass="pl-c"> <spanclass="pl-c">//</span> comment</span>
>
<spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">foo</span></span><spanclass="pl-pse">}</span></<spanclass="pl-ent">div</span>>
<spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
<<spanclass="pl-ent">div</span>>
//comment
<spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">foo</span></span><spanclass="pl-pse">}</span></<spanclass="pl-ent">div</span>>;
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<<spanclass="pl-ent">div</span>
<spanclass="pl-c"><spanclass="pl-c">//</span> comment</span>
>
<spanclass="pl-pse">{</span><spanclass="pl-s1"><spanclass="pl-smi">foo</span></span><spanclass="pl-pse">}</span></<spanclass="pl-ent">div</span>>;</pre></div>
<h2>CSS</h2>
<h3>Preservelinebreaksingriddeclarations (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Prettierwillnowpreservelinebreaksincludedinthesourcecodewhenformattingthe <code>grid</code>and <code>grid-template-*</code>rules,sincethoseareimportanttokeepinseparatelines,butstillappliestheformattinglikeotherrules (e.g.,numbersandquotes).</p>
<divclass="highlight highlight-source-css"><pre><spanclass="pl-c"><spanclass="pl-c">/*</span> Original Input <span class="pl-c">*/</span></span>
<spanclass="pl-ent">div</span> {
<spanclass="pl-c1"><spanclass="pl-c1">grid</span></span>:
[wide-start] <spanclass="pl-s"><spanclass="pl-pds">'</span>header header header<span class="pl-pds">'</span></span> <spanclass="pl-c1">200.000<spanclass="pl-k">px</span></span>
[wide-end] <spanclass="pl-s"><spanclass="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">.50<span class="pl-k">fr</span></span>
/ <spanclass="pl-c1">auto</span> <spanclass="pl-c1">50.000<spanclass="pl-k">px</span></span> <spanclass="pl-c1">auto</span>;
}
<spanclass="pl-c"><spanclass="pl-c">/*</span> Before <span class="pl-c">*/</span></span>
<spanclass="pl-ent">div</span> {
<spanclass="pl-c1"><spanclass="pl-c1">grid</span></span>: [wide-start] <spanclass="pl-s"><spanclass="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]
<spanclass="pl-s"><spanclass="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>;
}
<spanclass="pl-c"><spanclass="pl-c">/*</span> After <span class="pl-c">*/</span></span>
<spanclass="pl-ent">div</span> {
<spanclass="pl-c1"><spanclass="pl-c1">grid</span></span>:
[wide-start] <spanclass="pl-s"><spanclass="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] <spanclass="pl-s"><spanclass="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>
/ <spanclass="pl-c1">auto</span> <spanclass="pl-c1">50<spanclass="pl-k">px</span></span> <spanclass="pl-c1">auto</span>;
}</pre></div>
<h2>SCSS</h2>
<h3>FormatSCSSmapslikeCSSrules (<ahref="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 <ahref="https://urls.greenkeeper.io/asmockler"class="user-mention">@asmockler</a></h3>
<p>TurnsoutSCSSmapsaremuchprettierwhenprintedovermultiplelines.</p>
<divclass="highlight highlight-source-scss"><pre><spanclass="pl-c">// Before</span>
<spanclass="pl-smi">$map</span>: (color: <spanclass="pl-c1">#111111</span>, <spanclass="pl-c1">text</span><spanclass="pl-c1">-</span>shadow:<spanclass="pl-c1"> 1</span><spanclass="pl-k">px</span><spanclass="pl-c1"> 1</span><spanclass="pl-k">px</span><spanclass="pl-c1"> 0</span> <spanclass="pl-bu">salmon</span>)
//After
<spanclass="pl-smi">$map</span>: (
color: <spanclass="pl-c1">#111111</span>,
<spanclass="pl-c1">text</span><spanclass="pl-c1">-</span>shadow:<spanclass="pl-c1"> 1</span><spanclass="pl-k">px</span><spanclass="pl-c1"> 1</span><spanclass="pl-k">px</span><spanclass="pl-c1"> 0</span> <spanclass="pl-bu">salmon</span>
);</pre></div>
<h2>CSS-in-JS</h2>
<h3>Fixformattingstyled(Foo).attrs(...)`` (<ahref="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 <ahref="https://urls.greenkeeper.io/existentialism"class="user-mention">@existentialism</a></h3>
<p>PrettierwillnowformattheCSSinstyled-componentscodethatlookslikethis:</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-en">styled</span>(Component).<spanclass="pl-en">attrs</span>({})<spanclass="pl-s"><spanclass="pl-pds">`</span></span>
<spanclass="pl-s">color:red;</span>
<spanclass="pl-s"><spanclass="pl-pds">`</span></span>;</pre></div>
<h2>GraphQL</h2>
<h3>PreventformattingGraphQLtemplateliteralswithexpressions (<ahref="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 <ahref="https://urls.greenkeeper.io/duailibe"class="user-mention">@duailibe</a></h3>
<p>Prettierdoesn'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'vecompletelydisabledformattingGraphQLwhenitcontainsJavaScriptexpressionsuntilwefullysupportit.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before</span>
(invalidcode)
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-en">graphql</span>(schema, <spanclass="pl-s"><spanclass="pl-pds">`</span>{ querytest { id }} <spanclass="pl-s1"><spanclass="pl-pse">${</span>fragment<spanclass="pl-pse">}</span></span><spanclass="pl-pds">`</span></span>)</pre></div>
<h2>CLI</h2>
<h3>Don't use ANSI codes if stdout isn'taTTY (<ahref="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 <ahref="https://urls.greenkeeper.io/narigo"class="user-mention">@Narigo</a></h3>
<p>Previously,pipingtheoutputof <code>--list-different</code>toothertoolswastroublesomeduetotheANSIcolorcodesweusetoshowwhetherafilewasmodifiedornot. ThisPRdisablestheuseofcolorwhenPrettierispipedtoadifferentprocess.</p>
<h2>Configuration</h2>
<h3>UserelativepathswithCLI (<ahref="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 <ahref="https://urls.greenkeeper.io/ahmedelgabri"class="user-mention">@ahmedelgabri</a></h3>
<p>Thisfixesabugwherepassingapathstartingwith <code>./</code>totheCLIwouldn't match patterns used in <code>.prettierignore</code>.</p>
<pre><code># .prettierignorepath/to/*.js
</code></pre>
<p>Afterthisfix,nofileswillbewrittentowhenexecuting:</p>
<divclass="highlight highlight-source-shell"><pre>$ prettier--write ./path/to/<spanclass="pl-k">*</span>.js</pre></div>
<h3>Resolvefilepathsrelativetoconfigfile (<ahref="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 <ahref="https://urls.greenkeeper.io/azz"class="user-mention">@azz</a></h3>
<p>Thisfixesanissuewhere <code>.prettierrc</code>overrides,undercertainconditions,werenotbeingrespectedforabsolutepathswiththe <code>resolveConfig</code>API.</p>
<h2>Core</h2>
<h3>RespectCJKwidthandCombinedCharacters (<ahref="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>, <ahref="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 <ahref="https://urls.greenkeeper.io/ikatyang"class="user-mention">@ikatyang</a></h3>
<p>Chinese,JapaneseandKoreancharactersarenowconsideredtwocharacterswide.</p>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-c"><spanclass="pl-c">//</span> Before (exceeds print width when CJK characters are 2x monospace chars)</span>
<spanclass="pl-k">const</span> <spanclass="pl-c1">x</span> <spanclass="pl-k">=</span> [<spanclass="pl-s"><spanclass="pl-pds">"</span>中文<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>中文<spanclass="pl-pds">"</span></span>];
<spanclass="pl-c"><spanclass="pl-c">//</span> After</span>
<spanclass="pl-k">const</span> <spanclass="pl-c1">x</span> <spanclass="pl-k">=</span> [
<spanclass="pl-s"><spanclass="pl-pds">"</span>中文<span class="pl-pds">"</span></span>,
<spanclass="pl-c"><spanclass="pl-c">//</span> ...</span>
<spanclass="pl-s"><spanclass="pl-pds">"</span>中文<span class="pl-pds">"</span></span>
];</pre></div>
<p><ahref="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>alsoensuresthatcombiningcharacters (e.g. <code>Á</code>) arecountedasonecharacter.</p>
<h2>EditorSupport</h2>
<h3>ImplementgetSupportInfo() anduseitforinference (<ahref="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 <ahref="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,weusethisinformationtodrivewhichextensionstriggerwhichparsers,andsupportsomecommonfilesthatdon't have extensions, like <code>.prettierrc</code>, <code>Jakefile</code>, etc.</p>
<divclass="highlight highlight-source-shell"><pre><spanclass="pl-c"><spanclass="pl-c">#</span>prettierknowsthatthisfileisJSONnow.</span>
$ prettier--write .prettierrc</pre></div>
<h3>Splitsourceelementsrelativetotheirlanguage. (<ahref="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 <ahref="https://urls.greenkeeper.io/cigit"class="user-mention">@CiGit</a></h3>
<p>Thisfixesanissueineditorsthatsupportrangeformatting,whereformattinganobjectwouldcausePrettiertocrash.</p>
<hr>
<h1>Thanks! <g-emojialias="heart"fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png"ios-version="6.0">❤️</g-emoji></h1>
<p>Thankstoeveryonewhocontributedtothisrelease,aswellasthosewhoraisedissues! Prettierhasbecomeahighlystablepieceofsoftwarethatalargeamountofpeopletrustwiththeircode. Wetakethattrustseriously,andfixrareissuesthatbreakcodewiththehighestpriority. Wecan't fix these issues if we don'tknowaboutthem,soneverbeafraidto <ahref="https://urls.greenkeeper.io/prettier/prettier/issues/new">createanissue</a>!</p>
</details>
<details>
<summary>FAQandhelp</summary>Thereisacollectionof [frequentlyaskedquestions](https://greenkeeper.io/faq.html). Ifthosedon’thelp,youcanalways [askthehumansbehindGreenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).
</details>---Your [Greenkeeper](https://greenkeeper.io) Bot:palm_tree:
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 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
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
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