npm - @djangocfg/ext-base - Versions diffs - 1.0.2 → 1.0.4 - Mend

@djangocfg/ext-base 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/README.md +186 -7
package/dist/api.cjs +40 -0
package/dist/api.d.cts +35 -0
package/dist/api.d.ts +35 -0
package/dist/api.js +2 -0
package/dist/auth.cjs +10 -0
package/dist/auth.d.cts +1 -0
package/dist/auth.d.ts +1 -0
package/dist/auth.js +2 -0
package/dist/chunk-3RG5ZIWI.js +8 -0
package/dist/chunk-UXTBBEO5.js +237 -0
package/dist/chunk-VJEGYVBV.js +140 -0
package/dist/cli.mjs +530 -0
package/dist/hooks.cjs +437 -0
package/dist/hooks.d.cts +97 -0
package/dist/hooks.d.ts +97 -0
package/dist/hooks.js +95 -0
package/dist/index.cjs +345 -0
package/dist/index.d.cts +363 -0
package/dist/index.d.ts +363 -0
package/dist/index.js +3 -0
package/package.json +5 -2
package/src/cli/index.ts +470 -35
package/src/context/ExtensionProvider.tsx +67 -4
package/src/extensionConfig.ts +114 -0
package/src/index.ts +3 -0
package/src/metadata.ts +1 -2
package/src/types/context.ts +21 -15
package/src/utils/createExtensionConfig.ts +34 -18
package/templates/extension-template/README.md.template +37 -5
package/templates/extension-template/package.json.template +13 -5
package/templates/extension-template/playground/.gitignore.template +34 -0
package/templates/extension-template/playground/CLAUDE.md +35 -0
package/templates/extension-template/playground/README.md.template +76 -0
package/templates/extension-template/playground/app/globals.css.template +19 -0
package/templates/extension-template/playground/app/layout.tsx.template +30 -0
package/templates/extension-template/playground/app/page.tsx.template +44 -0
package/templates/extension-template/playground/next.config.ts.template +62 -0
package/templates/extension-template/playground/package.json.template +33 -0
package/templates/extension-template/playground/tsconfig.json.template +27 -0
package/templates/extension-template/src/config.ts +1 -2
package/templates/extension-template/src/contexts/__PROVIDER_NAME__Context.tsx +1 -1
package/templates/extension-template/src/contexts/__PROVIDER_NAME__ExtensionProvider.tsx +1 -0
package/templates/extension-template/src/hooks/index.ts +1 -1
package/templates/extension-template/src/index.ts +12 -4
package/templates/extension-template/src/utils/withSmartProvider.tsx +70 -0
package/templates/extension-template/tsup.config.ts +36 -22

package/templates/extension-template/playground/app/globals.css.template ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Global styles for __DISPLAY_NAME__ playground
+ * Single entry point for all styles
+ *
+ * CRITICAL: Import order matters for Tailwind CSS v4!
+ * Theme variables MUST come BEFORE @import "tailwindcss"
+ */
+/* 1. Import UI package styles FIRST (contains theme variables) */
+@import "@djangocfg/ui-nextjs/styles";
+/* 2. Import layouts styles (may contain additional tokens) */
+@import "@djangocfg/layouts/styles";
+/* 3. Import Tailwind CSS v4 (AFTER theme variables) */
+@import "tailwindcss";
+/* 4. Load tailwindcss-animate plugin */
+@plugin "tailwindcss-animate";

package/templates/extension-template/playground/app/layout.tsx.template ADDED Viewed

@@ -0,0 +1,30 @@
+import type { Metadata } from 'next';
+import { Manrope } from 'next/font/google';
+import { BaseApp } from '@djangocfg/layouts';
+import './globals.css';
+export const metadata: Metadata = {
+  title: '__DISPLAY_NAME__ - Development Playground',
+  description: 'Development environment for __DISPLAY_NAME__ extension',
+};
+const manrope = Manrope({
+  subsets: ['latin', 'cyrillic'],
+  weight: ['400', '500', '600', '700', '800'],
+  variable: '--font-manrope',
+  display: 'swap',
+});
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={manrope.className} style={{ fontFamily: manrope.style.fontFamily }}>
+        <BaseApp>{children}</BaseApp>
+      </body>
+    </html>
+  );
+}

package/templates/extension-template/playground/app/page.tsx.template ADDED Viewed

