tungsten 0.2.1 → 0.2.3

package/dist/style/styleContentSxy.js

@@ -0,0 +1,143 @@
+import { count } from 'sxy-lib/objects.js';
+import { ContentNodeElementIsHtml, ContentNodeElementIsComponent } from "../ContentNode.js";
+import { warn } from "../output.js";
+import { TungstenError } from "../TungstenError.js";
+import { componentBumpClass } from "../componentClassName.js";
+import { $props, $type } from "../contentNodeSymbols.js";
+function debug(...texts) {
+  //console.log(...texts)
+}
+export function styleContentSxy(content, styles) {
+  if (count(styles.tags) === 0 && count(styles.classes) === 0) return content; // optimization short circuit
+  processElement(content, styles);
+  return content;
+}
+function processElement(element, styles) {
+  //console.log('element', element)
+  debug('styles', styles);
+  //debug(`---- style element ----`)
+  //debug('--element', typeof element, element)
+  //if (element) debug('--type', typeof element.type, element.type)
+  if (element === undefined) return; // this is probably invalid in react,
+  // but we will return so as not to cause any new errors
+  // and let react handle it
+  if (element === null) return; // just null, meaning no element in react
+  if (element === false) return; // perhaps a false returned from a "(condition) && element" statement
+  if (element === true) return;
+  if (typeof element === 'string' || typeof element === 'number') {
+    // no processing to be done on text elements
+    //debug('**** text element ****')
+    return;
+  }
+  if (typeof element === 'function') {
+    // a function, hopefully it is being passed to a component for use, as we can't use this
+    return;
+  }
+  //debug('isArray', Array.isArray(element), element)
+  if (Array.isArray(element)) {
+    //debug('**** array element ****', element)
+    for (const e of element) {
+      processElement(e, styles);
+    }
+    return;
+  }
+  debug('Element must be an element. Type: ', typeof element);
+  // element is a ContentNodeElement
+  let tagName;
+  if (element[$props] !== undefined && element[$props].tagName !== undefined) {
+    if (typeof element[$props].tagName !== 'string') {
+      throw new TungstenError(`styleContentSxy() error: ${ContentNodeElementIsHtml(element) ? element[$type] : getComponentName(element)}` + ` component tagName field should be type string. Received ${typeof element[$props].tagName}`);
+    }
+    tagName = element[$props].tagName;
+    //debug(`Setting tag name based on tagName prop: ${element.props.tagName}`)
+  } else {
+    // !! TODO change 'type' to a symbol
+    if (!Object.getOwnPropertySymbols(element).includes($type)) {
+      // its a data object and not an element
+      return;
+    } else {
+      debug('found $type in element, it seems to be a component.');
+      debug('element.$type', typeof element[$type], element[$type]);
+      //if (typeof element.type === 'string') {
+      if (ContentNodeElementIsHtml(element)) {
+        debug('**** HTML element ****');
+        tagName = element[$type];
+      } else if (ContentNodeElementIsComponent(element)) {
+        // I think this will always be true
+        element;
+        //} else if (typeof element.type === 'function') { // I think this will always be true
+        debug('**** Dynamic component ****');
+        //if ('tagName' in element.type) {
+        if (element[$type].tagName !== undefined) {
+          //element = element as ContentNodeHtml
+          //element = element as ContentNodeFunctionComponent
+          //element = element as ContentNodeClassComponent
+          tagName = element[$type].tagName;
+        } else {
+          tagName = element[$type].name || element[$type].displayName || '--unnamed--';
+        }
+        // } else if ( typeof element.type === 'object' ) { // higher order component/object??
+        //     debug('**** Object? ****')
+        //     tagName = getComponentName(element)
+      } else {
+        element;
+        const never = element;
+        tagName = '--unnamed--';
+      }
+    }
+  }
+  debug('--tagName', tagName, element);
+  if (!Object.getOwnPropertySymbols(element).includes($props) || element[$props] === undefined) {
+    //throw new TungstenError(`Error, element has no props. ${element}`)
+    warn(`Warning, element has no props. ${typeof element}:`, element);
+    // in one instance, the element is a function
+    // it's going to return elements later, but we can't process them now
+    element[$props] = {};
+  }
+  let newClassName = '';
+  if (tagName in styles.tags) {
+    newClassName += ' ' + componentBumpClass + ' ' + styles.tags[tagName];
+  }
+  //console.log(element.props.className)
+  //if (element.props.className !== undefined) console.log(element.props.className)
+  //console.log(element.props.className)
+  if (element[$props].className !== undefined && element[$props].className !== null) {
+    if (typeof element[$props].className !== 'string') {
+      throw new TungstenError(`styleContentSxy() error: ${ContentNodeElementIsHtml(element) ? element[$type] : getComponentName(element)}` + ` className prop should be a string. Received ${typeof element[$props].className}`);
+    }
+    newClassName += ' ' + element[$props].className;
+    const classNames = element[$props].className.split(' ');
+    for (const cn of classNames) {
+      if (cn in styles.classes) {
+        newClassName += ` ${styles.classes[cn]}`;
+      }
+    }
+  }
+  newClassName = newClassName.trim();
+  if (newClassName !== '') element[$props].className = newClassName;
+  debug('element after mods', tagName, element);
+  // apply this to both fragment and elements
+  if (element[$props].children !== undefined) {
+    //debug(tagName + '^^^^children', element.props.children)
+    //element.props.children = element.props.children as ContentNode
+    processElement(element[$props].children, styles);
+  }
+  //console.log('element after mods', tagName, element)
+}
+// function isClassComponent(component) {
+//     return (
+//         typeof component === 'function' &&
+//         !!component.prototype.isReactComponent
+//     )
+// }
+function getComponentName(element) {
+  return element[$type].tagName || element[$type].constructor.name;
+  //// I don't think we have these things in our framework yet
+  // if ( element.type['$$typeof'] === Symbol.for('react.forward_ref') ) {
+  //     return element.type.render.tagName || element.type.render.displayName || element.type.render.name
+  // } else if ( element.type['$$typeof'] === Symbol.for('react.memo') ) {
+  //     return getComponentName(element.type)
+  // } else if ( isClassComponent(element.type) ) {
+  //     return element.type.tagName || element.type.constructor.name
+  // }
+}

