@maizzle/framework 5.0.0-beta.8 → 5.0.0

package/src/posthtml/index.js

@@ -3,27 +3,39 @@ import { defu as merge } from 'defu'
 
 // PostHTML
 import posthtml from 'posthtml'
+import posthtmlFetch from 'posthtml-fetch'
+import envTags from './plugins/envTags.js'
 import components from 'posthtml-component'
 import posthtmlPostcss from 'posthtml-postcss'
-import defaultPosthtmlConfig from './defaultConfig.js'
 import expandLinkTag from './plugins/expandLinkTag.js'
 import envAttributes from './plugins/envAttributes.js'
-import envTags from './plugins/envTags.js'
+import { getPosthtmlOptions } from './defaultConfig.js'
 
 // PostCSS
 import tailwindcss from 'tailwindcss'
+import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
+import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
-import customProperties from 'postcss-custom-properties'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
 
 export async function process(html = '', config = {}) {
+  /**
+   * Configure PostCSS pipeline. Plugins defined and added here
+   * will apply to all `<style>` tags in the HTML.
+   */
+  const resolveCSSProps = get(config, 'css.resolveProps')
+  const resolveCalc = get(config, 'css.resolveCalc') !== false
+    ? get(config, 'css.resolveCalc', { precision: 2 }) // it's true by default, use default precision 2
+    : false
+
   const postcssPlugin = posthtmlPostcss(
     [
       postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
-      get(config, 'css.inline.resolveCSSVariables', true) && customProperties(),
+      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCalc !== false && postcssCalc(resolveCalc),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
@@ -35,12 +47,16 @@ export async function process(html = '', config = {}) {
     )
   )
 
-  const posthtmlOptions = merge(get(config, 'posthtml.options', {}), defaultPosthtmlConfig)
+  /**
+   * Define PostHTML options by merging user-provided ones
+   * on top of a default configuration.
+   */
+  const posthtmlOptions = getPosthtmlOptions(get(config, 'posthtml.options', {}))
 
   const componentsUserOptions = get(config, 'components', {})
 
   const expressionsOptions = merge(
-    get(config, 'build.expressions', get(config, 'posthtml.expressions', {})),
+    get(config, 'expressions', get(config, 'posthtml.expressions', {})),
     get(componentsUserOptions, 'expressions', {}),
   )
 
@@ -50,26 +66,55 @@ export async function process(html = '', config = {}) {
     { page: config },
   )
 
+  const fetchPlugin = posthtmlFetch(
+    merge(
+      {
+        expressions: merge(
+          { locals },
+          expressionsOptions,
+          {
+            missingLocal: '{local}',
+            strictMode: false,
+          },
+        ),
+      },
+      get(config, 'fetch', {})
+    )
+  )
+
+  const componentsConfig = merge(
+    {
+      expressions: merge(
+        { locals },
+        expressionsOptions,
+      )
+    },
+    componentsUserOptions,
+    defaultComponentsConfig
+  )
+
+  // Ensure `fileExtension` is array and  has no duplicates
+  componentsConfig.fileExtension = Array.from(new Set(
+    [].concat(componentsConfig.fileExtension)
+  ))
+
   return posthtml([
     ...get(config, 'posthtml.plugins.before', []),
     envTags(config.env),
     envAttributes(config.env),
     expandLinkTag,
     postcssPlugin,
-    components(
-      merge({
-        expressions: {
-          locals,
-        }
-      }, defaultComponentsConfig)
-    ),
+    fetchPlugin,
+    components(componentsConfig),
     expandLinkTag,
     postcssPlugin,
+    envTags(config.env),
+    envAttributes(config.env),
     ...get(config, 'posthtml.plugins.after', get(config, 'posthtml.plugins', []))
   ])
     .process(html, posthtmlOptions)
     .then(result => ({
-      config,
+      config: merge(config, { page: config }),
       html: result.html,
     }))
     .catch(error => {

package/src/server/index.js

@@ -40,6 +40,77 @@ 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
@@ -47,7 +118,10 @@ export default async (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)
 
@@ -60,18 +134,20 @@ export default async (config = {}) => {
    * Initialize WebSocket server
    * Used to send messages between the server and the browser
    */
-  initWebSockets(wss, { scrollSync: shouldScroll, hmr: useHmr })
-
-  // Get a list of all template paths
-  const templateFolders = Array.isArray(get(config, 'build.content'))
-    ? config.build.content
-    : [config.build.content]
+  initWebSockets(wss, { shouldScroll, useHmr })
 
-  const templatePaths = await fg.glob([...new Set(templateFolders)])
+  // Register routes
+  templatePaths = await getUpdatedRoutes(app, config)
 
-  // Set the template paths on the app, we use them in the index view
+  /**
+   * 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
@@ -83,7 +159,7 @@ export default async (config = {}) => {
     )
   ].join('|')
 
-  const routePattern = Array.isArray(templateFolders)
+  const routePattern = Array.isArray(getTemplateFolders(config))
     ? `*/:file.(${extensions})`
     : `:file.(${extensions})`
 
@@ -94,15 +170,20 @@ export default async (config = {}) => {
     app.get(routePattern, async (req, res, next) => {
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       try {
-        const filePath = templatePaths.find(t => t.endsWith(req.url.slice(1)))
+        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')
 
@@ -125,99 +206,82 @@ export default async (config = {}) => {
     })
   })
 
-  // Error-handling middleware
-  app.use(async (error, req, res, next) => { // eslint-disable-line
-    console.error(error)
-
-    const view = await fs.readFile(path.join(__dirname, 'views', 'error.html'), 'utf8')
-    const { html } = await render(view, {
-      method: req.method,
-      url: req.url,
-      error
-    })
-
-    res.status(500).send(html)
-  })
-
   /**
    * Components watcher
    *
    * Watches for changes in the configured Templates and Components paths
    */
+  let isWatcherReady = false
   chokidar
-    .watch([...templatePaths, ...get(config, 'components.folders', defaultComponentsConfig.folders) ])
+    .watch(
+      [
+        ...templatePaths,
+        ...get(config, 'components.folders', defaultComponentsConfig.folders)
+      ],
+      {
+        ignoreInitial: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 150,
+          pollInterval: 25,
+        },
+      }
+    )
     .on('change', async () => {
-      // Not viewing a component in the browser, no need to rebuild
-      if (!viewing) {
-        return
+      if (viewing) {
+        await renderUpdatedFile(viewing, config)
       }
-
-      try {
-        const startTime = Date.now()
-        spinner.start('Building...')
-
-        // beforeCreate event
-        if (typeof config.beforeCreate === 'function') {
-          await config.beforeCreate(config)
-        }
-
-        // Read the file
-        const fileContent = await fs.readFile(viewing, '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(), viewing)}]`)}`
-          + `${ 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
+    })
+    .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
       }
     })
 
   /**
    * Global watcher
    *
-   * Watch for changes in the config file, Tailwind CSS config, and CSS files
+   * 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',
-    'maizzle.config*.js',
-    'tailwind*.config.js',
+    'config*.{js,cjs,ts}',
+    'maizzle.config*.{js,cjs,ts}',
+    'tailwind*.config.{js,ts}',
     '**/*.css',
