miolo 3.0.0-beta.21 → 3.0.0-beta.210

package/template/src/server/routes/todos/special.mjs

@@ -0,0 +1,47 @@
+import { intre_now } from "intre"
+
+export async function r_todo_count_last_hours(ctx, params) {
+  ctx.miolo.logger.verbose(
+    `[r_todo_count_last_hours] Counting last ${params.hours} hours todos... `
+  )
+
+  const conn = await ctx.miolo.db.get_connection()
+  // TODO : handle transactions
+  const options = { transaction: undefined }
+
+  const one_hour_ago = intre_now() - 60 * 60 * parseInt(params.hours, 10)
+
+  const query = `
+    SELECT COUNT(1) as cnt
+      FROM todo
+     WHERE created_at >= $1`
+
+  const data = await conn.select(query, [one_hour_ago], options)
+  const res = data[0].cnt
+
+  ctx.miolo.logger.verbose(
+    `[r_todo_count_last_hours] Counted last ${params.hours} hours todos: ${res} `
+  )
+
+  return { ok: true, data: { count: res } }
+}
+
+export async function r_todo_insert_fake(ctx, params) {
+  ctx.miolo.logger.verbose(`[r_todo_insert_fake] Inserting fake todo... `)
+
+  const conn = await ctx.miolo.db.get_connection()
+  // TODO : handle transactions
+  const options = { transaction: undefined }
+
+  const Todos = await conn.get_model("todo")
+
+  const d = {
+    description: "Fake todo",
+    done: params?.done === true
+  }
+  const tid = await Todos.insert(d, options)
+
+  ctx.miolo.logger.verbose(`[r_todo_insert_fake] Inserted fake todo with id ${tid}`)
+
+  return { ok: true, data: { id: tid } }
+}

package/template/src/server/routes/users/user.mjs

@@ -0,0 +1,54 @@
+import { db_password_change } from "#server/io/db/users/pwd.mjs"
+import { db_user_save } from "#server/io/db/users/save.mjs"
+import { generateRandomPassword } from "#server/utils/crypt.mjs"
+
+export async function r_forgot(ctx, params) {
+  const logger = ctx.miolo.logger
+
+  const { email } = params
+
+  const new_pwd = generateRandomPassword()
+  const msg = await db_password_change(ctx.miolo, email, new_pwd)
+
+  if (msg === undefined) {
+    const emailer = ctx.miolo.emailer
+
+    const mail = {
+      to: email,
+      subject: "miolo-sample: Nueva contraseña",
+      text: `Tu nueva contraseña es: ${new_pwd}
+         Por favor, inicia sesión con ella y, desde "Mi Cuenta", 
+         cámbiala por una que vayas a recordar mejor.`
+    }
+
+    const info = await emailer.send(mail)
+    if (info?.ok) {
+      logger.info(`Reseted password for ${email}`)
+    }
+  }
+
+  return {
+    success: msg === undefined,
+    info: msg
+  }
+}
+
+export async function r_change_password(ctx, params) {
+  const logger = ctx.miolo.logger
+  const { username, passwords } = params
+
+  const { ok, msg } = await db_password_change(ctx.miolo, username, passwords)
+
+  logger.info(`Changed password for ${username}`)
+
+  if (!ok) {
+    return { ok: false, error: msg }
+  }
+
+  return { ok: true, data: { msg } }
+}
+
+export async function r_user_save(ctx, params) {
+  const res = await db_user_save(ctx.miolo, params)
+  return res
+}

package/template/src/server/server.mjs

@@ -0,0 +1,10 @@
+import { miolo } from "miolo"
+import makeConfig from "#server/miolo/index.mjs"
+
+export default async function miolo_sample_server() {
+  console.log("[miolo-sample] Initing server...")
+
+  const server = await miolo(makeConfig)
+  const app = await server.start()
+  return app
+}

package/template/src/server/utils/crypt.mjs

