Test that library works after dist as well

Author: alexkiro

.github/workflows/test.yml

@@ -24,7 +24,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
       - run: npm ci
-      - run: npm run build:app
+      - run: npm run build
       - id: e2e_tests
         run: npm run test:e2e
       - uses: actions/upload-artifact@v4

cypress/support/describeAll.ts

@@ -1,5 +1,5 @@
 export default function describeAll(title: string, fn: () => void) {
-  for (const url of ["/model", "/no-model"]) {
+  for (const url of ["/model", "/no-model", "/from-dist"]) {
     describe(`${title} (${url})`, () => {
       beforeEach(() => {
         cy.visit(url);

package.json

@@ -3,10 +3,17 @@
   "version": "0.1.0",
   "type": "module",
   "private": false,
-  "description": "Lightweight component to generate a simply flipbook from a list of images.",
+  "description": "Lightweight vue component to generate a simple flipbook from a list of images.",
   "keywords": [
     "flipbook",
-    "digital catalog",
+    "catalog",
+    "catalogue",
+    "component",
+    "book",
+    "page",
+    "flip",
+    "turn",
+    "3d",
     "vue3"
   ],
   "homepage": "https://github.com/flip-forge/vue-flip-forge#README",
@@ -18,14 +25,11 @@
   "author": "alexkiro",
   "scripts": {
     "dev": "vite",
-    "build:app": "run-p type-check \"build-only:app {@}\" --",
-    "build:lib": "run-p type-check \"build-only:lib {@}\" --",
-    "preview": "vite preview",
+    "build": "run-p type-check \"build-only {@}\" --",
     "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
-    "build-only:app": "vite build --mode app",
-    "build-only:lib": "vite build --mode lib",
+    "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",
     "lint:check": "eslint .",

src/main.ts

@@ -3,12 +3,14 @@ import App from "./App.vue";
 import { createRouter, createWebHistory } from "vue-router";
 import WithModel from "@/views/WithModel.vue";
 import WithoutModel from "@/views/WithoutModel.vue";
+const FromDist = () => import("@/views/FromDist.vue");
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { name: "with-model", path: "/", component: WithModel, alias: ["/model"] },
-    { name: "without-model", path: "/no-model", component: WithoutModel },
+    { path: "/", component: WithModel, alias: ["/model"] },
+    { path: "/no-model", component: WithoutModel },
+    { path: "/from-dist", component: FromDist },
   ],
 });
 

src/views/FromDist.vue

@@ -0,0 +1,38 @@
+<template>
+  <component
+    :is="flipForge"
+    v-model="page"
+    :pages="pages"
+    :download-url="downloadUrl"
+  />
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from "vue";
+import { useRouteQuery } from "@vueuse/router";
+import downloadUrl from "@/assets/lorem_ipsum.pdf";
+
+export default defineComponent({
+  data() {
+    return {
+      downloadUrl,
+      page: useRouteQuery("page", "0", {
+        transform: Number,
+        mode: "push",
+      }),
+    };
+  },
+  computed: {
+    flipForge() {
+      return defineAsyncComponent(() => import("../../"));
+    },
+    pages() {
+      const result = [];
+      for (let i = 1; i <= 10; i += 1) {
+        result.push(`https://picsum.photos/seed/vue-flip-forge-${i}/768/400`);
+      }
+      return result;
+    },
+  },
+});
+</script>

vite.config.ts

@@ -4,39 +4,33 @@ import vue from "@vitejs/plugin-vue";
 import vueDevTools from "vite-plugin-vue-devtools";
 import dtsPlugin from "vite-plugin-dts";
 
-export default defineConfig((config) => {
-  let build = {};
-  if (config.mode === "lib") {
-    build = {
-      lib: {
-        entry: fileURLToPath(new URL("./src/index.ts", import.meta.url)),
-        name: "Flip Forge",
-        fileName: "vue-flip-forge",
-      },
-      rollupOptions: {
-        external: ["vue"],
-        output: {
-          globals: {
-            vue: "Vue",
-          },
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    dtsPlugin({ tsconfigPath: "./tsconfig.lib.json" }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  server: {
+    port: 8080,
+  },
+  build: {
+    lib: {
+      entry: fileURLToPath(new URL("./src/index.ts", import.meta.url)),
+      name: "Flip Forge",
+      fileName: "vue-flip-forge",
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
         },
       },
-    };
-  }
-  return {
-    plugins: [
-      vue(),
-      vueDevTools(),
-      dtsPlugin({ tsconfigPath: "./tsconfig.lib.json" }),
-    ],
-    resolve: {
-      alias: {
-        "@": fileURLToPath(new URL("./src", import.meta.url)),
-      },
-    },
-    server: {
-      port: 8080,
     },
-    build,
-  };
+  },
 });