Skip to content

Commit

Permalink
Add support for return in Astro component script (#176)
Browse files Browse the repository at this point in the history
Addresses
#96 (comment)

In Astro, it's possible to [return a
Response](https://docs.astro.build/en/guides/server-side-rendering/#return-a-response-object)
from inside of a component script, without wrapping it in a function.
This doesn't look like valid JavaScript, so the babel parser choked on
it.

This change checks to see if the file was parsed with the astro plugin,
and if so, enables the `allowReturnOutsideFunction` parser option.

This is admittedly a bit of a band-aid. I think the more correct
approach is to parse the code into AST using the configured parser,
rather than always using our version of babel. This is what some other
prettier plugins do. Some, like tailwindcss, goes so far as to load a
list of compatible other prettier plugins to enable cross-compatibility.

But, that's a much bigger change that will potentially require a
breaking change version bump, so I didn't tackle it here.

The other thing I did do here, is update the README a bit. I added
`Astro` to our supported frameworks as experimental (there may be other
parser options we need to set), and also included support for Svelte,
which we've always supported, as far as I know, but don't really test
for (it would be good to make some tests sometime).
  • Loading branch information
IanVS committed Jul 12, 2024
1 parent 1d2c2ec commit 11da4e7
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 27 deletions.
19 changes: 11 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -424,17 +424,20 @@ Having some trouble or an issue? You can check [FAQ / Troubleshooting section](.

## Compatibility

| Framework | Supported | Note |
| ---------------------- | ------------- | ---------------------------------------------------------- |
| JS with ES Modules | ✅ Everything | - |
| NodeJS with ES Modules | ✅ Everything | - |
| React | ✅ Everything | - |
| Angular | ✅ Everything | Supported through `importOrderParserPlugins` API |
| Vue | ✅ Everything | SFCs only, peer dependency `@vue/compiler-sfc` is required |
| Svelte | ⚠️ Not yet | Contributions are welcome |
| Framework | Supported | Note |
| ---------------------- | --------------- | ---------------------------------------------------------- |
| JS with ES Modules | ✅ Everything | - |
| NodeJS with ES Modules | ✅ Everything | - |
| React | ✅ Everything | - |
| Svelte | ✅ Everything | - |
| Angular | ✅ Everything | Supported through `importOrderParserPlugins` API |
| Vue | ✅ Everything | SFCs only, peer dependency `@vue/compiler-sfc` is required |
| Astro | 🧪 Experimental | Some Astro syntax may cause trouble, please open an issue |

## Contribution

Share your favorite config in the [show-and-tell](https://github.com/IanVS/prettier-plugin-sort-imports/discussions/categories/show-and-tell).

For more information regarding contribution, please check the [Contributing Guidelines](./CONTRIBUTING.md). If you are trying to
debug some code in the plugin, check [Debugging Guidelines](./docs/DEBUG.md)

Expand Down
18 changes: 0 additions & 18 deletions docs/TROUBLESHOOTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,6 @@ SyntaxError: This experimental syntax requires enabling one of the following par
To solve this issue, you can use the new option `importOrderParserPlugins` in your `.prettierrc` (prettier config) and pass
an array of plugin names to be used.

#### Q. Why does the plugin remove the inline comments of the import declaration ?

Due to the comment handling in Babel, the plugin removes the inline comment of the
import declaration.

**input:**

```js
import a from 'a';

// comment
```

**output:**

```js
import a from 'a';
```

#### Q. Why the plugin does not work with [pnpm](https://pnpm.io/) ? or Why do I see the `[warn] Ignored unknown option` ?

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"@vue/compiler-sfc": "3.4.21",
"cross-env": "^7.0.3",
"prettier": "^3.0.3",
"prettier-plugin-astro": "^0.14.0",
"typescript": "5.2.2",
"vitest": "^0.34.5"
},
Expand Down
5 changes: 5 additions & 0 deletions src/preprocessors/preprocessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ export function preprocessor(code: string, options: PrettierOptions): string {
plugins,
};

// Astro component scripts allow returning a response
if (options.parentParser === 'astro') {
parserOptions.allowReturnOutsideFunction = true;
}

const ast = babelParser(code, parserOptions);

const directives = ast.program.directives;
Expand Down
2 changes: 1 addition & 1 deletion test-setup/run_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as plugin from '../src';
export async function run_spec(dirname, parsers, options) {
options = Object.assign(
{
plugins: [plugin],
plugins: options.plugins ?? [plugin],
tabWidth: 4,
},
options,
Expand Down
29 changes: 29 additions & 0 deletions tests/Astro/__snapshots__/ppsi.spec.ts.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`return-outside-function.astro - astro-verify > return-outside-function.astro 1`] = `
---
import Layout from '../layouts/Layout.astro';
import type {LayoutType} from '../layouts.ts'
import x from 'y';
return new Response('This is 404', { status: 404 });
---
<Layout title="Hello, world!">
<main>
Hello, world!</main>
</Layout>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
---
import type { LayoutType } from "../layouts.ts";
import x from "y";
import Layout from "../layouts/Layout.astro";
return new Response("This is 404", { status: 404 });
---
<Layout title="Hello, world!">
<main>Hello, world!</main>
</Layout>
`;
12 changes: 12 additions & 0 deletions tests/Astro/ppsi.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as plugin from '../../src';
import { run_spec } from '../../test-setup/run_spec';

run_spec(__dirname, ['astro'], {
plugins: ['prettier-plugin-astro', plugin],
importOrder: [
'<TYPES>',
'<BUILT_IN_MODULES>',
'<THIRD_PARTY_MODULES>',
'^[./]',
],
});
12 changes: 12 additions & 0 deletions tests/Astro/return-outside-function.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
import Layout from '../layouts/Layout.astro';
import type {LayoutType} from '../layouts.ts'
import x from 'y';
return new Response('This is 404', { status: 404 });
---

<Layout title="Hello, world!">
<main>
Hello, world!</main>
</Layout>
38 changes: 38 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
"@jridgewell/gen-mapping" "^0.3.5"
"@jridgewell/trace-mapping" "^0.3.24"

"@astrojs/compiler@^1.5.5":
version "1.8.2"
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-1.8.2.tgz#f305d5724c45a9932a8ef4e87b2e7227d15d1c2b"
integrity sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==

"@babel/code-frame@^7.23.5":
version "7.23.5"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
Expand Down Expand Up @@ -819,11 +824,25 @@ postcss@^8.4.27, postcss@^8.4.35:
picocolors "^1.0.0"
source-map-js "^1.0.2"

prettier-plugin-astro@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/prettier-plugin-astro/-/prettier-plugin-astro-0.14.0.tgz#035bb78b7b8a45b4ab7c5b926f73850af9afffb6"
integrity sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==
dependencies:
"@astrojs/compiler" "^1.5.5"
prettier "^3.0.0"
sass-formatter "^0.7.6"

prettier@*, prettier@^3.0.3:
version "3.2.5"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==

prettier@^3.0.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==

pretty-format@^29.5.0:
version "29.7.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
Expand All @@ -845,6 +864,18 @@ rollup@^3.27.1:
optionalDependencies:
fsevents "~2.3.2"

s.color@0.0.15:
version "0.0.15"
resolved "https://registry.yarnpkg.com/s.color/-/s.color-0.0.15.tgz#6b32cd22d8dba95703a5122ddede2020a1560186"
integrity sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==

sass-formatter@^0.7.6:
version "0.7.9"
resolved "https://registry.yarnpkg.com/sass-formatter/-/sass-formatter-0.7.9.tgz#cf77e02e98f81daabd91b185192144d29fc04ca5"
integrity sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==
dependencies:
suf-log "^2.5.3"

semver@^6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
Expand Down Expand Up @@ -896,6 +927,13 @@ strip-literal@^1.0.1:
dependencies:
acorn "^8.10.0"

suf-log@^2.5.3:
version "2.5.3"
resolved "https://registry.yarnpkg.com/suf-log/-/suf-log-2.5.3.tgz#0919a7fceea532a99b578c97814c4e335b2d64d1"
integrity sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==
dependencies:
s.color "0.0.15"

supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"