@@ -0,0 +1,38 @@
+import crypto from "node:crypto"
+
+const PASSWORD_LENGTH = 18
+const LOWERCASE_ALPHABET = "abcdefghijklmnopqrstuvwxyz" // 26 chars
+const UPPERCASE_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" // 26 chars
+const NUMBERS = "0123456789" // 10 chars
+const SYMBOLS = ",./<>?;'\":[]\\|}{=-_+`~!@#$%^&*()" // 32 chars
+const ALPHANUMERIC_CHARS = LOWERCASE_ALPHABET + UPPERCASE_ALPHABET + NUMBERS // 62 chars
+const ALL_CHARS = ALPHANUMERIC_CHARS + SYMBOLS // 94 chars
+
+/**
+ * Hash the password
+ * @private
+ * @param str {string}
+ * @param options {object}
+ * @returns {string}
+ */
+function sha512(str, salt) {
+  return crypto.createHmac("sha512", salt).update(str).digest("hex")
+}
+
+function _generateRandomPassword(length, alphabet) {
+  const rb = crypto.randomBytes(length)
+  let rp = ""
+
+  for (let i = 0; i < length; i++) {
+    rb[i] = rb[i] % alphabet.length
+    rp += alphabet[rb[i]]
+  }
+
+  return rp
+}
+
+function generateRandomPassword() {
+  return _generateRandomPassword(PASSWORD_LENGTH, ALL_CHARS)
+}
+
+export { generateRandomPassword, sha512 }

package/template/src/server/utils/io.mjs

@@ -0,0 +1,15 @@
+import { readdir } from "node:fs"
+
+function readDirAsync(path) {
+  return new Promise((resolve, reject) => {
+    readdir(path, (error, result) => {
+      if (error) {
+        reject(error)
+      } else {
+        resolve(result)
+      }
+    })
+  })
+}
+
+export { readDirAsync }

package/template/src/server/utils/pwdfor.mjs

@@ -0,0 +1,25 @@
+import fs from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { sha512 } from "./crypt.mjs"
+
+function _loadSalt() {
+  let dir = path.dirname(fileURLToPath(import.meta.url))
+  while (dir !== path.parse(dir).root && !fs.existsSync(path.join(dir, "package.json"))) {
+    dir = path.dirname(dir)
+  }
+  const env = fs.readFileSync(path.join(dir, ".env"), "utf8")
+  return env.match(/^MIOLO_SESSION_SALT=(.*)$/m)?.[1]?.trim()
+}
+
+async function _pwd_for() {
+  const args = process.argv.slice(2)
+  const pwd = args[0]
+
+  const salt = _loadSalt()
+
+  const cpwd = sha512(pwd, salt)
+  console.log([salt, cpwd])
+}
+
+_pwd_for()

package/template/src/server/utils/schema.mjs

@@ -0,0 +1,22 @@
+import Joi from "joi"
+
+export const req_int = Joi.number().integer().required()
+
+export const opt_float = Joi.number().optional().empty(null)
+export const opt_float_null = Joi.number().optional().allow(null)
+
+export const opt_int = Joi.number().integer().optional().empty(null)
+export const opt_int_null = Joi.number().integer().optional().allow(null)
+
+export const opt_int_or_arr = Joi.alternatives()
+  .try(Joi.number().integer(), Joi.array().items(Joi.number().integer()))
+  .optional()
+  .empty(null)
+
+export const req_str = Joi.string().required()
+export const opt_str = Joi.string().optional().empty(null)
+export const opt_str_null = Joi.string().optional().allow(null)
+
+export const bool_false = Joi.boolean().optional().default(false)
+export const bool_true = Joi.boolean().optional().default(true)
+export const bool_null = Joi.boolean().optional().allow(null)

package/template/src/static/public/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "miolo-sample",
+  "short_name": "miolo-sample",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#fb64b6",
+  "description": "A simple PWA for miolo-sample",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "30x30",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/static/img/miolo_logo.png",
+      "sizes": "600x600",
+      "type": "image/png"
+    }
+  ]
+}

package/template/src/static/public/sw.js

