@trebco/treb 23.6.5 → 25.0.0-rc2

package/esbuild-custom-element.mjs

@@ -0,0 +1,336 @@
+// @ts-check
+
+import * as esbuild from 'esbuild';
+import { promises as fs } from 'fs';
+import { minify } from 'html-minifier';
+import path from 'path';
+import sass from 'sass';
+import cssnano from 'cssnano';
+import postcss from 'postcss';
+
+import pkg from './package.json' assert { type: 'json' }; 
+
+/** @type {import('html-minifier').Options} */
+const html_minifier_options = {
+  removeComments: true,
+  collapseWhitespace: true,
+};
+
+/**
+ * @typedef {Object} Options
+ * @property {'dev'|'production'} version
+ * @property {boolean} watch
+ * @property {boolean} verbose - log all plugin inputs. helpful for dev/debug.
+ * @property {boolean} minify - separate from dev/production, in case we need to test
+ */
+
+/** 
+ * @type {Options}
+ * 
+ * defaults to production, we will update from any options 
+ * passed at command line. 
+ */
+const options = {
+  version: 'production',
+  watch: false,
+  minify: true, 
+  verbose: false,
+};
+
+/**
+ * @function
+ * @param {string} [label] - optional label for build messages
+ * @returns {esbuild.Plugin}
+ * 
+ * add notifications on build start/end. we also want to use this
+ * to notify worker sub-builds, so we can be sure they're working
+ * properly.
+ */
+const NotifyPlugin = (label) => {
+  return {
+    name: 'notify', 
+    setup(build) {
+      build.onStart(() => {
+        console.info(`${label ? `${label} ` : ''}build started @ ${new Date().toLocaleTimeString()}`);
+      });
+      build.onEnd(result => {
+        if (!result.errors.length) {
+          console.info(`${label ? `${label} ` : ''}build complete @ ${new Date().toLocaleTimeString()}`);
+        }
+        if (!label) {
+          console.info('');
+        }
+      });
+    },
+  };
+};
+
+/**
+ * @function
+ * @param {number} size - size in bytes
+ * @returns {string} - size as a human readable string
+ */
+const FormatSize = (size) => {
+
+  const units = ['B', 'KB', 'MB'];
+  let index = 0;
+
+  for (let i = 0; i < units.length; i++) {
+    if (size > 1024) {
+      size = size / 1024;
+      index++;
+    }
+  }
+
+  return `${size.toFixed(1)} ${units[index]}`;
+
+};
+
+/** 
+ * @type esbuild.Plugin
+ * 
+ * inlining the worker build. this works out well with one limitation:
+ * at the moment, we're not caching the build for watching. OTOH esbuild 
+ * is so fast it doesn't really matter at the moment.
+ * 
+ * if you import a worker script like this 
+ * ```
+ * import worker_script from 'worker:path/to/worker.ts';
+ * ```
+ * the plugin will compile the target (with esbuild) and then return the 
+ * compiled script as a string. the child build inherits minify settings 
+ * from the parent build.
+ * 
+ * you can then use it in the containing script by creating a worker:
+ * ```
+ * const worker = new Worker(URL.createObjectURL(new Blob([worker_script], { type: 'application/javascript' })));
+ * ```
+ * 
+ * this might cause problems with CSP. if so, we'll sort that out separately.
+ * 
+ */
+const worker_plugin = {
+  name: 'worker',
+  setup(build) {
+
+    build.onResolve({ filter: /^worker:/}, async (args) => {
+      args.path = args.path.substring(7);
+      const result = await build.resolve(args.path, {
+        kind: args.kind,
+        resolveDir: args.resolveDir,
+      });
+      return { path: result.path, namespace: 'worker', };
+    }),
+
+    // for some reason I can't get the filter to work here, but using
+    // namespace works. as long as we don't collide with anybody else.
+    //
+    // with the assumption that esbuild will eventually have a solution
+    // for inlining workers, we might want to use a more distinctive 
+    // namespace that has less possibility of collision in the future.
+    // of course if that happens we will probably use the native version,
+    // so maybe it doesn't matter.
+
+    build.onLoad({ filter: /./, namespace: 'worker' }, async(args) => {
+
+      if (options.verbose) {
+        console.info('worker:', args.path);
+      }
+
+      try {
+
+        const result = await esbuild.build({
+
+          entryPoints: [ args.path ],
+
+          // we can use this as a key later
+          outfile: 'worker',
+
+          // inherit options
+          minify: options.minify,
+          bundle: true,
+          format: 'esm',
+
+          // don't write to filesystem
+          write: false,
+
+          // use the metafile to get deps
+          metafile: true,
+
+          // write to stdout
+          plugins: [
+            NotifyPlugin('- worker'),
+          ],
+
+        });
+
+        if (options.verbose) {
+          console.info('  worker build size: ' + FormatSize(result.outputFiles[0].text.length));
+        }
+
+        // here's where we use that name as a key
+
+        const inputs = result.metafile.outputs['worker'].inputs;
+        const watchFiles = Object.keys(inputs).map(relative => path.resolve(relative));
+  
+        return {
+          errors: result.errors,
+          warnings: result.warnings,
+          loader: 'text',
+          contents: result.outputFiles[0].text,
+          watchFiles,
+        }
+  
+      }
+      catch (err) {
+
+        // on error, we pass the file that threw as a dependency so we can
+        // watch updates and trigger a rebuild (nice that this works, btw)
+
+        const watchFiles = [];
+        for (const error of err.errors) {
+          if (error.location?.file) {
+            watchFiles.push(path.resolve(error.location.file));
+          }
+        }
+        return {
+          errors: err.errors,
+          watchFiles,
+        };
+
+      }
+
+    });
+  }
+};
+
+/** 
+ * @type esbuild.Plugin
+ * 
+ * html -> string, optionally minified 
+ */
+const html_plugin = {
+  name: 'html',
+  setup(build) {
+    build.onLoad({ filter: /\.html$/ }, async (args) => {
+
+      if (options.verbose) {
+        console.info('html:', args.path);
+      }
+
+      const text = await fs.readFile(args.path, 'utf8');
+      return {
+        contents: options.minify ? minify(text, html_minifier_options) : text,
+        loader: 'text',
+      };
+    });
+  },
+};
+
+/** 
+ * @type esbuild.Plugin
+ * 
+ * sass -> string, optionally minified 
+ */
+const sass_plugin = {
+  name: 'sass',
+  setup(build) {
+    build.onLoad({ filter: /\.scss$/ }, async (args) => {
+
+      if (options.verbose) {
+        console.info('sass:', args.path);
+      }
+
+      try {
+
+        const result = await sass.compile(args.path, {
+          loadPaths: ['.'],
+          // charset: false,
+          // style: 'compressed',
+        });
+        const files = (result.loadedUrls || []).map(url => url.pathname);
+        
+        let contents = result.css;
+        if (options.minify) {
+          const minified = await postcss([cssnano]).process(result.css, { from: undefined });
+          contents = minified.css;
+        }
+
+        return {
+          contents,
+          loader: 'text',
+          watchFiles: files,
+        };
+
+      }
+      catch (err) {
+        const watchFiles = [];
+        if (err.span?.file?.url?.path) {
+          watchFiles.push(path.resolve(err.span.file.url.path));
+        }
+        return {
+          errors: [{ 
+            text: err.message,
+            // ...location...
+          }],
+          watchFiles,
+        }
+      }
+
+    });
+  },
+};
+
+//------------------------------------------------------------------------------
+//
+// runtime
+//
+//------------------------------------------------------------------------------
+
+for (let i = 0; i < process.argv.length; i++) {
+  if (process.argv[i] === '--dev') {
+    options.version = 'dev';
+    options.minify = false;
+  }
+  if (process.argv[i] === '--watch') {
+    options.watch = true;
+  }
+  if (process.argv[i] === '--verbose') {
+    options.verbose = true;
+  }
+}
+
+/** @type esbuild.BuildOptions */
+const build_options = {
+  entryPoints: [
+    'treb-embed/src/index.ts',
+  ],
+  banner: { 
+    js: `/*! TREB v${pkg.version}. Copyright 2018-${new Date().getFullYear()} trebco, llc. All rights reserved. LGPL: https://treb.app/license */`
+  },
+  bundle: true,
+  outfile: 'build/treb-spreadsheet.mjs',
+  outExtension: { '.js': '.mjs' },
+  minify: options.minify,
+  metafile: true,
+  format: 'esm',
+  define: {
+    'process.env.NODE_ENV': `"${options.version}"`,
+    'process.env.BUILD_VERSION': `"${pkg.version}"`,
+    'process.env.BUILD_NAME': `"${pkg.name}"`,
+  },
+  plugins: [
+    NotifyPlugin(),
+    worker_plugin,
+    html_plugin,
+    sass_plugin,
+  ],
+};
+
+if (options.watch) {
+  const context = await esbuild.context(build_options);
+  await context.watch();
+}
+else {
+  await esbuild.build(build_options);
+}

