amorphous Comments - Answer Overflow

Topics

amorphous

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

Ok, not blocking but one more issue: there are certain transitions between components that cause random textelement items to be inserted into the DOM - is there any code in OneJS that could account for that? I don't use textelement elements at all in my code. They're a nuisance, in that they add extra height and padding to the UI unnecessarily, but I guess they're not really a problem (since I don't use them I can hide all of them)? More a curiosity.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

I fixed this by adding these lines to index.tsx:

puer.$extension(CS.UnityEngine.UIElements.VisualElement, CS.VisualElementDOTweenExtensions);
puer.$extension(CS.DG.Tweening.Sequence, CS.VisualElementDOTweenExtensions);
puer.$extension(CS.DG.Tweening.Sequence, CS.DG.Tweening.TweenSettingsExtensions);

puer.$extension(CS.UnityEngine.UIElements.VisualElement, CS.VisualElementDOTweenExtensions);
puer.$extension(CS.DG.Tweening.Sequence, CS.VisualElementDOTweenExtensions);
puer.$extension(CS.DG.Tweening.Sequence, CS.DG.Tweening.TweenSettingsExtensions);

(The visualelementDOTweenExtensions are custom code from me)

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

Ok, the UI works in the editor now! ...but it breaks in build. Probably because DOTween isn't linking up correctly in Puerts? I have DOTween set as an Assembly in the ScriptEngine; is there more I need to do here?

unhandledRejection TypeError: labelRef.current.ve.DOText is not a function

unhandledRejection TypeError: labelRef.current.ve.DOText is not a function

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

if you render(<App />, document.body) Button 2 will end up all the way at the end of the list

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

It has to do with changing a style with a timeout.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

import { h } from "preact"
import { useEffect, useState } from "preact/hooks"

const WrapDiv = (props: any) => {
    const [reallyOn, setReallyOn] = useState(false)
    useEffect(() => {
        setTimeout(() => setReallyOn(true), 10)
    }, [])

    const style: any = {}
    if (!reallyOn) {
        style.translate = "25% 0%"
    } else {
        style.translate = "0% 0%"
    }
    return <div style={style}>{props.children}</div>
}

export const App = () => {
    return (
        <WrapDiv>
            <button text="Button 1"></button>
            <button text="Button 2"></button>
            <button text="Button 3"></button>
            <button text="Button 4"></button>
            <button text="Button 5"></button>
            <button text="Button 6"></button>
        </WrapDiv>
    )
}

import { h } from "preact"
import { useEffect, useState } from "preact/hooks"

const WrapDiv = (props: any) => {
    const [reallyOn, setReallyOn] = useState(false)
    useEffect(() => {
        setTimeout(() => setReallyOn(true), 10)
    }, [])

    const style: any = {}
    if (!reallyOn) {
        style.translate = "25% 0%"
    } else {
        style.translate = "0% 0%"
    }
    return <div style={style}>{props.children}</div>
}

export const App = () => {
    return (
        <WrapDiv>
            <button text="Button 1"></button>
            <button text="Button 2"></button>
            <button text="Button 3"></button>
            <button text="Button 4"></button>
            <button text="Button 5"></button>
            <button text="Button 6"></button>
        </WrapDiv>
    )
}

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

I have a minimal repro

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

It's reliably reproing ingame with the title screen. Key does not help. I'm trying to create a minimal repro, but it's so far not reproing in the minimal. I'll keep investigating.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

As of now besides some graphical glitches, the only blocking issue is the list ordering error.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

I have resolved (tentatively) the remaining _attach issues. They were firing on transitionrun and transitionend events when using the Transition object from onejs/comps v1; I think setting style on ref.current and having transition event listeners at the same time was probably related? I ended up rewriting the Transition effect to not use refs at all, and that fixed it.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

I never got transition working with the style prop. Instead I manually converted them all to emo classes.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

it seems to always be the second object in the list being moved to the very end

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

this does not appear to be entirely deterministic, nor are there any errors that show up in console. Sometimes things are just drawn out of order. This seems to happen the most often when any kind of redrawing happens; the entire list rendering for the first time, fading objects in and out in the list, etc.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

No description

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

~~This doesn't appear to be consistent. It works in some components to move them to emo, and not others.~~ Emo seems to be consistently working as long as you never try to set transition properties through the style prop. I'm assuming that style is just broken for this. Tailwind also seems to work.

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

Ok, it seems like another case where the style prop isn't working, but it does work on emo. the minimal example from before does not transition properly, but this does

import { useEffect, useRef, useState } from 'onejs-preact/hooks';
import { h } from 'preact'
import { emo } from 'onejs-core';

