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 cssFileName: resolve(__dirname, 'lib/styles.css'),
44 name: 'atproto-ui',
45 formats: ['es'],
46 fileName: 'atproto-ui'
47 },
48 cssCodeSplit: false,
49 outDir: 'lib-dist',
50 rollupOptions: {
51 // Externalize dependencies that shouldn't be bundled
52 external: [
53 'react',
54 'react-dom',
55 'react/jsx-runtime',
56 '@atcute/atproto',
57 '@atcute/bluesky',
58 '@atcute/client',
59 '@atcute/identity-resolver',
60 '@atcute/tangled'
61 ],
62 output: {
63 preserveModules: true,
64 preserveModulesRoot: 'lib',
65 entryFileNames: '[name].js',
66 assetFileNames: (assetInfo) => {
67 // Output CSS to root of lib-dist as styles.css
68 if (assetInfo.name && assetInfo.name.endsWith('.css')) {
69 return 'styles.css';
70 }
71 return 'assets/[name][extname]';
72 }
73 }
74 },
75 }
76});