How to "rerender" custom elememts in blade using alpinejs

I will try to explain this the best I can. Assume I have this blade file:

<x-filament-panels::page>
    <x-filament::section>
        <div
            class="grid grid-flow-col justify-stretch gap-4"
            x-data="{ message: '' }"
        >
            <div
                x-model="message"
                x-ignore
                ax-load
                ax-load-src="{{ ... }}"
                x-data="codeEditor()"
            >
            </div>
            <customEl x-ref="container" x-text="message"></customEl>
        </div>
    </x-filament::section>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament::section>
        <div
            class="grid grid-flow-col justify-stretch gap-4"
            x-data="{ message: '' }"
        >
            <div
                x-model="message"
                x-ignore
                ax-load
                ax-load-src="{{ ... }}"
                x-data="codeEditor()"
            >
            </div>
            <customEl x-ref="container" x-text="message"></customEl>
        </div>
    </x-filament::section>
</x-filament-panels::page>

Everytime message is changed, I want to rerender customEl. Due to the nature of that component, just having x-text isnt enough. As I said it needs to be rerendered, but Im not sure how I can approach this. Any ideas?

1 Reply

MatthewOP•3w ago

The only workaround I have found is this:

<x-filament-panels::page>
    <x-filament::section>
        <x-slot name="heading">Filament Latex</x-slot>
        <script type="module">
            customElements.define("customEl", ...)
        </script>
        <div
            class="grid grid-cols-2 gap-4"
            x-data="{ message: '' }"
            x-init="$watch('message', value => {
                const container = $refs.container;
                container.innerHTML = '';
                const custom = document.createElement('customEl');
                custom.textContent = value;
                container.appendChild(custom);
            })"
        >
            <div
                class="w-full"
                x-model="message"
                x-ignore
                ax-load
                ax-load-src="{{ ... }}"
                x-data="codeEditor()"
            >
            </div>
            <div x-ref="container"></div>
        </div>
    </x-filament::section>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament::section>
        <x-slot name="heading">Filament Latex</x-slot>
        <script type="module">
            customElements.define("customEl", ...)
        </script>
        <div
            class="grid grid-cols-2 gap-4"
            x-data="{ message: '' }"
            x-init="$watch('message', value => {
                const container = $refs.container;
                container.innerHTML = '';
                const custom = document.createElement('customEl');
                custom.textContent = value;
                container.appendChild(custom);
            })"
        >
            <div
                class="w-full"
                x-model="message"
                x-ignore
                ax-load
                ax-load-src="{{ ... }}"
                x-data="codeEditor()"
            >
            </div>
            <div x-ref="container"></div>
        </div>
    </x-filament::section>
</x-filament-panels::page>

Anyone? My other issue is that when typing ctrl + f on codemirror, it sends that state to message. I dont want that. I dont want ctrl + f to affect the contents of message

import { EditorView, basicSetup } from 'codemirror';
import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { defaultKeymap } from "@codemirror/commands";
import { keymap } from '@codemirror/view';

export default function codeEditor() {
    return {
        content: 'This is a test\n\nHello world',
        init() {
            const editor = new EditorView({
                state: EditorState.create({
                    doc: this.content,
                    extensions: [
                        basicSetup,
                        keymap.of(defaultKeymap),
                        markdown(),
                        EditorView.lineWrapping,
                        // Add an update listener to track changes
                        EditorView.updateListener.of((update) => {
                            if (update.docChanged) {
                                this.$dispatch('input', update.state.doc.toString());
                            }
                        }),
                    ]
                }),
                parent: this.$el
            });
        }
    };
}

import { EditorView, basicSetup } from 'codemirror';
import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { defaultKeymap } from "@codemirror/commands";
import { keymap } from '@codemirror/view';

export default function codeEditor() {
    return {
        content: 'This is a test\n\nHello world',
        init() {
            const editor = new EditorView({
                state: EditorState.create({
                    doc: this.content,
                    extensions: [
                        basicSetup,
                        keymap.of(defaultKeymap),
                        markdown(),
                        EditorView.lineWrapping,
                        // Add an update listener to track changes
                        EditorView.updateListener.of((update) => {
                            if (update.docChanged) {
                                this.$dispatch('input', update.state.doc.toString());
                            }
                        }),
                    ]
                }),
                parent: this.$el
            });
        }
    };
}

Gaming

Programming

How to "rerender" custom elememts in blade using alpinejs