Add standalone build

.github/workflows/publish.yaml

@@ -15,6 +15,7 @@ jobs:
           registry-url: "https://registry.npmjs.org"
       - run: npm ci
       - run: npm run build
+      - run: npm run build:standalone
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -30,6 +30,14 @@ npm install @nilfoundation/ui-kit baseui styletron-engine-atomic styletron-react
 yarn add @nilfoundation/ui-kit baseui styletron-engine-atomic styletron-react
 ```
 
+### CDN
+
+```html
+<script src="https://unpkg.com/@nilfoundation/ui-kit/dist/ui-kit.iife.js"></script>
+```
+
+Notice, that global `React` variable should be accessible, because it is not included in the standalone bundle.
+
 ## Usage
 
 ```tsx

package.json

@@ -8,6 +8,7 @@
   ],
   "main": "dist/ui-kit.js",
   "module": "dist/ui-kit.mjs",
+  "unpkg": "dist/ui-kit.iife.js",
   "types": "dist/ui-kit.d.ts",
   "files": [
     "dist"
@@ -16,6 +17,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "bundle-types": "api-extractor run",
+    "build:standalone": "vite build --mode standalone",
     "postbuild": "npm run bundle-types && rm -rf ./dist/.temp",
     "preview": "vite preview",
     "prettier": "prettier --write 'src/**/**/*.{js,ts,tsx,mdx}'",

vite.config.ts

@@ -19,23 +19,52 @@ const createBanner = () => {
  */`;
 }
 
-export default defineConfig({
-  plugins: [
+const packagesIncludeInStandalone = [
+  /baseui\/*/,
+  'lightweight-charts',
+  '@uiw/react-codemirror',
+  '@uiw/codemirror-themes',
+  'styletron-standard',
+  'styletron-react',
+  'copy-to-clipboard',
+  'inline-style-expand-shorthand',
+  'react/jsx-runtime',
+];
+
+export default defineConfig(({mode}) => {
+  const isStandalone = mode === 'standalone';
+  const plugins = [
     react(),
-    eslint(),
-    externalizeDeps(),
-    dts({ staticImport: true, outputDir: './dist/.temp' }),
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'cjs'],
-    },
-    rollupOptions: {
-      output: {
-        banner: createBanner(),
-        sourcemap: true,
+    eslint({include: ['./src/**/*.ts', './src/**/*.tsx']}),
+    externalizeDeps({except: isStandalone ? packagesIncludeInStandalone : []}),
+  ];
+
+  if (!isStandalone) {
+    plugins.push(
+      dts({ staticImport: true, outputDir: './dist/.temp' }),
+    );
+  }
+
+  return ({
+    plugins: plugins,
+    build: {
+      lib: {
+        entry: resolve(__dirname, 'src/index.ts'),
+        formats: isStandalone ? ['iife'] : ['es', 'cjs'],
+        name: 'NilFoundationUIKit',
+      },
+      rollupOptions: {
+        output: {
+          banner: createBanner(),
+          sourcemap: true,
+          globals: isStandalone ? {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+          } : undefined,
+        },
       },
+      outDir: 'dist',
+      emptyOutDir: !isStandalone,
     },
-  },
+  })
 });