package/dist/style/styleContentSxyClassOrClassname.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styleContentSxyClassOrClassname.d.ts.map

package/dist/style/styleContentSxyClassOrClassname.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleContentSxyClassOrClassname.d.ts","sourceRoot":"","sources":["../../src/style/styleContentSxyClassOrClassname.ts"],"names":[],"mappings":""}

package/dist/style/styleContentSxyClassOrClassname.js

@@ -0,0 +1,149 @@
+export {};
+/*
+
+// variable of this file that can handle use of either class or className prop
+// abandonned because it would make working with props confusing - devs would have to check for both class and className
+// unless they were rapidly rewritten at least - still typing could be unworkable
+
+import type { CssNames } from '../CssNames.js'
+import type { ContentNode, ContentNodeComponent } from '../ContentNode.js'
+import { warn } from '../output.js'
+
+function debug(...texts: unknown[]) { // eslint-disable-line @typescript-eslint/no-unused-vars
+    //console.log(...texts)
+}
+
+export function styleContentSxy(content: ContentNode, styles: CssNames) {
+    processElement(content, styles)
+    return content
+}
+
+function processElement(element: ContentNode, styles: CssNames) {
+
+    debug('styles', styles)
+
+    //debug(`---- style element ----`)
+    //debug('--element', typeof element, element)
+    //if (element) debug('--type', typeof element.type, element.type)
+
+    if (element === undefined) return // this is probably invalid in react,
+                                      // but we will return so as not to cause any new errors
+                                      // and let react handle it
+
+    if (element === null) return // just null, meaning no element in react
+    if (element === false) return // perhaps a false returned from a "(condition) && element" statement
+    if (element === true) return
+
+    if (typeof element === 'string' || typeof element === 'number') { // no processing to be done on text elements
+        //debug('**** text element ****')
+        return
+    }
+    
+    if (typeof element === 'function') {
+        // a function, hopefully it is being passed to a component for use, as we can't use this
+        return
+    }
+    
+    //debug('isArray', Array.isArray(element), element)
+    if (Array.isArray(element)) {
+        //debug('**** array element ****', element)
+        for (const e of element) {
+            processElement(e, styles)
+        }
+        return
+    }
+
+    let tagName
+    if ('props' in element && 'tagName' in element.props) {
+        tagName = element.props.tagName
+        //debug(`Setting tag name based on tagName prop: ${element.props.tagName}`)
+    } else {
+        debug('element.type', typeof element.type, element.type)
+        if (typeof element.type === 'string') {
+            debug('**** HTML element ****')
+            tagName = element.type
+        } else if (typeof element.type === 'function') {
+            debug('**** Dynamic component ****')
+            //if ('tagName' in element.type) {
+            if (element.type.tagName !== undefined) {
+                //element = element as ContentNodeHtml
+                //element = element as ContentNodeFunctionComponent
+                //element = element as ContentNodeClassComponent
+                tagName = element.type.tagName
+            } else {
+                tagName = element.type.name || element.type.displayName
+            }
+        } else if ( typeof element.type === 'object' ) {
+            debug('**** Object? ****')
+            tagName = getComponentName(element)
+        }
+    }
+    debug('--tagName', tagName, element)
+    
+    if ( ! ('props' in element) || element.props === undefined ) {
+        //throw new TungstenError(`Error, element has no props. ${element}`)
+        warn(`Warning, element has no props. ${typeof element}: ${element}`)
+        // in one instance, the element is a function
+        // it's going to return elements later, but we can't process them now
+        element.props = {}
+    }
+
+    let newClassName = ''
+
+    if (tagName in styles.tags) {
+        newClassName += ' ' + componentClassName + ' ' + styles.tags[tagName]
+    }
+
+    const originalClasses = (typeof element.props.class !== 'undefined')
+        ? (typeof element.props.className !== 'undefined')
+            ? `${element.props.class} ${element.props.className}`
+            : element.props.class
+        : (typeof element.props.className !== 'undefined')
+            ? element.props.className
+            : undefined
+
+    if (originalClasses) {
+        const classNames = originalClasses.split(' ')
+        for (const cn of classNames) {
+            if (cn in styles.classes) {
+                newClassName += ` ${styles.classes[cn]}`
+            }
+        }
+    }
+    
+    newClassName = newClassName.trim()
+
+    if (newClassName !== '' || element.props.class !== undefined  || element.props.className !== undefined) { // preserve prop setness
+        //console.log('new class', newClassName)
+        element.props.class = newClassName
+    }
+    delete element.props.className
+    
+
+    if ('children' in element.props) {
+        //debug(tagName + '^^^^children', element.props.children)
+        element.props.children = element.props.children as ContentNode
+        processElement(element.props.children, styles)
+    }
+
+    debug('element after mods', tagName, element)
+    //console.log('element after mods', tagName, element)
+}
+
+function isClassComponent(component) {
+    return (
+        typeof component === 'function' &&
+        !!component.prototype.isReactComponent
+    )
+}
+
+function getComponentName(element: ContentNodeComponent) {
+    if ( element.type['$$typeof'] === Symbol.for('react.forward_ref') ) {
+        return element.type.render.tagName || element.type.render.displayName || element.type.render.name
+    } else if ( element.type['$$typeof'] === Symbol.for('react.memo') ) {
+        return getComponentName(element.type)
+    } else if ( isClassComponent(element.type) ) {
+        return element.type.tagName || element.type.constructor.name
+    }
+}
+*/

