@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-beta.0

package/vite.config.js

@@ -2,54 +2,124 @@
 import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
 import { visualizer } from 'rollup-plugin-visualizer'
-import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
-import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import banner from 'vite-plugin-banner'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
 
 import pkg from './package.json'
 
+// Check build mode: 'vue' for library build, default for web component
+const buildMode = process.env.BUILD_MODE
+
 export default defineConfig({
   base: './',
   plugins: [
     vue({
-      customElement: true,
-    }),
-    Components({
-      resolvers: [BootstrapVueNextResolver()],
+      // Only use customElement mode for web component build
+      customElement: buildMode !== 'vue',
     }),
     banner(
       `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`
     ),
     visualizer(),
-    viteStaticCopy({
-      targets: [
+    ...(buildMode !== 'vue'
+      ? [
+          viteStaticCopy({
+            targets: [
+              {
+                src: 'dist/index.mjs',
+                dest: './',
+                rename: 'index.js',
+              },
+            ],
+          }),
+        ]
+      : []),
+  ],
+  build:
+    buildMode === 'vue'
+      ? // Vue library build configuration
         {
-          src: 'dist/index.mjs',
-          dest: './',
-          rename: 'index.js',
+          target: 'es2020',
+          outDir: 'dist/vue',
+          sourcemap: false,
+          minify: 'esbuild',
+          cssCodeSplit: false,
+          cssMinify: true,
+          copyPublicDir: false,
+          lib: {
+            entry: fileURLToPath(new URL('./src/vue.ts', import.meta.url)),
+            name: 'SmartMetAlertClient',
+            formats: ['es'],
+            fileName: () => 'index.mjs',
+          },
+          rollupOptions: {
+            external: ['vue'],
+            output: {
+              globals: {
+                vue: 'Vue',
+              },
+              generatedCode: {
+                constBindings: true,
+                objectShorthand: true,
+              },
+            },
+          },
         }
-      ]
-    })
-  ],
+      : // Web component build configuration (default)
+        {
+          target: 'es2020',
+          outDir: 'dist',
+          assetsDir: '',
+          sourcemap: false,
+          minify: 'esbuild',
+          cssCodeSplit: false,
+          cssMinify: true,
+          chunkSizeWarningLimit: 1500,
+          rollupOptions: {
+            output: {
+              entryFileNames: 'index.mjs',
+              compact: true,
+              inlineDynamicImports: false,
+              manualChunks: (id) => {
+                // XML parsers as separate chunk
+                if (id.includes('@xmldom/xmldom') || id.includes('xpath')) {
+                  return 'xml-parser'
+                }
+                // Locale files as separate chunks
+                if (id.includes('/locales/')) {
+                  const match = id.match(/locales\/(\w+)\.json/)
+                  if (match) {
+                    return `locale-${match[1]}`
+                  }
+                }
+                // Core vendor libraries
+                if (id.includes('node_modules')) {
+                  if (id.includes('vue')) {
+                    return 'vendor'
+                  }
+                }
+              },
+              generatedCode: {
+                constBindings: true,
+                objectShorthand: true,
+              },
+            },
+          },
+        },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['import', 'legacy-js-api'],
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
-  build: {
-    target: 'es2019',
-    outDir: 'dist',
-    assetsDir: '',
-    sourcemap: true,
-    minify: true,
-    rollupOptions: {
-      output: {
-        entryFileNames: 'index.mjs',
-      },
-    },
-  },
   define: {
     __APP_VERSION__: JSON.stringify(pkg.version),
   },

package/vitest.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['import', 'legacy-js-api'],
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        'dist/',
+        'public/',
+        '*.config.js',
+        '.eslintrc.js',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  define: {
+    __APP_VERSION__: JSON.stringify('test-version'),
+  },
+})

package/dist/index.dark.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="fi">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
-    <title>SmartMet Alert Client</title>
-    <style>
-      body {
-        background-color: #191b22;
-      }
-    </style>
-  </head>
-
-  <body>
-    <smartmet-alert-client language="fi" theme="dark"></smartmet-alert-client>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>

package/dist/index.en.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
-    <title>SmartMet Alert Client</title>
-  </head>
-
-  <body>
-    <smartmet-alert-client language="en"></smartmet-alert-client>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>

package/dist/index.fi.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="fi">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
-    <title>SmartMet Alert Client</title>
-  </head>
-
-  <body>
-    <smartmet-alert-client language="fi"></smartmet-alert-client>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>

package/dist/index.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="fi">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
-    <title>SmartMet Alert Client</title>
-    <script type="module" crossorigin src="./index.mjs"></script>
-  </head>
-
-  <body>
-    <smartmet-alert-client></smartmet-alert-client>
-  </body>
-</html>