tozz Posts - Answer Overflow

tozz

Explore posts from servers

•Created by tozz on 4/10/2024 in #pages-help

"No wrangler.toml file found" error in mono repo setup

We have a mono repo and have configured a pages project with a root directory pointing to the application. The build command works and the dist folder is read from that root. However, in the build log we see No wrangler.toml file found , but the file is definitely there (and it works fine i dev). Could it be a bug that the root directory is not honoured when looking for the wrangler.toml file?

2 replies

SSolidJS

•Created by tozz on 12/18/2023 in #support

Solid Router 0.10.x double render of App

Just upgraded to 0.10.5 and the migration of code was simple enough, but running into a weird scenario where if I have a wrapper element in my <App> it gets rendered twice, whereas if I just have <>...</> it renders fine. This causes double rendering (two 'standard-grid' divs, two menus etc).
const App = (props: { children?: JSXElement}) => ( <div class="standard-grid"> <Menu /> {props.children} </div> );
const App = (props: { children?: JSXElement}) => ( <div class="standard-grid"> <Menu /> {props.children} </div> );
This works (but adding the div inside the <> causes it to render double again.
const App = (props: { children?: JSXElement}) => ( <> <Menu /> {props.children} <> );
const App = (props: { children?: JSXElement}) => ( <> <Menu /> {props.children} <> );
Router is setup very simply with <Router root={App}>... Edit: I had missed a previous wrapped route that caused the double render, nothing to see here 😅

1 replies

CDCloudflare Developers

•Created by tozz on 11/13/2023 in #general-help

Tunnel from pages function (or worker) to GCP k8s cluster

Imagine you have a k8s cluster locked down inside GCP and you want to deploy your SPA on Pages. Your SPA has some logic that needs to live in a function (or worker, but function would be nicer for deploys) and said function needs to communicate with your k8s cluster inside GCP. If you don't want to open up your cluster to outside traffic, would it be possible to use Cloudflare Tunnels for this?

2 replies

SSolidJS

•Created by tozz on 9/23/2023 in #support

Best way of passing props from Provider to Context

So I'm making a simple context with a Provider "wrapper" as is quite common to wrap functionality. I pass some values to it in JSX that should then be available when using the context.

interface DataGridContextValue {
  readonly markets: Record<string, string>;
}

interface DataGridProviderProps {
  children: JSX.Element;
  markets: Record<string, string>;
}

export const DataGridContext = createContext<DataGridContextValue>();

export const DataGridProvider: Component<DataGridProviderProps> = (props) => {
  // Implementation ...

  const values = {
    get markets() {
      return props.markets;
    },
    // ... implementation API.
  };

  return <DataGridContext.Provider value={values}>{props.children}</DataGridContext.Provider>;
};

interface DataGridContextValue {
  readonly markets: Record<string, string>;
}

interface DataGridProviderProps {
  children: JSX.Element;
  markets: Record<string, string>;
}

export const DataGridContext = createContext<DataGridContextValue>();

export const DataGridProvider: Component<DataGridProviderProps> = (props) => {
  // Implementation ...

  const values = {
    get markets() {
      return props.markets;
    },
    // ... implementation API.
  };

  return <DataGridContext.Provider value={values}>{props.children}</DataGridContext.Provider>;
};

This works well, but curious as to if there's a smarter way that I'm missing. Solid isn't wrapping reactivity for the value attribute, so I need to do something to keep reactivity. For usage of the provider it looks like this:

export const DataGrid: Component<DataGridProps> = () => {
  const [markets] = createResource<Record<string, string>>(getMarkets);

  return (
    <DataGridProvider markets={markets()}>
      ...children
    </DataGridProvider>
  );
};

export const DataGrid: Component<DataGridProps> = () => {
  const [markets] = createResource<Record<string, string>>(getMarkets);

  return (
    <DataGridProvider markets={markets()}>
      ...children
    </DataGridProvider>
  );
};

6 replies

CDCloudflare Developers

•Created by tozz on 9/2/2023 in #pages-help

CORS errors with wrangler

So I'm doing some local development where I have a Vite dev server and a wrangler ditto for the functions. Unfortunately the wrangler server doesn't return proper cors headers and I don't see any way to configure it. I've seen some dangerous suggestions online where you rewrite the headers in your function, but that would go out in production too and that's definitely not desireable. So, is there a way to send "allow everything" headers with wrangler by default? The reason I don't use the automated "pass through" is because wranger doesn't handle websockets, so HMR breaks.

1 replies

SSolidJS

•Created by tozz on 8/6/2023 in #support

Reactivity inside closure in return value

I have a function with a store, singals etc. This function returns an object, that object contains a function that is to be used as an event in the caller context. const { onSubmit } = someFunction() The definition of onSubmit inside someFunction

  const onSubmit = (callback: (e: SubmitEvent) => void) => (event: SubmitEvent) => {
    event.preventDefault();

    // nodes are a store
    Object.keys(nodes).forEach((key) => nodes[key].validate());

    callback(event);
  };

  const onSubmit = (callback: (e: SubmitEvent) => void) => (event: SubmitEvent) => {
    event.preventDefault();

    // nodes are a store
    Object.keys(nodes).forEach((key) => nodes[key].validate());

    callback(event);
  };

So the way you use it is <form onSubmit={onSubmit(() => { // my callback })} ...> This causes a lint error

This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.

on the returning inner function. Likely very simple to fix, if I didn't need the closure for callback I could just store the inner function with createMemo, but I need the closure

5 replies

SSolidJS

•Created by tozz on 7/25/2023 in #support

Reaching into nested properties and keeping them reactive?

Coming from React I really like that I can destruct nested props into single variables, in this example I have a JSON (using createResource with flow as the signal) that has a couple of levels where I parse it and loop it over with a <For> <For each={flow().ui.nodes}>{nodeValue}</For> The nodeValue function looks like this (I could of course inline it all, and I might, but for now it's its own function)

  const nodeValue = (node) => {
    return (
      <Switch>
        <Match when={node.attributes?.node_type === 'input'}>
          <>
            {node.type === 'hidden' && (
              <input type="hidden" name={node.attributes.name} value={node.attributes.value} />
            )}
            {node.type === 'text' && (
              <Input name={node.attributes.name} value={node.attributes.value} label={node.attributes.label} />
            )}
          </>
        </Match>
      </Switch>
    );
  };

  const nodeValue = (node) => {
    return (
      <Switch>
        <Match when={node.attributes?.node_type === 'input'}>
          <>
            {node.type === 'hidden' && (
              <input type="hidden" name={node.attributes.name} value={node.attributes.value} />
            )}
            {node.type === 'text' && (
              <Input name={node.attributes.name} value={node.attributes.value} label={node.attributes.label} />
            )}
          </>
        </Match>
      </Switch>
    );
  };

Can I avoid having to do node.attributes.x and rather get node.attributes as a flat var and use var.name instead?

3 replies

Gaming

Programming