tungsten 0.1.7 → 0.1.24

package/dist/staticGen/staticGenFunctions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"staticGenFunctions.d.ts","sourceRoot":"","sources":["../../src/staticGen/staticGenFunctions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGpE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,UAM1C;AACD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,UAMlE;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAQnD;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAM/E"}

package/dist/staticGen/staticGenFunctions.js

@@ -0,0 +1,25 @@
+export function pathToFileName(path) {
+  // Is this good?
+  // /foo/ becomes /foo/index.html
+  // seems like a bodge
+  if (path.endsWith('/')) return path + 'index.html';else return path + '.html';
+}
+export function pathToLink(path, siteBasePath) {
+  // Is this good?
+  // /foo/ becomes /foo/index.html
+  // seems like a bodge
+  if (path.endsWith('/')) return siteBasePath + path + 'index.html';else return siteBasePath + path + '.html';
+}
+export function findLinks(content) {
+  const matches = [...content.matchAll(/href="(.+?)"/g)].map(x => {
+    return x[1]; // eslint-disable-line no-type-assertion/no-type-assertion -- the regex has a match group, so entry 1 will exist
+  });
+  return matches;
+}
+export function rewriteLinks(content, rewriteMap) {
+  for (const [from, to] of Object.entries(rewriteMap)) {
+    //console.log('rewrite link', from, to)
+    content = content.replaceAll(`href="${from}"`, `href="${to}"`);
+  }
+  return content;
+}

package/dist/style/jssToCss.d.ts

@@ -0,0 +1,2 @@
+export declare function jssToCss(jss: unknown): string;
+//# sourceMappingURL=jssToCss.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jssToCss.d.ts","sourceRoot":"","sources":["../../src/style/jssToCss.ts"],"names":[],"mappings":"AAiBA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,OAAO,UAiBpC"}

package/dist/style/jssToCss.js

@@ -0,0 +1,77 @@
+import decamelize from 'decamelize';
+import { IsIndexableObject } from "../IsIndexableObject.js";
+import { todo } from "../todo.js";
+import { throwError } from "../throwError.js";
+function kabab(string) {
+  return decamelize(string, {
+    separator: '-'
+  });
+}
+function value(key, value) {
+  if (typeof value === 'number' && value !== 0 && !(key in unitlessNumber)) {
+    return String(value) + 'px';
+  }
+  return value;
+}
+export function jssToCss(jss) {
+  if (IsIndexableObject(jss)) {
+    if (jss === null) return '';
+    let css = '';
+    todo(`jssToCss() Add typesafety to jss object`);
+    for (const key in jss) {
+      css += `${kabab(key)}: ${value(key, jss[key])};`;
+      //css += `${kabab(key)}: ${value(key, (jss as GenericObject)[key])};`
+    }
+    return css;
+  } else {
+    if (jss === null || jss === undefined) return '';
+    throwError('jssToCss()', `received an unexpected data type "${typeof jss}".` + ` Expected an object, or null, or undefined`);
+  }
+}
+// https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/react-dom-bindings/src/shared/CSSProperty.js
+const unitlessNumber = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridArea: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};

package/dist/style/jssToCss.sxyt.d.ts

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

package/dist/style/jssToCss.sxyt.d.ts.map

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

package/dist/style/jssToCss.sxyt.js

@@ -0,0 +1,17 @@
+export {};
+/*
+describe('jssToCss()', ({it}: DescribeArg) => {
+    it(`Converts color: red`, () => {
+        // @ts-ignore
+        jssToCss({ color: 'red'}).should.equal('color: red;')
+    })
+    it(`Converts border-color: red`, () => {
+        // @ts-ignore
+        jssToCss({ borderColor: 'red'}).should.equal('border-color: red;')
+    })
+    it(`Converts font-size: 14px`, () => {
+        // @ts-ignore
+        jssToCss({ fontSize: 14}).should.equal('font-size: 14px;')
+    })
+})
+*/

package/dist/style/styleContent.d.ts

@@ -0,0 +1,3 @@
+import { styleContentSxy } from './styleContentSxy.js';
+export declare const styleContent: typeof styleContentSxy;
+//# sourceMappingURL=styleContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleContent.d.ts","sourceRoot":"","sources":["../../src/style/styleContent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtD,eAAO,MAAM,YAAY,wBAAkB,CAAA"}

package/dist/style/styleContent.js

@@ -0,0 +1,2 @@
+import { styleContentSxy } from "./styleContentSxy.js";
+export const styleContent = styleContentSxy;

package/dist/style/styleContentReact.d.ts

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

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

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

package/dist/style/styleContentReact.js

