Skip to content
cccskills
FreePublished on GitHub

refactoring

Refactor Handsontable code by separating plugin responsibilities, reducing dependencies, batching rendering work, and updating coding patterns. It provides compatibility rules and testing guidance to preserve existing APIs, CSS classes, settings, and behavior.

OriginalShow the original description

Use when refactoring Handsontable code - applying SOLID principles, Law of Demeter, plugin extraction, performance optimization, code modernization, and API redesign with backward compatibility preservation

See how to install

Good for

  • Split an oversized plugin into focused plugins
  • Reduce repeated rendering during bulk updates
  • Update private fields and callback patterns
  • Redesign APIs while preserving existing names

Files included (1)

  • SKILL.md3.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Conventions over configuration

Eliminate config that naming, location, or type conventions already express. Use auto-discovery or lifecycle hooks in place of new options or wiring.

Handsontable specifics

  • Single responsibility: one concern per plugin; extract a second concern into its own plugin.
  • Open/closed: extend through hooks and the plugin system; new logic listens for hooks.
  • Liskov: honor the BasePlugin contract (isEnabled, enablePlugin, disablePlugin, updatePlugin, destroy, required static properties).
  • Interface segregation: keep public plugin APIs narrow; expose a focused method through hot.getPlugin('{Name}').
  • Dependency inversion: depend on hooks; reach another plugin's API through hot.getPlugin('{Name}'), never by importing its class.
  • Law of Demeter: replace chains like this.hot.view.wt.wtTable.holder with a method on the intermediate layer.

Patterns

  • Plugin extraction: when logic in core.js or a large plugin outgrows one responsibility, move it to a dedicated plugin that communicates through new hooks.
  • Performance:
    • forEach loop in place of arr.push(...largeArray) (stack overflow at 10k+ elements).
    • Batch render cycles with batch(), batchRender(), suspendRender()/resumeRender().
    • Batch scroll-related work in requestAnimationFrame.
  • Modernization:
    • #privateFields in place of @private JSDoc (exception: when # measurably hurts performance).
    • Arrow-function class fields for hook and event callbacks in place of .bind(this).
    • ?. only for values optional by design.
  • API redesign: keep the old name working (table below).

Breaking changes protection

RuleDetail
Default setting values stay unchangedDefaults in metaSchema.ts.
Keep legacy CSS class namesAdd new names alongside old ones; old names stay in the DOM.
Legacy API names keep working with no console warning"Legacy", not "deprecated".
Deprecated APIs get a one-time warningdeprecatedWarn() from src/helpers/console.ts; works until the next major release.
Removed hooks go on the removed listUsers get a clear error instead of silent failure.

Maintainability

  • Cognitive complexity at most 15 per function (Sonar); extract helpers or use early returns above it.
  • Reuse helpers from src/helpers/ before writing new ones.
  • Method order: public methods first, then private listeners.

Tests after refactoring

  • Unit (*.unit.js): extracted helpers, strategies, pure logic.
  • E2E (Playwright tests/e2e/*.spec.ts): feature still works in the browser. Edit an existing Jasmine *.spec.js only to keep it passing; never add a new one. A pure refactor with no behavior change can use a Refactor-only: <reason> commit trailer instead of a new test.
  • Backward compatibility: legacy API names, CSS classes, and option names still work.
  • Performance: for data-heavy paths, unit tests with 50k+ rows.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Develop and modify the Handsontable Angular wrapper with guidance on component lifecycle, settings updates, and NgZone, which controls change detection. It also covers standalone examples, global configuration, and the build and test workflow.

  • Fix settings updates in the Angular wrapper
  • Review change detection around grid operations
  • Update examples to standalone components
handsontable/handsontable22.1KUpdated Oct 19, 2026

Open local or public web pages in BrowserStack Live for checks on real mobile devices or desktop browsers. The skill prepares temporary access to a local server, launches the requested session, and shares its dashboard link.

  • Check a local page on an Android device
  • Open a page in Safari on an iPhone or iPad
  • Inspect behavior in a specific desktop browser
handsontable/handsontable22.1KUpdated Oct 19, 2026

Prepare user-facing changelog entries for source code changes. The skill determines whether an entry is needed, classifies the change, writes a clear title, and uses the project CLI to create a JSON file tied to the pull request.

  • Add a changelog entry for a bug fix
  • Classify a new feature or behavior change
  • Explain a breaking change and its replacement
handsontable/handsontable22.1KUpdated Oct 19, 2026

code-graph

FreeSummary

Explore relationships between functions and files using a prebuilt code graph, a map of code dependencies. Trace bugs, inspect callers and execution paths, and assess the impact of refactoring or proposed changes.

  • Explore callers and dependencies in unfamiliar code
  • Trace a bug across multiple files
  • Assess the impact of renaming or removing code
handsontable/handsontable22.1KUpdated Oct 19, 2026

Work with Handsontable row and column positions by distinguishing source data, displayed order, and rendered cells. It guides index conversion and helps investigate misplaced data when sorting, filtering, hiding, or moving rows and columns.

  • Investigating misplaced rows or columns
  • Converting between source and displayed indexes
  • Combining filters with manual column movement
handsontable/handsontable22.1KUpdated Oct 19, 2026

Create Handsontable documentation examples for JavaScript, TypeScript, React, Angular, and Vue. The skill explains source files, generated JavaScript, required imports and license settings, embedding examples in guides, and checking that each framework version displays correctly.

  • Adding a code example to a feature guide
  • Preparing examples for multiple frameworks
  • Generating JavaScript examples from TypeScript
handsontable/handsontable22.1KUpdated Oct 19, 2026

See all skills by handsontable

Report a problem with this skill