@daffodil/dev-tools

Developer tools for Daffodil e-commerce framework applications.

Features

• Debug Bar: Visual interface for switching between different Daffodil drivers
• Driver Management: Easy switching between In-Memory, Shopify, Magento, and other drivers

Installation

npm install @daffodil/dev-tools

Usage

Basic Setup

Configure dev tools in your application bootstrap:

import { provideDaffDevTools, withDriverConfig } from '@daffodil/dev-tools';

bootstrapApplication(AppComponent, {
    providers: [
        provideDaffDevTools(
            {
                enabled: true,
                startCollapsed: true,
            },
            withDriverConfig({
                name: '@daffodil/product/driver',
                currentDriver: 'in-memory',
                availableDrivers: [
                    {
                        id: 'in-memory',
                        name: 'In-Memory Driver',
                        properties: new Map([
                            ['apiKey', { type: 'input', id: 'apiKey', label: 'API Key', defaultValue: '' }],
                            ['timeout', { type: 'input', id: 'timeout', label: 'Timeout (ms)', defaultValue: '5000' }],
                        ]),
                    },
                    {
                        id: 'shopify',
                        name: 'Shopify Driver',
                        properties: new Map([
                            ['shopUrl', { type: 'input', id: 'shopUrl', label: 'Shop URL', defaultValue: 'myshop.myshopify.com' }],
                            ['accessToken', { type: 'input', id: 'accessToken', label: 'Access Token', defaultValue: '' }],
                        ]),
                    },
                    {
                        id: 'magento',
                        name: 'Magento Driver',
                        properties: new Map([
                            ['baseUrl', { type: 'input', id: 'baseUrl', label: 'Base URL', defaultValue: 'https://my-magento-store.com' }],
                            ['storeCode', { type: 'input', id: 'storeCode', label: 'Store Code', defaultValue: 'default' }],
                        ]),
                    },
                ],
            }),
        ),
    ],
});

Multiple Driver Configuration

Configure multiple drivers at once using multiple withDriverConfig calls:

import { provideDaffDevTools, withDriverConfig } from '@daffodil/dev-tools';

bootstrapApplication(AppComponent, {
    providers: [
        provideDaffDevTools(
            { enabled: true },
            withDriverConfig({
                name: '@daffodil/product/driver',
                currentDriver: 'in-memory',
                availableDrivers: [
                    {
                        id: 'in-memory',
                        name: 'In-Memory Driver',
                        properties: new Map(),
                    },
                    {
                        id: 'magento',
                        name: 'Magento Driver',
                        properties: new Map([
                            ['baseUrl', { type: 'input', id: 'baseUrl', label: 'Base URL', defaultValue: 'https://my-magento-store.com' }],
                        ]),
                    },
                ],
            }),
            withDriverConfig({
                name: '@daffodil/cart/driver',
                currentDriver: 'magento',
                availableDrivers: [
                    {
                        id: 'in-memory',
                        name: 'In-Memory Driver',
                        properties: new Map(),
                    },
                    {
                        id: 'magento',
                        name: 'Magento Driver',
                        properties: new Map([
                            ['storeCode', { type: 'input', id: 'storeCode', label: 'Store Code', defaultValue: 'default' }],
                        ]),
                    },
                ],
            }),
        ),
    ],
});

Add to Template

import { DaffDebugBarComponent } from '@daffodil/dev-tools';

@Component({
    standalone: true,
    imports: [DaffDebugBarComponent],
    template: `
        <daff-debug-bar></daff-debug-bar>
    `,
})
export class AppComponent {}

Development Mode Only

For production builds, conditionally include the debug bar:

import { isDevMode } from '@angular/core';

@Component({
    template: `
        @if (isDevMode) {
        <daff-debug-bar></daff-debug-bar>
        }
    `,
})
export class AppComponent {
    isDevMode = isDevMode();
}