Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task: Remove JS/TS decorators #3270

Open
mhsdesign opened this issue Nov 25, 2022 · 3 comments
Open

Task: Remove JS/TS decorators #3270

mhsdesign opened this issue Nov 25, 2022 · 3 comments
Labels
Task Stale Something that would be cool to clean up but is not beeing done

Comments

@mhsdesign
Copy link
Member

Remove JS decorators because the rfc was rejected.

@mhsdesign mhsdesign added the Task Stale Something that would be cool to clean up but is not beeing done label Nov 25, 2022
@mhsdesign
Copy link
Member Author

As discussed - this is a right step into the right direction - but even better would be functional components with hooks (and ts) ... which is quite impossible as this would equal an ui rewrite 2.0 ^^

since esbuild seems to work for now with these decorators we may leave them as is - it would only make the code a little better.

a little more profit would be in cases where typescript is used for components as the decorators cannot be typed but the hoc function syntax works with typescript like:

@neos-project/neos-ui-decorators.d.ts

this is not the same as in @neos-project/neos-ui-decorators this is written from hand by myself and works differently - more like connect

declare module "@neos-project/neos-ui-decorators" {
    import {
        InferableComponentEnhancerWithProps,
        ConnectedProps,
    } from "react-redux";
    import { GlobalRegistry } from "@neos-project/neos-ts-interfaces";

    export interface NeosContextInterface {
        globalRegistry: GlobalRegistry;
        configuration: {};
        routes: {};
    }

    /**
     * Infers the type of props that a neosifier will inject into a component.
     * we reuse this behavior from {@link ConnectedProps}
     */
    export type NeosifiedProps<TNeosifier> = ConnectedProps<TNeosifier>;

    export const NeosContext: React.Context<NeosContextInterface | null>;

    type MapRegistryToPropsParam<TStateProps> = (
        globalRegistry: GlobalRegistry
    ) => TStateProps;

    interface Neos {
        <TStateProps = {}, TOwnProps = {}>(
            mapRegistryToProps: MapRegistryToPropsParam<TStateProps>
        ): InferableComponentEnhancerWithProps<
            TStateProps & { neos: NeosContextInterface },
            TOwnProps
        >;
    }

    export const neos: Neos;
}
import { neos, NeosifiedProps } from "@neos-project/neos-ui-decorators"; // NeosifiedProps is basically ConnectedProps
import { connect, ConnectedProps } from "react-redux";

const neosifier = neos((globalRegistry) => ({
    secondaryEditorsRegistry: globalRegistry
        .get("inspector")
        .get("secondaryEditors")
}));

const connector = connect(
    (state) => ({
        node: selectors.CR.Nodes.focusedSelector(state),
    })
);


type NeosProps = NeosifiedProps<typeof neosifier>;

type StateProps = ConnectedProps<typeof connector>;

type OwnProps = {}

type Props = NeosProps & StateProps & OwnProps;

class YourComponent extends React.PureComponent<Props>
{
    public render()
    {
    }
}

export default neosifier(connector(YourComponent));

Originally posted by @mhsdesign in #3207 (comment)

@mhsdesign
Copy link
Member Author

@Sebobo
Copy link
Member

Sebobo commented Jan 31, 2023

I think I would keep the decorators if they become a standard or reliable support in TS5. They help with structure IMO.
But we should also think about how we call our decorators. For me it's very unintuitive how to use them without copying them from another component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Task Stale Something that would be cool to clean up but is not beeing done
Projects
None yet
Development

No branches or pull requests

2 participants