Aryxst
Aryxst
Explore posts from servers
SSolidJS
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