Add usage example, fix build for use with bundlers and browser (#552)

Co-authored-by: Sergiu Cazac <[email protected]>

.github/workflows/node.js.yml

@@ -27,8 +27,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [lts/*] # latest LTS version of Node
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}

build/build.lib.mjs

@@ -38,6 +38,9 @@ const entries = [
   "UiTooltip",
 ];
 
+// We need to get the env variable here because it later gets polluted by child processes
+const mode = process.env.NODE_ENV || "production";
+
 entries.forEach(async (entry) => {
-  await build(getLibConfig({ entry, mode: process.env.NODE_ENV || "production" }));
+  await build(getLibConfig({ entry, mode }));
 });

build/vite.config.dist.mjs

@@ -6,9 +6,20 @@ import autoprefixer from "autoprefixer";
 import options from "./options.mjs";
 
 export default defineConfig(({ mode }) => {
-  const filename = mode === "production" ? "keen-ui.min" : "keen-ui";
+  const isProduction = mode === "production";
   const outDir = options.paths.output.main;
 
+  const formatFileNames = {
+    es: {
+      development: "keen-ui.esm.js",
+      production: "keen-ui.esm.min.js",
+    },
+    umd: {
+      development: "keen-ui.js",
+      production: "keen-ui.min.js",
+    },
+  };
+
   return {
     plugins: [vue(), banner({ content: options.banner, outDir })],
     resolve: {
@@ -31,14 +42,19 @@ export default defineConfig(({ mode }) => {
       lib: {
         entry: options.paths.resolve("src/index.js"),
         name: "KeenUI",
-        formats: ["umd"],
-        fileName: () => filename + ".js",
+        formats: isProduction ? ["umd"] : ['umd', 'es'],
+        fileName: (format) => {
+          return formatFileNames[format][mode]
+        },
       },
       rollupOptions: {
         external: [/^vue/],
         output: {
+          globals: {
+            vue: "Vue",
+          },
           assetFileNames: (assetInfo) =>
-            assetInfo.name === "style.css" ? filename + ".css" : assetInfo.name,
+            assetInfo.name === "style.css" ? `keen-ui${isProduction ? '.min' : ''}.css` : assetInfo.name,
         },
       },
     },

build/vite.config.lib.provider.mjs

@@ -5,8 +5,20 @@ import autoprefixer from "autoprefixer";
 import options from "./options.mjs";
 
 export default ({ entry, mode }) => {
+  const isProduction = mode === "production";
   const outDir = options.paths.output.lib;
 
+  const formatFileNames = {
+    es: {
+      development: `${entry}.esm.js`,
+      production: `${entry}.esm.min.js`,
+    },
+    umd: {
+      development: `${entry}.js`,
+      production: `${entry}.min.js`,
+    },
+  };
+
   return {
     plugins: [vue(), banner({ content: options.banner, outDir })],
     resolve: {
@@ -20,11 +32,13 @@ export default ({ entry, mode }) => {
       },
     },
     build: {
-      minify: mode === "production" ? "esbuild" : false,
+      minify: isProduction ? "esbuild" : false,
       lib: {
         entry: options.paths.resolve(`src/${entry}.vue`),
-        formats: ["umd"],
-        fileName: () => `[name]${mode === "production" ? ".min" : ""}.js`,
+        formats: isProduction ? ["umd"] : ['umd', 'es'],
+        fileName: (format) => {
+          return formatFileNames[format][mode]
+        },
         name: `KeenUI.${entry}`,
       },
       outDir,
@@ -36,6 +50,9 @@ export default ({ entry, mode }) => {
           globals: {
             vue: "Vue",
           },
+          assetFileNames: () => {
+            return `css/[name][extname]`
+          }
         },
       },
     },