I got the same info from both types (the printed type is, of course, different because vue-class-component adds extra types allowed in JSX). I suppose your IDE handles some special cases of JSX and prints the dedicated error message? I guess there is nothing we can do if that is the case. 🤔

how to define component use V8 it has not "@Component"

<!-- Check those before opening an issue -->

• [x] I have searched through existing issues

Feature Request

<!-- Please only describe one feature request in one single issue. -->

To use Vue component Props type parameter for prop type validation feature.

Vue component type has dedicated Props type parameter to represent props:

• Vue 2: 5th parameter of CombinedVueInstance https://github.com/vuejs/vue/blob/dev/types/vue.d.ts#L64
• Vue 3: 1st, 7th and 8th parameters of ComponentPublicInstance https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/componentPublicInstance.ts#L163

By using it, we can validate any kind of component if it is properly typed. An example use case is Vue Class Component. I'm planning to introduce a new way to define component props and it will be quite a different API interface from the basic Vue's prop definition. We can even use prop type validation with class component if we use Props type parameter from the component.

It may also solve #2312 and #2343.

Thank you for explaining your intention. I understand you shared it to show another perspective of class component.

But please understand we have to cover the various use cases of it. For example, TypeScript support is a must because it is the original motivation of this library. I know we can create class component without extending Vue base class but it loses type support.

I'm asking concrete use case or problems because we cannot discuss properly without them. We could make our API as simple (or short) as possible but we may lose another benefit (e.g. TypeScript support) at the same moment. To cover as much use case as possible, we have to clarify what the fundamental demand is.

@nicolidin I'm going to release the next beta including the improved approach this weekend so that you can try it in your code base. If you mean the official release of v8.0.0, I cannot say a specific date for that but I wish it will be by the end of Oct.

@LifeIsStrange I'm afraid I don't understand what you mean. Could you elaborate "ways to define (state) variables used on the template inside the class"?

I'm not sure how we can integrate class component with the new <script setup> because it will not probably be class component anymore?

Following up from a recent thread vuejs vetur. I am having the effectively the same issue on a windows machine, where I receive the following error:

Interestingly... this causes errors.

But this does not.

I believe am using the Vue 3 and Vuex 4 correctly:

Can someone help me clarify where the issue is? The guys at vuejs (see thread above) felt it was related to vue-class-component.

Thanks in advance!

You have to declare the $store type by yourself. See https://github.com/vuejs/vuex/tree/4.0#typings-for-componentcustomproperties

@TiBianMod

Personally I prefer an interface to define props (makes more sense to me), I love the above example of defining props and I hope we end up with the same or similar implementation like the above.

The challenge of Vue's prop is that it is needed to be defined as a value to be able to use it. For example, in the canonical Vue component:

// HelloWorld.js
export default {
  props: {
    foo: String
  },

  mounted() {
    // When it is used as <HelloWorld foo="Hello" bar="World" />
    console.log(this.foo) // Hello
    console.log(this.bar) // undefined
  }
}

In the above example, although the parent component passes values 'Hello' and 'World' as props foo and bar respectively, only foo is available in the HelloWorld component because bar is not defined in the props option.

This is the reason that I think we have to define Props class instead of an interface. An interface only exists on type level, therefore we cannot generate props option object under the hood. In contrast, a class exists on both type level and as a value, we can generate the option with it under the hood.

There was a proposal to make it optional but it was dropped later because of issues regarding attribute fallthrough behavior.

• https://github.com/vuejs/rfcs/pull/25
• https://github.com/vuejs/rfcs/pull/154

I'm not sure if there is another way to make it closer to interface under this restriction. But I'm happy to hear an idea if any.

Personally I don't like the idea of props to be proxied on this, I really hope we change this behavior and all props to be accessible only through this.$props

Unfortunately, this is something we cannot change in Vue Class Component as it's Vue's behavior.

Thank you for your feedback.

@nicolidin

