a

Author: ruojianll

docs/delare.d.ts

@@ -21,4 +21,6 @@
     - [TSX render](/en/tsx/tsx-render/tsx-render.md)
     - [Attribute types](/en/tsx/attribute-types/attribute-types.md)
 - Compatibility
-    - [reflect-metadata](/en/compatibility/reflect-metadata/reflect-metadata.md)
+    - [reflect-metadata](/en/compatibility/reflect-metadata/reflect-metadata.md)
+- Next version
+    - [Next version](/en/next-version/next-version.md)

docs/en/_sidebar.md

@@ -0,0 +1,17 @@
+
+import { Component, Vue, toNative, Prop } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+    @Prop
+    prop!: string
+
+    field = this.prop // this is deprecated, it will be undefined
+}
+
+
+export default toNative(MyComponent)
+
+export { MyComponent }

docs/en/next-version/breaking-changes-classProperty.ts

@@ -0,0 +1,50 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+
+}
+
+/*
+Cast to vue options API by toNative
+{
+    name:"MyComponent"
+}
+*/
+
+export default toNative(MyComponent)
+
+export { MyComponent }
+
+/*
+import MyComponent from 'MyComponent.vue'
+
+@Component({
+    components:[MyComponent] // use it as a component of another component
+})
+
+
+//or
+
+
+import { createApp } from 'vue'
+import MyComponent from 'MyComponent.vue'
+
+createApp(MyComponent).mount('#root') // or other places which vue want an options API component
+*/
+
+/*
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { MyComponent } from 'MyComponent.vue'
+
+// Extends component constructor directly
+
+@Component
+class AnotherComponent extends MyComponent {
+
+}
+
+*/

docs/en/next-version/breaking-changes-toNative.ts

@@ -0,0 +1,31 @@
+## Next version
+
+We published a preview next version that is compatible with JavaScript decorator stage 3. To migrate to preview next vewsion, you need to change your project with some break changes.
+
+In 3.x, decorator `Component` is same to `ComponentBase`, and you should cast class component to vue options API manually, see Breaking changes secion.
+
+## Install
+
+* `npm install vue-facing-decorator@beta`
+
+* Update typescript to 5.x
+
+* Set `compilerOptions.experimentalDecorators` to `false`, this will enable stage 3 decorator.
+
+## Breaking changes
+
+### Cast class component to vue options API
+
+You must use `toNative` to cast a class component to vue options API, after that, the casted component could be used as a native vue component in where vue accepts it.
+
+[](./breaking-changes-toNative.ts ':include :type=code typescript')
+
+### Depreactate init class property despends on another in constructor
+
+This is not allowed now.
+
+[](./breaking-changes-classProperty.ts ':include :type=code typescript')
+
+### Remove `index-return-cons`
+
+Remove `vue-facing-decorator/dist/index-return-cons`, you won't need this if `toNative` exists.

docs/en/next-version/next-version.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.1.19",
+  "version": "3.0.0-beta.1",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

package.json

@@ -1,7 +1,7 @@
 
 import { expect } from 'chai';
 import 'mocha';
-import { Component, Base, toNative } from '../dist'
+import { Component, Base, toNative } from '../dist/index-return-cons'
 import { isEmptyObject } from './utils';
 
 @Component