-    ...get(config, 'server.watch', [])
+    ...get(config, 'build.static.source', []),
+    ...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) {
-      spinner.info(`file ${eventType}: ${file}`)
       return
     }
 
@@ -235,7 +299,7 @@ export default async (config = {}) => {
 
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        await config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       // Read the file
@@ -254,7 +318,7 @@ export default async (config = {}) => {
       spinner.succeed(
         `Done in ${formatTime(Date.now() - startTime)}`
         + `${pico.gray(` [${path.relative(cwd(), filePath)}]`)}`
-        + `${ shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
+        + `${shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
       )
 
       /**
@@ -274,7 +338,7 @@ export default async (config = {}) => {
         }
       })
     } catch (error) {
-      spinner.fail('Failed to render template.')
+      spinner.fail(`Failed to render template: ${file}`)
       throw error
     }
   }
@@ -286,6 +350,10 @@ export default async (config = {}) => {
         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'))
@@ -293,25 +361,33 @@ export default async (config = {}) => {
 
   /**
    * Serve all folders in the cwd as static files
-   *
-   * TODO: change to include build.assets or build.static, which may be outside cwd
    */
   const srcFoldersList = await fg.glob(
     [
       '**/*/',
       ...get(config, 'build.static.source', [])
     ], {
-      onlyFiles: false,
-      ignore: [
-        'node_modules',
-        get(config, 'build.output.path', 'build_*'),
-      ]
-    })
+    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
    */
@@ -320,9 +396,6 @@ export default async (config = {}) => {
   const maxRetries = get(config, 'server.maxRetries', 10)
 
   function startServer(port) {
-    const serverStartTime = Date.now()
-    spinner.start('Starting server...')
-
     const server = createServer(app)
 
     /**
@@ -343,7 +416,7 @@ export default async (config = {}) => {
       )
 
       spinner.stopAndPersist({
-        text: `${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(Date.now() - serverStartTime)} ms`
+        text: `\n${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(formatTime(Date.now() - serverStartTime))}`
           + '\n\n'
           + `  → Local:   http://localhost:${port}`
           + '\n'

package/src/server/routes/index.js

@@ -7,27 +7,65 @@ import { fileURLToPath } from 'node:url'
 import expressions from 'posthtml-expressions'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-route.get(['/', '/index.html'], async (req, res) => {
-  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
+function groupFilesByDirectories(globs, files) {
+  const result = {}
+  let current = {}
 
-  // Group by `dir`
-  const groupedByDir = {}
+  globs.forEach(glob => {
+    const rootPath = glob.split(/[\*\!\{\}]/)[0].replace(/\/+$/, '')
 
-  req.templatePaths
-    .map(t => path.parse(t))
-    .forEach(file => {
-      if (!groupedByDir[file.dir]) {
-        groupedByDir[file.dir] = []
-      }
+    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]] || {}
+        }
 
-      file.href = [file.dir.replace(file.root, ''), file.base].join('/')
-      groupedByDir[file.dir].push(file)
+        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: {
-        templates: groupedByDir
+        paths: flattenPaths(groupedByDir)
       }
     }))
     .process(view)

package/src/server/views/404.html

@@ -0,0 +1,59 @@
+<!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>