package/dist/style/styleElementContent.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styleElementContent.d.ts.map

package/dist/style/styleElementContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleElementContent.d.ts","sourceRoot":"","sources":["../../src/style/styleElementContent.ts"],"names":[],"mappings":""}

package/dist/style/styleElementContent.js

@@ -0,0 +1,21 @@
+// import { TungstenError } from "../TungstenError.js"
+// import { styleContent } from "../styleContent.js"
+// import { Stylesheet } from "../Stylesheet.jsx"
+export {};
+// export function getStyledContent(element) {
+//     let content = element.__content()
+//     if ('styles' in element && element.styles !== undefined) { // have to check that it is not undefined,
+//                                                                // because TS is initializing variables unasked
+//         // limit this to dev
+//         if (typeof element.styles !== 'object') {
+//             throw new TungstenError(
+//                 `styles property of element.constuctor.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 ${element.styles}) ${element.styles}`
+//             )
+//         }
+//         content = styleContent(content, element.styles)
+//     }
+//     return content
+// }

package/dist/styleProcessors.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styleProcessors.d.ts.map

package/dist/styleProcessors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleProcessors.d.ts","sourceRoot":"","sources":["../src/styleProcessors.ts"],"names":[],"mappings":""}

package/dist/styleProcessors.js

@@ -0,0 +1,22 @@
+/*
+
+
+/* eslint-disable @typescript-eslint/no-unused-vars *
+/* eslint-disable @typescript-eslint/no-empty-function *
+
+import type { CssNames } from './CssNames.js'
+
+export type StyleProcessor = (style: TemplateStringsArray) => CssNames
+
+const cssNamesCompleteSample = {
+    moduleName: '',
+    tags: {},
+    classes: {},
+}
+export const Css: StyleProcessor = ((style) => cssNamesCompleteSample)
+export const Sass: StyleProcessor = ((style) => cssNamesCompleteSample)
+export const Scss: StyleProcessor = ((style) => cssNamesCompleteSample)
+//export const Less: StyleProcessor = ((style) => cssNamesCompleteSample)
+
+*/
+export {};

