# js-kompo-utils - Usage Guide

## Quick Start

In your Laravel app's `app.js`:

```javascript
import { defaultConfig, KompoJsInitializer } from 'js-kompo-utils';

const config = defaultConfig
    .bootstrap(() => require('./bootstrap'));

new KompoJsInitializer(config, window).initialize();
```

This gives you: jQuery, Vue + vue-kompo, CKEditor, Google Maps, QR code reader, all default components, window utilities, and animations.

## What's included by default

| Feature | Default | Toggle off |
|---------|---------|------------|
| jQuery | on | `.withoutJquery()` |
| CKEditor | on | `.withoutCkEditor()` |
| Google Maps | on | `.withoutKompoMaps()` |
| Tutorial Engine | on | `.withoutTutorialEngine()` |
| QR Code Reader | on (Vue plugin) | - |
| Default components | all `./components/*.vue` | `.excludeComponent('Name')` |
| Window utils | input + loading functions | - |
| Animations | count-up, magic-poof | - |

## Adding and removing components

```javascript
// Add an app-specific component
config.addComponent('MyComponent', require('./components/MyComponent.vue').default);

// Add multiple
config.addComponents({
    'CompA': require('./components/CompA.vue').default,
    'CompB': require('./components/CompB.vue').default,
});

// Remove a default component you don't need
config.excludeComponent('VlApexChart');
config.excludeComponents(['VlCKEditorTemplate', 'VlCKEditorWithVars']);
```

## Adding Vue plugins

```javascript
import SomePlugin from 'some-vue-plugin';

config.addVuePlugin(SomePlugin);
```

## Adding files to import

Pass callbacks — webpack resolves the path at build time:

```javascript
config.addFilesToImport([
    () => require('./my-custom-script.js'),
    () => require('./another-script.js'),
]);
```

## Window utilities

```javascript
// Add individual functions to window
config.addWindowUtilsItem('myHelper', () => { /* ... */ });

// Merge an object of functions
config.mergeWindowUtils({
    helperA: () => { /* ... */ },
    helperB: () => { /* ... */ },
});

// Add a decorator that receives window and does custom setup
config.addWindowDecorator((window) => {
    // custom window setup
});
```

## Lifecycle hooks

Hook into any initialization step with before/after callbacks:

```javascript
config.addAfterStepCallback('bootstrapExecution', () => {
    // runs after bootstrap, e.g. add axios interceptors
    window.axios.interceptors.request.use(config => {
        config.headers['X-Custom'] = 'value';
        return config;
    });
});

config.addBeforeStepCallback('instanceApp', () => {
    // runs right before Vue mounts
});
```

**Available step names:** `bootstrapExecution`, `requireFilesToImport`, `bootJqueryIfRequired`, `bootVue`, `decorateWindow`, `bootCkEditorIfRequired`, `bootMapsIfRequired`, `instanceApp`

## Changing the mount selector

Default is `#app` (matches kompo's `vue_app_id` config). Override if needed:

```javascript
config.setAppSelector('#my-app');
```

## Starting from scratch

If `defaultConfig` includes too much, build your own:

```javascript
import { KompoJsConfigBuilder, KompoJsInitializer } from 'js-kompo-utils';

const config = new KompoJsConfigBuilder()
    .bootstrap(() => require('./bootstrap'))
    .withJquery()
    .withoutCkEditor()
    .withoutKompoMaps()
    .addComponent('MyOnly', require('./components/MyOnly.vue').default);

new KompoJsInitializer(config, window).initialize();
```