A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import dts from 'unplugin-dts/vite'
4import { resolve } from 'path';
5import type { Plugin } from 'vite';
6
7// Plugin to inject CSS import as a side effect in the main entry
8function injectCssImport(): Plugin {
9 return {
10 name: 'inject-css-import',
11 generateBundle(_, bundle) {
12 const indexFile = bundle['index.js'];
13 if (indexFile && indexFile.type === 'chunk') {
14 // Inject the CSS import at the top of the file
15 indexFile.code = `import './styles.css';\n${indexFile.code}`;
16 }
17 }
18 };
19}
20
21// https://vite.dev/config/
22export default defineConfig({
23 plugins: [react(), dts({ tsconfigPath: './tsconfig.lib.json' }), injectCssImport()],
24 build: {
25 lib: {
26 entry: resolve(__dirname, 'lib/index.ts'),
27 name: 'atproto-ui',
28 formats: ['es'],
29 fileName: 'atproto-ui'
30 },
31 cssCodeSplit: false,
32 outDir: 'lib-dist',
33 rollupOptions: {
34 // Externalize dependencies that shouldn't be bundled
35 external: [
36 'react',
37 'react-dom',
38 'react/jsx-runtime',
39 '@atcute/atproto',
40 '@atcute/bluesky',
41 '@atcute/client',
42 '@atcute/identity-resolver',
43 '@atcute/tangled'
44 ],
45 output: {
46 preserveModules: true,
47 preserveModulesRoot: 'lib',
48 entryFileNames: '[name].js',
49 assetFileNames: (assetInfo) => {
50 // Output CSS to root of lib-dist as styles.css
51 if (assetInfo.name && assetInfo.name.endsWith('.css')) {
52 return 'styles.css';
53 }
54 return 'assets/[name][extname]';
55 }
56 }
57 },
58 sourcemap: true,
59 minify: false
60 }
61});