MikeM42
MikeM42
SSolidJS
Created by MikeM42 on 6/12/2024 in #support
createStore doesn't signal with a class as the store, but everything else works.
Many thanks for pointing me in the right direction @peerreynders . I may have to change my generators to do plain pjo interfaces, but for now I am going to try and work with classes using createMutable
7 replies
SSolidJS
Created by MikeM42 on 6/12/2024 in #support
createStore doesn't signal with a class as the store, but everything else works.
I can make a small test project if it helps to reproduce.
7 replies
SSolidJS
Created by MikeM42 on 6/12/2024 in #support
createStore doesn't signal with a class as the store, but everything else works.
Small amendment to the above it seems to work fine for 1 level class like above but doesn't seem to work with nested classes. If you use the below classes: class SomeThing { 'tryswitch': boolean; constructor() { this.tryswitch = false; } } class TryMe { 'thing': SomeThing; 'trysw': boolean; constructor() { this.thing = new SomeThing(); this.trysw = false; } } ANd you replace tryswitch with thing.tryswitch in the above it won't work, whereas with trysw it will. Note that getters and setters of the store continue to work fine, its just that the signal doesn't seem to happen.
7 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
I think I see, it didn't quite work for what I had in mind so will need to experiment a bit more on how to integrate it in my flow. Many thanks for your help though.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
How do you declare the Route to the component under which you declare the nested route though? You must declare it in some way that it will render any component unde /xyz/something through the component that holds the nested route, no?
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
That does look pretty cool! I think I may have a use for this, will let you know when I've had a chance to try it out.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
Always interested yes, would be great to see if there's a way to solve this.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
I'd beg to differ, but I think that might lead us down a long winded mostly philosophical debate. That being said I was able to do what you proposed. Had to externalize some properties etc. but it works, so thats cool. Thanks for the assist!
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
That could indeed be an option, I'll see if I can get the provider to only initialize once. Not as elegant as I would have wanted but it could indeed work.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
I guess I could always create a master context, and then "attach" other contexts to that through a map or something, and the always useContext on the master context, and pull the sub-context from that, possibly even ad an remove the sub-context through onMount and onCleanup or something but would have been nicer if I could do it in the SolidJS framework.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
Its more a segregation of concerns thing rather than anything else, I could put the context at the top level but then it feels like I am shoving everything at the top of the tree. Which could end up being very hard to maintain in the long run. The idea here was to have lets say a "sub-functionality" in the web-app that had its own context and its own routes. Makes things cleaner and easier to maintain as independent entities.
22 replies
SSolidJS
Created by MikeM42 on 5/15/2024 in #support
Solid Router within Router
Hmm I wonder how I make this work, the problem is not so much the nested routes, I could declre the routes without the Router wrapper but I want those nested routes to be within a Context, and having Route wrapped in a context doesn't seem to work that well, it works for Router but not Route. If I wrap the routes in a Context Provider what I get on the screen is: [object Object][object Object] Because its trying to render the routes which obviously dooesn't work that well. Maybe I need to put some other logic in my Contexct provider and rather than just doing <ContractContext.Provider value={value}> {props.children} </ContractContext.Provider> I should maybe handle the props.children that are routes differently, but I don't kno whow 😩
22 replies
SSolidJS
Created by MikeM42 on 4/11/2024 in #support
computations created outside ... in a Context
This worked great! Thank you for the help!
5 replies
SSolidJS
Created by MikeM42 on 2/24/2024 in #support
SolidJS with Router behind Apache Proxy
Thank you, that did the trick. I wjust need to figure out the best way to do that mapping. Wonder if vite could help with that.
4 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
I was able to make it work by putting an ErrorBoundary around the form, I figured that probably that is when the error gets generated, hence probably where I should have an overal catch. I then had to wrapper the form in a component so that it could be both the fallback as well as the main component. This gives me mostly the behaviour I want. The one funky thing I had to do was to set the query twice in handleSubmit, so that the resource would reflect the change, which wasn't too bad.
10 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
I'll try and put together a super simple example based on my latest code so that you can reproduce locally hopefully. (Side not I am running this in Edge)
10 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
I did not int he code I pasted but I tried to put an ErrorBoundary around the form afterwards and it didn't help. I have not tried using Suspense. As I mentioned above also, the data.error does get set, and it would seem from my debug session that the code does get called as well, its just that the DOM doesn't change. I've also tried using Switch / Match instead of the structure I have in the code above but the behavior is the same.
10 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
Note, that I was able to hook to a debugger and can see that data.error is being set, but for some reason the DOM is not reacting properly, as if it didn't render when the error occurs.
10 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
And here is the fetcher, I've left in comments a few different ways I've tried the fetcher.
interface URLs {
urls: URL[]
}