@@ -0,0 +1,44 @@
+'use client';
+import { __PROVIDER_NAME__Provider } from '__PACKAGE_NAME__';
+/**
+ * Development playground for __DISPLAY_NAME__ extension
+ *
+ * This page demonstrates how to use the extension in a Next.js application.
+ * The extension is wrapped with __PROVIDER_NAME__Provider which provides
+ * extension-specific context and state management.
+ *
+ * BaseApp (from layout.tsx) provides:
+ * - Theme support (light/dark mode)
+ * - Auth context
+ * - SWR configuration
+ * - Error tracking
+ *
+ * To start development:
+ * 1. Run `pnpm dev:playground` from the extension root
+ * 2. Open http://localhost:3333 in your browser
+ * 3. Make changes to src/ files and see them hot-reload
+ */
+export default function PlaygroundPage() {
+  return (
+    <__PROVIDER_NAME__Provider>
+      <div style={{ padding: '2rem' }}>
+        <h1>__DISPLAY_NAME__ - Development Playground</h1>
+        <p>
+          This is a development environment for testing the __DISPLAY_NAME__ extension.
+        </p>
+        <div style={{ marginTop: '2rem', padding: '1rem', border: '1px solid #ccc', borderRadius: '8px' }}>
+          <h2>Add your components here</h2>
+          <p>
+            Import and render your extension components below to test them.
+          </p>
+          {/* TODO: Add your extension components here */}
+          {/* Example: <YourComponent /> */}
+        </div>
+      </div>
+    </__PROVIDER_NAME__Provider>
+  );
+}

package/templates/extension-template/playground/next.config.ts.template ADDED Viewed

@@ -0,0 +1,62 @@
+import type { NextConfig } from 'next';
+import type { Configuration as WebpackConfig, Compiler } from 'webpack';
+/**
+ * Simple webpack plugin to auto-open browser in dev mode
+ */
+class AutoOpenBrowserPlugin {
+  private opened = false;
+  apply(compiler: Compiler): void {
+    compiler.hooks.done.tap('AutoOpenBrowserPlugin', () => {
+      if (!this.opened) {
+        this.opened = true;
+        this.openBrowser();
+      }
+    });
+  }
+  private openBrowser(): void {
+    setTimeout(async () => {
+      try {
+        const { exec } = await import('child_process');
+        const port = process.env.PORT || '3333';
+        const url = `http://localhost:${port}`;
+        const command = process.platform === 'darwin'
+          ? 'open'
+          : process.platform === 'win32'
+          ? 'start'
+          : 'xdg-open';
+        exec(`${command} ${url}`, (error) => {
+          if (error) {
+            console.warn(`Failed to open browser: ${error.message}`);
+          }
+        });
+      } catch (error) {
+        console.warn('Failed to open browser');
+      }
+    }, 2000);
+  }
+}
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  transpilePackages: [
+    '__PACKAGE_NAME__',
+    '@djangocfg/api',
+  ],
+  webpack: (config: WebpackConfig, { isServer, dev }) => {
+    // Auto-open browser in dev mode (client-side only)
+    if (dev && !isServer) {
+      if (!config.plugins) {
+        config.plugins = [];
+      }
+      config.plugins.push(new AutoOpenBrowserPlugin());
+    }
+    return config;
+  },
+};
+export default nextConfig;

