@teleporthq/teleport-shared - npm Package Compare versions

Comparing version 0.16.3 to 0.17.0

__tests__/utils/uidl-utils.ts

@@ -19,2 +19,3 @@ import {
   extractExternalDependencies,
+  splitDynamicAndStaticStyles,
 } from '../../src/utils/uidl-utils'
@@ -73,3 +74,3 @@ import {
     cleanupDynamicStyles(styleObject)
-    const cleanedStyle = (cleanupDynamicStyles(styleObject) as unknown) as UIDLStyleDefinitions
+    const cleanedStyle = cleanupDynamicStyles(styleObject) as unknown as UIDLStyleDefinitions
     expect(cleanedStyle.padding).toBeUndefined()
@@ -530,1 +531,17 @@ expect(cleanedStyle.margin.content).toBe('20px')
 })
+
+describe('splitDynamicAndStaticStyles', () => {
+  it('Splits dynamic, static and token styles from a style object', () => {
+    const style = {
+      width: staticNode('100px'),
+      height: staticNode('50px'),
+      display: dynamicNode('prop', 'display'),
+      color: dynamicNode('token', 'blue'),
+    }
+
+    const { staticStyles, dynamicStyles, tokenStyles } = splitDynamicAndStaticStyles(style)
+    expect(Object.keys(staticStyles).length).toBe(2)
+    expect(Object.keys(dynamicStyles).length).toBe(1)
+    expect(Object.keys(tokenStyles).length).toBe(1)
+  })
+})

dist/cjs/index.js

