build.js

import  { compile } from 'svelte/compiler';
import chokidar from 'chokidar';
import esbuild from 'esbuild';
import { readdirSync, statSync, existsSync, writeFileSync, readFileSync } from 'fs';
import { join, basename, resolve, dirname, relative } from 'path';
import { fileURLToPath } from 'url';
import sveltePlugin from 'esbuild-svelte';
import { sum } from 'lodash-es';
import { parse, serialize } from 'parse5';
import notifier from 'node-notifier';
import svelteConfig from './svelte.config.js';
import FiveServer from 'five-server';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

process.on('uncaughtException', error => {
  notifier.notify({
    title: 'Error occurs',
    message: `${error}`
  });
});

const [watch, serve, minify, debug, logVars] = ['--watch', '--serve', '--minify', '--debug', '--log-vars'].map( s =>
  process.argv.includes( s )
);
const debug_console_log = ( args, returnIndex = 0 ) => (debug && console.log( ...args ), args[ returnIndex ]);

const ignorePath = new Set( [
  'node_modules',
  '.vscode',
  '.idea',
  '.git',
  '.gitignore',
  'build.js',
  'package-lock.json',
  'package.json',
  'README.md',
  'build.js',
  'pullpush.sh',
] );

// find page candidates
function findPages( dir = '.', sink = [] ) {
  if( ignorePath.has( dir.replace( './', '' ).replace( '.\\', '' ) ) ) {
    debug && console.log( 'skip:', dir );
    return;
  }
  
  const files = readdirSync( dir ).filter( f => f[ 0 ]!=='_' );
  const svelteFiles = files.filter( f => f.endsWith( '.svelte' ) && statSync( join( dir, f ) ).isFile() );
  svelteFiles.forEach( f => sink.push( join( dir, f ) ) );
  
  files
    .filter( f => !svelteFiles.includes( f ) )
    .map( f => join( dir, f ) )
    .filter( f => statSync( f ).isDirectory() )
    .forEach( f => findPages( f, sink ) );
  return sink;
}

const _zId_prefix = `z_placeholder_${Math.floor( Math.random() * 1000000000 ).toString( 16 )}_`;
const _zReplacer = s => debug_console_log( ['z-replace:', s, `"${_zId_prefix}${Buffer.from( s ).toString( 'base64' )}"`], 2 );

