![](\"./logo/Favicon_Classy.svg\"){kind=logo}
Classy Solid \n\nUtilities for making `class`es reactive with [Solid.js](https://solidjs.com)\nsignals, and for using `class`es as Solid.js components.\n\n\n\n# Table of Contents \n\n- [At a glance](#at-a-glance)\n- [Install](#install)\n - [Vite Setup](#vite-setup)\n - [Babel Setup](#babel-setup)\n- [API and Usage](#api-and-usage)\n - [Decorator APIs](#decorator-apis)\n - [`@signal`](#signal)\n - [`@memo`](#memo)\n - [`@effect`](#effect)\n - [`@untracked`](#untracked)\n - [`@component`](#component)\n - [JavaScript with build tools](#javascript-with-build-tools)\n - [JavaScript without build tools](#javascript-without-build-tools)\n - [Accessing the class instance with `ref`:](#accessing-the-class-instance-with-ref)\n - [TypeScript definition](#typescript-definition)\n - [Type-safe refs in TypeScript:](#type-safe-refs-in-typescript)\n - [`@reactive` (deprecated)](#reactive-deprecated)\n - [Non-decorator APIs](#non-decorator-apis)\n - [`component()`](#component-1)\n - [`createSignalObject()`](#createsignalobject)\n - [`createSignalFunction()`](#createsignalfunction)\n - [`signalify()`](#signalify)\n - [`memoify()`](#memoify)\n - [`Effectful`](#effectful)\n - [`Effects`](#effects)\n - [`syncSignals`](#syncsignals)\n - [`createSyncedSignals`](#createsyncedsignals)\n - [`createStoppableEffect`](#createstoppableeffect)\n - [Error Handling and Caveats](#error-handling-and-caveats)\n - [Writable Memo Overrides](#writable-memo-overrides)\n - [Static Fields](#static-fields)\n - [Memory Considerations](#memory-considerations)\n\n# At a glance\n\n```jsx\nimport {render, batch} from 'solid-js'\nimport {component, signal, memo, effect, stopEffects} from 'classy-solid'\n\n//////////////////////////////////////////////////\n// Make plain classes reactive with Solid signals.\n\nclass Counter {\n\t@signal count = 0\n\t@signal num = 10\n\n\t@memo get #sum() {\n\t\treturn this.count + this.num\n\t}\n\n\t@effect #logCount() {\n\t\t// Log the count whenever it changes.\n\t\tconsole.log(`Count is: ${this.count}`)\n\t}\n\n\t@effect #logSum() {\n\t\t// Log the sum whenever it changes.\n\t\tconsole.log(`Sum is: ${this.#sum}`)\n\t}\n\n\tincrement() {\n\t\tthis.count++\n\t}\n}\n\nconst counter = new Counter()\n\nsetInterval(() => counter.increment(), 1000)\n\ncounter.count = 5 // Logs \"Count is: 5\" and \"Sum is: 15\"\ncounter.num = 20 // Logs \"Sum is: 25\"\n\n// After the batch function runs, logs \"Count is: 10\", but does not log \"Sum is:\n// 25\" because the sum did not change (@memo prevents effects from running\n// unnecessarily on the same values).\nbatch(() => {\n\tcounter.count = 10\n\tcounter.num = 15\n})\n\n// ...later, clean up when done...\nstopEffects(counter)\n\n//////////////////////////////////////////////////\n// Optionally use classes as Solid components.\n\n@component\nclass MyComp {\n\t@signal message = 'Hello, World!'\n\t@signal name = 'Asa'\n\n\ttemplate() {\n\t\tsetTimeout(() => (this.message = 'Hello after 3 seconds!'), 3000)\n\n\t\treturn (\n\t\t\tMy name is {this.name}.
\n\n\t\t\t\tThe count is: {counter.count}
\n\t\t\t