Mimikku
Mimikku
PostsComments
SSolidJS
Created by Mimikku on 2/29/2024 in #support
memo with dynamic props pass
unless I have to do the sideefect First and then return the item from the Registry, but I think thats a real valid on()
6 replies
SSolidJS
Created by Mimikku on 2/29/2024 in #support
memo with dynamic props pass
fair. I had one more case, 
  const Element = createMemo(
    on(
      () => props.name,
      () => {
        sideeffect(); 

        return IconRegistry[props.name];
      },
    ),
  );
  const Element = createMemo(
    on(
      () => props.name,
      () => {
        sideeffect(); 

        return IconRegistry[props.name];
      },
    ),
  );
but after thinking about it, i can decouple it into one createEffect(() => sideeffect(props.name)); and one direct prop pass to <Dynamic component={IconRegistry[props.name]}/> Okay i think i get it, thanks
6 replies
SSolidJS
Created by Mimikku on 2/29/2024 in #support
memo with dynamic props pass
it does work in this case, but in such other example 
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';

export interface ButtonIconProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: ButtonSize;
  icon: IconName;
  iconclass?: string;
  variant?: 'text' | 'contained';
  active?: boolean;
  cross?: boolean;
}

const keys = [
  'iconclass',
  'icon',
  'active',
  'size',
  'class',
  'children',
  'variant',
  'active',
  'cross',
] satisfies (keyof ButtonIconProps)[];
const initial = { variant: 'contained', size: 'md' } satisfies Partial<ButtonIconProps>;
export const ButtonIcon = (props: ButtonIconProps) => {
  const [local, $] = splitProps(mergeProps(initial, props), keys);

  const Cross = createMemo(() => () => {
    if (local.cross)
      return (
        <Icon
          size={local.size}
          class="stroke stroke-accent-8 w-max -rotate-45 absolute pointer-events-none"
          name="CgBorderStyleSolid"
        />
      );

    return null;
  });

  return (
    <button ...>
      <Dynamic component={Cross()} />
      ...      
    </button>
  );
};
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';

export interface ButtonIconProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: ButtonSize;
  icon: IconName;
  iconclass?: string;
  variant?: 'text' | 'contained';
  active?: boolean;
  cross?: boolean;
}

const keys = [
  'iconclass',
  'icon',
  'active',
  'size',
  'class',
  'children',
  'variant',
  'active',
  'cross',
] satisfies (keyof ButtonIconProps)[];
const initial = { variant: 'contained', size: 'md' } satisfies Partial<ButtonIconProps>;
export const ButtonIcon = (props: ButtonIconProps) => {
  const [local, $] = splitProps(mergeProps(initial, props), keys);

  const Cross = createMemo(() => () => {
    if (local.cross)
      return (
        <Icon
          size={local.size}
          class="stroke stroke-accent-8 w-max -rotate-45 absolute pointer-events-none"
          name="CgBorderStyleSolid"
        />
      );

    return null;
  });

  return (
    <button ...>
      <Dynamic component={Cross()} />
      ...      
    </button>
  );
};
It fails, it does not recognize change within that memo
6 replies