How to pass custom element data object into child $data via 'alpine:init' ?

[bitplorer]

I have the following code:

document.querySelectorAll('[x-component]').forEach(component => {
  class XComponent extends HTMLElement {
          
          constructor() {
              super();
          }
          async connectedCallback() {
           this.append(component.content.cloneNode(true));
           document.addEventListener('alpine:initialized', () => {
             // here I want to pass the this.data() into all childrens 'x-data'  
            }
          }
  
          data(){
           return {...}
          }
  ...
}

right now what am doing is

<x-parent-element>
    <div x-data={...$el.parentElement.data()}>
    </div>
    <div x-data={}>
        <x-child-element x-data={...$el.parentElement.$data}>
            <div x-data={...$el.parentElement.$data, ... $el.parentElement.data()}>
            </div>
        </x-child-element>
    <div>
</x-parent-element>

right now am manually passing x-data={...$el.parentElement.$data, ... $el.parentElement.data()} or
x-data={...$el.parentElement.data()} or x-data={...$el.parentElement.$data} , is there an alpine way to pass data() object into child elements correctly ? I dont want to manually pass data everywhere.

I am new to javascript, I am serving dynamic html from server side via python backend. Please help. Thanks..

[ekwoka]

Do you need to?

children already have access to the parents scope.

[bitplorer]

look at the errors am getting,

here is the code:

I dont know why this.data() isnt passed along x-data, am I doing it correctly ?

[ekwoka]

It is, it's just happening later.
You'll want to put x-ignore on the custom elements until after the connected callback

[bitplorer]

okay thanks, let me see if it works, do I have to remove x-ignore after connected callback ? or Alpine will do it itself ?

[ekwoka]

You would need to and then use Alpine.initTree(El)

Lol

Wow, this is awful.

Lots of deep innards.

May be something worth making a real plugin for 😂

[bitplorer]

I have used the Alpine.initTree already but it didn't work as expected 😃 , one hacky solution that partially works is as following:

this.append(component.content.cloneNode(true));
document.addEventListener('alpine:init', () => {
    let thisData = this.data();

    let parentElement = this.parentElement;
    while (!!parentElement && !parentElement.hasAttribute("x-data")){
        if (!!parentElement.parentElement){
            parentElement = parentElement.parentElement;
        } else {
            break;
        }
    }

    if (parentElement.hasAttribute("x-data")) {
        let parentData = Alpine.$data(parentElement);
        // we want to override the this data with component supplied parents data
        thisData = {...thisData, ...parentData};
    }
    
    // select all children to this element that have 'x-data' attribute
    const childrens = this.querySelectorAll("[x-data]");
    //
    this.setAttribute("x-data", JSON.stringify(thisData));

    if (childrens){
       childrens.forEach(child => {
           // get the x-data attribute, its a JSON format so we parse it 
           let childOldXDataJSON = child.getAttribute("x-data");   
           // here childOldXDataJSON can be empty '' string so || it with empty object "{}"
           childOldXDataJSON = childOldXDataJSON || "{}";
           
           if (this.$data) thisData = {...this.$data, ...thisData};
           let childNewXData = {...JSON.parse(childOldXDataJSON), ...thisData, 'x-cloak': ''};
                                       
           child.setAttribute("x-data", JSON.stringify(childNewXData));
           const childData = Alpine.$data(child);  
           
           for (const attr in thisData) {
               // expected behavior for component is to override the attr values 
               // in childData
               if(childData[attr]) childData[attr] = thisData[attr];
           }
       })
    }
});

you can see am getting error when am clicking darkmode button,

cdn.min.js:1 Alpine Expression Error: toggle is not defined

Expression: "toggle"

here is the code for x-dark-mode button:

@dataclass
class DarkModeButton(XComponent):
    def render(self, tag_name):
        with template(x_component=tag_name) as dark_mode_btn:
            with button(
                className="items-center justify-center overflow-hidden",
            ):
                x_toggle_dark_mode(
                    className="items-center justify-center cursor-pointer",
                    x_data="""{
                    toggle: () => {
                        if (localStorage.theme === 'dark') {
                            localStorage.theme = 'light';
                            document.documentElement.classList.remove('dark');
                        } else {
                            localStorage.theme = 'dark';
                            document.documentElement.classList.add('dark');
                        }
                    },
                }""",
                    x_on_click="toggle",
                    x_init="() => localStorage.theme = 'light'",
                ),

        return dark_mode_btn


x_dark_mode = DarkModeButton(tag_name="dark-mode")

I have defined the toggle method for alpine in x_data here but somehow my hacky code hasn't included that piece of code as done through above hacky code :(

[bitplorer]

^ above this is what am getting rendered by manually adding x_data="{...$el.parentElement.data()}" in x_data in my python code

This one above is what am getting after adding following code to connectedCallback in my javascript, here am not adding any x_data="{...$el.parentElement.data()}" in x_data in my python code :

this.append(component.content.cloneNode(true));
document.addEventListener('alpine:initialized', () => {
    let deStackFunc = Alpine.addScopeToNode(this, Alpine.reactive(this.data()));
    // now should I call deStackFunc ? like deStackFunc() ?
    this._stackData = Alpine.mergeProxies(Alpine.closestDataStack(this));
}