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
21const buildDemo = process.env.BUILD_TARGET === 'demo';
22
23// https://vite.dev/config/
24export default defineConfig({
25 plugins: buildDemo
26 ? [react()]
27 : [react(), dts({ tsconfigPath: './tsconfig.lib.json' }), injectCssImport()],
28
29 // Demo app needs to resolve from src
30 root: buildDemo ? '.' : undefined,
31
32 build: buildDemo ? {
33 // Demo app build configuration
34 outDir: 'demo',
35 rollupOptions: {
36 input: resolve(__dirname, 'index.html')
37 },
38 sourcemap: false
39 } : {
40 // Library build configuration
41 lib: {
42 entry: resolve(__dirname, 'lib/index.ts'),
43 name: 'atproto-ui',
44 formats: ['es'],
45 fileName: 'atproto-ui'
46 },
47 cssCodeSplit: false,
48 outDir: 'lib-dist',
49 rollupOptions: {
50 // Externalize dependencies that shouldn't be bundled
51 external: [
52 'react',
53 'react-dom',
54 'react/jsx-runtime',
55 '@atcute/atproto',
56 '@atcute/bluesky',
57 '@atcute/client',
58 '@atcute/identity-resolver',
59 '@atcute/tangled'
60 ],
61 output: {
62 preserveModules: true,
63 preserveModulesRoot: 'lib',
64 entryFileNames: '[name].js',
65 assetFileNames: (assetInfo) => {
66 // Output CSS to root of lib-dist as styles.css
67 if (assetInfo.name && assetInfo.name.endsWith('.css')) {
68 return 'styles.css';
69 }
70 return 'assets/[name][extname]';
71 }
72 }
73 },
74 sourcemap: false,
75 minify: false
76 }
77});