REFACTOR: InsertModeSelector & dndTypes to TypeScript

packages/neos-ui-decorators/package.json

@@ -16,6 +16,7 @@
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
+    "hoist-non-react-statics": "^3.3.0",
     "prop-types": "^15.5.10",
     "react": "^16.12.0"
   },

packages/neos-ui-decorators/src/decorator-type-helpers.d.ts

@@ -0,0 +1,92 @@
+// Type definitions extracted from react-redux 7.1
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/59c89cc048de1e795eb3c88108fcb982ee4674ae/types/react-redux/index.d.ts
+// bundled via rollup https://github.com/Swatinem/rollup-plugin-dts/tree/master to extract only the { ConnectedProps, InferableComponentEnhancerWithProps }
+
+import {JSXElementConstructor, ComponentClass, ClassAttributes, NamedExoticComponent} from 'react';
+import {NonReactStatics} from 'hoist-non-react-statics';
+
+type DistributiveOmit<T, K extends keyof T> = T extends
+unknown ? Omit<T, K> : never;
+
+/**
+ * A property P will be present if:
+ * - it is present in DecorationTargetProps
+ *
+ * Its value will be dependent on the following conditions
+ * - if property P is present in InjectedProps and its definition extends the definition
+ *   in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P]
+ * - if property P is not present in InjectedProps then its definition will be that of
+ *   DecorationTargetProps[P]
+ * - if property P is present in InjectedProps but does not extend the
+ *   DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]
+ */
+type Matching<InjectedProps, DecorationTargetProps> = {
+    [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
+        ? InjectedProps[P] extends DecorationTargetProps[P]
+            ? DecorationTargetProps[P]
+            : InjectedProps[P]
+        : DecorationTargetProps[P];
+};
+
+/**
+ * a property P will be present if :
+ * - it is present in both DecorationTargetProps and InjectedProps
+ * - InjectedProps[P] can satisfy DecorationTargetProps[P]
+ * ie: decorated component can accept more types than decorator is injecting
+ *
+ * For decoration, inject props or ownProps are all optionally
+ * required by the decorated (right hand side) component.
+ * But any property required by the decorated component must be satisfied by the injected property.
+ */
+type Shared<
+    InjectedProps,
+    DecorationTargetProps
+    > = {
+        [P in Extract<keyof InjectedProps, keyof DecorationTargetProps>]?: InjectedProps[P] extends DecorationTargetProps[P] ? DecorationTargetProps[P] : never;
+    };
+
+// Infers prop type from component C
+type GetProps<C> = C extends JSXElementConstructor<infer P>
+    ? C extends ComponentClass<P> ? ClassAttributes<InstanceType<C>> & P : P
+    : never;
+
+// Applies LibraryManagedAttributes (proper handling of defaultProps
+// and propTypes).
+type GetLibraryManagedProps<C> = JSX.LibraryManagedAttributes<C, GetProps<C>>;
+
+// Defines WrappedComponent and derives non-react statics.
+type ConnectedComponent<
+    C extends JSXElementConstructor<any>,
+    P
+> = NamedExoticComponent<P> & NonReactStatics<C> & {
+    WrappedComponent: C;
+};
+
+// Injects props and removes them from the prop requirements.
+// Will not pass through the injected props if they are passed in during
+// render. Also adds new prop requirements from TNeedsProps.
+// Uses distributive omit to preserve discriminated unions part of original prop type
+type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> =
+    <C extends JSXElementConstructor<Matching<TInjectedProps, GetProps<C>>>>(
+        component: C
+    ) => ConnectedComponent<C, DistributiveOmit<GetLibraryManagedProps<C>, keyof Shared<TInjectedProps, GetLibraryManagedProps<C>>> & TNeedsProps>;
+
+// Injects props and removes them from the prop requirements.
+// Will not pass through the injected props if they are passed in during
+// render.
+type InferableComponentEnhancer<TInjectedProps> =
+    InferableComponentEnhancerWithProps<TInjectedProps, {}>;
+
+/**
+ * Infers the type of props that a connector will inject into a component.
+ */
+type ConnectedProps<TConnector> =
+    TConnector extends InferableComponentEnhancerWithProps<infer TInjectedProps, any>
+        ? unknown extends TInjectedProps
+            ? TConnector extends InferableComponentEnhancer<infer TInjectedProps>
+                ? TInjectedProps
+                : never
+            : TInjectedProps
+        : never;
+
+export {ConnectedProps as HighOrderComponentProps, InferableComponentEnhancerWithProps};

packages/neos-ui-decorators/src/index.ts

@@ -1,7 +1 @@
-import neos, {NeosContext, NeosInjectedProps} from './neos';
-
-export {
-    neos,
-    NeosContext,
-    NeosInjectedProps
-};
+export {neos, NeosContext, NeosifiedProps} from './neos';

packages/neos-ui-decorators/src/neos.d.ts

@@ -0,0 +1,48 @@
+import {
+    InferableComponentEnhancerWithProps,
+    HighOrderComponentProps
+} from './decorator-type-helpers';
+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.
+ *
+ * @example
+ *  const neosifier = neos((globalRegistry: GlobalRegistry) => ({
+ *      i18nRegistry: globalRegistry.get('i18n')
+ *  }));
+ *  type NeosProps = NeosifiedProps<typeof neosifier>;
+ *
+ *  const MyPlainComponent = (props: NeosProps & OwnProps) => "huhu";
+ *
+ *  export const MyComponent = neosifier(MyPlainComponent);
+ *
+ */
+export type NeosifiedProps<TNeosifier> = HighOrderComponentProps<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
+    >;
+}
+
+/**
+ * Creates an higher order component to easily spread global configuration
+ * {@link NeosifiedProps}
+ */
+export const neos: Neos;

