SolidJS•2mo ago

Nesting server side functions in namespaces or any kind of block of code.

Is there any way to make nested server functions for example I would like to have an namespace called Users and then I could use .all() or .query() server-side function. It would make my code much cleaner after all. I tried to implement the namespaces like so: Library database code src/lib/db.ts

export namespace Users {
  export async function query(username:string) {
    "use server";
     // Rest of the code...
  }

  export async function all() {
    "use server";
     // Rest of the code...
  }
}

export namespace Users {
  export async function query(username:string) {
    "use server";
     // Rest of the code...
  }

  export async function all() {
    "use server";
     // Rest of the code...
  }
}

Example usage src/routes/index.tsx

import { createAsync } from "@solidjs/router";
import { Suspense, Show } from "solid-js";
import { Users } from "~/lib/db";

export default function Index() {
  const users = createAsync(() => Users.all()); 

  return <Suspense>
    <h1>Users of your app</h1> 
    <Show when={users()}>
     // rest of the code...
    </Show>
  </Suspense>
}

import { createAsync } from "@solidjs/router";
import { Suspense, Show } from "solid-js";
import { Users } from "~/lib/db";

export default function Index() {
  const users = createAsync(() => Users.all()); 

  return <Suspense>
    <h1>Users of your app</h1> 
    <Show when={users()}>
     // rest of the code...
    </Show>
  </Suspense>
}

, but I get an error: ^ Server Functions cannot be nested in other blocks or functions. Is there aby other way to make it cleaner?

7 Replies

peerreynders•2mo ago

Namespaces are simply named JavaScript objects in the global namespace.

https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html#using-namespaces Perhaps use a namespace import instead:

import { createAsync } from '@solidjs/router';
import { Suspense, Show } from 'solid-js';
import * as Users from '~/lib/db/users';

export default function Index() {
  const users = createAsync(() => Users.all());

  return (
    <Suspense>
      <h1>Users of your app</h1>
      <Show when={users()}>// rest of the code...</Show>
    </Suspense>
  );
}

import { createAsync } from '@solidjs/router';
import { Suspense, Show } from 'solid-js';
import * as Users from '~/lib/db/users';

export default function Index() {
  const users = createAsync(() => Users.all());

  return (
    <Suspense>
      <h1>Users of your app</h1>
      <Show when={users()}>// rest of the code...</Show>
    </Suspense>
  );
}

Perhaps this may work, I don't know:

async function userByName(username: string) {
  'use server';
  // Rest of the code...
}

async function userAll() {
  'use server';
  // Rest of the code...
}

export const Users = {
  query: userByName,
  all: userAll,
};

async function userByName(username: string) {
  'use server';
  // Rest of the code...
}

async function userAll() {
  'use server';
  // Rest of the code...
}

export const Users = {
  query: userByName,
  all: userAll,
};

MDN Web Docs

import - JavaScript | MDN

The static import declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned by the importing module.

Documentation - Namespaces and Modules

How to organize code in TypeScript via modules or namespaces

Jason.jsonOP•2mo ago

Thanks! I’m aware that namespaces in JS are objects, which can introduce some performance overhead. However, I wanted to keep everything in db.ts without creating additional files. Either way, I’ll give it a try I had forgotten about import * as alias from 'somewhere'; . I’ll test it and let you know if it works. 👍

peerreynders•2mo ago

I’m aware that namespaces in JS are objects,

It's worse than that. This is what your code transpiles to:

export var Users;
(function (Users) {
    async function query(username) {
        "use server";
        // Rest of the code...
    }
    Users.query = query;
    async function all() {
        "use server";
        // Rest of the code...
    }
    Users.all = all;
})(Users || (Users = {}));

export var Users;
(function (Users) {
    async function query(username) {
        "use server";
        // Rest of the code...
    }
    Users.query = query;
    async function all() {
        "use server";
        // Rest of the code...
    }
    Users.all = all;
})(Users || (Users = {}));

TS namespace has no equivalent in ECMAScript, so TS has to add it's own runtime constructs that create additional barriers for tooling. My personal bias is to use TS namespace only when it is absolutely necessary to explain design time properties of a run time ES value to TypeScript. Given that TS is mostly about DX it makes more sense to treat it as a markup language for ES rather than a programming language.

Jason.jsonOP•2mo ago

Sure! Thanks for that. Also the enums at runtime compiles to very strange object like thing if you do not use const modifier. Or if you preserve them. I was just looking for a stucture like partern where I could write cleaner code.

peerreynders•2mo ago

In modern TypeScript, you may not need an enum when an object with as const could suffice:

https://www.typescriptlang.org/docs/handbook/enums.html#objects-vs-enums

Handbook - Enums

How TypeScript enums work

peerreynders•2mo ago

Sure, and you may just get away with explicitly adding the functions to an object literal (rather than having TS doing the work for you). Though that may have undesirable implications for tree-shaking. Typically ES modules with separate values is the way to go.

Jason.jsonOP•2mo ago

I was thinking about that, but maybe I will just leave it as it is. No need to use more performance overhead abstraction in my opinion. It would work better without it. 👍

Gaming

Programming

Nesting server side functions in namespaces or any kind of block of code.

Did you find this page helpful?