@trebco/treb 30.2.10 → 30.3.2

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v30.2. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v30.3. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -1310,7 +1310,7 @@ export type Color = ThemeColor | HTMLColor | NullColor;
 export declare const ThemeColorIndex: (color: ThemeColor) => number;
 export declare const IsHTMLColor: (color?: Color) => color is HTMLColor;
 export declare const IsThemeColor: (color?: Color) => color is ThemeColor;
-export declare const IsDefinedColor: (color?: Color) => color is ThemeColor | HTMLColor;
+export declare const IsDefinedColor: (color?: Color) => color is (ThemeColor | HTMLColor);
 export type CellValue = undefined | string | number | boolean | Complex | DimensionedQuantity;
 
 /**

package/{esbuild-custom-element.mjs → esbuild-composite.mjs}

@@ -1,8 +1,10 @@
 // @ts-check
 
+/* global process */
+
 import * as esbuild from 'esbuild';
 
-import { SassPlugin, WorkerPlugin, NotifyPlugin, HTMLPlugin } from './esbuild-utils.mjs';
+import { SassPlugin, WorkerPlugin, NotifyPlugin, HTMLPlugin, RewriteIgnoredImports } from './esbuild-utils.mjs';
 import { promises as fs } from 'fs';
 
 import pkg from './package.json' with { type: 'json' }; 
@@ -30,7 +32,7 @@ const options = {
   minify: true, 
   verbose: false,
   xlsx_support: true,
-  output_filename: 'treb-spreadsheet.mjs',
+  output_filename: 'treb-spreadsheet',
 };
 
 //------------------------------------------------------------------------------
@@ -58,36 +60,19 @@ for (let i = 0; i < process.argv.length; i++) {
   }
 }
 
-/**
- * thanks to
- * https://github.com/evanw/esbuild/issues/3337#issuecomment-2085394950
- */
-function RewriteIgnoredImports() {
-  return {
-    name: 'RewriteIgnoredImports',
-    setup(build) {
-      build.onEnd(async (result) => {
-        if (result.outputFiles) {
-          for (const file of result.outputFiles) {
-            const { path, text } = file;
-            await fs.writeFile(path, text.replace(/esbuild-ignore-import:/, ''));
-          }
-        }
-      });
-    },
-  };
-}
 
 /** @type esbuild.BuildOptions */
 const build_options = {
   entryPoints: [
-    'treb-embed/src/index.ts',
+    { in: 'treb-embed/src/index.ts', out: options.output_filename },
+    { in: 'treb-embed/src/export-worker.ts', out: 'treb-export-worker' },
   ],
   banner: { 
     js: `/*! TREB v${pkg.version}. Copyright 2018-${new Date().getFullYear()} trebco, llc. All rights reserved. LGPL: https://treb.app/license */`
   },
   bundle: true,
-  outfile: 'dist/' + options.output_filename,
+  outdir: 'dist',
+  // outfile: 'dist/' + options.output_filename,
   outExtension: { '.js': '.mjs' },
   minify: options.minify,
   metafile: true,

package/esbuild-utils.mjs

@@ -1,9 +1,11 @@
 
 // @ts-check
 
+/* global console */
+
 import * as esbuild from 'esbuild';
 import { promises as fs } from 'fs';
-import { minify } from 'html-minifier';
+import { minify } from 'html-minifier-terser';
 import path from 'path';
 import * as sass from 'sass';
 import cssnano from 'cssnano';
@@ -114,7 +116,7 @@ export const WorkerPlugin = (options) => ({
         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.
@@ -217,10 +219,14 @@ export const HTMLPlugin = (options) => ({
       }
 
       const text = await fs.readFile(args.path, 'utf8');
+
       return {
-        contents: options?.minify ? minify(text, html_minifier_options) : text,
+        contents: options?.minify ? await minify(text, html_minifier_options) : text,
         loader: 'text',
       };
+
+
+
     });
   },
 });
@@ -280,3 +286,24 @@ export const SassPlugin = (options) => ({
     });
   },
 });
+
+/**
+ * thanks to
+ * https://github.com/evanw/esbuild/issues/3337#issuecomment-2085394950
+ */
+export const RewriteIgnoredImports = () => {
+  return {
+    name: 'RewriteIgnoredImports',
+    setup(build) {
+      build.onEnd(async (result) => {
+        if (result.outputFiles) {
+          for (const file of result.outputFiles) {
+            const { path, text } = file;
+            await fs.writeFile(path, text.replace(/esbuild-ignore-import:/g, ''));
+          }
+        }
+      });
+    },
+  };
+};
+

package/eslint.config.js