packages/neos-ui-decorators/src/neos.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {defaultMemoize} from 'reselect';
+
+// We need to memoize configuration and global registry; otherwise a new object is created at every render; leading to
+// LOADS of unnecessary re-draws.
+const buildConfigurationAndGlobalRegistry = defaultMemoize((configuration, globalRegistry, routes) => ({configuration, globalRegistry, routes}));
+
+export const NeosContext = React.createContext(null);
+
+export const neos = (mapRegistriesToProps) => (WrappedComponent) => {
+    const Decorator = class NeosDecorator extends React.PureComponent {
+        static Original = WrappedComponent;
+
+        static contextType = NeosContext;
+
+        static displayName = `Neos(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+
+        render() {
+            return (
+                <NeosContext.Consumer>
+                    {context => {
+                        if (!context) {
+                            console.error('Context missing!', this.props);
+                            return null;
+                        }
+                        const registriesToPropsMap = mapRegistriesToProps ? mapRegistriesToProps(context.globalRegistry) : {};
+                        return (
+                            <WrappedComponent
+                                neos={buildConfigurationAndGlobalRegistry(context.configuration, context.globalRegistry, context.routes)}
+                                {...this.props}
+                                {...registriesToPropsMap}
+                            />
+                        );
+                    }}
+                </NeosContext.Consumer>
+            );
+        }
+    };
+    return Decorator;
+};

packages/neos-ui-i18n/src/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import {neos} from '@neos-project/neos-ui-decorators';
+import {neos, NeosifiedProps} from '@neos-project/neos-ui-decorators';
 import {GlobalRegistry} from '@neos-project/neos-ts-interfaces';
-import {NeosInjectedProps} from '@neos-project/neos-ui-decorators/src/neos';
 
-const regsToProps = (globalRegistry: GlobalRegistry) => ({
+const neosifier = neos((globalRegistry: GlobalRegistry) => ({
     i18nRegistry: globalRegistry.get('i18n')
-});
-type InjectedProps = NeosInjectedProps<typeof regsToProps>;
+}));
+type InjectedProps = NeosifiedProps<typeof neosifier>;
 
 interface I18nProps {
     // Fallback key which gets rendered once the i18n service doesn't return a translation.
@@ -36,4 +35,4 @@ class I18n extends React.PureComponent<I18nProps & InjectedProps> {
     }
 }
 
-export default neos<I18nProps, InjectedProps>(regsToProps)(I18n);
+export default neosifier(I18n);

yarn.lock

@@ -2421,6 +2421,7 @@ __metadata:
     reselect: ^3.0.1
     typescript: ^4.6.4
   peerDependencies:
+    hoist-non-react-statics: "*"
     prop-types: ^15.5.10
     react: ^16.12.0
   languageName: unknown