@canonical/summon 0.1.0

package/generators/example/webapp/templates/App.tsx.ejs

@@ -0,0 +1,86 @@
+// Generated by summon webapp
+// Main App component for <%= name %>
+
+import React from 'react';
+<% if (hasState) { -%>
+import { useAppStore } from './state';
+<% } -%>
+<% if (hasApi) { -%>
+import { api } from './api';
+<% } -%>
+<% if (hasLogging) { -%>
+import { logger } from './logging';
+<% } -%>
+
+export const App: React.FC = () => {
+<% if (hasState) { -%>
+  const { count, increment, decrement } = useAppStore();
+<% } -%>
+<% if (hasLogging) { -%>
+
+  React.useEffect(() => {
+    logger.info('App mounted');
+    return () => logger.info('App unmounted');
+  }, []);
+<% } -%>
+
+  return (
+    <div className="<%= styling === 'tailwind' ? 'min-h-screen bg-gray-100 p-8' : 'app-container' %>">
+      <header className="<%= styling === 'tailwind' ? 'text-center mb-8' : 'app-header' %>">
+        <h1 className="<%= styling === 'tailwind' ? 'text-4xl font-bold text-gray-800' : '' %>">
+          Welcome to <%= pascalCase(name) %>
+        </h1>
+        <p className="<%= styling === 'tailwind' ? 'text-gray-600 mt-2' : '' %>">
+          <%= description %>
+        </p>
+      </header>
+
+      <main className="<%= styling === 'tailwind' ? 'max-w-2xl mx-auto' : 'app-main' %>">
+<% if (hasState) { -%>
+        <section className="<%= styling === 'tailwind' ? 'bg-white rounded-lg shadow p-6 mb-6' : 'card' %>">
+          <h2 className="<%= styling === 'tailwind' ? 'text-xl font-semibold mb-4' : '' %>">Counter Demo</h2>
+          <div className="<%= styling === 'tailwind' ? 'flex items-center gap-4' : 'counter' %>">
+            <button
+              onClick={decrement}
+              className="<%= styling === 'tailwind' ? 'px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600' : 'btn btn-danger' %>"
+            >
+              -
+            </button>
+            <span className="<%= styling === 'tailwind' ? 'text-2xl font-mono' : 'count' %>">{count}</span>
+            <button
+              onClick={increment}
+              className="<%= styling === 'tailwind' ? 'px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600' : 'btn btn-success' %>"
+            >
+              +
+            </button>
+          </div>
+        </section>
+<% } -%>
+
+        <section className="<%= styling === 'tailwind' ? 'bg-white rounded-lg shadow p-6' : 'card' %>">
+          <h2 className="<%= styling === 'tailwind' ? 'text-xl font-semibold mb-4' : '' %>">Features</h2>
+          <ul className="<%= styling === 'tailwind' ? 'list-disc list-inside space-y-2' : 'feature-list' %>">
+            <li>Framework: <%= framework %></li>
+            <li>Styling: <%= styling %></li>
+<% if (hasRouter) { -%>
+            <li>Routing enabled</li>
+<% } -%>
+<% if (hasState) { -%>
+            <li>State management with Zustand</li>
+<% } -%>
+<% if (hasApi) { -%>
+            <li>API client configured</li>
+<% } -%>
+<% if (hasLogging) { -%>
+            <li>Logging enabled</li>
+<% } -%>
+          </ul>
+        </section>
+      </main>
+
+      <footer className="<%= styling === 'tailwind' ? 'text-center mt-8 text-gray-500' : 'app-footer' %>">
+        <p>Generated by Summon</p>
+      </footer>
+    </div>
+  );
+};

package/generators/example/webapp/templates/README.md.ejs

