Issue https://github.com/tc39/proposal-decorators/issues/342 shows one way to modify a class' shape to anything you want using the currently spec'd decorators.

This wouldn't change anything about how classes work. The various forms of the idea above are all syntax sugar, and would behave identical to this one:

class MyEl extends HTMLElement {
  featureA = new FeatureA
  featureB = new FeatureB
  featureC = new FeatureC

  connectedCallback() {
    this.featureA.run(this)
    this.featureB.run(this)
    this.featureC.run(this)
  }

  disconnectedCallback() {
    this.featureA.stop(this)
    this.featureB.stop(this)
    this.featureC.stop(this)
  }
}

But perhaps the idea isn't that useful enough to warrant introducing it. Maybe just breaking classes up into smaller classes is better.

I too suspect perhaps this is something for EXTENSIONS.md.

I want to leave this feature for a follow-on proposal.

Willing to take a PR for EXTENSIONS.md?

Hopefully I'm not overlooking something that's already been addressed, but given this scenario, what could i do in the second function to get the original character codes/original string from svg info?:

const fontkit = require('fontkit');
const font = fontkit.openSync(__dirname + '/font.ttf');

// Works great
const StringToSVG = string => {
  let run = font.layout(string)

  return run.glyphs.map(g => g.path.toSVG())
}

let svg = StringToSVG(string)


const SVGtoString = svg => {
  // What can i do with these SVG Paths?
}

let originalString = SVGtoString(svg)

// To get this output?
console.log(originalString)

But in my project, i will addPath and CompoundPath at the same time in a Layer, so when i click the item , i don't kown it belong Path or CompoundPath, i can't use the class to only test for CompoundPaths, beasuce it will lose the Path item. Do we have any options which only test for the item(not the item which paperJs automatically added ,like CompoundPath 's children) that are added to the layer?

You can't? Once you turn the text into outline vector graphics, you lose any relation to the original text. Unless you want to perform OCR of course. Instead, make your code remember which SVG belongs to which text and don't try to convert svg to text, but directly look up with text belongs to which svg path.

Request / Idea

Would it make sense to have a do not wrap regex pattern, similar to pugWrapAttributesPattern ? Possible use cases can be to match lines with irrelevant code that doesn't require much attention or repetitive. It could save space and produce more readable code.

For instance, if we had a dontWrapAttributesPattern:

v-img.shrink.mt-1.hidden-sm-and-down(
                    alt="Vuetify Name",
                    contain="",
                    min-width="100",
                    src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png",
                    width="100"
                )
                
                input(name="my_name", type="text", value="my_value")
                input(name="his_name", type="text", value="my_value")
                input(name="her_name", type="text", value="my_value")
                input(name="their_name", type="text", value="my_value")
                input(name="any_name", type="text", value="my_value")
                input(name="cat_name", type="text", value="my_value")
                input(name="bird_name", type="text", value="my_value")

                my-comp(
                    :important="matter",
                    @click="anything",
                    v-slot="{ childState }"
                )
                    | {{ parentMsg }} {{ childState }}```

vs

                v-img.shrink.mt-1.hidden-sm-and-down(
                    alt="Vuetify Name",
                    contain="",
                    min-width="100",
                    src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png",
                    width="100"
                )

                input(
                    name="my_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="his_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="her_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="their_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="any_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="cat_name",
                    type="text",
                    value="my_value"
                )
                input(
                    name="bird_name",
                    type="text",
                    value="my_value"
                )

                my-comp(
                    :important="matter",
                    @click="anything",
                    v-slot="{ childState }"
                )
                    | {{ parentMsg }} {{ childState }}

        v-spacer

Also both dontWrapAttributesPattern and wrapAttributesPattern should take in an object of regexs, so this can be customized with other options relating to the regex matching (i.e ignorePugWidth with certain rules)

Info

"@prettier/plugin-pug": "^1.10.1",
"prettier": "^2.2.0",
"framework, vue"
"node, Welcome to Node.js v14.6.0."
"os, WSL"

Prettier config

module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: true,
    printWidth: 120,
    singleQuote: false,
    // htmlWhitespaceSensitivity: "ignore",
    overrides: [
        {
            files: "*.vue",
            options: {
                tabWidth: 4,
                pugTabWidth: 4,
                pugPrintWidth: 120,
                pugSingleFileComponentIndentation: false,
                // pugWrapAttributesThreshold: 1,
                pugWrapAttributesPattern: 1,
                pugSortAttributes: "asc",
                // pugClosingBracketPosition: "last-line",
            },
        },
    ],
};

Additional Context

While running prettier through the CLI, it returns

[error] Invalid pugWrapAttributesPattern value. Expected a string, but received 1.

Setting to pugWrapAttributesPattern: "1", removes the error, but it appears the output is not being processed as defined in pugWrapAttributesPattern documentation. It seems to be ignored.

Thank you very much, it is as expected now.

Hopefully I'm not overlooking something that's already been addressed, but given this scenario, what could i do in the second function to get the original character codes/original string from svg info?:

const fontkit = require('fontkit');
const font = fontkit.openSync(__dirname + '/font.ttf');

// Works great
const StringToSVG = string => {
    let run = font.layout(string)

    return run.glyphs.map(g => g.path.toSVG())
  }

let svg = StringToSVG(string)

const SVGtoString = svg => {
    // What can i do with these SVG Paths?
}

let originalString = SVGtoString(svg)

// To get this output?
console.log(originalString)

closes #156

Info

    "eslint": "7.13.0",
    "eslint-plugin-pug": "1.2.2",
    "prettier": "2.1.2",
    "@prettier/plugin-pug": "1.10.1",

Eslint config

{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
      "es6": true
  },
  "plugins": [
    "prettier",
    "pug"
  ],
  "extends": [
      "plugin:prettier/recommended"
  ],
  "rules": {
      "prettier/prettier": [
        "error",
        {
            "usePrettierrc": true
        }
      ]
  }
}

There is no error if I remove extends and rules.prettier/prettier

Prettier config

{
  "printWidth": 120,
  "endOfLine": "auto"
}

If I use {} config I don't see error.

I use this command with this eslint config:

• eslint --ext .js,.pug \"./src\" - doesn't work
• eslint --ext .js\"./src\" - works
• eslint --ext .pug \"./src\" - works

Input

doesn't work (with more than one line). We can have function body or not - there is always error.

script.
  function foo() {
  }

works

script.
  function foo() {}

Output or Error

I get error for multiline inline script

TypeError: Cannot read property '0' of undefined
    at Object.exports.transformFix (.\node_modules\eslint-plugin-pug\utils.js:115:72)
    at .\node_modules\eslint-plugin-pug\utils.js:135:25
    at arrayEach (.\node_modules\lodash\lodash.js:516:11)
    at Function.forEach (.\node_modules\lodash\lodash.js:9368:14)
    at .\node_modules\eslint-plugin-pug\utils.js:128:7
    at arrayEach (.\node_modules\lodash\lodash.js:516:11)
    at Function.forEach (.\node_modules\lodash\lodash.js:9368:14)
    at exports.postprocess (.\node_modules\eslint-plugin-pug\utils.js:126:5)
    at Linter._verifyWithProcessor (.\node_modules\eslint\lib\linter\linter.js:1327:16)
    at Linter._verifyWithConfigArray (.\node_modules\eslint\lib\linter\linter.js:1264:25)

Thanks. I see [0] in eslint-plugin-pug\utils.js So I created issue for this prettier plugin.

closes #158