Component properties in Alpine CSP

Regular Alpine evaluates component properties as JavaScript expressions. In Alpine CSP, they act as direct "lookup keys" on the component. This means accessing value properties, including nested ones, works similarly to regular Alpine.

const instance = {
    valueProp: 'the value',
    functionProp() {
        return 'the function return value'
    }
}

Alpine CSP value properties

Accessing value properties in Alpine CSP works like regular Alpine, supporting dot-notation for nested properties:

<script>
    Alpine.data('initMyComponent', () => ({
        item: {
            is_visible: true
        }
    }))
</script>
<span x-data="initMyComponent" x-show="item.is_visible"></span>

Value Transformation

Alpine CSP does not evaluate JavaScript expressions directly within attributes. This means operations like negating a value (`!`) or combining conditions (`||`, `&&`) are not possible directly in the HTML. For example, these regular Alpine patterns won't work:

<span x-show="!item.deleted"></span>

<span x-text="item.title || item.value"></span>

Instead, define a method on your Alpine component to perform these transformations:

<span x-show="isItemNotDeleted"></span>

<span x-text="itemLabel"></span>

return {
    isNotItemDeleted() {
      return ! this.item.deleted;
    },
    itemLabel() {
      return this.item.title || this.item.value
    }
}

Function arguments

Alpine CSP prevents passing arguments directly to methods called from attributes, as this requires JavaScript expression evaluation. For example, this will not work:

<input :value="calcValue('<?= $escaper->escapeJs($block->getConfig()) ?>')">

The solution is to use dataset attributes to pass data. Rewrite the example as:

<input :value="calcValue" 
       data-config="<?= $escaper->escapeHtmlAttr($block->getConfig()) ?>"
>

Access the value within your method using this.$el.dataset.config.

Important: Ensure you use `escapeHtmlAttr` for encoding `dataset` values, not `escapeJs`, as incorrect escaping can cause issues.

Using ! in method names

For convenience, especially when migrating from regular Alpine, you can declare methods with a `!` prefix to represent negation. This allows you to maintain similar syntax in your HTML directives:

return {
    deleted: false,
    ['!deleted']() {
        return ! this.deleted;
    },
}

This is used in directives like this:

<template x-if="deleted">
    <div>The item is deleted</div>
</template>
<template x-if="!deleted">
    <div>The item is present</div>
</template>