Untlsn Posts - Answer Overflow

Untlsn

Explore posts from servers

•Created by Untlsn on 3/19/2025 in #questions

Redundant match default

Match has a default case But it is something completely different from .default, which makes sense However, it can lead to writing the same code 2 times. In particular, this can be seen in the Fluent API:

const sortDirectionMatch = match
  .case('"DESC"', () => desc)
  .case('"ASC"', () => asc)
  .default(() => none)
  .default(() => none)

const sortDirectionMatch = match
  .case('"DESC"', () => desc)
  .case('"ASC"', () => asc)
  .default(() => none)
  .default(() => none)

Is there a build-in way to do this? E.g.

const sortDirectionMatch = match({
  '"DESC"': () => desc,
  '"ASC"': () => asc,
  'default?': () => none,
})
// or
const sortDirectionMatch = match
  .case('"DESC"', () => desc)
  .case('"ASC"', () => asc)
  .default(() => none, true)

const sortDirectionMatch = match({
  '"DESC"': () => desc,
  '"ASC"': () => asc,
  'default?': () => none,
})
// or
const sortDirectionMatch = match
  .case('"DESC"', () => desc)
  .case('"ASC"', () => asc)
  .default(() => none, true)

Or is it best to just make a wrapper that adds these 2 versions like (untyped):

function optionalMatch(matchDraft, defaultCb) {
  return matchDraft
    .default(defaultCb)
    .default(defaultCb);
}

function optionalMatch(matchDraft, defaultCb) {
  return matchDraft
    .default(defaultCb)
    .default(defaultCb);
}

5 replies

NNuxt

•Created by Untlsn on 3/19/2025 in #❓・help

Forced typesafe body

Has anyone tried to make inferable typesafe body using nuxt $fetch? Most of the methods I tried did not work. The only one that seems promising is a wrapper around defineEventHandler that pollutes response There is a simple prototype:

export function definePostEventHandler<TInput, TOutput>(
  input: (rawBody: unknown) => TInput,
  handler: (body: TInput, event: H3Event<EventHandlerRequest>) => Promise<TOutput>,
): EventHandler<EventHandlerRequest, Promise<[TOutput, TInput]>> {
  return defineEventHandler(async (event) => {
    return [handler(input(readBody(event)), event)] as any;
  });
}

// If you don't want input validation
definePostEventHandler.any = <T>(rawBody: unknown) => rawBody as T;

export function definePostEventHandler<TInput, TOutput>(
  input: (rawBody: unknown) => TInput,
  handler: (body: TInput, event: H3Event<EventHandlerRequest>) => Promise<TOutput>,
): EventHandler<EventHandlerRequest, Promise<[TOutput, TInput]>> {
  return defineEventHandler(async (event) => {
    return [handler(input(readBody(event)), event)] as any;
  });
}

// If you don't want input validation
definePostEventHandler.any = <T>(rawBody: unknown) => rawBody as T;

Usage:

export default definePostEventHandler(definePostEventHandler.any<{ value: string }>, async (body) => {
  return {
    long: `Hello ${JSON.stringify(body)}`,
  };
});

export default definePostEventHandler(definePostEventHandler.any<{ value: string }>, async (body) => {
  return {
    long: `Hello ${JSON.stringify(body)}`,
  };
});

Frontend access:

type InternalApiPostKey = keyof {
  [K in keyof InternalApi as InternalApi[K] extends { post: any } ? K : never]: unknown
};

export async function fetchPost<TKey extends InternalApiPostKey>(key: TKey, data: InternalApi[TKey]['post'][1]) {
  const [response] = await ($fetch as any)(key, {
    method: 'POST',
    data,
  });

  return response;
}

type InternalApiPostKey = keyof {
  [K in keyof InternalApi as InternalApi[K] extends { post: any } ? K : never]: unknown
};

export async function fetchPost<TKey extends InternalApiPostKey>(key: TKey, data: InternalApi[TKey]['post'][1]) {
  const [response] = await ($fetch as any)(key, {
    method: 'POST',
    data,
  });

  return response;
}

5 replies

Aarktype

•Created by Untlsn on 3/12/2025 in #questions

Match `.in` with loose type

In docs there is example

type Data =
  | {
    id:       1
    oneValue: number
  }
  | {
    id:       2
    twoValue: string
  };
const discriminateValue = type.match
// .in allows you to specify the input TypeScript allows for your matcher
  .in<Data>()