@@ -0,0 +1,119 @@
+export {};
+//// what is this??
+//// what there some change in approach with framework V2?
+/*
+function debug(...texts: unknown[]) { // eslint-disable-line @typescript-eslint/no-unused-vars
+    // console.log(...texts)
+}
+
+export function styleContentReact(content: ContentNode, styles) {
+    processElement(styles, content)
+    return content
+}
+
+function processElement(styles, element) {
+
+    //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 (typeof element === 'string' || typeof element === 'number') {
+        //debug('**** text element ****')
+        return
+    }
+    
+    // a text element, we can't do anything with this
+    // unless we decide to treat it as a 'text' tag
+    //debug('isArray', Array.isArray(element), element)
+    if (Array.isArray(element)) {
+        //debug('**** array element ****', element)
+        for (const e of element) {
+            processElement(styles, e)
+        }
+        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('typeof element.type', typeof element.type)
+        if (typeof element.type === 'string') {
+            //debug('**** HTML element ****')
+            tagName = element.type
+        } else if (typeof element.type === 'function') {
+            //debug('**** React element ****')
+            if ('tagName' in element.type) {
+                tagName = element.type.tagName
+            } else {
+                tagName = element.type.name || element.type.displayName
+            }
+        } else if ( typeof element.type === 'object' ) {
+            tagName = getComponentName(element)
+        }
+    }
+    //debug('--tagName', tagName, element)
+    
+    if ( ! ('props' in element) ) element.props = {}
+
+    let newClassName = ''
+
+    if (tagName in styles.tags) {
+        newClassName += ' ' + componentClassName + ' ' + styles.tags[tagName]
+    }
+
+    if (element.props.className !== undefined) {
+        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
+
+    if ('children' in element.props) {
+        //debug(tagName + '^^^^children', element.props.children)
+        processElement(styles, element.props.children)
+    }
+
+    //debug('new element for', tagName, newElement)
+    //debug('element after mods', tagName, element)
+}
+
+function isClassComponent(component) {
+    return (
+        typeof component === 'function' &&
+        !!component.prototype.isReactComponent
+    )
+}
+
+function getComponentName(element) {
+    if ( element.type['$$typeof'] === Symbol.for('react.forward_ref') ) {
+        //debug(`**** React Forward Ref Component****`)
+        //debug('+++forwardRef', element)
+        //debug('tagName1', tagName)
+        return element.type.render.tagName || element.type.render.displayName || element.type.render.name
+    } else if ( element.type['$$typeof'] === Symbol.for('react.memo') ) {
+        //debug(`**** React Memo Component****`)
+        //debug('+++memo', element)
+        //debug('tagName2', tagName)
+        return getComponentName(element.type)
+    } else if ( isClassComponent(element.type) ) {
+        return element.type.tagName || element.type.constructor.name
+    }
+}
+*/

package/dist/style/styleContentReactClassOrClassname.d.ts

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

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

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

package/dist/style/styleContentReactClassOrClassname.js

@@ -0,0 +1,131 @@
+export {};
+/*
+
+//// see comment in styleContentSxyClassOrClassName
+
+
+function debug(...texts) { // eslint-disable-line @typescript-eslint/no-unused-vars
+    // console.log(...texts)
+}
+
+export function styleContentReact(content, styles) {
+    processElement(styles, content)
+    return content
+}
+
+function processElement(styles, element) {
+
+    //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 (typeof element === 'string' || typeof element === 'number') {
+        //debug('**** text element ****')
+        return
+    }
+    
+    // a text element, we can't do anything with this
+    // unless we decide to treat it as a 'text' tag
+    //debug('isArray', Array.isArray(element), element)
+    if (Array.isArray(element)) {
+        //debug('**** array element ****', element)
+        for (const e of element) {
+            processElement(styles, e)
+        }
+        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('typeof element.type', typeof element.type)
+        if (typeof element.type === 'string') {
+            //debug('**** HTML element ****')
+            tagName = element.type
+        } else if (typeof element.type === 'function') {
+            //debug('**** React element ****')
+            if ('tagName' in element.type) {
+                tagName = element.type.tagName
+            } else {
+                tagName = element.type.name || element.type.displayName
+            }
+        } else if ( typeof element.type === 'object' ) {
+            tagName = getComponentName(element)
+        }
+    }
+    //debug('--tagName', tagName, element)
+    
+    if ( ! ('props' in element) ) 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
+        element.props.class = newClassName
+    }
+    element.props.className = undefined
+
+    if ('children' in element.props) {
+        //debug(tagName + '^^^^children', element.props.children)
+        processElement(styles, element.props.children)
+    }
+
+    //debug('new element for', tagName, newElement)
+    //debug('element after mods', tagName, element)
+}
+
+function isClassComponent(component) {
+    return (
+        typeof component === 'function' &&
+        !!component.prototype.isReactComponent
+    )
+}
+
+function getComponentName(element) {
+    if ( element.type['$$typeof'] === Symbol.for('react.forward_ref') ) {
+        //debug(`**** React Forward Ref Component****`)
+        //debug('+++forwardRef', element)
+        //debug('tagName1', tagName)
+        return element.type.render.tagName || element.type.render.displayName || element.type.render.name
+    } else if ( element.type['$$typeof'] === Symbol.for('react.memo') ) {
+        //debug(`**** React Memo Component****`)
+        //debug('+++memo', element)
+        //debug('tagName2', tagName)
+        return getComponentName(element.type)
+    } else if ( isClassComponent(element.type) ) {
+        return element.type.tagName || element.type.constructor.name
+    }
+}
+*/

package/dist/style/styleContentSxy.d.ts

@@ -0,0 +1,4 @@
+import type { CssNames } from '../CssNames.js';
+import { type ContentNode } from '../ContentNode.js';
+export declare function styleContentSxy(content: ContentNode, styles: CssNames): ContentNode;
+//# sourceMappingURL=styleContentSxy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleContentSxy.d.ts","sourceRoot":"","sources":["../../src/style/styleContentSxy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,KAAK,WAAW,EAAsF,MAAM,mBAAmB,CAAA;AAWxI,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,eAIrE"}

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":""}