@jacksonavila/phone-lib 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +89 -0
  2. package/package.json +6 -3
  3. package/phone-lib.cdn.js +101 -0
package/README.md CHANGED
@@ -29,10 +29,16 @@ Librería JavaScript moderna para integrar fácilmente un input de teléfono con
29
29
 
30
30
  ## 📦 Installation / Instalación
31
31
 
32
+ ### Option 1: npm / Opción 1: npm
33
+
32
34
  ```bash
33
35
  npm install @jacksonavila/phone-lib
34
36
  ```
35
37
 
38
+ ### Option 2: CDN (No npm required) / Opción 2: CDN (Sin npm)
39
+
40
+ Use directly from CDN / Usar directamente desde CDN - see [Using from CDN / Usar desde CDN](#-using-from-cdn--usar-desde-cdn) section below / ver sección abajo.
41
+
36
42
  ### Dependencies / Dependencias
37
43
 
38
44
  ```bash
@@ -45,6 +51,87 @@ npm install react react-dom
45
51
 
46
52
  ---
47
53
 
54
+ ## 🌐 Using from CDN / Usar desde CDN
55
+
56
+ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib directamente desde CDN sin npm.
57
+
58
+ ### Method 1: Import Maps (Modern Browsers) / Método 1: Import Maps (Navegadores Modernos)
59
+
60
+ ```html
61
+ <!DOCTYPE html>
62
+ <html>
63
+ <head>
64
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.css">
65
+ </head>
66
+ <body>
67
+ <div id="phone-container"></div>
68
+
69
+ <script type="importmap">
70
+ {
71
+ "imports": {
72
+ "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.js",
73
+ "libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
74
+ }
75
+ }
76
+ </script>
77
+
78
+ <script type="module">
79
+ import PhoneLib from '@jacksonavila/phone-lib';
80
+
81
+ const phoneLib = new PhoneLib('#phone-container', {
82
+ initialCountry: 'CO',
83
+ layout: 'integrated',
84
+ showDialCode: true
85
+ });
86
+ </script>
87
+ </body>
88
+ </html>
89
+ ```
90
+
91
+ **CDN URLs / URLs de CDN:**
92
+ - **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/`
93
+ - **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.3/`
94
+
95
+ ### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
96
+
97
+ ```html
98
+ <!DOCTYPE html>
99
+ <html>
100
+ <head>
101
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.css">
102
+ </head>
103
+ <body>
104
+ <div id="phone-container"></div>
105
+
106
+ <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.cdn.js"></script>
107
+
108
+ <script>
109
+ let phoneLib = null;
110
+
111
+ // Wait for PhoneLib to be ready / Esperar a que PhoneLib esté listo
112
+ document.addEventListener('phoneLibReady', () => {
113
+ phoneLib = new PhoneLib('#phone-container', {
114
+ initialCountry: 'CO',
115
+ layout: 'integrated',
116
+ showDialCode: true
117
+ });
118
+ });
119
+
120
+ // Handle errors / Manejar errores
121
+ document.addEventListener('phoneLibError', (e) => {
122
+ console.error('Error loading PhoneLib:', e.detail.error);
123
+ });
124
+ </script>
125
+ </body>
126
+ </html>
127
+ ```
128
+
129
+ **⚠️ Important / Importante:** You need an HTTP server / Necesitas un servidor HTTP (doesn't work with `file://` / no funciona con `file://`)
130
+
131
+ 📖 **Complete CDN guide / Guía completa de CDN:** See [USO-SIN-NPM.md](./USO-SIN-NPM.md) / Ver [USO-SIN-NPM.md](./USO-SIN-NPM.md)
132
+
133
+ ---
134
+
48
135
  ## 🚀 Quick Start / Inicio Rápido
49
136
 
50
137
  ### Vanilla JavaScript
@@ -806,6 +893,8 @@ This will open `http://localhost:3004` with all available demos / Esto abrirá `
806
893
  - `demo-all-layouts.html` - All layouts comparison / Comparación de todos los layouts
807
894
  - `demo-features.html` - All features / Todas las características
808
895
  - `demo-react.html` - React example / Ejemplo con React
896
+ - `demo-cdn-importmap.html` - CDN with Import Maps / CDN con Import Maps
897
+ - `demo-cdn-script.html` - CDN with Script Tag / CDN con Script Tag
809
898
 
810
899
  ---
811
900
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jacksonavila/phone-lib",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "description": "Librería JavaScript para input de teléfono con selector de país y banderas - Compatible con Vanilla JS y React",
5
5
  "main": "phone-lib.js",
6
6
  "module": "phone-lib.js",
@@ -14,11 +14,13 @@
14
14
  "import": "./phone-lib-react.jsx",
15
15
  "require": "./phone-lib-react.js"
16
16
  },
17
- "./css": "./phone-lib.css"
17
+ "./css": "./phone-lib.css",
18
+ "./cdn": "./phone-lib.cdn.js"
18
19
  },
19
20
  "scripts": {
20
21
  "serve": "npx http-server . -p 3004 -o",
21
- "prepublishOnly": "echo 'Verificando archivos antes de publicar...' && node --check phone-lib.js"
22
+ "prepublishOnly": "echo 'Verificando archivos antes de publicar...' && node --check phone-lib.js",
23
+ "update-version": "node update-version.js"
22
24
  },
23
25
  "keywords": [
24
26
  "phone",
@@ -64,6 +66,7 @@
64
66
  "files": [
65
67
  "phone-lib.js",
66
68
  "phone-lib.css",
69
+ "phone-lib.cdn.js",
67
70
  "phone-lib-react.jsx",
68
71
  "phone-lib-react.js",
69
72
  "README.md"
package/phone-lib.cdn.js ADDED
@@ -0,0 +1,101 @@
1
+ /**
2
+ * PhoneLib CDN Version
3
+ * Versión para uso directo desde CDN con script tag
4
+ * Carga libphonenumber-js dinámicamente y expone PhoneLib globalmente
5
+ *
6
+ * Uso:
7
+ * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.css">
8
+ * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/phone-lib.cdn.js"></script>
9
+ * <script>
10
+ * document.addEventListener('phoneLibReady', () => {
11
+ * const phoneLib = new PhoneLib('#container', {...});
12
+ * });
13
+ * </script>
14
+ */
15
+
16
+ (function () {
17
+ 'use strict';
18
+
19
+ // Versión del paquete (actualizar cuando se publique nueva versión)
20
+ const PACKAGE_VERSION = '2.0.3';
21
+ const PACKAGE_NAME = '@jacksonavila/phone-lib';
22
+
23
+ // URLs de CDN
24
+ const CDN_BASE = `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}`;
25
+ const LIBPHONENUMBER_CDN = 'https://esm.sh/libphonenumber-js@1.11.0';
26
+
27
+ // Cargar CSS automáticamente
28
+ function loadCSS() {
29
+ const linkId = 'phone-lib-css';
30
+ if (!document.getElementById(linkId)) {
31
+ const link = document.createElement('link');
32
+ link.id = linkId;
33
+ link.rel = 'stylesheet';
34
+ link.href = `${CDN_BASE}/phone-lib.css`;
35
+ document.head.appendChild(link);
36
+ }
37
+ }
38
+
39
+ // Cargar libphonenumber-js y phone-lib.js dinámicamente
40
+ async function loadPhoneLib() {
41
+ try {
42
+ // Cargar libphonenumber-js primero
43
+ const libphonenumber = await import(LIBPHONENUMBER_CDN);
44
+
45
+ // Crear un módulo temporal que exponga libphonenumber-js
46
+ // Esto es necesario porque phone-lib.js importa desde 'libphonenumber-js'
47
+ window.__libphonenumberjs = libphonenumber;
48
+
49
+ // Crear un import map dinámico para que phone-lib.js pueda importar libphonenumber-js
50
+ if (!document.querySelector('script[type="importmap"]')) {
51
+ const importMap = document.createElement('script');
52
+ importMap.type = 'importmap';
53
+ importMap.textContent = JSON.stringify({
54
+ imports: {
55
+ 'libphonenumber-js': LIBPHONENUMBER_CDN
56
+ }
57
+ });
58
+ document.head.appendChild(importMap);
59
+ }
60
+
61
+ // Cargar phone-lib.js desde CDN
62
+ const phoneLibModule = await import(`${CDN_BASE}/phone-lib.js`);
63
+
64
+ // Exponer PhoneLib globalmente
65
+ window.PhoneLib = phoneLibModule.default || phoneLibModule.PhoneLib;
66
+
67
+ // Disparar evento cuando esté listo
68
+ const event = new CustomEvent('phoneLibReady', {
69
+ detail: { PhoneLib: window.PhoneLib }
70
+ });
71
+ document.dispatchEvent(event);
72
+
73
+ return window.PhoneLib;
74
+ } catch (error) {
75
+ console.error('Error loading PhoneLib:', error);
76
+ const event = new CustomEvent('phoneLibError', {
77
+ detail: { error }
78
+ });
79
+ document.dispatchEvent(event);
80
+ throw error;
81
+ }
82
+ }
83
+
84
+ // Inicializar
85
+ function init() {
86
+ // Cargar CSS primero
87
+ loadCSS();
88
+
89
+ // Cargar PhoneLib
90
+ loadPhoneLib().catch(err => {
91
+ console.error('Failed to load PhoneLib:', err);
92
+ });
93
+ }
94
+
95
+ // Inicializar cuando el DOM esté listo
96
+ if (document.readyState === 'loading') {
97
+ document.addEventListener('DOMContentLoaded', init);
98
+ } else {
99
+ init();
100
+ }
101
+ })();