5.4 KiB
Getting Started with Development
This guide covers setting up your development environment, building, and testing the Charted Roots plugin.
Table of Contents
- Project Setup
- Manual Deployment to Obsidian Vault
- Testing in Obsidian
- Hot Reload (Advanced)
- Debugging
- Version Management
- Related Documentation
Project Setup
Installation
npm install
Build Commands
npm run dev- Start development mode with watch (builds to local main.js)npm run build- Production build (fonts + esbuild + CSS; no type check — runtype-checkseparately when needed)npm run type-check- Standalonetsc -noEmit -skipLibCheckpass. Clean (zero errors) and gated in CI as of #704; run before pushing a tag.npm test- Run the Vitest regression suite once (1618 tests across 140 suites as of v0.22.75, covering pure helpers for relationships, migrations, the sibling walker, event identity, date handling, and a large set of issue-specific regression suites)npm run test:watch- Vitest in watch mode for iterative developmentnpm run lint- Check TypeScript code for linting errorsnpm run lint:fix- Auto-fix TypeScript linting errorsnpm run lint:css- Check CSS for linting errorsnpm run lint:css:fix- Auto-fix CSS linting errorsnpm run format:css- Format CSS with Prettier
Before committing code, always run linting and the test suite:
npm run lint && npm run lint:css && npm run type-check && npm test
Bug fixes that touch volatile code paths (relationship handling, migrations, cross-note writes, date parsing) should land with regression tests — see the existing tests/ files for the pure-helper extraction pattern.
See Coding Standards for detailed style guidelines.
Manual Deployment to Obsidian Vault
To deploy the plugin to your Obsidian vault for testing:
-
Build the plugin:
npm run build -
Manually copy the built files to your vault's plugin directory:
cp main.js manifest.json styles.css /path/to/your/vault/.obsidian/plugins/canvas-roots/ -
Reload Obsidian (Ctrl+R or Cmd+R) to see changes
Note: You can create custom deploy scripts if needed. The package.json references deploy.sh and dev-deploy.sh scripts that are not currently in the repository.
Testing in Obsidian
- Build the plugin:
npm run build - Copy built files to your vault's plugin directory (see Manual Deployment section above)
- Open Obsidian
- Go to Settings → Community plugins
- Enable "Charted Roots"
- The plugin commands will be available in the Command Palette (Ctrl/Cmd+P):
- "Charted Roots: Open Control Center"
- "Charted Roots: Generate Tree for Current Note"
- "Charted Roots: Re-Layout Current Canvas"
- "Charted Roots: Create Person Note"
Reloading After Changes
After copying changes to your vault, reload Obsidian:
- Quick reload: Press Ctrl+R (Windows/Linux) or Cmd+R (Mac)
- Full reload: Settings → Community plugins → Toggle plugin off/on
Hot Reload (Advanced)
For instant plugin reloading without restarting Obsidian:
- Install the Hot Reload plugin
- It will automatically detect changes to
main.jsin your vault's plugin directory - After running
npm run build, copy the files to your vault - Hot Reload will automatically reload the plugin
Debugging
Logging System
The plugin includes a structured logging system with persistent configuration:
Log Levels:
debug: Most verbose, shows all operationsinfo: Important events and state changeswarn: Warnings and non-critical issueserror: Errors and failuresoff: Disable logging
Configuration:
- Open Settings → Charted Roots
- Navigate to "Logging" section
- Select desired log level from dropdown
- Changes apply immediately and persist across Obsidian restarts
Default Setting: Debug mode is enabled by default for development visibility.
Exporting Logs: The logging system captures structured log entries that can be exported via the Control Center's Status tab for debugging complex issues.
Console Logs
Open the Developer Console in Obsidian:
- Windows/Linux: Ctrl+Shift+I
- Mac: Cmd+Option+I
Look for:
- "Loading Charted Roots plugin" when the plugin loads
- Structured log entries with component names and operation contexts
- Any error messages or stack traces
TypeScript Errors
The esbuild build does not type-check. Run the standalone type-checker:
npm run type-check
This runs tsc -noEmit and reports any TypeScript errors. It is clean (zero errors) and gated in CI as of #704.
Version Management
When ready to release a new version:
- Update the version in
package.json - Run the version bump script:
npm version patch # or minor, or major
This will automatically update manifest.json and versions.json.
Related Documentation
- Coding Standards - TypeScript and CSS style guidelines
- Project Structure - Directory layout and component map
- Implementation Details - Technical implementation notes
- Design Decisions - Architecture decision records