https://www.haulitaday.com/cp/resources/views/test_slot/slot/Slot.js

1import { useState, useEffect, useRef, useContext } from "/cp/resources/js/[email protected]";
2import { render, Component } from "/cp/resources/js/[email protected]";
3import { html } from "/cp/resources/js/html.module.js";
4import Shot from "./plugins/Shot.js";
5import DeferredShot from "./plugins/DeferredShot.js";
6import CaptureShot from "./plugins/CaptureShot.js";
7import ReactiveShot from "./plugins/ReactiveShot.js";
8import AnimSlot from "./plugins/AnimShot.js";
9import GroupShot from "./plugins/GroupShot.js";
10import AncestralSlot from "./plugins/AncestralSlot.js";
11import SignalSlot from "./plugins/SignalSlot.js";
12import { delay } from "./utils.js";
13export { default as SlotGroup } from "./SlotGroup.js";
14
15const SlotClass = GroupShot(AnimSlot(CaptureShot(ReactiveShot(SignalSlot(AncestralSlot(DeferredShot(Shot)))))));
16export class Slot extends Component {
17    constructor(opts) {
18        super(opts);
19        this.state = {
20            comp:"",
21            id: Math.random().toString(36).split(".").pop(),
22        };
23        const setComp = comp => {
24            this.setState({comp});
25        };
26        opts = {
27            ...opts,
28            setComp,
29            reactComponent: this,
30        };
31        this.slot = new SlotClass(opts);
32    }
33
34    componentDidMount(opts) {
35        this.slot.initialize().then(() => this.slot.runloop());
36    }
37
38    componentWillUnmount(opts) {
39        this.slot.finalize();
40    }
41
42    render() {
43        return html `${this.state.comp}`;
44    }
45}
46
47export default function OldSlot(opts) {
48    const [comp, setComp] = useState('');
49    useEffect(() => {
50        opts = {
51            ...opts,
52            setComp,
53            reactComponent: this,
54        };
55        const slot = new SlotClass(opts);
56        this.slot = slot;
57        slot.initialize().then(() => slot.runloop());
58        return slot.finalize;
59    }, [...Object.values(opts)]);
60    return comp;
61}
62
63/// a way to specify the location of slots in a layout
64export function Stamp() {
65    let res = null;
66    let numcalls = 0;
67    this.stamp = () => html `<${Slot} flow=${(slot) => {
68        if (numcalls++) throw new Error("can only call stamp() once per Stamp instance");
69        res(slot);
70        return new Promise(()=>{});
71    }} />`;
72    const prm = new Promise((resolve) => {
73        res = resolve;
74    });
75    this.slot = () => {
76        return prm;
77    };
78}