export async function getURLs(query: string): Promise<URL[]> {
if (query.trim() === "") {
return [];
}
console.log("Retrieving URLs for: " + query)
// const result = await fetch(HOST_URL + "/api/news/urls", {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify(
// {"query" : query})
// })
// .then(response => response.json())
// .then(json => json as URLs)
// .catch((error) => {
// console.log("Shit went sideway: " + error)
// return Promise.reject("Shit went sideways");
// });

// const response = await fetch(HOST_URL + "/api/news/urls", {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify(
// {"query" : query})
// });
// if (!response.ok) {
// console.log("Houston there is a problem");
// throw new Error("The server encountered errors: " + response.statusText);
// }
// const result: URLs = await response.json();

const response = await fetch(HOST_URL + "/api/news/urls", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(
{"query" : query})
});

const result: URLs = await response.json();
return result.urls;
interface URLs {
urls: URL[]
}

export async function getURLs(query: string): Promise<URL[]> {
if (query.trim() === "") {
return [];
}
console.log("Retrieving URLs for: " + query)
// const result = await fetch(HOST_URL + "/api/news/urls", {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify(
// {"query" : query})
// })
// .then(response => response.json())
// .then(json => json as URLs)
// .catch((error) => {
// console.log("Shit went sideway: " + error)
// return Promise.reject("Shit went sideways");
// });

// const response = await fetch(HOST_URL + "/api/news/urls", {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify(
// {"query" : query})
// });
// if (!response.ok) {
// console.log("Houston there is a problem");
// throw new Error("The server encountered errors: " + response.statusText);
// }
// const result: URLs = await response.json();

const response = await fetch(HOST_URL + "/api/news/urls", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(
{"query" : query})
});

const result: URLs = await response.json();
return result.urls;
10 replies
SSolidJS
Created by MikeM42 on 2/4/2024 in #support
createResource doesn't seem to be catching errors.
Sure. Here you go... this is the core function
function Content() {
const [text, setText] = createSignal("")
const [query, setQuery] = createSignal("");

const handleChange = (event: Event) => {
const {value} = event.currentTarget as HTMLInputElement;
console.log("Change is:" + value)
setText(value)
}

const handleSubmit = (event: Event) => {
event.preventDefault()
setQuery(text())
}

const [data] = createResource(query, getURLs);

return (
<div class={styles.App}>
<header class={styles.header}>
<h1 class={"title is-1 has-text-grey-light"}>Speech Creation Assistant</h1>
<div>
<Show when={(data.latest ?? [] as URL[]).length == 0}>
<form onSubmit={handleSubmit}>
<input class="input" type="text" placeholder="Enter the topic" name="text"
value={text()} onChange={handleChange}/>
<button class="button is-primary" type="submit">Submit</button>
</form>
</Show>
</div>
<div>
{data.loading && (
<p>Loading urls ...</p>
)}
{data.error && (
<div>
<p>Error searching for relevant articles</p>
</div>
)}
{data() && (
<URLList urls={data() ?? [] as URL[]} query={query()}/>
)}
</div>
</header>
</div>
);
}
function Content() {
const [text, setText] = createSignal("")
const [query, setQuery] = createSignal("");

const handleChange = (event: Event) => {
const {value} = event.currentTarget as HTMLInputElement;
console.log("Change is:" + value)
setText(value)
}

const handleSubmit = (event: Event) => {
event.preventDefault()
setQuery(text())
}

const [data] = createResource(query, getURLs);

return (
<div class={styles.App}>
<header class={styles.header}>
<h1 class={"title is-1 has-text-grey-light"}>Speech Creation Assistant</h1>
<div>
<Show when={(data.latest ?? [] as URL[]).length == 0}>
<form onSubmit={handleSubmit}>
<input class="input" type="text" placeholder="Enter the topic" name="text"
value={text()} onChange={handleChange}/>
<button class="button is-primary" type="submit">Submit</button>
</form>
</Show>
</div>
<div>
{data.loading && (
<p>Loading urls ...</p>
)}
{data.error && (
<div>
<p>Error searching for relevant articles</p>
</div>
)}
{data() && (
<URLList urls={data() ?? [] as URL[]} query={query()}/>
)}
</div>
</header>
</div>
);
}
10 replies