I'm answering your questions below:

Firstly

I'm introducing prop helper because of the following reasons:

To differentiate required prop type and with-default prop type.

If we allow defining the default value by just assigning it to the property, the property type will be as same as required prop without an initializer:

class Props {
  // Required prop
  // foo is of type string
  foo!: string

  // Has default value
  // bar is of type string too
  bar = 'default value'
}

This is fine when we just use the prop in the component:

class HelloWorld extends Vue.props(Props) {
  mounted() {
    console.log(this.foo) // foo cannot be undefined since it is required
    console.log(this.bar) // bar cannot be undefined because of default value
  }
}

But when we use this component in a parent component, a problem occurs:

<HelloWorld foo="Test" />

The above usage of <HelloWorld> component is correct - we pass the required prop foo, don't have to pass bar as it has the default value. But compile-time validation will fail because it thinks the bar prop is also required because of its type string. To be able to omit bar, we have to make its type string | undefined in the usage of the parent component.

This causes because we don't provide any hint on the type level whether the prop is required or with-default. If we use prop helper, we can provide a type hint for props:

class Props {
  // Required prop
  // foo is of type string as same as the first example
  foo!: string

  // Has default value
  // bar is of type WithDefault<string> so that TypeScript
  // can know the `bar` prop is different from `foo`
  bar = prop({ default: 'default value' })
}

In this way, we can make bar's type string in component while string | undefined in the usage in a parent component.

To provide a way to specify other prop options.

I think we need to provide a way to define props options as same as basic Vue even if we can omit them. For example, we may want to add validator option to validate the prop value in detail. Also, Babel users would still want to specify type, required options.

class Props {
  // Specifying detailed prop options for Vue's runtime props validation
  theme = prop({
    type: String,
    required: true,
    validator: theme => ['primary', 'secondary', 'danger'].includes(theme)
  })
}

Secondly

Let me clarify runtime validation and compile-time validation. Runtime validation is the validation that Vue does that you see on the browser's console. It needs to run your code to validate the props on the browser. On the other hand, compile-time validation is the validation that TypeScript does that you see on your IDE/editor as a red line errors and on CI as compilation errors. It validates the props without running the code.

What I would like to achieve with this proposal is compile-time props validation. So the code:

<MyComponent :person="new Person()"/>

should provide a red line on our IDE/editor if the value passed to the person is mismatched with the defined prop type. Note that we also have to modify Vetur to achieve the compile-time props validation with class component but it will be easier to implement if we properly type $props type with this proposal.

By the way, if we use TSX, the compile-time props validation is already usable. You can try it on the test case in props-class branch.

Lastly

Yes, we don't need to use PropType even with complex types in this approach. e.g.:

interface Person {
  firstName: string
  lastName: string
}

class Props {
  person!: Person // Just specify the Person interface here
}

class App extends Vue.props(Props) {
  mounted() {
    this.person // is of type Person
  }
}

A month ago I was working in a concept to use Vue 3.0 / Composition API with Statefull classes, the result of this work is here:

https://codesandbox.io/s/test-vue-class-n0iuf?file=/src/components/HelloWorld.vue

1. It works with annotations, I implement 4 annotations @Watch @Prop @Inject @Context
2. It have a vanilla JS Class without inheritance of Vue.
3. It uses setup method with full state.
4. It have getters/setters as computed properties
5. It also exposes static properties, static getters and static methods.
6. I think that it could be full safe typed (although my example is still missing many type declarations 🙄).
7. It is small 🤭

import { Component, Inject, Prop, Context, Watch } from "./vue-class";

@Component()
export default class MyComponent {
  static VERSION = "1.2";

  @Inject()
  name: string = "";

  @Prop(String)
  msg: string;

  @Context()
  emit: any;

  newItem = "";

  items = ["Hello", "World"];

  setup() {
    // this is a reactive component :)
    console.log(this.msg);
  }

