# Extending Norska

Norska can be extended and customized to multiply creative possibilities.

## Using an add-on

Adding an add-on to Norska is extremely simple: just pass it as a parameter before initialization.

```typescript
import Alpine from 'alpinejs';
import norska from '@norska/core';
import myAddon from 'path/to/addon';

const Norska = norska({
  addons: [myAddon]
});

Alpine.plugin(Norska)
window.Alpine = Alpine
Alpine.start()
```

New directives will be accessible via the prefix defined in the add-on configuration file (generally the name of the add-on itself) and magic properties will be accessible directly.

```html
<br x-3.myaddon.something="$stuff" />
```

## Creating an add-on

An add-on consists of various files for directives and magic properties, plus a file used to index all imports and configure parameters.

| Name       | Description                                                           |
| ---------- | --------------------------------------------------------------------- |
| namespace  | The namespace between Norska's prefix and the name of your directives |
| directives | An object containing all the directives of your add-on                |
| magics     | An object containing all the magic properties of your add-on          |

Let's take a closer look at the code in our example, how does it works ?

#### myAddon.ts

```typescript
import something from './something';
import stuff from './stuff';

// Add-on configuration
const myAddon = {
  prefix: 'myaddon',
  directives: {
    something
  },
  magics: {
    stuff
  }
}

export default myAddon;
```

#### something.ts

```typescript
import { DirectiveCallback } from 'alpinejs';

// Our custom directive
const something: DirectiveCallback = (
  el,
  { expression },
  { effect, cleanup, evaluateLater },
) => {
  const getValues = evaluateLater(expression);
  effect(() => {
    getValues((values) => console.log(values));
  });
};

export default something;
```

#### stuff.ts

```typescript
import { Alpine } from 'alpinejs';

// Our custom magic property
export default (Alpine: Alpine) => Alpine.magic('stuff', () => console.log('stuff'));
```

{% hint style="info" %}
Norska doesn't alter Alpine's API, so don't hesitate to read the [documentation ](https://alpinejs.dev/advanced/extending)to find out how to create custom directives and magic properties.

This method isn't the only way to add functionality to Alpine or Norska, it's just something I've added to create a simplified process.
{% endhint %}