Make x-data values or states, shareable amongst unrelated components by using a common Id #3772

timeax · 2023-09-18T23:20:21Z

timeax
Sep 18, 2023

I don't know if that title made any sense but, consider the following HTML code

<html x-data>
      <!---  example 1  ---->
     <div x-data='data1' example1>
           <h1><span x-text='name'></span></h1>
           <button @click='name = "newName"'><span x-text="name"></span></button>
     </div>
     <!---  example 2  ---->
     <h2 x-data="data1"><span x-text='name'></span></h1>
     <button x-data="data1" @click='name = "newName"'><span x-text="name"></span></button>
</html>
<script>
    Alpine.data('data1', () => ({ name: 'My name' }))
</script>

We are familiar with the outcome of clicking the button in both examples 1 and 2. However, my focus is on the second example, where the feature is intended to modify both the text in the h2 span element and the button text. The syntax for this change will resemble the following.

<h2 x-data.id="data1"> <span x-text='name'></span></h2>
<button x-data.id @click='name = "newName"'><span x-text="name"></span></button>
<!— h2 now acts as the root element making it is unnecessary to initialize x-data on the button -->

As the title implied, the id in x-data.id is the common id shared by both the button and h2 tags. And now, the changes should be seen in both elements when the button is clicked. The feature is inspired by React Fragments, which allows rendering child nodes without a wrapping element and preserving their state values if available.

    <h3 x-data.id="data1" x-text="name"></h3>
    <h5 x-data.id.id2="[, data2]" x-text="name + food"></h5>
    <button x-data.id @click="name='nn'">
         Change name
        <span x-text="name"></span>
    </button>
    <button x-data.id2 @click="food='Great'">
        Change name
        <span x-text="food"></span>
    </button>
<script>
    Alpine.data('data1', e => ({name: ‘meat’}));
    Alpine.data('data2', e => ({ food: ‘meat’}));
</script>

The above example shows a use case for which multiple states need to be used.
Check out the feature in action on Codepen
https://codepen.io/timeax/pen/OJrOJXy
I forked the alpine repo and tweaked the x-data.js file to achieve this feature.

import { directive, prefix } from "../directives";
import { initInterceptors } from "../interceptor";
import { injectDataProviders } from "../datas";
import { addRootSelector } from "../lifecycle";
import { shouldSkipRegisteringDataDuringClone } from "../clone";
import { addScopeToNode } from "../scope";
import { injectMagics, magic } from "../magics";
import { reactive } from "../reactivity";
import { evaluate } from "../evaluator";

addRootSelector(() => `[${prefix("data")}]`);


/**
 *@typedef {{
 *  [x: string]: {
*  data: any,
* elements: HTMLElement[]
* }
* }} State
 */

/**
 *
 * @type {State}
 */
const states = {};

/**
 *
 * @param {string[]} IDs
 * @param {[] | {}} data State data
 * @param {HTMLElement} element
 * @param {Function} reactive
 * @returns
 */
function stateUtil(IDs, data, element, reactive) {
    /**
     * @type {{[x: string]: {
     *  data: any;
     * id: string;
     * state: any
     * } }}
     */
    const dataList = (() => {
        let dataElement = {};
        IDs.forEach((id, i) => {
            const value = Array.isArray(data)
                ? (data[i] || {})
                : i == 0
                    ? data
                    : {};

            if (!states[id]) {
                states[id] = {
                    data: reactive(value),
                    elements: []
                }
            }

            //-------
            const reactiveData = states[id]?.data || reactive(value);
            dataElement[id] = {
                id,
                data: value,
                reactiveData
            }

            states[id]?.elements.push(element);
        });

        return dataElement;
    })();


    return IDs.map(id => dataList[id]);
}

directive("data", (el,  /**@type {{expression: AnalyserNode, modifiers: string[]}}*/{ expression, modifiers: ids }, { cleanup }) => {
    if (shouldSkipRegisteringDataDuringClone(el)) return;

    expression = expression === "" ? "{}" : expression;

    let magicContext = {};
    injectMagics(magicContext, el);

    let dataProviderContext = {};
    injectDataProviders(dataProviderContext, magicContext);

    let data = evaluate(el, expression, { scope: dataProviderContext });
    if (data === undefined || data === true) data = {};
    let undo;

    if (ids.length > 0) {
        if (Array.isArray(data)) data = data.map(item => typeof item === 'function' ? item() : item || {})
        const dataList = stateUtil(ids, data, el, reactive);
        undo = [];
        dataList.forEach(item => undo.push(run(item.data, item.reactiveData)));
    } else undo = run(data)

    function run(data, stateData) {
        injectMagics(data, el);
        //-----------
        let reactiveData = stateData || reactive(data);

        initInterceptors(reactiveData);

        let undo = addScopeToNode(el, reactiveData);

        reactiveData["init"] && evaluate(el, reactiveData["init"]);
        return undo;
    }

    cleanup(() => {
        reactiveData["destroy"] && evaluate(el, reactiveData["destroy"]);
        if (ids) {
            ids.forEach(id => {
                const state = states[id];
                state.elements = state.elements.filter(item => item !== el);
                //----
                if (state.elements.length === 0) delete states[id];
            });

            return undo.forEach?.(undo => undo());
        }
        undo();
    });
});

ekwoka · 2023-09-19T03:04:33Z

ekwoka
Sep 19, 2023

I got you fam

https://alpinejs.dev/globals/alpine-store

2 replies

timeax Sep 19, 2023
Author

Alpine store is indeed a good substitute for this idea, but there are certain cases where it makes things complicated... The feature is not intended to be global like the Alpine store

ekwoka Sep 19, 2023

Can you provide such a case where the value being moved to a store or to a parent component is impractical?

Your code shows an example of doing this, but doesn't make a compelling argument that it should be done.

The current paradigm is local and global. Share is the case for strictly shared?

That being said, you can already do this "shared data context" by, outside of the data function, wrapping the data context object in Alpine.reactive, and then returning it as the result of the data function.

Various other simplistic helper data components can get this effect as well if you really need it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Make x-data values or states, shareable amongst unrelated components by using a common Id #3772

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Make x-data values or states, shareable amongst unrelated components by using a common Id #3772

Uh oh!

timeax Sep 18, 2023

Replies: 1 comment · 2 replies

Uh oh!

ekwoka Sep 19, 2023

Uh oh!

Uh oh!

timeax Sep 19, 2023 Author

Uh oh!

Uh oh!

ekwoka Sep 19, 2023

timeax
Sep 18, 2023

Replies: 1 comment 2 replies

ekwoka
Sep 19, 2023

timeax Sep 19, 2023
Author