@@ -0,0 +1,79 @@
+const CACHE_NAME = "miolo-sample-cache-v1"
+
+// 1. EVENTO INSTALL: Ocurre la primera vez que el usuario entra.
+// Aquí cacheamos el "App Shell" (lo básico para que la app abra sin red).
+self.addEventListener("install", (_event) => {
+  /*console.log(`[miolo][sw] installing`)
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log(`[miolo][sw] installing - caching main`)
+      // Rutas estáticas clave (ajusta según cómo sirva Miolo tus archivos)
+      return cache.addAll([
+        "/"
+        // "/index.html",
+        // "/icon-192x192.png"
+        // Si sabes las URLs de tu JS/CSS, añádelas aquí.
+      ])
+    })
+  )
+  self.skipWaiting()*/
+})
+
+// 2. EVENTO ACTIVATE: Limpia cachés antiguas si cambias el CACHE_NAME
+self.addEventListener("activate", (event) => {
+  console.log(`[miolo][sw] activating`)
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      const oldCaches = cacheNames.filter((name) => name !== CACHE_NAME)
+      console.log(`[miolo][sw] activating - cleaning old caches ${oldCaches}`)
+      return Promise.all(oldCaches.map((name) => caches.delete(name)))
+    })
+  )
+  self.clients.claim()
+})
+
+// 3. EVENTO FETCH: El núcleo de tu estrategia
+self.addEventListener("fetch", (_event) => {
+  /*console.log(`[miolo][sw] fetching`)
+  // ESTRATEGIA PARA LLAMADAS POST
+  if (event.request.method === "POST" || event.request.method === "PUT") {
+    event.respondWith(
+      fetch(event.request).catch(() => {
+        console.log(`[miolo][sw] fetching - fetch failed, returning 503 error`)
+        // Si el fetch falla (porque no hay red), devolvemos un error controlado 503
+        return new Response(
+          JSON.stringify({ error: "Estás sin conexión. No se pueden guardar los cambios." }),
+          {
+            headers: { "Content-Type": "application/json" },
+            status: 503,
+            statusText: "Service Unavailable"
+          }
+        )
+      })
+    )
+    return // Cortamos aquí para los POST
+  }
+
+  // ESTRATEGIA PARA LLAMADAS GET (Network First, fallback to Cache)
+  // Intenta ir a internet siempre para tener los resultados frescos.
+  // Si falla, tira de lo que tenga guardado en caché.
+  event.respondWith(
+    fetch(event.request)
+      .then((networkResponse) => {
+        console.log(`[miolo][sw] fetching - fetch ok, caching it`)
+        // Guardamos una copia en la caché para la próxima vez que se quede offline
+        const responseClone = networkResponse.clone()
+        caches.open(CACHE_NAME).then((cache) => {
+          // No cacheamos extensiones raras del navegador
+          if (event.request.url.startsWith("http")) {
+            cache.put(event.request, responseClone)
+          }
+        })
+        return networkResponse
+      })
+      .catch(() => {
+        // Si no hay internet, devuelve la versión guardada en caché
+        return caches.match(event.request)
+      })
+  )*/
+})

package/template/src/static/style/globals.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@import "./json-tree.css";
+@import "./skeleton.css";
+
+/* biome-ignore lint/suspicious/noUnknownAtRules: biome-ignore */
+@tailwind base;
+/* biome-ignore lint/suspicious/noUnknownAtRules: biome-ignore */
+@tailwind components;
+/* biome-ignore lint/suspicious/noUnknownAtRules: biome-ignore */
+@tailwind utilities;
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Sidebar */
+  :root {
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  .dark {
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.439 0 0);
+  }
+}

package/template/src/static/style/json-tree.css

@@ -0,0 +1,54 @@
+.json-tree-viewer {
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #272822; /* Fondo oscuro */
+  color: #f8f8f2; /* Color de texto claro */
+  padding: 10px;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 500px;
+}
+
+.json-node {
+  margin-left: 20px; /* Indentación para nodos anidados */
+  white-space: nowrap; /* Evita que los valores se rompan en múltiples líneas */
+}
+
+.json-key {
+  color: #a6e22e; /* Color para las claves (verde) */
+  font-weight: bold;
+}
+
+.json-value-string {
+  color: #e6db74; /* Color para strings (amarillo) */
+}
+
+.json-value-number {
+  color: #ae81ff; /* Color para números (morado) */
+}
+
+.json-value-boolean {
+  color: #fd971f; /* Color para booleanos (naranja) */
+}
+
+.json-value-null {
+  color: #66d9ef; /* Color para null (azul claro) */
+}
+
+.json-object,
+.json-array {
+  display: inline-flex; /* Permite que el icono y el contenido estén en la misma línea */
+  align-items: center;
+}
+
+.toggle-icon {
+  cursor: pointer;
+  margin-right: 5px;
+  color: #66d9ef; /* Color para los iconos de expandir/contraer */
+  font-size: 0.8em; /* Un poco más pequeño */
+}
+
+.indent {
+  margin-left: 20px; /* Indentación para el contenido expandido */
+}

