AesthetiCoder Posts - Answer Overflow

AesthetiCoder

•Created by AesthetiCoder on 12/15/2023 in #support

Is solids SEO friendly ?

Analyzing the webpage solid generate in production I get problems whit SEO, the same problem that react has, only the div with id root is render, yes the actual page has content but is not reflected in the html, other times I see that the first render of solid is the empty div and then it add the html after, how can I prevent this to happens

10 replies

SSolidJS

•Created by AesthetiCoder on 11/24/2023 in #support

how to put the types to the context

2 replies

SSolidJS

•Created by AesthetiCoder on 11/12/2023 in #support

A vs Link

hello guys I have some question about solid-router, for example, there are two ways of navigating in solid Router the Link component and the A component, what is the differences between those, and also when we use solid-router, we are using SSR by default? for example in the docs I see you have to use renderToString to serve SSR components, by default solid is not SEO friendly as I see maybe I am wrong

8 replies

SSolidJS

•Created by AesthetiCoder on 11/1/2023 in #support

image error and load

hi guys i am making a retry function on an image when an error happens, also i want to improve my code and also i am getting a type error in the event on error but that type exists

const CustomImage: Component<CustomImageType> = (props) =>
{
  const handleError: JSX.EventHandlerUnion<HTMLImageElement, Event> = (event) =>
  {
    event.target.src = props.source;
  };

  return (
    <picture class='custom-image'>
      <img
        src={props.source}
        onerror={handleError}
      />
    </picture>
  );
};

e

const CustomImage: Component<CustomImageType> = (props) =>
{
  const handleError: JSX.EventHandlerUnion<HTMLImageElement, Event> = (event) =>
  {
    event.target.src = props.source;
  };

  return (
    <picture class='custom-image'>
      <img
        src={props.source}
        onerror={handleError}
      />
    </picture>
  );
};

e

1 replies

SSolidJS

•Created by AesthetiCoder on 11/1/2023 in #support

splitProps default value

how can i define the default value of a prop with split prop, for example the "loader" prop is optional i want tha make it true by default, but it is undefined

const [ local, rest ] = splitProps(props, ['loader'])

const [ local, rest ] = splitProps(props, ['loader'])

yes i can use a ternary and validate the value but i want to set the default value if it is possible

  local.loader ? true : false

  local.loader ? true : false

3 replies

SSolidJS

•Created by AesthetiCoder on 10/25/2023 in #support

Re render on filter in a for

I have an animation that runs when the element is visible with an observable the problem is after the first animation is all good but I have a button that filters that for, and when it gets filtered it doesn't re-render I solve this in react by changing the key of the element so react detects that the filter is a new element every time, how can this be done in solid?

const SectionPlan = () => 
{
  const [ filter, setFilter ] = useSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
  <>
        <button onclick={handleFilterHome}>
          {sectionPlanLocale.buttonHome}
        </button>

        <button onclick={handleFilterEnterprise}>
          {sectionPlanLocale.buttonEnterprise}
        </button>

        <For each={sectionPlanLocale.plan.filter((element) => element.category === filter())}>
          {(plan) => <CardPlan
            image={plan.image}
            price={plan.price}
            title={plan.title}
            benefit={plan.benefit}
            velocity={plan.velocity}
            data-animate='animate-right-left'
          />
          }
        </For>
    </>
  )
}

const SectionPlan = () => 
{
  const [ filter, setFilter ] = useSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
  <>
        <button onclick={handleFilterHome}>
          {sectionPlanLocale.buttonHome}
        </button>

        <button onclick={handleFilterEnterprise}>
          {sectionPlanLocale.buttonEnterprise}
        </button>

        <For each={sectionPlanLocale.plan.filter((element) => element.category === filter())}>
          {(plan) => <CardPlan
            image={plan.image}
            price={plan.price}
            title={plan.title}
            benefit={plan.benefit}
            velocity={plan.velocity}
            data-animate='animate-right-left'
          />
          }
        </For>
    </>
  )
}

2 replies

SSolidJS

•Created by AesthetiCoder on 10/24/2023 in #support

Signal dont update the class

I have two components one the principal with the signal and te other is the button, the class shloud update depending on the state but is not working, the state change, but the ui dont change

const SectionPlan = () =>
{
  const [filter, setFilter] = createSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
    <section>
        <Button
          onclick={handleFilterHome}
          class={filter() === 'home' ? 'button-plan button-plan--active' : 'button-plan')}
        >
          {sectionPlanLocale.buttonHome}
        </Button>
        <Button
          onclick={handleFilterEnterprise}
          class={filter() === 'enterprise' ? 'button-plan button-plan--active' : 'button-plan')}
        >
          {sectionPlanLocale.buttonEnterprise}
        </Button>
    </section>
  );
};

export { SectionPlan };

const SectionPlan = () =>
{
  const [filter, setFilter] = createSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
    <section>
        <Button
          onclick={handleFilterHome}
          class={filter() === 'home' ? 'button-plan button-plan--active' : 'button-plan')}
        >
          {sectionPlanLocale.buttonHome}
        </Button>
        <Button
          onclick={handleFilterEnterprise}
          class={filter() === 'enterprise' ? 'button-plan button-plan--active' : 'button-plan')}
        >
          {sectionPlanLocale.buttonEnterprise}
        </Button>
    </section>
  );
};

export { SectionPlan };

const Button = ({ children, class: customClass, onclick, ...rest }) =>
{
 

  return (
    <button
      onclick={onclick}
      class={customClass}
       {...rest}
    >
      {children}
    </button>
  );
};

export { Button };

const Button = ({ children, class: customClass, onclick, ...rest }) =>
{
 

  return (
    <button
      onclick={onclick}
      class={customClass}
       {...rest}
    >
      {children}
    </button>
  );
};

export { Button };

10 replies

SSolidJS

•Created by AesthetiCoder on 10/19/2023 in #support

How is the type of the onclick event ?

Hello I have a question about the on-click method of the button, the event doesn't have a type, the type is something like this, is that the real type? it should be one type only for the event

  const handleClick = (event: MouseEvent & {
    target: Element;
    currentTarget: HTMLButtonElement;
  }) =>
  {
    handleRipple(event);

    if(onclick)
    {
      onclick();
    }
  };

  return (
    <button
      onclick={handleClick}
    >
      {children}
    </button>
  );

  const handleClick = (event: MouseEvent & {
    target: Element;
    currentTarget: HTMLButtonElement;
  }) =>
  {
    handleRipple(event);

    if(onclick)
    {
      onclick();
    }
  };

  return (
    <button
      onclick={handleClick}
    >
      {children}
    </button>
  );

11 replies

SSolidJS

•Created by AesthetiCoder on 9/20/2023 in #support

How can i go back with @solidjs/router package ?

i want to go back in the history of the url with all the search parameters and more, is this posible i dnt se in the doc that method

3 replies

SSolidJS

•Created by AesthetiCoder on 3/26/2023 in #support

Animate on scroll

2 replies

SSolidJS

•Created by AesthetiCoder on 2/14/2023 in #support

Dinamyc inline svg

hi everyone, good night i have a question, i am new whit solid js and i want to make a component that can render svg dynamically, these svg are in my public directory, so an example of this cloud be react-svgr, his library can import the svg an render as a component, the result is a inline svg and ou can change his props https://react-svgr.com I saw this method in react to import dinamically a svg, it is posible to make this in solidjs ? https://stackoverflow.com/questions/61339259/how-to-dynamically-import-svg-and-render-it-inline

6 replies

Gaming

Programming