Your First Lokus Plugin

Lokus Core
    ↓
Plugin API (Stable interface)
    ↓
Your Plugin
    ↓
User's Workspace

# Check Node.js version (need 18+)
node --version
 
# Check npm version
npm --version
 
# Check Git
git --version

npm install -g lokus-plugin-cli

lokus-plugin --version

# Install extensions via CLI
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension lokus.plugin-helper

# Navigate to your plugin development folder
cd ~/LokusPlugins  # or your custom path
 
# Create plugin
lokus-plugin create word-count-stats
 
# Follow the prompts:
# Plugin name: Word Count Stats
# Description: Display detailed word count and reading time statistics
# Author: Your Name
# License: MIT
# Template: Basic UI Plugin

word-count-stats/
├── src/
│   ├── main.ts           # Plugin entry point
│   ├── settings.ts       # Plugin settings
│   └── view.ts           # UI components
├── styles/
│   └── styles.css        # Plugin styles
├── manifest.json         # Plugin metadata
├── package.json          # Dependencies
├── tsconfig.json         # TypeScript config
├── .eslintrc.js          # Linting rules
└── README.md             # Documentation

{
  "id": "word-count-stats",
  "name": "Word Count Stats",
  "version": "1.0.0",
  "minLokusVersion": "2.0.0",
  "description": "Display detailed word count and reading time statistics",
  "author": "Your Name",
  "authorUrl": "https://yourwebsite.com",
  "isDesktopOnly": false,
  "main": "main.js"
}

cd word-count-stats
npm install

import { Plugin, MarkdownView } from '@lokus/api';
import { WordCountStatsView, VIEW_TYPE_WORD_COUNT } from './view';
import { WordCountSettingsTab } from './settings';
 
export default class WordCountStatsPlugin extends Plugin {
  async onload() {
    console.log('Loading Word Count Stats plugin');
 
    // Register the stats view
    this.registerView(
      VIEW_TYPE_WORD_COUNT,
      (leaf) => new WordCountStatsView(leaf, this)
    );
 
    // Add command to open stats panel
    this.addCommand({
      id: 'open-word-count-stats',
      name: 'Open Word Count Statistics',
      callback: () => {
        this.activateView();
      }
    });
 
    // Add ribbon icon (left sidebar)
    this.addRibbonIcon('bar-chart', 'Word Count Stats', () => {
      this.activateView();
    });
 
    // Add status bar item
    this.addStatusBarItem().setText('Ready');
 
    // Register event: update on editor change
    this.registerEvent(
      this.app.workspace.on('editor-change', () => {
        this.updateStatusBar();
      })
    );
 
    // Register event: update on active leaf change
    this.registerEvent(
      this.app.workspace.on('active-leaf-change', () => {
        this.updateStatusBar();
      })
    );
 
    // Add settings tab
    this.addSettingTab(new WordCountSettingsTab(this.app, this));
 
    // Initial update
    this.updateStatusBar();
  }
 
  async activateView() {
    // Check if view is already open
    const existing = this.app.workspace.getLeavesOfType(VIEW_TYPE_WORD_COUNT);
 
    if (existing.length > 0) {
      // If exists, reveal it
      this.app.workspace.revealLeaf(existing[0]);
      return;
    }
 
    // Create new view in right sidebar
    const leaf = this.app.workspace.getRightLeaf(false);
    await leaf.setViewState({
      type: VIEW_TYPE_WORD_COUNT,
      active: true
    });
 
    this.app.workspace.revealLeaf(leaf);
  }
 
  updateStatusBar() {
    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
 
    if (!view) {
      this.statusBarItem?.setText('No note open');
      return;
    }
 
    const editor = view.editor;
    const content = editor.getValue();
    const stats = this.calculateStats(content);
 
    this.statusBarItem?.setText(
      `${stats.words} words, ${stats.chars} chars`
    );
  }
 
