refactor: adopt @tanstack/server-functions-plugin

[brenelz]

Resolves #1735

Replace @vinxi/server-functions with @tanstack/server-functions-plugin

[changeset-bot]

🦋 Changeset detected

Latest commit: 9dd8425

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "solid-start-docs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[pkg-pr-new]

Open in Stackblitz

More templates

• example-bare
• example-basic
• example-experiments
• example-hackernews
• example-notes
• example-todomvc
• example-with-auth
• example-with-authjs
• example-with-drizzle
• example-with-mdx
• example-with-prisma
• example-with-solid-styled
• example-with-tailwindcss
• example-with-trpc
• example-with-unocss
• example-with-vitest

npm i https://pkg.pr.new/@solidjs/start@1715

commit: 9dd8425

[tannerlinsley]

This is insanely cool.

[birkskyum]

@brenelz , to make the CI green for the docs build, it's just a matter of adjusting the rollup config to avoid the AsyncLocalStorage error for the client bundle.

You can move external

• From: server.rollupConfig.external
• To: vite.build.rollupOptions.external

Or have both for now like below:

// docs/app.config.ts

import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "tailwindcss";
import { config } from "vinxi/plugins/config";

export default defineConfig({
  // experimental: { islands: true },
  server: {
    preset: "cloudflare_module",
    alias: {
      "_mime": "mime/index.js"
    },
    rollupConfig: {
      external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"]
    }
  },
  vite: {
    build: {
      rollupOptions: {
        external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"]
      }
    },
    plugins: [
      config("tailwind", {
        css: {
          postcss: {
            plugins: [tailwindcss]
          }
        }
      } as any)
    ]
  }
});

[atilafassina]

That's awesome!!
Thanks a lot for this, @brenelz 🏆

Meanwhile I'm working on improving the test story around here so we can merge this more confidently.
Once the CI is green, let's make sure we add a Changeset and then we should be in good shape for reviews / merge. :)

[birkskyum]

Since we don't have a test suite, the manual testing I've done here is to install the pkg.pr.new, and add the below to the Counter of the basic example, and set ssr:false in app config:

function useServer() {
  "use server";  
  console.log("Counter Server Function", isServer) // <- returns True on server
}

export default function Counter() {

  console.log("Counter Init", isServer) // <- returns False in client

  useServer()
  const [count, setCount] = createSignal(0);
  return (
    <button class="increment" onClick={() => setCount(count() + 1)} type="button">
      Clicks: {count()}
    </button>
  );
}

And it appear to work as expected both in vinxi dev mode, and after build + start

[katywings]

I am wondering how easy it would be to test this out in one of my projects via npm link 🙈, or is there a chance we could publish this on some special name/tag to give it a try?

[birkskyum]

@katywings , there is the pkg.pr.new link here - can you use that?

[brenelz]

@birkskyum I was just going to say the same thing. I haven't actually used it before but seems cool

[atilafassina]

Just merged #1719
if we solve the conflicts on this PR we can pull main and it would be more straightforward to add tests.

[birkskyum]

E2E test passing. LGTM

[atilafassina]

I was kinda expecting this one to be a patch since it's not changing any API nor is it adding a new feature.

wdyt?

[birkskyum]

I recommended the minor but I'm good with a patch too.

[katywings]

Testing this out right now, so far it doesn't work at all for me, most likely because it seems to have a completely different approach to decide which dependencies to externalize. Still figuring it out the details though. You gonna get a second analysis soon 😅

Edit: Yeah so it looks like this completely fails to externalize server libraries in the client bundling, resulting in errors during the build. Plus countless warnings for every node built-in module (Module "fs / path / stream / xyz" has been externalized for browser compatibility).

[katywings]

Here is a very basic reproduction of the missing externalization, this works in dev but fails to npm run build.
https://stackblitz.com/edit/github-vts2k1cp?file=src%2Froutes%2Findex.tsx

[katywings]

I wonder if this is a problem in this PR or a general thing with the Tanstack Server Functions plugin 🤔 - afaik @tannerlinsley mentioned that the Tanstack plugin actually should externalize more heavily than Vinxi and not less - so I assume this must be a problem on our side 🤔.

Waiting for this #1722

[birkskyum]

There are externalization tests added to the test suite, so this PR should be rebased, and pass those.

[birkskyum]

@katywings , next time you have a chance to check it, let us know if it fares better for you now with the externalization fixed.

[katywings]

@brenelz 45f0b7b indeed fixed the build in my project and I was able to build the project without any changes in the vite config 🥳. My time today is limited but I will go through the project tomorrow and test out the different features related to server functions and give you another report.

[netlify]

✅ Deploy Preview for solid-start-landing-page ready!

Name	Link
🔨 Latest commit	9dd8425
🔍 Latest deploy log	https://app.netlify.com/sites/solid-start-landing-page/deploys/679817824840f20008424ece
😎 Deploy Preview	https://deploy-preview-1715--solid-start-landing-page.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[katywings]

Okay I went through my project with this branch and successfully tested DEV & PROD. Could not find a single issue 🥳👌.

[birkskyum]

@atilafassina , I tried to follow the guide at Conventional Commit, but the new Contributing Compliance doesn't pass... can you see what's going wrong here?

Does it lack some workflow permissions?

[adamstringer]

I'm sure you guys are already aware but this is a breaking change when declaring server functions from within components returning the error "Server Functions cannot be nested in other blocks or functions". Might want to mention this in the release notes?

[joeygrable94]

I'm sure you guys are already aware but this is a breaking change when declaring server functions from within components returning the error "Server Functions cannot be nested in other blocks or functions". Might want to mention this in the release notes?

Why are you declaring a server function from within a component scope? Ideally, you are writing server function code independently from component rendering so keep your code easier to maintain and test.

[theturtle32]

This also appears to have broken support for async generators as server functions #1886

[birkskyum]

@theturtle32 can you add a test for that in our server function test suite?