Switch from "use server" back to using server$()

[samualtnorman]

After having used "use server" in production on PetScanner's web app for 6 months, we have now switched back to using server$(). We didn't downgrade back to SolidStart 0.3, I instead developed a babel plugin:

Babel plugin code

const isServerIdentifier = t.identifier(cuid2())

{
	name: `server-bling`,
	visitor: {
		Identifier(path) {
			if (path.node.name != `server$`)
				return

			assert(path.parent.type == `CallExpression`)
			assert(path.parent.arguments.length == 1)
			assert(path.parent.arguments[0].type != `ArgumentPlaceholder`)
			assert(path.parent.arguments[0].type != `SpreadElement`)

			const programNode = ensure(path.findParent(path => path.node.type == `Program`))
				.node as t.Program

			const solidJsWebImportDeclaration = programNode.body.find(
				(node): node is t.ImportDeclaration =>
					node.type == `ImportDeclaration` && node.source.value == `solid-js/web`
			)

			if (!solidJsWebImportDeclaration) {
				programNode.body.unshift(t.importDeclaration(
					[ t.importSpecifier(isServerIdentifier, t.identifier(`isServer`)) ],
					t.stringLiteral(`solid-js/web`)
				))
			} else if (solidJsWebImportDeclaration.specifiers.every(specifier =>
				specifier.type != `ImportSpecifier` ||
				specifier.local.name != isServerIdentifier.name
			)) {
				solidJsWebImportDeclaration.specifiers
					.push(t.importSpecifier(isServerIdentifier, t.identifier(`isServer`)))
			}

			const variableIdentifier = t.identifier(cuid2())

			ensure(path.findParent(path => path.isStatement())).insertBefore(t.variableDeclaration(
				`const`,
				[
					t.variableDeclarator(variableIdentifier, t.conditionalExpression(
						isServerIdentifier,
						path.parent.arguments[0],
						t.identifier(`undefined`)
					))
				]
			))

			path.parentPath.replaceWith(t.arrowFunctionExpression(
				[ t.restElement(t.identifier(`args`)) ],
				t.blockStatement([
					t.returnStatement(t.callExpression(variableIdentifier, [
						t.spreadElement(t.identifier(`args`))
					]))
				], [ t.directive(t.directiveLiteral(`use server`)) ]),
				true
			))
		}
	}
}

It transforms code like:

const queryUser = query(server$((id: number) =>
	prisma.user.findFirstOrThrow({ where: { id } })
))

into

const YXKQ2e96PdOJLmeBDOyry = isServer ? (id: number) =>
	prisma.user.findFirstOrThrow({ where: { id } })
) : undefined

const queryUser = query(async (...args) => {
	"use server"

	return YXKQ2e96PdOJLmeBDOyry(...args)
})

And then leaves it up to SolidStart's transforms to handle the "use server" from there.

The reason we have gone back to using server$() is that "use server" is less composable.

SolidStart by default leaks server errors that occur in a server function to the client. We have a wrapper function that is used like so:

const queryUser = query(server$(catchAndReportErrors((id: number) =>
	prisma.user.findFirstOrThrow({ where: { id } })
)))

This is not so easy with "use server".

By default in SolidStart, server function input is not to be trusted so we can mix and match an input validator like so:

const queryUser = query(server$(catchAndReportErrors(schemaInput(
	z.number(),
	id => prisma.user.findFirstOrThrow({ where: { id } })
))))

I'm not saying this is impossible with "use server", just that "use server" is a downgrade compared to server$().

None of these code samples are taken directly from our repository. The given babel plugin is a slightly simplified version of the real one we use, and the other code samples are contrived examples.