Fix MobX decorator incompatibility: switch to TC39 stage 3 decorators

.github/workflows/ci.yml

@@ -16,6 +16,9 @@ jobs:
             - name: Install dependencies
               run: bun install --frozen-lockfile
 
+            - name: Build packages
+              run: bun run build:packages
+
             - name: Run tests
               run: bun run test
 

package.json

@@ -7,7 +7,7 @@
     "node": ">=22.0"
   },
   "scripts": {
-    "build": "storybook build -o storybook-static",
+    "build": "storybook build -o storybook-static --stats-json",
     "build:packages": "bun run build:colours && bun run build:components && bun run build:charts",
     "build:colours": "cd packages/colours && bun run build",
     "build:components": "cd packages/components && bun run build",

packages/charts/build.ts

@@ -41,12 +41,10 @@ const transpileFile = async (srcPath: string, destPath: string) => {
         target: "esnext",
         sourcemap: "external",
         sourcefile: srcPath,
-        // Use legacy decorators mode for compatibility with mobx-react
         tsconfigRaw: {
             compilerOptions: {
-                experimentalDecorators: true,
-                emitDecoratorMetadata: false,
-                useDefineForClassFields: false,
+                experimentalDecorators: false,
+                useDefineForClassFields: true,
             },
         },
     })

packages/charts/src/explorer/ExplorerDecisionMatrix.ts

