lime-elements-vue 1.0.8 → 1.0.10

package/README.md

@@ -29,12 +29,12 @@ export default defineConfig({
         }
       }
     }),
-    // Copy lime-elements assets to your public folder
+    // Copy lime-elements ESM files to assets folder
     viteStaticCopy({
       targets: [
         {
-          src: 'node_modules/@limetech/lime-elements/dist',
-          dest: 'lime-elements'
+          src: 'node_modules/@limetech/lime-elements/dist/esm/*',
+          dest: 'assets/'
         }
       ]
     })
@@ -54,16 +54,20 @@ npm install -D vite-plugin-static-copy
 
 ### 2. Register the plugin globally
 
+**Important:** Set `resourcesUrl` to match where you copied the files in your Vite config.
+
 ```typescript
 import { createApp } from 'vue'
 import { LimeElementsVue } from 'lime-elements-vue'
 import App from './App.vue'
 
 const app = createApp(App)
-// Point to the copied assets
+
+// Match this to your viteStaticCopy dest path
 app.use(LimeElementsVue, {
-  resourcesUrl: '/lime-elements/dist/'
+  resourcesUrl: '/assets/'  // Must match the 'dest' in viteStaticCopy config
 })
+
 app.mount('#app')
 ```
 
@@ -88,21 +92,39 @@ const handleClick = () => {
 </script>
 ```
 
-## Development vs Production
+## Configuration Options
+
+### Development vs Production
+
+- **Development**: The default `resourcesUrl` points to `/node_modules/@limetech/lime-elements/dist/` which works with Vite's dev server
+- **Production**: You **must** configure `resourcesUrl` to match where you copy the assets using `vite-plugin-static-copy`
 
-The default `resourcesUrl` is set to `/node_modules/@limetech/lime-elements/dist/` which works in **development mode only**.
+### Alternative: Copy to different location
 
-For production builds, you **must** use `vite-plugin-static-copy` as shown above to copy the assets and configure the `resourcesUrl` option.
+If you prefer a different location:
 
-## Advanced Configuration
+```typescript
+// In vite.config.ts
+viteStaticCopy({
+  targets: [
+    {
+      src: 'node_modules/@limetech/lime-elements/dist/esm/*',
+      dest: 'lime-elements/'  // Custom destination
+    }
+  ]
+})
 
-### Custom Resource URL
+// In your app
+app.use(LimeElementsVue, {
+  resourcesUrl: '/lime-elements/'  // Must match!
+})
+```
 
-If you're serving from a CDN:
+### Using a CDN
 
 ```typescript
 app.use(LimeElementsVue, {
-  resourcesUrl: 'https://your-cdn.com/lime-elements/dist/'
+  resourcesUrl: 'https://your-cdn.com/lime-elements/'
 })
 ```
 
@@ -112,17 +134,22 @@ This package provides Vue 3 wrappers for all lime-elements components. For detai
 
 ## Troubleshooting
 
-### 404 errors for component files in development
+### 404 errors for component files
 
-If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)` in development:
+If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)`:
 
-1. The default resourcesUrl should work with Vite's dev server
-2. Ensure `optimizeDeps.exclude: ['@limetech/lime-elements']` is set
-3. Make sure `isCustomElement: (tag) => tag.includes('-')` is configured
+1. **Check your `resourcesUrl`** - It must match the `dest` path in `viteStaticCopy` config
+2. **Ensure you're copying the right files** - Use `dist/esm/*` not just `dist`
+3. **Include trailing slash** - `resourcesUrl: '/assets/'` not `/assets`
+4. **Configure Vite properly**:
+   - `optimizeDeps.exclude: ['@limetech/lime-elements']`
+   - `isCustomElement: (tag) => tag.includes('-')`
 
-### 404 errors in production build
+### Development mode 404 errors
 
-You must copy the assets using `vite-plugin-static-copy` and configure the `resourcesUrl` option when installing the plugin.
+For development, either:
+- Use the default (no resourcesUrl option) which points to `/node_modules/@limetech/lime-elements/dist/`
+- Or configure Vite's server to serve node_modules
 
 ## License
 

package/dist/index.cjs.js

@@ -1,23 +1,25 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LimeElementsVue = void 0;
-
-const components_1 = require("./components");
-Object.keys(components_1).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === components_1[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () { return components_1[key]; }
-  });
-});
-
-const loader_1 = require("@limetech/lime-elements/loader");
-
-exports.LimeElementsVue = {
-  async install() {
-    loader_1.applyPolyfills().then(() => {
-      loader_1.defineCustomElements();
-    });
-  }
+__exportStar(require("./components"), exports);
+const loader_1 = require("@limetech/lime-elements/dist/loader");
+exports.default = {
+    install(app) {
+        (0, loader_1.applyPolyfills)().then(() => {
+            (0, loader_1.defineCustomElements)(window);
+        });
+    },
 };

package/dist/index.d.ts

@@ -3,7 +3,9 @@ import type { Plugin } from 'vue';
 export interface LimeElementsVueOptions {
     /**
      * Custom URL for lime-elements resources.
-     * If not provided, will attempt to load from node_modules
+     * Default: '/node_modules/@limetech/lime-elements/dist/' (works in dev mode)
+     * For production, set this to match where you copy the assets
+     * Example: '/assets/' if you copy dist/esm/* to assets/
      */
     resourcesUrl?: string;
 }

package/dist/index.js

@@ -3,9 +3,9 @@ import { applyPolyfills, defineCustomElements } from '@limetech/lime-elements/di
 export const LimeElementsVue = {
     async install(_app, options) {
         applyPolyfills().then(() => {
-            // Set a default resourcesUrl that points to node_modules
-            // This works in dev mode with Vite
-            const resourcesUrl = options?.resourcesUrl || '/node_modules/@limetech/lime-elements/dist/';
+            // Default works for dev mode with Vite
+            // For production, users should set resourcesUrl to match their build config
+            const resourcesUrl = options?.resourcesUrl ?? '/node_modules/@limetech/lime-elements/dist/';
             defineCustomElements(window, {
                 resourcesUrl
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lime-elements-vue",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Vue 3 wrapper for @limetech/lime-elements web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,7 +23,7 @@
     "lime-elements",
     "stencil"
   ],
-  "author": "Your Name",
+  "author": "Piotr Adamczyk <piotr.adamczyk@lundalogik.com>",
   "license": "MIT",
   "dependencies": {
     "@limetech/lime-elements": "^38.28.0",