@djangocfg/ext-base 1.0.3 → 1.0.4

package/dist/index.js

@@ -0,0 +1,3 @@
+export { EXTENSION_CATEGORIES, createExtensionConfig, createExtensionError, createExtensionLogger, extensionConfig, formatErrorMessage, handleExtensionError, isExtensionError } from './chunk-UXTBBEO5.js';
+export { createExtensionAPI, getApiUrl, getSharedAuthStorage, isDevelopment, isProduction, isStaticBuild } from './chunk-VJEGYVBV.js';
+import './chunk-3RG5ZIWI.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-base",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Base utilities and common code for DjangoCFG extensions",
   "keywords": [
     "django",
@@ -64,9 +64,11 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "check": "tsc --noEmit",
+    "test": "tsx src/cli/index.ts test",
     "cli": "tsx src/cli/index.ts",
     "cli:help": "tsx src/cli/index.ts --help",
     "cli:create": "tsx src/cli/index.ts create",
+    "cli:test": "tsx src/cli/index.ts test",
     "cli:list": "tsx src/cli/index.ts list",
     "cli:info": "tsx src/cli/index.ts info"
   },

package/src/cli/index.ts

@@ -29,6 +29,7 @@ function getVersion(): string {
 // CLI Commands
 const COMMANDS = {
   create: 'Create a new DjangoCFG extension',
+  test: 'Quick create test extension (no prompts)',
   help: 'Show help',
   '--help': 'Show help',
   '-h': 'Show help',
@@ -273,13 +274,27 @@ async function createExtension() {
     return;
   }
 
-  // Add packageName to response
-  response.packageName = packageName;
+  // Create response with all fields
+  const fullResponse = {
+    ...response,
+    packageName,
+  };
 
-  // Generate directory name from package name (replace @ and / with -)
-  // @my-org/my-extension -> my-org-my-extension
-  // my-extension -> my-extension
-  const extDirName = response.packageName.replace('@', '').replace('/', '-');
+  // Check if we're in djangocfg monorepo (early detection for directory naming)
+  const isInDjangoCfgMonorepo = existsSync(join(process.cwd(), '../../pnpm-workspace.yaml')) &&
+    existsSync(join(process.cwd(), '../../packages/api/package.json'));
+
+  // Generate directory name from package name
+  // In djangocfg monorepo: @djangocfg/demo123a -> demo123a
+  // Outside monorepo: @my-org/my-extension -> my-org-my-extension
+  let extDirName: string;
+  if (isInDjangoCfgMonorepo && fullResponse.packageName.startsWith('@djangocfg/')) {
+    // In djangocfg monorepo, just use the part after the slash
+    extDirName = fullResponse.packageName.split('/')[1];
+  } else {
+    // Outside monorepo or different scope, replace @ and / with -
+    extDirName = fullResponse.packageName.replace('@', '').replace('/', '-');
+  }
 
   // Create extension in parent directory if we're in ext-base
   const isInExtBase = process.cwd().endsWith('ext-base');
@@ -288,32 +303,32 @@ async function createExtension() {
     : join(process.cwd(), 'extensions', extDirName);
 
   console.log();
-  consola.start(`Creating extension: ${chalk.cyan(response.packageName)}`);
+  consola.start(`Creating extension: ${chalk.cyan(fullResponse.packageName)}`);
 
   try {
     // Convert displayName to PascalCase for provider/component naming
     // "demo" -> "Demo"
     // "My Extension" -> "MyExtension"
     // "my-extension" -> "MyExtension"
-    const providerName = response.displayName
+    const providerName = fullResponse.displayName
       .split(/[\s-_]+/) // Split by spaces, hyphens, underscores
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
       .join('');
 
     // Extract short name from package name (last part after /)
-    const shortName = response.packageName.split('/').pop() || response.packageName.replace('@', '');
+    const shortName = fullResponse.packageName.split('/').pop() || fullResponse.packageName.replace('@', '');
 
     // Generate marketplace ID and links for README
-    const marketplaceId = response.packageName.replace('@', '').replace('/', '-');
+    const marketplaceId = fullResponse.packageName.replace('@', '').replace('/', '-');
     const marketplaceLink = `**[📦 View in Marketplace](https://hub.djangocfg.com/extensions/${marketplaceId})** • **[📖 Documentation](https://djangocfg.com)** • **[⭐ GitHub](https://github.com/markolofsen/django-cfg)**`;
 
     // Prepare replacements
     const replacements = {
       '__NAME__': shortName,
-      '__PACKAGE_NAME__': response.packageName,
-      '__DISPLAY_NAME__': response.displayName,
-      '__DESCRIPTION__': response.description,
-      '__CATEGORY__': response.category,
+      '__PACKAGE_NAME__': fullResponse.packageName,
+      '__DISPLAY_NAME__': fullResponse.displayName,
+      '__DESCRIPTION__': fullResponse.description,
+      '__CATEGORY__': fullResponse.category,
       '__PROVIDER_NAME__': providerName,
       '__MARKETPLACE_ID__': marketplaceId,
       '__MARKETPLACE_LINK__': marketplaceLink,
@@ -348,6 +363,29 @@ async function createExtension() {
     copyTemplateRecursive(templateDir, extDir, replacements);
     consola.success('Extension files created');
 
+    // Replace "latest" with "workspace:*" if in djangocfg monorepo
+    if (isInDjangoCfgMonorepo) {
+      consola.info('Detected djangocfg monorepo - using workspace:* for @djangocfg packages');
+      const pkgJsonPath = join(extDir, 'package.json');
+      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+
+      // Replace "latest" with "workspace:*" for @djangocfg packages
+      const replaceDeps = (deps?: Record<string, string>) => {
+        if (!deps) return;
+        for (const [key, value] of Object.entries(deps)) {
+          if (key.startsWith('@djangocfg/') && value === 'latest') {
+            deps[key] = 'workspace:*';
+          }
+        }
+      };
+
+      replaceDeps(pkgJson.dependencies);
+      replaceDeps(pkgJson.peerDependencies);
+      replaceDeps(pkgJson.devDependencies);
+
+      writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + '\n', 'utf-8');
+    }
+
     console.log();
 
     // Auto-install dependencies
@@ -362,6 +400,23 @@ async function createExtension() {
         consola.success('Dependencies installed successfully');
         console.log();
 
+        // Install playground dependencies
+        const playgroundDir = join(extDir, 'playground');
+        if (existsSync(playgroundDir)) {
+          consola.start(`Installing playground dependencies with ${chalk.cyan(packageManager)}...`);
+          try {
+            execSync(`${packageManager} install`, {
+              cwd: playgroundDir,
+              stdio: 'inherit',
+            });
+            consola.success('Playground dependencies installed successfully');
+            console.log();
+          } catch (error) {
+            consola.warn(`Failed to install playground dependencies. Please run: ${chalk.cyan(`cd ${extDirName}/playground && ${packageManager} install`)}`);
+            console.log();
+          }
+        }
+
         // Run type check
         consola.start('Running type check...');
         try {
@@ -406,6 +461,213 @@ async function createExtension() {
   }
 }
 
+// Create test extension (no prompts)
+async function createTestExtension() {
+  printBanner();
+
+  // Clean up old test extensions first
+  const isInExtBase = process.cwd().endsWith('ext-base');
+  const baseDir = isInExtBase
+    ? join(process.cwd(), '..')
+    : join(process.cwd(), 'extensions');
+
+  if (existsSync(baseDir)) {
+    const files = readdirSync(baseDir);
+    const testExtensions = files.filter(f => f.startsWith('test-'));
+
+    if (testExtensions.length > 0) {
+      consola.info(`Cleaning up ${testExtensions.length} old test extension(s)...`);
+      for (const testExt of testExtensions) {
+        const testPath = join(baseDir, testExt);
+        try {
+          execSync(`rm -rf "${testPath}"`, { stdio: 'ignore' });
+          consola.success(`Removed ${testExt}`);
+        } catch (error) {
+          consola.warn(`Failed to remove ${testExt}`);
+        }
+      }
+      console.log();
+    }
+  }
+
+  // Generate unique test name
+  const timestamp = Date.now().toString(36);
+  const packageName = `@djangocfg/test-${timestamp}`;
+  const displayName = `Test ${timestamp}`;
+  const description = 'Test extension created for development';
+  const category = 'utilities';
+
+  console.log(chalk.yellow('Quick Test Extension Creation'));
+  console.log();
+  console.log(chalk.cyan(`Package: ${packageName}`));
+  console.log(chalk.cyan(`Name: ${displayName}`));
+  console.log();
+
+  // Check if we're in djangocfg monorepo
+  const isInDjangoCfgMonorepo = existsSync(join(process.cwd(), '../../pnpm-workspace.yaml')) &&
+    existsSync(join(process.cwd(), '../../packages/api/package.json'));
+
+  // Generate directory name from package name
+  const extDirName = packageName.split('/')[1]; // test-xyz
+
+  // Create extension in parent directory if we're in ext-base (reuse from above)
+  const extDir = isInExtBase
+    ? join(process.cwd(), '..', extDirName)
+    : join(process.cwd(), 'extensions', extDirName);
+
+  // Check if already exists
+  if (existsSync(extDir)) {
+    consola.error(`Extension directory already exists: ${chalk.red(extDir)}`);
+    process.exit(1);
+  }
+
+  consola.start(`Creating test extension: ${chalk.cyan(packageName)}`);
+
+  try {
+    // Convert displayName to PascalCase for provider/component naming
+    const providerName = displayName
+      .split(/[\s-_]+/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('');
+
+    // Extract short name from package name
+    const shortName = packageName.split('/').pop() || packageName.replace('@', '');
+
+    // Generate marketplace ID and links for README
+    const marketplaceId = packageName.replace('@', '').replace('/', '-');
+    const marketplaceLink = `**[📦 View in Marketplace](https://hub.djangocfg.com/extensions/${marketplaceId})** • **[📖 Documentation](https://djangocfg.com)** • **[⭐ GitHub](https://github.com/markolofsen/django-cfg)**`;
+
+    // Prepare replacements
+    const replacements = {
+      '__NAME__': shortName,
+      '__PACKAGE_NAME__': packageName,
+      '__DISPLAY_NAME__': displayName,
+      '__DESCRIPTION__': description,
+      '__CATEGORY__': category,
+      '__PROVIDER_NAME__': providerName,
+      '__MARKETPLACE_ID__': marketplaceId,
+      '__MARKETPLACE_LINK__': marketplaceLink,
+    };
+
+    // Find template directory
+    const templatePaths = [
+      join(__dirname, '../templates/extension-template'),
+      join(__dirname, '../../templates/extension-template'),
+      join(process.cwd(), 'extensions', 'ext-base', 'templates', 'extension-template'),
+      join(process.cwd(), 'templates', 'extension-template'),
+    ];
+
+    let templateDir: string | null = null;
+    for (const path of templatePaths) {
+      if (existsSync(path)) {
+        templateDir = path;
+        break;
+      }
+    }
+
+    if (!templateDir) {
+      throw new Error('Extension template not found');
+    }
+
+    // Copy template with replacements
+    consola.start('Copying template files...');
+    copyTemplateRecursive(templateDir, extDir, replacements);
+    consola.success('Extension files created');
+
+    // Replace "latest" with "workspace:*" if in djangocfg monorepo
+    if (isInDjangoCfgMonorepo) {
+      consola.info('Detected djangocfg monorepo - using workspace:* for @djangocfg packages');
+      const pkgJsonPath = join(extDir, 'package.json');
+      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+
+      const replaceDeps = (deps?: Record<string, string>) => {
+        if (!deps) return;
+        for (const [key, value] of Object.entries(deps)) {
+          if (key.startsWith('@djangocfg/') && value === 'latest') {
+            deps[key] = 'workspace:*';
+          }
+        }
+      };
+
+      replaceDeps(pkgJson.dependencies);
+      replaceDeps(pkgJson.peerDependencies);
+      replaceDeps(pkgJson.devDependencies);
+
+      // Also update playground package.json
+      const playgroundPkgPath = join(extDir, 'playground', 'package.json');
+      if (existsSync(playgroundPkgPath)) {
+        const playgroundPkg = JSON.parse(readFileSync(playgroundPkgPath, 'utf-8'));
+        replaceDeps(playgroundPkg.dependencies);
+        replaceDeps(playgroundPkg.devDependencies);
+        writeFileSync(playgroundPkgPath, JSON.stringify(playgroundPkg, null, 2) + '\n', 'utf-8');
+      }
+
+      writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + '\n', 'utf-8');
+    }
+
+    console.log();
+
+    // Auto-install dependencies
+    const packageManager = detectPackageManager();
+    if (packageManager) {
+      consola.start(`Installing dependencies with ${chalk.cyan(packageManager)}...`);
+      try {
+        execSync(`${packageManager} install`, {
+          cwd: extDir,
+          stdio: 'inherit',
+        });
+        consola.success('Dependencies installed successfully');
+        console.log();
+
+        // Install playground dependencies
+        const playgroundDir = join(extDir, 'playground');
+        if (existsSync(playgroundDir)) {
+          consola.start(`Installing playground dependencies with ${chalk.cyan(packageManager)}...`);
+          try {
+            execSync(`${packageManager} install`, {
+              cwd: playgroundDir,
+              stdio: 'inherit',
+            });
+            consola.success('Playground dependencies installed successfully');
+            console.log();
+          } catch (error) {
+            consola.warn(`Failed to install playground dependencies.`);
+            console.log();
+          }
+        }
+
+        // Run type check
+        consola.start('Running type check...');
+        try {
+          execSync(`${packageManager} run check`, {
+            cwd: extDir,
+            stdio: 'inherit',
+          });
+          consola.success('Type check passed');
+        } catch (error) {
+          consola.warn('Type check failed. Please review and fix type errors.');
+        }
+      } catch (error) {
+        consola.warn(`Failed to install dependencies automatically.`);
+      }
+      console.log();
+    }
+
+    consola.success(`Test extension created: ${chalk.cyan(extDir)}`);
+    console.log();
+
+    console.log(chalk.yellow.bold('Quick commands:'));
+    console.log();
+    console.log(chalk.cyan(`  cd ${extDirName}`));
+    console.log(chalk.cyan(`  pnpm build`));
+    console.log(chalk.cyan(`  pnpm dev:playground`));
+    console.log();
+  } catch (error) {
+    consola.error('Failed to create test extension:', error);
+    process.exit(1);
+  }
+}
+
 // Main CLI
 async function main() {
   const args = process.argv.slice(2);
@@ -423,6 +685,10 @@ async function main() {
       await createExtension();
       break;
 
+    case 'test':
+      await createTestExtension();
+      break;
+
     case 'help':
     case '--help':
     case '-h':

package/src/context/ExtensionProvider.tsx

@@ -4,8 +4,10 @@
 
 'use client';
 
-import { useEffect } from 'react';
+import React, { useEffect, ReactNode } from 'react';
 import { SWRConfig } from 'swr';
+import { AuthProvider, useAuth } from '@djangocfg/api/auth';
+import { consola } from 'consola';
 import type { ExtensionContextOptions, ExtensionProviderProps } from '../types';
 import { createExtensionLogger } from '../logger';
 import { isDevelopment } from '../config';
@@ -19,12 +21,68 @@ const DEFAULT_OPTIONS: ExtensionContextOptions = {
 // Extension registry for debugging and tracking
 const registeredExtensions = new Set<string>();
 
+// Flag to track if we've shown the auth warning
+let authWarningShown = false;
+
+/**
+ * Component that checks for AuthProvider - will throw if not in tree
+ */
+function AuthChecker({ children }: { children: ReactNode }) {
+  useAuth(); // This throws if AuthProvider is not in parent tree
+  return <>{children}</>;
+}
+
+/**
+ * Error boundary that catches missing AuthProvider and wraps as safety measure
+ */
+class AuthErrorBoundary extends React.Component<
+  { children: ReactNode },
+  { hasError: boolean; errorMessage: string }
+> {
+  state = { hasError: false, errorMessage: '' };
+
+  static getDerivedStateFromError(error: Error) {
+    // Check if error is from missing AuthProvider
+    if (error?.message?.includes('useAuth must be used within an AuthProvider')) {
+      return { hasError: true, errorMessage: error.message };
+    }
+    // Re-throw other errors
+    return null;
+  }
+
+  componentDidCatch(error: Error) {
+    if (this.state.hasError && !authWarningShown) {
+      authWarningShown = true;
+      consola.error(
+        '❌ AuthProvider not found in parent component!\n' +
+          '   Extension components require AuthProvider wrapper.\n' +
+          '   Auto-wrapping applied as a safety measure.\n\n' +
+          '   Please wrap your page with <BaseApp> or <AuthProvider>:\n\n' +
+          '   import { BaseApp } from \'@djangocfg/layouts\';\n' +
+          '   \n' +
+          '   <BaseApp>\n' +
+          '     <YourPageWithExtensions />\n' +
+          '   </BaseApp>'
+      );
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Wrap with AuthProvider as safety measure
+      return <AuthProvider>{this.props.children}</AuthProvider>;
+    }
+    return this.props.children;
+  }
+}
+
 /**
  * Base provider with SWR configuration for extension contexts
  *
  * Provides:
  * - SWR configuration for data fetching
  * - Extension registration and metadata management
+ * - Auth context protection (auto-wraps if missing, shows error)
  * - Auth context from @djangocfg/api (automatically available via useAuth)
  *
  * @example
@@ -89,9 +147,14 @@ export function ExtensionProvider({ children, metadata, options = {} }: Extensio
     };
   }, [metadata.name, metadata.version, metadata.displayName]);
 
-  // Note: useAuth from @djangocfg/api is automatically available
-  // No need to wrap - extensions can import and use it directly
-  return <SWRConfig value={config}>{children}</SWRConfig>;
+  // Check for AuthProvider and wrap if missing (safety measure)
+  return (
+    <AuthErrorBoundary>
+      <AuthChecker>
+        <SWRConfig value={config}>{children}</SWRConfig>
+      </AuthChecker>
+    </AuthErrorBoundary>
+  );
 }
 
 /**

package/src/extensionConfig.ts

@@ -11,38 +11,79 @@ export const extensionConfig = createExtensionConfig(packageJson, {
   category: 'utilities',
   features: [
     'CLI for creating extensions',
-    'Base utilities and helpers',
-    'Extension context system',
-    'API client utilities',
-    'Logging system',
-    'TypeScript types',
+    'Next.js 15 playground for rapid development',
+    'Smart Provider Pattern for flexible component usage',
+    'Extension context and provider system',
+    'Pagination hooks (standard & infinite scroll)',
+    'API client utilities with auth integration',
+    'Type-safe context creation helpers',
+    'Logging system with structured output',
+    'Environment detection (dev, prod, static)',
+    'TypeScript types and utilities',
   ],
   minVersion: '2.0.0',
   examples: [
     {
-      title: 'Create New Extension',
-      description: 'Use CLI to scaffold a new extension',
-      code: `# Install ext-base globally or use via pnpm
-pnpm dlx @djangocfg/ext-base create my-extension
+      title: 'Create Extension with CLI',
+      description: 'Interactive wizard with playground environment',
+      code: `# Create extension with interactive wizard
+pnpm dlx @djangocfg/ext-base create
 
-# Choose category, features, and start building`,
+# Quick test extension (auto-cleanup)
+pnpm dlx @djangocfg/ext-base test
+
+# List all extensions
+pnpm dlx @djangocfg/ext-base list`,
       language: 'bash',
     },
     {
-      title: 'Use Extension Context',
-      description: 'Create a context provider for your extension',
-      code: `import { createExtensionContext } from '@djangocfg/ext-base';
+      title: 'Development with Playground',
+      description: 'Start Next.js playground for rapid testing',
+      code: `cd your-extension
 
-export const { ExtensionProvider, useExtension } = createExtensionContext({
-  name: 'my-extension',
-  version: '1.0.0',
-  apiUrl: '/api/my-extension',
-});
+# Start playground (auto-builds extension + opens browser)
+pnpm dev:playground
+
+# Build for production
+pnpm build
+
+# Type check
+pnpm check`,
+      language: 'bash',
+    },
+    {
+      title: 'Smart Provider Pattern',
+      description: 'Components that work standalone or with shared context',
+      code: `import { withSmartProvider } from '@your-org/my-extension';
+
+// Your component
+function MyComponent() {
+  const { data } = useMyExtension();
+  return <div>{data}</div>;
+}
 
-// In your app
-export default function App({ children }) {
+// Wrap with smart provider
+export const MySmartComponent = withSmartProvider(MyComponent);
+
+// Usage 1: Standalone (auto-wrapped)
+<MySmartComponent />
+
+// Usage 2: Manual provider (shared context)
+<MyExtensionProvider>
+  <MySmartComponent />
+  <MySmartComponent />
+</MyExtensionProvider>`,
+      language: 'tsx',
+    },
+    {
+      title: 'Extension Provider',
+      description: 'Register and wrap your extension',
+      code: `import { ExtensionProvider } from '@djangocfg/ext-base/hooks';
+import { extensionConfig } from './config';
+
+export function MyExtensionProvider({ children }) {
   return (
-    <ExtensionProvider>
+    <ExtensionProvider metadata={extensionConfig}>
       {children}
     </ExtensionProvider>
   );
@@ -50,15 +91,23 @@ export default function App({ children }) {
       language: 'tsx',
     },
     {
-      title: 'API Client',
-      description: 'Use the API client utilities',
-      code: `import { ApiClient } from '@djangocfg/ext-base';
+      title: 'Pagination Hooks',
+      description: 'Built-in hooks for standard and infinite scroll',
+      code: `import { usePagination, useInfinitePagination } from '@djangocfg/ext-base/hooks';
 
-const client = new ApiClient('/api');
+// Standard pagination
+const { items, page, totalPages, nextPage, prevPage } = usePagination({
+  keyPrefix: 'articles',
+  fetcher: async (page, pageSize) => api.articles.list({ page, page_size: pageSize }),
+  pageSize: 20,
+});
 
-// Make requests
-const data = await client.get('/users');
-const user = await client.post('/users', { name: 'John' });`,
+// Infinite scroll
+const { items, isLoading, hasMore, loadMore } = useInfinitePagination({
+  keyPrefix: 'articles',
+  fetcher: async (page, pageSize) => api.articles.list({ page, page_size: pageSize }),
+  pageSize: 20,
+});`,
       language: 'tsx',
     },
   ],

package/templates/extension-template/README.md.template

@@ -54,6 +54,36 @@ export function MyComponent() {
 }
 ```
 
+## Development
+
+### Playground
+
+This extension includes a Next.js playground for local development:
+
+```bash
+# Start the development playground
+pnpm dev:playground
+```
+
+Open http://localhost:3333 to see your extension in action with hot reload.
+
+The playground includes:
+- ✅ BaseApp wrapper (auth, theme, SWR)
+- ✅ Hot Module Replacement
+- ✅ Full TypeScript support
+
+See [playground/README.md](./playground/README.md) for details.
+
+### Build
+
+```bash
+# Build the extension
+pnpm build
+
+# Type check
+pnpm check
+```
+
 ## License
 
 MIT

package/templates/extension-template/package.json.template

@@ -52,6 +52,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "dev:playground": "cd playground && pnpm dev",
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -71,7 +72,7 @@
     "@djangocfg/ext-base": "latest",
     "@djangocfg/typescript-config": "latest",
     "@types/node": "^24.7.2",
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.2.7",
     "consola": "^3.4.2",
     "swr": "^2.3.7",
     "tsup": "^8.5.0",