@maizzle/framework 6.0.0-9 → 6.0.0-rc.0

package/src/server/index.js

@@ -1,464 +0,0 @@
-import path from 'pathe'
-import fs from 'node:fs/promises'
-import { createServer } from 'node:http'
-import { cwd, exit } from 'node:process'
-
-import { fileURLToPath } from 'node:url'
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-import ora from 'ora'
-import fg from 'fast-glob'
-import express from 'express'
-import pico from 'picocolors'
-import get from 'lodash-es/get.js'
-import * as chokidar from 'chokidar'
-import { isBinary } from 'istextorbinary'
-
-import WebSocket, { WebSocketServer } from 'ws'
-import { initWebSockets } from './websockets.js'
-
-import {
-  getLocalIP,
-  getColorizedFileSize,
-} from '../utils/node.js'
-import { injectScript, formatTime } from '../utils/string.js'
-
-import { render } from '../generators/render.js'
-import { readFileConfig } from '../utils/getConfigByFilePath.js'
-import defaultComponentsConfig from '../posthtml/defaultComponentsConfig.js'
-
-// Routes
-import hmrRoute from './routes/hmr.js'
-import indexRoute from './routes/index.js'
-
-const app = express()
-const wss = new WebSocketServer({ noServer: true })
-
-// Register routes
-app.use(indexRoute)
-app.use(hmrRoute)
-
-let viewing = ''
-const spinner = ora()
-let templatePaths = []
-const serverStartTime = Date.now()
-
-function getTemplateFolders(config) {
-  return Array.isArray(get(config, 'build.content'))
-    ? config.build.content
-    : [config.build.content]
-}
-
-async function getTemplatePaths(templateFolders) {
-  return await fg.glob([...new Set(templateFolders)])
-}
-
-async function getUpdatedRoutes(_app, config) {
-  return getTemplatePaths(getTemplateFolders(config))
-}
-
-async function renderUpdatedFile(file, config) {
-  try {
-    const startTime = Date.now()
-    spinner.start('Building...')
-
-    /**
-     * Add current template path info to the config
-     *
-     * Can be used in events like `beforeRender` to determine
-     * which template file is being rendered.
-     */
-    config.build.current = {
-      path: path.parse(file),
-    }
-
-    // Read the file
-    const fileContent = await fs.readFile(file, 'utf8')
-
-    // Set a `dev` flag on the config
-    config._dev = true
-
-    // Render the file with PostHTML
-    let { html } = await render(fileContent, config)
-
-    // Update console message
-    const shouldReportFileSize = get(config, 'server.reportFileSize', false)
-
-    spinner.succeed(
-      `Done in ${formatTime(Date.now() - startTime)}`
-      + `${pico.gray(` [${path.relative(cwd(), file)}]`)}`
-      + `${shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
-    )
-
-    /**
-     * Inject HMR script
-     */
-    html = injectScript(html, '<script src="/hmr.js"></script>')
-
-    // Notify connected websocket clients about the change
-    wss.clients.forEach(client => {
-      if (client.readyState === WebSocket.OPEN) {
-        client.send(JSON.stringify({
-          type: 'change',
-          content: html,
-          scrollSync: get(config, 'server.scrollSync', false),
-          hmr: get(config, 'server.hmr', true),
-        }))
-      }
-    })
-  } catch (error) {
-    spinner.fail('Failed to render template.')
-    throw error
-  }
-}
-
-export default async (config = {}) => {
-  // Read the Maizzle config file
-  config = await readFileConfig(config).catch(() => { throw new Error('Could not compute config') })
-
-  /**
-   * Dev server settings
-  */
-  spinner.spinner = get(config, 'server.spinner', 'circleHalves')
-  spinner.start('Starting server...')
-
-  const shouldScroll = get(config, 'server.scrollSync', false)
-  const useHmr = get(config, 'server.hmr', true)
-
-  // Add static assets root prefix so user doesn't have to
-  if (!config.baseURL) {
-    config.baseURL = '/'
-  }
-
-  /**
-   * Initialize WebSocket server
-   * Used to send messages between the server and the browser
-   */
-  initWebSockets(wss, { shouldScroll, useHmr })
-
-  // Register routes
-  templatePaths = await getUpdatedRoutes(app, config)
-
-  /**
-   * Store template paths on the request object
-   *
-   * We use it in the index view to list all templates.
-   * */
-  app.request.templatePaths = templatePaths
-
-  app.request.maizzleConfig = config
-
-  /**
-   * Create route pattern
-   * Only allow files with the following extensions
-   */
-  const extensions = [
-    ...new Set(templatePaths
-      .filter(p => !isBinary(p)) // exclude binary files from routes
-      .map(p => path.extname(p).slice(1).toLowerCase())
-    )
-  ].join('|')
-
-  const routePattern = Array.isArray(getTemplateFolders(config))
-    ? `*/:file.(${extensions})`
-    : `:file.(${extensions})`
-
-  /**
-   * Loop over the source folders and create route for each file
-   */
-  templatePaths.forEach(() => {
-    app.get(routePattern, async (req, res, next) => {
-      // Run beforeCreate event
-      if (typeof config.beforeCreate === 'function') {
-        await config.beforeCreate({ config })
-      }
-
-      try {
-        const filePath = templatePaths.find(t => t.endsWith(decodeURI(req.url.slice(1))))
-
-        // Set the file being viewed
-        viewing = filePath
-
-        // Add current template path info to the config
-        config.build.current = {
-          path: path.parse(filePath),
-        }
-
-        // Read the file
-        const fileContent = await fs.readFile(filePath, 'utf8')
-
-        // Set a `dev` flag on the config
-        config._dev = true
-
-        // Render the file with PostHTML
-        let { html } = await render(fileContent, config)
-
-        /**
-         * Inject HMR script
-         */
-        html = injectScript(html, '<script src="/hmr.js"></script>')
-
-        res.send(html)
-      } catch (error) {
-        spinner.fail(`Failed to render template: ${req.url}\n`)
-        next(error)
-      }
-    })
-  })
-
-  /**
-   * Components watcher
-   *
-   * Watches for changes in the configured Templates and Components paths
-   */
-  let isWatcherReady = false
-  chokidar
-    .watch(
-      [
-        ...templatePaths,
-        ...get(config, 'components.folders', defaultComponentsConfig.folders)
-      ],
-      {
-        ignoreInitial: true,
-        awaitWriteFinish: {
-          stabilityThreshold: 150,
-          pollInterval: 25,
-        },
-      }
-    )
-    .on('change', async () => {
-      if (viewing) {
-        await renderUpdatedFile(viewing, config)
-      }
-    })
-    .on('ready', () => {
-      /**
-       * `add` fires immediately when the watcher is created,
-       * so we use this trick to detect new files added
-       * after it has started.
-       */
-      isWatcherReady = true
-    })
-    .on('add', async () => {
-      if (isWatcherReady) {
-        templatePaths = await getUpdatedRoutes(app, config)
-        app.request.templatePaths = templatePaths
-      }
-    })
-    .on('unlink', async () => {
-      if (isWatcherReady) {
-        templatePaths = await getUpdatedRoutes(app, config)
-        app.request.templatePaths = templatePaths
-      }
-    })
-
-  let staticFiles = get(config, 'build.static', [])
-
-  if (!Array.isArray(staticFiles)) {
-    staticFiles = [staticFiles]
-  }
-
-  const staticFilesSourcePaths = staticFiles.flatMap((definition) => definition.source)
-
-  /**
-   * Global watcher
-   *
-   * Watch for changes in the config files, Tailwind CSS config, CSS files,
-   * configured static assets, and user-defined watch paths.
-   */
-  const globalWatchedPaths = new Set([
-    'config*.{js,cjs,ts}',
-    'maizzle.config*.{js,cjs,ts}',
-    'tailwind*.config.{js,ts}',
-    '**/*.css',
-    ...staticFilesSourcePaths,
-    ...get(config, 'server.watch', []),
-  ])
-
-  async function globalPathsHandler(file, eventType) {
-    // Update express.static to serve new files
-    if (eventType === 'add') {
-      app.use(express.static(path.dirname(file)))
-    }
-
-    // Stop serving deleted files
-    if (eventType === 'unlink') {
-      app._router.stack = app._router.stack.filter(
-        layer => layer.regexp.source !== path.dirname(file).replace(/\\/g, '/')
-      )
-    }
-
-    // Not viewing a component in the browser, no need to rebuild
-    if (!viewing) {
-      return
-    }
-
-    try {
-      const startTime = Date.now()
-      spinner.start('Building...')
-
-      // Read the Maizzle config file
-      config = await readFileConfig()
-
-      // Add static assets root prefix so user doesn't have to
-      if (!config.baseURL) {
-        config.baseURL = '/'
-      }
-
-      // Run beforeCreate event
-      if (typeof config.beforeCreate === 'function') {
-        await config.beforeCreate({ config })
-      }
-
-      // Read the file
-      const filePath = templatePaths.find(t => t.endsWith(viewing))
-      const fileContent = await fs.readFile(path.normalize(filePath), 'utf8')
-
-      // Set a `dev` flag on the config
-      config._dev = true
-
-      // Render the file with PostHTML
-      let { html } = await render(fileContent, config)
-
-      // Update console message
-      const shouldReportFileSize = get(config, 'server.reportFileSize', false)
-
-      spinner.succeed(
-        `Done in ${formatTime(Date.now() - startTime)}`
-        + `${pico.gray(` [${path.relative(cwd(), filePath)}]`)}`
-        + `${shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
-      )
-
-      /**
-       * Inject HMR script
-       */
-      html = injectScript(html, '<script src="/hmr.js"></script>')
-
-      // Notify connected websocket clients about the change
-      wss.clients.forEach(client => {
-        if (client.readyState === WebSocket.OPEN) {
-          client.send(JSON.stringify({
-            type: eventType,
-            content: html,
-            scrollSync: get(config, 'server.scrollSync', false),
-            hmr: get(config, 'server.hmr', true),
-          }))
-        }
-      })
-    } catch (error) {
-      spinner.fail(`Failed to render template: ${file}`)
-      throw error
-    }
-  }
-
-  chokidar
-    .watch([...globalWatchedPaths], {
-      ignored: [
-        'node_modules',
-        get(config, 'build.output.path', 'build_production'),
-      ],
-      ignoreInitial: true,
-      awaitWriteFinish: {
-        stabilityThreshold: 150,
-        pollInterval: 25,
-      },
-    })
-    .on('change', async file => await globalPathsHandler(file, 'change'))
-    .on('add', async file => await globalPathsHandler(file, 'add'))
-    .on('unlink', async file => await globalPathsHandler(file, 'unlink'))
-
-  /**
-   * Serve all folders in the cwd as static files
-   */
-  const srcFoldersList = await fg.glob(
-    [
-      '**/*/',
-      ...staticFilesSourcePaths,
-    ], {
-    onlyFiles: false,
-    ignore: [
-      'node_modules',
-      `${get(config, 'build.output.path', 'build_*')}/**`,
-    ]
-  })
-
-  srcFoldersList.forEach(folder => {
-    app.use(express.static(path.join(config.cwd, folder)))
-  })
-
-  // Error-handling middleware
-  app.use(async (req, res) => {
-    const view = await fs.readFile(path.join(__dirname, 'views', '404.html'), 'utf8')
-    const { html } = await render(view, {
-      url: req.url,
-    })
-
-    res.status(404).send(html)
-  })
-
-  /**
-   * Start the server
-   */
-  let retryCount = 0
-  const port = get(config, 'server.port', 3000)
-  const maxRetries = get(config, 'server.maxRetries', 10)
-
-  function startServer(port) {
-    const server = createServer(app)
-
-    /**
-     * Handle WebSocket upgrades
-     * Attaches the WebSocket server to the Express server.
-     */
-    server.on('upgrade', (request, socket, head) => {
-      wss.handleUpgrade(request, socket, head, ws => {
-        wss.emit('connection', ws, request)
-      })
-    })
-
-    server.listen(port, async () => {
-      const { version } = JSON.parse(
-        await fs.readFile(
-          new URL('../../package.json', import.meta.url)
-        )
-      )
-
-      spinner.stopAndPersist({
-        text: `\n${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(formatTime(Date.now() - serverStartTime))}`
-          + '\n\n'
-          + `  → Local:   http://localhost:${port}`
-          + '\n'
-          + `  → Network: http://${getLocalIP()}:${port}\n`
-      })
-    })
-
-    server.on('error', error => {
-      try {
-        if (error.code === 'EADDRINUSE') {
-          server.close()
-          retryPort()
-        }
-      } catch (error) {
-        spinner.fail(error.message)
-        exit(1)
-      }
-    })
-
-    return server
-  }
-
-  function retryPort() {
-    retryCount++
-
-    if (retryCount <= maxRetries) {
-      const nextPort = port + retryCount
-      startServer(nextPort)
-    } else {
-      spinner.fail(`Exceeded maximum number of retries (${maxRetries}). Unable to find a free port.`)
-
-      exit(1)
-    }
-  }
-
-  startServer(port)
-}