@@ -23,7 +23,8 @@ export default tseslint.config(
 
       "@typescript-eslint/no-unused-vars": [
         "error", { 
-          "destructuredArrayIgnorePattern": "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
         }],
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "30.2.10",
+  "version": "30.3.2",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -12,15 +12,14 @@
   "type": "module",
   "devDependencies": {
     "@types/html-minifier": "^4.0.2",
-    "@types/node": "^20.8.5",
+    "@types/node": "^22.1.0",
     "@types/uzip": "^0.20201231.0",
-    "archiver": "^6.0.1",
     "base64-js": "^1.5.1",
-    "cssnano": "^6.0.0",
-    "esbuild": "^0.20.1",
-    "eslint": "^8.56.0",
+    "cssnano": "^7.0.4",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.8.0",
     "fast-xml-parser": "^4.0.7",
-    "html-minifier": "^4.0.0",
+    "html-minifier-terser": "^7.2.0",
     "sass": "^1.69.3",
     "treb-base-types": "file:treb-base-types",
     "treb-calculator": "file:treb-calculator",
@@ -34,21 +33,20 @@
     "ts-node-dev": "^2.0.0",
     "tslib": "^2.2.0",
     "typescript": "^5.3.3",
-    "typescript-eslint": "^7.0.2",
+    "typescript-eslint": "^8.0.0",
     "uzip": "^0.20201231.0"
   },
   "scripts": {
-    "build": "node esbuild-custom-element.mjs",
-    "build-light": "node esbuild-custom-element.mjs --no-xlsx --output-filename treb-spreadsheet-light.mjs",
-    "dev": "node esbuild-custom-element.mjs --dev",
+    "build": "node esbuild-composite.mjs",
+    "dev": "node esbuild-composite.mjs --dev",
     "clean": "rm -fr build dist declaration",
-    "watch": "node --watch esbuild-custom-element.mjs --watch --dev",
-    "watch-production": "node --watch esbuild-custom-element.mjs --watch",
+    "watch": "node --watch esbuild-composite.mjs --watch --dev",
+    "watch-production": "node --watch esbuild-composite.mjs --watch",
     "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 && npm run build-light"
+    "release": "npm run rebuild-tsc && npm run build && npm run generate-api"
   }
 }

package/treb-calculator/src/expression-calculator.ts

