first commit

test/development/basic/define-class-fields/fixture/pages/animal.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+interface Animal {
+  animalStuff: any
+}
+interface Dog extends Animal {
+  dogStuff: any
+}
+
+class AnimalHouse {
+  resident: Animal
+  constructor(animal: Animal) {
+    this.resident = animal
+  }
+}
+class DogHouse extends AnimalHouse {
+  // Initializes 'resident' to 'undefined'
+  // after the call to 'super()' when
+  // using 'useDefineForClassFields'!
+  // @ts-ignore
+  resident: Dog
+  // useless constructor only for type checker
+  /* eslint-disable @typescript-eslint/no-useless-constructor */
+  constructor(dog: Dog) {
+    super(dog)
+  }
+}
+
+class DogHouseWithDeclare extends AnimalHouse {
+  declare resident: Dog
+  // useless constructor only for type checker
+  /* eslint-disable @typescript-eslint/no-useless-constructor */
+  constructor(dog: Dog) {
+    super(dog)
+  }
+}
+
+export default function AnimalView() {
+  const dog = new DogHouse({
+    animalStuff: 'animal',
+    dogStuff: 'dog',
+  })
+  const dogDeclare = new DogHouseWithDeclare({
+    animalStuff: 'animal',
+    dogStuff: 'dog',
+  })
+  return (
+    <>
+      <div id={'dog'}>{String(dog.resident)}</div>
+      <div id={'dogDecl'}>{dogDeclare.resident?.dogStuff}</div>
+    </>
+  )
+}

test/development/basic/define-class-fields/fixture/pages/derived.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+class Base {
+  set data(value: number) {
+    console.log('data changed to ' + value)
+  }
+
+  set name(value: number) {
+    console.log('name changed to ' + value)
+  }
+}
+
+class Derived extends Base {
+  // No longer triggers a 'console.log'
+  // when using 'useDefineForClassFields'.
+  // @ts-ignore
+  name = 10
+  constructor() {
+    super()
+    //triggers a 'console.log'
+    this.data = 10
+  }
+}
+
+export default function DerivedView() {
+  const obj = new Derived()
+  return (
+    <>
+      <div id={'data'}>{obj.data}</div>
+      <div id={'name'}>{obj.name}</div>
+    </>
+  )
+}

test/development/basic/define-class-fields/fixture/pages/index.tsx

@@ -0,0 +1,39 @@
+// @ts-ignore
+import { makeObservable, observable } from 'mobx'
+// @ts-ignore
+import { observer } from 'mobx-react'
+import React from 'react'
+
+class Person {
+  //Declarations are initialized with Object.defineProperty.
+
+  // @ts-ignore
+  name: string
+
+  constructor() {
+    //without useDefineForClassFields it will be error
+    makeObservable(this, {
+      name: observable,
+    })
+  }
+}
+
+const person = new Person()
+
+const PersonView = observer(() => {
+  const changeName = () => {
+    person.name = 'next'
+  }
+  return (
+    <>
+      <div id="name">this is my name: {person.name}</div>
+      <button id="action" onClick={changeName}>
+        Change Name
+      </button>
+    </>
+  )
+})
+
+export default function Home() {
+  return <PersonView />
+}