Skip to content

Commit

Permalink
Add support for prettier options (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
antonyfaris authored Nov 8, 2021
1 parent 302c0eb commit 85f7f93
Show file tree
Hide file tree
Showing 138 changed files with 947 additions and 85 deletions.
5 changes: 5 additions & 0 deletions .changeset/witty-badgers-shave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'prettier-plugin-astro': patch
---

Add support for prettier options
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
test/fixtures/**/*
test/fixtures/**/*.md
test/fixtures/**/*.astro
9 changes: 5 additions & 4 deletions src/printer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
isEmptyDoc,
isEmptyTextNode,
isInlineElement,
isInsideQuotedAttribute,
isLine,
isLoneMustacheTag,
isNodeWithChildren,
Expand Down Expand Up @@ -241,7 +242,7 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
const isSelfClosingTag = isEmpty && (node.type !== 'Element' || selfClosingTags.indexOf(node.name) !== -1);
const attributes = path.map(print, 'attributes');
if (isSelfClosingTag) {
return group(['<', node.name, indent(group([...attributes, ''])), ...[' ', `/>`]]);
return group(['<', node.name, indent(group(attributes)), line, `/>`]);
// return group(['<', node.name, indent(group([...attributes, opts.jsxBracketNewLine ? dedent(line) : ''])), ...[opts.jsxBracketNewLine ? '' : ' ', `/>`]]);
}
try {
Expand Down Expand Up @@ -313,7 +314,7 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
body = () => path.map(print, 'children');
}

const openingTag = ['<', node.name, indent(group([...attributes, hugStart ? '' : !isPreTagContent(path) ? dedent(softline) : '']))];
const openingTag = ['<', node.name, indent(group([...attributes, hugStart ? '' : !isPreTagContent(path) && !opts.bracketSameLine ? dedent(softline) : '']))];
// const openingTag = ['<', node.name, indent(group([...attributes, hugStart ? '' : opts.jsxBracketNewLine && !isPreTagContent(path) ? dedent(softline) : '']))];

if (hugStart && hugEnd) {
Expand Down Expand Up @@ -393,8 +394,8 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
return [
'{',
printJS(path, print, 'expression', {
forceSingleLine: true,
forceSingleQuote: false,
forceSingleLine: isInsideQuotedAttribute(path),
forceSingleQuote: opts.jsxSingleQuote,
}),
'}',
];
Expand Down
159 changes: 89 additions & 70 deletions test/astro-prettier.test.ts
Original file line number Diff line number Diff line change
@@ -1,73 +1,5 @@
import test, { Macro } from 'ava';
import { format, markdownFormat } from './test-utils.js';
import { promises as fs } from 'fs';
import { fileURLToPath, URL } from 'url';

const readFile = (path: string) => fs.readFile(fileURLToPath(new URL(`./fixtures${path}`, import.meta.url))).then((res) => res.toString().replace(/\r\n/g, '\n'));

/**
* Utility to get `[src, out]` files
*/
const getFiles = async (name: string) => {
const [src, out] = await Promise.all([readFile(`/in/${name}.astro`), readFile(`/out/${name}.astro`)]);
return [src, out];
};

const getMarkdownFiles = async (name: string) => {
const [src, out] = await Promise.all([readFile(`/in/${name}.md`), readFile(`/out/${name}.md`)]);
return [src, out];
};

/**
* Macro for testing fixtures
*/
const Prettier: Macro<[string]> = async (t, name) => {
const [src, out] = await getFiles(name);
t.not(src, out, 'Unformated file and formated file are the same');

const formatted = format(src);
t.is(formatted, out, 'Incorrect formating');
// test that our formatting is idempotent
const formattedTwice = format(formatted);
t.is(formatted, formattedTwice, 'Formatting is not idempotent');
};

/**
* Macro title function for nice formatting
*/
Prettier.title = (title, name) => `${title}:
- input: fixtures/in/${name}.astro
- output: fixtures/out/${name}.astro`;

const PrettierUnaltered: Macro<[string]> = async (t, name) => {
const [src, out] = await getFiles(name);
t.is(src, out, 'Unformated file and formated file are not the same'); // the output should be unchanged

const formatted = format(src);
t.is(formatted, out, 'Incorrect formating');
// test that our formatting is idempotent
const formattedTwice = format(formatted);
t.is(formatted, formattedTwice, 'Formatting is not idempotent');
};

PrettierUnaltered.title = Prettier.title;

const PrettierMarkdown: Macro<[string]> = async (t, name) => {
const [src, out] = await getMarkdownFiles(name);
t.not(src, out, 'Unformated file and formated file are the same');

const formatted = markdownFormat(src);
t.is(formatted, out, 'Incorrect formating');
// test that our formatting is idempotent
const formattedTwice = markdownFormat(formatted);
t.is(formatted, formattedTwice, 'Formatting is not idempotent');
};

PrettierMarkdown.title = (title, name) => `${title}:
- input: fixtures/in/${name}.md
- output: fixtures/out/${name}.md`;
import test from 'ava';
import { Prettier, PrettierMarkdown, PrettierUnaltered } from './test-utils.js';

test('can format a basic Astro file', Prettier, 'basic');

Expand Down Expand Up @@ -122,3 +54,90 @@ test.todo("properly follow prettier' advice on formatting comments");

// note(drew): I think this is a function of Astro’s parser, not Prettier. We’ll have to handle helpful error messages there!
test.todo('test whether invalid files provide helpful support messages / still try to be parsed by prettier?');

// https://prettier.io/docs/en/options.html#print-width
test('Can format an Astro file with prettier "printWidth" option', Prettier, 'option-print-width');

// https://prettier.io/docs/en/options.html#tab-width
test('Can format an Astro file with prettier "tabWidth" option', Prettier, 'option-tab-width');

// https://prettier.io/docs/en/options.html#tabs
test('Can format an Astro file with prettier "useTabs: true" option', Prettier, 'option-use-tabs-true');

// https://prettier.io/docs/en/options.html#tabs
test('Can format an Astro file with prettier "useTabs: false" option', Prettier, 'option-use-tabs-false');

// https://prettier.io/docs/en/options.html#semicolons
test('Can format an Astro file with prettier "semi: true" option', Prettier, 'option-semicolon-true');

// https://prettier.io/docs/en/options.html#semicolons
test('Can format an Astro file with prettier "semi: false" option', Prettier, 'option-semicolon-false');

// https://prettier.io/docs/en/options.html#quotes
test('Can format an Astro file with prettier "singleQuote: false" option', Prettier, 'option-single-quote-false');

// https://prettier.io/docs/en/options.html#quotes
test('Can format an Astro file with prettier "singleQuote: true" option', Prettier, 'option-single-quote-true');

// https://prettier.io/docs/en/options.html#quote-props
test('Can format an Astro file with prettier "quoteProps: as-needed" option', Prettier, 'option-quote-props-as-needed');

// https://prettier.io/docs/en/options.html#quote-props
test('Can format an Astro file with prettier "quoteProps: consistent" option', Prettier, 'option-quote-props-consistent');

// https://prettier.io/docs/en/options.html#quote-props
test('Can format an Astro file with prettier "quoteProps: preserve" option', Prettier, 'option-quote-props-preserve');

// https://prettier.io/docs/en/options.html#jsx-quotes
test('Can format an Astro file with prettier "jsxSingleQuote: false" option', Prettier, 'option-jsx-single-quote-false');

// https://prettier.io/docs/en/options.html#jsx-quotes
test('Can format an Astro file with prettier "jsxSingleQuote: true" option', Prettier, 'option-jsx-single-quote-true');

// https://prettier.io/docs/en/options.html#trailing-commas
test('Can format an Astro file with prettier "trailingComma: es5" option', Prettier, 'option-trailing-comma-es5');

// https://prettier.io/docs/en/options.html#trailing-commas
test('Can format an Astro file with prettier "trailingComma: none" option', Prettier, 'option-trailing-comma-none');

// https://prettier.io/docs/en/options.html#bracket-spacing
test('Can format an Astro file with prettier "bracketSpacing: true" option', Prettier, 'option-bracket-spacing-true');

// https://prettier.io/docs/en/options.html#bracket-spacing
test('Can format an Astro file with prettier "bracketSpacing: false" option', Prettier, 'option-bracket-spacing-false');

// https://prettier.io/docs/en/options.html#bracket-line
test('Can format an Astro file with prettier "bracketSameLine: false" option', Prettier, 'option-bracket-same-line-false');

// https://prettier.io/docs/en/options.html#bracket-line
test('Can format an Astro file with prettier "bracketSameLine: true" option', Prettier, 'option-bracket-same-line-true');

// https://prettier.io/docs/en/options.html#arrow-function-parentheses
test('Can format an Astro file with prettier "arrowParens: always" option', Prettier, 'option-arrow-parens-always');

// https://prettier.io/docs/en/options.html#arrow-function-parentheses
test('Can format an Astro file with prettier "arrowParens: avoid" option', Prettier, 'option-arrow-parens-avoid');

// https://prettier.io/docs/en/options.html#prose-wrap
test('Can format an Astro file with prettier "proseWrap: preserve" option', PrettierMarkdown, 'option-prose-wrap-preserve');

// https://prettier.io/docs/en/options.html#prose-wrap
test('Can format an Astro file with prettier "proseWrap: always" option', PrettierMarkdown, 'option-prose-wrap-always');

// https://prettier.io/docs/en/options.html#prose-wrap
test('Can format an Astro file with prettier "proseWrap: never" option', PrettierMarkdown, 'option-prose-wrap-never');

// https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
test('Can format an Astro file with prettier "htmlWhitespaceSensitivity: css" option', Prettier, 'option-html-whitespace-sensitivity-css');

// https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
test('Can format an Astro file with prettier "htmlWhitespaceSensitivity: strict" option', Prettier, 'option-html-whitespace-sensitivity-strict');

// https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
test('Can format an Astro file with prettier "htmlWhitespaceSensitivity: ignore" option', Prettier, 'option-html-whitespace-sensitivity-ignore');

// astro option: astroSortOrder
test('Can format an Astro file with prettier "astroSortOrder: markup | styles" option', Prettier, 'option-astro-sort-order-markup-styles');

// astro option: astroSortOrder
test('Can format an Astro file with prettier "astroSortOrder: styles | markup" option', Prettier, 'option-astro-sort-order-styles-markup');
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ const colors = ["red", "yellow", "blue"];

{"I'm some super long text and oh boy I sure do hope this formatter doesn't break me!"}

{colors.map((color) => <div>
{colors.map((color) => (
<div>
<Color name={color} />
</div>)}
</div>
))}
</body>
</html>
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ const colors = ["red", "yellow", "blue"];

{"I'm some super long text and oh boy I sure do hope this formatter doesn't break me!"}

{colors.map((color) => <div>
{colors.map((color) => (
<div>
<Color name={color} />
</div>)}
</div>
))}
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ For example, this three-line file is a valid Astro component:

```astro
<!-- Example1.astro - Static HTML is a valid Astro component! -->
<div class="example-1">
<div class="example-1">
<h1>Hello world!</h1>
</div>
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -276,11 +276,13 @@ const items = ["Dog", "Cat", "Platipus"];
---
<ul>
{items.map((item) => <>
{items.map((item) => (
<>
<li>Red {item}</li>
<li>Blue {item}</li>
<li>Green {item}</li>
</>)}
</>
))}
</ul>
```

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
7 changes: 7 additions & 0 deletions test/fixtures/option-arrow-parens-always/input.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
const foo = ()=> false;
const foo2 = (a)=> a;
const foo3 = a=> {
return a
};
---
3 changes: 3 additions & 0 deletions test/fixtures/option-arrow-parens-always/options.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"arrowParens": "always"
}
7 changes: 7 additions & 0 deletions test/fixtures/option-arrow-parens-always/output.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
const foo = () => false;
const foo2 = (a) => a;
const foo3 = (a) => {
return a;
};
---
7 changes: 7 additions & 0 deletions test/fixtures/option-arrow-parens-avoid/input.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
const foo = ()=> false;
const foo2 = (a)=> a;
const foo3 = a=> {
return a
};
---
3 changes: 3 additions & 0 deletions test/fixtures/option-arrow-parens-avoid/options.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"arrowParens": "avoid"
}
7 changes: 7 additions & 0 deletions test/fixtures/option-arrow-parens-avoid/output.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
const foo = () => false;
const foo2 = a => a;
const foo3 = a => {
return a;
};
---
11 changes: 11 additions & 0 deletions test/fixtures/option-astro-sort-order-markup-styles/input.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
const number = 10
---