@@ -91,12 +91,9 @@ const makeCheckBoxOption = (
 // allow the user to navigate amongst charts.
 export class DecisionMatrix {
     table: CoreTable
-    currentParams: ExplorerChoiceParams = {}
+    @observable accessor currentParams: ExplorerChoiceParams = {}
     constructor(delimited: string, hash = "") {
-        makeObservable(this, {
-            currentParams: observable,
-            selectedRow: observable,
-        })
+        makeObservable(this)
         this.choiceNameToControlTypeMap = makeChoicesMap(delimited)
         this.table = new CoreTable(parseDelimited(dropColumnTypes(delimited)), [
             // todo: remove col def?
@@ -413,7 +410,7 @@ export class DecisionMatrix {
             : this.table.indexOf(this.firstMatch)
     }
 
-    selectedRow: any = {}
+    @observable accessor selectedRow: any = {}
 
     private toControlOption(
         choiceName: ChoiceName,

packages/charts/src/grapher/axis/AxisConfig.ts

@@ -93,7 +93,12 @@ export class AxisConfig
 {
     constructor(props?: AxisConfigInterface, axisManager?: AxisManager) {
         super()
-        makeObservable(this)
+        makeObservable<AxisConfig, "constrainedMin" | "constrainedMax">(this, {
+            fontSize: computed,
+            constrainedMin: computed,
+            constrainedMax: computed,
+            domain: computed,
+        })
         this.updateFromObject(props)
         this.axisManager = axisManager
     }
@@ -138,12 +143,12 @@ export class AxisConfig
         return obj
     }
 
-    @computed get fontSize(): number {
+    get fontSize(): number {
         return this.axisManager?.fontSize || BASE_FONT_SIZE
     }
 
     // A log scale domain cannot have values <= 0, so we double check here
-    @computed private get constrainedMin(): number {
+    private get constrainedMin(): number {
         if (this.scaleType === ScaleType.log && (this.min ?? 0) <= 0)
             return Infinity
         return this.min ?? Infinity
@@ -157,13 +162,13 @@ export class AxisConfig
         return false
     }
 
-    @computed private get constrainedMax(): number {
+    private get constrainedMax(): number {
         if (this.scaleType === ScaleType.log && (this.max || 0) <= 0)
             return -Infinity
         return this.max ?? -Infinity
     }
 
-    @computed get domain(): [number, number] {
+    get domain(): [number, number] {
         return [this.constrainedMin, this.constrainedMax]
     }
 

packages/charts/src/grapher/chart/ChartDimension.ts

@@ -65,14 +65,18 @@ export class ChartDimension
     ) {
         super()
 
-        makeObservable(this, {
+        makeObservable<ChartDimension, "table">(this, {
             _slug: observable,
+            table: computed,
+            slug: computed,
+            column: computed,
+            columnSlug: computed,
         })
         this.manager = manager
         if (obj) this.updateFromObject(obj)
     }
 
-    @computed private get table(): ChartsTable {
+    private get table(): ChartsTable {
         return this.manager.table
     }
 
@@ -102,7 +106,7 @@ export class ChartDimension
     // Do not persist yet, until we migrate off VariableIds
     _slug: ColumnSlug | undefined = undefined
 
-    @computed get slug(): ColumnSlug {
+    get slug(): ColumnSlug {
         if (this._slug) return this._slug
         return getDimensionColumnSlug(this.variableId, this.targetYear)
     }
@@ -111,11 +115,11 @@ export class ChartDimension
         this._slug = value
     }
 
-    @computed get column(): CoreColumn {
+    get column(): CoreColumn {
         return this.table.get(this.columnSlug)
     }
 
-    @computed get columnSlug(): string {
+    get columnSlug(): string {
         return this.slug ?? this.variableId.toString()
     }
 }

packages/charts/src/grapher/footer/Footer.tsx

@@ -83,9 +83,7 @@ abstract class AbstractFooter<
     constructor(props: Props) {
         super(props)
 
-        makeObservable(this, {
-            tooltipTarget: observable.ref,
-        })
+        makeObservable(this)
     }
 
     @computed protected get manager(): FooterManager {
@@ -318,7 +316,7 @@ abstract class AbstractFooter<
     }
 
     base = React.createRef<HTMLDivElement>()
-    tooltipTarget: { x: number; y: number } | undefined = undefined
+    @observable.ref accessor tooltipTarget: { x: number; y: number } | undefined = undefined
 
     @action.bound private onMouseMove(e: MouseEvent): void {
         const cc = this.base.current?.querySelector(".cclogo")

packages/charts/src/grapher/mapCharts/MapChart.tsx

@@ -90,20 +90,17 @@ export class MapChart
     constructor(props: MapChartProps) {
         super(props)
 
-        makeObservable(this, {
-            hoverBracket: observable,
-            tooltipState: observable,
-        })
+        makeObservable(this)
     }
 
     /**
      * The currently hovered map bracket.
      *
      * Hovering a map bracket highlights all countries within that bracket on the map.
      */
-    hoverBracket: MapBracket | undefined = undefined
+    @observable accessor hoverBracket: MapBracket | undefined = undefined
 
-    tooltipState = new TooltipState<{
+    @observable accessor tooltipState = new TooltipState<{
         featureId: string
     }>()
 

packages/charts/src/grapher/selection/SelectionArray.ts

@@ -3,13 +3,11 @@ import { action, computed, observable, makeObservable } from "mobx"
 
 export class SelectionArray {
     constructor(selectedEntityNames: EntityName[] = []) {
-        makeObservable(this, {
-            selectedEntityNames: observable,
-        })
+        makeObservable(this)
         this.selectedEntityNames = selectedEntityNames.slice()
     }
 
-    selectedEntityNames: EntityName[]
+    @observable accessor selectedEntityNames: EntityName[] = []
 
     @computed get hasSelection(): boolean {
         return this.selectedEntityNames.length > 0

packages/charts/src/grapher/slideInDrawer/SlideInDrawer.tsx

@@ -17,15 +17,13 @@ interface SlideInDrawerProps {
 
 @observer
 export class SlideInDrawer extends React.Component<SlideInDrawerProps> {
-    visible: boolean = this.props.active // true while the drawer is active and during enter/exit transitions
+    @observable.ref accessor visible: boolean = this.props.active // true while the drawer is active and during enter/exit transitions
     drawerRef = React.createRef<HTMLDivElement>()
 
     constructor(props: SlideInDrawerProps) {
         super(props)
 
-        makeObservable(this, {
-            visible: observable.ref,
-        })
+        makeObservable(this)
     }
 
     override componentDidMount(): void {

packages/charts/src/grapher/stackedCharts/MarimekkoChart.tsx

@@ -87,19 +87,16 @@ export class MarimekkoChart
     constructor(props: MarimekkoChartProps) {
         super(props)
 
-        makeObservable(this, {
-            focusColorBin: observable,
-            tooltipState: observable,
-        })
+        makeObservable(this)
     }
 
     labelAngleInDegrees = -45 // 0 is horizontal, -90 is vertical from bottom to top, ...
 
     // currently hovered legend color
-    focusColorBin: ColorScaleBin | undefined = undefined
+    @observable accessor focusColorBin: ColorScaleBin | undefined = undefined
 
     // current tooltip target & position
-    tooltipState = new TooltipState<{
+    @observable accessor tooltipState = new TooltipState<{
         entityName: string
     }>()
 

packages/charts/src/grapher/stackedCharts/StackedBarChart.tsx

@@ -77,19 +77,15 @@ export class StackedBarChart
     constructor(props: StackedBarChartProps) {
         super(props)
 
-        makeObservable(this, {
-            hoverColor: observable,
-            hoveredTick: observable,
-            tooltipState: observable,
-        })
+        makeObservable(this)
     }
 
     // currently hovered legend color
-    hoverColor: string | undefined = undefined
+    @observable accessor hoverColor: string | undefined = undefined
     // currently hovered axis label
-    hoveredTick: TickmarkPlacement | undefined = undefined
+    @observable accessor hoveredTick: TickmarkPlacement | undefined = undefined
     // current hovered individual bar
-    tooltipState = new TooltipState<{
+    @observable accessor tooltipState = new TooltipState<{
         bar: StackedPoint<number>
         series: StackedSeries<number>
     }>()

packages/charts/src/grapher/stackedCharts/StackedBarSegment.tsx

@@ -29,12 +29,10 @@ export class StackedBarSegment extends React.Component<StackedBarSegmentProps> {
     constructor(props: StackedBarSegmentProps) {
         super(props)
 
-        makeObservable(this, {
-            mouseOver: observable,
-        })
+        makeObservable(this)
     }
 
-    mouseOver: boolean = false
+    @observable accessor mouseOver: boolean = false
 
     @computed get yPos(): number {
         const { bar, yAxis } = this.props

packages/charts/src/grapher/stackedCharts/StackedDiscreteBarChart.tsx

@@ -52,13 +52,10 @@ export class StackedDiscreteBarChart
     constructor(props: StackedDiscreteBarChartProps) {
         super(props)
 
-        makeObservable(this, {
-            focusSeriesName: observable,
-            tooltipState: observable,
-        })
+        makeObservable(this)
     }
 
-    focusSeriesName: SeriesName | undefined = undefined
+    @observable accessor focusSeriesName: SeriesName | undefined = undefined
 
     @computed get chartState(): StackedDiscreteBarChartState {
         return this.props.chartState
@@ -182,7 +179,7 @@ export class StackedDiscreteBarChart
         return new HorizontalCategoricalColorLegend({ manager: this })
     }
 
-    tooltipState = new TooltipState<{
+    @observable accessor tooltipState = new TooltipState<{
         entityName: string
         seriesName?: string
     }>()