package/dist/symbols.d.ts

@@ -0,0 +1,3 @@
+export declare const $contentNull: unique symbol;
+export type $ContentNull = typeof $contentNull;
+//# sourceMappingURL=symbols.d.ts.map

package/dist/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,eAAuB,CAAA;AAChD,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAA"}

package/dist/symbols.js

@@ -0,0 +1 @@
+export const $contentNull = Symbol('no content');

package/dist/sync/index.d.ts

@@ -0,0 +1,4 @@
+import { ExportsVar, ModuleVar, RequireFunc } from '../CjsTypes.js';
+export declare const deps: never[];
+export default function cjsModule(module: ModuleVar, exports: ExportsVar, require: RequireFunc): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/sync/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sync/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAGnE,eAAO,MAAM,IAAI,SAAK,CAAA;AAEtB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,QAM7F"}

package/dist/sync/index.js

@@ -0,0 +1,9 @@
+import * as tungsten from "../index.js";
+export const deps = [];
+export default function cjsModule(module, exports, require) {
+  for (const key in tungsten) {
+    // @ts-ignore // is looking through the exports from the index file, to export them CJS style
+    // not sure how we can type safe this
+    exports[key] = tungsten[key];
+  }
+}

package/dist/syncServer/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-ignore
+module.exports = global.__tungsten_framework_modules;

package/dist/syncServer/index.d.cts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.cts.map

package/dist/syncServer/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/syncServer/index.cts"],"names":[],"mappings":""}

package/dist/syncServer/preload.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=preload.d.ts.map

package/dist/syncServer/preload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload.d.ts","sourceRoot":"","sources":["../../src/syncServer/preload.ts"],"names":[],"mappings":""}

package/dist/syncServer/preload.js

@@ -0,0 +1,3 @@
+import * as tungsten from "../index.js";
+// @ts-ignore
+global.__tungsten_framework_modules = tungsten;

package/dist/throwError.d.ts

@@ -0,0 +1,3 @@
+export declare function throwError(location: string, message: string): never;
+export declare function errorMessage(location: string, message: string): string;
+//# sourceMappingURL=throwError.d.ts.map

package/dist/throwError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"throwError.d.ts","sourceRoot":"","sources":["../src/throwError.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,CAEnE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtE"}

package/dist/throwError.js

