Merge pull request #632 from Mokshit06/unplugin-civet

Add civet unplugin

build/build.sh

@@ -1,6 +1,9 @@
 #!/bin/bash
 set -euo pipefail
 
+# clean build
+rm -rf dist
+
 # normal files
 civet --no-config build/esbuild.civet
 
@@ -16,5 +19,10 @@ cp source/babel-plugin.mjs dist/babel-plugin.mjs
 # types
 cp types/types.d.ts dist/types.d.ts
 
+# unplugin
+yarn --cwd ./integration/unplugin build
+cp ./integration/unplugin/dist/* ./dist
+
 # create browser build for docs
 terser dist/browser.js --compress --mangle --ecma 2015 --output civet.dev/public/__civet.js
+

integration/unplugin/README.md

@@ -0,0 +1,88 @@
+# unplugin-civet
+
+Use Civet in your projects with Vite, Webpack, Rspack, Rollup and esbuild, with `dts` generation supported.
+
+## Usage
+
+The only setup required is adding it your bundler's config:
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import civetVitePlugin from '@danielx/civet/vite';
+
+export default defineConfig({
+  // ...
+  plugins: [
+    civetVitePlugin({
+      // options
+    }),
+  ],
+});
+```
+
+### Rollup
+
+```ts
+// rollup.config.ts
+import civetRollupPlugin from '@danielx/civet/rollup';
+
+export default {
+  // ...
+  plugins: [
+    civetRollupPlugin({
+      // options
+    }),
+  ],
+};
+```
+
+### ESBuild
+
+```ts
+import esbuild from 'esbuild';
+import civetEsbuildPlugin from '@danielx/civet/esbuild';
+
+esbuild
+  .build({
+    // ...
+    plugins: [civetEsbuildPlugin()],
+  })
+  .catch(() => process.exit(1));
+```
+
+### Webpack
+
+```js
+const civetWebpackPlugin = require('@danielx/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. Default: `false`.
+- `outputExtension`: Output filename extension to use. Default: `.civet.tsx`, or uses `.civet.jsx` if `js` is `true`.
+- `js`: Whether to transpile to JS or TS. Default: `false`.
+- `transformOutput(code, id)`: Adds a custom transformer over jsx/tsx code produced by `civet.compile`. It gets passed the jsx/tsx source (`code`) and filename (`id`), and should return valid jsx/tsx code.

integration/unplugin/examples/astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

integration/unplugin/examples/astro/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

integration/unplugin/examples/astro/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

integration/unplugin/examples/astro/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

integration/unplugin/examples/astro/astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+import civetVitePlugin from '@danielx/civet/vite';
+
+import solidJs from '@astrojs/solid-js';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [civetVitePlugin({})],
+  },
+  integrations: [solidJs()],
+});

integration/unplugin/examples/astro/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "astro-example",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/solid-js": "^2.2.0",
+    "astro": "^2.10.7",
+    "solid-js": "^1.7.11"
+  },
+  "devDependencies": {
+    "@danielx/civet": "*"
+  }
+}

integration/unplugin/examples/astro/src/component.civet

@@ -0,0 +1,10 @@
+{createSignal} from 'solid-js'
+
+
+export default function Counter()
+  [count, setCount] := createSignal 0
+
+  console.log "rendering"
+
+  <button onClick={=>setCount(count() + 1)}>
+    {count()}

integration/unplugin/examples/astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

integration/unplugin/examples/astro/src/pages/index.astro

@@ -0,0 +1,17 @@
+---
+import Counter from '../component.civet';
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro</title>
+  </head>
+  <body>
+    <h1>Astro</h1>
+    <Counter client:load />
+  </body>
+</html>

integration/unplugin/examples/astro/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}

integration/unplugin/examples/rollup/main.civet

@@ -0,0 +1,5 @@
+{a} from "./utils/module.civet"
+
+export b = a
+
+export * from "./utils/module.civet"

integration/unplugin/examples/rollup/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "build": "npx rollup --config rollup.config.js"
+  },
+  "devDependencies": {
+    "@danielx/civet": "*"
+  }
+}

integration/unplugin/examples/rollup/rollup.config.js

@@ -0,0 +1,14 @@
+import civetRollupPlugin from '@danielx/civet/rollup';
+
+export default {
+  input: 'main.civet',
+  output: {
+    dir: 'dist',
+    format: 'cjs',
+  },
+  plugins: [
+    civetRollupPlugin({
+      dts: true,
+    }),
+  ],
+};

integration/unplugin/examples/rollup/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "noEmit": false,
+    "checkJs": false,
+    "declarationMap": false,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "allowJs": true,
+    "jsx": "preserve",
+    "emitDeclarationOnly": true,
+    "declaration": true
+  }
+}

integration/unplugin/examples/rollup/utils/module.civet

@@ -0,0 +1 @@
+export a = "a"

integration/unplugin/examples/vite-lib/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Hello world</h1>
+    <script src="./src/main.civet" type="module"></script>
+  </body>
+</html>

integration/unplugin/examples/vite-lib/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "build": "npx vite build"
+  },
+  "devDependencies": {
+    "@danielx/civet": "*"
+  }
+}

integration/unplugin/examples/vite-lib/src/main.civet

@@ -0,0 +1,3 @@
+{a} from "./module.civet"
+
+console.log a

integration/unplugin/examples/vite-lib/src/module.civet

@@ -0,0 +1 @@
+export a = "a"

integration/unplugin/examples/vite-lib/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "noEmit": false,
+    "checkJs": false,
+    "declarationMap": false,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "allowJs": true,
+    "jsx": "preserve",
+    "emitDeclarationOnly": true,
+    "declaration": true
+  }
+}

integration/unplugin/examples/vite-lib/vite.config.js

@@ -0,0 +1,13 @@
+import civetVitePlugin from '@danielx/civet/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/main.civet',
+      fileName: 'main',
+      formats: ['cjs', 'es'],
+    },
+  },
+  plugins: [civetVitePlugin({ dts: true })],
+});