package/src/server/routes/hmr.js

@@ -1,26 +0,0 @@
-import express from 'express'
-import fs from 'node:fs/promises'
-import { dirname, join } from 'pathe'
-import { fileURLToPath } from 'node:url'
-import { createRequire } from 'node:module'
-
-const router = express.Router()
-const require = createRequire(import.meta.url)
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-router.get('/hmr.js', async (_req, res) => {
-  try {
-    const morphdomPath = require.resolve('morphdom/dist/morphdom-umd.js')
-    const morphdomScript = await fs.readFile(morphdomPath, 'utf8')
-
-    const clientScript = await fs.readFile(join(__dirname, '../client.js'), 'utf8')
-
-    res.setHeader('Content-Type', 'application/javascript')
-    res.send(morphdomScript + clientScript)
-  } catch (error) {
-    console.error('Error reading files:', error)
-    res.status(500).send('Internal Server Error')
-  }
-})
-
-export default router

package/src/server/routes/index.js

@@ -1,77 +0,0 @@
-import path from 'pathe'
-import express from 'express'
-const route = express.Router()
-import posthtml from 'posthtml'
-import fs from 'node:fs/promises'
-import { fileURLToPath } from 'node:url'
-import expressions from 'posthtml-expressions'
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-function groupFilesByDirectories(globs, files) {
-  const result = {}
-  let current = {}
-
-  globs.forEach(glob => {
-    // biome-ignore lint: needs to be escaped
-    const rootPath = glob.split(/[\*\!\{\}]/)[0].replace(/\/+$/, '')
-
-    files.forEach(file => {
-      if (file.startsWith(rootPath)) {
-        const relativePath = file.slice(rootPath.length + 1)
-        const parts = relativePath.split('/')
-        current = result[rootPath] = result[rootPath] || {}
-
-        for (let i = 0; i < parts.length - 1; i++) {
-          current = current[parts[i]] = current[parts[i]] || {}
-        }
-
-        const fileName = parts[parts.length - 1]
-        current[fileName] = {
-          name: fileName,
-          href: encodeURI(file),
-        }
-      }
-    })
-  })
-
-  return result
-}
-
-function flattenPaths(paths, parentPath = '', currentDepth = 0) {
-  const flatArray = []
-
-  for (const [key, value] of Object.entries(paths)) {
-    const fullPath = parentPath ? `${parentPath}/${key}` : key
-
-    if (value && typeof value === 'object' && !value.name) {
-      // If it's a folder, add it with the current depth and recurse into its contents
-      flatArray.push({ name: key, path: fullPath, depth: currentDepth, type: 'folder' })
-      flatArray.push(...flattenPaths(value, fullPath, currentDepth + 1))
-    } else if (value && typeof value === 'object' && value.name) {
-      // If it's a file, add it with the current depth
-      flatArray.push({ name: value.name, href: value.href, path: fullPath, depth: currentDepth, type: 'file' })
-    }
-  }
-
-  return flatArray
-}
-
-route.get(['/', '/index.html'], async (req, res) => {
-  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
-
-  const content = new Set(req.maizzleConfig.build.content)
-
-  const groupedByDir = groupFilesByDirectories(content, req.templatePaths)
-
-  const { html } = await posthtml()
-    .use(expressions({
-      locals: {
-        paths: flattenPaths(groupedByDir)
-      }
-    }))
-    .process(view)
-
-  res.send(html)
-})
-
-export default route

