build umd components

lnbits/helpers.py

@@ -132,7 +132,6 @@ def template_renderer(additional_folders: list | None = None) -> Jinja2Templates
             t.env.globals["INCLUDED_JS"] = vendor_files["js"]
             t.env.globals["INCLUDED_CSS"] = vendor_files["css"]
             t.env.globals["INCLUDED_COMPONENTS"] = vendor_files["components"]
-            t.env.globals["INCLUDED_MODULES"] = vendor_files["modules"]
 
     return t
 

lnbits/static/components/main.js

@@ -0,0 +1,3 @@
+import LnbitsError from './lnbits-error.vue'
+
+window.LnbitsError = LnbitsError

lnbits/templates/base.html

@@ -95,9 +95,7 @@
     <!-- scripts from extensions -->
     {% block scripts %}{% endblock %}
     <!-- modules js -->
-    {% for url in INCLUDED_MODULES %}
-    <script type="module" src="{{ static_url_for('static', url) }}"></script>
-    {% endfor %}
+    <script src="{{ static_url_for('static', 'modules/components.umd.js') }}"></script>
     <!-- components js -->
     {% for url in INCLUDED_COMPONENTS %}
     <script src="{{ static_url_for('static', url) }}"></script>

package.json

@@ -13,7 +13,8 @@
     "bundle": "npm run sass && npm run vendor_copy && npm run vendor_json && npm run vendor_bundle_css && npm run vendor_bundle_js && npm run vendor_bundle_components && npm run vendor_minify_css && npm run vendor_minify_js && npm run vendor_minify_components",
     "test": "npm run test:unit",
     "test:unit": "vitest --watch=false tests/frontend/unit",
-    "test:unit:watch": "vitest tests/frontend/unit"
+    "test:unit:watch": "vitest tests/frontend/unit",
+    "build": "vite build"
   },
   "devDependencies": {
     "@quasar/quasar-app-extension-testing-unit-vitest": "^1.2.4",
@@ -102,9 +103,6 @@
       "js/event-reactions.js",
       "js/bolt11-decoder.js"
     ],
-    "modules": [
-      "components/lnbits-error.vue"
-    ],
     "components": [
       "js/pages/error.js",
       "js/pages/home.js",

tests/frontend/unit/component_lnbits_error.spec.js

@@ -1,22 +1,37 @@
-// import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
 import {mount} from '@vue/test-utils'
 import {expect, test} from 'vitest'
-import {createApp} from 'vue'
-import {Quasar} from 'quasar'
 import LnbitsError from '../../../lnbits/static/components/lnbits-error.vue'
 
+// installQuasarPlugin()
+export const quasarMock = {
+  global: {
+    mocks: {
+      g: {
+        isUserAuthorized: true
+      },
+      $q: {
+        platform: {},
+        screen: {},
+        dark: false
+      }
+    },
+    stubs: {
+      QCard: true,
+      QCardSection: true,
+      QIcon: true,
+      QBtn: true
+    }
+  }
+}
 test('displays message and code', () => {
-  const app = createApp({})
-  app.use(Quasar)
+  expect(LnbitsError).toBeTruthy()
 
   const wrapper = mount(LnbitsError, {
-    global: {
-      plugins: [Quasar]
-    },
     props: {
       message: 'Page not found!!!',
       code: 404
-    }
+    },
+    ...quasarMock
   })
   expect(wrapper.text()).toContain('Page not found!!!')
   expect(wrapper.text()).toContain('404')

vite.config.ts

@@ -0,0 +1,26 @@
+import {defineConfig} from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom'
+  },
+  define: {
+    'process.env': {}, // Replace process.env with an empty object for browser builds
+  },
+  build: {
+    lib: {
+      entry: 'lnbits/static/components/main.js',
+      name: 'LnbitsComponents',
+      fileName: 'components', // Output file name (build.js)
+      formats: ['umd']
+    },
+    minify: 'terser', // Optional: minify the output
+    rollupOptions: {
+      // If you have external dependencies, mark them here
+      external: []
+    },
+    outDir: 'lnbits/static/modules' // Output folder
+  }
+})

vitest.config.ts

@@ -1,9 +0,0 @@
-import {defineConfig} from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
-export default defineConfig({
-  plugins: [vue()],
-  test: {
-    globals: true,
-    environment: 'jsdom'
-  }
-})