@@ -0,0 +1,8 @@
+import { TungstenError } from "./TungstenError.js";
+import { packageNameCapitalized } from "./settings.js";
+export function throwError(location, message) {
+  throw new TungstenError(errorMessage(location, message));
+}
+export function errorMessage(location, message) {
+  return `${packageNameCapitalized} ${location} error: ${message}`;
+}

package/dist/todo.d.ts

@@ -0,0 +1,2 @@
+export declare function todo(task: string): void;
+//# sourceMappingURL=todo.d.ts.map

package/dist/todo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"todo.d.ts","sourceRoot":"","sources":["../src/todo.ts"],"names":[],"mappings":"AAGA,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,QAEhC"}

package/dist/todo.js

@@ -0,0 +1,3 @@
+export function todo(task) {
+  //warn('Todo: ' + task)
+}

package/dist/update/UpdateResult.d.ts

@@ -0,0 +1,6 @@
+import type { RenderedContentNode } from '../RenderedContentNode.js';
+export type UpdateResult = {
+    renderedContent: RenderedContentNode;
+    nodesLength: number;
+};
+//# sourceMappingURL=UpdateResult.d.ts.map

package/dist/update/UpdateResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateResult.d.ts","sourceRoot":"","sources":["../../src/update/UpdateResult.ts"],"names":[],"mappings":"AACA,OAAO,KAAI,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAEnE,MAAM,MAAM,YAAY,GAAG;IACvB,eAAe,EAAE,mBAAmB,CAAC;IACrC,WAAW,EAAE,MAAM,CAAA;CACtB,CAAA"}

package/dist/update/UpdateResult.js

@@ -0,0 +1 @@
+export {};

package/dist/update/integrateUpdateVdom.d.ts

@@ -0,0 +1,22 @@
+import { DomPointer } from '../DomPointer.js';
+import { ContentNode, ContentNodeHtml, ContentNodeComponentAny } from '../ContentNode.js';
+import { Instance } from '../Instance/Instance.js';
+import { TungstenElement } from '../TungstenElement.js';
+import { AnyComponent } from '../AnyComponent.js';
+import { RenderedContentNodeComponent } from '../RenderedContentNode.js';
+import { UpdateResult } from './UpdateResult.js';
+export type TungstenHTMLElement = HTMLElement & {
+    __tungsten_click_handler: (this: HTMLElement, ev: MouseEvent) => any;
+    [key: string]: unknown;
+};
+export declare function integrateElementUpdateVdom(element: AnyComponent, newContent: ContentNode): Promise<UpdateResult>;
+export declare function processHtmlNode(node: ContentNodeHtml, parentNode: ContentNode): void;
+type CreateTungstenComponentArgs = {
+    parent: TungstenElement;
+    instance: Instance;
+    node: ContentNodeComponentAny;
+    domPointer: DomPointer;
+};
+export declare function createTungstenComponent({ parent, instance, node, domPointer }: CreateTungstenComponentArgs): Promise<RenderedContentNodeComponent>;
+export {};
+//# sourceMappingURL=integrateUpdateVdom.d.ts.map

package/dist/update/integrateUpdateVdom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrateUpdateVdom.d.ts","sourceRoot":"","sources":["../../src/update/integrateUpdateVdom.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EACH,WAAW,EAAwC,eAAe,EAElE,uBAAuB,EAG1B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAKlD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAKjD,OAAO,EAKyB,4BAA4B,EAI3D,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAYhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC5C,wBAAwB,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,UAAU,KAAK,GAAG,CAAA;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB,CAAA;AAYD,wBAAsB,0BAA0B,CAC5C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,GAC/C,OAAO,CAAC,YAAY,CAAC,CA0GvB;AA+mBD,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,QAkK7E;AAuWD,KAAK,2BAA2B,GAAG;IAC/B,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,uBAAuB,CAAC;IAE9B,UAAU,EAAE,UAAU,CAAA;CACzB,CAAA;AACD,wBAAsB,uBAAuB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAC3G,OAAO,CAAC,4BAA4B,CAAC,CAU1C"}