benton
benton
Explore posts from servers
CDCloudflare DevelopersSSolidJSTTCTheo's Typesafe Cult
PostsComments
SSolidJS
Created by benton on 5/9/2024 in #support
Hydrating SSR - <Hydrate /> doesn't seem to rehydrate dehydrated app
This is what my SSR (and client) entry looks like 
import {ErrorBoundary, Hydration, HydrationScript, NoHydration} from "solid-js/web";
import {DefaultLayout} from "./layouts/default";

export default function App() {
    return (
        <NoHydration>
            <html>
              <head>
                <HydrationScript/>
                <title>My App</title>
              </head>
              <body>
                <Hydration>
                  <ErrorBoundary fallback={"Error."}>
                      <DefaultLayout/>
                  </ErrorBoundary>
                </Hydration>
                <script type={'module'} src={'./src/client.entry.tsx'}></script>
              </body>
            </html>
        </NoHydration>
    );
}
import {ErrorBoundary, Hydration, HydrationScript, NoHydration} from "solid-js/web";
import {DefaultLayout} from "./layouts/default";

export default function App() {
    return (
        <NoHydration>
            <html>
              <head>
                <HydrationScript/>
                <title>My App</title>
              </head>
              <body>
                <Hydration>
                  <ErrorBoundary fallback={"Error."}>
                      <DefaultLayout/>
                  </ErrorBoundary>
                </Hydration>
                <script type={'module'} src={'./src/client.entry.tsx'}></script>
              </body>
            </html>
        </NoHydration>
    );
}
If I remove <NoHydration /> everything is fine, but with them there the app doesn't hydrate. No errors. I assume I'm doing something different than https://github.com/solidjs/solid-start/blob/main/packages/start/src/server/StartServer.tsx but I'm not sure what.
1 replies
TTCTheo's Typesafe Cult
Created by benton on 2/29/2024 in #questions
Using Svelte with Next.js
Hi everyone, I was wondering if it's possible to use Svelte with Next.js? I know I need to use Next.js for SSR or else my site won't be fast enough (dan abrams said so) but also rich harris said the dom is pure overhead so i dont wanna use react. how can i slot in svelte instead? im sure there is a way...
25 replies
CDCloudflare Developers
Created by benton on 1/25/2024 in #pages-help
Attempting to fetch asset that doesn't exist returns index.html
Hi all, If you call ASSETS.fetch(req) in a pages advanced function for an asset that doesn't exist, instead of returning not found it just returns index.html. Is there a way to disable this behaviour? I basically need some way of checking if a static asset exists, and if not continuing instead of returning the asset.
7 replies
TTCTheo's Typesafe Cult
Created by benton on 3/8/2023 in #questions
Why is TS dumb here?
https://www.typescriptlang.org/play?#code/MYGwhgzhAEDCDy8Ay0DeAoa0DaBrApgJ4Bc0EALgE4CWAdgOYC6pAFAG5ggCu+p5AFtQgBKaAF4AfGSp166AL7p0oSDHgBpaPgAe5fLQAmMBMjSZoIAPYh2nHsIxYswS7QjX8AOiv1b3fMLmWJT45FyUtNAARC7WUeaK8kA Basically, why does it type the method param as any when I declare what type it is in the parent class? Is there a way to make that work?
5 replies
SSolidJS
Created by benton on 1/29/2023 in #support
esm.sh & router
Hi all, Trying to get solid's router working with esm.sh and SSR in Deno. I've created an issue with esm.sh to support conditionals, but in the meantime does anyone have an idea besides manually bundling for the server? https://github.com/ije/esm.sh/issues/511 Esm.sh maintainer thinks it's a bug with the router itself. If anyone has some ideas or suggestions I'd love to hear them.
1 replies
TTCTheo's Typesafe Cult
Created by benton on 1/19/2023 in #questions
Chainable without () ?
Hi all, I have this: 
export function JSZComponent() {
  return (
    div()
      .children([
        a()
          .href("https://google.ca").children(
            span()
              .children("Google")(),
            )(),
      ])();
  )
}
export function JSZComponent() {
  return (
    div()
      .children([
        a()
          .href("https://google.ca").children(
            span()
              .children("Google")(),
            )(),
      ])();
  )
}
which is gross because you need to invoke the return of each chainable prop-call in order to actually call createElement. Is there a way to chain createElement calls like I'm doing without having to curry like this?
11 replies
TTCTheo's Typesafe Cult
Created by benton on 1/18/2023 in #questions
Typing self-returning proxy
function div(){
    const props = {}
    function createChainable(obj: any = {}){
        return new Proxy(() => obj, {
            get: (target, prop) => {
                return (value) => {
                    props[prop] = value;
                    return createChainable(props);
                }
            },
            apply: () => {
                return createElement("div", props);
            }
        })
    }
    return createChainable();
}
div().className("mx-auto").children("sick").ok("wow")()
function div(){
    const props = {}
    function createChainable(obj: any = {}){
        return new Proxy(() => obj, {
            get: (target, prop) => {
                return (value) => {
                    props[prop] = value;
                    return createChainable(props);
                }
            },
            apply: () => {
                return createElement("div", props);
            }
        })
    }
    return createChainable();
}
div().className("mx-auto").children("sick").ok("wow")()
How would I type this? The props would be JSX.IntrinsicElements["div"] but I'm unsure how to type it with chaining as well as calling it div().className("p-4")()
5 replies
TTCTheo's Typesafe Cult
Created by benton on 1/8/2023 in #questions
Type of field based on sibling
Hi all, I'm trying to construct an interface for a constructor. It would work like this: 
const foo = new Bar({
  input: z.string(),
  output: (i) => {}
})
const foo = new Bar({
  input: z.string(),
  output: (i) => {}
})
where i = string. In other words, I need to construct a generic signature like this. 
class Bar<T extends 
  input: z.ZodTypeAny,
  output: (i: zod.infer<T["input"]>) => any