package/esbuild.js

@@ -0,0 +1,305 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const esbuild = require('esbuild');
+const path = require('path');
+const sass_plugin = require('esbuild-sass-plugin');
+const package = require('./package.json');
+const template_compressor = require('./util/template-compressor-esbuild'); 
+const fs = require('fs');
+const child_process = require('child_process');
+const postcss = require('postcss');
+const cssnano = require('cssnano');
+const license_plugin = require('./util/license-plugin-esbuild');
+
+
+// ---- command line -----------------------------------------------------------
+
+/**
+ * versions. note that the module version (mjs) still needs worker files,
+ * but those should be compiled normally -- so we use the modern version,
+ * but we don't rebuild them. that means if you want to build and use the 
+ * module version you will need to build the modern version to get the workers.
+ */
+const version = {
+  modern: false,
+  module: false,
+};
+
+
+/** clean outdir, jic */
+let clean = false;
+
+/** prod: minify, generate license file (now default) */
+let production = true;
+
+/** watch and rebuild */
+let watch = false;
+
+/** write license file (usually only necessary for prod) */
+let license = false;
+
+/** write metafile (for dev) */
+let metafile = false;
+
+/** embed worker (for esm) */
+let embed_worker = false;
+
+for (let i = 0; i < process.argv.length; i++) {
+  if (process.argv[i] === '--dev') {
+    production = false;
+    // license = true; // implied
+  }
+  else if (process.argv[i] === '--license') {
+    license = true;
+  }
+  else if (process.argv[i] === '--watch') {
+    watch = true;
+  }
+  else if (process.argv[i] === '--clean') {
+    clean = true;
+  }
+  else if (process.argv[i] === '--embed-worker') {
+    embed_worker = true;
+  }
+  else if (process.argv[i] === '--modern') {
+    version.modern = true;
+  }
+  else if (process.argv[i] === '--module') {
+    version.module = true;
+  }
+  else if (process.argv[i] === '--metafile') {
+    metafile = true;
+  }
+  else if (/^-/.test(process.argv[i])){
+    console.warn('Unrecognized option: ' + process.argv[i]);
+  }
+}
+
+if (production) {
+  license = true; // implied
+}
+
+const version_str = production ? 'production' : 'dev';
+
+// default to modern if nothing else is set
+if (!version.modern && !version.module) {
+  version.modern = true;
+}
+
+// can only watch one at a time (why?)
+if (watch) {
+  let count = 0;
+  if (version.modern) { count++; } 
+  if (version.module) { count++; }  
+  if (count > 1) {
+    throw new Error('can only watch one at a time');
+  }
+}
+
+// ---- setup/data -------------------------------------------------------------
+
+/**
+ * banner will be prepended to any and all output files
+ */
+const banner = 
+  `/*! TREB v${package.version}. Copyright 2018-${new Date().getFullYear()} trebco, llc. All rights reserved. LGPL: https://treb.app/license */` ;
+
+/**
+ * entry points for module build, keyed by output file name
+ */
+ const module_entry = {
+  [package['build-entry-points']['main']]: './treb-embed/src/index-module.ts',
+};
+
+/**
+ * entry points for regular build, keyed by output file name
+ */
+const modern_entry = {
+  [package['build-entry-points']['main']]: './treb-embed/src/index-modern.ts',
+  [package['build-entry-points']['export-worker'] + '-' + package.version]: './treb-export/src/export-worker/index-modern.ts',
+};
+
+/**
+ * list of replacements, will be set via DEFINE (very handy)
+ */
+const build_entry_replacements = {};
+
+for (const key of Object.keys(package['build-entry-points'])) {
+  const text = `process.env.BUILD_ENTRY_${key.replace(/\W/g, '_').toUpperCase()}`;
+  build_entry_replacements[text] = `"${package['build-entry-points'][key]}"`;
+}
+
+/**
+ * configure the sass plugin. because minifying post-plugin does not work for 
+ * some reason, we can use cssnano to do the same. only do that for prod.
+ */
+const sass_style = sass_plugin.sassPlugin(production ? {
+  type: 'style',
+  async transform(source) {
+    const {css} = await postcss([cssnano]).process(source, { from: undefined });
+    return css;
+  }
+} : {
+  type: 'style',
+});
+
+const sass_default = sass_plugin.sassPlugin();
+
+/** outdir */
+const outdir_parent = 'build';
+let outdir = '';
+
+// ---- 
+
+const LoadPlugin = (options) => {
+
+  return {
+    name: 'load-plugin',
+    setup(build) {
+      build.onLoad({ filter: /\.ts$/ }, async (args) => {
+
+        let text = await fs.promises.readFile(args.path, 'utf8')
+        let contents = template_compressor.transform(options, text);
+
+        return {
+          contents,
+          loader: 'ts',
+        };
+
+      })
+    },
+  };
+
+};
+
+// ---- 
+
+const GenerateConfig = (version) => {
+
+  let worker_text = '';
+  if (version === 'module' && embed_worker) {
+    try {
+      worker_text = fs.readFileSync(`build/current/treb-export-worker-${package.version}.js`, {encoding: 'utf-8'});
+    }
+    catch (err) {
+      console.error('\n** embedding worker failed. make sure the worker for this version exists before building module.\n');
+      throw err;
+    }
+  }
+
+  const config = {
+
+    metafile: metafile||license, // only if necessary
+    watch: watch ? {
+      onRebuild(error, result) {
+        if (error) console.error('watch build failed:', error)
+        else console.log('watch build succeeded:', result)
+      },
+    } : undefined,
+    minify: !!production,
+    banner: {
+      js: banner, 
+      css: banner,
+    },  
+    define: {
+      'process.env.WORKER_TEXT': worker_text ? JSON.stringify(worker_text) :`""`,
+      'process.env.NODE_ENV': `"${version_str}"`,
+      'process.env.BUILD_VERSION': `"${package.version}"`,
+      'process.env.BUILD_NAME': `"${package.name}"`,
+      ...build_entry_replacements,
+    },
+    bundle: true,
+    tsconfig: './treb-embed/modern.tsconfig.json',
+    plugins: [
+      LoadPlugin({
+        tags: [
+          { tag: 'tmpl', 
+            trim_lines: true, 
+            remove_html_comments: true,
+            icons: {
+              tag: 'icon',
+              dir: path.resolve(__dirname, 'treb-embed', 'icons', '4'),
+            },
+          },
+          { tag: 'composite', trim_lines: true, remove_tag: true, },
+          { tag: 'css', remove_whitespace: true, remove_tag: true, },
+        ],
+        version,
+      }),
+    ],
+    outdir : version === 'module' ? path.join(outdir, 'esm') : outdir,
+  };
+
+  switch (version) {
+    case 'modern':
+      config.entryPoints = modern_entry;
+      config.plugins.push(sass_style);
+      break;
+
+    case 'module':
+      config.entryPoints = module_entry;
+      config.format = 'esm';
+      config.outExtension = { '.js': '.mjs' };
+      config.plugins.push(sass_default);
+      break;
+
+  }
+  
+
+  return config;
+
+};
+
+// ---- run builder ------------------------------------------------------------
+
+const Run = async () => {
+
+  // writing to "current", and we will copy to versioned dir.
+  
+  outdir = path.join(outdir_parent, 'current');
+  await fs.promises.mkdir(outdir, { recursive: true });
+
+  // FIXME: clean should -r ?
+
+  if (clean) {
+    await new Promise((resolve) => {
+      child_process.exec(`rm -r ${path.join(outdir, '*')}`, () => resolve());
+    });
+  }
+
+  // modern version includes all support files
+
+  if (version.modern) {
+    console.info(`building modern (${version_str})...`);
+    const result = await esbuild.build(GenerateConfig('modern'));
+    if (result.metafile) {
+      if (metafile) {
+        await fs.promises.writeFile(
+          path.join(outdir, 'metafile.json'), 
+          JSON.stringify(result.metafile, undefined, 2), { encoding: 'utf8' }); 
+      }
+      if (license) {
+        const licenses = await license_plugin.GenerateLicenseFile(result.metafile);
+        await fs.promises.writeFile(path.join(outdir, '3d_party.txt'), licenses, { encoding: 'utf8' });
+      }
+    }
+  }
+
+  // module must be after modern, if we are embedding worker
+
+  if (version.module) {
+    console.info(`building module (${version_str})...`);
+    await esbuild.build(GenerateConfig('module'));
+  }
+
+  const versioned_dir = path.join(outdir_parent, package.version);
+  await fs.promises.mkdir(versioned_dir, { recursive: true });
+
+  await new Promise((resolve) => {
+    child_process.exec(`cp -r ${path.join(outdir, '*')} ${versioned_dir}`, () => resolve());
+  });
+
+};
+
+Run();
+