package/src/server/views/404.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>404 - Template not found</title>
-  <style>
-    html, body {
-      font-family: Helvetica, Arial, sans-serif;
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      height: 100%;
-    }
-
-    .container {
-      box-sizing: border-box;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      z-index: 1;
-      padding: 24px;
-    }
-
-    .error-code {
-      font-size: 25rem;
-      font-weight: 700;
-      color: #f1f5f9;
-      position: fixed;
-      top: -1.5rem;
-      left: -3rem;
-      user-select: none;
-    }
-  </style>
-</head>
-<body>
-  <span class="error-code">404</span>
-
-  <div class="container">
-    <div style="text-align: center;">
-      <h1 style="font-size: 3rem; color: #0F172A; margin: 2.25rem 0">
-        Template Not Found
-      </h1>
-      <p style="margin: 0 0 2.25rem; font-size: 1.25rem; line-height: 1.5; color: #64748B;">
-        The Template you are looking for was not found:
-      </p>
-      <p style="margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #334155;">
-        {{ page.url }}
-      </p>
-    </div>
-  </div>
-
-  <div style="position: fixed; bottom: 0; right: 0; pointer-events: none; user-select: none;">
-    <svg width="883" height="536" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1100" height="536"><path fill="#D9D9D9" d="M0 .955h1100V536H0z"/></mask><g mask="url(#a)" stroke="#94A3B8" stroke-miterlimit="10"><path d="M1056.93 92.587c0-50.03-43.95-90.587-98.168-90.587-54.22 0-98.174 40.557-98.174 90.587v483.125c0 50.029 43.954 90.586 98.174 90.586 54.218 0 98.168-40.557 98.168-90.586V92.587ZM646.241 92.587C646.241 42.556 602.287 2 548.067 2c-54.219 0-98.173 40.557-98.173 90.587v483.125c0 50.029 43.954 90.586 98.173 90.586 54.22 0 98.174-40.557 98.174-90.586V92.587Z"/><path d="M1036.18 148.383c33.41-39.402 25.88-96.336-16.82-127.164C976.657-9.61 914.955-2.66 881.544 36.742L471.586 520.215c-33.411 39.402-25.879 96.336 16.824 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.955-483.473ZM625.093 148.396c33.411-39.403 25.878-96.336-16.824-127.164C565.567-9.597 503.865-2.647 470.454 36.755L60.495 520.228c-33.41 39.402-25.878 96.336 16.825 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.958-483.473Z"/></g></svg>
-  </div>
-</body>
-</html>