const zPlaceholderReplacer = content => {
  content?.replace( /\#\{\s*\w+\s*\}/gs, _zReplacer ) // #{ key }
    .replace( /\/\*\!\s*\w+\s*\*\//gs, _zReplacer ) // map /*! mapKey */
    .replace( /\[\s*\/\*\s*\w+\s*\*\/\s*\]/gs, _zReplacer ) // map [/* mapKey */]
    .replace( /\{\s*\/\*\s*\w+\s*\*\/\s*\}/gs, _zReplacer ); // map {/* mapKey */}
}

global.zPlaceholderReplacer = zPlaceholderReplacer;

const zPlaceholderRestore = ( content, sink ) =>
  content?.replace( new RegExp( `("|')${_zId_prefix}(\\w+=*)\\1`, 'g' ), ( _, _2, s ) => {
    s = Buffer.from( s, 'base64' ).toString( 'ascii' );
    sink.push( s );
    debug && console.log( 'z-restore', _, s );
    return s;
  } );

const svelteJsPathResolver = {
  name: 'svelteJsPathResolver',
  setup( build ) {
    const options = {filter: /\.svelte\.(ts)$/};
    
    build.onResolve( options, ( {path, resolveDir} ) => ({path: join( resolveDir, path )}) );
    build.onLoad( options, ( {path} ) => {
      return {
        contents: `
            import App from "./${basename( path ).replace( /\.ts$/, '' )}";
            export const app = new App({ target: document.getElementById("app") });
        `,
        loader: 'ts',
        resolveDir: dirname( path ),
      };
    } );
  },
};

function createBuilder( entryPoints ) {
  console.log( 'pages:', entryPoints );
  
  return esbuild.build( {
    entryPoints: entryPoints.map( s => s + '.ts' ),
    bundle: true,
    outdir: '.',
    write: false,
    plugins: [svelteJsPathResolver, sveltePlugin( svelteConfig ) ],
    incremental: !!watch,
    sourcemap: false,
    minify,
    } )
}

function layoutFor( path, content = {} ) {
  path = (() => {
    let temp = join( path, '..', '_layout.html' );
    
    while( true ) {
      if( existsSync( temp ) ) return temp;
      if( resolve( __dirname )===resolve( dirname( temp ) ) ) return;
      
      temp = join( temp, '../..', '_layout.html' );
    }
  })();
  
  layoutFor.cache = layoutFor.cache || {};
  
  const defaultKey = '_DEFAULT_LAYOUT';
  if( !path && layoutFor.cache[ defaultKey ] ) return layoutFor.cache[ defaultKey ];
  
  let cache = layoutFor.cache[ path ];
  const m = statSync( path ).mtimeMs;
  if( cache && m===cache.m ) return cache;
  
  const tree = parse(
    path
      ? readFileSync( path, 'utf-8' )
      : `<!DOCTYPE html>
<html>
  <head>
    <title>#{title}</title>
  </head>
  <body>
    <h1>layout not found, please create <b>_layout.html</b></h1>
    <slot></slot>
  </body>
</html>`
  );
  
  let slot = null;
  let body = null;
  
  let stack = [...tree.childNodes];
  
  while( stack.length && (slot==null || body==null) ) {
    const t = stack.pop();
    if( t.nodeName==='body' ) body = t;
    if( t.nodeName==='slot' || (t.nodeName==='#comment' && t.data?.trim()==='content_goes_here') ) slot = t;
    
    t.childNodes && (stack = [...stack, ...t.childNodes]);
  }
  
  if( !body ) throw new Error( 'body not found' );
  
  const appKEY = `${Math.random()}-APP-${Math.random()}`;
  if( slot ) {
    slot.nodeName = 'main';
    slot.tagName = 'main';
    delete slot.data;
    slot.attrs = [
      {name: 'id', value: 'app'},
      ...(slot.attrs || [])?.filter( t => t.name!=='id' )
    ];
    slot.childNodes = [{nodeName: '#text', value: appKEY}]
  } else {
    body.childNodes.push( {
      nodeName: 'main',
      tagName: 'main',
      attrs: [{name: 'id', value: 'app'}],
      childNodes: [{nodeName: '#text', value: appKEY}],
      namespaceURI: body.namespaceURI,
    } );
  }
  
  // Remove main content
  // content showing only for seo friendly
  body.childNodes.push( {
    nodeName: 'script',
    tagName: 'script',
    attrs: [],
    childNodes: [{nodeName: '#text', value: "document.getElementById('app').innerHTML=''"}],
    namespaceURI: body.namespaceURI,
  } )
  
  const jsKEY = `${Math.random()}-JS-${Math.random()}`;
  const cssKEY = `${Math.random()}-CSS-${Math.random()}`;
  const comments = {
    nodeName: '#comment',
    data: '',
  };
  const cssVarsComments = {
    nodeName: '#comment',
    data: '',
  };
  const jsVarsComments = {
    nodeName: '#comment',
    data: '',
  };
  
  body.childNodes = [
    ...body.childNodes,
    comments,
    {
      nodeName: '#text',
      value: '\n',
    },
    logVars && cssVarsComments,
    {
      nodeName: '#text',
      value: '\n',
    },
    logVars && jsVarsComments,
    {
      nodeName: '#text',
      value: '\n',
    },
    {
      nodeName: 'style',
      tagName: 'style',
      attrs: [],
      childNodes: [{nodeName: '#text', value: cssKEY}],
      namespaceURI: body.namespaceURI,
    },
    {
      nodeName: '#text',
      value: '\n',
    },
    {
      nodeName: 'script',
      tagName: 'script',
      attrs: [],
      childNodes: [{nodeName: '#text', value: jsKEY}],
      namespaceURI: body.namespaceURI,
    },
    {
      nodeName: '#text',
      value: '\n',
    },
  ];
  
  debug && console.log( 'build layout for:', path || defaultKey );
  
  return (layoutFor.cache[ path || defaultKey ] = ( {js, css} ) => {
    const cssVars = [],
      jsVars = [];
    js = zPlaceholderRestore( js, jsVars ) || '';
    css = zPlaceholderRestore( css, cssVars ) || '';
    
    //comments.data = `BUILD TIME: ${new Date().toISOString()}`;
    cssVarsComments.data = cssVars.length ? `--- CSS z-vars --- \n${cssVars.join( '\n' )}` : '';
    jsVarsComments.data = jsVars.length ? `--- JS z-vars --- \n${jsVars.join( '\n' )}` : '';
    
    let html = content.html || '';
    const innerCss = (content.css || {}).code || '';
    
    return serialize( tree ).
      replace( cssKEY, css + innerCss ).
      replace( jsKEY, js ).
      replace( appKEY, html ).
      replaceAll("fakecss:"+__dirname,'fakecss:.');
  });
}

(async () => {
  let watcherReady = false;
  
  watch && console.log( 'first build start' );
  let pages = findPages();
  let builder = await createBuilder( pages );
  
  const compiledFiles = new Set();
  let cache = {};
  
  function saveFiles( files = builder, layoutChanged = false ) {
    const output = {};
    let unchanged = 0;
    // path = bla.svelte.js or bla.svelte.css
    for( const {path, text} of files.outputFiles ) {
      const ext = /\.(\w+)$/.exec( path )?.[ 1 ];
      if( ext!=='css' && ext!=='js' ) throw new Error( 'unknown ext:' + ext );
      
      // bla.js or bla.css
      const key = path.replace( /\.svelte\.\w+$/, '' );
      
      output[ key ] = output[ key ] || {};
      output[ key ][ ext ] = text
      
      if( cache[ path ]===text && !layoutChanged ) {
        unchanged += 1;
        continue;
      }
      cache[ path ] = text;
    }
    
    // do nothing if nothing's changed
    if( unchanged===files.outputFiles.length ) return;
    
    if( Object.keys( output ).length===0 ) return console.log( 'no changes' );
    
    // for each .html files need to be generated
    Object.entries( output ).forEach( ( [path, data] ) => {
      const renderedSvelte = compile( path + '.svelte' );
      
      const content = layoutFor( path, renderedSvelte )( data );
      
      path = resolve( path + '.html' );
      compiledFiles.add( path );
      console.log( 'compiled:', relative( resolve( __dirname ), path ) );
      writeFileSync( path, content );
    } );
  }
  
  saveFiles();
  watch && console.log( 'first build end' );
  
  if( watch ) {
    const pagesPaths = new Set( pages.map( p => resolve( p ) ) );
    
    let timeRef = null;
    
    function changeListener( path, stats, type, watcher ) {
      switch (type) {
      case 'change':
        notifier.notify({
          title: 'Change occurs',
          message: `Change occurs in "${path}"`
        });
        break;
      case 'add':
        notifier.notify({
          title: 'File added',
          message: `Added file "${path}"`
        });
        break;
      case 'unlink':
        notifier.notify({
          title: 'File remove',
          message: `Removed file "${path}"`
        });
        break;
      }

      if( compiledFiles.has( resolve( path ) ) ) return;
      console.log( type + ':', path.replace( __dirname, '' ) );
      
      const svelteFile = path[ 0 ]!=='_' && path.endsWith( '.svelte' );
      
      let pagesChanged = true;
      if( svelteFile && type==='add' ) pagesPaths.add( resolve( path ) );
      else if( svelteFile && type==='unlink' ) pagesPaths.delete( resolve( path ) );
      else pagesChanged = false;
      
      let layoutChanged = path.endsWith( '_layout.html' );
      
      if( timeRef ) clearTimeout( timeRef );
      timeRef = setTimeout( async () => {
        pagesChanged
          ? saveFiles( (builder = await createBuilder( Array.from( pagesPaths, p => relative( __dirname, p ) ) )), layoutChanged )
          : saveFiles( await builder.rebuild(), layoutChanged );
      }, 200 );
    }
    
    const watcher = chokidar
      .watch( '.', {ignored: s => ignorePath.has( s ) || ignorePath.has( join( './', s ) ), ignoreInitial: true} )
      .on( 'change', ( path, stats ) => changeListener( path, stats, 'change', watcher ) )
      .on( 'add', ( path, stats ) => changeListener( path, stats, 'add', watcher ) )
      .on( 'unlink', ( path, stats ) => changeListener( path, stats, 'unlink', watcher ) )
      .on( 'ready', () => {
        console.log( `watching ${sum( Object.values( watcher.getWatched() ).map( t => t.length ) )} files/dirs for changes` );
        watcherReady = true;
      } )
      .on( 'error', err => console.log( 'ERROR:', err ) );
  };


  serve &&
  (await  new FiveServer().start( {
    open: true,
    workspace: __dirname,
    ignore: [...ignorePath, /\.(js|ts|svelte)$/, /\_layout\.html$/],
    wait: 500,
  } ));
})();