package/package.json

@@ -1,14 +1,49 @@
-{
-  "name": "@trebco/treb",
-  "version": "23.6.5",
-  "license": "LGPL-3.0-or-later",
-  "homepage": "https://treb.app",
-  "main": "treb-bundle.mjs",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/trebco/treb.git"
-  },
-  "type": "module",
-  "types": "treb.d.ts",
-  "stylesheet": "treb-bundle.css"
-}
+{
+  "name": "@trebco/treb",
+  "version": "25.0.0-rc2",
+  "license": "LGPL-3.0-or-later",
+  "homepage": "https://treb.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trebco/treb.git"
+  },
+  "main": "build/treb-spreadsheet.mjs",
+  "types": "build/treb.d.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/html-minifier": "^4.0.2",
+    "@types/node": "^18.15.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.4",
+    "@typescript-eslint/parser": "^5.30.4",
+    "archiver": "^5.3.0",
+    "cssnano": "^5.1.5",
+    "esbuild": "^0.17.11",
+    "eslint": "^8.19.0",
+    "fast-xml-parser": "^4.0.7",
+    "html-minifier": "^4.0.0",
+    "jszip": "^3.6.0",
+    "sass": "^1.53.0",
+    "treb-base-types": "file:treb-base-types",
+    "treb-calculator": "file:treb-calculator",
+    "treb-charts": "file:treb-charts",
+    "treb-format": "file:treb-format",
+    "treb-grid": "file:treb-grid",
+    "treb-parser": "file:treb-parser",
+    "treb-utils": "file:treb-utils",
+    "ts-node-dev": "^2.0.0",
+    "tslib": "^2.2.0",
+    "typescript": "^4.6.4"
+  },
+  "scripts": {
+    "build": "node esbuild-custom-element.mjs",
+    "dev": "node esbuild-custom-element.mjs --dev",
+    "clean": "rm -fr build dist declaration",
+    "watch": "node --watch esbuild-custom-element.mjs --watch --dev",
+    "tsc": "tsc -b treb-embed/modern.tsconfig.json",
+    "rebuild-tsc": "tsc -b --force treb-embed/modern.tsconfig.json",
+    "watch-tsc": "tsc -b treb-embed/modern.tsconfig.json -w",
+    "watch-api": "ts-node-dev --respawn api-generator/api-generator.ts --config api-config.json",
+    "generate-api": "ts-node-dev api-generator/api-generator.ts --config api-config.json",
+    "release": "npm run rebuild-tsc && npm run build && npm run generate-api"
+  }
+}

package/treb-base-types/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "treb-base-types",
+  "version": "16.0.0",
+  "main": "src/index.ts"
+}