neos / neos-ui

Neos CMS UI written in ReactJS with Immutable data structures.
GNU General Public License v3.0
264 stars 135 forks source link

Task: Remove JS/TS decorators #3270

Open mhsdesign opened 1 year ago

mhsdesign commented 1 year ago

Remove JS decorators because the rfc was rejected.

mhsdesign commented 1 year ago

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` ```ts 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 = ConnectedProps; export const NeosContext: React.Context; type MapRegistryToPropsParam = ( globalRegistry: GlobalRegistry ) => TStateProps; interface Neos { ( mapRegistryToProps: MapRegistryToPropsParam ): 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 https://github.com/neos/neos-ui/issues/3207#issuecomment-1272336247

mhsdesign commented 1 year ago

hmm decorators might have a second chance https://www.heise.de/news/Programmiersprache-TypeScript-5-0-bringt-neues-Konzept-fuer-Decorators-7472681.html

Sebobo commented 1 year ago

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.