Braveheart
Braveheart
Explore posts from servers
DDenoSSolidJSDTDrizzle Team
PostsComments
SSolidJS
Created by Braveheart on 5/22/2023 in #support
force a dom update when updating a signal before the rest of the onMount function
in this code csvColumns is dependant on setData, how can I force the render update? 
  const csvColumns = (
    <Show when={data()}>
      <For each={data()}>{(item, index) => <ConnectionTarget name={item} />}</For>
    </Show>
  );

  onMount(() => {
    const csv = `Name,Email,Age
John Doe,[email protected],30
Jane Smith,[email protected],25
Alice Johnson,[email protected],35
`;
    const rows = csv.split('\n');
    const firstRow = rows[0].split(',');
    setData(firstRow);

    //offload the line drawing
    debugger;
    const colsX = csvColumns.map((component) => component());
  });
  const csvColumns = (
    <Show when={data()}>
      <For each={data()}>{(item, index) => <ConnectionTarget name={item} />}</For>
    </Show>
  );

  onMount(() => {
    const csv = `Name,Email,Age
John Doe,[email protected],30
Jane Smith,[email protected],25
Alice Johnson,[email protected],35
`;
    const rows = csv.split('\n');
    const firstRow = rows[0].split(',');
    setData(firstRow);

    //offload the line drawing
    debugger;
    const colsX = csvColumns.map((component) => component());
  });
10 replies
SSolidJS
Created by Braveheart on 5/15/2023 in #support
using the callback to <Show> and update store, results in whole store being set to new value
  <Show when={'companyName' in formDataStore && formDataStore}>
      {(currentDataStore) => {
        return (
  <Show when={'companyName' in formDataStore && formDataStore}>
      {(currentDataStore) => {
        return (
if I do this in form setFormDataStore({ companyDetails: { phoneNumber: e.currentTarget.value } }); then the only value in the store is as follows: causing other part to throw undefined errors
34 replies
SSolidJS
Created by Braveheart on 5/11/2023 in #support
Typesafe <Show> only when store has data
the end result I want 
  return (
    <Show when={mockDataStore}>
    {mockDataStore.prop} // don't want this to be called giving runtime errors on render when mockDataStore has empty object
  return (
    <Show when={mockDataStore}>
    {mockDataStore.prop} // don't want this to be called giving runtime errors on render when mockDataStore has empty object
I've tried various things like createStore<StoreType | {}>({}); -> results in ts errors X doesn't exist on {} re assigning store to previous declarations 
    const [mockDataStore2, setMockDataStore2] = createStore<StoreType | {}>({});

    mockDataStore = mockDataStore2;
    setMockDataStore = setMockDataStore2;
    const [mockDataStore2, setMockDataStore2] = createStore<StoreType | {}>({});

    mockDataStore = mockDataStore2;
    setMockDataStore = setMockDataStore2;
the easy way around this is to create store type object of just empty values until the real values come, but that just seems lame : 
const mockData: StoreType = {
  companyName: 'Test Company',
  date: new Date(),
  selectType: 'Grocery',
  address: {
    addressLine1: '123 Test Street',
  },
};
  const [mockDataStore, setMockDataStore] = createStore<StoreType | {}>(mockData);
const mockData: StoreType = {
  companyName: 'Test Company',
  date: new Date(),
  selectType: 'Grocery',
  address: {
    addressLine1: '123 Test Street',
  },
};
  const [mockDataStore, setMockDataStore] = createStore<StoreType | {}>(mockData);
49 replies
SSolidJS
Created by Braveheart on 5/5/2023 in #support
suspense + store
if I have a form tied to a store that gets populated async, how do i use this with <suspense so i don't need loading state management
50 replies
SSolidJS
Created by Braveheart on 2/15/2023 in #support
False positive: `Make sure your app is wrapped in a <Router />` , @solidjs/router 0:7:0 - in npm lib
I have a npm component ( <O_Header) that assumes a router is wrapping it, ie, uses <A> tags wrapping the app in a router: 
/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from '@solidjs/router';

import './index.css';
import { App } from './app';
render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root') as HTMLElement
);
/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from '@solidjs/router';

import './index.css';
import { App } from './app';
render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root') as HTMLElement
);
usage in the problem project 
export const App: Component = () => {
  return (
    <>
      <O_Header
        NavItems={[
          { url: '/home', text: 'Home' },
        ]}>
        <A href="/">Your logo here</A>
      </O_Header>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/users" component={Users} />
      </Routes>
    </>
  );
};
export const App: Component = () => {
  return (
    <>
      <O_Header
        NavItems={[
          { url: '/home', text: 'Home' },
        ]}>
        <A href="/">Your logo here</A>
      </O_Header>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/users" component={Users} />
      </Routes>
    </>
  );
};
utils.js?v=84c27385:28 Uncaught Error: Make sure your app is wrapped in a <Router /> at invariant (utils.js?v=84c27385:28:15) at useRouter (routing.js?v=84c27385:9:32) at useRoute (routing.js?v=84c27385:11:75) at useResolvedPath (routing.js?v=84c27385:13:19) at A (components.jsx:80:16) at dev.js:524:12 at untrack (dev.js:427:12) at Object.fn (dev.js:520:37)
9 replies
SSolidJS
Created by Braveheart on 1/2/2023 in #support
Docs for debugging Solid Start
2 replies
SSolidJS
Created by Braveheart on 12/29/2022 in #support
Access dynamic route params in components outside of the FileRouter
In this structure: 
 <Body class="h-full bg-slate-900 text-slate-300">
        <ErrorBoundary>
          <Suspense fallback={<div>Loading</div>}>
            <O_header />

            <Routes>
              <FileRoutes />
            </Routes>
            <O_Footer></O_Footer>
          </Suspense>
        </ErrorBoundary>
        <Scripts />
      </Body>
 <Body class="h-full bg-slate-900 text-slate-300">
        <ErrorBoundary>
          <Suspense fallback={<div>Loading</div>}>
            <O_header />

            <Routes>
              <FileRoutes />
            </Routes>
            <O_Footer></O_Footer>
          </Suspense>
        </ErrorBoundary>
        <Scripts />
      </Body>
I need the header to render the following: <A href={/${params.lang}/sign_in} class="navAction"> where lang is derived from this url http://localhost:3000/en however params.lang is undefined unless its inside a route
7 replies
SSolidJS
Created by Braveheart on 12/15/2022 in #support
SOLID svg tsc error
8 replies