  @Watch("counter")
  watchCounter() {
    console.log("watch counter.. ");
    this.emit("hiFather");
  }

  get counter() {
    return this.items && this.items.length;
  }

  add() {
    this.items.push(this.newItem);
  }

  static uppercase(s: string) {
    return s && s.toUpperCase();
  }
  static get VERSION_NUMBER() {
    return parseFloat(this.VERSION) * 10;
  }
}

Thanks for posting your idea but it looks too broad and vague to make changes for Vue Class Component. As stated in contribution guideline, you should mention use cases or problems you want to solve for each feature request to verify if the feature is really worth adding and benefits the most of people.

As for the next major version, there are threads to discuss particular use cases and you can comment in the threads. You also can create a new issue if your use case is not covered in the existing thread for a feature request. Please make sure to make your issue precise and specific with a concrete use case to solve. Thank you.

I'm getting undefined errors when I attempt to access a property appended to Vue.prototype during the installation of a plugin.

Say I have a plugin:

Vue.use((Vue) => {
  Vue.prototype.$foo = 'foo'
})

IIf I export an object I'm able to access the

export default  {
  created() {
    console.log(this.$foo) // foo
  }
}

However if I extend Vue as recommended in the docs I can no longer access the property:

export default class FooComponent extends Vue {
   $foo!: string;

    created() {
        console.log(this.$foo) // undefined
    }
}

I've been searching the docs, stackoverflow but can't see an answer. I've added the module declaration as recommended and the code is compiling in ts, it just won't run in the browser:

declare module 'vue/types/vue' {
    interface Vue {
      $foo: string;
    }
}

I've seen a few issues on this repo that hint at the problem (#378, #380) but they were closed immediately without any response?

Closing until reproduction is provided.

I am using VueJs with NuxtJs and Typescript. Currently I am using the vue-property-decorator package. My code works fine in the browser but my ide (intelij) return me this error message:

Method expression is not of Function type

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Navigation from '~/components/Navigation.vue';
import Footer from '~/components/Footer.vue';

@Component({ // <-- error message here: Method expression is not of Function type
  components: { Navigation, Footer },
})
export default class Default extends Vue {}
</script>

If I change the above code to following I get no error message from the ide:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Default extends Vue {}
</script>

Further I have a vue-shims.d.ts file configured like this:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Closing until reproduction is provided.

The test build doesn't seem to be succeeded.

Why did you add this?

Правки

You may have sent the PR to the wrong repo.

The default component generated with vue cli is like this

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string;
}

versus the Vue2 version (class components + property-decorators)

export default class HelloWorld extends Vue {
  @Prop() msg!: string;
}

Reasons why the new API is an obvious downgrade:

1. Boilerplate wise the new version has a fixed cost of 4 new lines + an additional cost of one redundant line per Prop, this is huge especially for something as common.
2. You literrally write the same lines twice beyond the boilerplate aspect this is really annoying for thinking process of the dev as it is a non-sensical action (or at best an implementation detail that should never have leak) 2.1) You write the same types twices making no use of TS inference but actually you can write msg: Number which is an error that will not be catched at compile time.
3. the worst point is that

export default class HelloWorld extends Vue {
  msg!: string;
}

On the line msg!: string; you have zero visual information that tells you that msg is indeed a Props, one must lookup manually on the props object and remember the association (error prone, and take harmfully cognitive load).

Can this be solved before every sane dev jump on the react ship ? 'sorry for the snark I try sincerely to be constructive here.

@ktsn

Thank you for your feedback. Let's consolidate the discussion in #447

Thinking of the intuitiveness of in-class definition vs. out-class one, I noticed React's props definition is put outside a class.

interface Props {
  person: Person
}

class App extends React.Component<Props> {}

For me, this way of definition is clear and intuitive enough and I have not heard any negative voice about that as far as I know.

The alternative proposal looks similar to this way:

class Props {
  person!: Person
}

class App extends Vue.props(Props) {}

