tungsten 0.2.1 → 0.2.3

package/dist/staticGen/staticGen.js

@@ -0,0 +1,152 @@
+import { existsSync, promises as fsPromises } from 'fs';
+import { join, dirname } from 'path';
+import fsExtra from 'fs-extra';
+import axios from 'axios';
+//import type { SxyFrameworkConfigComplete } from '../FrameworkConfig.js'
+import { staticSiteFolder, staticFolder, assetsFolder, publicFolder, bundleFolder, componentCssFolder } from "../settings.js";
+import { getAppRoutes } from "./getAppRoutes.js";
+import { cliError, cliWarn } from "../cliOutput.js";
+import { matchPath } from "../routing/matchPath.js";
+import { throwError } from "../throwError.js";
+import { RouteKeyIsPath, StringIsPath } from "../routing/RouteTypes.js";
+import { findLinks, pathToLink, pathToFileName, rewriteLinks } from "./staticGenFunctions.js";
+import { filter as objectFilter, count } from 'sxy-lib/objects.js';
+export async function staticGen(framework) {
+  if (framework.compilationInfo === undefined) {
+    throwError('staticGen()', `framework.compilationInfo is undefined`);
+  }
+  const config = framework.config;
+  if (config === undefined) {
+    throwError('staticGen()', `expected framework.config to be set: ${framework.config}`);
+  }
+  const siteBasePath = config.siteBasePath;
+  console.log('siteBasePath', siteBasePath);
+  const projectDir = process.cwd();
+  //let appRoutes: RouteDefinition[] | Record<RouteKey, RouteDefinition> = await getAppRoutes(framework.compilationInfo, config)
+  const getRoutes = await getAppRoutes(framework.compilationInfo, config);
+  // ! unsure about this
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const appRoutes = getRoutes === null ? {
+    '/': {
+      content: 'Code for static rendering SPA TBC'
+    },
+    404: {
+      content: '404 TBC'
+    }
+  } : typeof getRoutes === 'function' ? getRoutes(null) : getRoutes;
+  const buildLocation = framework.compilationInfo.location;
+  const server = await framework.createProdServer();
+  const serverLocation = await server.start(null, true); // port, mute
+  // ensure the target folder exists
+  await fsPromises.mkdir(join(projectDir, staticSiteFolder), {
+    recursive: true
+  });
+  const rewriteMap = {};
+  // if ( ! Array.isArray(appRoutes) ) {
+  //     appRoutes = Object.entries(appRoutes).map( ([path, route]) => { 
+  //         route.path = path as keyof typeof appRoutes
+  //         return route
+  //     } )
+  // }
+  // for default and 404 routes we need to identify which one is in use, and then make sure the app renders it
+  // appRoutes = appRoutes.map( route => {
+  //     if (route.path === 'default') {
+  //         route.path === '/__default'
+  //         cliWarn(`Static site gen turning default route into __default.html. It is possible that this could conflict with a real route.`)
+  //     } else if (route.path === '404') {
+  //         route.path === '/404'
+  //         cliWarn(`Static site gen turning 404 route into __404.html. It is possible that this could conflict with a real route.`)
+  //     } 
+  //     return route
+  // })
+  const dynamicRoutes = [];
+  const finalRoutes = objectFilter(appRoutes, (path, route) => {
+    if (!path.startsWith('/')) {
+      //cliWarn(`Static gen skipping route ${route.path}, because it does not start with /, and is not default or 404`)
+      cliWarn(`Static gen skipping route ${path}, because it does not start with /`);
+      return false;
+    }
+    if (path.includes(':')) {
+      // separate these out
+      dynamicRoutes.push([path, route]);
+      return false;
+    }
+    return true;
+  });
+  if (count(finalRoutes) === 0) {
+    cliWarn('Found no valid route!');
+  }
+  for (const [path, route] of Object.entries(finalRoutes)) {
+    // we need to develop the rewrite map over time, because we discover links during processing
+    rewriteMap[path] = pathToLink(path, siteBasePath);
+  }
+  //console.log('rewriteMap', rewriteMap)
+  async function renderPath(path, siteBasePath) {
+    const url = serverLocation + path;
+    let links;
+    try {
+      console.log('get URL', url);
+      const response = await axios.get(url);
+      let result = response.data;
+      links = findLinks(result);
+      const newPaths = [];
+      for (const link of links) {
+        if (!StringIsPath(link)) throwError('renderRoute', `Found a link '${link}' that did not start with /`);
+        if (!(link in rewriteMap)) {
+          for (const [path, dynamicRoute] of dynamicRoutes) {
+            if (RouteKeyIsPath(path)) {
+              if (matchPath(path, link)) {
+                //console.log('link', link)
+                //console.log('in?', link in rewriteMap)
+                //console.log(`link ${link} matched dynamic route ${dynamicRoute.path}`)
+                newPaths.push(link);
+                rewriteMap[link] = pathToLink(link, siteBasePath);
+              }
+            } else {
+              // default
+              // 404
+            }
+          }
+        }
+      }
+      result = rewriteLinks(result, rewriteMap);
+      //const pageFileName = rewriteMap[path]
+      const pageFileName = pathToFileName(path);
+      const dest = join(projectDir, staticSiteFolder, pageFileName);
+      const dir = dirname(dest);
+      // ensure the target folder exists
+      // some duplication of effort here - oh well
+      await fsPromises.mkdir(dir, {
+        recursive: true
+      });
+      await fsPromises.writeFile(join(projectDir, staticSiteFolder, pageFileName), result);
+      // we can update the rewrite map here
+      // for (const route of appRoutes) { // we need to develop the rewrite map over time, because we discover links during processing
+      //     const path = route.path
+      //     rewriteMap[path] = pathToFileName(path)
+      // }
+      for (const link of newPaths) {
+        renderPath(link, siteBasePath);
+      }
+    } catch (e) {
+      const stack = typeof e === 'object' && e !== null && 'stack' in e ? e.stack : '';
+      cliError(`Static site gen - error generating path ${path} (full location ${url}): ${String(e)} ${String(stack)}`);
+    }
+  }
+  for (const [path, route] of Object.entries(finalRoutes)) {
+    await renderPath(path, siteBasePath);
+  }
+  console.log('rewriteMap', rewriteMap);
+  const copyPromises = [fsExtra.copy(join(buildLocation, staticFolder), join(projectDir, staticSiteFolder)),
+  // assets folder
+  existsSync(join(buildLocation, assetsFolder)) ? fsExtra.copy(join(buildLocation, assetsFolder), join(projectDir, staticSiteFolder, 'assets')) : null,
+  // public files
+  existsSync(join(buildLocation, publicFolder)) ? fsExtra.copy(join(buildLocation, publicFolder), join(projectDir, staticSiteFolder)) : null,
+  // copy in the bundle
+  fsExtra.copy(join(projectDir, bundleFolder), join(projectDir, staticSiteFolder, 'bundle')),
+  // copy the client.js to clientWithEnv.js, because the framework looks for this file instead.
+  //fsExtra.copy(join(projectDir, bundleFolder, 'client.js'), join(projectDir, bundleFolder, 'clientWithEnv.js')),
+  // copy in the css
+  fsExtra.copy(join(buildLocation, componentCssFolder), join(projectDir, staticSiteFolder, componentCssFolder))];
+  await Promise.all(copyPromises);
+}

package/dist/staticGen/staticGenFunctions.d.ts

@@ -0,0 +1,6 @@
+import { SiteBasePath as SiteBasePath } from '../render/HeadData.js';
+export declare function pathToFileName(path: string): string;
+export declare function pathToLink(path: string, siteBasePath: SiteBasePath): string;
+export declare function findLinks(content: string): string[];
+export declare function rewriteLinks(content: string, rewriteMap: Record<string, string>): string;
+//# sourceMappingURL=staticGenFunctions.d.ts.map

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