export const App = () => {
    const [y, setY] = useState(0)
    const onPress = useRef(() => {
        setY((value) => {
            if (value > 0) {
                return 0
            }
            return 60
        })
    })
    const buttonState = useRef({
        focus: () => {},
        blur: () => {},
        hover: () => {},
        leave: () => {}
    }).current
    return <div style={{
        position: "Absolute",
        top: 50,
        bottom: 50,
        left: 50,
        right: 50,
    }}>
        <div class={emo`
            transition-property: translate;
            transition-duration: 1s;
        `} style={{
            position: "Relative",
            translate: [0, y],
            opacity: 1
        }}>
            <label style={{
                fontSize: 32
            }} text="Hello World"></label>
        </div>
        <button 
            onClick={onPress.current}
            onNavigationSubmit={onPress.current}
            onFocusIn={buttonState.focus}
            onFocusOut={buttonState.blur}
            onBlur={buttonState.blur}
            onPointerEnter={buttonState.hover}
            onPointerLeave={buttonState.leave}
        >
            <label text="change"></label>
        </button>
    </div>
}

import { useEffect, useRef, useState } from 'onejs-preact/hooks';
import { h } from 'preact'
import { emo } from 'onejs-core';

export const App = () => {
    const [y, setY] = useState(0)
    const onPress = useRef(() => {
        setY((value) => {
            if (value > 0) {
                return 0
            }
            return 60
        })
    })
    const buttonState = useRef({
        focus: () => {},
        blur: () => {},
        hover: () => {},
        leave: () => {}
    }).current
    return <div style={{
        position: "Absolute",
        top: 50,
        bottom: 50,
        left: 50,
        right: 50,
    }}>
        <div class={emo`
            transition-property: translate;
            transition-duration: 1s;
        `} style={{
            position: "Relative",
            translate: [0, y],
            opacity: 1
        }}>
            <label style={{
                fontSize: 32
            }} text="Hello World"></label>
        </div>
        <button 
            onClick={onPress.current}
            onNavigationSubmit={onPress.current}
            onFocusIn={buttonState.focus}
            onFocusOut={buttonState.blur}
            onBlur={buttonState.blur}
            onPointerEnter={buttonState.hover}
            onPointerLeave={buttonState.leave}
        >
            <label text="change"></label>
        </button>
    </div>
}

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

Yep, that fixes it for buttons. There's apparently multiple _attached errors, and I've seen more of them on other components. I'll track down a repro for those. (I still don't see any transitions, do you have any working examples with them?)

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

Even more minimal example; this one can be copied and pasted to a fresh project I think

import { useEffect, useRef, useState } from 'onejs-preact/hooks';
import { h } from 'preact';

export const App = () => {
    const [y, setY] = useState(0)
    useEffect(() => {
        setTimeout(() => {
            setY(60)
        }, 5000)
    }, [])
    const onPress = useRef(() => {
        setY((value) => {
            if (value > 0) {
                return 0
            }
            return 60
        })
    })
    const buttonState = {
        focus: () => {},
        blur: () => {},
        hover: () => {},
        leave: () => {}
    }
    return <div style={{
        position: "Absolute",
        top: 50,
        bottom: 50,
        left: 50,
        right: 50,
    }}>
        <div style={{
            position: "Relative",
            transitionProperty: ["opacity", "translate"],
            transitionDuration: [0.2, 0.3],
            translate: [0, y],
            opacity: 1
        }}>
            <label style={{
                fontSize: 32
            }} text="Hello World"></label>
        </div>
        <button
            onClick={onPress.current}
            onNavigationSubmit={onPress.current}
            onFocusIn={buttonState.focus}
            onFocusOut={buttonState.blur}
            onBlur={buttonState.blur}
            onPointerEnter={buttonState.hover}
            onPointerLeave={buttonState.leave}
        >
            <label text="change"></label>
        </button>
    </div>
}

import { useEffect, useRef, useState } from 'onejs-preact/hooks';
import { h } from 'preact';

export const App = () => {
    const [y, setY] = useState(0)
    useEffect(() => {
        setTimeout(() => {
            setY(60)
        }, 5000)
    }, [])
    const onPress = useRef(() => {
        setY((value) => {
            if (value > 0) {
                return 0
            }
            return 60
        })
    })
    const buttonState = {
        focus: () => {},
        blur: () => {},
        hover: () => {},
        leave: () => {}
    }
    return <div style={{
        position: "Absolute",
        top: 50,
        bottom: 50,
        left: 50,
        right: 50,
    }}>
        <div style={{
            position: "Relative",
            transitionProperty: ["opacity", "translate"],
            transitionDuration: [0.2, 0.3],
            translate: [0, y],
            opacity: 1
        }}>
            <label style={{
                fontSize: 32
            }} text="Hello World"></label>
        </div>
        <button
            onClick={onPress.current}
            onNavigationSubmit={onPress.current}
            onFocusIn={buttonState.focus}
            onFocusOut={buttonState.blur}
            onBlur={buttonState.blur}
            onPointerEnter={buttonState.hover}
            onPointerLeave={buttonState.leave}
        >
            <label text="change"></label>
        </button>
    </div>
}

Issues this has: * _attached error when interacting with the button (I think it's the event handlers) * transition doesn't work (this is true even when I upgraded OneJS)

95 replies

•Created by amorphous on 9/15/2024 in #general-discussion

Migrating from v1 -> v2

I also don't think the system in v2 right now likes setTimeout

95 replies