feat: docker compose maybe
This commit is contained in:
ash committed
1 parent
180b261e40
commit
b625ccd8d6
8031 files changed
+2182966
No files matched your search
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 [Contributors](https://github.com/sveltejs/prettier-plugin-svelte/graphs/contributors)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
# Prettier for Svelte 3 components
|
||||
|
||||
Format your Svelte components using Prettier.
|
||||
|
||||
## Features
|
||||
|
||||
- Format your HTML, CSS, and JavaScript using prettier
|
||||
- Format Svelte syntax, e.g. each loops, if statements, await blocks, etc.
|
||||
- Format the JavaScript expressions embedded in the Svelte syntax
|
||||
- e.g. expressions inside of `{}`, event bindings `on:click=""`, and more
|
||||
|
||||
## How to use in VS Code and Atom
|
||||
|
||||
This plugin comes with [Svelte for VS Code](https://github.com/sveltejs/language-tools) and [Svelte for Atom](https://github.com/UnwrittenFun/svelte-atom) so just install the extension for your favorite editor and enjoy.
|
||||
|
||||
If you want to customize some formatting behavior, see section "Options" below.
|
||||
|
||||
Some of the extensions let you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (`.prettierrc` for example) present.
|
||||
|
||||
## How to install manually
|
||||
|
||||
```bash
|
||||
npm i --save-dev prettier-plugin-svelte prettier
|
||||
```
|
||||
|
||||
## How to use (CLI)
|
||||
|
||||
Install `prettier` and `prettier-plugin-svelte` as dev dependencies in your project.
|
||||
|
||||
Then format your code using Prettier CLI. You may need to add `--plugin-search-dir=.`
|
||||
|
||||
As a one-time run:
|
||||
```
|
||||
npx prettier --write --plugin-search-dir=. ./**/*.html
|
||||
```
|
||||
|
||||
As part of your scripts in `package.json`:
|
||||
```
|
||||
"format": "prettier --write --plugin-search-dir=. ./**/*.html"
|
||||
```
|
||||
|
||||
If you want to customize some formatting behavior, see section "Options" below.
|
||||
|
||||
## Options
|
||||
|
||||
``Configurations are optional``
|
||||
|
||||
Make a `.prettierrc` file in your project directory and add your preferred [options](https://prettier.io/docs/en/options.html) to [configure Prettier](https://prettier.io/docs/en/configuration.html). When using Prettier through the CLI, you can also pass options through CLI flags, but a `.prettierrc` file is recommended.
|
||||
|
||||
### Svelte Sort Order
|
||||
|
||||
Sort order for `svelte:options`, scripts, markup, and styles.
|
||||
|
||||
Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in the order you want; or `none` if you don't want Prettier to reorder anything.
|
||||
|
||||
| Default | CLI Override | API Override |
|
||||
| ------------------------------- | ------------------------------ | --------------------------- |
|
||||
| `options-scripts-markup-styles` | `--svelte-sort-order <string>` | `svelteSortOrder: <string>` |
|
||||
|
||||
> The `options` order option only exists since version 2. If you use version 1 of `prettier-plugin-svelte`, omit that option (so for example only write `scripts-markup-styles`).
|
||||
|
||||
### Svelte Strict Mode
|
||||
|
||||
More strict HTML syntax: less self-closed tags, quotes in attributes, no attribute shorthand (overrules `svelteAllowShorthand`).
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<!-- svelteStrictMode: true -->
|
||||
<div foo="{bar}"></div>
|
||||
|
||||
<!-- svelteStrictMode: false -->
|
||||
<div foo={bar} />
|
||||
```
|
||||
|
||||
| Default | CLI Override | API Override |
|
||||
| ------- | ----------------------------- | -------------------------- |
|
||||
| `false` | `--svelte-strict-mode <bool>` | `svelteStrictMode: <bool>` |
|
||||
|
||||
### Svelte Allow Shorthand
|
||||
|
||||
Option to enable/disable component attribute shorthand if attribute name and expression are same.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<!-- allowShorthand: true -->
|
||||
<input type="text" {value} />
|
||||
|
||||
<!-- allowShorthand: false -->
|
||||
<input type="text" value={value} />
|
||||
```
|
||||
|
||||
| Default | CLI Override | API Override |
|
||||
| ------- | --------------------------------- | ------------------------------ |
|
||||
| `true` | `--svelte-allow-shorthand <bool>` | `svelteAllowShorthand: <bool>` |
|
||||
|
||||
### Svelte Bracket New Line
|
||||
|
||||
> Deprecated since 2.5.0. Use Prettier 2.4.0 and [bracketSameLine](https://prettier.io/docs/en/options.html#bracket-line) instead.
|
||||
|
||||
Put the `>` of a multiline element on a new line. Roughly the Svelte equivalent of the [jsxBracketSameLine](https://prettier.io/docs/en/options.html#jsx-brackets) rule. Setting this to `false` will have no effect for whitespace-sensitive tags (inline elements) when there's no whitespace between the `>` of the start tag and the inner content, or when there's no whitespace after the `>` of the end tag. You can read more about HTML whitespace sensitivity [here](https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting). You can adjust whitespace sensitivity through [this setting](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity).
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<!-- before formatting -->
|
||||
<span><div>foo</div><span>bar</span></span>
|
||||
<div pretend break>content</div>
|
||||
|
||||
<!-- after formatting, svelteBracketNewLine true -->
|
||||
<span
|
||||
><div>foo</div>
|
||||
<span>bar</span></span
|
||||
>
|
||||
<div
|
||||
pretend
|
||||
break
|
||||
>
|
||||
content
|
||||
</div>
|
||||
|
||||
<!-- after formatting, svelteBracketNewLine false -->
|
||||
<span
|
||||
><div>foo</div>
|
||||
<span>bar</span></span>
|
||||
<div
|
||||
pretend
|
||||
break>
|
||||
content
|
||||
</div>
|
||||
```
|
||||
|
||||
| Default | CLI Override | API Override |
|
||||
| ------- | ---------------------------------- | ------------------------------ |
|
||||
| `true` | `--svelte-bracket-new-line <bool>` | `svelteBracketNewLine: <bool>` |
|
||||
|
||||
### Svelte Indent Script And Style
|
||||
|
||||
Whether or not to indent the code inside `<script>` and `<style>` tags in Svelte files. This saves an indentation level, but might break code folding in your editor.
|
||||
|
||||
| Default | CLI Override | API Override |
|
||||
| ------- | ----------------------------------------- | ------------------------------------ |
|
||||
| `true` | `--svelte-indent-script-and-style <bool>` | `svelteIndentScriptAndStyle: <bool>` |
|
||||
|
||||
### `.prettierrc` example
|
||||
|
||||
```json
|
||||
{
|
||||
"svelteSortOrder" : "options-styles-scripts-markup",
|
||||
"svelteStrictMode": true,
|
||||
"svelteBracketNewLine": false,
|
||||
"svelteAllowShorthand": false,
|
||||
"svelteIndentScriptAndStyle": false
|
||||
}
|
||||
```
|
||||
|
||||
## Usage with Tailwind Prettier Plugin
|
||||
|
||||
There is a [Tailwind Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to format classes in a certain way. This plugin must be loaded last, so if you want to use the Tailwind plugin, disable Prettier auto-loading and place `prettier-plugin-tailwindcss` in the end of the plugins array. If you are using VS Code, make sure to have the Prettier extension installed and switch the default formatter for Svelte files to it.
|
||||
|
||||
```json5
|
||||
// .prettierrc
|
||||
{
|
||||
// ..
|
||||
"plugins": [
|
||||
"prettier-plugin-svelte",
|
||||
"prettier-plugin-tailwindcss" // MUST come last
|
||||
],
|
||||
"pluginSearchDirs": false
|
||||
}
|
||||
```
|
||||
|
||||
More info: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why is the closing or opening tag (`>` or `<`) hugging the inner tag or text?
|
||||
|
||||
If you are wondering why this code
|
||||
|
||||
```html
|
||||
<span><span>assume very long text</span></span>
|
||||
```
|
||||
|
||||
becomes this
|
||||
|
||||
```html
|
||||
<span
|
||||
><span>assume very long text</span
|
||||
></span
|
||||
>
|
||||
```
|
||||
|
||||
it's because of whitespsace sensitivity. For inline elements (`span`, `a`, etc) it makes a difference when rendered if there's a space (or newline) between them. Since we don't know if your slot inside your Svelte component is surrounded by inline elements, Svelte components are treated as such, too. You can adjust this whitespace sensitivity through [this setting](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity). You can read more about HTML whitespace sensitivity [here](https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting).
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "prettier-plugin-svelte",
|
||||
"version": "2.10.1",
|
||||
"description": "Svelte plugin for prettier",
|
||||
"main": "plugin.js",
|
||||
"files": [
|
||||
"plugin.js",
|
||||
"plugin.js.map"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"test": "ava",
|
||||
"prepare": "npm run build",
|
||||
"prepublishOnly": "npm test"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/sveltejs/prettier-plugin-svelte.git"
|
||||
},
|
||||
"keywords": [
|
||||
"prettier",
|
||||
"svelte"
|
||||
],
|
||||
"author": "James Birtles <jameshbirtles@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/sveltejs/prettier-plugin-svelte/issues"
|
||||
},
|
||||
"homepage": "https://github.com/sveltejs/prettier-plugin-svelte#readme",
|
||||
"devDependencies": {
|
||||
"@prettier/plugin-pug": "^1.16.0",
|
||||
"@rollup/plugin-commonjs": "14.0.0",
|
||||
"@rollup/plugin-node-resolve": "11.0.1",
|
||||
"@types/node": "^10.12.18",
|
||||
"@types/prettier": "^2.4.1",
|
||||
"ava": "3.15.0",
|
||||
"prettier": "^2.7.1",
|
||||
"rollup": "2.36.0",
|
||||
"rollup-plugin-typescript": "1.0.1",
|
||||
"svelte": "^3.57.0",
|
||||
"ts-node": "^9.1.1",
|
||||
"tslib": "^2.0.3",
|
||||
"typescript": "4.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prettier": "^1.16.4 || ^2.0.0",
|
||||
"svelte": "^3.2.0 || ^4.0.0-next.0"
|
||||
}
|
||||
}
|
||||
+2164
File diff suppressed because it is too large.
Load diff
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"plugin.js","sources":["src/lib/elements.ts","src/lib/extractAttributes.ts","src/lib/snipTagContent.ts","src/lib/getText.ts","src/options.ts","src/print/helpers.ts","src/print/doc-helpers.ts","src/print/node-helpers.ts","src/print/index.ts","src/embed.ts","src/index.ts"],"sourcesContent":["export type TagName = keyof HTMLElementTagNameMap | 'svg';\r\n\r\n// @see http://xahlee.info/js/html5_non-closing_tag.html\r\nexport const selfClosingTags = [\r\n 'area',\r\n 'base',\r\n 'br',\r\n 'col',\r\n 'embed',\r\n 'hr',\r\n 'img',\r\n 'input',\r\n 'link',\r\n 'meta',\r\n 'param',\r\n 'source',\r\n 'track',\r\n 'wbr',\r\n];\r\n\r\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements\r\nexport const blockElements: TagName[] = [\r\n 'address',\r\n 'article',\r\n 'aside',\r\n 'blockquote',\r\n 'details',\r\n 'dialog',\r\n 'dd',\r\n 'div',\r\n 'dl',\r\n 'dt',\r\n 'fieldset',\r\n 'figcaption',\r\n 'figure',\r\n 'footer',\r\n 'form',\r\n 'h1',\r\n 'h2',\r\n 'h3',\r\n 'h4',\r\n 'h5',\r\n 'h6',\r\n 'header',\r\n 'hgroup',\r\n 'hr',\r\n 'li',\r\n 'main',\r\n 'nav',\r\n 'ol',\r\n 'p',\r\n 'pre',\r\n 'section',\r\n 'table',\r\n 'ul',\r\n];\r\n\r\n/**\r\n * HTML attributes that we may safely reformat (trim whitespace, add or remove newlines)\r\n */\r\nexport const formattableAttributes: string[] = [\r\n // None at the moment\r\n // Prettier HTML does not format attributes at all\r\n // and to be consistent we leave this array empty for now\r\n];\r\n","import { AttributeNode, TextNode } from '../print/nodes';\r\n\r\nexport function extractAttributes(html: string): AttributeNode[] {\r\n const extractAttributesRegex = /<[a-z]+[\\s\\n]*([\\s\\S]*?)>/im;\r\n const attributeRegex = /([^\\s=]+)(?:=(?:(?:(\"|')([\\s\\S]*?)\\2)|(?:(\\S+?)(?:\\s|>|$))))?/gim;\r\n\r\n const [, attributesString] = html.match(extractAttributesRegex)!;\r\n\r\n const attrs: AttributeNode[] = [];\r\n\r\n let match: RegExpMatchArray | null;\r\n while ((match = attributeRegex.exec(attributesString))) {\r\n const [all, name, quotes, valueQuoted, valueUnquoted] = match;\r\n const value = valueQuoted || valueUnquoted;\r\n const attrStart = match.index!;\r\n\r\n let valueNode: AttributeNode['value'];\r\n if (!value) {\r\n valueNode = true;\r\n } else {\r\n let valueStart = attrStart + name.length;\r\n if (quotes) {\r\n valueStart += 2;\r\n }\r\n\r\n valueNode = [\r\n {\r\n type: 'Text',\r\n data: value,\r\n start: valueStart,\r\n end: valueStart + value.length,\r\n } as TextNode,\r\n ];\r\n }\r\n\r\n attrs.push({\r\n type: 'Attribute',\r\n name,\r\n value: valueNode,\r\n start: attrStart,\r\n end: attrStart + all.length,\r\n });\r\n }\r\n\r\n return attrs;\r\n}\r\n","export const snippedTagContentAttribute = '✂prettier:content✂';\r\n\r\nexport function snipScriptAndStyleTagContent(source: string): string {\r\n let scriptMatchSpans = getMatchIndexes('script');\r\n let styleMatchSpans = getMatchIndexes('style');\r\n\r\n return snipTagContent(\r\n snipTagContent(source, 'script', '{}', styleMatchSpans),\r\n 'style',\r\n '',\r\n scriptMatchSpans,\r\n );\r\n\r\n function getMatchIndexes(tagName: string) {\r\n const regex = getRegexp(tagName);\r\n const indexes: [number, number][] = [];\r\n let match = null;\r\n while ((match = regex.exec(source)) != null) {\r\n if (source.slice(match.index, match.index + 4) !== '<!--') {\r\n indexes.push([match.index, regex.lastIndex]);\r\n }\r\n }\r\n return indexes;\r\n }\r\n\r\n function snipTagContent(\r\n _source: string,\r\n tagName: string,\r\n placeholder: string,\r\n otherSpans: [number, number][],\r\n ) {\r\n const regex = getRegexp(tagName);\r\n let newScriptMatchSpans = scriptMatchSpans;\r\n let newStyleMatchSpans = styleMatchSpans;\r\n // Replace valid matches\r\n const newSource = _source.replace(regex, (match, attributes, content, index) => {\r\n if (match.startsWith('<!--') || withinOtherSpan(index)) {\r\n return match;\r\n }\r\n const encodedContent = Buffer.from(content).toString('base64');\r\n const newContent = `<${tagName}${attributes} ${snippedTagContentAttribute}=\"${encodedContent}\">${placeholder}</${tagName}>`;\r\n\r\n // Adjust the spans because the source now has a different content length\r\n const lengthDiff = matcLine truncated
|
||||
Reference in new issue
Block a user