@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-embed/src/custom-element/treb-global.ts

@@ -0,0 +1,44 @@
+
+import { SpreadsheetConstructor } from './spreadsheet-constructor';
+import type { EmbeddedSpreadsheetOptions } from '../options';
+import type { EmbeddedSpreadsheet } from '../embedded-spreadsheet';
+
+/**
+ * API class for creating spreadsheets. this is intended as a singleton,
+ * we will export an instance of the class.
+ */
+export class TREBGlobal {
+
+  /** 
+   * build version 
+   * 
+   * @privateRemarks
+   * 
+   * we know this string won't be undefined at run time, but ts doesn't know
+   * because we're using process.env as a placeholder. so we add the default
+   * empty string to force type generation as a string, otherwise it would 
+   * be string|undefined.
+   * 
+   * esbuild (or any other compiler) should remove the default value after 
+   * building so it won't cost us anything.
+   */
+  public version = process.env.BUILD_VERSION || '';
+
+  /** 
+   * create a spreadsheet instance
+   */
+  public CreateSpreadsheet(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet {
+    const container = options.container;
+    const instance = new SpreadsheetConstructor(container);
+    instance.AttachElement(options);
+    if (!instance.sheet) {
+      throw new Error('construction failed');
+    }
+    return instance.sheet;
+  }
+
+}
+
+/** single instance of factory class */
+export const TREB = new TREBGlobal();
+

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

@@ -0,0 +1,52 @@
+
+import { SpreadsheetConstructor } from './spreadsheet-constructor';
+import type { EmbeddedSpreadsheet } from '../embedded-spreadsheet';
+
+// this is conditional so we can use it in front-end bundlers
+// that build server-side. on the server side, HTMLElement and 
+// customElements may not be defined. we could shim them... but
+// that doesn't seem like a good idea.
+//
+// the primary drawback of this approach is that we can't export
+// the type, although we could do that manually.
+
+if (typeof HTMLElement !== 'undefined') {
+
+  /**
+   * this is the custom element. we have a two-class structure because
+   * we want to support (1) custom elements, (2) the API method, and 
+   * (3) headless instances. 
+   */
+  class TREBElement extends HTMLElement {
+
+    /** access the embedded spreadshet object via the element */
+    public get sheet(): EmbeddedSpreadsheet|undefined {
+      return this.instance.sheet;
+    }
+
+    /** 
+     * instance of the constructor class 
+     */
+    protected instance: SpreadsheetConstructor;
+
+    constructor() {
+      super();
+      this.instance = new SpreadsheetConstructor(this);
+    }
+
+    public connectedCallback() {
+      this.instance.AttachElement();
+    }
+
+  }
+
+  if (typeof customElements !== 'undefined') {
+    if (customElements.get('treb-spreadsheet')) {
+      console.info(`custom element treb-spreadsheet is already defined.`);
+    }
+    else {
+      customElements.define('treb-spreadsheet', TREBElement);
+    }
+  }
+
+}