> {
  //...
}
class Bar<T extends 
  input: z.ZodTypeAny,
  output: (i: zod.infer<T["input"]>) => any
> {
  //...
}
but it doesn't work. Wondering if it's even possible...
5 replies
TTCTheo's Typesafe Cult
Created by benton on 12/31/2022 in #questions
Nested Generic Types??
Heyo I have a class that takes in an object in it's constructor. I'd like the object to be a nested object with this type: 
type Route = (ctx: Context) => Response<unknown>
type Router = {[key: string]: Route | Router}
type Route = (ctx: Context) => Response<unknown>
type Router = {[key: string]: Route | Router}
class MyRouter<T extends Router>{
  routes: T
  constructor(r: T){ this.routes = r}
}
class MyRouter<T extends Router>{
  routes: T
  constructor(r: T){ this.routes = r}
}
This works, but it's not generic so I don't get the autocompletion I'm after. My attempts at making this generic fail.
6 replies
TTCTheo's Typesafe Cult
Created by benton on 12/15/2022 in #questions
Typing component based on props
Hi all, I'm trying to type a Link component based on it's props. If url is passed as a prop, I want the type of the component to be an HTMLAnchor element, if I pass in an onClick I want it to be an HTMLButton etc. I have the following but it doesn't seem to work. It lets me pass in both an onClick and an href, which shouldn't be possible as href doesn't exist on HTMLButton https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSYBPMJOAGWADsBrAFRQHMAeAVTiQAeMJIwAmAZzjiYUJhzgAfOAFcxSTEySiANHADy-ISIlwAFKYCUcALwA+OADcIwUVaWrR6zaPvW4Ab1IASGUoABsAfgAuOB4AbmCIRgBhMOA0Zmj9BKC0ZWlcAAUcMBjpWUYOBIBfBIpqWgYWdg5iiDBxXkNhMUlyuUUVNQ1GLV0DQR6Tcys7R2dXQY8vUZ8beiY2Tl5x+wAyYNM+SeM+mTlgoIjEYhgAOgAJVgBZOjaOrifXgEFGNAALaAAUTCSBAIhgtkuMQmRl6Zlm9icLku12Q6HuXzeJU6WIAQsoYDAkiCwRCoUEgjF0RhHi9se1cfSAMpgFCMUngxiQix1QSQWBwTCqDDAJIbZrbY5wkz9SpLYbecbdU5mSw2JELNxDTwjLS2UxgHExJpbVo4nb6WxWQJBIgwUKMOBcFC2LgAeldNXIXFNLTgeQKIHe1nwYQgYXwcCSqXSzGs-nVc381WqcH+REwofDkbg7tscSAA
10 replies
TTCTheo's Typesafe Cult
Created by benton on 12/1/2022 in #questions
Git rebase workflow
Hi all, Company is looking at adopting a more structured git workflow. One method we are looking at is creating local branches for development and then rebasing on main. One downside that was brought up was that since our feature branches would be local we can't have any collaboration with them (not a big deal imo) and that it makes transferring our work from different workstations difficult (this one is a big deal). If we want to adopt a rebasing strategy, what is the recommended approach for collaboration?
22 replies
TTCTheo's Typesafe Cult
Created by benton on 11/23/2022 in #questions
Asset load progress library
Hey all, Work is using a modified version of this https://github.com/Jam3/preloader to preload assets on our interactive sites. Is there anything more modern out there that we can use? Any suggestions? Basically I want the ability to detect the loading progress of all asset types and set state accordingly.
3 replies
TTCTheo's Typesafe Cult
Created by benton on 11/20/2022 in #questions
Help me type this function
I have a function that takes in an input function and returns another function who's input is the same type as the function passed into it. 
function Foo<T>(callback: (input?: T) => void){
  return async function(input?: T) => {
    //...
  }
}
function Foo<T>(callback: (input?: T) => void){
  return async function(input?: T) => {
    //...
  }
}
However, I want the return function type to either require or not require input based on if callback has a parameter or not. How would I do this?
7 replies
TTCTheo's Typesafe Cult
Created by benton on 11/12/2022 in #questions
What does this regex do?
/.*?/
7 replies
TTCTheo's Typesafe Cult
Created by benton on 11/11/2022 in #questions
Generic return type of function in record
I have a function with a param of type Foo<T> = <T extends string | number | symbol> = Record<T, (context: Context) => unknown> I'd like to keep the return type of whatever the function is. How would I use generics to get this to work?
2 replies
TTCTheo's Typesafe Cult
Created by benton on 11/9/2022 in #questions
Type that omits all inherited properties?
Say we have 
class Person {
  age: number
}
class Child extends Person {
  play() {
    //...
  }
}
class Person {
  age: number
}
class Child extends Person {
  play() {
    //...
  }
}
I want a type that incudes only the fields from Child without the inherited properties. For example, type OnlyChild = { play: () => void }. Is that possible. I know I can use Omit<> but I don't know what the properties of Person are.
6 replies
TTCTheo's Typesafe Cult
Created by benton on 11/6/2022 in #questions
Theme naming
Hey so I'm looking to build a little ui kit / design system for my personal projects and I'm wondering what approach I should take re. colors I was thinking something like daisyui https://github.com/saadeghi/daisyui/blob/master/src/colors/colorNames.js with a primary, primary-focus etc but I'm not sure if I love the idea of a specific focus variant, but primary-100, primary-200 seems weird to me too I don't really care I just need to choose something, so if someone has recommendations for something they've done and liked that would be great
25 replies
TTCTheo's Typesafe Cult
Created by benton on 11/4/2022 in #questions
Modifying inferred type of deeply nested object
Hi folks, Say I have a deeply nested object that I'm inferring types of. type MyObj = typeof myObj But I'm not happy with some of the inferred types. For example (I know...🙄 ) I have a type that is undefined but needs to be of type undefined | boolean. How can I easily modify that nested type? And do it many times with different nested values?
12 replies
TTCTheo's Typesafe Cult
Created by benton on 11/4/2022 in #questions
Three JS path following
Hi all, I'm looking to recreate this effect in react-three-fiber. My assumption is that I can create a curve with an array of points, and then create a mesh that follows the path, or perhaps particles? I'm pretty new to threejs (but not new to 3d) so I'd appreciate a nudge in the right direction here. In blender it's pretty trivial to create a curve and constrain a mesh to that curve, hopefully it's fairly easy in three as well. If I have to write a gsls shader for it I'm out of luck but perhaps a particle or mesh solution would be doable
3 replies
TTCTheo's Typesafe Cult
Created by benton on 10/27/2022 in #questions
Inferred Zustand types...
Hi, New to Zustand. The typescript guide says you can infer types with combine but this makes it tricky to do nested state. I found that simply doing 
type State = ReturnType<typeof state>
export const useStore = create<State>()(state)
type State = ReturnType<typeof state>
export const useStore = create<State>()(state)
seems to work, but this seems too easy. All the examples have the state explicitly created, not inferred. Am I missing something obvious?
8 replies