@@ -782,7 +782,36 @@ export class ExpressionCalculator {
     // unless the expression changes, which will discard the generated
     // function (along with the expression itself).
 
-    const fn = Primitives.MapOperator(x.operator);
+    // pulling out concat so we can bind the model for language values
+
+    const fn = x.operator === '&' ? (a: UnionValue, b: UnionValue): UnionValue => {
+
+      // this works, but it's not volatile so it doesn't update on 
+      // a language change; maybe language change should force a recalc? (...)
+
+      if (a.type === ValueType.error) { return a; }
+      if (b.type === ValueType.error) { return b; }
+    
+      const strings = [a, b].map(x => {
+        if (x.type === ValueType.undefined) { return ''; }
+        if (x.type === ValueType.boolean) {
+          if (x.value) {
+            return this.data_model.language_model?.boolean_true || 'TRUE';
+          }
+          else {
+            return this.data_model.language_model?.boolean_false || 'FALSE';
+          }
+        }
+        return x.value;
+      });
+
+      return {
+        type: ValueType.string, 
+        value: `${strings[0]}${strings[1]}`,
+      };
+    
+
+    } : Primitives.MapOperator(x.operator);
 
     if (!fn) {
 

package/treb-calculator/src/functions/text-functions.ts

@@ -301,7 +301,7 @@ export const TextFunctionLibrary: FunctionMap = {
     },
   },
 
-  /** canonical should be CONCAT; concatenate can be an alias */
+ /** canonical should be CONCAT; concatenate can be an alias */
  Concat: {
   description: 'Pastes strings together',
   fn: (...args: CellValue[]): UnionValue => {

package/treb-calculator/src/primitives.ts

@@ -266,6 +266,7 @@ export const Modulo = (a: UnionValue, b: UnionValue): UnionValue => {
   return { value: x % y, type: ValueType.number };
 };
 
+/*
 export const Concatenate = (a: UnionValue, b: UnionValue): UnionValue => {
   if (a.type === ValueType.error) { return a; }
   if (b.type === ValueType.error) { return b; }
@@ -276,6 +277,7 @@ export const Concatenate = (a: UnionValue, b: UnionValue): UnionValue => {
   };
 
 };
+*/
 
 export const Equals = (a: UnionValue, b: UnionValue): UnionValue => {
   if (a.type === ValueType.error) { return a; }
@@ -430,7 +432,7 @@ export const UseComplex = () => {
 
 export const MapOperator = (operator: string) => {
   switch(operator) {
-    case '&': return Concatenate;
+    // case '&': return Concatenate;
     case '+': return Add;
     case '-': return Subtract;
     case '*': return Multiply;

package/treb-embed/modern.tsconfig.json

@@ -12,7 +12,6 @@
     "../treb-parser/**/*.ts",
     "../treb-calculator/**/*.ts",
     "../treb-base-types/**/*.ts",
-    "../treb-export/**/*.ts",
     "src/content-types.d.ts"
   ],
   "exclude": [

package/treb-embed/src/embedded-spreadsheet.ts

@@ -107,13 +107,6 @@ import type { StateLeafVertex } from 'treb-calculator';
  */
 import './content-types.d.ts';
 
-/**
- * import the worker as a script file. tsc will read this on typecheck but 
- * that's actually to the good; when we build with esbuild we will inline
- * the script so we can run it as a worker.
- */
-import * as export_worker_script from 'worker:../../treb-export/src/export-worker/index.worker';
-
 // --- types -------------------------------------------------------------------
 
 /**
@@ -803,7 +796,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
               const obj = JSON.parse(json);
               grid_options.initial_scale = obj.scale || 1;
             }
-            catch (e) {
+            catch {
               console.warn('parsing persisted scale failed');
             }
           }
@@ -2006,10 +1999,17 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     }
 
     language = language.toLowerCase();
-
     let mod: { LanguageMap: LanguageModel } | undefined;
 
-    if (language && language !== 'en') {
+    // FIXME: this should be generated and included, to allow for changes.
+    // for the time being hardcoding as a quick fix
+
+    const supported_languages = [
+      'es', 'fr', 'pt', 'nl', 'de',
+      'pl', 'sv', 'no', 'da', 'it',
+    ];
+
+    if (language && supported_languages.includes(language)) {
 
       // FIXME: even though we now have a dynamic import
       // working, we still probably want to use a filter
@@ -6155,39 +6155,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
-   * load worker. optionally uses an ambient path as prefix; intended for
-   * loading in different directories (or different hosts?)
+   * worker now uses a dynamic import with a module built separately.
+   * see `export-worker.ts` (in this directory) for more detail.
    */
   protected async LoadWorker(): Promise<Worker> {
-
-    // this is inlined to ensure the code will be tree-shaken properly
-    // (we're trying to force it to remove the imported worker script)
-
-    if (process.env.XLSX_SUPPORT) {
-    
-      // for esm we now support embedding the worker as a blob
-      // (as text, actually); we can construct it from the text 
-      // as necessary.
-
-      if (export_worker_script) {
-        try {
-          const worker = new Worker(
-              URL.createObjectURL(new Blob([(export_worker_script as {default: string}).default], { type: 'application/javascript' })));
-          return worker;
-        }
-        catch (err) {
-          console.info('embedded worker failed');
-          console.error(err);
-        }
-      }
-
-    } 
-    else {
-      console.warn('this build does not include xlsx support.');
+    try {
+      const worker = `export`;
+      const mod = await import(`esbuild-ignore-import:./treb-${worker}-worker.mjs`) as {
+        CreateWorker: () => Promise<Worker>;
+      };
+      return await mod.CreateWorker();
+    }
+    catch (err) {
+      console.error(err);
+      throw(err);
     }
-
-    throw new Error('creating worker failed');
-
   }
 
   /**

package/treb-embed/src/export-worker.ts

@@ -0,0 +1,44 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2024 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+// this is a new entrypoint for the worker, as a module. while we can't 
+// just create a worker script, if we create this as a module and embed
+// the worker script we can still get the benefits of dynamic loading.
+
+// why can't we create a worker script? it's OK for direct embedding but
+// breaks when embedding in a bundler (vite is OK, but webpack is not).
+// but all bundlers seem ok with local modules (knock on wood).
+
+/**
+ * import the worker as text so it will be embedded in this module
+ */
+import * as export_worker_script from 'worker:../../treb-export/src/index.worker';
+
+/**
+ * create the worker by loading the embedded text
+ * @returns 
+ */
+export const CreateWorker = async (): Promise<Worker> => {
+  const worker = new Worker(
+    URL.createObjectURL(new Blob([(export_worker_script as {default: string}).default], { type: 'application/javascript' })));
+  return worker;
+};
+

package/treb-embed/style/autocomplete.scss

@@ -33,7 +33,6 @@
 
 
     box-sizing: border-box;
-    * { box-sizing: border-box; }
 
     position: fixed;
     top: -1000px;
@@ -46,6 +45,8 @@
     overflow-y: auto;
     z-index: $z-index-autocomplete;
 
+    * { box-sizing: border-box; }
+
     ul {
 
       font-size: inherit;
@@ -73,23 +74,6 @@
         }
       }
 
-      /*
-      here we unwind the selected style if there's a hover,
-      unless you're hovering over the selection. and so on.
-      * /
-
-      &:hover li a.selected {
-        background: inherit;
-        color: inherit;
-
-        &:hover {
-          background: #339966;
-          color: #fff;
-        }
-
-      }
-      */
-
     }
   }
 

package/treb-embed/style/dialog.scss

@@ -98,6 +98,7 @@
       padding: 0;
       background: transparent;
       border: 0;
+      padding: 4px;
 
       &>svg {
 
@@ -112,7 +113,6 @@
         }
       }
 
-      padding: 4px;
 
     }
 

package/treb-embed/style/dropdown-select.scss

@@ -56,6 +56,11 @@
     color: var(--treb-dropdown-color, inherit);
     border: 1px solid var(--treb-dropdown-border-color, unset);
 
+    text-align: left;
+    max-height: 10em;
+    overflow-y: auto;
+    outline: none;
+
     & div {
       padding: 2px;
       cursor: default;
@@ -66,12 +71,6 @@
       color: var(--treb-dropdown-selected-color, #fff);
     }
 
-    text-align: left;
-
-    max-height: 10em;
-    overflow-y: auto;
-    outline: none;
-
   }
 
   .treb-dropdown-caret.active {

package/treb-embed/style/formula-bar.scss

@@ -30,15 +30,17 @@
       text-align: left;
       gap: .5em;
 
-      &[hidden] {
-        display: none;
-      }
+
 
       padding: 0px 2px 12px 2px; // FIXME: use ems?
 
       max-width: 100%;
       overflow-x: hidden;
 
+      &[hidden] {
+        display: none;
+      }
+
       /** label for selection address */
       .treb-address-label {
 

package/treb-embed/style/grid.scss

@@ -207,23 +207,25 @@
       /** specific layout for column header cover */
       &.column-header-cover {
 
+        z-index: $z-index-header-tile-cover;
+
         /** style is attached when mousing over a column boundary */
         &.resize {
           cursor: col-resize;
         }
 
-        z-index: $z-index-header-tile-cover;
       }
 
       /** specific layout for row header cover */
       &.row-header-cover {
 
+        z-index: $z-index-header-tile-cover;
+
         /** style is attached when mousing over a row boundary */
         &.resize {
           cursor: row-resize;
         }
 
-        z-index: $z-index-header-tile-cover;
       }
 
     }
@@ -234,6 +236,9 @@
       top: 0px;
       left: 0px;
 
+      z-index: $z-index-annotations;
+      pointer-events: none;
+
       .annotation {
         position: absolute;
         overflow: hidden;
@@ -297,8 +302,6 @@
         cursor: move;
       }
 
-      z-index: $z-index-annotations;
-      pointer-events: none;
     }
 
     /** selection stacks over the grid but under the cover */

package/treb-embed/style/layout.scss

@@ -68,6 +68,28 @@
 
   line-height: normal;
 
+  // ---------------------------------------------------------------------------
+
+  color-scheme: var(--treb-color-scheme, unset);
+
+  font-family: $font-stack;
+
+  font-style: normal;
+  font-weight: normal;
+  color: inherit;
+  font-size: 14px; // ?
+
+  height: 100%;
+  width: 100%;
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
+  // gap: 1em;
+
+  // ---------------------------------------------------------------------------
+
   div, button, input, ul, ol, li, a, textarea, svg {
 
     // maybe this is being too aggressive. we could be a little 
@@ -110,23 +132,6 @@
 
   // ---------------------------------------------------------------------------
 
-  color-scheme: var(--treb-color-scheme, unset);
-
-  font-family: $font-stack;
-
-  font-style: normal;
-  font-weight: normal;
-  color: inherit;
-  font-size: 14px; // ?
-
-  height: 100%;
-  width: 100%;
-
-  position: relative;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  grid-template-columns: minmax(0, 1fr) auto;
-  // gap: 1em;
 
   &[animate] {
     .treb-layout-header {
@@ -354,11 +359,11 @@
         right: 0px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
+        background: var(--treb-toolbar-button-background, #fff);
         &::after {
           mask-image: var(--icon-chevron-left);
           -webkit-mask-image: var(--icon-chevron-left);
         }
-        background: var(--treb-toolbar-button-background, #fff);
     
     }
   }

package/treb-embed/style/tab-bar.scss

@@ -29,6 +29,8 @@
 
     grid-area: 3/1/4/2;
 
+    align-items: center;
+
     .treb-spreadsheet-tab-container {
       align-self: flex-start;
       overflow: hidden;
@@ -59,8 +61,6 @@
       display: none;
     }
 
-    align-items: center;
-
     & .treb-spreadsheet-tabs>li {
       display: inline-block;
       position: relative;