<style>
p {
color:red
}
</style>

<p>lorem</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"astroSortOrder": "markup | styles"
}
11 changes: 11 additions & 0 deletions test/fixtures/option-astro-sort-order-markup-styles/output.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
const number = 10;
---

<p>lorem</p>

<style>
p {
color: red;
}
</style>
10 changes: 10 additions & 0 deletions test/fixtures/option-astro-sort-order-styles-markup/input.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
const number = 10
---

<p>lorem</p>
<style>
p {
color:red
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"astroSortOrder": "styles | markup"
}
11 changes: 11 additions & 0 deletions test/fixtures/option-astro-sort-order-styles-markup/output.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
const number = 10;
---

<style>
p {
color: red;
}
</style>

<p>lorem</p>
15 changes: 15 additions & 0 deletions test/fixtures/option-bracket-same-line-false/input.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<button
className="prettier-class"
id="prettier-id"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aperiam amet nesciunt dolorem."
onClick={handleClick} >
Click Here
</button>

<img
src="localhost"
className="prettier-class"
id="prettier-id"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aperiam amet nesciunt dolorem."
onClick={handleClick}>

3 changes: 3 additions & 0 deletions test/fixtures/option-bracket-same-line-false/options.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"bracketSameLine": false
}
Loading

0 comments on commit 85f7f93

Please sign in to comment.