package/template/src/static/style/skeleton.css

@@ -0,0 +1,49 @@
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+/*
+.skeleton-loading h1,
+.skeleton-loading h2,
+.skeleton-loading h3,
+.skeleton-loading p,
+.skeleton-loading span,
+.skeleton-loading div:not(:empty) {
+  @apply
+    bg-gray-200
+    dark:bg-gray-700
+    rounded-md
+    text-transparent
+    relative
+    overflow-hidden;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  
+  / * Esto asegura que los elementos vacíos tengan un tamaño * /
+  min-height: 1rem;
+}
+*/
+
+.skeleton-loading input,
+.skeleton-loading button,
+.skeleton-loading a,
+.skeleton-loading .skeleton-apply {
+  @apply bg-gray-200 dark:bg-gray-700 rounded-md text-transparent relative overflow-hidden;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none; /* Para deshabilitar la interacción */
+}
+
+/* Manejo de imágenes y elementos con aspecto */
+.skeleton-loading img,
+.skeleton-loading [data-aspect] {
+  @apply bg-gray-200 dark:bg-gray-700;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/*
+.skeleton-loading h1,
+.skeleton-loading h2,
+.skeleton-loading h3 {
+  height: 1.5em; / * Define una altura para los títulos * /
+}
+*/

package/bin/prod-build/build-client.mjs

@@ -1,67 +0,0 @@
-
-import path from 'node:path'
-import {xeiraBundle} from 'xeira'
-import { cleanFolder, copyFileSync, isFileExistingSync } from '../util.mjs'
-
-function _addCssLinkToHead(appName, htmlString, dest) {
-  
-  const webDest = dest.startsWith('./') 
-    ? dest.replace('./', '/')
-    : dest.startsWith('/') 
-    ? dest
-    : `/${dest}`
-
-  const linkTag = `  <link href="${webDest}/${appName}.${process.env.MIOLO_BUILD_CLIENT_SUFFIX}.css" rel="stylesheet" media="all">`
-  
-  // Expresión regular para encontrar la etiqueta </head> de cierre.
-  // Usamos un grupo de captura para mantener el contenido antes de </head>.
-  const headCloseTagRegex = /(<\/head>)/i;
-
-  // Busca la etiqueta </head> en el HTML.
-  const match = htmlString.match(headCloseTagRegex);
-
-  if (match) {
-    console.log(`[${appName}][prod] adding css link ${linkTag} to <head>`)
-
-    // Si se encuentra </head>, inserta la etiqueta <link> justo antes de ella.
-    return htmlString.replace(headCloseTagRegex, `${linkTag}\n$&`);
-  } else {
-    // Si no se encuentra </head>, devuelve el HTML original sin modificar.
-    console.warn(`[${appName}][prod] No se encontró la etiqueta <head> en el HTML proporcionado.`);
-    return htmlString;
-  }
-}
-
-
-export default async function(appName, entry, htmlFile, dest) {
-  console.log(`[${appName}][prod] Building client from entry ${entry}`)
-
-  // Clean dest folder
-  cleanFolder(dest)
-  
-  // Build client
-  await xeiraBundle({
-    source_index: entry,
-    target: 'browser',
-    bundle_folder: dest,
-    bundle_name: appName,
-    bundle_extension: process.env.MIOLO_BUILD_CLIENT_SUFFIX,
-    bundler: 'rollup',
-    bundle_node_polyfill: true
-  })
-
-  // Fix css file
-  const destCssFile = `${dest}/${appName}.${process.env.MIOLO_BUILD_CLIENT_SUFFIX}.css`
-  const destCssFileExists = isFileExistingSync(destCssFile)
-
-  console.log(`[${appName}][prod] destCssFile ${destCssFile} exists?: ${destCssFileExists}`)
-  
-  console.log(`[${appName}][prod] Copying HTML file ${htmlFile} to ${dest}/index.html`)
-  copyFileSync(path.join(process.cwd(), htmlFile), path.join(process.cwd(), `${dest}/index.html`), (content) => {
-    if (destCssFileExists) {
-      content = _addCssLinkToHead(appName, content, dest)
-    }
-    return content
-  })
-  
-}