Using RollUp

docs/components/button.md

@@ -26,17 +26,6 @@ Styled button with full DaisyUI support and reactive states.
 
 <div id="demo-basic"></div>
 
-<script type="module">
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const Demo = () => {
-    return Button({ class: "btn-primary" }, "Click Me");
-  };
-
-  $mount(Demo, "#demo-basic");
-</script>
-
 ```javascript
 Button({ class: "btn-primary" }, "Click Me")
 ```
@@ -45,27 +34,6 @@ Button({ class: "btn-primary" }, "Click Me")
 
 <div id="demo-loading"></div>
 
-<script type="module">
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from '../../sigpro-ui/sigpro-ui.js';
-
-  const isSaving = $(false);
-
-  const Demo = () => {
-    return Button({
-      class: "btn-success",
-      loading: isSaving,
-      onclick: async () => {
-        isSaving(true);
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        isSaving(false);
-      }
-    }, "Save Changes");
-  };
-
-  $mount(Demo, "#demo-loading");
-</script>
-
 ```javascript
 const isSaving = $(false);
 
@@ -84,21 +52,6 @@ Button({
 
 <div id="demo-badge"></div>
 
-<script type="module">
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const Demo = () => {
-    return Button({
-      class: "btn-outline",
-      badge: "3",
-      badgeClass: "badge-accent"
-    }, "Notifications");
-  };
-
-  $mount(Demo, "#demo-badge");
-</script>
-
 ```javascript
 Button({
   class: "btn-outline",
@@ -111,20 +64,6 @@ Button({
 
 <div id="demo-tooltip"></div>
 
-<script type="module">
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const Demo = () => {
-    return Button({
-      class: "btn-ghost",
-      tooltip: "Delete item"
-    }, "Delete");
-  };
-
-  $mount(Demo, "#demo-tooltip");
-</script>
-
 ```javascript
 Button({
   class: "btn-ghost",
@@ -136,22 +75,6 @@ Button({
 
 <div id="demo-disabled"></div>
 
-<script type="module">
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const isDisabled = $(true);
-
-  const Demo = () => {
-    return Button({
-      class: "btn-primary",
-      disabled: isDisabled
-    }, "Submit");
-  };
-
-  $mount(Demo, "#demo-disabled");
-</script>
-
 ```javascript
 const isDisabled = $(true);
 
@@ -165,29 +88,6 @@ Button({
 
 <div id="demo-variants"></div>
 
-<script type="module">
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const isLoading = $(false);
-
-  const Demo = () => {
-    return Div({ class: "flex flex-wrap gap-2" }, [
-      Button({ class: "btn-primary" }, "Primary"),
-      Button({ class: "btn-secondary" }, "Secondary"),
-      Button({ class: "btn-accent" }, "Accent"),
-      Button({ class: "btn-ghost" }, "Ghost"),
-      Button({ class: "btn-outline" }, "Outline"),
-      Button({ class: "btn-success", loading: isLoading, onclick: () => {
-        isLoading(true);
-        setTimeout(() => isLoading(false), 1500);
-      } }, "Loading")
-    ]);
-  };
-
-  $mount(Demo, "#demo-variants");
-</script>
-
 ```javascript
 Div({ class: "flex flex-wrap gap-2" }, [
   Button({ class: "btn-primary" }, "Primary"),
@@ -198,24 +98,3 @@ Div({ class: "flex flex-wrap gap-2" }, [
 ])
 ```
 ```
-
-## Ventajas de este enfoque:
-
-1. **Ejecución real** - Los ejemplos son interactivos y funcionales
-2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
-3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
-4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción
-
-## Consejos adicionales:
-
-Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:
-
-```css
-/* En tu HTML, dentro de <style> */
-.demo-container {
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  background: #f8fafc;
-}

docs/index.html

@@ -39,13 +39,8 @@
       };
     </script>
 
-    <script type="module">
-      import * as sigpro from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
-      import { UI } from "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm";
-      window.sigpro = sigpro;
-      // const ui = UI("en");
-      // window.sigproui = ui;
-    </script>
+    <script src="https://unpkg.com/sigpro"> </script>
+    <script src="https://unpkg.com/sigpro-ui"> </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
   </body>

package.json

@@ -1,14 +1,22 @@
 {
   "name": "sigpro-ui",
-  "version": "1.0.3",
-  "type": "module",
-  "license": "MIT",
-  "main": "./dist/sigpro-ui.js",
-  "module": "./index.js",
-  "unpkg": "./dist/sigpro-ui.min.js",
-  "jsdelivr": "./dist/sigpro-ui.min.js",
+  "version": "1.0.4",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/natxocc/sigpro-ui.git"
+  },
+  "main": "./dist/sigpro-ui.cjs",
+  "module": "./dist/sigpro-ui.esm.js",
+  "unpkg": "./dist/sigpro-ui.umd.min.js",
+  "jsdelivr": "./dist/sigpro-ui.umd.min.js",
   "exports": {
-    ".": "./index.js"
+    ".": {
+      "import": "./dist/sigpro-ui.esm.js",
+      "require": "./dist/sigpro-ui.cjs"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/natxocc/sigpro-ui/issues"
   },
   "files": [
     "index.js",
@@ -18,21 +26,6 @@
     "LICENSE"
   ],
   "homepage": "https://natxocc.github.io/sigpro-ui/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/natxocc/sigpro-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/natxocc/sigpro-ui/issues"
-  },
-  "scripts": {
-    "docs": "bun x serve docs",
-    "build": "bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "sigpro": ">=1.1.16"
-  },
   "keywords": [
     "signals",
     "reactive",
@@ -41,5 +34,19 @@
     "UI",
     "vanilla-js",
     "reactive-programming"
-  ]
+  ],
+  "license": "MIT",
+  "scripts": {
+    "docs": "bun x serve docs",
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "sigpro": ">=1.1.16"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.34.8"
+  }
 }

rollup.config.js

@@ -0,0 +1,49 @@
+import terser from '@rollup/plugin-terser';
+
+export default [
+  // ESM
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.esm.js',
+      format: 'esm'
+    }
+  },
+  // CommonJS
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.cjs',
+      format: 'cjs'
+    }
+  },
+  // UMD (IIFE para navegador)
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.umd.js',
+      format: 'iife',
+      name: 'SigProUI',
+      globals: {
+        sigpro: 'SigProCore'
+      }
+    }
+  },
+  // UMD minificado
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.umd.min.js',
+      format: 'iife',
+      name: 'SigProUI',
+      globals: {
+        sigpro: 'SigProCore'
+      },
+      plugins: [terser()]
+    }
+  }
+];