[Bug?]: Page components - weird behaviour with transpiling plugins (`@danielx/civet` example)

[IgorSzymanski]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Page components (in /routes directory) don't get compiled using plugins configured in app.config.ts, unlike other components.

Expected behavior 🤔

Just like any other component, page components should be transpiled by application plugins.

Steps to reproduce 🕹

Steps:

1. Create a new Solid Start application.
2. Install @danielx/civet library.
3. Setup config:

   
   // app.config.ts

import civetVitePlugin from '@danielx/civet/vite' import { defineConfig } from '@solidjs/start/config'

export default defineConfig({ extensions: ['civet', 'tsx', 'ts'], vite: { plugins: [ civetVitePlugin({ ts: 'civet', }), ] } });

4. Create a civet page in `/routes` directory.
```civet
export default function Civet
  <>
    This is a Civet page.<br />
    This doesn't work.<br />
    This would be the perfect way to write Civet pages.

5. Minimal reproduction repo: https://codesandbox.io/p/github/IgorSzymanski/solid-start-plugin-issue/civet-plugin

Context 🔦

This a minor issue, because there is a workaround, but the behaviour is very weird and inconsistent. I use @danielx/civet/vite plugin to write my SolidJS application using Civet syntax (https://civet.dev/).

Civet is a programming language that compiles to TypeScript or JavaScript, so you can use existing tooling (including VSCode type checking, hints, completion, etc.) while enabling concise and powerful syntax. It starts with 99% JS/TS compatibility, making it easy to transition existing code bases.

Basically, the plugin actually works, as I can write Civet components (as seen in the reproduction repo) and they get transpiled to TS just fine. The only issue is that page components (or route components) get ignored and they're treated like they're just components written in TS. Perfectly, page components should get the same treatment that other components get and if they're written in Civet, they should be transpiled as well.

There is a workaround - I can just write .civet components, but stick to TS syntax in page components (which is still compatible with civet), co it's in no way a critical issue, but an inconvenience nevertheless.

I don't know the codebase of Solid Start, so I'm not sure what's causing the issue or what could potentially fix it.

Your environment 🌎

No response

[doeixd]

I think this is a vinxi issue? I think the file is being processed by esbuild before being transformed by the civet plugin.

@nksaraf

https://github.com/nksaraf/vinxi/blob/a63eabd27a43af491772126a547a970f4bc7d484/packages/vinxi/lib/fs-router.js#L41

https://github.com/nksaraf/vinxi/blob/a63eabd27a43af491772126a547a970f4bc7d484/packages/vinxi/lib/fs-router.js#L128

Maybe solid start could transform the files first in their implementation of the FileSystem Router ? IDK.

For now maybe you could check out: civetman it looks like it should work with the FileSystem router.

[IgorSzymanski]

That's what I was suspecting, but I wasn't sure how to make a minimal repo with Vinxi + Civet only, because I wasn't sure how to use their FS router (I think their documentation is still a work in progress).

Should I try and create a ticket in their repo, instead, @doeixd?

[joprice]

I think I hit the same issue here, where the vite-env-only plugin is not run early enough https://github.com/nksaraf/vinxi/issues/298.