El mismo runtime, 51 de sus 60 archivos fuente, y un elemento template en su página es un programa.
Slim no es una reescritura ni un port. utils/bundle.js construye ambos paquetes de navegador a partir del mismo árbol en la misma ejecución: el completo concatena 60 archivos fuente de runtime más 9 archivos de vendor, y Slim concatena 51 de esos mismos archivos de runtime más 2 archivos de vendor, css.js y json5.min.js. Exactamente 9 archivos están en la lista completa y ausentes de la lista de Slim, y no hay absolutamente nada en Slim que no esté también en el paquete completo. Esos 9 son xuda_actions.js, xuda_fcm_web.js y los siete archivos del motor de señales: xuda_reactive.core.js, .scheduler.js, .listdiff.js, .bridge.js, xuda_runtime.render.reactive.js, .adapter.js y .pilot.js. Así que una página Slim la dibuja únicamente el renderizador heredado, sin motor reactivo por debajo. Lo que recibe a cambio es una vía de autoría sin ningún paso de compilación: usted escribe HTML normal dentro de un elemento template, llama a xuda(), y el constructor convierte cada plantilla de la página en un programa identificado por su id. Dos notas honestas antes del resto de la página. Slim no es pequeño en bytes. El módulo ES que importan las páginas de xuda.io ocupa 671,803 bytes en disco y 143,551 comprimido con gzip en nivel 9, y el archivo llamado xuda-runtime-slim.min.es.js no está minificado: bundle.js escribe la cadena concatenada tal cual y nunca la pasa por UglifyJS. El nombre describe la vía de autoría y la lista de 51 archivos fuente, no la descarga.
Seis fragmentos de una página que está versionada en este repositorio.
Nada de esto es un boceto de cómo podría verse la sintaxis. Cada línea de abajo está tomada de website-static/xuda.io/src/examples-html/index.html, la página en la que se demuestra el runtime, y los números de línea se imprimen para que usted pueda abrir el archivo y compararlo. Léalo por la forma más que por el estilo: un script de módulo que llama al arranque con un prog id, una plantilla cuyo id es ese prog id, xu-single-view como raíz, xu-store con el estado local y xu-bind escribiendo de vuelta en él, el trío xu-for recorriendo un arreglo con el índice y el valor nombrados, y xu-panel montando un segundo programa dentro del primero. El prefijo xu-exp: en un atributo significa que el valor es una expresión y no un literal, y las expresiones aquí son eval: secure_eval compila una fuente en su segunda aparición con new Function y en caso contrario recurre a eval en el propio ámbito de la página.
Manejadores de atributo en el registro de directivas
Etiquetas estructurales que un autor debe escribir
Archivos fuente de runtime en la lista de Slim, de 60
Aserciones que pasan en runtime/test, 0 fallos
Un constructor, y tres formas mutuamente excluyentes en que una página Slim encuentra sus programas.
xuda() recibe un elemento, un objeto de opciones y una función de retorno en cualquier orden de argumentos, detectados por tipo y no por posición, y bajo el paquete Slim la ausencia del elemento recurre a la cadena body con una advertencia en lugar de abortar el arranque. Lo que ocurre después lo decide exactamente una pregunta, formulada una sola vez: ¿hay elementos template en la página? Las tres respuestas de abajo no se mezclan. La primera reescribe la página, la segunda la deja intacta, y la tercera es el modo de fallo, y conviene saber en cuál está antes de empezar a depurar una pantalla en blanco.
Nueve archivos son toda la diferencia, y cada uno es algo que una página Slim no puede hacer.
Ambos paquetes se construyen a partir del mismo árbol con el mismo script, utils/bundle.js. Slim concatena 51 archivos fuente de runtime más 2 archivos de vendor. El paquete completo de navegador concatena 60 archivos de runtime más 9 de vendor. Comparar las dos listas arroja exactamente 9 nombres presentes en la lista completa y ausentes en la de Slim, y nada en Slim que no esté también en el paquete completo. Slim es una resta, nunca una bifurcación, y por eso una expresión que funciona en uno funciona en el otro. Lo que sigue son esos nueve nombres y los cuatro retornos anticipados que los acompañan.
Slim | Paquete completo de navegador | |
|---|---|---|
| Archivos fuente de runtime | 51, concatenados en utils/bundle.js:243 y escritos tal cual como una cadena. | 60, en utils/bundle.js:62. Los nueve adicionales son xuda_actions.js, xuda_fcm_web.js y los siete archivos del motor reactivo. |
| Archivos de vendor | 2: css.js y json5.min.js. | 9: esos dos más pouchdb.min.js, pouchdb.find.min.js, client.min.js, fingerprint2.min.js, socket.io.min.js, peerjs.min.js y clona-2.0.6.min.js. |
| Motor de señales | No se incluye. xuda_reactive.core.js, .scheduler.js, .listdiff.js, .bridge.js y los tres archivos render.reactive están todos ausentes. Una página Slim la dibuja únicamente el renderizador heredado. | Incluido: el renderizador reactivo, su planificador, su diferenciador de listas y el piloto que decide qué renderizador recibe un programa. |
| Adaptador de base de datos | Nunca se carga. El arranque retorna en runtime/js/index.js:407, antes del cargador de proyecto y del adaptador de :423 a :429. func.db nunca se asigna y APP_OBJ[app_id] queda como un objeto vacío. | Se importa xuda-db-adapter-module.mjs, se asigna func.db y init_db_replication arranca sobre el id de la aplicación. |
| Plugin de framework | init_ui_framework retorna en su primera línea cuando glb.SLIM_BUNDLE está definido, en xuda_UI.utils.js:521. Los plugins de framework de Tailwind e Ionic nunca se inicializan. | El plugin de framework del programa se resuelve y se inicializa antes de recorrer el árbol. |
| Plugins en segundo plano | register_run_background_plugins retorna de la misma manera en xuda_main.js:199, así que no se ejecuta nada en segundo plano. | Recorre app_plugins_purchased y arranca toda entrada que lleve installed y run_in_background. |
| Origen de los programas | El DOM. xuda() ejecuta document.querySelectorAll('template') en index.js:225, identifica cada programa por su id o por template_<index>, toma el primer id como prog_id y luego vacía el elemento raíz. Un id inexistente termina en console.error, xuda_utils.js:105 a 144. | _session.project_data.programs primero, y solo cuando SLIM_BUNDLE no está definido la búsqueda se repliega a xuda-progs-loader-module. |
Veinte manejadores de atributo, y un orden que ocupa dos arreglos.
El registro de directivas es un objeto simple con 20 manejadores, desde xu-attrs en la línea 68 hasta xu-viewport en la línea 234 de xuda_runtime.browser.handlers.factory.common.js. Encima se compone un manejador xu-exp adicional, y se añaden manejadores acotados por etiqueta para xu-panel y xu-teleport. Ese es todo el vocabulario. No hay paso de compilación ni lenguaje de plantillas: el atributo se lee del elemento y el valor se evalúa en la página.
- Los 20, en orden de aparición en el código: xu-attrs, xu-ref, xu-bind, xu-render, xu-show, xu-content, xu-text, xu-html, xu-for, xu-for-key, xu-for-val, xu-class, xu-on, xu-script, xu-style-global, xu-style, xu-cdn, xu-ui-plugin, xu-store, xu-viewport. También le corresponde escribir seis etiquetas estructurales: xu-template, xu-single-view, xu-multi-view, xu-panel, xu-teleport, xu-slot. Otras dos, xu-nav y xu-modal-controller, son internas, y el verificador del Studio impide escribirlas.
- xu-if, xu-else-if y xu-else son nativas solo del motor reactivo. Para el renderizador heredado, que es el único renderizador que tiene Slim, cada rama se compila en un xu-exp:xu-render equivalente en xuda_common.js:763 a 782, y los atributos xu-if escritos se dejan deliberadamente en su sitio para que el código que usted escribió siga siendo legible en el DOM.
- xu-render y xu-if eliminan el elemento. Una condición falsa deja tras de sí un elemento xurender vacío como ancla desde la que volver a crecer, en xuda_runtime.browser.dom.js:554. xu-show mantiene el nodo montado y solo alterna la visibilidad. Elegir entre ambos es elegir si un subárbol oculto le cuesta DOM.
- Las expresiones son eval, y no es una figura retórica. secure_eval compila una fuente en su segunda aparición con new Function('xu','func','glb','SESSION_ID','SESSION_OBJ','dsSessionP',...) en xuda_expression.js:1116, y en caso contrario recurre a eval(val) en el ámbito de la página en :1134. Una Content Security Policy sin unsafe-eval no puede ejecutar ni un solo atributo xu-exp:.
- run_xu_beforexu-cdn, xu-style, xu-render, xu-for-key, xu-for-val, en ese orden, de xuda_GLB.js:175 a 181. La condición y las claves del bucle quedan resueltas antes de que nada las lea.
- El cuerpoTodos los manejadores restantes, en el orden en que los atributos aparecen en el elemento. xu-for, xu-content, xu-show, xu-on y xu-store se ejecutan aquí.
- run_xu_afterxu-bind, xu-class, xu-script, xu-ui-plugin, xu-ref, desde xuda_GLB.js:184. El enlace y los scripts ven un elemento terminado, y xu-ref se entrega en último lugar.
- La pasada de xu-expxu-exp: no es un vigesimoprimer manejador. Se compone sobre el registro en factory.js y marca el valor como una expresión, de modo que xu-exp:xu-render sigue ocupando la posición de xu-render dentro de run_xu_before y no una posición propia.
Ocho abreviaturas, una reescritura y ningún segundo sistema de eventos por debajo.
Ocho abreviaturas de evento se declaran en un solo arreglo, glb.attr_abbreviations_arr en xuda_GLB.js:185. Ninguna de ellas es un manejador. En el momento de la normalización, xuda_runtime.browser.attributes.policy.js:42 a 56 comprueba si el nombre del atributo está en ese arreglo, escribe xu-on:<event> en su lugar con un manejador personalizado y un flujo de trabajo de exactamente un paso de actualización, y luego elimina el atributo original. xu-click y la forma larga xu-on:click llegan al mismo código por la misma vía, y por eso no hay nada que aprender sobre las abreviaturas más allá de la lista de ocho.
Importe el módulo, escriba una plantilla, llame al constructor.
Sin paso de compilación, sin configuración de bundler, sin instalación. Las páginas de ejemplos de xuda.io hacen estas tres cosas y nada más, y por eso son la referencia honesta y no un tutorial escrito a posteriori.
- 01
Importe el módulo
El módulo ES que importan las páginas de xuda.io es website-static/xuda.io/src/assets/xuda-runtime-slim-es.js. Ocupa 671,803 bytes en disco y 143,551 comprimido con gzip en nivel 9, y la copia del árbol fuente y la copia compilada en dist son idénticas byte a byte, md5 e950abcb5372188891ed775c62d55be4. Una advertencia sobre el nombre: el archivo hermano llamado xuda-runtime-slim.min.es.js no está minificado. bundle.js concatena las fuentes en una cadena y la escribe tal cual en :312 sin pasarla por UglifyJS, y solo el paso posterior de vite más terser en el paquete npm minifica. Slim describe la lista de 51 archivos fuente y la vía de autoría, no la descarga.
- 02
Dele a la página una plantilla con un id
Un elemento template de HTML normal recibe un alias hacia xu-single-view en todos los renderizadores, en xuda_runtime.browser.nodes.js:410 a 432. Ese alias es estructural: un elemento template real es inerte por especificación, así que una vía sin alias llamaría a createElement('template') y el programa no renderizaría nada. La página de ejemplos abre el suyo en website-static/xuda.io/src/examples-html/index.html:79, template con id xuda_slim_html_examples, con xu-single-view en la línea siguiente. La autoría en HTML cuesta una descarga de red que la autoría en JSON no paga, porque el escaneo de plantillas importa dinámicamente xuda-cli-plugin-html-parser-module.esm.mjs, 748 líneas, en index.js:227 para convertir el marcado en un árbol de nodos.
- 03
Llame al constructor con ese id
website-static/xuda.io/src/assets/site.js:812 llama a new Xuda(document.getElementById(mountId) || document.body, {prog_id, ...}). xuda() recibe un elemento, un objeto de opciones y una función de retorno en cualquier orden de argumentos, detectados por tipo y no por posición, en runtime/js/index.js:41 a 60, y bajo Slim la ausencia del elemento recurre a 'body' con una advertencia en lugar de abortar el arranque. Después el marcado hace el resto: xu-store con xu-bind en index.html:194 a 197, el trío xu-for en 361 a 363, un xu-panel en 728. Una salvedad antes de que copie ese archivo: el módulo ES versionado en website-static es más antiguo que runtime/js. Una búsqueda no encuentra en él ni xu-teleport, ni xu-attrs, ni xu-if, ni DS_LOADING, mientras que la página de ejemplos escribe xu-teleport bajo un encabezado Live Preview.
Nueve cosas que una página Slim no hace, cada una con la línea donde puede leer el rechazo.
- Slim arranca y retorna en runtime/js/index.js línea 407, antes del cargador de proyecto en la 423 y del adaptador de base de datos en la 425. func.db nunca se asigna y APP_OBJ[app_id] queda como el objeto vacío establecido en la línea 400, así que una página incrustada no tiene almacén PouchDB, ni replicación, ni registro de plugins.
- xu-ui-plugin y xu-widget no hacen nada en una página Slim normal. app_plugins_purchased nunca se llena, así que la primera comprobación de run_ui_plugin, plugin?.installed en runtime/js/xuda_common.js línea 2105, es falsa en cada llamada. La página de ejemplos de xuda.io etiqueta su propia tarjeta de xu-ui-plugin como Reference-only, en examples-html/index.html línea 674.
- No es un sandbox. secure_eval compila una fuente en su segunda aparición con new Function en runtime/js/xuda_expression.js línea 1116 y en caso contrario recurre a eval(val) en la línea 1134, y un plugin de interfaz llega por importación dinámica al propio contexto de la página con el nodo del DOM en crudo. Una Content Security Policy sin unsafe-eval no puede ejecutar ni un solo atributo xu-exp:.
- Las dos integraciones de framework están desactivadas, no degradadas. init_ui_framework retorna en la primera línea de su cuerpo cuando glb.SLIM_BUNDLE está definido, en runtime/js/xuda_UI.utils.js línea 521, y register_run_background_plugins hace lo mismo en runtime/js/xuda_main.js línea 199. Tailwind e Ionic nunca se inicializan bajo Slim.
- El motor de señales no está en la lista de archivos. Los siete archivos reactivos, xuda_reactive.core.js, .scheduler.js, .listdiff.js y .bridge.js más xuda_runtime.render.reactive.js, .adapter.js y .pilot.js, están en la lista completa en utils/bundle.js líneas 131 a 138 y en ninguna lista de Slim. Una página Slim la dibuja únicamente el renderizador heredado.
- func.action está indefinido, porque xuda_actions.js es uno de los nueve archivos que la lista de Slim omite. El paso de flujo invoke_action en runtime/js/xuda_events.js línea 920 y la vía de act_refresh en tiempo real en runtime/js/xuda_runtime.browser.realtime.js línea 107 lo invocan ambos. Solo el segundo está dentro de un catch.
- El módulo ES versionado en website-static/xuda.io es más antiguo que runtime/js. Búsquelo por xu-teleport, xu-attrs, xu-if, DS_LOADING o normalize_doc_for_runtime y los cinco devuelven cero resultados, mientras que la página de ejemplos escribe xu-teleport bajo un encabezado Live Preview.
- Slim no es pequeño en bytes. website-static/xuda.io/src/assets/xuda-runtime-slim-es.js ocupa 671,803 bytes en disco y 143,551 comprimido con gzip en nivel 9. El nombre describe la vía de autoría y la lista de 51 archivos fuente, no la descarga, y en este repositorio no hay ninguna comparación de tamaño con otro framework.
- Dos de las 29 suites de pruebas no pueden ejecutarse desde una copia limpia. allprogs_sweep.mjs y realprog_dryrun.mjs leen ambas runtime/test/fixtures/progs, y runtime/test/fixtures no contiene más que un .gitignore, así que ambas lanzan ENOENT antes de comprobar nada.
El recorrido guiado, después del mecanismo y no en lugar de él.
Cada afirmación anterior se leyó del árbol el 2026-08-19 y lleva el archivo y la línea de los que procede. Una grabación no lleva ninguno de los dos, y una grabación envejece. Así que donde el vídeo y esta página discrepen, gana la página, y donde usted dude de la página, abra el archivo que nombra. Vea esto para captar la forma de una integración directa, y luego vuelva a leer el aviso para saber lo que esa integración no hará.
Las seis preguntas que plantea la lista de archivos
Respondidas contra el árbol tal como está el 2026-08-19, cada una con el archivo y la línea con los que puede comprobarlo.
Dos puertas, una misma forma de project_data.
La puerta de integración directa es una etiqueta script y un elemento template. Bajo Slim, xuda() ejecuta document.querySelectorAll("template"), convierte cada resultado en un programa identificado por su id o por template_0, template_1 y así sucesivamente cuando no tiene ninguno, toma el primer id como prog_id y luego vacía el innerHTML del elemento raíz, en runtime/js/index.js líneas 225 a 252. También acepta el elemento, las opciones y la función de retorno en cualquier orden de argumentos, detectados por tipo y no por posición, y la ausencia del elemento recurre a body con una advertencia en lugar de abortar, en las líneas 41 a 60. La autoría en HTML cuesta una descarga de red que la autoría en JSON no paga: una importación dinámica de xuda-cli-plugin-html-parser-module.esm.mjs en la línea 227, 748 líneas, para convertir su marcado en un árbol de nodos. La puerta del panel se salta el escaneo y entrega al runtime el mismo mapa de programas directamente, y por eso los atributos que aprende aquí se transfieren intactos. Tome la primera si quiere una página. Tome la segunda si quiere la base de datos, la replicación y los 62 plugins que el arranque de Slim deja atrás al retornar.