// .at allows you to specify a key at which your input will be matched
  .at('id')
  .match({
    1:       (o) => `${o.oneValue}!`,
    2:       (o) => o.twoValue.length,
    default: 'assert',
  });

type Data =
  | {
    id:       1
    oneValue: number
  }
  | {
    id:       2
    twoValue: string
  };
const discriminateValue = type.match
// .in allows you to specify the input TypeScript allows for your matcher
  .in<Data>()
// .at allows you to specify a key at which your input will be matched
  .at('id')
  .match({
    1:       (o) => `${o.oneValue}!`,
    2:       (o) => o.twoValue.length,
    default: 'assert',
  });

Its work good because match know how rest of the type will look like, so we have acess to oneValue or twoValue But when i change it to:

type Data = {
  id:    '1' | '2'
  value: number
};
const discriminateValue = type.match
// .in allows you to specify the input TypeScript allows for your matcher
  .in<Data>()
// .at allows you to specify a key at which your input will be matched
  .at('id')
  .match({
    1:       (o) => `${o.value}!`,
    2:       (o) => o.value.length,
    default: 'assert',
  });

type Data = {
  id:    '1' | '2'
  value: number
};
const discriminateValue = type.match
// .in allows you to specify the input TypeScript allows for your matcher
  .in<Data>()
// .at allows you to specify a key at which your input will be matched
  .at('id')
  .match({
    1:       (o) => `${o.value}!`,
    2:       (o) => o.value.length,
    default: 'assert',
  });

Typescript say that only id exist Is this an issue, or intentional? Probably second one, because i need to make

typeof o & Omit<Data, keyof typeof o>

typeof o & Omit<Data, keyof typeof o>

to get anything else then never from typescript Then what should I use as alternative?

3 replies

SSolidJS

•Created by Untlsn on 10/29/2024 in #support

[h3] [unhandled] TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-Error"]

For some reason in dev mode i cannot throw errors in server functions. After build it work as expected. For some reason i get this error always, but i cannot find anyone with same problem

5 replies

SSolidJS

•Created by Untlsn on 9/11/2024 in #support

Sugestion for Repeat component

On last stream Ryan show a Repeat components and I like it. Specially that I ofter need to just render something X times. I've check solid-primitive@range, but it's Repeat not work like I expected Can someone tell if this self made component will work good, have any major bugs or just strait up is worst then <For> From my tests it's render properly, dispose only points that are pop'ed and I don't see any warns in console about missing root ect.

function callFunctions(d: (() => void)[]) {
  for (let i = 0; i < d.length; i++) d[i]();
}

function Repeat(props: {
  count: number;
  children: (index: number) => JSX.Element;
  fallback?: JSX.Element
}) {

  let disposes: (() => void)[] = [];
  const disposeAll = () => callFunctions(disposes)
  onCleanup(disposeAll)

  return createMemo<JSX.Element[] | JSX.Element>((arr) => {
    const count = Number(props.count) || 0;
    if (count <= 0) {
      disposeAll();
      return props.fallback || null;
    }
    if (!Array.isArray(arr)) arr = [];
    const prev = arr.length;
    if (count < prev) {
      arr.length = count;
      callFunctions(disposes.splice(count))
    } else {
      for (let i = prev; i < count; i++) {
        arr.push(createRoot((dispose) => {
          disposes.push(dispose);
          return props.children(i)
        }));
      }
    }
    return [...arr];
  }, []) as unknown as JSX.Element;
}

function callFunctions(d: (() => void)[]) {
  for (let i = 0; i < d.length; i++) d[i]();
}

function Repeat(props: {
  count: number;
  children: (index: number) => JSX.Element;
  fallback?: JSX.Element
}) {

  let disposes: (() => void)[] = [];
  const disposeAll = () => callFunctions(disposes)
  onCleanup(disposeAll)

  return createMemo<JSX.Element[] | JSX.Element>((arr) => {
    const count = Number(props.count) || 0;
    if (count <= 0) {
      disposeAll();
      return props.fallback || null;
    }
    if (!Array.isArray(arr)) arr = [];
    const prev = arr.length;
    if (count < prev) {
      arr.length = count;
      callFunctions(disposes.splice(count))
    } else {
      for (let i = prev; i < count; i++) {
        arr.push(createRoot((dispose) => {
          disposes.push(dispose);
          return props.children(i)
        }));
      }
    }
    return [...arr];
  }, []) as unknown as JSX.Element;
}

4 replies

Gaming

Programming