Passing data in CSP build

[fpsvogel]

I'm experimenting with the CSP build, and everything seems straightforward except for one thing: passing arguments/"props" into a data object.

I found discussions from 2021 in which data attributes are recommended (1, 2). That works, but I'm wondering if there have been any new developments since then.

In particular, are there any conveniences around getting values from data attributes, as in Stimulus? Stimulus actually came up in one of those 2021 discussions. It doesn't look like anything came of it, and I haven't see anything like this in the docs, but I just wanted to make sure.

[ekwoka]

Any such conveniences could be pretty simple with a custom directive.

[fpsvogel]

I took a stab at it after all. I feel like I'm close, but I'm getting an Uncaught TypeError: can't access property "myThing", this.$data.$props is undefined and I'm not seeing the console.log output from the end of the custom directive definition.

Example HTML:

<div x-data="myData" x-prop:myObj="{ a: 1, b: 2 }" x-prop:myNum="3" x-prop:myBool="false"></div>

Example data class:

export class MyDataClass {
  static props = {
    myObj: Object,
    myNum: Number,
    myBool: Boolean
  }

  init() {
    console.log(this.$data.$props.myObj) // This is where the error happens
    console.log(this.$data.$props.myNum)
    console.log(this.$data.$props.myBool)
  }
}

Here's where I define the directive and start Alpine:

import Alpine from "@alpinejs/csp"
import { MyDataClass } from "../javascript/components"
Alpine.data("myData", () => new myDataClass())

Alpine.directive("prop", (el, { expression, value }, { effect }) => {
  const propName = value
  const dataType = MyDataClass.props[propName]
  let propValue = expression

  if (dataType === Object || dataType === Array) {
    propValue = JSON.parse(propValue)
  } else if (dataType === Number) {
    propValue = Number(propValue)
  } else if (dataType === Boolean) {
    propValue = propValue === "true"
  }

  // see https://github.com/alpinejs/alpine/discussions/3649#discussioncomment-8283149
  const data = Alpine.$data(el)
  effect(() => {
    data.$props = data.$props || {}
    data.$props[propName] = propValue
  })

  console.log(`Setting ${propName} to ${propValue}`)
}).before("init")

Maybe the line }).before("init") is not correct? I tried that after getting the TypeError and then finding https://alpinejs.dev/advanced/extending#custom-order.

[SimoTod]

You want it to run before data (x-data) not init (which is x-init, not the init function)

[fpsvogel]

Thanks! That helped. Now at least the directive code is running, because I'm getting a TypeError: can't convert undefined to object inside the effect(), at data.$props = data.$props || {}. It looks like the data is not initialized yet, which makes sense since I'm using `.before("data").

Is there some way I can wait for the data to be initialized before storing each prop in it?

[SimoTod]

You can add the effect on the next tick or something like that (although then you have the problem that init won't see $props, basically both directives need to wait for the other ones) but, to be fair, it feels like it could be less complex.
Alpine allows you to add data layers to a specific context so you can have something like this: https://codepen.io/SimoTod/pen/QWevogX

Those are oversimplified examples but they may help you decide how to approach it.

[ekwoka]

Yeah there won't be any $data to access on a root element yet.

[fpsvogel]

Thank you! That's perfect. I like the version with $props, plus just straight parsing JSON is simpler now that I think about it, rather than having to specify the type of each prop.

I missed Alpine.addScopeToNode() before. It was right under my nose in the docs: https://alpinejs.dev/advanced/extending#custom-order

[ekwoka]

Yup, that would be a great way to do it.

If you're wanting to see some of those deeper apis, I have a post about them here:https://awesomealpine.com/posts/underrated-alpine-api/

[fpsvogel]

Thanks for sharing! I read the first post on performance too. Great reads 👏