server-side compilation & cache #178

FranckFreiburger · 2024-01-23T08:18:02Z

FranckFreiburger
Jan 23, 2024
Maintainer

This is an example of how to setup server-side compilation and cache.

The idea is to use the same codebase of vue3-sfc-loader (v0.9.2+) on the server with the appropriate options:
compiledCache to record compiled assets
getFile to record all requested dependencies and exclude undesired ones
handleModule to handle excluded modules
createCJSModule to prevent js module creation

server

import path from 'path'
import fs from 'fs'

import { fileURLToPath } from 'url'
const __dirname = fileURLToPath(new URL('.', import.meta.url))

import express from 'express';
import LRUCache from 'lru-cache'

import { loadModule } from 'vue3-sfc-loader'


class HttpError extends Error {
  constructor(code, message) {
    super(message)
    this.name = HttpError.name;
    this.code = code;
    Error.captureStackTrace(this, HttpError)
  }
}


const app = express();

function v3sfclMiddleware(readFile) {

  const SKIP_MODULE = Symbol();

  // common cache for all requests
  const globalCache = new LRUCache({
    maxSize: 1024 * 1024,
    sizeCalculation: (value, key) => key.length + value.length,
    updateAgeOnHas: false,
    updateAgeOnGet: true,
  });


  return async (req, res, next) => {

    // we need to make the difference with a normal request and a vue3-sfc-loader cache request
    if ( req.header('X-v3sfcl-cache') !== 'true' )
      return next();
    
    try {
      
      // dependency cache for this request only
      const cacheDeps = [];

      await loadModule(req.originalUrl, {

        moduleCache: { vue: null },
        
        // we don't need modules server-side
        createCJSModule() { // v0.9.2+
    
          return { exports: {} };
        },

        // record all dependent compiled assets for the requested file
        compiledCache: {
          get(key) {
      
            cacheDeps.push(key);
            return globalCache.get(key);
          },
          set(key, value) {
      
            globalCache.set(key, value);
          },
        },

        // record all dependent files for the requested file
        async getFile(url) {

          // do not process files from other origins, this will be done client-side
          if ( !url.startsWith('/') )
            return { type: SKIP_MODULE }; // issue skip handling type, caught by handleModule
          
          cacheDeps.push(url);
      
          if ( globalCache.has(url) )
            return globalCache.get(url);

          // actual file reading
          const content = await readFile(url);

          globalCache.set(url, content);
          return content;
        },

        // we need to handle file types we don't want to handle sever-side
        handleModule(type) {

          if ( type === SKIP_MODULE ) // handle skip handling type
            return null; // issue a null-module
        },
        
        // we don't need style server-side
        addStyle: () => {},
      });

      // convert cacheDeps to its related content
      const data = Object.fromEntries(cacheDeps.map(key => [key, globalCache.get(key)]));

      // we respond to a X-v3sfcl-cache request
      res.set('X-v3sfcl-cache', 'true');
      res.status(200).end(JSON.stringify(data));
  
    } catch(ex) {
  
      if ( ex instanceof HttpError ) {
       
        res.status(ex.code).header('Content-Type', 'text/plain').end(ex.message);
        return;
      }
  
      throw ex;
    }
  }
}


async function readFile(url) {

  // TBD: check that file access is legitimate

  console.log('readFile', url)
  try {

    return await fs.promises.readFile(path.join(__dirname, url), 'utf-8')
  } catch {

    console.log( `${ url } not found` )
    throw new HttpError(404, `${ url } not found`);
  }
}


app.use('/public', v3sfclMiddleware(readFile));

app.use('/public', express.static(path.join(__dirname, 'public')))

app.listen(8181);

client (`index.html`)

<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
</head>
<body>
  <script src="https://unpkg.com/vue/dist/vue.runtime.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
  <script>

    const { loadModule } = window['vue3-sfc-loader'];

    const cache = Object.create(null);

    const options = {
      devMode: false,
      moduleCache: {
        vue: Vue,
      },
      compiledCache: {
        get: key => cache[key],
        set: (key, value) => cache[key] = value,
      },
      async getFile(url) {

        if (url in cache)
          return cache[url];

        console.log('getFile', url)
        const actualUrl = new URL(url, window.location.origin);
        const res = await fetch(actualUrl, {
          method: 'GET',
          headers: {
            // 
            ...actualUrl.origin === window.location.origin ? {
              'X-v3sfcl-cache': 'true',
            } : {},
          }
        });

        if (res.headers.get('X-v3sfcl-cache') === 'true') {

          const data = await res.json();
          Object.assign(cache, data);
          return cache[url];
        }

        return {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
        }
      },

      // handleModule hook is not mandatory, default one is ok.
      // this just illustrates files that are required in source .vue file but not handled by server-side cache
      async handleModule(type, getContentData) {

        if (type === '.png') {

          const arrayBuffer = await getContentData(true);
          return 'data:image/png;base64,' + btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
        }
      },

      addStyle() {
        // ...
      },

      log(type, ...args) {

        console[type](...args);
      },
    }


    loadModule('/public/main.vue', options)
    .then(rootComponent => {

      const app = Vue.createApp(rootComponent)
      app.mount(document.body);
    })
    .catch(ex => console.error(ex));


  </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

server-side compilation & cache #178

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

server-side compilation & cache #178

Uh oh!

Uh oh!

FranckFreiburger Jan 23, 2024 Maintainer

server

client (index.html)

Replies: 0 comments

FranckFreiburger
Jan 23, 2024
Maintainer

client (`index.html`)