Aryxst Posts - Answer Overflow

Aryxst

Explore posts from servers

DIAdiscord.js - Imagine an app SSolidJS DTDrizzle Team

•Created by Aryxst on 9/22/2024 in #support

fix function running only on build

I want to load the function from this file on mount https://github.com/Aryxst/tauri-app/blob/master/src/use-controller.tsx in home.tsx:

import { onMount } from 'solid-js';
import useController from '../use-controller';

function Home() {
 onMount(() => {
  useController()
   .on('pad-a-down', () => {
    console.log('A is down!');
   })
   .on('pad-a-up', () => {
    console.log('A is up!');
   })
   .on('pad-b-down', () => {
    console.log('B is down!');
   })
   .on('pad-b-up', () => {
    console.log('B is up!');
   })
   .on('pad-x-down', () => {
    console.log('X is down!');
   })
   .on('pad-x-up', () => {
    console.log('X is up!');
   })
   .on('pad-y-down', () => {
    console.log('Y is down!');
   })
   .on('pad-y-up', () => {
    console.log('Y is up!');
   });
 });

 return <div>Hello World!</div>;
}

export default Home;

import { onMount } from 'solid-js';
import useController from '../use-controller';

function Home() {
 onMount(() => {
  useController()
   .on('pad-a-down', () => {
    console.log('A is down!');
   })
   .on('pad-a-up', () => {
    console.log('A is up!');
   })
   .on('pad-b-down', () => {
    console.log('B is down!');
   })
   .on('pad-b-up', () => {
    console.log('B is up!');
   })
   .on('pad-x-down', () => {
    console.log('X is down!');
   })
   .on('pad-x-up', () => {
    console.log('X is up!');
   })
   .on('pad-y-down', () => {
    console.log('Y is down!');
   })
   .on('pad-y-up', () => {
    console.log('Y is up!');
   });
 });

 return <div>Hello World!</div>;
}

export default Home;

Why does this work on build?

1 replies

SSolidJS

•Created by Aryxst on 3/13/2024 in #support

How do i make a list properly reactive to state changes?

So I have this for loops that iterates in an array of data fetched on page load, i devided the sorting functions in 2 categories checkerFunctions that check a checkbox value, and filterFunctions that check a object value in a signal. The filterFunctions steps works just fine, but i don't know why the checkFunctions don't. Am i assigning a bool wrongfully?

 const checkerFunctions = {
  NotUserCreator: item => item.Creator.Id == userId,
 };
 const filterFunctions = {
  robux: item => {
   return item.Product.PriceInRobux >= activeFilters().robux.min && item.Product.PriceInRobux <= activeFilters().robux.max;
  },
 };
 const [activeFilters, setActiveFilters] = createSignal({
  ...Object.fromEntries(
   Object.entries(checkerFunctions).map(([key]) => {
    return [key, false];
   }),
  ),
  robux: { min: 0, max: Infinity },
  NotUserCreator: false,
 });

 const FiltersComponent = () => (
  <div>
   <h2>Filters:</h2>
   <hr />
   {Object.keys(checkerFunctions).map(key => {
    return (
     <div>
      <input type='checkbox' checked={activeFilters()?.[key]} onChange={() => setActiveFilters(pre => ({ ...pre, [key]: !pre[key] }))} />
      <label for={key}>{key}</label>
     </div>
    );
   })}
   <h2>Robux</h2>
   <div>
    <div>
     <label>Min:</label>
     <input
      onInput={e => {
       numericInput(e);
       setActiveFilters(pre => ({ ...pre, robux: { max: pre.robux.max, min: Number(e.currentTarget.value) } }));
       if (!e.target.value) {
        setActiveFilters(pre => ({ ...pre, robux: { max: pre.robux.max, min: 0 } }));
       }
      }}

     />
    </div>

    <div>
     <label>Max:</label>
     <input
      onInput={e => {
       numericInput(e);
       setActiveFilters(pre => ({ ...pre, robux: { min: pre.robux.min, max: Number(e.currentTarget.value) } }));
       if (!e.target.value) {
        setActiveFilters(pre => ({ ...pre, robux: { min: pre.robux.min, max: Infinity } }));
       }
      }}
     />
    </div>
   </div>
  </div>
 );

 const checkerFunctions = {
  NotUserCreator: item => item.Creator.Id == userId,
 };
 const filterFunctions = {
  robux: item => {
   return item.Product.PriceInRobux >= activeFilters().robux.min && item.Product.PriceInRobux <= activeFilters().robux.max;
  },
 };
 const [activeFilters, setActiveFilters] = createSignal({
  ...Object.fromEntries(
   Object.entries(checkerFunctions).map(([key]) => {
    return [key, false];
   }),
  ),
  robux: { min: 0, max: Infinity },
  NotUserCreator: false,
 });

 const FiltersComponent = () => (
  <div>
   <h2>Filters:</h2>
   <hr />
   {Object.keys(checkerFunctions).map(key => {
    return (
     <div>
      <input type='checkbox' checked={activeFilters()?.[key]} onChange={() => setActiveFilters(pre => ({ ...pre, [key]: !pre[key] }))} />
      <label for={key}>{key}</label>
     </div>
    );
   })}
   <h2>Robux</h2>
   <div>
    <div>
     <label>Min:</label>
     <input
      onInput={e => {
       numericInput(e);
       setActiveFilters(pre => ({ ...pre, robux: { max: pre.robux.max, min: Number(e.currentTarget.value) } }));
       if (!e.target.value) {
        setActiveFilters(pre => ({ ...pre, robux: { max: pre.robux.max, min: 0 } }));
       }
      }}

     />
    </div>

    <div>
     <label>Max:</label>
     <input
      onInput={e => {
       numericInput(e);
       setActiveFilters(pre => ({ ...pre, robux: { min: pre.robux.min, max: Number(e.currentTarget.value) } }));
       if (!e.target.value) {
        setActiveFilters(pre => ({ ...pre, robux: { min: pre.robux.min, max: Infinity } }));
       }
      }}
     />
    </div>
   </div>
  </div>
 );

3 replies

Gaming

Programming