package/templates/extension-template/playground/package.json.template ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "__PACKAGE_NAME__-playground",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Development playground for __DISPLAY_NAME__ extension",
+  "scripts": {
+    "predev": "cd .. && pnpm build",
+    "prebuild": "cd .. && pnpm build",
+    "dev": "next dev --port 3333",
+    "build": "next build",
+    "start": "next start",
+    "ai-docs": "pnpm exec djangocfg-docs"
+  },
+  "dependencies": {
+    "__PACKAGE_NAME__": "workspace:*",
+    "@djangocfg/layouts": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
+    "@djangocfg/ui-nextjs": "workspace:*",
+    "@djangocfg/nextjs": "workspace:*",
+    "@djangocfg/api": "workspace:*",
+    "next": "15.5.7",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "tailwindcss": "^4.1.14",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/extension-template/playground/tsconfig.json.template ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/extension-template/src/config.ts CHANGED Viewed

@@ -8,7 +8,6 @@ import packageJson from '../package.json';
 export const extensionConfig = createExtensionConfig(packageJson, {
   name: '__NAME__',
   displayName: '__DISPLAY_NAME__',
-  icon: '__ICON__',
   category: '__CATEGORY__',
   features: [
     'Feature 1',
@@ -20,7 +19,7 @@ export const extensionConfig = createExtensionConfig(packageJson, {
     {
       title: 'Basic Usage',
       description: 'How to use this extension',
-      code: `import { __PROVIDER_NAME__ExtensionProvider } from '@djangocfg/ext-__NAME__/hooks';
+      code: `import { __PROVIDER_NAME__ExtensionProvider } from '__PACKAGE_NAME__/hooks';
 export default function RootLayout({ children }) {
   return (

package/templates/extension-template/src/contexts/__PROVIDER_NAME__Context.tsx CHANGED Viewed

@@ -4,7 +4,7 @@
  * Main __DISPLAY_NAME__ Context
  */
-import { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, useContext, type ReactNode } from 'react';
 interface __PROVIDER_NAME__ContextValue {
   // Add your context values here

package/templates/extension-template/src/contexts/__PROVIDER_NAME__ExtensionProvider.tsx CHANGED Viewed

@@ -7,6 +7,7 @@
 'use client';
 import type { ReactNode } from 'react';
+import React from 'react';
 import { ExtensionProvider } from '@djangocfg/ext-base/hooks';
 import { extensionConfig } from '../config';
 import { __PROVIDER_NAME__Provider } from './__PROVIDER_NAME__Context';

package/templates/extension-template/src/hooks/index.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 /**
- * @djangocfg/ext-__NAME__/hooks
+ * __PACKAGE_NAME__/hooks
  * React hooks and client-only components
  *
  * This entry point includes React components, hooks, and SWR functionality.

package/templates/extension-template/src/index.ts CHANGED Viewed

@@ -1,9 +1,6 @@
 /**
  * @djangocfg/ext-__NAME__
- * Server-safe entry point (no client-only code)
- *
- * Contains types and server-safe exports only.
- * For React hooks and SWR, use '@djangocfg/ext-__NAME__/hooks'
+ * Main entry point for __DISPLAY_NAME__ extension
  */
 // ============================================================================
@@ -15,3 +12,14 @@ export { extensionConfig } from './config';
 // Types
 // ============================================================================
 export type * from './types';
+// ============================================================================
+// Context & Providers (Client-side)
+// ============================================================================
+export { __PROVIDER_NAME__ExtensionProvider as __PROVIDER_NAME__Provider } from './contexts/__PROVIDER_NAME__ExtensionProvider';
+export { use__PROVIDER_NAME__, use__PROVIDER_NAME__Optional } from './contexts/__PROVIDER_NAME__Context';
+// ============================================================================
+// Smart Wrapper Utility
+// ============================================================================
+export { withSmartProvider } from './utils/withSmartProvider';

package/templates/extension-template/src/utils/withSmartProvider.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+/**
+ * Smart Provider Wrapper
+ *
+ * Automatically wraps components with ExtensionProvider only if needed.
+ * If provider already exists in parent tree, reuses it.
+ *
+ * @example
+ * ```tsx
+ * // Component is automatically wrapped
+ * const SmartComponent = withSmartProvider(MyComponent);
+ *
+ * // Works standalone
+ * <SmartComponent />
+ *
+ * // Also works with manual provider (shares context)
+ * <__PROVIDER_NAME__Provider>
+ *   <SmartComponent />
+ *   <SmartComponent />
+ * </__PROVIDER_NAME__Provider>
+ * ```
+ */
+'use client';
+import React, { type ComponentType, type ReactNode } from 'react';
+import { __PROVIDER_NAME__ExtensionProvider } from '../contexts/__PROVIDER_NAME__ExtensionProvider';
+import { use__PROVIDER_NAME__Optional } from '../contexts/__PROVIDER_NAME__Context';
+/**
+ * HOC that wraps a component with smart provider detection
+ */
+export function withSmartProvider<P extends object>(
+  Component: ComponentType<P>
+): ComponentType<P> {
+  const WrappedComponent = (props: P) => {
+    return (
+      <SmartProviderWrapper>
+        <Component {...props} />
+      </SmartProviderWrapper>
+    );
+  };
+  WrappedComponent.displayName = `withSmartProvider(${Component.displayName || Component.name || 'Component'})`;
+  return WrappedComponent;
+}
+/**
+ * Smart wrapper that only creates provider if not already in tree
+ */
+function SmartProviderWrapper({ children }: { children: ReactNode }) {
+  const existingContext = use__PROVIDER_NAME__Optional();
+  // Provider already exists higher in tree - just render children
+  if (existingContext !== undefined) {
+    return <>{children}</>;
+  }
+  // No provider found - create one automatically
+  return (
+    <__PROVIDER_NAME__ExtensionProvider>
+      {children}
+    </__PROVIDER_NAME__ExtensionProvider>
+  );
+}
+/**
+ * Direct component export for manual usage
+ */
+export { SmartProviderWrapper };

package/templates/extension-template/tsup.config.ts CHANGED Viewed

@@ -1,26 +1,40 @@
 import { defineConfig } from 'tsup';
-export default defineConfig({
-  entry: {
-    index: 'src/index.ts',
-    hooks: 'src/hooks/index.ts',
+export default defineConfig([
+  // Config only (server-safe, no React)
+  {
+    entry: {
+      config: 'src/config.ts',
+    },
+    format: ['cjs', 'esm'],
+    dts: true,
+    external: ['@djangocfg/ext-base'],
   },
-  format: ['esm', 'cjs'],
-  dts: true,
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: [
-    'react',
-    'react-dom',
-    'next',
-    'lucide-react',
-    '@djangocfg/ext-base',
-    '@djangocfg/ui-nextjs',
-    'swr',
-    'consola',
-  ],
-  banner: {
-    js: "'use client';",
+  // Client components
+  {
+    entry: {
+      index: 'src/index.ts',
+      hooks: 'src/hooks/index.ts',
+    },
+    format: ['cjs', 'esm'],
+    dts: true,
+    clean: false,
+    splitting: false,
+    sourcemap: true,
+    external: [
+      'react',
+      'react-dom',
+      'next',
+      'lucide-react',
+      '@djangocfg/ext-base',
+      '@djangocfg/ui-nextjs',
+      'swr',
+      'consola',
+    ],
+    esbuildOptions(options) {
+      options.banner = {
+        js: '"use client";',
+      };
+    },
   },
-});
+]);