tungsten 0.2.1 → 0.2.3

package/dist/Components.js

@@ -0,0 +1,923 @@
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+//import { Store } from './Store/Store.js'
+//import { createStoreProxy } from './Store/createStoreProxy.js'
+import { styleContent } from "./style/styleContent.js";
+import { TungstenError } from "./TungstenError.js";
+//import { integrateUpdate } from './update/integrateUpdate.js'
+import { integrateElementUpdateVdom } from "./update/integrateUpdateVdom.js";
+import { objectTypesToCopy } from "./objectTypesToCopy.js";
+import { isClient } from "./isClient.js";
+import { isServer } from "./isServer.js";
+//import { warn } from './output.js'
+function debug(...texts) {
+  //console.log(...texts)
+  //console.log(getStackTrace().split('\n')[2])
+}
+function elementDelete() {
+  //console.log('basic delete code')
+  //console.log('this', this)
+  if (typeof this.componentWillUnmount === 'function') this.componentWillUnmount();
+  if (typeof this._deleting === 'function') this._deleting();
+  //console.log('this.__disposables', this.__disposables)
+  this.__disposables?.forEach(d => {
+    //console.log(' try to dispose', d)
+    d[Symbol.dispose]();
+  });
+  //this.__dead = true
+}
+let __testing_tci = 0;
+//export type TungstenComponentType = 'redirect'
+var _reactives = /*#__PURE__*/new WeakMap();
+var _reactivityChart = /*#__PURE__*/new WeakMap();
+export class TungstenBaseComponent {
+  constructor(pkg) {
+    _defineProperty(this, "__testing_tci", __testing_tci++);
+    //__tungstenComponentType?: TungstenComponentType
+    _defineProperty(this, "__instance", void 0);
+    _defineProperty(this, "__domRegion", void 0);
+    _defineProperty(this, "parentComponent", void 0);
+    _defineProperty(this, "childComponents", []);
+    _defineProperty(this, "props", void 0);
+    _defineProperty(this, "routeParams", void 0);
+    _defineProperty(this, "routeData", void 0);
+    _defineProperty(this, "storeData", void 0);
+    // serverInit
+    _defineProperty(this, "title", void 0);
+    //styles?: TaggedTemplateExpression
+    _defineProperty(this, "style", void 0);
+    _defineProperty(this, "__queuedUpdateHandle", void 0);
+    _defineProperty(this, "__initialized", false);
+    _classPrivateFieldInitSpec(this, _reactives, {});
+    _classPrivateFieldInitSpec(this, _reactivityChart, {});
+    _defineProperty(this, "__currentContent", $contentNull);
+    // is this a problem, because undefined could be a result of content func?
+    _defineProperty(this, "__dead", false);
+    // lifecycle hooks
+    // render?
+    // content?
+    _defineProperty(this, "content", void 0);
+    _defineProperty(this, "render", void 0);
+    //abstract __newUpdateCompleted: (props: Props, state: any) => void | (() => void)
+    _defineProperty(this, "componentDidMount", void 0);
+    _defineProperty(this, "_mounted", void 0);
+    _defineProperty(this, "componentDidHydrate", void 0);
+    _defineProperty(this, "_hydrated", void 0);
+    _defineProperty(this, "componentWillUnmount", void 0);
+    _defineProperty(this, "_deleting", void 0);
+    _defineProperty(this, "componentDidUnmount", void 0);
+    _defineProperty(this, "_deleted", void 0);
+    //shouldComponentUpdate?: (nextProps: unknown, nextState: unknown) => boolean
+    // disable this because static methods don't play nicely with generics 
+    // static getDerivedStateFromProps?: (props: Props, state: State) => void | ((props: Props) => any) | (() => any)
+    _defineProperty(this, "shouldStoreComponentUpdate", void 0);
+    _defineProperty(this, "__queueUpdate", () => {
+      //console.log('queue update')
+      if (this.__queuedUpdateHandle === undefined) {
+        this.__queuedUpdateHandle = setTimeout(() => {
+          this.__update();
+        }, 0);
+      }
+    });
+    _defineProperty(this, "triggerUpdate", () => {
+      //console.log('trigger update')
+      return this.__update();
+    });
+    _defineProperty(this, "reactive", code => {
+      // dummy func
+    });
+    // !!! needs checking
+    _defineProperty(this, "__didMount", () => {
+      if (typeof this.componentDidMount === 'function') this.componentDidMount();
+      if (typeof this._mounted === 'function') this._mounted();
+      this.__didRender();
+    });
+    // !!! needs checking
+    _defineProperty(this, "__didHydrate", () => {
+      this.__didMount();
+      if (typeof this.componentDidHydrate === 'function') this.componentDidHydrate();
+      if (typeof this._hydrated === 'function') this._hydrated();
+    });
+    // _preDelete = () => {
+    //     if (typeof this.componentDidHydrate === 'function') this.componentDidHydrate()
+    // }
+    _defineProperty(this, "__delete", elementDelete.bind(this));
+    // __delete = () => {
+    //     if (typeof this.componentWillUnmount === 'function') this.componentWillUnmount()
+    //     if (typeof this._deleting === 'function') this._deleting()
+    //     this.__disposables?.forEach( (d: Disposable) => d[Symbol.dispose]())
+    //     // deleting content is handled by the update code
+    // }
+    _defineProperty(this, "__deleted", () => {
+      //console.log(`marking ${this.constructor.name} TCI ${this.tci} as dead`)
+      this.__dead = true; // sanity checking, not essential
+      if (typeof this.componentDidUnmount === 'function') this.componentDidUnmount();
+      if (typeof this._deleted === 'function') this._deleted();
+    });
+    _defineProperty(this, "delayed", (func, delay = 0) => setTimeout(func, delay));
+    // eslint-disable-line @typescript-eslint/ban-types -- Function seems fine
+    _defineProperty(this, "pickProps", (...keys) => {
+      return objects.pick(this.props, ...keys);
+    });
+    // #timeouts: number[] = []
+    // #intervals: number[] = []
+    // addTimeout(func: Function, ms: number) {
+    //     const h = setTimeout(func, ms)
+    //     return h
+    // }
+    // addInterval(func: Function, ms: number) {
+    //     const h = setInterval(func, ms)
+    //     return h
+    // }
+    _defineProperty(this, "__disposables", void 0);
+    _defineProperty(this, "using", (d, callback) => {
+      //console.log('using d', d)
+      const ds = this.__disposables || (this.__disposables = new Set());
+      // let ds = this.__disposables
+      // if (!ds) this.__disposables = ds = new Set
+      // let ds = this.__disposables
+      // if (!ds) this.__disposables = ds = new Set
+      ds.add(d);
+      //console.log('disps', ds)
+      if (callback) callback(d);
+      //console.log('disps 2', this.__disposables)
+      //console.log('this', this)
+      return d;
+    });
+    const {
+      props,
+      routeParams,
+      routeData,
+      instance,
+      parentElement: parentComponent
+    } = pkg;
+    this.__instance = instance;
+    this.props = props;
+    this.routeParams = routeParams;
+    this.routeData = routeData;
+    this.parentComponent = parentComponent;
+    // re-add any overwritten render or content methods
+    // damn Typescript grrr
+    //
+    // better explanation of what this is, is needed
+    const proto = Object.getPrototypeOf(this);
+    const propertyNames = Object.getOwnPropertyNames(proto);
+    for (const p of propertyNames) {
+      switch (p) {
+        case 'render':
+        case 'content':
+          {
+            this[p] = proto[p].bind(this);
+          }
+      }
+    }
+  }
+  get globalData() {
+    return this.__instance.globalData;
+  }
+}
+_defineProperty(TungstenBaseComponent, "tagName", void 0);
+_defineProperty(TungstenBaseComponent, "displayName", void 0);
+export class TungstenSimpleComponent extends TungstenBaseComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", void 0);
+    _defineProperty(this, "init", void 0);
+    _defineProperty(this, "clientInit", void 0);
+    _defineProperty(this, "serverInit", void 0);
+    _defineProperty(this, "componentDidUpdate", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "_updated", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "componentDidRender", void 0);
+    _defineProperty(this, "_rendered", void 0);
+    _defineProperty(this, "__init", async /*instance: Instance*/ () => {
+      if (typeof this.init === 'function') {
+        // this first check isn't needed with how TS currently emits, but leaving it there to be safe
+        await this.init(this.props);
+        //(this.state !== undefined) ? this.init(this.props, this.state) : this.init(this.props, {})
+      }
+      if (isClient && typeof this.clientInit === 'function') {
+        await this.clientInit(this.props);
+        //(this.state !== undefined) ? this.clientInit(this.props, this.state) : this.clientInit(this.props, {})
+      }
+      if (isServer && typeof this.serverInit === 'function') {
+        await this.serverInit(this.props);
+        //(this.state !== undefined) ? this.serverInit(this.props, this.state) : this.serverInit(this.props, {})
+      }
+      this.__handleTitle();
+      this.__initialized = true;
+    });
+    // !!! needs checking
+    // a func to manage the initial render, and call componentDidMount
+    // !! Only used during hydration and updates
+    _defineProperty(this, "__initialContent", () => {
+      //console.log('initial content', this.constructor.name)
+      const styledContentPromise = this.__styledContent();
+      // // if there is a componentDidMount func, queue this up to trigger after styled content is loaded
+      // // should we trigger this at a different time - such as after render/hydration? -- probably 
+      // styledContentPromise.then( () => {
+      //     if (typeof this.componentDidMount === 'function') this.componentDidMount()
+      //     if (typeof this._mounted === 'function') this._mounted()
+      //     if (typeof this.componentDidRender === 'function') {
+      //         this.componentDidRender(this.props)
+      //     }
+      //     if (typeof this._rendered === 'function') {
+      //         this._rendered(this.props)
+      //     }
+      // })
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is providing initial content`)
+      return styledContentPromise;
+    });
+    _defineProperty(this, "__update", async () => {
+      // how do we handle dom pointer index incrementing when being called by another component?
+      // maybe we pass back information, possibly the rendered content?
+      debug(`Simple Component '${this.constructor.name}' is updating`);
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      // do update
+      const styledContent = await this.__styledContent();
+      debug('styledContent', styledContent, 'for', this);
+      debug('TSsC new content', styledContent);
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is updating its content`)
+      const updateResult = await integrateElementUpdateVdom(this, styledContent);
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(this.props);
+      }
+      if (typeof this._updated === 'function') {
+        this._updated(this.props);
+      }
+      if (typeof this.componentDidRender === 'function') {
+        this.componentDidRender(this.props);
+      }
+      if (typeof this._rendered === 'function') {
+        this._rendered(this.props);
+      }
+      return updateResult;
+    });
+    _defineProperty(this, "__updateAndReturnContent", async () => {
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      const styledContent = await this.__styledContent();
+      const {
+        props,
+        state
+      } = this;
+      return {
+        content: styledContent,
+        complete: () => this.__newUpdateCompleted(props)
+      };
+    });
+    _defineProperty(this, "__newUpdateCompleted", props => {
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(props);
+      }
+      if (typeof this._updated === 'function') {
+        this._updated(props);
+      }
+      if (typeof this.componentDidRender === 'function') {
+        this.componentDidRender(props);
+      }
+      if (typeof this._rendered === 'function') {
+        this._rendered(props);
+      }
+    });
+    _defineProperty(this, "__handleTitle", () => {
+      if (typeof this.title === 'undefined') return;
+      if (typeof this.title === 'function') {
+        this.__instance.setTitle(this.title(this.props).toString());
+        return;
+      }
+      this.__instance.setTitle(this.title.toString());
+    });
+    _defineProperty(this, "__content", async () => {
+      if (this.content === undefined) {
+        if (this.render !== undefined) return this.render(this.props);else throw new TungstenError(`${this.constructor.name} has no render or content function.`);
+      } else {
+        return await this.content(this.props);
+      }
+    });
+    _defineProperty(this, "__styledContent", async () => {
+      if (this.content === undefined && this.render !== undefined) return this.render(this.props);
+      //console.log('__styledContent checking __content')
+      const content = await this.__content();
+      if (this.style !== undefined) {
+        if (typeof this.style !== 'object') {
+          throw new TungstenError(`style property of ${this.constructor.name} is invalid.` + ' Should be a template string tagged with an accepted language name' + ', starting with an upper case letter, e.g. Sass`...styles...`.' + ` Received (${typeof this.style}) ${this.style}`);
+        }
+        const styledContent = styleContent(content, this.style);
+        //console.log(`styledContent for ${this.constructor.name}`, styledContent)
+        return styledContent;
+      } else {
+        return content;
+      }
+    });
+    _defineProperty(this, "__didUpdate", () => {
+      this.__didRender();
+      if (typeof this.componentDidUpdate === 'function') this.componentDidUpdate(this.props);
+      if (typeof this._updated === 'function') this._updated(this.props);
+    });
+    _defineProperty(this, "__didRender", () => {
+      if (typeof this.componentDidRender === 'function') this.componentDidRender(this.props);
+      if (typeof this._rendered === 'function') this._rendered(this.props);
+    });
+  }
+}
+const a = ['a', 'b'];
+const b = a.map(x => `--${x}`);
+export class TungstenComponent extends TungstenBaseComponent {
+  constructor(pkg) {
+    super(pkg);
+    _defineProperty(this, "state", void 0);
+    _defineProperty(this, "init", void 0);
+    _defineProperty(this, "clientInit", void 0);
+    _defineProperty(this, "serverInit", void 0);
+    _defineProperty(this, "componentDidUpdate", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "_updated", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "componentDidRender", void 0);
+    _defineProperty(this, "_rendered", void 0);
+    _defineProperty(this, "__init", (/*instance: Instance*/
+    ) => {
+      if (isClient && this.state !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        //this.state = new Proxy<>(this.state, this.__stateProxyHandler)
+        // needs to be proxied from bottom up, might need to do more than this
+        proxyObjectContent(this, this.state);
+        this.state = new Proxy(this.state, getStateProxyHandler(this)); // eslint-disable-line no-type-assertion/no-type-assertion, @typescript-eslint/ban-types -- tell TS that state is defined
+      }
+      if (typeof this.init === 'function') {
+        // this first check isn't needed with how TS currently emits, but leaving it there to be safe
+        //(this.init as StatelessMethodHack<Props, State>)(this.props, this.state)
+        this.init(this.props, this.state);
+      }
+      if (isClient && typeof this.clientInit === 'function') {
+        //(this.clientInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        this.clientInit(this.props, this.state);
+      }
+      if (isServer && typeof this.serverInit === 'function') {
+        //(this.serverInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        this.serverInit(this.props, this.state);
+      }
+      this.__handleTitle();
+      this.__initialized = true;
+    });
+    // !!! needs checking
+    // a func to manage the initial render, and call componentDidMount
+    // !! not yet used
+    _defineProperty(this, "__initialContent", () => {
+      const styledContentPromise = this.__styledContent();
+      // if there is a componentDidMount func, queue this up to trigger after styled content is loaded
+      // don't queue it up to check unless the func already exists, for perf reasons
+      // should we trigger this at a different time - such as after render/hydration? -- probably 
+      // if (typeof this.componentDidRender === 'function') {
+      //     if (typeof this.componentDidMount === 'function') this.componentDidMount()
+      //     if (typeof this._mounted === 'function') this._mounted()
+      //     if (typeof this.componentDidRender === 'function') {
+      //         (this.componentDidRender as StatelessMethodHack<Props, State>)(this.props, this.state)
+      //     }
+      //     if (typeof this._rendered === 'function') {
+      //         (this._rendered as StatelessMethodHack<Props, State>)(this.props, this.state)
+      //     }
+      // }
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is providing initial content`)
+      return styledContentPromise;
+    });
+    _defineProperty(this, "__update", async () => {
+      debug(`TungstenComponent '${this.constructor.name}' is updating`);
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      // do update
+      const styledContent = await this.__styledContent();
+      debug(`${this.constructor.name}' styledContent`, styledContent, 'for', this);
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is updating its content`)
+      const updateResult = await integrateElementUpdateVdom(this, styledContent);
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(this.props, this.state);
+      }
+      return updateResult;
+    });
+    _defineProperty(this, "__handleTitle", () => {
+      if (typeof this.title === 'undefined') return;
+      if (typeof this.title === 'function') {
+        this.__instance.setTitle(this.title(this.props, this.state).toString());
+        return;
+      }
+      this.__instance.setTitle(this.title.toString());
+    });
+    _defineProperty(this, "setState", stateUpdates => {
+      // mimic react's set state
+      // queue up an updates
+      setTimeout(() => this.__doSetState(stateUpdates), 0);
+    });
+    _defineProperty(this, "__doSetState", stateUpdates => {
+      if (stateUpdates === undefined) {
+        throw new TungstenError(`TungstenComponent __doSetState() error. State is undefined`);
+      }
+      if (this.state === undefined) {
+        throw new TungstenError(`TungstenComponent __doSetState() error. State is undefined`);
+      }
+      for (const key in stateUpdates) {
+        // @ts-ignore
+        this.state[key] = stateUpdates[key];
+      }
+    });
+    // // I think this is called by the babel'd code to trigger update when state is modified
+    // __updateState = (val: unknown): unknown => { // what is this?
+    //     this.__queueUpdate()
+    //     return val
+    // }
+    _defineProperty(this, "__stateUpdated", () => {
+      if (isDev && this.__dead) throwError('TungstenStatefulComponent.__stateUpdated', `A dead component ${this.constructor.name} received a notice that it's state has updated`);
+      this.__queueUpdate();
+    });
+    // this could be moved out of the component
+    // that would shorten references to it by not needing 'this.'
+    _defineProperty(this, "__stateCopy", item => {
+      if (typeof item !== 'object' || item === null) return item; // just return the value if it's not an object
+      if (!objectTypesToCopy.includes(item.constructor.name)) return item; // if it is not a plain object, return the original item
+      return structuredClone(item);
+    });
+    _defineProperty(this, "__content", async () => {
+      if (this.content === undefined) {
+        if (this.render !== undefined) {
+          return this.render(this.props, this.state);
+        } else throw new TungstenError(`${this.constructor.name} has no render or content function.`);
+      } else {
+        return await this.content(this.props, this.state);
+      }
+    });
+    _defineProperty(this, "__styledContent", async () => {
+      if (this.content === undefined && this.render !== undefined) return this.render(this.props, this.state);
+      //console.log('__styledContent checking __content')
+      const content = await this.__content();
+      if (this.style !== undefined) {
+        if (typeof this.style !== 'object') {
+          throw new TungstenError(`style property of ${this.constructor.name} is invalid.` + ' Should be a template string tagged with an accepted language name' + ', starting with an upper case letter, e.g. Sass`...styles...`.' + ` Received (${typeof this.style}) ${this.style}`);
+        }
+        const styledContent = styleContent(content, this.style);
+        //console.log(`styledContent for ${this.constructor.name}`, styledContent)
+        return styledContent;
+      } else {
+        return content;
+      }
+    });
+  }
+}
+_defineProperty(TungstenComponent, "tagName", void 0);
+_defineProperty(TungstenComponent, "displayName", void 0);
+export class TungstenStatefulComponent extends TungstenBaseComponent {
+  constructor(pkg) {
+    //const { props, routeParams, routeData, instance, parentComponent } = pkg
+    super(pkg);
+    _defineProperty(this, "init", void 0);
+    _defineProperty(this, "clientInit", void 0);
+    _defineProperty(this, "serverInit", void 0);
+    _defineProperty(this, "componentDidUpdate", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "_updated", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "componentDidRender", void 0);
+    _defineProperty(this, "_rendered", void 0);
+    _defineProperty(this, "__init", async /*instance: Instance*/ () => {
+      if (isClient) {
+        // needs to be proxied from bottom up, might need to do more than this
+        proxyObjectContent(this, this.state);
+        this.state = new Proxy(this.state, getStateProxyHandler(this));
+      }
+      if (typeof this.init === 'function') {
+        // this first check isn't needed with how TS currently emits, but leaving it there to be safe
+        //(this.init as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.init(this.props, this.state);
+      }
+      if (isClient && typeof this.clientInit === 'function') {
+        //(this.clientInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.clientInit(this.props, this.state);
+      }
+      if (isServer && typeof this.serverInit === 'function') {
+        //(this.serverInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.serverInit(this.props, this.state);
+      }
+      this.__handleTitle();
+      this.__initialized = true;
+    });
+    // !!! needs checking
+    // a func to manage the initial render, and call componentDidMount
+    // !! not yet used
+    _defineProperty(this, "__initialContent", () => {
+      const styledContentPromise = this.__styledContent();
+      // if there is a componentDidMount func, queue this up to trigger after styled content is loaded
+      // don't queue it up to check unless the func already exists, for perf reasons
+      // should we trigger this at a different time - such as after render/hydration? -- probably 
+      // styledContentPromise.then(() => {
+      //     if (typeof this.componentDidMount === 'function') {
+      //         if (typeof this.componentDidMount === 'function') this.componentDidMount()
+      //     }
+      //     if (typeof this._mounted === 'function') {
+      //         if (typeof this._mounted === 'function') this._mounted()
+      //     }
+      //     if (typeof this.componentDidRender === 'function') {
+      //         this.componentDidRender(this.props, this.state)
+      //     }
+      //     if (typeof this._rendered === 'function') {
+      //         this._rendered(this.props, this.state)
+      //     }
+      // })
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is providing initial content`)
+      return styledContentPromise;
+    });
+    _defineProperty(this, "__update", async () => {
+      debug(`Stateful Component ${this.constructor.name} is updating`);
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      // do update
+      const styledContent = await this.__styledContent();
+      debug('styledContent', styledContent, 'for', this);
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is updating its content`)
+      const updateResult = await integrateElementUpdateVdom(this, styledContent);
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(this.props, this.state);
+      }
+      if (typeof this._updated === 'function') {
+        this._updated(this.props, this.state);
+      }
+      if (typeof this.componentDidRender === 'function') {
+        this.componentDidRender(this.props, this.state);
+      }
+      if (typeof this._rendered === 'function') {
+        this._rendered(this.props, this.state);
+      }
+      return updateResult;
+    });
+    _defineProperty(this, "__updateAndReturnContent", async () => {
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      const styledContent = await this.__styledContent();
+      const {
+        props,
+        state
+      } = this;
+      return {
+        content: styledContent,
+        complete: () => this.__newUpdateCompleted(props, state)
+      };
+    });
+    _defineProperty(this, "__newUpdateCompleted", (props, state) => {
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(props, state);
+      }
+      if (typeof this._updated === 'function') {
+        this._updated(props, state);
+      }
+      if (typeof this.componentDidRender === 'function') {
+        this.componentDidRender(props, state);
+      }
+      if (typeof this._rendered === 'function') {
+        this._rendered(props, state);
+      }
+    });
+    _defineProperty(this, "__handleTitle", () => {
+      if (typeof this.title === 'undefined') return;
+      if (typeof this.title === 'function') {
+        this.__instance.setTitle(this.title(this.props, this.state).toString());
+        return;
+      }
+      this.__instance.setTitle(this.title.toString());
+    });
+    _defineProperty(this, "setState", stateUpdates => {
+      // mimic react's set state
+      // queue up an updates
+      setTimeout(() => this.__doSetState(stateUpdates), 0);
+    });
+    _defineProperty(this, "__doSetState", stateUpdates => {
+      if (stateUpdates === undefined) throw new TungstenError(`TungstenComponent __doSetState() error. State is undefined`);
+      if (this.state === undefined) throw new TungstenError(`TungstenComponent __doSetState() error. State is undefined`);
+      for (const key in stateUpdates) {
+        // @ts-ignore
+        this.state[key] = stateUpdates[key];
+      }
+    });
+    _defineProperty(this, "__stateUpdated", () => {
+      if (isDev && this.__dead) throwError('TungstenStatefulComponent.__stateUpdated', `A dead component ${this.constructor.name} received a notice that it's state has updated`);
+      this.__queueUpdate();
+    });
+    // I think this is called by the babel'd code to trigger update when state is modified
+    // __updateState = (val: unknown): unknown => { // what is this?
+    //     console.log('__updateState', isDev, this.__dead)
+    //     if (isDev && this.__dead) throwError(
+    //         'TungstenStatefulComponent.__updateState',
+    //         `A dead component ${this.constructor.name} received a notice that it's state has updated`
+    //     )
+    //     this.__queueUpdate()
+    //     return val
+    // }
+    // this could be moved out of the component
+    // that would shorten references to it by not needing 'this.'
+    _defineProperty(this, "__stateCopy", item => {
+      if (typeof item !== 'object' || item === null) return item; // just return the value if it's not an object
+      if (!objectTypesToCopy.includes(item.constructor.name)) return item; // if it is not a plain object, return the original item
+      return structuredClone(item);
+    });
+    _defineProperty(this, "__content", async () => {
+      if (this.content === undefined) {
+        if (this.render !== undefined) return this.render(this.props, this.state);else throw new TungstenError(`${this.constructor.name} has no render or content function.`);
+      } else {
+        return await this.content(this.props, this.state);
+      }
+    });
+    _defineProperty(this, "__styledContent", async () => {
+      // what is this?
+      // for an old style component, just return the result of render()
+      //if (this.constructor.name === 'Highlight') {
+      //console.log('__styledContent')
+      //console.log('this.content', this.content)
+      //console.log('this.render', this.render)
+      //}
+      if (this.content === undefined && this.render !== undefined) return this.render(this.props, this.state);
+      //console.log('__styledContent checking __content')
+      const content = await this.__content();
+      if (this.style !== undefined) {
+        if (typeof this.style !== 'object') {
+          throw new TungstenError(`style property of ${this.constructor.name} is invalid.` + ' Should be a template string tagged with an accepted language name' + ', starting with an upper case letter, e.g. Sass`...styles...`.' + ` Received (${typeof this.style}) ${this.style}`);
+        }
+        const styledContent = styleContent(content, this.style);
+        //console.log(`styledContent for ${this.constructor.name}`, styledContent)
+        return styledContent;
+      } else {
+        return content;
+      }
+    });
+    // __filterText(t) {
+    //     return (typeof t === 'boolean' || t === null || t === undefined) ? '' : t
+    // }
+    _defineProperty(this, "__didUpdate", () => {
+      this.__didRender();
+      if (typeof this.componentDidUpdate === 'function') this.componentDidUpdate(this.props, this.state);
+      if (typeof this._updated === 'function') this._updated(this.props, this.state);
+    });
+    _defineProperty(this, "__didRender", () => {
+      if (typeof this.componentDidRender === 'function') this.componentDidRender(this.props, this.state);
+      if (typeof this._rendered === 'function') this._rendered(this.props, this.state);
+    });
+    _defineProperty(this, "pickState", (...keys) => {
+      return objects.pick(this.state, ...keys);
+    });
+  }
+}
+_defineProperty(TungstenStatefulComponent, "tagName", void 0);
+_defineProperty(TungstenStatefulComponent, "displayName", void 0);
+class TungstenSignalsComponent extends TungstenBaseComponent {
+  constructor(pkg) {
+    //const { props, routeParams, routeData, instance, parentComponent } = pkg
+    super(pkg);
+    _defineProperty(this, "init", void 0);
+    _defineProperty(this, "clientInit", void 0);
+    _defineProperty(this, "serverInit", void 0);
+    _defineProperty(this, "componentDidUpdate", void 0);
+    // ignore arg 3 for now:   , snapshot: unknown
+    _defineProperty(this, "componentDidRender", void 0);
+    _defineProperty(this, "__init", async /*instance: Instance*/ () => {
+      if (typeof window !== 'undefined' && typeof process === 'undefined') {
+        // init signals
+        // this.state = new Proxy(this.state, getStateProxyHandler<State>(this))
+        // proxyStateContent(this, this.state)
+      }
+      if (typeof this.init === 'function') {
+        // this first check isn't needed with how TS currently emits, but leaving it there to be safe
+        //(this.init as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.init(this.props, this.signals);
+      }
+      if (isClient && typeof this.clientInit === 'function') {
+        //(this.clientInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.clientInit(this.props, this.signals);
+      }
+      if (isServer && typeof this.serverInit === 'function') {
+        //(this.serverInit as StatelessMethodHack<Props, State>)(this.props, this.state)
+        await this.serverInit(this.props, this.signals);
+      }
+      this.__handleTitle();
+      this.__initialized = true;
+    });
+    // !!! needs checking
+    // a func to manage the initial render, and call componentDidMount
+    // !! not yet used
+    _defineProperty(this, "__initialContent", () => {
+      const styledContentPromise = this.__styledContent();
+      // if there is a componentDidMount func, queue this up to trigger after styled content is loaded
+      // don't queue it up to check unless the func already exists, for perf reasons
+      // should we trigger this at a different time - such as after render/hydration? -- probably 
+      // styledContentPromise.then(() => {
+      //     if (typeof this.componentDidMount === 'function') {
+      //         if (typeof this.componentDidMount === 'function') this.componentDidMount()
+      //     }
+      //     if (typeof this._mounted === 'function') {
+      //         if (typeof this._mounted === 'function') this._mounted()
+      //     }
+      //     if (typeof this.componentDidRender === 'function') {
+      //         this.componentDidRender(this.props, this.signals)
+      //     }
+      //     if (typeof this._rendered === 'function') {
+      //         this._rendered(this.props, this.signals)
+      //     }
+      // })
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is providing initial content`)
+      return styledContentPromise;
+    });
+    _defineProperty(this, "__update", async () => {
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      // do update
+      const styledContent = await this.__styledContent();
+      debug('styledContent', styledContent, 'for', this);
+      //console.log(`A ${this.constructor.name} TCI ${this.tci} is updating its content`)
+      const updateResult = await integrateElementUpdateVdom(this, styledContent);
+      if (typeof this.componentDidUpdate === 'function') {
+        this.componentDidUpdate(this.props, this.signals);
+      }
+      return updateResult;
+    });
+    _defineProperty(this, "__updateAndReturnContent", async () => {
+      if (this.__queuedUpdateHandle !== undefined) {
+        clearTimeout(this.__queuedUpdateHandle);
+        delete this.__queuedUpdateHandle;
+      }
+      const styledContent = await this.__styledContent();
+      return {
+        content: styledContent,
+        complete: () => {
+          throwError('TungstenCliComponent', '__updateAndReturnContent complete callback not implemented');
+        }
+      };
+    });
+    // __newUpdateCompleted = (props: Props) => {
+    //     if (typeof this.componentDidUpdate === 'function') {
+    //         this.componentDidUpdate(props)
+    //     }
+    //     if (typeof this._updated === 'function') {
+    //         this._updated(props, state)
+    //     }
+    //     if (typeof this.componentDidRender === 'function') {
+    //         this.componentDidRender(props, state)
+    //     }
+    //     if (typeof this._rendered === 'function') {
+    //         this._rendered(props, state)
+    //     }
+    // }
+    _defineProperty(this, "__handleTitle", () => {
+      if (typeof this.title === 'undefined') return;
+      if (typeof this.title === 'function') {
+        this.__instance.setTitle(this.title(this.props, this.signals).toString());
+        return;
+      }
+      this.__instance.setTitle(this.title.toString());
+    });
+    _defineProperty(this, "__content", async () => {
+      if (this.content === undefined) {
+        if (this.render !== undefined) return this.render(this.props, this.signals);else throw new TungstenError(`${this.constructor.name} has no render or content function.`);
+      } else {
+        return await this.content(this.props, this.signals);
+      }
+    });
+    _defineProperty(this, "__styledContent", async () => {
+      if (this.content === undefined && this.render !== undefined) return this.render(this.props, this.signals);
+      const content = await this.__content();
+      if (this.style !== undefined) {
+        if (typeof this.style !== 'object') {
+          throw new TungstenError(`style property of ${this.constructor.name} is invalid.` + ' Should be a template string tagged with an accepted language name' + ', starting with an upper case letter, e.g. Sass`...styles...`.' + ` Received (${typeof this.style}) ${this.style}`);
+        }
+        const styledContent = styleContent(content, this.style);
+        return styledContent;
+      } else {
+        return content;
+      }
+    });
+  }
+}
+_defineProperty(TungstenSignalsComponent, "tagName", void 0);
+_defineProperty(TungstenSignalsComponent, "displayName", void 0);
+import { objectMap } from "./objectMap.js";
+import { getStateProxyHandler, proxyObjectContent } from "./componentProxyHandlers.js";
+import { $contentNull } from "./symbols.js";
+import { getInternalStore } from "./Store/getInternalStore.js";
+import { objects } from 'sxy-lib';
+import { isDev } from "./isDev.js";
+import { throwError } from "./throwError.js";
+export function __proxyStore(store) {
+  const proxiedStore = objectMap(store, (valueKey, valueObject) => {
+    const handler = {
+      get: (valueObject, key) => {
+        switch (key) {
+          case 'subscribe':
+            {
+              //console.log('proxy sub gotten')
+              return () => valueObject.subscribe(this);
+            }
+          case 'unsubscribe':
+            {
+              //console.log('proxy sub gotten')
+              return () => valueObject.unsubscribe(this);
+            }
+          case 'sync':
+            {
+              //console.log('proxy sync gotten')
+              return () => valueObject.sync(this);
+            }
+          default:
+            {
+              return valueObject[key];
+            }
+        }
+      }
+    };
+    return new Proxy(valueObject, handler);
+  });
+  proxiedStore.__trueStore = store;
+  //console.log('returning a proxied store with element', this)
+  //return new Proxy(store, handler as ProxyHandler<TrueStore<Schema>>) as ComponentStore<Schema>
+  return proxiedStore;
+}
+function unsubscribeAll(
+// TungstenBaseStoreComponent might be obsolete, needs review
+element) {
+  const store = element.store;
+  const trueStore = store.__trueStore;
+  const subs = element.__instance.storeSubscriptions.get(trueStore)?.get(element);
+  //console.log('all subs', element.__instance.storeSubscriptions)
+  //console.log('store subs', element.__instance.storeSubscriptions.get(trueStore))
+  //console.log('el subs', subs)
+  if (subs) {
+    subs.forEach(key => {
+      //const typedKey = key as keyof typeof this.store
+      //console.log(element.constructor.name + ' is unsubscribing from ' + String(key) + ' during deletion')
+      store[key].unsubscribe();
+    });
+  }
+}
+// Maybe we don't use it, and it is just creating confusing
+export class TungstenBaseStoreComponent extends TungstenBaseComponent {
+  constructor(pkg) {
+    //const { props, routeParams, routeData, instance, parentComponent } = pkg
+    super(pkg);
+    _defineProperty(this, "__proxyStore", __proxyStore);
+    _defineProperty(this, "__delete", () => {
+      //console.log('deleting a store component')
+      elementDelete.call(this);
+      //console.log('try unsub')
+      // remove store subscriptions?
+      unsubscribeAll(this);
+    });
+  }
+}
+export class TungstenBaseSimpleStoreComponent extends TungstenSimpleComponent {
+  constructor(pkg) {
+    //const { props, routeParams, routeData, instance, parentComponent } = pkg
+    super(pkg);
+    _defineProperty(this, "__proxyStore", __proxyStore);
+    _defineProperty(this, "__delete", () => {
+      //console.log('deleting a simple store component')
+      elementDelete.call(this);
+      // remove store subscriptions?
+      unsubscribeAll(this);
+    });
+  }
+}
+export class TungstenBaseStatefulStoreComponent extends TungstenStatefulComponent {
+  constructor(pkg) {
+    super(pkg);
+    _defineProperty(this, "__proxyStore", __proxyStore);
+    _defineProperty(this, "__delete", () => {
+      // console.log('deleting a stateful store component')
+      elementDelete.call(this);
+      // remove store subscriptions?
+      unsubscribeAll(this);
+    });
+  }
+}
+export class TungstenSimpleInternalStoreComponent extends TungstenBaseSimpleStoreComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "store", getInternalStore(this));
+  }
+}
+export class TungstenStatefulInternalStoreComponent extends TungstenBaseStatefulStoreComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "store", getInternalStore(this));
+  }
+}