Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add civet unplugin #632

Merged
merged 15 commits into from
Aug 31, 2023
92 changes: 92 additions & 0 deletions integration/unplugin/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
# unplugin-civet

Use Civet in your projects with Vite, Webpack, Rspack, Rollup and esbuild, with `dts` generation supported.

## Usage

The only setup required is to install the plugin and adding it your bundler's config:

```bash
npm i -D unplugin-civet
```

### Vite

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import civetVitePlugin from 'unplugin-civet/vite';

export default defineConfig({
// ...
plugins: [
civetVitePlugin({
// options
}),
],
});
```

### Rollup

```ts
// rollup.config.ts
import civetRollupPlugin from 'unplugin-civet/rollup';

export default {
// ...
plugins: [
civetRollupPlugin({
// options
}),
],
};
```

### ESBuild

```ts
import esbuild from 'esbuild';
import civetEsbuildPlugin from 'unplugin-civet/esbuild';

esbuild
.build({
// ...
plugins: [civetEsbuildPlugin()],
})
.catch(() => process.exit(1));
```

### Webpack

```js
const civetWebpackPlugin = require('unplugin-civet/webpack');

module.exports = {
// ...
plugins: [
civetWebpackPlugin({
// options
}),
],
};
```

## Options

```ts
interface PluginOptions {
dts?: boolean;
outputExtension?: string;
js?: boolean;
transformOutput?: (
code: string,
id: string
) => TransformResult | Promise<TransformResult>;
}
```

- `dts`: `unplugin-civet` also supports generating `.d.ts` type definition files from the civet source, which is useful for building libraries.
- `outputExtension`: Output filename extension to use. Default: `.civet.jsx`, or `.civet.tsx` if `js` is `false`.
- `js`: Whether to transpile to JS or TS.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you state the default here? I believe it's false, in which case should also rewrite the .civet.jsx default for outputExtension. (Should be .civet.tsx, unless js is true.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that should be corrected. Though now that I think of it, maybe js should be true by default. Most users would be using these for building applications and not libraries and in that case preserving types doesn't help much. I'm open to other opinions on this

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A default of js: true would break dts: true. We could make dts imply js: false, but honestly js: false is safer; some TypeScript features are not correctly implemented by Civet with js: true, and it just costs a bit of time to use already existing TS integration. So I think js: false is best.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could give imply js based on the value of dts first,

const transpileToJS = options.dts || options.js;

in which case both options should work. My main concern was that rollup and webpack can't process typescript without additional plugins, so would need to set js: true to make the setup work, but if js: false has better typescript features then let's go with that default.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can include the {js: true} in the README where we give recommended workflows for Webpack and Rollup?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, we can do that

- `transformOutput`: Replace the `civet.compile` tranformer with a custom transformer. It gets passed the civet source and filename, and should return valid TS/JS code.
edemaine marked this conversation as resolved.
Show resolved Hide resolved
Loading