Extending Norska

It's better to climb together

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.

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.

<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

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

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

export default myAddon;

something.ts

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

import { Alpine } from 'alpinejs';

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

Norska doesn't alter Alpine's API, so don't hesitate to read the documentation 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.