DevExpress / devextreme-renovation

5 stars 16 forks source link

Named slots do not work in Angular #823

Open AryamnovEugeniy opened 2 years ago

AryamnovEugeniy commented 2 years ago

Check what generator works wrong

Declaration File

Render FirstComponent to see the issue.

first_component.tsx

/* eslint-disable @typescript-eslint/no-extraneous-class */
import {
  Component, ComponentBindings, JSXComponent,
} from '@devextreme-generator/declarations';
import { SecondComponent } from './second_component';

export const viewFunction = (): JSX.Element => (
  <SecondComponent
    appointments={
      <div className="appointments" />
    }
  />
);

@ComponentBindings()
export class FirstComponentProps {}

@Component({
  defaultOptionRules: null,
  view: viewFunction,
  jQuery: { register: true },
})
export class FirstComponent extends JSXComponent(FirstComponentProps) {}

second_component.tsx

/* eslint-disable @typescript-eslint/no-extraneous-class */
import {
  Component, ComponentBindings, JSXComponent, Slot,
} from '@devextreme-generator/declarations';
import { ThirdComponent } from './third_component';

export const viewFunction = ({
  props: {
    appointments,
  },
}: SecondComponent): JSX.Element => (
  <ThirdComponent appointments={appointments} />
);

@ComponentBindings()
export class SecondComponentProps {
  @Slot() appointments?: JSX.Element;
}

@Component({
  defaultOptionRules: null,
  view: viewFunction,
})
export class SecondComponent extends JSXComponent(SecondComponentProps) {}

third_component.tsx

/* eslint-disable @typescript-eslint/no-extraneous-class */
import {
  Component, ComponentBindings, JSXComponent, Slot,
} from '@devextreme-generator/declarations';

export const viewFunction = ({
  props: {
    appointments,
  },
}: ThirdComponent): JSX.Element => (
  <div>
    {appointments}
  </div>
);

@ComponentBindings()
export class ThirdComponentProps {
  @Slot() appointments?: JSX.Element;
}

@Component({
  defaultOptionRules: null,
  view: viewFunction,
})
export class ThirdComponent extends JSXComponent(ThirdComponentProps) {}

Current Result

Slot is not rendered: div with class appointments does not exist in DOM.

Expected Result

Slot should be rendered.

Additional Information

A version of the generator: 3.0.0

MikeVitik commented 2 years ago

Named slot forwarding doesn't work