Observable decorator on computed symbol keys (#2175)

* Decorator checks for typeof symbol now too, plus tests... failing with callstack exceeded

* Updating comments

* Fixing comments

* Removing accidental semicolon

* Add propertyCreator to symbol key properties too

* Updating changelog

Author: StephenHaney

CHANGELOG.md

@@ -2,6 +2,8 @@
 -   Fix running mobx in web worker [#2184](https://github.com/mobxjs/mobx/pull/2184/files)
 -   Fixed flow typings for Facebook's Flow. A new `CancellablePromise` Flow type is exported.
 
+-   Added support for symbol keys on observable properties.
+
 # 5.14.2
 
 -   Fixed installation issue trying to run `postinstall` hook for a website [#2165](https://github.com/mobxjs/mobx/issues/2165).

src/api/observable.ts

@@ -79,7 +79,7 @@ function getEnhancerFromOptions(options: CreateObservableOptions): IEnhancer<any
  */
 function createObservable(v: any, arg2?: any, arg3?: any) {
     // @observable someProp;
-    if (typeof arguments[1] === "string") {
+    if (typeof arguments[1] === "string" || typeof arguments[1] === "symbol") {
         return deepDecorator.apply(null, arguments as any)
     }
 

src/utils/decorators.ts

@@ -57,8 +57,10 @@ export function initializeInstance(target: DecoratorTarget) {
     const decorators = target[mobxPendingDecorators]
     if (decorators) {
         addHiddenProp(target, mobxDidRunLazyInitializersSymbol, true)
-        for (let key in decorators) {
-            const d = decorators[key]
+        // Build property key array from both strings and symbols
+        const keys = [...Object.getOwnPropertySymbols(decorators), ...Object.keys(decorators)]
+        for (const key of keys) {
+            const d = decorators[key as any]
             d.propertyCreator(target, d.prop, d.descriptor, d.decoratorTarget, d.decoratorArguments)
         }
     }
@@ -113,7 +115,8 @@ export function createPropDecorator(
 
 export function quacksLikeADecorator(args: IArguments): boolean {
     return (
-        ((args.length === 2 || args.length === 3) && typeof args[1] === "string") ||
+        ((args.length === 2 || args.length === 3) &&
+            (typeof args[1] === "string" || typeof args[1] === "symbol")) ||
         (args.length === 4 && args[3] === true)
     )
 }

test/base/typescript-tests.ts

@@ -1647,3 +1647,31 @@ test("verify #1528", () => {
 
     expect(appState.timer).toBe(0)
 })
+
+test("#2159 - computed property keys", () => {
+    const testSymbol = Symbol("test symbol")
+    const testString = "testString"
+
+    class TestClass {
+        @observable [testSymbol] = "original symbol value";
+        @observable [testString] = "original string value"
+    }
+
+    const o = new TestClass()
+
+    const events: any[] = []
+    observe(o, testSymbol, ev => events.push(ev.newValue, ev.oldValue))
+    observe(o, testString, ev => events.push(ev.newValue, ev.oldValue))
+
+    runInAction(() => {
+        o[testSymbol] = "new symbol value"
+        o[testString] = "new string value"
+    })
+
+    t.deepEqual(events, [
+        "new symbol value", // new symbol
+        "original symbol value", // original symbol
+        "new string value", // new string
+        "original string value" // original string
+    ])
+})