@trebco/treb 25.0.1 → 25.2.0

package/{build → dist}/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v25.0. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v25.2. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map

package/esbuild-custom-element.mjs

@@ -22,6 +22,8 @@ const html_minifier_options = {
  * @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
+ * @property {boolean} xlsx_support - import/export xlsx files
+ * @property {string} output_filename - generated filename. we enforce the directory.
  */
 
 /** 
@@ -35,6 +37,8 @@ const options = {
   watch: false,
   minify: true, 
   verbose: false,
+  xlsx_support: true,
+  output_filename: 'treb-spreadsheet.mjs',
 };
 
 /**
@@ -58,7 +62,7 @@ const NotifyPlugin = (label) => {
           
           const keys = Object.keys(result.metafile?.outputs||{});
           const bytes = keys.length ? result.metafile?.outputs[keys[0]]?.bytes : 0;
-          const size = bytes ? `; build size: ${FormatSize(bytes)}` : '';
+          const size = bytes ? `; build size: ${FormatSize(bytes, 2)}` : '';
 
           console.info(`${label ? `${label} ` : ''}build complete @ ${new Date().toLocaleTimeString()}${size}`);
           // console.info(result.metafile);
@@ -88,7 +92,7 @@ const FormatSize = (size, precision = 1) => {
     }
   }
 
-  return `${size.toFixed(2)} ${units[index]}`;
+  return `${size.toFixed(precision)} ${units[index]}`;
 
 };
 
@@ -304,6 +308,12 @@ for (let i = 0; i < process.argv.length; i++) {
   if (process.argv[i] === '--verbose') {
     options.verbose = true;
   }
+  if (process.argv[i] === '--no-xlsx') {
+    options.xlsx_support = false;
+  }
+  if (process.argv[i] === '--output-filename') {
+    options.output_filename = process.argv[++i];
+  }
 }
 
 /** @type esbuild.BuildOptions */
@@ -315,12 +325,13 @@ const build_options = {
     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',
+  outfile: 'dist/' + options.output_filename,
   outExtension: { '.js': '.mjs' },
   minify: options.minify,
   metafile: true,
   format: 'esm',
   define: {
+    'process.env.XLSX_SUPPORT': `${options.xlsx_support}`,
     'process.env.NODE_ENV': `"${options.version}"`,
     'process.env.BUILD_VERSION': `"${pkg.version}"`,
     'process.env.BUILD_NAME': `"${pkg.name}"`,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trebco/treb",
-  "version": "25.0.1",
+  "version": "25.2.0",
   "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",
+  "main": "dist/treb-spreadsheet.mjs",
+  "types": "dist/treb.d.ts",
   "type": "module",
   "devDependencies": {
     "@types/html-minifier": "^4.0.2",
@@ -36,6 +36,7 @@
   },
   "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",
     "clean": "rm -fr build dist declaration",
     "watch": "node --watch esbuild-custom-element.mjs --watch --dev",

package/treb-embed/markup/toolbar.html

@@ -6,8 +6,8 @@
       <div separator></div>
       <button data-command="import-file">Open file...</button>
       <button data-command="save-json">Save JSON</button>
-      <div separator></div>
-      <button data-command="export-xlsx">Export XLSX</button>
+      <div separator xlsx-support></div>
+      <button data-command="export-xlsx" xlsx-support>Export XLSX</button>
     </div>
   </div>
 

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -262,6 +262,10 @@ export class SpreadsheetConstructor {
 
     }
 
+    if (!process.env.XLSX_SUPPORT) {
+      options.export = false; // remove export button from sidebar
+    }
+
     // set a local variable so we don't have to keep testing the member
 
     const sheet = new EmbeddedSpreadsheet(options);
@@ -806,6 +810,9 @@ export class SpreadsheetConstructor {
     if (!sheet.options.toolbar_recalculate_button) {
       remove.push(toolbar.querySelector('[recalculate-button]'));
     }
+    if (!process.env.XLSX_SUPPORT) {
+      remove.push(...Array.from(toolbar.querySelectorAll('[xlsx-support]')));
+    }
 
     for (const element of remove) {
       if (element) {

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

@@ -79,6 +79,7 @@ import type { SetRangeOptions } from 'treb-grid';
 // ---
 
 import export_worker_script from 'worker:../../treb-export/src/export-worker/index-modern.ts';
+const crocus = 100;
 
 // ---
 
@@ -2241,6 +2242,12 @@ export class EmbeddedSpreadsheet {
    */
   public async ExportBlob(): Promise<Blob> {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      throw new Error('this build does not include xlsx support.');
+    }
+
     if (!this.export_worker) {
       this.export_worker = await this.LoadWorker('export');
     }
@@ -2338,6 +2345,12 @@ export class EmbeddedSpreadsheet {
    */
   public Export(): void {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      return;
+    }
+
     // API v1 OK
 
     // it might be nice to merge the workers, but since export is (presumably)
@@ -3896,6 +3909,12 @@ export class EmbeddedSpreadsheet {
    */
    protected async ImportXLSX(data: string, source: LoadSource): Promise<Blob | void> {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      return;
+    }
+
     if (this.parent_view) {
       return this.parent_view.ImportXLSX(data, source);
     }
@@ -4354,7 +4373,9 @@ export class EmbeddedSpreadsheet {
             this.dialog?.ShowDialog({
               title: 'Error reading file',
               close_box: true,
-              message: 'Please make sure your file is a valid XLSX, CSV or TREB file.',
+              message: process.env.XLSX_SUPPORT ? 
+                'Please make sure your file is a valid XLSX, CSV or TREB file.' :
+                'Please make sure your file is a valid CSV or TREB file.' ,
               type: DialogType.error,
               timeout: 3000,
             });
@@ -4372,7 +4393,7 @@ export class EmbeddedSpreadsheet {
             if (/\.csv$/i.test(file.name)) {
               this.LoadCSV(reader.result as string, source);
             }
-            else if (/\.xls[xm]$/i.test(file.name)) {
+            else if (process.env.XLSX_SUPPORT &&  /\.xls[xm]$/i.test(file.name)) {
               let contents: string;
 
               if (typeof reader.result === 'string') {
@@ -5224,35 +5245,35 @@ export class EmbeddedSpreadsheet {
    */
   protected async LoadWorker(name: string): Promise<Worker> {
 
-    // for esm we now support embedding the worker as a blob
-    // (as text, actually); we can construct it from the text 
-    // as necessary.
+    // 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 (export_worker_script) {
-      try {
-        const worker = new Worker(
-            URL.createObjectURL(new Blob([export_worker_script], { type: 'application/javascript' })));
-        return worker;
-      }
-      catch (err) {
-        console.info('embedded worker failed');
-        console.error(err);
+    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], { 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.');
     }
 
+    throw new Error('creating worker failed');
+
     /*
-    if (EmbeddedSpreadsheet.export_worker_text) {
-      try {
-        const worker = new Worker(
-            URL.createObjectURL(new Blob([EmbeddedSpreadsheet.export_worker_text], { type: 'application/javascript' })));
-        return worker;
-      }
-      catch (err) {
-        console.info('embedded worker failed');
-        console.error(err);
-      }
-    }
-    */
 
     if (!EmbeddedSpreadsheet.treb_base_path) {
       console.warn('worker path is not set. it you are loading TREB in an ESM module, please either '
@@ -5304,6 +5325,7 @@ export class EmbeddedSpreadsheet {
     }
 
     return worker;
+    */
 
   }
 

package/treb-embed/style/dialog.scss

@@ -53,7 +53,9 @@
 
     line-height: 1.6em;
 
+    font-size: var(--treb-dialog-font-size, 16px);
     border: 1px solid var(--treb-dialog-border-color, var(--treb-ui-border-color, #999));
+    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .3);
 
     border-top-width: 3px;
     border-top-color: rgb(0, 157, 255);

package/treb-embed/style/layout.scss

@@ -276,8 +276,8 @@
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
         &::after {
-          mask-image: var(--treb-sidebar-icon-chevron-left);
-          -webkit-mask-image: var(--treb-sidebar-icon-chevron-left);
+          mask-image: var(--icon-chevron-left);
+          -webkit-mask-image: var(--icon-chevron-left);
         }
         background: var(--treb-toolbar-button-background, #fff);
     
@@ -303,8 +303,8 @@
       mask-repeat: no-repeat;
       -webkit-mask-repeat: no-repeat;
       transition: background-color 0.1s ease;
-      mask-image: var(--treb-mask-image);
-      -webkit-mask-image: var(--treb-mask-image);
+      mask-image: var(--icon);
+      -webkit-mask-image: var(--icon);
     }
   
     &:hover::after {
@@ -312,23 +312,23 @@
     }
 
     &[data-command=recalculate] {
-      --treb-mask-image: var(--treb-sidebar-icon-reset);
+      --icon: var(--icon-reset);
     }
 
     &[data-command=toggle-toolbar] {
-      --treb-mask-image: var(--treb-sidebar-icon-toolbar);
+      --icon: var(--icon-toolbar);
     }
 
     &[data-command=revert] {
-      --treb-mask-image: var(--treb-sidebar-icon-revert);
+      --icon: var(--icon-revert);
     }
 
     &[data-command=export-xlsx] {
-      --treb-mask-image: var(--treb-sidebar-icon-export);
+      --icon: var(--icon-export);
     }
 
     &[data-command=about] {
-      --treb-mask-image: var(--treb-sidebar-icon-about);
+      --icon: var(--icon-about);
     }
    
   }
@@ -358,8 +358,8 @@
     &::after {
       height: 12px;
       width: 12px;
-      mask-image: var(--treb-sidebar-icon-chevron-right);
-      -webkit-mask-image: var(--treb-sidebar-icon-chevron-right);
+      mask-image: var(--icon-chevron-right);
+      -webkit-mask-image: var(--icon-chevron-right);
     }
 
   }

package/treb-embed/style/toolbar.scss

@@ -258,47 +258,47 @@ $swatch-size: 18px;
 
     // ---------------------------------------------------------------------------
 
-    [data-icon=file-menu]{ --icon: var(--treb-icon-file-menu); }
+    [data-icon=file-menu]{ --icon: var(--icon-file-menu); }
     
-    [data-command=justify-left] { --icon: var(--treb-icon-text-align-left); }
-    [data-command=justify-right] { --icon: var(--treb-icon-text-align-right); }
-    [data-command=justify-center] { --icon: var(--treb-icon-text-align-center); }
-
-    [data-command=align-top] { --icon: var(--treb-icon-text-align-top); }
-    [data-command=align-middle] { --icon: var(--treb-icon-text-align-middle); }
-    [data-command=align-bottom] { --icon: var(--treb-icon-text-align-bottom); }
-    [data-command=merge-cells] { --icon: var(--treb-icon-merge-cells); }
-    [data-command=unmerge-cells] { --icon: var(--treb-icon-unmerge-cells); }
-
-    [data-command=fill-color] { --icon: var(--treb-icon-fill-color); }
-    [data-command=text-color] { --icon: var(--treb-icon-text-color); }
-
-    [data-command=lock-cells] { --icon: var(--treb-icon-lock); }
-    [data-command=wrap-text] { --icon: var(--treb-icon-wrap-text); }
-    [data-icon=comment] { --icon: var(--treb-icon-comment); }
-    [data-icon=table] { --icon: var(--treb-icon-table); }
+    [data-command=justify-left] { --icon: var(--icon-text-align-left); }
+    [data-command=justify-right] { --icon: var(--icon-text-align-right); }
+    [data-command=justify-center] { --icon: var(--icon-text-align-center); }
+
+    [data-command=align-top] { --icon: var(--icon-text-align-top); }
+    [data-command=align-middle] { --icon: var(--icon-text-align-middle); }
+    [data-command=align-bottom] { --icon: var(--icon-text-align-bottom); }
+    [data-command=merge-cells] { --icon: var(--icon-merge-cells); }
+    [data-command=unmerge-cells] { --icon: var(--icon-unmerge-cells); }
+
+    [data-command=fill-color] { --icon: var(--icon-fill-color); }
+    [data-command=text-color] { --icon: var(--icon-text-color); }
+
+    [data-command=lock-cells] { --icon: var(--icon-lock); }
+    [data-command=wrap-text] { --icon: var(--icon-wrap-text); }
+    [data-icon=comment] { --icon: var(--icon-comment); }
+    [data-icon=table] { --icon: var(--icon-table); }
     
-    [data-icon=layout] { --icon: var(--treb-icon-layout); }
-    [data-command=freeze-panes] { --icon: var(--treb-icon-freeze); }
+    [data-icon=layout] { --icon: var(--icon-layout); }
+    [data-command=freeze-panes] { --icon: var(--icon-freeze); }
     
-    [data-command=insert-column-chart] { --icon: var(--treb-icon-column-chart); }
-    [data-command=insert-donut-chart] { --icon: var(--treb-icon-donut-chart); }
-    [data-command=insert-bar-chart] { --icon: var(--treb-icon-bar-chart); }
-    [data-command=insert-line-chart] { --icon: var(--treb-icon-line-chart); }
-    [data-command=insert-image] { --icon: var(--treb-icon-image); }
-
-    [data-command=border-bottom] { --icon: var(--treb-icon-border-bottom); }
-    [data-command=border-left] { --icon: var(--treb-icon-border-left); }
-    [data-command=border-right] { --icon: var(--treb-icon-border-right); }
-    [data-command=border-top] { --icon: var(--treb-icon-border-top); }
-    [data-command=border-outside] { --icon: var(--treb-icon-border-outer); }
-    [data-command=border-all] { --icon: var(--treb-icon-border-all); }
-    [data-command=border-none] { --icon: var(--treb-icon-border-none); }
-    [data-command=border-double-bottom] { --icon: var(--treb-icon-border-double-bottom); }
-    [data-icon=palette] { --icon: var(--treb-icon-palette); } 
+    [data-command=insert-column-chart] { --icon: var(--icon-column-chart); }
+    [data-command=insert-donut-chart] { --icon: var(--icon-donut-chart); }
+    [data-command=insert-bar-chart] { --icon: var(--icon-bar-chart); }
+    [data-command=insert-line-chart] { --icon: var(--icon-line-chart); }
+    [data-command=insert-image] { --icon: var(--icon-image); }
+
+    [data-command=border-bottom] { --icon: var(--icon-border-bottom); }
+    [data-command=border-left] { --icon: var(--icon-border-left); }
+    [data-command=border-right] { --icon: var(--icon-border-right); }
+    [data-command=border-top] { --icon: var(--icon-border-top); }
+    [data-command=border-outside] { --icon: var(--icon-border-outer); }
+    [data-command=border-all] { --icon: var(--icon-border-all); }
+    [data-command=border-none] { --icon: var(--icon-border-none); }
+    [data-command=border-double-bottom] { --icon: var(--icon-border-double-bottom); }
+    [data-icon=palette] { --icon: var(--icon-palette); } 
 
     [data-command=recalculate] { 
-      --icon: var(--treb-icon-recalculate); 
+      --icon: var(--icon-recalculate); 
       --icon-size: 20px 20px;
     } 
 
@@ -375,8 +375,8 @@ $swatch-size: 18px;
           -webkit-mask-position: center;
           mask-repeat: no-repeat;
           -webkit-mask-repeat: no-repeat;
-          mask-image: var(--treb-icon-x);
-          -webkit-mask-image: var(--treb-icon-x);
+          mask-image: var(--icon-x);
+          -webkit-mask-image: var(--icon-x);
           mask-size: 24px 24px;
           -webkit-mask-size: 24px 24px;
         }