Defining props individually, then passing it to the super constructor. The difference is React's is type (interface) while the proposed one is value (class). Is it still unintuitive? It would be appreciated to hear everyone's thoughts.

Let me summarize the points (if I'm missing something, please add it!):

Definition verbosity

If we re-use the Vue core's canonical props options, we have to specify all value level types and we need PropType annotation for complex type that makes the API more verbose.

const Props = props({
  // to get person: Person type...
  person: {
    type: Object as PropType<Person>,
    required: true
  }
})

class App extends Props {}

The decorator (and the alternative approach above) does not require props options value. It is simpler if we do not need runtime validation.

class App extends Vue {
  @Prop
  person: Person
}

Definition in-class vs. out-class

Vue's TSX refers $props type to check if the passed props are correct. To make it work with class component, we have to put the props definition out of class (as far as I can tell).

On the other hand, the decorator allows us to define props inside a class. It is not possible to modify $props type if we have the definition in a class because of how TypeScript works.

One idea to make it closer to the decorator approach would be:

class AppProps extends Props {
  // optional prop
  foo?: string

  // required prop
  bar: string = prop({ required: true })

  // required prop (without runtime check)
  bar2!: string

  // optional prop with default
  baz = prop({ default: 'default value' })
}

class App extends Vue.props(AppProps) {}

Just roughly implemented it and seems working. But I have to make sure if it actually works with practical code/edge cases etc.

This approach doesn't require you to define runtime options (type, required) as same as the decorator approach while the Props type parameter is properly typed.

It still needs to be defined out of the component class but it is the root restriction that we cannot modify the type parameter from in-class definition and I've been thinking of this problem for a long time but no luck. If there is an approach to solve this problem with the definition inside a class, I'm happy to consider that.

Thanks for reporting this. This is caused by the wrong type definition of @Options. Will fix it in the next version.

@LifeIsStrange

Because Person is type while Vue's prop expects value. If you define the Person as a class you can write like that:

export class Person {
    firstName!: string
    lastName!: string
}

const Props = props({
  person: Person
})

export default class HelloWorld extends Props {}

Is there work going in this direction? I hope it's clear to the Vue.ts devs that this is an API downgrade

Well, this PropType approach exists for a long time even in Vue 2 and I don't think it's a downgrade as I already told you in the other issue and mentioned in the proposal - this will unlock advanced type checking feature like props type checking in template and TSX.

fix #294

I have several modules with namespaced: false. Each of them has a $init method (in the getter class) And when the application starts, there is the error "duplicate getter key: $ init" which is clear for me( the same names of getters->$init). But I want namespaced to be false.

fix #294

Thanks but there are strange behaviors with this style.

• Switching between two modals flickers the positions.

  

• The modal still overflows the viewport when the screen width is narrow.

You can check the previews in this repository if you pull the latest master branch and run npm run build && npm run birdseye.

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

@dependabot squash and merge

@dependabot rebase @dependabot squash and merge

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps reg-publish-s3-plugin from 0.9.0 to 0.10.7. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/reg-viz/reg-suit/releases">reg-publish-s3-plugin's releases</a>.</em></p> <blockquote> <h2>v0.10.6</h2> <h2>misc</h2> <ul> <li>Upgrade some dependencies ( <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/211">#211</a> )</li> </ul> <h2>v0.10.5</h2> <h2>New features</h2> <p>[reg-notify-gitlab-plugin]: add discussion to commentTo option ( <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/202">#202</a> )</p> <h2>v0.10.4</h2> <h2>New features</h2> <ul> <li>[reg-notify-github-with-api-plugin]: short description option (<a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/207">#207</a> )</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/reg-viz/reg-suit/commit/dbc5511acd6f8f44b8737e484828bc6c2fb0962e"><code>dbc5511</code></a> v0.10.7</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/7e9d7c52ec0d7a6055fc7f4b648a61f4335aa62c"><code>7e9d7c5</code></a> fix: add SHA1 for forked PR comment</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/607e20636355cffea53b7fc0b9b915fff294ba7e"><code>607e206</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/220">#220</a> from reg-viz/renovate/node-14.x</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/f7bde105ae590b7212e9997057f6498ff20806e2"><code>f7bde10</code></a> chore(deps): update dependency @types/node to v14.11.1</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/021a21918d8c9fa07664862ac805fd6297f2dbe5"><code>021a219</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/219">#219</a> from reg-viz/renovate/node-14.x</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/7b20f1051403e4132123691c87207398baeae283"><code>7b20f10</code></a> chore(deps): update dependency @types/node to v14.11.0</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/e01c47f0a6603a53f1ee77610a5451068442e203"><code>e01c47f</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/218">#218</a> from reg-viz/renovate/node-14.x</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/9ddec8cf79713ddbdbd7ae40bcc4c362dc8c2663"><code>9ddec8c</code></a> Merge pull request <a href="https://github-redirect.dependabot.com/reg-viz/reg-suit/issues/217">#217</a> from reg-viz/renovate/jest-26.x</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/ccb38cd3ed1c395d6eed5ae8b49439c57686319c"><code>ccb38cd</code></a> chore(deps): update dependency @types/node to v14.10.3</li> <li><a href="https://github.com/reg-viz/reg-suit/commit/8b6ad1f0e8f05ea454019fcbbd5198f912c2821b"><code>8b6ad1f</code></a> chore(deps): update dependency @types/jest to v26.0.14</li> <li>Additional commits viewable in <a href="https://github.com/reg-viz/reg-suit/compare/v0.9.0...v0.10.7">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Yeah, since it's json, we cannot write a function in it. We have to implement #107 to do that.

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a production dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

@ktsn just thought I'd add this to the docs to help others. Feel free to merge if you think it's helpful too.

Thanks for the plugin 👍

@Mikilll94 You can use PropType to annotate complex types. https://v3.vuejs.org/guide/typescript-support.html#annotating-props

export interface Person {
    firstName: string,
    lastName: string
}

const Props = props({
  person: {
    type: Object as PropType<Person>
    required: true
  }
})

export default class HelloWorld extends Props {}

@nicolidin

These snippets are unfair to compare. The equivalent props settings are:

const Props = props({
  firstProp: Number,
  secondProp: Number
})

export default Counter extends Props {}

vs.

export default Counter extends Vue {
  @Prop() 
  firstProp?: number

  @Prop()
  secondProp?: number
}

As for verbosity, I don't think there is much difference between the two approaches. You eventually need the same props options if you want to define your props in detail. Rather, I think the decorator approach is slightly more verbose as we have to write @Prop for every occurrence of prop definition while the mixin approach lets us write props once.

I'm curious what aspects of this proposal makes you feel less readable, less understandable, less intuitive and less logical? By using props helper, the definition of props become a separate block which is clearer where the props definition is. Also, it is property typed with actual props definition while the decorator approach can be wrong as we technically can set arbitrary type for the property of @Prop which the former is more logical for me.

As I wrote:

They receive as the same value as component props and emits options

required: true is the exact same as Vue's canonical option. https://v3.vuejs.org/api/options-data.html#props

what is the technical reason for Props to be necessarily outside of the class

This is also stated in the proposal, by using decorator we cannot type Props type property, then we cannot utilize up comming advanced type features like props type checking. (I saw Evan just announced it https://twitter.com/youyuxi/status/1307398376464539648)

Also If you don't like to define props in details you can just use simpler options shape:

const Props = props(['msg'])

export default class HelloWorld extends Props {}

Please search the existing issue #447

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps prettier from 2.1.1 to 2.1.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.1.2</h2> <p><a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md#212">🔗Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/master/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.1.2</h1> <p><a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">diff</a></p> <h4>Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9116">#9116</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="graphql"><code># Input type Query { someQuery(id: ID!, someOtherData: String!): String! @deprecated @isAuthenticated versions: Versions! } <h1>Prettier stable</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <h1>Prettier master</h1> <p>type Query { someQuery(id: ID!, someOtherData: String!): String! <a href="https://github.com/deprecated">@deprecated</a> <a href="https://github.com/isAuthenticated">@isAuthenticated</a> versions: Versions! }</p> <p></code></pre></p> <h4>Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/9136">#9136</a> by <a href="https://github.com/sosukesuzuki">@sosukesuzuki</a>)</h4> <!-- raw HTML omitted --> <pre lang="js"><code>// Input styled.div// prettier-ignore @media (aaaaaaaaaaaaa) { z-index: ${(props) => (props.isComplete ? '1' : '0')}; }; styled.div${props => getSize(props.$size.xs)} ${props => getSize(props.$size.sm, 'sm')} ${props => getSize(props.$size.md, 'md')}; <p></tr></table> ... (truncated) </code></pre></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/8eb8f9ed2dc5eb1c3e6f787e5a5e6fe68af2b8d1"><code>8eb8f9e</code></a> Release 2.1.2</li> <li><a href="https://github.com/prettier/prettier/commit/f75844a453beb6cb16791c14e5ff738c02d0b4df"><code>f75844a</code></a> Fix changelog</li> <li><a href="https://github.com/prettier/prettier/commit/9153bf20ac2dfcd525b5dd3f3b37d9b6005d20bc"><code>9153bf2</code></a> Build(deps): Bump yaml-unist-parser from 1.3.0 to 1.3.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9169">#9169</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ec1b4193079a625633dd0dc86f9a9217a3ad9d7e"><code>ec1b419</code></a> YAML: Fix printing doubles a blank line before a comment (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9143">#9143</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ab9474eacc9c883e588ef2500c6230057328ade5"><code>ab9474e</code></a> Fix line breaks for CSS in JS (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9136">#9136</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/d5da779cb195443c935fd7171f5e81141e2f62e5"><code>d5da779</code></a> GraphQL: Fix formatting for directives in fields (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/9116">#9116</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a8363197118e530d948978da6e5c414a765ba9c0"><code>a836319</code></a> Bump Prettier dependency to 2.1.1</li> <li>See full diff in <a href="https://github.com/prettier/prettier/compare/2.1.1...2.1.2">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will not automatically merge this PR because it includes an out-of-range update to a development dependency.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

• Update frequency (including time of day and day of week)
• Pull request limits (per update run and/or open at any time)
• Automerge options (never/patch/minor, and dev/runtime dependencies)
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

As far as I know the current solution for non-reactive class members is:

import User from '@/models/user';
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

  private user!: User;

  private created(): void {
    this.user = new User();
  }
}

This is... ok. I guess. Well actually it kind of sucks. I have to trust Vue that it will call created(). Typescript won't warn me if I forget to do this.user = new User(), and it's quite verbose.

Would it be possible to add a decorator to do this instead?

import User from '@/models/user';
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

  @Unreactive
  private user: User = new User();
}

(or @Nonreactive)

Vue 3 is released and markRaw is what we want. https://v3.vuejs.org/api/basic-reactivity.html#markraw

Thank you for filing this issue. Please make sure to provide a minimal and self-contained reproduction if you are reporting a bug. You can use the following jsfiddle template or make an example github repository. https://jsfiddle.net/ktsn/nm55jnjk/

What is a minimal reproduction, and why is it required?

Since Vue core changed the unwrapping behavior of setup (from deep to shallow), Vue Class Component follows that direction. I've updated the original post to add setup unwrapping section. You can see the detailed unwrapping behavior of setup in Vue Class Component there.

fix https://github.com/vuejs/vue-class-component/issues/451

Since the raw class component is passed to the HMR reload API, it tries to extract component options from the class constructor which causes the issue. We have to extract its component options if a class is passed to the HMR API.