@@ -0,0 +1,154 @@
+# <%= pascalCase(name) %>
+
+<%= description %>
+
+## Getting Started
+
+```bash
+# Install dependencies
+bun install
+
+# Start development server
+bun run dev
+<% if (withTests) { -%>
+
+# Run tests
+bun run test
+<% } -%>
+
+# Build for production
+bun run build
+```
+
+## Stack
+
+- **Framework**: <%= framework === 'react' ? 'React 18' : 'Vanilla TypeScript' %>
+- **Styling**: <%= styling === 'tailwind' ? 'Tailwind CSS' : styling === 'css' ? 'Plain CSS' : 'None' %>
+<% if (features.length > 0) { -%>
+- **Features**:
+<% features.forEach(function(feature) { -%>
+  - <%= feature === 'router' ? 'Client-side routing' : feature === 'state' ? 'State management (Zustand)' : feature === 'api' ? 'API client (ky)' : feature === 'logging' ? 'Logging utilities' : feature %>
+<% }); -%>
+<% } -%>
+<% if (withTests) { -%>
+- **Testing**: Vitest
+<% } -%>
+
+## Project Structure
+
+```
+<%= name %>/
+<%= '├── ' %>src/
+<%= '│   ├── ' %>main.<%= framework === 'react' ? 'tsx' : 'ts' %>      # Entry point
+<%= '│   ├── ' %><%= framework === 'react' ? 'App.tsx' : 'app.ts' %>        # Main component/module
+<% if (styling !== 'none') { -%>
+<%= '│   ├── ' %>styles.css      # Global styles
+<% } -%>
+<% features.forEach(function(feature) { -%>
+<%= '│   ├── ' %><%= feature %>.ts       # <%= feature.charAt(0).toUpperCase() + feature.slice(1) %> module
+<% }); -%>
+<%= '│   └── ' %>components/     # Reusable components
+<%= '├── ' %>public/             # Static assets
+<% if (withTests) { -%>
+<%= '├── ' %>tests/              # Test files
+<% } -%>
+<% if (withDocs) { -%>
+<%= '├── ' %>docs/               # Documentation
+<% } -%>
+<%= '├── ' %>package.json
+<%= '└── ' %>tsconfig.json
+```
+
+## Development
+
+<% if (framework === 'react') { -%>
+This project uses Vite for fast development with HMR (Hot Module Replacement).
+
+```bash
+bun run dev
+```
+
+Open http://localhost:5173 to view the app.
+<% } else { -%>
+This project uses a simple development setup with live-server.
+
+```bash
+bun run dev
+```
+
+Open http://localhost:8080 to view the app.
+<% } -%>
+
+<% if (hasState) { -%>
+## State Management
+
+<% if (framework === 'react') { -%>
+State is managed using [Zustand](https://github.com/pmndrs/zustand). Access the store in any component:
+
+```tsx
+import { useAppStore } from './state';
+
+function MyComponent() {
+  const { count, increment } = useAppStore();
+  return <button onClick={increment}>{count}</button>;
+}
+```
+<% } else { -%>
+State is managed using a simple pub/sub store pattern:
+
+```ts
+import { appStore } from './state';
+
+// Get current state
+const { count } = appStore.getState();
+
+// Update state
+appStore.setState({ count: count + 1 });
+
+// Subscribe to changes
+appStore.subscribe((state) => {
+  console.log('State changed:', state);
+});
+```
+<% } -%>
+
+<% } -%>
+<% if (hasApi) { -%>
+## API Client
+
+The API client is configured in `src/api.ts` using [ky](https://github.com/sindresorhus/ky):
+
+```ts
+import { get, post } from './api';
+
+// GET request
+const users = await get<User[]>('users');
+
+// POST request
+const newUser = await post<User>('users', { name: 'John' });
+```
+
+Configure the API base URL via the `VITE_API_URL` environment variable.
+
+<% } -%>
+<% if (hasLogging) { -%>
+## Logging
+
+Use the logger for debugging and monitoring:
+
+```ts
+import { logger } from './logging';
+
+logger.debug('Debug message');
+logger.info('Info message');
+logger.warn('Warning message');
+logger.error('Error message');
+
+// View log history
+const history = logger.getHistory();
+```
+
+<% } -%>
+---
+
+Generated by [Summon](https://github.com/canonical/pragma) - A Monadic Task-Centric Code Generator Framework

package/generators/example/webapp/templates/app.test.ts.ejs

@@ -0,0 +1,63 @@
+// Generated by summon webapp
+// Tests for <%= name %>
+
+import { describe, it, expect } from 'vitest';
+
+describe('<%= pascalCase(name) %>', () => {
+  it('should pass a basic test', () => {
+    expect(true).toBe(true);
+  });
+
+<% if (hasState && framework === 'react') { -%>
+  describe('App Store', () => {
+    it('should initialize with count of 0', async () => {
+      const { useAppStore } = await import('../src/state');
+      const { count } = useAppStore.getState();
+      expect(count).toBe(0);
+    });
+
+    it('should increment count', async () => {
+      const { useAppStore } = await import('../src/state');
+      const { increment } = useAppStore.getState();
+      increment();
+      expect(useAppStore.getState().count).toBe(1);
+    });
+
+    it('should decrement count', async () => {
+      const { useAppStore } = await import('../src/state');
+      const store = useAppStore.getState();
+      store.reset();
+      store.decrement();
+      expect(useAppStore.getState().count).toBe(-1);
+    });
+  });
+<% } -%>
+
+<% if (hasApi) { -%>
+  describe('API Client', () => {
+    it('should be configured with base URL', async () => {
+      const { api } = await import('../src/api');
+      expect(api).toBeDefined();
+    });
+  });
+<% } -%>
+
+<% if (hasLogging) { -%>
+  describe('Logger', () => {
+    it('should log messages', async () => {
+      const { logger } = await import('../src/logging');
+      logger.info('Test message');
+      const history = logger.getHistory();
+      expect(history.length).toBeGreaterThan(0);
+      expect(history[history.length - 1].message).toBe('Test message');
+    });
+
+    it('should clear history', async () => {
+      const { logger } = await import('../src/logging');
+      logger.info('Another message');
+      logger.clearHistory();
+      expect(logger.getHistory().length).toBe(0);
+    });
+  });
+<% } -%>
+});

package/generators/example/webapp/templates/app.ts.ejs

@@ -0,0 +1,132 @@
+// Generated by summon webapp
+// Main application module for <%= name %>
+
+<% if (hasLogging) { -%>
+import { logger } from './logging';
+<% } -%>
+<% if (hasApi) { -%>
+import { api } from './api';
+<% } -%>
+
+interface AppState {
+  count: number;
+}
+
+const state: AppState = {
+  count: 0,
+};
+
+/**
+ * Initialize the application.
+ */
+export function init(container: HTMLElement): void {
+<% if (hasLogging) { -%>
+  logger.info('Initializing <%= name %>...');
+<% } -%>
+
+  render(container);
+  setupEventListeners(container);
+
+<% if (hasLogging) { -%>
+  logger.info('<%= name %> initialized successfully');
+<% } -%>
+}
+
+/**
+ * Render the application UI.
+ */
+function render(container: HTMLElement): void {
+  container.innerHTML = `
+    <div class="<%= styling === 'tailwind' ? 'min-h-screen bg-gray-100 p-8' : 'app-container' %>">
+      <header class="<%= styling === 'tailwind' ? 'text-center mb-8' : 'app-header' %>">
+        <h1 class="<%= styling === 'tailwind' ? 'text-4xl font-bold text-gray-800' : '' %>">
+          Welcome to <%= name %>
+        </h1>
+        <p class="<%= styling === 'tailwind' ? 'text-gray-600 mt-2' : '' %>">
+          <%= description %>
+        </p>
+      </header>
+
+      <main class="<%= styling === 'tailwind' ? 'max-w-2xl mx-auto' : 'app-main' %>">
+<% if (hasState) { -%>
+        <section class="<%= styling === 'tailwind' ? 'bg-white rounded-lg shadow p-6 mb-6' : 'card' %>">
+          <h2 class="<%= styling === 'tailwind' ? 'text-xl font-semibold mb-4' : '' %>">Counter Demo</h2>
+          <div class="<%= styling === 'tailwind' ? 'flex items-center gap-4' : 'counter' %>">
+            <button
+              id="decrement"
+              class="<%= styling === 'tailwind' ? 'px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600' : 'btn btn-danger' %>"
+            >
+              -
+            </button>
+            <span id="count" class="<%= styling === 'tailwind' ? 'text-2xl font-mono' : 'count' %>">${state.count}</span>
+            <button
+              id="increment"
+              class="<%= styling === 'tailwind' ? 'px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600' : 'btn btn-success' %>"
+            >
+              +
+            </button>
+          </div>
+        </section>
+<% } -%>
+
+        <section class="<%= styling === 'tailwind' ? 'bg-white rounded-lg shadow p-6' : 'card' %>">
+          <h2 class="<%= styling === 'tailwind' ? 'text-xl font-semibold mb-4' : '' %>">Features</h2>
+          <ul class="<%= styling === 'tailwind' ? 'list-disc list-inside space-y-2' : 'feature-list' %>">
+            <li>Framework: <%= framework %></li>
+            <li>Styling: <%= styling %></li>
+<% if (hasRouter) { -%>
+            <li>Routing enabled</li>
+<% } -%>
+<% if (hasState) { -%>
+            <li>State management</li>
+<% } -%>
+<% if (hasApi) { -%>
+            <li>API client configured</li>
+<% } -%>
+<% if (hasLogging) { -%>
+            <li>Logging enabled</li>
+<% } -%>
+          </ul>
+        </section>
+      </main>
+
+      <footer class="<%= styling === 'tailwind' ? 'text-center mt-8 text-gray-500' : 'app-footer' %>">
+        <p>Generated by Summon</p>
+      </footer>
+    </div>
+  `;
+}
+
+<% if (hasState) { -%>
+/**
+ * Setup event listeners for interactive elements.
+ */
+function setupEventListeners(container: HTMLElement): void {
+  const incrementBtn = container.querySelector('#increment');
+  const decrementBtn = container.querySelector('#decrement');
+  const countDisplay = container.querySelector('#count');
+
+  incrementBtn?.addEventListener('click', () => {
+    state.count++;
+    if (countDisplay) countDisplay.textContent = String(state.count);
+<% if (hasLogging) { -%>
+    logger.debug(`Count incremented to ${state.count}`);
+<% } -%>
+  });
+
+  decrementBtn?.addEventListener('click', () => {
+    state.count--;
+    if (countDisplay) countDisplay.textContent = String(state.count);
+<% if (hasLogging) { -%>
+    logger.debug(`Count decremented to ${state.count}`);
+<% } -%>
+  });
+}
+<% } else { -%>
+/**
+ * Setup event listeners for interactive elements.
+ */
+function setupEventListeners(_container: HTMLElement): void {
+  // Add your event listeners here
+}
+<% } -%>

package/generators/example/webapp/templates/feature.ts.ejs

@@ -0,0 +1,264 @@
+// Generated by summon webapp
+// Feature module: <%= featureName %>
+
+<% if (featureName === 'router') { -%>
+/**
+ * Router configuration for <%= name %>
+ */
+<% if (framework === 'react') { -%>
+import { Routes, Route } from 'react-router-dom';
+
+export const AppRoutes = () => (
+  <Routes>
+    <Route path="/" element={<div>Home</div>} />
+    <Route path="/about" element={<div>About</div>} />
+    <Route path="*" element={<div>Not Found</div>} />
+  </Routes>
+);
+<% } else { -%>
+type RouteHandler = (params: Record<string, string>) => void;
+
+interface Route {
+  path: string;
+  handler: RouteHandler;
+}
+
+const routes: Route[] = [];
+
+export function addRoute(path: string, handler: RouteHandler): void {
+  routes.push({ path, handler });
+}
+
+export function navigate(path: string): void {
+  const route = routes.find((r) => matchPath(r.path, path));
+  if (route) {
+    const params = extractParams(route.path, path);
+    route.handler(params);
+    history.pushState(null, '', path);
+  }
+}
+
+function matchPath(pattern: string, path: string): boolean {
+  const regex = new RegExp('^' + pattern.replace(/:\w+/g, '([^/]+)') + '$');
+  return regex.test(path);
+}
+
+function extractParams(pattern: string, path: string): Record<string, string> {
+  const params: Record<string, string> = {};
+  const patternParts = pattern.split('/');
+  const pathParts = path.split('/');
+
+  patternParts.forEach((part, i) => {
+    if (part.startsWith(':')) {
+      params[part.slice(1)] = pathParts[i];
+    }
+  });
+
+  return params;
+}
+
+// Listen for popstate events
+window.addEventListener('popstate', () => {
+  navigate(location.pathname);
+});
+<% } -%>
+<% } else if (featureName === 'state') { -%>
+/**
+ * State management for <%= name %>
+ */
+<% if (framework === 'react') { -%>
+import { create } from 'zustand';
+
+interface AppState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+}
+
+export const useAppStore = create<AppState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));
+<% } else { -%>
+type Listener<T> = (state: T) => void;
+
+export function createStore<T extends object>(initialState: T) {
+  let state = { ...initialState };
+  const listeners = new Set<Listener<T>>();
+
+  return {
+    getState: () => state,
+    setState: (partial: Partial<T>) => {
+      state = { ...state, ...partial };
+      listeners.forEach((listener) => listener(state));
+    },
+    subscribe: (listener: Listener<T>) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+// Application store
+export const appStore = createStore({
+  count: 0,
+});
+<% } -%>
+<% } else if (featureName === 'api') { -%>
+/**
+ * API client for <%= name %>
+ */
+import ky from 'ky';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'https://api.example.com';
+
+export const api = ky.create({
+  prefixUrl: API_BASE_URL,
+  timeout: 30000,
+  retry: {
+    limit: 2,
+    methods: ['get'],
+  },
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        // Add auth token if available
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+          request.headers.set('Authorization', `Bearer ${token}`);
+        }
+      },
+    ],
+    afterResponse: [
+      async (request, options, response) => {
+        if (!response.ok) {
+          console.error(`API Error: ${response.status} ${response.statusText}`);
+        }
+        return response;
+      },
+    ],
+  },
+});
+
+// Typed API helpers
+export async function get<T>(endpoint: string): Promise<T> {
+  return api.get(endpoint).json<T>();
+}
+
+export async function post<T, D = unknown>(endpoint: string, data: D): Promise<T> {
+  return api.post(endpoint, { json: data }).json<T>();
+}
+
+export async function put<T, D = unknown>(endpoint: string, data: D): Promise<T> {
+  return api.put(endpoint, { json: data }).json<T>();
+}
+
+export async function del<T>(endpoint: string): Promise<T> {
+  return api.delete(endpoint).json<T>();
+}
+<% } else if (featureName === 'logging') { -%>
+/**
+ * Logging utilities for <%= name %>
+ */
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+interface LogEntry {
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+  context?: Record<string, unknown>;
+}
+
+const LOG_LEVELS: Record<LogLevel, number> = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+};
+
+class Logger {
+  private minLevel: LogLevel = 'debug';
+  private history: LogEntry[] = [];
+  private maxHistory = 1000;
+
+  setLevel(level: LogLevel): void {
+    this.minLevel = level;
+  }
+
+  private log(level: LogLevel, message: string, context?: Record<string, unknown>): void {
+    if (LOG_LEVELS[level] < LOG_LEVELS[this.minLevel]) {
+      return;
+    }
+
+    const entry: LogEntry = {
+      level,
+      message,
+      timestamp: new Date(),
+      context,
+    };
+
+    this.history.push(entry);
+    if (this.history.length > this.maxHistory) {
+      this.history.shift();
+    }
+
+    const styles: Record<LogLevel, string> = {
+      debug: 'color: gray',
+      info: 'color: blue',
+      warn: 'color: orange',
+      error: 'color: red',
+    };
+
+    console[level === 'debug' ? 'log' : level](
+      `%c[${level.toUpperCase()}] ${message}`,
+      styles[level],
+      context || ''
+    );
+  }
+
+  debug(message: string, context?: Record<string, unknown>): void {
+    this.log('debug', message, context);
+  }
+
+  info(message: string, context?: Record<string, unknown>): void {
+    this.log('info', message, context);
+  }
+
+  warn(message: string, context?: Record<string, unknown>): void {
+    this.log('warn', message, context);
+  }
+
+  error(message: string, context?: Record<string, unknown>): void {
+    this.log('error', message, context);
+  }
+
+  getHistory(): LogEntry[] {
+    return [...this.history];
+  }
+
+  clearHistory(): void {
+    this.history = [];
+  }
+}
+
+export const logger = new Logger();
+<% } else { -%>
+/**
+ * Feature module: <%= featureName %>
+ *
+ * This is a placeholder for the <%= featureName %> feature.
+ * Implement your feature logic here.
+ */
+
+export function init<%= pascalCase(featureName) %>(): void {
+  console.log('<%= featureName %> feature initialized');
+}
+
+export const <%= camelCase(featureName) %> = {
+  init: init<%= pascalCase(featureName) %>,
+};
+<% } -%>