본문으로 건너뛰기
cccskills
무료GitHub에 공개

vue-wrapper-dev

Develop and modify the Handsontable wrapper for Vue 3 with guidance on component structure, settings updates, column configuration, and shared data references. It also explains the build order and tests used to check wrapper changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Use when developing or modifying the @handsontable/vue3 wrapper package - Vue 3 SFC components, deep watchers, and provide/inject patterns for settings propagation

설치 방법 보기

이럴 때 유용합니다

  • Fix settings updates in the Vue 3 wrapper
  • Modify per-column configuration
  • Investigate how array changes reach the grid
  • Build and test wrapper changes

포함된 파일(1)

  • SKILL.md1.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Vue 3 Wrapper Development

Package: wrappers/vue3/. Wrapper rules, build, and test commands: wrappers/vue3/AGENTS.md.

Architecture

  • HotTable.vue: main SFC; creates the instance on mount, tears it down on unmount.
  • HotColumn.vue: child for declarative per-column configuration.
  • defineComponent with propFactory('HotTable') generates a prop per Handsontable option.
  • Deep watchers (watch with deep: true) call updateSettings() on prop changes.
  • prepareSettings() turns props into a plain settings object, dropping Vue-specific properties.
  • provide() / inject(): HotTable provides settings and the instance so HotColumn children register their configs.
  • Data is synced by reference, not deep-copied: mutations to the original array show in the grid. Keep the same array reference unless you intend a full reload.

Build: Rollup 4. Tests: Jest with @vue/test-utils; npm run test --prefix wrappers/vue3 after npm run build --prefix handsontable (wrappers consume handsontable/tmp/, not dist/).

FilePurpose
src/HotTable.vueMain grid component
src/HotColumn.vuePer-column configuration
src/helpers.tsSettings preparation, utilities
src/types.tsType definitions

Rules

  • All data transformation and validation lives in handsontable/src/.
  • npm scripts use Node.js .mjs helpers.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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/handsontable2.2만2026년 10월 19일 업데이트

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/handsontable2.2만2026년 10월 19일 업데이트

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/handsontable2.2만2026년 10월 19일 업데이트

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/handsontable2.2만2026년 10월 19일 업데이트

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/handsontable2.2만2026년 10월 19일 업데이트

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/handsontable2.2만2026년 10월 19일 업데이트

handsontable의 스킬 모두 보기

이 스킬의 문제 신고