doc: bundlers and configuration

apps/website/pages/bundlers/esbuild.mdx

@@ -0,0 +1,30 @@
+# Usage with esbuild
+
+### Installation
+
+```sh npm2yarn
+npm i -D @wyw-in-js/esbuild
+```
+
+### Configuration
+
+```js
+import wyw from '@wyw-in-js/esbuild';
+import esbuild from 'esbuild';
+
+const prod = process.env.NODE_ENV === 'production';
+
+esbuild
+  .build({
+    entryPoints: ['src/index.ts'],
+    outdir: 'dist',
+    bundle: true,
+    minify: prod,
+    plugins: [
+      wyw({
+        sourceMap: prod,
+      }),
+    ],
+  })
+  .catch(() => process.exit(1));
+```

apps/website/pages/bundlers/rollup.mdx

@@ -0,0 +1,48 @@
+# Usage with Rollup
+
+### Installation
+
+To use WyW-in-JS with Rollup, you need to use it together with a plugin which handles CSS files, such as `rollup-plugin-css-only`:
+
+```sh npm2yarn
+npm i -D rollup-plugin-css-only @wyw-in-js/rollup
+```
+
+### Configuration
+
+```js
+import wyw from '@wyw-in-js/rollup';
+import css from 'rollup-plugin-css-only';
+
+export default {
+  plugins: [
+    wyw({
+      sourceMap: process.env.NODE_ENV !== 'production',
+    }),
+    css({
+      output: 'styles.css',
+    }),
+  ],
+};
+```
+
+If you are using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as well, ensure the wyw plugin is declared earlier in the `plugins` array than your babel plugin.
+
+```js
+import wyw from '@wyw-in-js/rollup';
+import css from 'rollup-plugin-css-only';
+import babel from '@rollup/plugin-babel';
+
+export default {
+  plugins: [
+    wyw({
+      sourceMap: process.env.NODE_ENV !== 'production',
+    }),
+    css({
+      output: 'styles.css',
+    }),
+    babel({}),
+    /* rest of your plugins */
+  ],
+};
+```

apps/website/pages/bundlers/svelte.mdx

@@ -0,0 +1,84 @@
+# Usage with Svelte
+
+#### Contents
+
+- [Svelte with Rollup](#Rollup-1)
+- [Svelte with Webpack](#Webpack-1)
+
+#### Rollup
+
+Take a look: [d964432](https://github.com/madhavarshney/svelte-linaria-sample/commit/d96443218694c0c8d80edf7c40a8fbf7c1f6997f)
+
+Install `rollup-plugin-css-only` and update `rollup.config.js`
+
+```js
+import svelte from 'rollup-plugin-svelte';
+import css from 'rollup-plugin-css-only'; // for CSS bundling
+import wyw from '@wyw-in-js/rollup';
+
+const dev = process.env.NODE_ENV !== 'production';
+
+export default {
+  ...
+  plugins: [
+    svelte({
+      dev,
+      // allow `plugin-css-only` to bundle with CSS generated by wyw
+      emitCss: true,
+    }),
+    wyw({
+      sourceMap: dev,
+    }),
+    css({
+      output: '<OUT_FOLDER>/bundle.css',
+    }),
+  ],
+};
+```
+
+**IMPORTANT**: `rollup-plugin-css-only` generates incorrect sourcemaps (see [thgh/rollup-plugin-css-only#10](https://github.com/thgh/rollup-plugin-css-only/issues/10)). Use an alternative CSS plugin such as [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss) instead in the same way as above.
+
+#### Webpack
+
+Take a look: [5ffd69d](https://github.com/madhavarshney/svelte-linaria-sample/commit/5ffd69dc9f9584e3eec4127e798d7a4c1552ec19)
+
+Update `webpack.config.js` with the following:
+
+```js
+const prod = process.env.NODE_ENV === 'production';
+
+const wywLoader = {
+  loader: '@wyw-in-js/webpack-loader',
+  options: {
+    sourceMap: !prod,
+  },
+};
+
+module.exports = {
+  ...
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: [wywLoader],
+      },
+      {
+        test: /\.svelte$/,
+        use: [
+          wywLoader,
+          {
+            loader: 'svelte-loader',
+            options: {
+              dev: !prod,
+              emitCss: true,
+              hotReload: true,
+            },
+          },
+        ],
+      },
+      ...(CSS rules)
+    ],
+  },
+};
+```

apps/website/pages/bundlers/vite.mdx

@@ -0,0 +1,41 @@
+# Usage with Vite
+
+### Installation
+
+~~Since Vite supports Rollup plugin~~ Since Vite provides more features and flexibility, WyW-in-JS has a separate plugin for it `@wyw-in-js/vite`. Vite handles CSS by itself, you don't need a css plugin.
+
+```sh npm2yarn
+npm i -D @wyw-in-js/vite
+```
+
+### Configuration
+
+```js
+import { defineConfig } from 'vite';
+import wyw from '@wyw-in-js/vite';
+
+export default defineConfig(() => ({
+  // ...
+  plugins: [wyw()],
+}));
+```
+
+If you are using language features that requires a babel transform (such as typescript), ensure the proper babel presets or plugins are passed to wyw.
+
+```js
+import { defineConfig } from 'vite';
+import wyw from '@wyw-in-js/vite';
+
+// example to support typescript syntax:
+export default defineConfig(() => ({
+  // ...
+  plugins: [
+    wyw({
+      include: ['**/*.{ts,tsx}'],
+      babelOptions: {
+        presets: ['@babel/preset-typescript', '@babel/preset-react'],
+      },
+    }),
+  ],
+}));
+```