solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

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

Open IgorSzymanski opened this issue 8 months ago • 3 comments

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',
      }),
    ]
  }
});

  1. Create a civet page in /routes directory.
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.

  1. 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

IgorSzymanski avatar Jun 16 '24 12:06 IgorSzymanski