Experimental vite plugin for Civet.
Civet is a new programming language that transpiles to TypeScript/JavaScript. It borrows many features from CoffeeScript, imba etc. and offers type-safety through TypeScript integration. With this plugin you can use civet in a vite project. You can use civet for your entire application or a subset of modules.
Install it as a dev dependency through your preferred package manager (we recommend pnpm)
npm install -D vite-plugin-civet
# or
pnpm install -D vite-plugin-civet
# or
yarn add -D vite-plugin-civetHere is a simple example of a vite.config.ts,
with no processing beyond Civet:
import { defineConfig } from 'vite'
import civetPlugin from 'vite-plugin-civet'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
civetPlugin({
// Remove TypeScript type annotations from output
stripTypes: true,
}),
],
})It is recommended that type checking is performed separately (either through editor integration or Civet CLI rather than as part of build).
Please note that civet (by design) does not include polyfills for older browsers. Nor does it have built-in support for transpiling non-standard JavaScript features like JSX to standard JavaScript.
While Civet offers syntax support for JSX, it does not make any assumptions around what that JSX will compile to. You will need additional framework-specific plugins to process the output of civet to standard JavaScript.
The following example vite.config.ts illustrates how this plugin can integrate with vite-plugin-react-swc.
import { defineConfig } from 'vite'
import reactPlugin from '@vitejs/plugin-react-swc'
import civetPlugin from 'vite-plugin-civet'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
reactPlugin(),
civetPlugin({
stripTypes: true,
// Civet plugin needs to be made aware of the plugin
// that will support TypeScript compilation
outputTransformerPlugin: 'vite:react-swc',
// Currently vite-plugin-react will not perform
// any transformations unless file extension is js/jsx etc.
//
// So we need to change extension before passing
// result of civet transformation to the plugin
outputExtension: 'jsx',
}),
],
})Note that the id here is the Vite plugin id, different from the name of the package that defines the plugin. This id can be found in the object that the plugin's default export returns.
> (await import('@vitejs/plugin-react-swc')).default({})
[
{
name: 'vite:react-swc', // <------
apply: 'serve',
...
},
{
name: 'vite:react-swc',
apply: 'build',
...
}
]
It should be possible to integrate plugins for other frameworks too in similar fashion. Please open an issue describing your use case if you face an issue.
Sample framework specific projects are available to help you get started quickly:
- React (Frontend):
npx degit lorefnon/vite-plugin-civet/playground-react-babel my-app - Solid (Frontend):
npx degit lorefnon/vite-plugin-civet/playground-solid my-app
You can use this plugin with Astro and its
Integrations
for JSX support by referring to the astro:jsx plugin.
Here is an example astro.config.mjs
using the SolidJS integration:
import { defineConfig } from 'astro/config'
import civetPlugin from 'vite-plugin-civet'
import solidJs from "@astrojs/solid-js"
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [civetPlugin({
stripTypes: false,
outputExtension: 'tsx',
outputTransformerPlugin: 'astro:jsx',
})]
},
integrations: [solidJs()]
});- Sourcemap integration