  calculateStats(text: string) {
    // Remove markdown syntax for accurate counts
    const plainText = this.stripMarkdown(text);
 
    const words = plainText.trim().split(/\s+/).filter(w => w.length > 0).length;
    const chars = plainText.length;
    const charsNoSpaces = plainText.replace(/\s/g, '').length;
    const sentences = (plainText.match(/[.!?]+/g) || []).length;
    const paragraphs = text.split(/\n\n+/).filter(p => p.trim().length > 0).length;
    const readingTime = Math.ceil(words / 200); // 200 words per minute
 
    return {
      words,
      chars,
      charsNoSpaces,
      sentences,
      paragraphs,
      readingTime
    };
  }
 
  stripMarkdown(text: string): string {
    return text
      // Remove code blocks
      .replace(/```[\s\S]*?```/g, '')
      // Remove inline code
      .replace(/`[^`]+`/g, '')
      // Remove links but keep text
      .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
      // Remove images
      .replace(/!\[([^\]]*)\]\([^\)]+\)/g, '')
      // Remove headers
      .replace(/^#+\s+/gm, '')
      // Remove bold/italic
      .replace(/\*\*([^*]+)\*\*/g, '$1')
      .replace(/\*([^*]+)\*/g, '$1')
      .replace(/__([^_]+)__/g, '$1')
      .replace(/_([^_]+)_/g, '$1')
      // Remove other markdown syntax
      .replace(/^[*\-+]\s+/gm, '')
      .replace(/^\d+\.\s+/gm, '');
  }
 
  onunload() {
    console.log('Unloading Word Count Stats plugin');
  }
}

import { ItemView, WorkspaceLeaf, MarkdownView } from '@lokus/api';
import type WordCountStatsPlugin from './main';
 
export const VIEW_TYPE_WORD_COUNT = 'word-count-stats-view';
 
export class WordCountStatsView extends ItemView {
  plugin: WordCountStatsPlugin;
  private updateInterval: number;
 
  constructor(leaf: WorkspaceLeaf, plugin: WordCountStatsPlugin) {
    super(leaf);
    this.plugin = plugin;
  }
 
  getViewType(): string {
    return VIEW_TYPE_WORD_COUNT;
  }
 
  getDisplayText(): string {
    return 'Word Count Stats';
  }
 
  getIcon(): string {
    return 'bar-chart';
  }
 
  async onOpen() {
    // Set up auto-update
    this.updateInterval = window.setInterval(() => {
      this.updateStats();
    }, 1000);
 
    // Initial render
    this.updateStats();
  }
 
  async onClose() {
    // Clear interval
    window.clearInterval(this.updateInterval);
  }
 
  updateStats() {
    const container = this.containerEl.children[1];
    container.empty();
 
    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
 
    if (!view) {
      container.createEl('div', {
        text: 'No note open',
        cls: 'word-count-empty'
      });
      return;
    }
 
    const editor = view.editor;
    const content = editor.getValue();
    const stats = this.plugin.calculateStats(content);
 
    // Create stats display
    const statsContainer = container.createDiv({ cls: 'word-count-stats' });
 
    // Title
    statsContainer.createEl('h3', { text: 'Document Statistics' });
 
    // Stats grid
    const grid = statsContainer.createDiv({ cls: 'stats-grid' });
 
    this.addStatItem(grid, 'Words', stats.words.toLocaleString());
    this.addStatItem(grid, 'Characters', stats.chars.toLocaleString());
    this.addStatItem(grid, 'Characters (no spaces)', stats.charsNoSpaces.toLocaleString());
    this.addStatItem(grid, 'Sentences', stats.sentences.toLocaleString());
    this.addStatItem(grid, 'Paragraphs', stats.paragraphs.toLocaleString());
    this.addStatItem(
      grid,
      'Reading Time',
      `${stats.readingTime} min`,
      'Based on 200 words/min'
    );
 
    // Selection stats (if text is selected)
    const selection = editor.getSelection();
    if (selection) {
      const selectionStats = this.plugin.calculateStats(selection);
 
      statsContainer.createEl('h4', { text: 'Selection', cls: 'stats-section-title' });
      const selGrid = statsContainer.createDiv({ cls: 'stats-grid' });
 
      this.addStatItem(selGrid, 'Words', selectionStats.words.toLocaleString());
      this.addStatItem(selGrid, 'Characters', selectionStats.chars.toLocaleString());
    }
 
    // Additional insights
    if (stats.words > 0) {
      statsContainer.createEl('h4', { text: 'Insights', cls: 'stats-section-title' });
      const insights = statsContainer.createDiv({ cls: 'insights' });
 
      const avgWordLength = (stats.charsNoSpaces / stats.words).toFixed(1);
      const avgSentenceLength = stats.sentences > 0
        ? (stats.words / stats.sentences).toFixed(1)
        : '0';
 
      insights.createEl('p', {
        text: `Average word length: ${avgWordLength} characters`
      });
      insights.createEl('p', {
        text: `Average sentence length: ${avgSentenceLength} words`
      });
 
      // Readability estimate (simplified)
      const readability = this.estimateReadability(
        parseFloat(avgSentenceLength),
        parseFloat(avgWordLength)
      );
      insights.createEl('p', { text: `Readability: ${readability}` });
    }
  }
 
  private addStatItem(
    container: HTMLElement,
    label: string,
    value: string,
    subtitle?: string
  ) {
    const item = container.createDiv({ cls: 'stat-item' });
    item.createEl('div', { text: label, cls: 'stat-label' });
    item.createEl('div', { text: value, cls: 'stat-value' });
    if (subtitle) {
      item.createEl('div', { text: subtitle, cls: 'stat-subtitle' });
    }
  }
 
  private estimateReadability(avgSentenceLength: number, avgWordLength: number): string {
    // Simplified readability estimate
    const score = avgSentenceLength + avgWordLength;
 
    if (score < 15) return 'Very Easy';
    if (score < 20) return 'Easy';
    if (score < 25) return 'Moderate';
    if (score < 30) return 'Difficult';
    return 'Very Difficult';
  }
}

/* Word Count Stats Styles */
 
.word-count-stats {
  padding: 16px;
}
 
.word-count-stats h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}
 
.word-count-stats h4 {
  margin: 20px 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}
 
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
 
.stat-item {
  background: var(--background-secondary);
  padding: 12px;
  border-radius: 6px;
  text-align: center;
}
 
.stat-label {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}
 
.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-accent);
}
 
.stat-subtitle {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
}
 
.insights p {
  margin: 8px 0;
  font-size: 13px;
}
 
.word-count-empty {
  padding: 16px;
  text-align: center;
  opacity: 0.6;
}

import { App, PluginSettingTab, Setting } from '@lokus/api';
import type WordCountStatsPlugin from './main';
 
export interface WordCountSettings {
  wordsPerMinute: number;
  showInStatusBar: boolean;
  countCodeBlocks: boolean;
  updateInterval: number;
}
 
export const DEFAULT_SETTINGS: WordCountSettings = {
  wordsPerMinute: 200,
  showInStatusBar: true,
  countCodeBlocks: false,
  updateInterval: 1000
};
 
export class WordCountSettingsTab extends PluginSettingTab {
  plugin: WordCountStatsPlugin;
 
  constructor(app: App, plugin: WordCountStatsPlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }
 
  display(): void {
    const { containerEl } = this;
    containerEl.empty();
 
    containerEl.createEl('h2', { text: 'Word Count Stats Settings' });
 
    // Words per minute setting
    new Setting(containerEl)
      .setName('Reading speed')
      .setDesc('Average words per minute for reading time calculation')
      .addText(text => text
        .setPlaceholder('200')
        .setValue(String(this.plugin.settings.wordsPerMinute))
        .onChange(async (value) => {
          const num = parseInt(value);
          if (!isNaN(num) && num > 0) {
            this.plugin.settings.wordsPerMinute = num;
            await this.plugin.saveSettings();
          }
        }));
 
    // Status bar setting
    new Setting(containerEl)
      .setName('Show in status bar')
      .setDesc('Display word count in the status bar')
      .addToggle(toggle => toggle
        .setValue(this.plugin.settings.showInStatusBar)
        .onChange(async (value) => {
          this.plugin.settings.showInStatusBar = value;
          await this.plugin.saveSettings();
          this.plugin.updateStatusBar();
        }));
 
    // Count code blocks setting
    new Setting(containerEl)
      .setName('Count code blocks')
      .setDesc('Include code blocks in word count')
      .addToggle(toggle => toggle
        .setValue(this.plugin.settings.countCodeBlocks)
        .onChange(async (value) => {
          this.plugin.settings.countCodeBlocks = value;
          await this.plugin.saveSettings();
        }));
 
    // Update interval setting
    new Setting(containerEl)
      .setName('Update interval')
      .setDesc('How often to update stats (in milliseconds)')
      .addText(text => text
        .setPlaceholder('1000')
        .setValue(String(this.plugin.settings.updateInterval))
        .onChange(async (value) => {
          const num = parseInt(value);
          if (!isNaN(num) && num >= 100) {
            this.plugin.settings.updateInterval = num;
            await this.plugin.saveSettings();
          }
        }));
  }
}

// Add to imports
import { DEFAULT_SETTINGS, WordCountSettings } from './settings';
 
// Add to plugin class
export default class WordCountStatsPlugin extends Plugin {
  settings: WordCountSettings;
 
  async onload() {
    // Load settings
    await this.loadSettings();
 
    // ... rest of onload code
  }
 
  async loadSettings() {
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
  }
 
  async saveSettings() {
    await this.saveData(this.settings);
  }
 
  // Use settings in calculations
  calculateStats(text: string) {
    // ... existing code
    const readingTime = Math.ceil(words / this.settings.wordsPerMinute);
    // ... rest of code
  }
}

npm run build

npm run dev

# Check for build errors
npm run build
 
# Check console for errors (Cmd/Ctrl + Shift + I)

// In main.ts
this.addCommand({
  id: 'export-stats-csv',
  name: 'Export Stats to CSV',
  callback: async () => {
    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
    if (!view) return;
 
    const content = view.editor.getValue();
    const stats = this.calculateStats(content);
    const noteName = view.file?.basename || 'Unknown';
 
    const csv = [
      'Note,Words,Characters,Sentences,Paragraphs,Reading Time',
      `"${noteName}",${stats.words},${stats.chars},${stats.sentences},${stats.paragraphs},${stats.readingTime}`
    ].join('\n');
 
    // Save to file
    const folder = this.app.vault.getAbstractFileByPath('Stats');
    if (!folder) {
      await this.app.vault.createFolder('Stats');
    }
 
    const filename = `Stats/stats-${Date.now()}.csv`;
    await this.app.vault.create(filename, csv);
 
    new Notice(`Stats exported to ${filename}`);
  }
});

this.addCommand({
  id: 'batch-word-count',
  name: 'Generate Word Count Report',
  callback: async () => {
    const files = this.app.vault.getMarkdownFiles();
    const results = [];
 
    for (const file of files) {
      const content = await this.app.vault.read(file);
      const stats = this.calculateStats(content);
 
      results.push({
        path: file.path,
        ...stats
      });
    }
 
    // Generate report
    const report = this.generateReport(results);
 
    // Create report note
    await this.app.vault.create(
      `Reports/word-count-report-${Date.now()}.md`,
      report
    );
  }
});
 
private generateReport(results: any[]): string {
  const totalWords = results.reduce((sum, r) => sum + r.words, 0);
  const totalChars = results.reduce((sum, r) => sum + r.chars, 0);
 
  let report = `# Word Count Report\n\n`;
  report += `**Generated:** ${new Date().toLocaleString()}\n`;
  report += `**Total Notes:** ${results.length}\n`;
  report += `**Total Words:** ${totalWords.toLocaleString()}\n`;
  report += `**Total Characters:** ${totalChars.toLocaleString()}\n\n`;
  report += `## By Note\n\n`;
  report += `| Note | Words | Characters |\n`;
  report += `|------|-------|------------|\n`;
 
  results
    .sort((a, b) => b.words - a.words)
    .forEach(r => {
      report += `| ${r.path} | ${r.words.toLocaleString()} | ${r.chars.toLocaleString()} |\n`;
    });
 
  return report;
}

const ribbonIcon = this.addRibbonIcon('bar-chart', 'Word Count Stats', (evt) => {
  const menu = new Menu();
 
  menu.addItem((item) => {
    item
      .setTitle('Open Stats Panel')
      .setIcon('bar-chart')
      .onClick(() => {
        this.activateView();
      });
  });
 
  menu.addItem((item) => {
    item
      .setTitle('Export Stats')
      .setIcon('download')
      .onClick(() => {
        this.app.commands.executeCommandById('word-count-stats:export-stats-csv');
      });
  });
 
  menu.addItem((item) => {
    item
      .setTitle('Generate Report')
      .setIcon('file-text')
      .onClick(() => {
        this.app.commands.executeCommandById('word-count-stats:batch-word-count');
      });
  });
 
  menu.showAtMouseEvent(evt);
});

# Word Count Stats
 
Display detailed word and character statistics for your notes in Lokus.
 
## Features
 
- Real-time word, character, and sentence counts
- Reading time estimation
- Selection statistics
- Readability estimates
- Export stats to CSV
- Batch processing reports
 
## Installation
 
### From Lokus Community Plugins
 
1. Open Settings → Community Plugins
2. Search for "Word Count Stats"
3. Click Install
4. Enable the plugin
 
### Manual Installation
 
1. Download latest release from GitHub
2. Extract to `.lokus/plugins/word-count-stats/`
3. Reload Lokus
4. Enable in Community Plugins
 
## Usage
 
- Click the bar chart icon in the left ribbon
- Or use Command Palette: "Open Word Count Statistics"
- Stats update automatically as you type
 
## Settings
 
Configure in Settings → Word Count Stats:
- Reading speed (words per minute)
- Status bar display
- Update interval
 
## Support
 
Issues and feature requests: [GitHub Issues](https://github.com/yourusername/lokus-word-count-stats/issues)
 
## License
 
MIT

MIT License

Copyright (c) 2024 Your Name

Permission is hereby granted, free of charge...
[Full MIT license text]

# Changelog
 
## [1.0.0] - 2024-01-15
 
### Added
- Initial release
- Word, character, sentence counts
- Reading time estimation
- Real-time updates
- Settings panel

# Initialize git (if not already)
git init
 
# Add files
git add .
 
# Commit
git commit -m "Initial commit: Word Count Stats plugin v1.0.0"
 
# Create repository on GitHub, then:
git remote add origin https://github.com/yourusername/lokus-word-count-stats.git
git branch -M main
git push -u origin main

{
  "word-count-stats": {
    "id": "word-count-stats",
    "name": "Word Count Stats",
    "author": "Your Name",
    "description": "Display detailed word count and reading time statistics",
    "repo": "yourusername/lokus-word-count-stats",
    "branch": "main"
  }
}

try {
  const content = await this.app.vault.read(file);
  // process content
} catch (error) {
  console.error('Failed to read file:', error);
  new Notice('Error reading file');
}

onunload() {
  // Clear intervals
  window.clearInterval(this.updateInterval);
 
  // Remove event listeners
  this.eventRefs.forEach(ref => ref.detach());
 
  // Clean up views
  this.app.workspace.detachLeavesOfType(VIEW_TYPE);
}

private debounce(func: Function, wait: number) {
  let timeout: number;
  return (...args: any[]) => {
    clearTimeout(timeout);
    timeout = window.setTimeout(() => func.apply(this, args), wait);
  };
}

// For heavy processing
const worker = new Worker('processor.js');
worker.postMessage({ content });
worker.onmessage = (e) => {
  const stats = e.data;
  this.updateDisplay(stats);
};

new Notice('Stats exported successfully!');

if (!view) {
  new Notice('No active note');
  return;
}
 
if (content.length === 0) {
  new Notice('Note is empty');
  return;
}

npm install @lokus/api --save-dev

# Fix TypeScript config
npx tsc --init
 
# Check tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["ES2018", "DOM"],
    "moduleResolution": "node"
  }
}

// Add debugging
console.log('Plugin loading...');
console.log('Settings:', this.settings);
console.log('API version:', this.app.version);

onunload() {
  // Clear ALL intervals
  this.intervals.forEach(id => window.clearInterval(id));
 
  // Remove ALL event listeners
  this.events.forEach(ref => this.app.workspace.offref(ref));
 
  // Clear caches
  this.cache.clear();
}