@@ -1,16 +0,478 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var Constants = __importStar(require("./constants"));
-exports.Constants = Constants;
-var StringUtils = __importStar(require("./utils/string-utils"));
-exports.StringUtils = StringUtils;
-var UIDLUtils = __importStar(require("./utils/uidl-utils"));
-exports.UIDLUtils = UIDLUtils;
-//# sourceMappingURL=index.js.map
+
+// packages/teleport-shared/src/index.ts
+__markAsModule(exports);
+__export(exports, {
+  Constants: () => constants_exports,
+  StringUtils: () => string_utils_exports,
+  UIDLUtils: () => uidl_utils_exports
+});
+
+// packages/teleport-shared/src/constants/index.ts
+var constants_exports = {};
+__export(constants_exports, {
+  ASSETS_IDENTIFIER: () => ASSETS_IDENTIFIER,
+  PRETTIER_CONFIG: () => PRETTIER_CONFIG
+});
+var ASSETS_IDENTIFIER = "playground_assets";
+var PRETTIER_CONFIG = {
+  arrowParens: "always",
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  trailingComma: "es5",
+  bracketSpacing: true
+};
+
+// packages/teleport-shared/src/utils/string-utils.ts
+var string_utils_exports = {};
+__export(string_utils_exports, {
+  addSpacesToEachLine: () => addSpacesToEachLine,
+  camelCaseToDashCase: () => camelCaseToDashCase,
+  capitalize: () => capitalize,
+  dashCaseToCamelCase: () => dashCaseToCamelCase,
+  dashCaseToUpperCamelCase: () => dashCaseToUpperCamelCase,
+  encode: () => encode,
+  generateCSSVariableName: () => generateCSSVariableName,
+  generateRandomString: () => generateRandomString,
+  removeIllegalCharacters: () => removeIllegalCharacters,
+  removeLastEmptyLine: () => removeLastEmptyLine,
+  slugify: () => slugify
+});
+var camelCaseToDashCase = (str) => str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
+var dashCaseToCamelCase = (str) => str.replace(/[-_]+(.)?/g, (_, chr) => chr ? chr.toUpperCase() : "");
+var capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+var dashCaseToUpperCamelCase = (str) => capitalize(dashCaseToCamelCase(str));
+var removeIllegalCharacters = (str) => {
+  if (typeof str !== "string") {
+    return null;
+  }
+  return str.replace(/[^a-zA-Z0-9-_]/g, "").replace(/^[0-9-_]*/, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+};
+var slugify = (str) => {
+  if (str == null) {
+    return null;
+  }
+  return str.toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "").replace(/&/g, "-and-");
+};
+var addSpacesToEachLine = (spaces, str) => {
+  const respaced = spaces + str;
+  return respaced.replace(/\n/g, `
+${spaces}`);
+};
+var removeLastEmptyLine = (str) => {
+  return str.replace(/\n$/g, "");
+};
+var encodingMap = {
+  "&": "&",
+  ">": ">",
+  "<": "&lt;",
+  '"': "&quot;",
+  "{": "&#123;",
+  "}": "&#125;",
+  "'": "&apos;"
+};
+var encode = (str) => {
+  return str.split("").map((char) => {
+    const encodedChar = encodingMap[char];
+    return encodedChar ? encodedChar : char;
+  }).join("");
+};
+var generateRandomString = () => Math.random().toString(36).substring(2, 6);
+var generateCSSVariableName = (name) => {
+  return name.startsWith("--") ? camelCaseToDashCase(name) : camelCaseToDashCase(`--${name}`);
+};
+
+// packages/teleport-shared/src/utils/uidl-utils.ts
+var uidl_utils_exports = {};
+__export(uidl_utils_exports, {
+  cleanupDynamicStyles: () => cleanupDynamicStyles,
+  cloneObject: () => cloneObject,
+  createWebComponentFriendlyName: () => createWebComponentFriendlyName,
+  extractExternalDependencies: () => extractExternalDependencies,
+  extractRoutes: () => extractRoutes,
+  findFirstElementNode: () => findFirstElementNode,
+  getComponentClassName: () => getComponentClassName,
+  getComponentFileName: () => getComponentFileName,
+  getComponentFolderPath: () => getComponentFolderPath,
+  getRepeatIteratorNameAndKey: () => getRepeatIteratorNameAndKey,
+  getStyleFileName: () => getStyleFileName,
+  getTemplateFileName: () => getTemplateFileName,
+  prefixAssetsPath: () => prefixAssetsPath,
+  removeChildNodes: () => removeChildNodes,
+  setFriendlyOutputOptions: () => setFriendlyOutputOptions,
+  splitDynamicAndStaticStyles: () => splitDynamicAndStaticStyles,
+  transformAttributesAssignmentsToJson: () => transformAttributesAssignmentsToJson,
+  transformDynamicStyles: () => transformDynamicStyles,
+  transformStringAssignmentToJson: () => transformStringAssignmentToJson,
+  transformStylesAssignmentsToJson: () => transformStylesAssignmentsToJson,
+  traverseElements: () => traverseElements,
+  traverseNodes: () => traverseNodes,
+  traverseRepeats: () => traverseRepeats
+});
+var extractRoutes = (rootComponent) => {
+  const rootElement = rootComponent.node.content;
+  return rootElement.children.filter((child) => child.type === "conditional" && child.content.reference.content.id === "route");
+};
+var createWebComponentFriendlyName = (componentName) => {
+  const dashCaseName = camelCaseToDashCase(componentName);
+  if (dashCaseName.includes("-")) {
+    return dashCaseName;
+  }
+  return `app-${dashCaseName}`;
+};
+var setFriendlyOutputOptions = (uidl) => {
+  uidl.outputOptions = uidl.outputOptions || {};
+  const defaultComponentName = "AppComponent";
+  const friendlyName = removeIllegalCharacters(uidl.name) || defaultComponentName;
+  if (!uidl.outputOptions.fileName) {
+    uidl.outputOptions.fileName = camelCaseToDashCase(friendlyName);
+  }
+  if (!uidl.outputOptions.componentClassName) {
+    uidl.outputOptions.componentClassName = dashCaseToUpperCamelCase(friendlyName);
+  }
+  traverseElements(uidl.node, (element) => {
+    if (element.dependency) {
+      element.semanticType = dashCaseToUpperCamelCase(removeIllegalCharacters(element.semanticType) || defaultComponentName);
+    } else {
+      element.semanticType = removeIllegalCharacters(element.semanticType);
+    }
+  });
+};
+var getComponentFileName = (component) => {
+  return component.outputOptions && component.outputOptions.fileName ? component.outputOptions.fileName : camelCaseToDashCase(getComponentClassName(component));
+};
+var getStyleFileName = (component) => {
+  const componentFileName = getComponentFileName(component);
+  return component.outputOptions && component.outputOptions.styleFileName ? component.outputOptions.styleFileName : componentFileName;
+};
+var getTemplateFileName = (component) => {
+  const componentFileName = getComponentFileName(component);
+  return component.outputOptions && component.outputOptions.templateFileName ? component.outputOptions.templateFileName : componentFileName;
+};
+var getComponentFolderPath = (component) => component.outputOptions && component.outputOptions.folderPath ? component.outputOptions.folderPath : [];
+var getComponentClassName = (component) => {
+  const componentName = component.outputOptions && component.outputOptions.componentClassName ? component.outputOptions.componentClassName : component.name;
+  if (componentName === "Component") {
+    return "AppComponent";
+  }
+  return componentName;
+};
+var getRepeatIteratorNameAndKey = (meta = {}) => {
+  const iteratorName = meta.iteratorName || "item";
+  const iteratorKey = meta.iteratorKey || (meta.useIndex ? "index" : iteratorName);
+  return {
+    iteratorKey,
+    iteratorName
+  };
+};
+var prefixAssetsPath = (prefix, originalString) => {
+  if (!originalString || !originalString.includes(ASSETS_IDENTIFIER)) {
+    return originalString;
+  }
+  if (originalString.startsWith("/")) {
+    return prefix + originalString;
+  }
+  return `${prefix}/${originalString}`;
+};
+var cloneObject = (node) => JSON.parse(JSON.stringify(node));
+var traverseNodes = (node, fn, parent = null) => {
+  var _a, _b, _c;
+  fn(node, parent);
+  switch (node.type) {
+    case "element":
+      const { attrs, children, style, abilities, referencedStyles } = node.content;
+      if (attrs) {
+        Object.keys(attrs).forEach((attrKey) => {
+          traverseNodes(attrs[attrKey], fn, node);
+        });
+      }
+      if (referencedStyles && Object.keys(referencedStyles).length > 0) {
+        Object.values(referencedStyles).forEach((styleRef) => {
+          if (styleRef.content.mapType === "inlined") {
+            traverseStyleObject(styleRef.content.styles);
+          }
+        });
+      }
+      if (style) {
+        traverseStyleObject(style);
+      }
+      if (((_a = abilities == null ? void 0 : abilities.link) == null ? void 0 : _a.type) === "url") {
+        traverseNodes((_c = (_b = abilities == null ? void 0 : abilities.link) == null ? void 0 : _b.content) == null ? void 0 : _c.url, fn, node);
+      }
+      if (children) {
+        children.forEach((child) => {
+          traverseNodes(child, fn, node);
+        });
+      }
+      break;
+    case "repeat":
+      traverseNodes(node.content.node, fn, node);
+      traverseNodes(node.content.dataSource, fn, node);
+      break;
+    case "conditional":
+      traverseNodes(node.content.node, fn, node);
+      traverseNodes(node.content.reference, fn, node);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseNodes(node.content.fallback, fn, node);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "import":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseNodes was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var traverseStyleObject = (style) => {
+  Object.keys(style).forEach((styleKey) => {
+    const styleValue = style[styleKey];
+    if (styleValue.type !== "static" && styleValue.type !== "dynamic") {
+      throw new Error(`We support only 'static' and 'dynamic' content for styles`);
+    }
+  });
+};
+var traverseElements = (node, fn) => {
+  switch (node.type) {
+    case "element":
+      fn(node.content);
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseElements(child, fn);
+        });
+      }
+      break;
+    case "repeat":
+      traverseElements(node.content.node, fn);
+      break;
+    case "conditional":
+      traverseElements(node.content.node, fn);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseElements(node.content.fallback, fn);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseElements was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var traverseRepeats = (node, fn) => {
+  switch (node.type) {
+    case "element":
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseRepeats(child, fn);
+        });
+      }
+      break;
+    case "repeat":
+      fn(node.content);
+      traverseRepeats(node.content.node, fn);
+      break;
+    case "conditional":
+      traverseRepeats(node.content.node, fn);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseRepeats(node.content.fallback, fn);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseRepeats was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var splitDynamicAndStaticStyles = (style) => {
+  const responsePayload = { staticStyles: {}, dynamicStyles: {}, tokenStyles: {} };
+  Object.keys(style).reduce((acc, styleKey) => {
+    const styleValue = style[styleKey];
+    const { staticStyles, dynamicStyles, tokenStyles } = acc;
+    switch (styleValue.type) {
+      case "dynamic":
+        if (styleValue.content.referenceType === "token") {
+          tokenStyles[styleKey] = styleValue;
+          return acc;
+        }
+        dynamicStyles[styleKey] = styleValue;
+        return acc;
+      case "static":
+        staticStyles[styleKey] = styleValue;
+        return acc;
+      default:
+        throw new Error(`splitDynamicAndStaticStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, responsePayload);
+  return responsePayload;
+};
+var cleanupDynamicStyles = (style) => {
+  return Object.keys(style).reduce((resultedStyles, styleKey) => {
+    const styleValue = style[styleKey];
+    switch (styleValue.type) {
+      case "dynamic":
+        return resultedStyles;
+      case "static":
+        resultedStyles[styleKey] = styleValue;
+        return resultedStyles;
+      default:
+        throw new Error(`cleanupDynamicStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, {});
+};
+var transformDynamicStyles = (style, transform) => {
+  return Object.keys(style).reduce((resultedStyles, styleKey) => {
+    const styleValue = style[styleKey];
+    switch (styleValue.type) {
+      case "dynamic":
+        resultedStyles[styleKey] = transform(styleValue, styleKey);
+        return resultedStyles;
+      case "static":
+        resultedStyles[styleKey] = styleValue.content;
+        return resultedStyles;
+      default:
+        throw new Error(`transformDynamicStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, {});
+};
+var transformStringAssignmentToJson = (declaration) => {
+  if (typeof declaration === "number") {
+    return {
+      type: "static",
+      content: declaration
+    };
+  }
+  const parts = declaration.split(".");
+  const prefix = parts[0];
+  const path = parts.slice(1).join(".");
+  if (["$props", "$state", "$local"].indexOf(prefix) !== -1) {
+    let referenceType = "prop";
+    if (prefix !== "$props") {
+      referenceType = prefix.replace("$", "");
+    }
+    return {
+      type: "dynamic",
+      content: {
+        referenceType,
+        id: path
+      }
+    };
+  }
+  return {
+    type: "static",
+    content: declaration
+  };
+};
+var transformStylesAssignmentsToJson = (styleObject) => {
+  const newStyleObject = {};
+  Object.keys(styleObject).reduce((acc, key) => {
+    const styleContentAtKey = styleObject[key];
+    const entityType = typeof styleContentAtKey;
+    if (["string", "number"].indexOf(entityType) !== -1) {
+      acc[key] = transformStringAssignmentToJson(styleContentAtKey);
+      return acc;
+    }
+    if (!Array.isArray(styleContentAtKey) && entityType === "object") {
+      const { type } = styleContentAtKey;
+      if (["dynamic", "static"].indexOf(type) !== -1) {
+        acc[key] = styleContentAtKey;
+        return acc;
+      }
+      return acc;
+    }
+    throw new Error(`transformStylesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(styleContentAtKey, null, 2)}`);
+  }, newStyleObject);
+  return newStyleObject;
+};
+var transformAttributesAssignmentsToJson = (attributesObject) => {
+  const newStyleObject = {};
+  Object.keys(attributesObject).reduce((acc, key) => {
+    const attributeContent = attributesObject[key];
+    const entityType = typeof attributeContent;
+    if (["string", "number"].indexOf(entityType) !== -1) {
+      acc[key] = transformStringAssignmentToJson(attributeContent);
+      return acc;
+    }
+    if (!Array.isArray(attributeContent) && entityType === "object") {
+      const { type } = attributeContent;
+      if (["dynamic", "static", "import"].indexOf(type) !== -1) {
+        acc[key] = attributeContent;
+        return acc;
+      }
+      throw new Error(`transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(attributeContent, null, 2)}`);
+    }
+    throw new Error(`transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(attributeContent, null, 2)}`);
+  }, newStyleObject);
+  return newStyleObject;
+};
+var findFirstElementNode = (node) => {
+  switch (node.type) {
+    case "element":
+      return node;
+    case "static":
+    case "dynamic":
+    case "slot":
+      throw new Error("UIDL does not have any element node");
+    case "conditional":
+    case "repeat":
+      const childNode = node.content.node;
+      return findFirstElementNode(childNode);
+    default:
+      throw new Error(`Invalid node type '${node}'`);
+  }
+};
+var removeChildNodes = (node, criteria) => {
+  switch (node.type) {
+    case "element":
+      if (node.content.children) {
+        node.content.children = node.content.children.filter((child) => !criteria(child));
+        node.content.children.forEach((child) => removeChildNodes(child, criteria));
+      }
+      break;
+    case "repeat":
+      removeChildNodes(node.content.node, criteria);
+      break;
+    case "conditional":
+      removeChildNodes(node.content.node, criteria);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        removeChildNodes(node.content.fallback, criteria);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`removeChildNodes was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var extractExternalDependencies = (dependencies) => {
+  return Object.keys(dependencies).filter((key) => {
+    return dependencies[key].type === "package";
+  }).reduce((acc, key) => {
+    const depInfo = dependencies[key];
+    if (depInfo.path && depInfo.type === "package") {
+      acc[depInfo.path] = depInfo.version;
+    }
+    return acc;
+  }, {});
+};

dist/cjs/utils/uidl-utils.d.ts

@@ -1,2 +0,2 @@
-import { ComponentUIDL, UIDLStyleDefinitions, UIDLConditionalNode, UIDLElement, UIDLNode, UIDLAttributeValue, UIDLDynamicReference, UIDLRepeatContent, UIDLRepeatMeta, UIDLElementNode, UIDLDependency, UIDLStyleValue } from '@teleporthq/teleport-types';
+import { ComponentUIDL, UIDLStyleDefinitions, UIDLConditionalNode, UIDLElement, UIDLNode, UIDLStaticValue, UIDLAttributeValue, UIDLDynamicReference, UIDLRepeatContent, UIDLRepeatMeta, UIDLElementNode, UIDLDependency, UIDLStyleValue, UIDLStyleSheetContent } from '@teleporthq/teleport-types';
 export declare const extractRoutes: (rootComponent: ComponentUIDL) => UIDLConditionalNode[];
@@ -14,5 +14,5 @@ export declare const createWebComponentFriendlyName: (componentName: string) => string;
 };
-export declare const prefixAssetsPath: (prefix: string, originalString: string) => string;
+export declare const prefixAssetsPath: (prefix: string, originalString: string | undefined) => string;
 export declare const cloneObject: <T>(node: T) => T;
-export declare const traverseNodes: (node: UIDLNode, fn: (node: UIDLNode, parentNode: UIDLNode) => void, parent?: UIDLNode) => void;
+export declare const traverseNodes: (node: UIDLNode, fn: (node: UIDLNode, parentNode: UIDLNode) => void, parent?: UIDLNode | null) => void;
 export declare const traverseElements: (node: UIDLNode, fn: (element: UIDLElement) => void) => void;
@@ -25,5 +25,5 @@ export declare const traverseRepeats: (node: UIDLNode, fn: (element: UIDLRepeatContent) => void) => void;
 }
-export declare const splitDynamicAndStaticStyles: (style: Record<string, UIDLStyleValue>) => SplitResponse;
-export declare const cleanupDynamicStyles: (style: Record<string, UIDLStyleValue>) => Record<string, UIDLStyleValue>;
-export declare const transformDynamicStyles: (style: Record<string, UIDLStyleValue>, transform: (value: UIDLDynamicReference, key?: string) => any) => Record<string, any>;
+export declare const splitDynamicAndStaticStyles: (style: UIDLStyleDefinitions | Record<string, UIDLStyleSheetContent>) => SplitResponse;
+export declare const cleanupDynamicStyles: (style: UIDLStyleDefinitions) => UIDLStyleDefinitions;
+export declare const transformDynamicStyles: (style: UIDLStyleDefinitions, transform: (value: UIDLDynamicReference, key?: string) => any) => Record<string, any>;
 /**
@@ -38,4 +38,4 @@ * Transform properties like
  */
-export declare const transformStringAssignmentToJson: (declaration: string | number) => UIDLStyleValue;
-export declare const transformStylesAssignmentsToJson: (styleObject: Record<string, unknown>) => Record<string, UIDLStyleValue>;
+export declare const transformStringAssignmentToJson: (declaration: string | number) => UIDLStaticValue | UIDLStyleValue;
+export declare const transformStylesAssignmentsToJson: (styleObject: Record<string, unknown>) => UIDLStyleDefinitions;
 export declare const transformAttributesAssignmentsToJson: (attributesObject: Record<string, unknown>) => Record<string, UIDLAttributeValue>;
@@ -42,0 +42,0 @@ export declare const findFirstElementNode: (node: UIDLNode) => UIDLElementNode;

dist/esm/index.js

@@ -1,5 +0,474 @@
-import * as Constants from './constants';
-import * as StringUtils from './utils/string-utils';
-import * as UIDLUtils from './utils/uidl-utils';
-export { Constants, StringUtils, UIDLUtils };
-//# sourceMappingURL=index.js.map
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/teleport-shared/src/constants/index.ts
+var constants_exports = {};
+__export(constants_exports, {
+  ASSETS_IDENTIFIER: () => ASSETS_IDENTIFIER,
+  PRETTIER_CONFIG: () => PRETTIER_CONFIG
+});
+var ASSETS_IDENTIFIER = "playground_assets";
+var PRETTIER_CONFIG = {
+  arrowParens: "always",
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  trailingComma: "es5",
+  bracketSpacing: true
+};
+
+// packages/teleport-shared/src/utils/string-utils.ts
+var string_utils_exports = {};
+__export(string_utils_exports, {
+  addSpacesToEachLine: () => addSpacesToEachLine,
+  camelCaseToDashCase: () => camelCaseToDashCase,
+  capitalize: () => capitalize,
+  dashCaseToCamelCase: () => dashCaseToCamelCase,
+  dashCaseToUpperCamelCase: () => dashCaseToUpperCamelCase,
+  encode: () => encode,
+  generateCSSVariableName: () => generateCSSVariableName,
+  generateRandomString: () => generateRandomString,
+  removeIllegalCharacters: () => removeIllegalCharacters,
+  removeLastEmptyLine: () => removeLastEmptyLine,
+  slugify: () => slugify
+});
+var camelCaseToDashCase = (str) => str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
+var dashCaseToCamelCase = (str) => str.replace(/[-_]+(.)?/g, (_, chr) => chr ? chr.toUpperCase() : "");
+var capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+var dashCaseToUpperCamelCase = (str) => capitalize(dashCaseToCamelCase(str));
+var removeIllegalCharacters = (str) => {
+  if (typeof str !== "string") {
+    return null;
+  }
+  return str.replace(/[^a-zA-Z0-9-_]/g, "").replace(/^[0-9-_]*/, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+};
+var slugify = (str) => {
+  if (str == null) {
+    return null;
+  }
+  return str.toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "").replace(/&/g, "-and-");
+};
+var addSpacesToEachLine = (spaces, str) => {
+  const respaced = spaces + str;
+  return respaced.replace(/\n/g, `
+${spaces}`);
+};
+var removeLastEmptyLine = (str) => {
+  return str.replace(/\n$/g, "");
+};
+var encodingMap = {
+  "&": "&",
+  ">": ">",
+  "<": "&lt;",
+  '"': "&quot;",
+  "{": "&#123;",
+  "}": "&#125;",
+  "'": "&apos;"
+};
+var encode = (str) => {
+  return str.split("").map((char) => {
+    const encodedChar = encodingMap[char];
+    return encodedChar ? encodedChar : char;
+  }).join("");
+};
+var generateRandomString = () => Math.random().toString(36).substring(2, 6);
+var generateCSSVariableName = (name) => {
+  return name.startsWith("--") ? camelCaseToDashCase(name) : camelCaseToDashCase(`--${name}`);
+};
+
+// packages/teleport-shared/src/utils/uidl-utils.ts
+var uidl_utils_exports = {};
+__export(uidl_utils_exports, {
+  cleanupDynamicStyles: () => cleanupDynamicStyles,
+  cloneObject: () => cloneObject,
+  createWebComponentFriendlyName: () => createWebComponentFriendlyName,
+  extractExternalDependencies: () => extractExternalDependencies,
+  extractRoutes: () => extractRoutes,
+  findFirstElementNode: () => findFirstElementNode,
+  getComponentClassName: () => getComponentClassName,
+  getComponentFileName: () => getComponentFileName,
+  getComponentFolderPath: () => getComponentFolderPath,
+  getRepeatIteratorNameAndKey: () => getRepeatIteratorNameAndKey,
+  getStyleFileName: () => getStyleFileName,
+  getTemplateFileName: () => getTemplateFileName,
+  prefixAssetsPath: () => prefixAssetsPath,
+  removeChildNodes: () => removeChildNodes,
+  setFriendlyOutputOptions: () => setFriendlyOutputOptions,
+  splitDynamicAndStaticStyles: () => splitDynamicAndStaticStyles,
+  transformAttributesAssignmentsToJson: () => transformAttributesAssignmentsToJson,
+  transformDynamicStyles: () => transformDynamicStyles,
+  transformStringAssignmentToJson: () => transformStringAssignmentToJson,
+  transformStylesAssignmentsToJson: () => transformStylesAssignmentsToJson,
+  traverseElements: () => traverseElements,
+  traverseNodes: () => traverseNodes,
+  traverseRepeats: () => traverseRepeats
+});
+var extractRoutes = (rootComponent) => {
+  const rootElement = rootComponent.node.content;
+  return rootElement.children.filter((child) => child.type === "conditional" && child.content.reference.content.id === "route");
+};
+var createWebComponentFriendlyName = (componentName) => {
+  const dashCaseName = camelCaseToDashCase(componentName);
+  if (dashCaseName.includes("-")) {
+    return dashCaseName;
+  }
+  return `app-${dashCaseName}`;
+};
+var setFriendlyOutputOptions = (uidl) => {
+  uidl.outputOptions = uidl.outputOptions || {};
+  const defaultComponentName = "AppComponent";
+  const friendlyName = removeIllegalCharacters(uidl.name) || defaultComponentName;
+  if (!uidl.outputOptions.fileName) {
+    uidl.outputOptions.fileName = camelCaseToDashCase(friendlyName);
+  }
+  if (!uidl.outputOptions.componentClassName) {
+    uidl.outputOptions.componentClassName = dashCaseToUpperCamelCase(friendlyName);
+  }
+  traverseElements(uidl.node, (element) => {
+    if (element.dependency) {
+      element.semanticType = dashCaseToUpperCamelCase(removeIllegalCharacters(element.semanticType) || defaultComponentName);
+    } else {
+      element.semanticType = removeIllegalCharacters(element.semanticType);
+    }
+  });
+};
+var getComponentFileName = (component) => {
+  return component.outputOptions && component.outputOptions.fileName ? component.outputOptions.fileName : camelCaseToDashCase(getComponentClassName(component));
+};
+var getStyleFileName = (component) => {
+  const componentFileName = getComponentFileName(component);
+  return component.outputOptions && component.outputOptions.styleFileName ? component.outputOptions.styleFileName : componentFileName;
+};
+var getTemplateFileName = (component) => {
+  const componentFileName = getComponentFileName(component);
+  return component.outputOptions && component.outputOptions.templateFileName ? component.outputOptions.templateFileName : componentFileName;
+};
+var getComponentFolderPath = (component) => component.outputOptions && component.outputOptions.folderPath ? component.outputOptions.folderPath : [];
+var getComponentClassName = (component) => {
+  const componentName = component.outputOptions && component.outputOptions.componentClassName ? component.outputOptions.componentClassName : component.name;
+  if (componentName === "Component") {
+    return "AppComponent";
+  }
+  return componentName;
+};
+var getRepeatIteratorNameAndKey = (meta = {}) => {
+  const iteratorName = meta.iteratorName || "item";
+  const iteratorKey = meta.iteratorKey || (meta.useIndex ? "index" : iteratorName);
+  return {
+    iteratorKey,
+    iteratorName
+  };
+};
+var prefixAssetsPath = (prefix, originalString) => {
+  if (!originalString || !originalString.includes(ASSETS_IDENTIFIER)) {
+    return originalString;
+  }
+  if (originalString.startsWith("/")) {
+    return prefix + originalString;
+  }
+  return `${prefix}/${originalString}`;
+};
+var cloneObject = (node) => JSON.parse(JSON.stringify(node));
+var traverseNodes = (node, fn, parent = null) => {
+  var _a, _b, _c;
+  fn(node, parent);
+  switch (node.type) {
+    case "element":
+      const { attrs, children, style, abilities, referencedStyles } = node.content;
+      if (attrs) {
+        Object.keys(attrs).forEach((attrKey) => {
+          traverseNodes(attrs[attrKey], fn, node);
+        });
+      }
+      if (referencedStyles && Object.keys(referencedStyles).length > 0) {
+        Object.values(referencedStyles).forEach((styleRef) => {
+          if (styleRef.content.mapType === "inlined") {
+            traverseStyleObject(styleRef.content.styles);
+          }
+        });
+      }
+      if (style) {
+        traverseStyleObject(style);
+      }
+      if (((_a = abilities == null ? void 0 : abilities.link) == null ? void 0 : _a.type) === "url") {
+        traverseNodes((_c = (_b = abilities == null ? void 0 : abilities.link) == null ? void 0 : _b.content) == null ? void 0 : _c.url, fn, node);
+      }
+      if (children) {
+        children.forEach((child) => {
+          traverseNodes(child, fn, node);
+        });
+      }
+      break;
+    case "repeat":
+      traverseNodes(node.content.node, fn, node);
+      traverseNodes(node.content.dataSource, fn, node);
+      break;
+    case "conditional":
+      traverseNodes(node.content.node, fn, node);
+      traverseNodes(node.content.reference, fn, node);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseNodes(node.content.fallback, fn, node);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "import":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseNodes was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var traverseStyleObject = (style) => {
+  Object.keys(style).forEach((styleKey) => {
+    const styleValue = style[styleKey];
+    if (styleValue.type !== "static" && styleValue.type !== "dynamic") {
+      throw new Error(`We support only 'static' and 'dynamic' content for styles`);
+    }
+  });
+};
+var traverseElements = (node, fn) => {
+  switch (node.type) {
+    case "element":
+      fn(node.content);
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseElements(child, fn);
+        });
+      }
+      break;
+    case "repeat":
+      traverseElements(node.content.node, fn);
+      break;
+    case "conditional":
+      traverseElements(node.content.node, fn);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseElements(node.content.fallback, fn);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseElements was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var traverseRepeats = (node, fn) => {
+  switch (node.type) {
+    case "element":
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseRepeats(child, fn);
+        });
+      }
+      break;
+    case "repeat":
+      fn(node.content);
+      traverseRepeats(node.content.node, fn);
+      break;
+    case "conditional":
+      traverseRepeats(node.content.node, fn);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        traverseRepeats(node.content.fallback, fn);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`traverseRepeats was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var splitDynamicAndStaticStyles = (style) => {
+  const responsePayload = { staticStyles: {}, dynamicStyles: {}, tokenStyles: {} };
+  Object.keys(style).reduce((acc, styleKey) => {
+    const styleValue = style[styleKey];
+    const { staticStyles, dynamicStyles, tokenStyles } = acc;
+    switch (styleValue.type) {
+      case "dynamic":
+        if (styleValue.content.referenceType === "token") {
+          tokenStyles[styleKey] = styleValue;
+          return acc;
+        }
+        dynamicStyles[styleKey] = styleValue;
+        return acc;
+      case "static":
+        staticStyles[styleKey] = styleValue;
+        return acc;
+      default:
+        throw new Error(`splitDynamicAndStaticStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, responsePayload);
+  return responsePayload;
+};
+var cleanupDynamicStyles = (style) => {
+  return Object.keys(style).reduce((resultedStyles, styleKey) => {
+    const styleValue = style[styleKey];
+    switch (styleValue.type) {
+      case "dynamic":
+        return resultedStyles;
+      case "static":
+        resultedStyles[styleKey] = styleValue;
+        return resultedStyles;
+      default:
+        throw new Error(`cleanupDynamicStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, {});
+};
+var transformDynamicStyles = (style, transform) => {
+  return Object.keys(style).reduce((resultedStyles, styleKey) => {
+    const styleValue = style[styleKey];
+    switch (styleValue.type) {
+      case "dynamic":
+        resultedStyles[styleKey] = transform(styleValue, styleKey);
+        return resultedStyles;
+      case "static":
+        resultedStyles[styleKey] = styleValue.content;
+        return resultedStyles;
+      default:
+        throw new Error(`transformDynamicStyles encountered an unknown style definition ${JSON.stringify(styleValue, null, 2)}`);
+    }
+  }, {});
+};
+var transformStringAssignmentToJson = (declaration) => {
+  if (typeof declaration === "number") {
+    return {
+      type: "static",
+      content: declaration
+    };
+  }
+  const parts = declaration.split(".");
+  const prefix = parts[0];
+  const path = parts.slice(1).join(".");
+  if (["$props", "$state", "$local"].indexOf(prefix) !== -1) {
+    let referenceType = "prop";
+    if (prefix !== "$props") {
+      referenceType = prefix.replace("$", "");
+    }
+    return {
+      type: "dynamic",
+      content: {
+        referenceType,
+        id: path
+      }
+    };
+  }
+  return {
+    type: "static",
+    content: declaration
+  };
+};
+var transformStylesAssignmentsToJson = (styleObject) => {
+  const newStyleObject = {};
+  Object.keys(styleObject).reduce((acc, key) => {
+    const styleContentAtKey = styleObject[key];
+    const entityType = typeof styleContentAtKey;
+    if (["string", "number"].indexOf(entityType) !== -1) {
+      acc[key] = transformStringAssignmentToJson(styleContentAtKey);
+      return acc;
+    }
+    if (!Array.isArray(styleContentAtKey) && entityType === "object") {
+      const { type } = styleContentAtKey;
+      if (["dynamic", "static"].indexOf(type) !== -1) {
+        acc[key] = styleContentAtKey;
+        return acc;
+      }
+      return acc;
+    }
+    throw new Error(`transformStylesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(styleContentAtKey, null, 2)}`);
+  }, newStyleObject);
+  return newStyleObject;
+};
+var transformAttributesAssignmentsToJson = (attributesObject) => {
+  const newStyleObject = {};
+  Object.keys(attributesObject).reduce((acc, key) => {
+    const attributeContent = attributesObject[key];
+    const entityType = typeof attributeContent;
+    if (["string", "number"].indexOf(entityType) !== -1) {
+      acc[key] = transformStringAssignmentToJson(attributeContent);
+      return acc;
+    }
+    if (!Array.isArray(attributeContent) && entityType === "object") {
+      const { type } = attributeContent;
+      if (["dynamic", "static", "import"].indexOf(type) !== -1) {
+        acc[key] = attributeContent;
+        return acc;
+      }
+      throw new Error(`transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(attributeContent, null, 2)}`);
+    }
+    throw new Error(`transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(attributeContent, null, 2)}`);
+  }, newStyleObject);
+  return newStyleObject;
+};
+var findFirstElementNode = (node) => {
+  switch (node.type) {
+    case "element":
+      return node;
+    case "static":
+    case "dynamic":
+    case "slot":
+      throw new Error("UIDL does not have any element node");
+    case "conditional":
+    case "repeat":
+      const childNode = node.content.node;
+      return findFirstElementNode(childNode);
+    default:
+      throw new Error(`Invalid node type '${node}'`);
+  }
+};
+var removeChildNodes = (node, criteria) => {
+  switch (node.type) {
+    case "element":
+      if (node.content.children) {
+        node.content.children = node.content.children.filter((child) => !criteria(child));
+        node.content.children.forEach((child) => removeChildNodes(child, criteria));
+      }
+      break;
+    case "repeat":
+      removeChildNodes(node.content.node, criteria);
+      break;
+    case "conditional":
+      removeChildNodes(node.content.node, criteria);
+      break;
+    case "slot":
+      if (node.content.fallback) {
+        removeChildNodes(node.content.fallback, criteria);
+      }
+      break;
+    case "static":
+    case "dynamic":
+    case "raw":
+      break;
+    default:
+      throw new Error(`removeChildNodes was given an unsupported node type ${JSON.stringify(node, null, 2)}`);
+  }
+};
+var extractExternalDependencies = (dependencies) => {
+  return Object.keys(dependencies).filter((key) => {
+    return dependencies[key].type === "package";
+  }).reduce((acc, key) => {
+    const depInfo = dependencies[key];
+    if (depInfo.path && depInfo.type === "package") {
+      acc[depInfo.path] = depInfo.version;
+    }
+    return acc;
+  }, {});
+};
+export {
+  constants_exports as Constants,
+  string_utils_exports as StringUtils,
+  uidl_utils_exports as UIDLUtils
+};

package.json

 {
   "name": "@teleporthq/teleport-shared",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "description": "A utility belt for the entire teleportHQ ecosystem",
@@ -11,2 +11,7 @@ "author": "teleportHQ",
   "module": "dist/esm/index.js",
+  "exports": {
+    "module": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js",
+    "import": "./dist/esm/index.js"
+  },
   "sideEffects": false,
@@ -25,13 +30,11 @@ "repository": {
     "clean": "rimraf dist",
-    "build": "npm run build:cjs & npm run build:esm",
-    "build:cjs": "tsc -p tsconfig-cjs.json",
-    "build:esm": "tsc -p tsconfig-esm.json"
+    "types": "tsc -p tsconfig.json"
   },
   "dependencies": {
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-types": "^0.16.3",
+    "@teleporthq/teleport-types": "^0.17.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "7e373501206d293ea7ac0494b563ee5f6a2fccb2"
+  "gitHead": "959317a18068b52ffd8b912e41d123f70d97e7bc"
 }

src/constants/index.ts

@@ -6,3 +6,3 @@ import { PrettierFormatOptions } from '@teleporthq/teleport-types'
   arrowParens: 'always',
-  printWidth: 100,
+  printWidth: 80,
   tabWidth: 2,
@@ -9,0 +9,0 @@ useTabs: false,

src/utils/uidl-utils.ts

@@ -21,2 +21,3 @@ import { ASSETS_IDENTIFIER } from '../constants'
   UIDLStyleValue,
+  UIDLStyleSheetContent,
 } from '@teleporthq/teleport-types'
@@ -298,6 +299,5 @@
 }
-export const splitDynamicAndStaticStyles = (style: UIDLStyleDefinitions): SplitResponse => {
-  // const staticStyles: UIDLStyleDefinitions = {}
-  // const dynamicStyles: UIDLStyleDefinitions = {}
-
+export const splitDynamicAndStaticStyles = (
+  style: UIDLStyleDefinitions | Record<string, UIDLStyleSheetContent>
+): SplitResponse => {
   const responsePayload: SplitResponse = { staticStyles: {}, dynamicStyles: {}, tokenStyles: {} }
@@ -317,5 +317,7 @@
         return acc
+
       case 'static':
         staticStyles[styleKey] = styleValue
         return acc
+
       default:
@@ -330,4 +332,2 @@ throw new Error(
     }
-
-    return acc
   }, responsePayload)
@@ -334,0 +334,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

139861

decreased by-56.9%

Number of package files

18

decreased by-52.63%

Lines of code

2219

decreased by-4.39%

Dependency changes

• + Added@teleporthq/teleport-types@0.17.7(transitive)

• - Removed@teleporthq/teleport-types@0.16.3(transitive)

• Updated@teleporthq/teleport-types@^0.17.0