Recommended way of including header scripts in build process?

[james0r]

I'm using Alpine.js to create components for my store.

I'm wondering if there is a recommended clean way of adding global functions to be loaded in the header other than just creating a scripts snippet for the header and adding my JS there.

Thanks.

[sergejcodes]

Hi 👋,

here's an example based on a dropdown component:

1. create an alpine directory in your source folder src/alpine
2. create a file called dropdown.js in your alpine directory src/alpine/dropdown.js with the following content:

export default {
  name: 'dropdown',
  component () {
    return {
      show: false,
      open() { this.show = true },
      close() { this.show = false },
      isOpen() { return this.show === true }
    }
  }
}

3. add the following code to any .liquid file:

<div x-data="dropdown()">
  <button x-on:click="open">Open</button>

  <div x-show="isOpen()" x-on:click.away="close">
    // Dropdown
  </div>
</div>

4. your src/main.js file should look something like the following code. We basically auto-import all files from the alpine directory plus any subdirectories and map them to the window object.

/**
 * imports
 */
import 'alpinejs'
import './css/main.css'

/**
 * auto-import all alpine components
 */
const alpineComponents = require.context('./alpine/', true, /\.js$/)

alpineComponents.keys().forEach(key => {
  const component = alpineComponents(key).default

  // if a component has a name defined use the name, else use the path as the component name
  const name = component.name
    ? component.name
    : key.replace(/\.(\/|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())

  window[name] = component.component
})

if you provide a name inside your component, you can reference it by the name. Otherwise, the file path will be transformed to camelCase and used as the component name. If you have a component in src/alpine/my-subdirectory/my-component.js the name of the component will be mySubdirectoryMyComponent

[james0r]

Awesome thank you.

[james0r]

Would it be wise to namespace the components as they live on the window?

[sergejcodes]

Depends on how many components you have, if it's a lot then probably yes.

Here's one way of doing it:

If you adjust the main.js example from above:

...

const scope = 'alpinejs'
window[scope] = {}
const alpineComponents = require.context('./alpine/', true, /\.js$/)

alpineComponents.keys().forEach(key => {
  ...

  window[scope][name] = component.component
})

then you should be able to reference them like this:

<div x-data="alpinejs.dropdown()">
  ...
</div>

[james0r]

Perfect. Appreciate it.