@teleporthq/teleport-plugin-common - npm Package Compare versions

Comparing version 0.32.0-alpha.0 to 0.32.0

dist/cjs/builders/ast-builders.d.ts

@@ -11,3 +11,3 @@ import * as types from '@babel/types';
 export declare const createGenericImportStatement: (path: string, imports: ImportIdentifier[], t?: typeof types) => types.ImportDeclaration;
-declare type JSXChild = types.JSXText | types.JSXExpressionContainer | types.JSXSpreadChild | types.JSXElement | types.JSXFragment;
+type JSXChild = types.JSXText | types.JSXExpressionContainer | types.JSXSpreadChild | types.JSXElement | types.JSXFragment;
 export declare const createJSXTag: (tagName: string, children?: JSXChild[], selfClosing?: boolean, t?: typeof types) => types.JSXElement;
@@ -14,0 +14,0 @@ export declare const createSelfClosingJSXTag: (tagName: string) => types.JSXElement;

dist/cjs/builders/style-builders.d.ts

@@ -6,2 +6,3 @@ import * as types from '@babel/types';
 export declare const createCSSClassWithSelector: (key: string, selector: string, styleObject: Record<string, string | number>) => string;
+export declare const createFontDecleration: (styleObject: Record<string, string | number>) => string;
 export declare const createCSSClassWithMediaQuery: (mediaOffset: string, styleObject: Record<string, string | number | Record<string, string | number>>) => string;
@@ -8,0 +9,0 @@ export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => string | ParsedASTNode;

dist/cjs/builders/style-builders.js

@@ -40,3 +40,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setPropValueForCompStyle = exports.generateStylesFromStyleSetDefinitions = exports.generateMediaStyle = exports.createDynamicStyleExpression = exports.createCSSClassWithMediaQuery = exports.createCSSClassWithSelector = exports.createCSSClass = void 0;
+exports.setPropValueForCompStyle = exports.generateStylesFromStyleSetDefinitions = exports.generateMediaStyle = exports.createDynamicStyleExpression = exports.createCSSClassWithMediaQuery = exports.createFontDecleration = exports.createCSSClassWithSelector = exports.createCSSClass = void 0;
 var jss_1 = __importDefault(require("jss"));
@@ -73,2 +73,10 @@ var jss_preset_default_1 = __importDefault(require("jss-preset-default"));
 exports.createCSSClassWithSelector = createCSSClassWithSelector;
+var createFontDecleration = function (styleObject) {
+    return jss_1.default
+        .createStyleSheet({
+        '@font-face': styleObject,
+    })
+        .toString();
+};
+exports.createFontDecleration = createFontDecleration;
 var createCSSClassWithMediaQuery = function (mediaOffset, styleObject) {
@@ -75,0 +83,0 @@ return jss_1.default

dist/cjs/node-handlers/node-to-html/index.js

@@ -98,2 +98,8 @@ "use strict";
     switch (node.type) {
+        case 'inject':
+            if (node === null || node === void 0 ? void 0 : node.dependency) {
+                /* tslint:disable:no-string-literal */
+                params.dependencies['Script'] = node.dependency;
+            }
+            return node.content.toString();
         case 'raw':
@@ -100,0 +106,0 @@ return generateRawHTMLNode(node, params, templateSyntax);

dist/cjs/node-handlers/node-to-html/types.d.ts

@@ -21,3 +21,3 @@ import { UIDLDependency, UIDLEventHandlerStatement, UIDLElementNode } from '@teleporthq/teleport-types';
 }
-export declare type NodeToHTML<NodeType, ReturnType> = (node: NodeType, params: HTMLTemplateGenerationParams, templateSyntax: HTMLTemplateSyntax) => ReturnType;
+export type NodeToHTML<NodeType, ReturnType> = (node: NodeType, params: HTMLTemplateGenerationParams, templateSyntax: HTMLTemplateSyntax) => ReturnType;
 //# sourceMappingURL=types.d.ts.map

dist/cjs/node-handlers/node-to-jsx/index.js

@@ -73,31 +73,3 @@ "use strict";
     if (attrs) {
-        Object.keys(attrs).forEach(function (attrKey) {
-            var attributeValue = attrs[attrKey];
-            switch (attributeValue.type) {
-                case 'dynamic':
-                    var referenceType = attributeValue.content.referenceType;
-                    switch (referenceType) {
-                        default:
-                            var prefix = options.dynamicReferencePrefixMap[referenceType];
-                            (0, ast_utils_1.addDynamicAttributeToJSXTag)(elementTag, attrKey, attributeValue.content.id, prefix);
-                            break;
-                    }
-                    break;
-                case 'import':
-                    (0, ast_utils_1.addDynamicAttributeToJSXTag)(elementTag, attrKey, attributeValue.content.id);
-                    break;
-                case 'raw':
-                    (0, ast_utils_1.addRawAttributeToJSXTag)(elementTag, attrKey, attributeValue);
-                    break;
-                case 'comp-style':
-                case 'static':
-                    (0, ast_utils_1.addAttributeToJSXTag)(elementTag, attrKey, attributeValue.content);
-                    break;
-                case 'expr':
-                    (0, ast_utils_1.addDynamicExpressionAttributeToJSXTag)(elementTag, attributeValue, attrKey);
-                    break;
-                default:
-                    throw new Error("generateElementNode could not generate code for attribute of type ".concat(JSON.stringify(attributeValue)));
-            }
-        });
+        addAttributesToJSXTag(attrs, elementTag, options);
     }
@@ -129,2 +101,33 @@ if (events) {
 exports.default = generateElementNode;
+var addAttributesToJSXTag = function (attrs, elementTag, options) {
+    Object.keys(attrs).forEach(function (attrKey) {
+        var attributeValue = attrs[attrKey];
+        switch (attributeValue.type) {
+            case 'dynamic':
+                var referenceType = attributeValue.content.referenceType;
+                switch (referenceType) {
+                    default:
+                        var prefix = options.dynamicReferencePrefixMap[referenceType];
+                        (0, ast_utils_1.addDynamicAttributeToJSXTag)(elementTag, attrKey, attributeValue.content.id, prefix);
+                        break;
+                }
+                break;
+            case 'import':
+                (0, ast_utils_1.addDynamicAttributeToJSXTag)(elementTag, attrKey, attributeValue.content.id);
+                break;
+            case 'raw':
+                (0, ast_utils_1.addRawAttributeToJSXTag)(elementTag, attrKey, attributeValue);
+                break;
+            case 'comp-style':
+            case 'static':
+                (0, ast_utils_1.addAttributeToJSXTag)(elementTag, attrKey, attributeValue.content);
+                break;
+            case 'expr':
+                (0, ast_utils_1.addDynamicExpressionAttributeToJSXTag)(elementTag, attributeValue, attrKey);
+                break;
+            default:
+                throw new Error("generateElementNode could not generate code for attribute of type ".concat(JSON.stringify(attributeValue)));
+        }
+    });
+};
 var generateNode = function (node, params, options) {
@@ -140,2 +143,8 @@ switch (node.type) {
             ];
+        case 'inject':
+            if (node === null || node === void 0 ? void 0 : node.dependency) {
+                /* tslint:disable:no-string-literal */
+                params.dependencies['Script'] = node.dependency;
+            }
+            return [node.content.toString()];
         case 'static':
@@ -148,2 +157,6 @@ return [teleport_shared_1.StringUtils.encode(node.content.toString())];
             return generateCMSNode(node, params, options);
+        case 'cms-list-repeater':
+            return generateCMSListRepeaterNode(node, params, options);
+        case 'cms-mixed-type':
+            return generateCMSMixedTypeNode(node, params, options);
         case 'element':
@@ -155,4 +168,2 @@ return [generateElementNode(node, params, options)];
             return generateConditionalNode(node, params, options);
-        case 'cms-list-repeater':
-            return generateCMSListRepeaterNode(node, params, options);
         case 'slot':
@@ -173,2 +184,26 @@ if (options.slotHandling === 'native') {
 };
+var generateCMSMixedTypeNode = function (node, params, options) {
+    var _a = node.content, _b = _a.nodes, error = _b.error, fallback = _b.fallback, elementType = _a.elementType, renderPropIdentifier = _a.renderPropIdentifier, _c = _a.mappings, mappings = _c === void 0 ? {} : _c, attrs = _a.attrs, dependency = _a.dependency;
+    var jsxTag = teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(elementType);
+    var cmsMixedNode = __1.ASTBuilders.createJSXTag(jsxTag, [], true);
+    var mappingsObject = [];
+    if (attrs) {
+        addAttributesToJSXTag(attrs, cmsMixedNode, options);
+    }
+    if (dependency) {
+        params.dependencies[elementType] = dependency;
+    }
+    Object.keys(mappings).forEach(function (key) {
+        var element = generateElementNode(mappings[key], params, options);
+        mappingsObject.push(types.objectProperty(types.identifier(key), types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], element)));
+    });
+    cmsMixedNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('mappingConfiguration'), types.jsxExpressionContainer(types.objectExpression(mappingsObject))));
+    if (fallback) {
+        cmsMixedNode.openingElement.attributes.push(types.jSXAttribute(types.jsxIdentifier('renderDefault'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], generateElementNode(fallback, params, options)))));
+    }
+    if (error) {
+        cmsMixedNode.openingElement.attributes.push(types.jSXAttribute(types.jsxIdentifier('renderError'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], generateElementNode(error, params, options)))));
+    }
+    return [cmsMixedNode];
+};
 var generateCMSNode = function (node, params, options) {
@@ -206,3 +241,11 @@ var _a = node.content, initialData = _a.initialData, key = _a.key, renderPropIdentifier = _a.renderPropIdentifier, _b = _a.resource, _c = _b === void 0 ? {} : _b, resourceParams = _c.params, router = _a.router, elementType = _a.elementType, dependency = _a.dependency;
         cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
-        cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.identifier('props.page'))));
+        var keyValue = 'props?.pagination?.page';
+        if (node.type === 'cms-item') {
+            var entityKeyProperty = node.content.entityKeyProperty;
+            var entityName = initialData.content.id;
+            keyValue = entityKeyProperty
+                ? "props?.".concat(entityName, "?.").concat(entityKeyProperty)
+                : "props?.".concat(entityName, "?.id");
+        }
+        cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.identifier(keyValue))));
     }
@@ -219,2 +262,7 @@ if (Object.keys(resourceParams || {}).length > 0) {
             }
+            if (property.type === 'dynamic') {
+                acc.push(types.objectProperty(types.stringLiteral(attrKey), property.content.referenceType === 'prop'
+                    ? types.memberExpression(types.identifier(options.dynamicReferencePrefixMap[property.content.referenceType]), types.identifier(property.content.id))
+                    : types.identifier(property.content.id)));
+            }
             return acc;
@@ -258,4 +306,6 @@ }, []);
 var generateCMSListRepeaterNode = function (node, params, options) {
-    var repeaterNode = __1.ASTBuilders.createJSXTag('Repeater', [], true);
-    repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('items'), types.jsxExpressionContainer(types.identifier('params'))));
+    var _a, _b;
+    var jsxTag = teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(node.content.elementType);
+    var repeaterNode = __1.ASTBuilders.createJSXTag(jsxTag, [], true);
+    repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('items'), types.jsxExpressionContainer(types.identifier((_a = node.content.source) !== null && _a !== void 0 ? _a : 'params'))));
     repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jSXIdentifier('renderItem'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(node.content.renderPropIdentifier)], generateNode(node.content.nodes.list, params, options)[0]))));
@@ -265,2 +315,5 @@ if ('empty' in node.content.nodes) {
     }
+    if (((_b = node.content) === null || _b === void 0 ? void 0 : _b.dependency) && options.dependencyHandling === 'import') {
+        params.dependencies[jsxTag] = node.content.dependency;
+    }
     return [repeaterNode];
@@ -267,0 +320,0 @@ };

dist/cjs/node-handlers/node-to-jsx/types.d.ts

@@ -23,6 +23,6 @@ import * as types from '@babel/types';
 }
-export declare type NodeToJSX<NodeType, ReturnType> = (node: NodeType, params: JSXGenerationParams, options?: JSXGenerationOptions) => ReturnType;
-export declare type JSXASTReturnType = string | types.JSXExpressionContainer | types.JSXElement | types.LogicalExpression | types.Identifier | types.MemberExpression;
-export declare type BinaryOperator = '===' | '+' | '-' | '/' | '%' | '*' | '**' | '&' | '|' | '>>' | '>>>' | '<<' | '^' | '==' | '!=' | '!==' | 'in' | 'instanceof' | '>' | '<' | '>=' | '<=';
-export declare type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof';
+export type NodeToJSX<NodeType, ReturnType> = (node: NodeType, params: JSXGenerationParams, options?: JSXGenerationOptions) => ReturnType;
+export type JSXASTReturnType = string | types.JSXExpressionContainer | types.JSXElement | types.LogicalExpression | types.Identifier | types.MemberExpression;
+export type BinaryOperator = '===' | '+' | '-' | '/' | '%' | '*' | '**' | '&' | '|' | '>>' | '>>>' | '<<' | '^' | '==' | '!=' | '!==' | 'in' | 'instanceof' | '>' | '<' | '>=' | '<=';
+export type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof';
 export interface ConditionalIdentifier {
@@ -29,0 +29,0 @@ key: string;

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

@@ -19,4 +19,4 @@ import * as types from '@babel/types';
 export declare const addDynamicExpressionAttributeToJSXTag: (jsxASTNode: types.JSXElement, dynamicRef: UIDLExpressionValue, attrKey: string, t?: typeof types) => void;
-export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, attrValues?: Array<types.MemberExpression | types.Identifier>, t?: typeof types) => void;
-export declare const stringAsTemplateLiteral: (str: string, t?: typeof types) => types.TemplateLiteral;
+export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, attrValues?: Array<types.MemberExpression | types.Identifier | types.StringLiteral>, t?: typeof types) => void;
+export declare const stringAsTemplateLiteral: (str: string) => types.TemplateLiteral;
 export declare const addAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue?: boolean | unknown, t?: typeof types) => void;
@@ -31,3 +31,3 @@ export declare const addRawAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue: UIDLRawValue, t?: typeof types) => void;
 }, t?: typeof types) => types.ObjectExpression;
-declare type ExpressionLiteral = types.StringLiteral | types.BooleanLiteral | types.NumericLiteral | types.Identifier | types.ArrayExpression | types.ObjectExpression | types.NullLiteral;
+type ExpressionLiteral = types.StringLiteral | types.BooleanLiteral | types.NumericLiteral | types.Identifier | types.ArrayExpression | types.ObjectExpression | types.NullLiteral;
 export declare const convertValueToLiteral: (value: any, explicitType?: string, t?: typeof types) => ExpressionLiteral;
@@ -48,8 +48,8 @@ export declare const addPropertyToASTObject: (obj: types.ObjectExpression, key: string, value: any, t?: typeof types) => void;
 export declare const generateRemoteResourceASTs: (resource: UIDLResourceItem) => types.VariableDeclaration[];
-export declare const generateMemberExpressionASTFromBase: (base: types.MemberExpression | types.Identifier, path: string[]) => types.MemberExpression;
-export declare const generateMemberExpressionASTFromPath: (path: Array<string | number>) => types.MemberExpression | types.Identifier;
-export declare const generateURLParamsAST: (urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue>) => types.TemplateLiteral | null;
-export declare const resolveObjectValue: (prop: UIDLStaticValue | UIDLPropValue | UIDLExpressionValue) => types.BooleanLiteral | types.Identifier | types.NumericLiteral | types.ObjectExpression | types.StringLiteral;
+export declare const generateMemberExpressionASTFromBase: (base: types.OptionalMemberExpression | types.MemberExpression | types.Identifier, path: string[]) => types.OptionalMemberExpression;
+export declare const generateMemberExpressionASTFromPath: (path: Array<string | number>) => types.OptionalMemberExpression | types.Identifier;
+export declare const generateURLParamsAST: (urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue | UIDLExpressionValue>) => types.TemplateLiteral | null;
+export declare const resolveObjectValue: (prop: UIDLStaticValue | UIDLExpressionValue) => types.Identifier | types.StringLiteral | types.NumericLiteral | types.BooleanLiteral | types.ObjectExpression | types.Expression;
 export declare const getExpressionFromUIDLExpressionNode: (node: UIDLExpressionValue) => types.Expression;
 export {};
 //# sourceMappingURL=ast-utils.d.ts.map

dist/cjs/utils/ast-utils.js

@@ -43,2 +43,3 @@ "use strict";
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
+var preset_react_1 = __importDefault(require("@babel/preset-react"));
 var __1 = require("..");
@@ -165,11 +166,14 @@ /**
 exports.addMultipleDynamicAttributesToJSXTag = addMultipleDynamicAttributesToJSXTag;
-var stringAsTemplateLiteral = function (str, t) {
-    if (t === void 0) { t = types; }
-    var formmattedString = "\n".concat(str, "\n  ");
-    return t.templateLiteral([
-        t.templateElement({
-            raw: formmattedString,
-            cooked: formmattedString,
-        }, true),
-    ], []);
+var stringAsTemplateLiteral = function (str) {
+    var ast = (0, core_1.parse)('<style jsx>{`' + str + '`}</style>', {
+        presets: [preset_react_1.default],
+        sourceType: 'module',
+    });
+    if (!('program' in ast)) {
+        throw new Error("The AST does not have a program node in the expression inside addDynamicExpressionAttributeToJSXTag");
+    }
+    var theStatementOnlyWihtoutTheProgram = ast.program.body[0];
+    var container = theStatementOnlyWihtoutTheProgram.expression
+        .children[0];
+    return container.expression;
 };
@@ -187,2 +191,11 @@ exports.stringAsTemplateLiteral = stringAsTemplateLiteral;
     }
+    var attribute = jsxNode.openingElement.attributes.find(function (attr) {
+        if (attr.type === 'JSXAttribute') {
+            return attr.name.name === attrName;
+        }
+    });
+    if (attribute && attribute.value && attribute.value.type === 'StringLiteral') {
+        attribute.value.value = "".concat(attribute.value.value, " ").concat(attrValue);
+        return;
+    }
     jsxNode.openingElement.attributes.push(attributeDefinition);
@@ -390,3 +403,3 @@ };
         t.variableDeclarator(t.arrayPattern([
-            t.identifier(teleport_shared_1.StringUtils.createStateOrPropStoringValue(stateKey)),
+            t.identifier(stateKey),
             t.identifier(teleport_shared_1.StringUtils.createStateStoringFunction(stateKey)),
@@ -413,3 +426,3 @@ ]), t.callExpression(t.identifier('useState'), [defaultValueArgument])),
     var authHeaderAST = computeAuthorizationHeaderAST(resource === null || resource === void 0 ? void 0 : resource.headers);
-    var headersASTs = generateRESTHeadersAST(resource === null || resource === void 0 ? void 0 : resource.headers);
+    var headersASTs = (resource === null || resource === void 0 ? void 0 : resource.headers) ? generateRESTHeadersAST(resource.headers) : [];
     var queryParams = (0, exports.generateURLParamsAST)(resource === null || resource === void 0 ? void 0 : resource.params);
@@ -430,2 +443,5 @@ var fetchUrlQuasis = fetchUrl.quasis;
         }
+        if (prop.type === 'expr') {
+            acc.push(types.objectProperty(types.stringLiteral(item), __1.ASTUtils.getExpressionFromUIDLExpressionNode(prop)));
+        }
         if (prop.type === 'dynamic') {
@@ -444,9 +460,15 @@ acc.push(types.spreadElement(types.logicalExpression('&&', types.memberExpression(types.identifier('params'), types.stringLiteral(prop.content.id), true, false), types.objectExpression([
         : fetchUrl;
+    var method = types.objectProperty(types.identifier('method'), types.stringLiteral(resource.method));
+    var allHeaders = [];
+    if (authHeaderAST) {
+        allHeaders.push(authHeaderAST);
+    }
+    if (headersASTs.length) {
+        allHeaders = allHeaders.concat(headersASTs);
+    }
+    var headers = types.objectProperty(types.identifier('headers'), types.objectExpression(allHeaders));
     var fetchAST = types.variableDeclaration('const', [
         types.variableDeclarator(types.identifier('data'), types.awaitExpression(types.callExpression(types.identifier('fetch'), [
             url,
-            types.objectExpression([
-                types.objectProperty(types.identifier('method'), types.stringLiteral(resource.method)),
-                types.objectProperty(types.identifier('headers'), types.objectExpression(__spreadArray(__spreadArray([], headersASTs, true), [authHeaderAST], false))),
-            ]),
+            types.objectExpression([method, headers]),
         ]))),
@@ -501,3 +523,7 @@ ]);
         .map(function (header) {
-        return types.objectProperty(types.stringLiteral(header), types.stringLiteral(String(headers[header].content)));
+        var headerResolved = resolveResourceValue(headers[header]);
+        var value = headers[header].type === 'static'
+            ? types.stringLiteral(String(headerResolved))
+            : types.identifier(String(headerResolved));
+        return types.objectProperty(types.stringLiteral(header), value);
     });
@@ -507,7 +533,7 @@ };
     if (path.length === 1) {
-        return types.memberExpression(base, types.identifier(path[0]), false);
+        return types.optionalMemberExpression(base, types.identifier(path[0]), false, true);
     }
     var pathClone = __spreadArray([], path, true);
     pathClone.pop();
-    return types.memberExpression((0, exports.generateMemberExpressionASTFromBase)(base, pathClone), types.identifier(path[path.length - 1]), false);
+    return types.optionalMemberExpression((0, exports.generateMemberExpressionASTFromBase)(base, pathClone), types.identifier(path[path.length - 1]), false, true);
 };
@@ -523,6 +549,6 @@ exports.generateMemberExpressionASTFromBase = generateMemberExpressionASTFromBase;
     if (typeof currentPath === 'number') {
-        return types.memberExpression((0, exports.generateMemberExpressionASTFromPath)(pathClone), types.numericLiteral(currentPath), true);
+        return types.optionalMemberExpression((0, exports.generateMemberExpressionASTFromPath)(pathClone), types.numericLiteral(currentPath), false, true);
     }
     var containsSpecial = currentPath.indexOf('.') !== -1 || currentPath.indexOf('-') !== -1;
-    return types.memberExpression((0, exports.generateMemberExpressionASTFromPath)(pathClone), containsSpecial ? types.stringLiteral(currentPath) : types.identifier(currentPath), containsSpecial);
+    return types.optionalMemberExpression((0, exports.generateMemberExpressionASTFromPath)(pathClone), containsSpecial ? types.stringLiteral(currentPath) : types.identifier(currentPath), containsSpecial, true);
 };
@@ -548,3 +574,2 @@ exports.generateMemberExpressionASTFromPath = generateMemberExpressionASTFromPath;
         query[prefix] = resolveUrlParamsValue(field);
-        return;
     }
@@ -651,15 +676,17 @@ };
 var resolveObjectValue = function (prop) {
+    if (prop.type === 'static') {
+        var value = typeof prop.content === 'string'
+            ? types.stringLiteral(prop.content)
+            : typeof prop.content === 'boolean'
+                ? types.booleanLiteral(prop.content)
+                : typeof prop.content === 'number'
+                    ? types.numericLiteral(prop.content)
+                    : typeof prop.content === 'object'
+                        ? (0, exports.objectToObjectExpression)(prop.content)
+                        : types.identifier(String(prop.content));
+        return value;
+    }
     if (prop.type === 'expr') {
-        return types.identifier(prop.content);
+        return (0, exports.getExpressionFromUIDLExpressionNode)(prop);
     }
-    var value = typeof prop.content === 'string'
-        ? types.stringLiteral(prop.content)
-        : typeof prop.content === 'boolean'
-            ? types.booleanLiteral(prop.content)
-            : typeof prop.content === 'number'
-                ? types.numericLiteral(prop.content)
-                : typeof prop.content === 'object'
-                    ? (0, exports.objectToObjectExpression)(prop.content)
-                    : types.identifier(String(prop.content));
-    return value;
 };
@@ -666,0 +693,0 @@ exports.resolveObjectValue = resolveObjectValue;

dist/esm/builders/ast-builders.d.ts

@@ -11,3 +11,3 @@ import * as types from '@babel/types';
 export declare const createGenericImportStatement: (path: string, imports: ImportIdentifier[], t?: typeof types) => types.ImportDeclaration;
-declare type JSXChild = types.JSXText | types.JSXExpressionContainer | types.JSXSpreadChild | types.JSXElement | types.JSXFragment;
+type JSXChild = types.JSXText | types.JSXExpressionContainer | types.JSXSpreadChild | types.JSXElement | types.JSXFragment;
 export declare const createJSXTag: (tagName: string, children?: JSXChild[], selfClosing?: boolean, t?: typeof types) => types.JSXElement;
@@ -14,0 +14,0 @@ export declare const createSelfClosingJSXTag: (tagName: string) => types.JSXElement;

dist/esm/builders/style-builders.d.ts

@@ -6,2 +6,3 @@ import * as types from '@babel/types';
 export declare const createCSSClassWithSelector: (key: string, selector: string, styleObject: Record<string, string | number>) => string;
+export declare const createFontDecleration: (styleObject: Record<string, string | number>) => string;
 export declare const createCSSClassWithMediaQuery: (mediaOffset: string, styleObject: Record<string, string | number | Record<string, string | number>>) => string;
@@ -8,0 +9,0 @@ export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => string | ParsedASTNode;

dist/esm/builders/style-builders.js

@@ -41,2 +41,9 @@ var __assign = (this && this.__assign) || function () {
 };
+export var createFontDecleration = function (styleObject) {
+    return jss
+        .createStyleSheet({
+        '@font-face': styleObject,
+    })
+        .toString();
+};
 export var createCSSClassWithMediaQuery = function (mediaOffset, styleObject) {
@@ -43,0 +50,0 @@ return jss

dist/esm/node-handlers/node-to-html/index.js

@@ -73,2 +73,8 @@ var __assign = (this && this.__assign) || function () {
     switch (node.type) {
+        case 'inject':
+            if (node === null || node === void 0 ? void 0 : node.dependency) {
+                /* tslint:disable:no-string-literal */
+                params.dependencies['Script'] = node.dependency;
+            }
+            return node.content.toString();
         case 'raw':
@@ -75,0 +81,0 @@ return generateRawHTMLNode(node, params, templateSyntax);

dist/esm/node-handlers/node-to-html/types.d.ts

@@ -21,3 +21,3 @@ import { UIDLDependency, UIDLEventHandlerStatement, UIDLElementNode } from '@teleporthq/teleport-types';
 }
-export declare type NodeToHTML<NodeType, ReturnType> = (node: NodeType, params: HTMLTemplateGenerationParams, templateSyntax: HTMLTemplateSyntax) => ReturnType;
+export type NodeToHTML<NodeType, ReturnType> = (node: NodeType, params: HTMLTemplateGenerationParams, templateSyntax: HTMLTemplateSyntax) => ReturnType;
 //# sourceMappingURL=types.d.ts.map

dist/esm/node-handlers/node-to-jsx/index.js

@@ -48,31 +48,3 @@ var __assign = (this && this.__assign) || function () {
     if (attrs) {
-        Object.keys(attrs).forEach(function (attrKey) {
-            var attributeValue = attrs[attrKey];
-            switch (attributeValue.type) {
-                case 'dynamic':
-                    var referenceType = attributeValue.content.referenceType;
-                    switch (referenceType) {
-                        default:
-                            var prefix = options.dynamicReferencePrefixMap[referenceType];
-                            addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id, prefix);
-                            break;
-                    }
-                    break;
-                case 'import':
-                    addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id);
-                    break;
-                case 'raw':
-                    addRawAttributeToJSXTag(elementTag, attrKey, attributeValue);
-                    break;
-                case 'comp-style':
-                case 'static':
-                    addAttributeToJSXTag(elementTag, attrKey, attributeValue.content);
-                    break;
-                case 'expr':
-                    addDynamicExpressionAttributeToJSXTag(elementTag, attributeValue, attrKey);
-                    break;
-                default:
-                    throw new Error("generateElementNode could not generate code for attribute of type ".concat(JSON.stringify(attributeValue)));
-            }
-        });
+        addAttributesToJSXTag(attrs, elementTag, options);
     }
@@ -104,2 +76,33 @@ if (events) {
 export default generateElementNode;
+var addAttributesToJSXTag = function (attrs, elementTag, options) {
+    Object.keys(attrs).forEach(function (attrKey) {
+        var attributeValue = attrs[attrKey];
+        switch (attributeValue.type) {
+            case 'dynamic':
+                var referenceType = attributeValue.content.referenceType;
+                switch (referenceType) {
+                    default:
+                        var prefix = options.dynamicReferencePrefixMap[referenceType];
+                        addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id, prefix);
+                        break;
+                }
+                break;
+            case 'import':
+                addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id);
+                break;
+            case 'raw':
+                addRawAttributeToJSXTag(elementTag, attrKey, attributeValue);
+                break;
+            case 'comp-style':
+            case 'static':
+                addAttributeToJSXTag(elementTag, attrKey, attributeValue.content);
+                break;
+            case 'expr':
+                addDynamicExpressionAttributeToJSXTag(elementTag, attributeValue, attrKey);
+                break;
+            default:
+                throw new Error("generateElementNode could not generate code for attribute of type ".concat(JSON.stringify(attributeValue)));
+        }
+    });
+};
 var generateNode = function (node, params, options) {
@@ -115,2 +118,8 @@ switch (node.type) {
             ];
+        case 'inject':
+            if (node === null || node === void 0 ? void 0 : node.dependency) {
+                /* tslint:disable:no-string-literal */
+                params.dependencies['Script'] = node.dependency;
+            }
+            return [node.content.toString()];
         case 'static':
@@ -123,2 +132,6 @@ return [StringUtils.encode(node.content.toString())];
             return generateCMSNode(node, params, options);
+        case 'cms-list-repeater':
+            return generateCMSListRepeaterNode(node, params, options);
+        case 'cms-mixed-type':
+            return generateCMSMixedTypeNode(node, params, options);
         case 'element':
@@ -130,4 +143,2 @@ return [generateElementNode(node, params, options)];
             return generateConditionalNode(node, params, options);
-        case 'cms-list-repeater':
-            return generateCMSListRepeaterNode(node, params, options);
         case 'slot':
@@ -148,2 +159,26 @@ if (options.slotHandling === 'native') {
 };
+var generateCMSMixedTypeNode = function (node, params, options) {
+    var _a = node.content, _b = _a.nodes, error = _b.error, fallback = _b.fallback, elementType = _a.elementType, renderPropIdentifier = _a.renderPropIdentifier, _c = _a.mappings, mappings = _c === void 0 ? {} : _c, attrs = _a.attrs, dependency = _a.dependency;
+    var jsxTag = StringUtils.dashCaseToUpperCamelCase(elementType);
+    var cmsMixedNode = ASTBuilders.createJSXTag(jsxTag, [], true);
+    var mappingsObject = [];
+    if (attrs) {
+        addAttributesToJSXTag(attrs, cmsMixedNode, options);
+    }
+    if (dependency) {
+        params.dependencies[elementType] = dependency;
+    }
+    Object.keys(mappings).forEach(function (key) {
+        var element = generateElementNode(mappings[key], params, options);
+        mappingsObject.push(types.objectProperty(types.identifier(key), types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], element)));
+    });
+    cmsMixedNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('mappingConfiguration'), types.jsxExpressionContainer(types.objectExpression(mappingsObject))));
+    if (fallback) {
+        cmsMixedNode.openingElement.attributes.push(types.jSXAttribute(types.jsxIdentifier('renderDefault'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], generateElementNode(fallback, params, options)))));
+    }
+    if (error) {
+        cmsMixedNode.openingElement.attributes.push(types.jSXAttribute(types.jsxIdentifier('renderError'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], generateElementNode(error, params, options)))));
+    }
+    return [cmsMixedNode];
+};
 var generateCMSNode = function (node, params, options) {
@@ -181,3 +216,11 @@ var _a = node.content, initialData = _a.initialData, key = _a.key, renderPropIdentifier = _a.renderPropIdentifier, _b = _a.resource, _c = _b === void 0 ? {} : _b, resourceParams = _c.params, router = _a.router, elementType = _a.elementType, dependency = _a.dependency;
         cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
-        cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.identifier('props.page'))));
+        var keyValue = 'props?.pagination?.page';
+        if (node.type === 'cms-item') {
+            var entityKeyProperty = node.content.entityKeyProperty;
+            var entityName = initialData.content.id;
+            keyValue = entityKeyProperty
+                ? "props?.".concat(entityName, "?.").concat(entityKeyProperty)
+                : "props?.".concat(entityName, "?.id");
+        }
+        cmsNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.identifier(keyValue))));
     }
@@ -194,2 +237,7 @@ if (Object.keys(resourceParams || {}).length > 0) {
             }
+            if (property.type === 'dynamic') {
+                acc.push(types.objectProperty(types.stringLiteral(attrKey), property.content.referenceType === 'prop'
+                    ? types.memberExpression(types.identifier(options.dynamicReferencePrefixMap[property.content.referenceType]), types.identifier(property.content.id))
+                    : types.identifier(property.content.id)));
+            }
             return acc;
@@ -233,4 +281,6 @@ }, []);
 var generateCMSListRepeaterNode = function (node, params, options) {
-    var repeaterNode = ASTBuilders.createJSXTag('Repeater', [], true);
-    repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('items'), types.jsxExpressionContainer(types.identifier('params'))));
+    var _a, _b;
+    var jsxTag = StringUtils.dashCaseToUpperCamelCase(node.content.elementType);
+    var repeaterNode = ASTBuilders.createJSXTag(jsxTag, [], true);
+    repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('items'), types.jsxExpressionContainer(types.identifier((_a = node.content.source) !== null && _a !== void 0 ? _a : 'params'))));
     repeaterNode.openingElement.attributes.push(types.jsxAttribute(types.jSXIdentifier('renderItem'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier(node.content.renderPropIdentifier)], generateNode(node.content.nodes.list, params, options)[0]))));
@@ -240,2 +290,5 @@ if ('empty' in node.content.nodes) {
     }
+    if (((_b = node.content) === null || _b === void 0 ? void 0 : _b.dependency) && options.dependencyHandling === 'import') {
+        params.dependencies[jsxTag] = node.content.dependency;
+    }
     return [repeaterNode];
@@ -242,0 +295,0 @@ };

dist/esm/node-handlers/node-to-jsx/types.d.ts

@@ -23,6 +23,6 @@ import * as types from '@babel/types';
 }
-export declare type NodeToJSX<NodeType, ReturnType> = (node: NodeType, params: JSXGenerationParams, options?: JSXGenerationOptions) => ReturnType;
-export declare type JSXASTReturnType = string | types.JSXExpressionContainer | types.JSXElement | types.LogicalExpression | types.Identifier | types.MemberExpression;
-export declare type BinaryOperator = '===' | '+' | '-' | '/' | '%' | '*' | '**' | '&' | '|' | '>>' | '>>>' | '<<' | '^' | '==' | '!=' | '!==' | 'in' | 'instanceof' | '>' | '<' | '>=' | '<=';
-export declare type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof';
+export type NodeToJSX<NodeType, ReturnType> = (node: NodeType, params: JSXGenerationParams, options?: JSXGenerationOptions) => ReturnType;
+export type JSXASTReturnType = string | types.JSXExpressionContainer | types.JSXElement | types.LogicalExpression | types.Identifier | types.MemberExpression;
+export type BinaryOperator = '===' | '+' | '-' | '/' | '%' | '*' | '**' | '&' | '|' | '>>' | '>>>' | '<<' | '^' | '==' | '!=' | '!==' | 'in' | 'instanceof' | '>' | '<' | '>=' | '<=';
+export type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof';
 export interface ConditionalIdentifier {
@@ -29,0 +29,0 @@ key: string;

dist/esm/utils/ast-utils.d.ts

@@ -19,4 +19,4 @@ import * as types from '@babel/types';
 export declare const addDynamicExpressionAttributeToJSXTag: (jsxASTNode: types.JSXElement, dynamicRef: UIDLExpressionValue, attrKey: string, t?: typeof types) => void;
-export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, attrValues?: Array<types.MemberExpression | types.Identifier>, t?: typeof types) => void;
-export declare const stringAsTemplateLiteral: (str: string, t?: typeof types) => types.TemplateLiteral;
+export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, attrValues?: Array<types.MemberExpression | types.Identifier | types.StringLiteral>, t?: typeof types) => void;
+export declare const stringAsTemplateLiteral: (str: string) => types.TemplateLiteral;
 export declare const addAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue?: boolean | unknown, t?: typeof types) => void;
@@ -31,3 +31,3 @@ export declare const addRawAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue: UIDLRawValue, t?: typeof types) => void;
 }, t?: typeof types) => types.ObjectExpression;
-declare type ExpressionLiteral = types.StringLiteral | types.BooleanLiteral | types.NumericLiteral | types.Identifier | types.ArrayExpression | types.ObjectExpression | types.NullLiteral;
+type ExpressionLiteral = types.StringLiteral | types.BooleanLiteral | types.NumericLiteral | types.Identifier | types.ArrayExpression | types.ObjectExpression | types.NullLiteral;
 export declare const convertValueToLiteral: (value: any, explicitType?: string, t?: typeof types) => ExpressionLiteral;
@@ -48,8 +48,8 @@ export declare const addPropertyToASTObject: (obj: types.ObjectExpression, key: string, value: any, t?: typeof types) => void;
 export declare const generateRemoteResourceASTs: (resource: UIDLResourceItem) => types.VariableDeclaration[];
-export declare const generateMemberExpressionASTFromBase: (base: types.MemberExpression | types.Identifier, path: string[]) => types.MemberExpression;
-export declare const generateMemberExpressionASTFromPath: (path: Array<string | number>) => types.MemberExpression | types.Identifier;
-export declare const generateURLParamsAST: (urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue>) => types.TemplateLiteral | null;
-export declare const resolveObjectValue: (prop: UIDLStaticValue | UIDLPropValue | UIDLExpressionValue) => types.BooleanLiteral | types.Identifier | types.NumericLiteral | types.ObjectExpression | types.StringLiteral;
+export declare const generateMemberExpressionASTFromBase: (base: types.OptionalMemberExpression | types.MemberExpression | types.Identifier, path: string[]) => types.OptionalMemberExpression;
+export declare const generateMemberExpressionASTFromPath: (path: Array<string | number>) => types.OptionalMemberExpression | types.Identifier;
+export declare const generateURLParamsAST: (urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue | UIDLExpressionValue>) => types.TemplateLiteral | null;
+export declare const resolveObjectValue: (prop: UIDLStaticValue | UIDLExpressionValue) => types.Identifier | types.StringLiteral | types.NumericLiteral | types.BooleanLiteral | types.ObjectExpression | types.Expression;
 export declare const getExpressionFromUIDLExpressionNode: (node: UIDLExpressionValue) => types.Expression;
 export {};
 //# sourceMappingURL=ast-utils.d.ts.map

dist/esm/utils/ast-utils.js

@@ -14,2 +14,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { StringUtils } from '@teleporthq/teleport-shared';
+import babelPresetReact from '@babel/preset-react';
 import { ASTUtils } from '..';
@@ -132,11 +133,14 @@ /**
 };
-export var stringAsTemplateLiteral = function (str, t) {
-    if (t === void 0) { t = types; }
-    var formmattedString = "\n".concat(str, "\n  ");
-    return t.templateLiteral([
-        t.templateElement({
-            raw: formmattedString,
-            cooked: formmattedString,
-        }, true),
-    ], []);
+export var stringAsTemplateLiteral = function (str) {
+    var ast = parse('<style jsx>{`' + str + '`}</style>', {
+        presets: [babelPresetReact],
+        sourceType: 'module',
+    });
+    if (!('program' in ast)) {
+        throw new Error("The AST does not have a program node in the expression inside addDynamicExpressionAttributeToJSXTag");
+    }
+    var theStatementOnlyWihtoutTheProgram = ast.program.body[0];
+    var container = theStatementOnlyWihtoutTheProgram.expression
+        .children[0];
+    return container.expression;
 };
@@ -153,2 +157,11 @@ export var addAttributeToJSXTag = function (jsxNode, attrName, attrValue, t) {
     }
+    var attribute = jsxNode.openingElement.attributes.find(function (attr) {
+        if (attr.type === 'JSXAttribute') {
+            return attr.name.name === attrName;
+        }
+    });
+    if (attribute && attribute.value && attribute.value.type === 'StringLiteral') {
+        attribute.value.value = "".concat(attribute.value.value, " ").concat(attrValue);
+        return;
+    }
     jsxNode.openingElement.attributes.push(attributeDefinition);
@@ -341,3 +354,3 @@ };
         t.variableDeclarator(t.arrayPattern([
-            t.identifier(StringUtils.createStateOrPropStoringValue(stateKey)),
+            t.identifier(stateKey),
             t.identifier(StringUtils.createStateStoringFunction(stateKey)),
@@ -361,3 +374,3 @@ ]), t.callExpression(t.identifier('useState'), [defaultValueArgument])),
     var authHeaderAST = computeAuthorizationHeaderAST(resource === null || resource === void 0 ? void 0 : resource.headers);
-    var headersASTs = generateRESTHeadersAST(resource === null || resource === void 0 ? void 0 : resource.headers);
+    var headersASTs = (resource === null || resource === void 0 ? void 0 : resource.headers) ? generateRESTHeadersAST(resource.headers) : [];
     var queryParams = generateURLParamsAST(resource === null || resource === void 0 ? void 0 : resource.params);
@@ -378,2 +391,5 @@ var fetchUrlQuasis = fetchUrl.quasis;
         }
+        if (prop.type === 'expr') {
+            acc.push(types.objectProperty(types.stringLiteral(item), ASTUtils.getExpressionFromUIDLExpressionNode(prop)));
+        }
         if (prop.type === 'dynamic') {
@@ -392,9 +408,15 @@ acc.push(types.spreadElement(types.logicalExpression('&&', types.memberExpression(types.identifier('params'), types.stringLiteral(prop.content.id), true, false), types.objectExpression([
         : fetchUrl;
+    var method = types.objectProperty(types.identifier('method'), types.stringLiteral(resource.method));
+    var allHeaders = [];
+    if (authHeaderAST) {
+        allHeaders.push(authHeaderAST);
+    }
+    if (headersASTs.length) {
+        allHeaders = allHeaders.concat(headersASTs);
+    }
+    var headers = types.objectProperty(types.identifier('headers'), types.objectExpression(allHeaders));
     var fetchAST = types.variableDeclaration('const', [
         types.variableDeclarator(types.identifier('data'), types.awaitExpression(types.callExpression(types.identifier('fetch'), [
             url,
-            types.objectExpression([
-                types.objectProperty(types.identifier('method'), types.stringLiteral(resource.method)),
-                types.objectProperty(types.identifier('headers'), types.objectExpression(__spreadArray(__spreadArray([], headersASTs, true), [authHeaderAST], false))),
-            ]),
+            types.objectExpression([method, headers]),
         ]))),
@@ -448,3 +470,7 @@ ]);
         .map(function (header) {
-        return types.objectProperty(types.stringLiteral(header), types.stringLiteral(String(headers[header].content)));
+        var headerResolved = resolveResourceValue(headers[header]);
+        var value = headers[header].type === 'static'
+            ? types.stringLiteral(String(headerResolved))
+            : types.identifier(String(headerResolved));
+        return types.objectProperty(types.stringLiteral(header), value);
     });
@@ -454,7 +480,7 @@ };
     if (path.length === 1) {
-        return types.memberExpression(base, types.identifier(path[0]), false);
+        return types.optionalMemberExpression(base, types.identifier(path[0]), false, true);
     }
     var pathClone = __spreadArray([], path, true);
     pathClone.pop();
-    return types.memberExpression(generateMemberExpressionASTFromBase(base, pathClone), types.identifier(path[path.length - 1]), false);
+    return types.optionalMemberExpression(generateMemberExpressionASTFromBase(base, pathClone), types.identifier(path[path.length - 1]), false, true);
 };
@@ -469,6 +495,6 @@ export var generateMemberExpressionASTFromPath = function (path) {
     if (typeof currentPath === 'number') {
-        return types.memberExpression(generateMemberExpressionASTFromPath(pathClone), types.numericLiteral(currentPath), true);
+        return types.optionalMemberExpression(generateMemberExpressionASTFromPath(pathClone), types.numericLiteral(currentPath), false, true);
     }
     var containsSpecial = currentPath.indexOf('.') !== -1 || currentPath.indexOf('-') !== -1;
-    return types.memberExpression(generateMemberExpressionASTFromPath(pathClone), containsSpecial ? types.stringLiteral(currentPath) : types.identifier(currentPath), containsSpecial);
+    return types.optionalMemberExpression(generateMemberExpressionASTFromPath(pathClone), containsSpecial ? types.stringLiteral(currentPath) : types.identifier(currentPath), containsSpecial, true);
 };
@@ -492,3 +518,2 @@ export var generateURLParamsAST = function (urlParams) {
         query[prefix] = resolveUrlParamsValue(field);
-        return;
     }
@@ -595,15 +620,17 @@ };
 export var resolveObjectValue = function (prop) {
+    if (prop.type === 'static') {
+        var value = typeof prop.content === 'string'
+            ? types.stringLiteral(prop.content)
+            : typeof prop.content === 'boolean'
+                ? types.booleanLiteral(prop.content)
+                : typeof prop.content === 'number'
+                    ? types.numericLiteral(prop.content)
+                    : typeof prop.content === 'object'
+                        ? objectToObjectExpression(prop.content)
+                        : types.identifier(String(prop.content));
+        return value;
+    }
     if (prop.type === 'expr') {
-        return types.identifier(prop.content);
+        return getExpressionFromUIDLExpressionNode(prop);
     }
-    var value = typeof prop.content === 'string'
-        ? types.stringLiteral(prop.content)
-        : typeof prop.content === 'boolean'
-            ? types.booleanLiteral(prop.content)
-            : typeof prop.content === 'number'
-                ? types.numericLiteral(prop.content)
-                : typeof prop.content === 'object'
-                    ? objectToObjectExpression(prop.content)
-                    : types.identifier(String(prop.content));
-    return value;
 };
@@ -610,0 +637,0 @@ export var getExpressionFromUIDLExpressionNode = function (node) {

package.json

 {
   "name": "@teleporthq/teleport-plugin-common",
-  "version": "0.32.0-alpha.0",
+  "version": "0.32.0",
   "description": "Common building and modelating functions for ASTs and HASTs",
@@ -27,9 +27,11 @@ "author": "teleportHQ",
   "dependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/preset-react": "^7.22.5",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-shared": "^0.32.0-alpha.0",
-    "@teleporthq/teleport-types": "^0.32.0-alpha.0",
+    "@teleporthq/teleport-shared": "^0.32.0",
+    "@teleporthq/teleport-types": "^0.32.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "de47527436cc4f1d00f241718fbdfdb86e616e3b"
+  "gitHead": "08e6b6b0a6328cdbf86891871be39a377450a084"
 }

src/builders/style-builders.ts

@@ -50,2 +50,10 @@ import jss from 'jss'
 
+export const createFontDecleration = (styleObject: Record<string, string | number>) => {
+  return jss
+    .createStyleSheet({
+      '@font-face': styleObject,
+    })
+    .toString()
+}
+
 export const createCSSClassWithMediaQuery = (
@@ -52,0 +60,0 @@ mediaOffset: string,

src/node-handlers/node-to-html/index.ts

@@ -91,4 +91,12 @@ import * as hastUtils from '../../utils/hast-utils'
   switch (node.type) {
+    case 'inject':
+      if (node?.dependency) {
+        /* tslint:disable:no-string-literal */
+        params.dependencies['Script'] = node.dependency
+      }
+      return node.content.toString()
+
     case 'raw':
       return generateRawHTMLNode(node, params, templateSyntax)
+
     case 'static':
@@ -95,0 +103,0 @@ return StringUtils.encode(node.content.toString())

src/node-handlers/node-to-jsx/index.ts

@@ -14,5 +14,7 @@ import * as types from '@babel/types'
   UIDLCMSListRepeaterNode,
+  UIDLCMSMixedTypeNode,
+  UIDLElement,
 } from '@teleporthq/teleport-types'
 import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
-import { JSXASTReturnType, NodeToJSX } from './types'
+import { JSXASTReturnType, JSXGenerationOptions, NodeToJSX } from './types'
 
@@ -88,46 +90,3 @@ import {
   if (attrs) {
-    Object.keys(attrs).forEach((attrKey) => {
-      const attributeValue = attrs[attrKey]
-
-      switch (attributeValue.type) {
-        case 'dynamic':
-          const {
-            content: { referenceType },
-          } = attributeValue
-
-          switch (referenceType) {
-            default:
-              const prefix =
-                options.dynamicReferencePrefixMap[referenceType as 'prop' | 'state' | 'local']
-              addDynamicAttributeToJSXTag(
-                elementTag,
-                attrKey,
-                (attributeValue as UIDLDynamicReference).content.id,
-                prefix
-              )
-
-              break
-          }
-          break
-        case 'import':
-          addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id)
-          break
-        case 'raw':
-          addRawAttributeToJSXTag(elementTag, attrKey, attributeValue)
-          break
-        case 'comp-style':
-        case 'static':
-          addAttributeToJSXTag(elementTag, attrKey, attributeValue.content)
-          break
-        case 'expr':
-          addDynamicExpressionAttributeToJSXTag(elementTag, attributeValue, attrKey)
-          break
-        default:
-          throw new Error(
-            `generateElementNode could not generate code for attribute of type ${JSON.stringify(
-              attributeValue
-            )}`
-          )
-      }
-    })
+    addAttributesToJSXTag(attrs, elementTag, options)
   }
@@ -162,2 +121,53 @@
 
+const addAttributesToJSXTag = (
+  attrs: UIDLElement['attrs'],
+  elementTag: types.JSXElement,
+  options: JSXGenerationOptions
+) => {
+  Object.keys(attrs).forEach((attrKey) => {
+    const attributeValue = attrs[attrKey]
+
+    switch (attributeValue.type) {
+      case 'dynamic':
+        const {
+          content: { referenceType },
+        } = attributeValue
+
+        switch (referenceType) {
+          default:
+            const prefix =
+              options.dynamicReferencePrefixMap[referenceType as 'prop' | 'state' | 'local']
+            addDynamicAttributeToJSXTag(
+              elementTag,
+              attrKey,
+              (attributeValue as UIDLDynamicReference).content.id,
+              prefix
+            )
+
+            break
+        }
+        break
+      case 'import':
+        addDynamicAttributeToJSXTag(elementTag, attrKey, attributeValue.content.id)
+        break
+      case 'raw':
+        addRawAttributeToJSXTag(elementTag, attrKey, attributeValue)
+        break
+      case 'comp-style':
+      case 'static':
+        addAttributeToJSXTag(elementTag, attrKey, attributeValue.content)
+        break
+      case 'expr':
+        addDynamicExpressionAttributeToJSXTag(elementTag, attributeValue, attrKey)
+        break
+      default:
+        throw new Error(
+          `generateElementNode could not generate code for attribute of type ${JSON.stringify(
+            attributeValue
+          )}`
+        )
+    }
+  })
+}
+
 const generateNode: NodeToJSX<UIDLNode, JSXASTReturnType[]> = (node, params, options) => {
@@ -167,2 +177,3 @@ switch (node.type) {
       return [generateExpressionNode(node, params, options)]
+
     case 'raw':
@@ -174,2 +185,10 @@ return [
       ]
+
+    case 'inject':
+      if (node?.dependency) {
+        /* tslint:disable:no-string-literal */
+        params.dependencies['Script'] = node.dependency
+      }
+      return [node.content.toString()]
+
     case 'static':
@@ -185,2 +204,8 @@ return [StringUtils.encode(node.content.toString())]
 
+    case 'cms-list-repeater':
+      return generateCMSListRepeaterNode(node, params, options)
+
+    case 'cms-mixed-type':
+      return generateCMSMixedTypeNode(node, params, options)
+
     case 'element':
@@ -195,5 +220,2 @@ return [generateElementNode(node, params, options)]
 
-    case 'cms-list-repeater':
-      return generateCMSListRepeaterNode(node, params, options)
-
     case 'slot':
@@ -224,2 +246,75 @@ if (options.slotHandling === 'native') {
 
+const generateCMSMixedTypeNode: NodeToJSX<UIDLCMSMixedTypeNode, types.JSXElement[]> = (
+  node,
+  params,
+  options
+) => {
+  const {
+    nodes: { error, fallback },
+    elementType,
+    renderPropIdentifier,
+    mappings = {},
+    attrs,
+    dependency,
+  } = node.content
+  const jsxTag = StringUtils.dashCaseToUpperCamelCase(elementType)
+  const cmsMixedNode = ASTBuilders.createJSXTag(jsxTag, [], true)
+  const mappingsObject: types.ObjectProperty[] = []
+
+  if (attrs) {
+    addAttributesToJSXTag(attrs, cmsMixedNode, options)
+  }
+
+  if (dependency) {
+    params.dependencies[elementType] = dependency
+  }
+
+  Object.keys(mappings).forEach((key) => {
+    const element = generateElementNode(mappings[key], params, options)
+    mappingsObject.push(
+      types.objectProperty(
+        types.identifier(key),
+        types.arrowFunctionExpression([types.identifier(renderPropIdentifier)], element)
+      )
+    )
+  })
+
+  cmsMixedNode.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('mappingConfiguration'),
+      types.jsxExpressionContainer(types.objectExpression(mappingsObject))
+    )
+  )
+
+  if (fallback) {
+    cmsMixedNode.openingElement.attributes.push(
+      types.jSXAttribute(
+        types.jsxIdentifier('renderDefault'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [types.identifier(renderPropIdentifier)],
+            generateElementNode(fallback, params, options)
+          )
+        )
+      )
+    )
+  }
+
+  if (error) {
+    cmsMixedNode.openingElement.attributes.push(
+      types.jSXAttribute(
+        types.jsxIdentifier('renderError'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [types.identifier(renderPropIdentifier)],
+            generateElementNode(error, params, options)
+          )
+        )
+      )
+    )
+  }
+
+  return [cmsMixedNode]
+}
+
 const generateCMSNode: NodeToJSX<UIDLCMSListNode | UIDLCMSItemNode, types.JSXElement[]> = (
@@ -334,6 +429,16 @@ node,
 
+    let keyValue = 'props?.pagination?.page'
+
+    if (node.type === 'cms-item') {
+      const { entityKeyProperty } = node.content
+      const entityName = initialData.content.id
+      keyValue = entityKeyProperty
+        ? `props?.${entityName}?.${entityKeyProperty}`
+        : `props?.${entityName}?.id`
+    }
+
     cmsNode.openingElement.attributes.push(
       types.jsxAttribute(
         types.jsxIdentifier('key'),
-        types.jsxExpressionContainer(types.identifier('props.page'))
+        types.jsxExpressionContainer(types.identifier(keyValue))
       )
@@ -357,2 +462,18 @@ )
 
+        if (property.type === 'dynamic') {
+          acc.push(
+            types.objectProperty(
+              types.stringLiteral(attrKey),
+              property.content.referenceType === 'prop'
+                ? types.memberExpression(
+                    types.identifier(
+                      options.dynamicReferencePrefixMap[property.content.referenceType]
+                    ),
+                    types.identifier(property.content.id)
+                  )
+                : types.identifier(property.content.id)
+            )
+          )
+        }
+
         return acc
@@ -430,7 +551,9 @@ },
 ) => {
-  const repeaterNode = ASTBuilders.createJSXTag('Repeater', [], true)
+  const jsxTag = StringUtils.dashCaseToUpperCamelCase(node.content.elementType)
+  const repeaterNode = ASTBuilders.createJSXTag(jsxTag, [], true)
+
   repeaterNode.openingElement.attributes.push(
     types.jsxAttribute(
       types.jsxIdentifier('items'),
-      types.jsxExpressionContainer(types.identifier('params'))
+      types.jsxExpressionContainer(types.identifier(node.content.source ?? 'params'))
     )
@@ -465,2 +588,6 @@ )
 
+  if (node.content?.dependency && options.dependencyHandling === 'import') {
+    params.dependencies[jsxTag] = node.content.dependency
+  }
+
   return [repeaterNode]
@@ -467,0 +594,0 @@ }

src/types.d.ts

 declare module 'jss-preset-default'
 declare module 'qs'
+declare module '@babel/preset-react'

src/utils/ast-utils.ts

@@ -16,2 +16,3 @@ import * as types from '@babel/types'
 } from '@teleporthq/teleport-types'
+import babelPresetReact from '@babel/preset-react'
 import { ASTUtils } from '..'
@@ -167,8 +168,8 @@
   name: string,
-  attrValues: Array<types.MemberExpression | types.Identifier> = [],
+  attrValues: Array<types.MemberExpression | types.Identifier | types.StringLiteral> = [],
   t = types
 ) => {
-  const memberExpressions: Array<types.Identifier | types.MemberExpression> = []
+  const memberExpressions: Array<types.Identifier | types.MemberExpression | types.StringLiteral> =
+    []
   const templateElements: types.TemplateElement[] = []
-
   if (attrValues.length === 0) {
@@ -178,3 +179,7 @@ return
 
-  let content: types.TemplateLiteral | types.MemberExpression | types.Identifier
+  let content:
+    | types.TemplateLiteral
+    | types.MemberExpression
+    | types.Identifier
+    | types.StringLiteral
   if (attrValues.length === 1) {
@@ -196,18 +201,19 @@ content = attrValues[0]
 
-export const stringAsTemplateLiteral = (str: string, t = types) => {
-  const formmattedString = `
-${str}
-  `
-  return t.templateLiteral(
-    [
-      t.templateElement(
-        {
-          raw: formmattedString,
-          cooked: formmattedString,
-        },
-        true
-      ),
-    ],
-    []
-  )
+export const stringAsTemplateLiteral = (str: string): types.TemplateLiteral => {
+  const ast = parse('<style jsx>{`' + str + '`}</style>', {
+    presets: [babelPresetReact],
+    sourceType: 'module',
+  })
+
+  if (!('program' in ast)) {
+    throw new Error(
+      `The AST does not have a program node in the expression inside addDynamicExpressionAttributeToJSXTag`
+    )
+  }
+
+  const theStatementOnlyWihtoutTheProgram = ast.program.body[0] as types.ExpressionStatement
+  const container = (theStatementOnlyWihtoutTheProgram.expression as types.JSXElement)
+    .children[0] as types.JSXExpressionContainer
+
+  return container.expression as types.TemplateLiteral
 }
@@ -235,2 +241,13 @@
 
+  const attribute: types.JSXAttribute = jsxNode.openingElement.attributes.find((attr) => {
+    if (attr.type === 'JSXAttribute') {
+      return attr.name.name === attrName
+    }
+  }) as types.JSXAttribute
+
+  if (attribute && attribute.value && attribute.value.type === 'StringLiteral') {
+    attribute.value.value = `${attribute.value.value} ${attrValue}`
+    return
+  }
+
   jsxNode.openingElement.attributes.push(attributeDefinition)
@@ -521,3 +538,3 @@ }
       t.arrayPattern([
-        t.identifier(StringUtils.createStateOrPropStoringValue(stateKey)),
+        t.identifier(stateKey),
         t.identifier(StringUtils.createStateStoringFunction(stateKey)),
@@ -551,3 +568,3 @@ ]),
   const authHeaderAST = computeAuthorizationHeaderAST(resource?.headers)
-  const headersASTs = generateRESTHeadersAST(resource?.headers)
+  const headersASTs = resource?.headers ? generateRESTHeadersAST(resource.headers) : []
 
@@ -576,2 +593,11 @@ const queryParams = generateURLParamsAST(resource?.params)
 
+    if (prop.type === 'expr') {
+      acc.push(
+        types.objectProperty(
+          types.stringLiteral(item),
+          ASTUtils.getExpressionFromUIDLExpressionNode(prop)
+        )
+      )
+    }
+
     if (prop.type === 'dynamic') {
@@ -621,2 +647,22 @@ acc.push(
 
+  const method = types.objectProperty(
+    types.identifier('method'),
+    types.stringLiteral(resource.method)
+  )
+
+  let allHeaders: types.ObjectProperty[] = []
+
+  if (authHeaderAST) {
+    allHeaders.push(authHeaderAST)
+  }
+
+  if (headersASTs.length) {
+    allHeaders = allHeaders.concat(headersASTs)
+  }
+
+  const headers = types.objectProperty(
+    types.identifier('headers'),
+    types.objectExpression(allHeaders)
+  )
+
   const fetchAST = types.variableDeclaration('const', [
@@ -628,9 +674,3 @@ types.variableDeclarator(
           url,
-          types.objectExpression([
-            types.objectProperty(types.identifier('method'), types.stringLiteral(resource.method)),
-            types.objectProperty(
-              types.identifier('headers'),
-              types.objectExpression([...headersASTs, authHeaderAST])
-            ),
-          ]),
+          types.objectExpression([method, headers]),
         ])
@@ -714,6 +754,8 @@ )
     .map((header) => {
-      return types.objectProperty(
-        types.stringLiteral(header),
-        types.stringLiteral(String(headers[header].content))
-      )
+      const headerResolved = resolveResourceValue(headers[header])
+      const value =
+        headers[header].type === 'static'
+          ? types.stringLiteral(String(headerResolved))
+          : types.identifier(String(headerResolved))
+      return types.objectProperty(types.stringLiteral(header), value)
     })
@@ -723,7 +765,7 @@ }
 export const generateMemberExpressionASTFromBase = (
-  base: types.MemberExpression | types.Identifier,
+  base: types.OptionalMemberExpression | types.MemberExpression | types.Identifier,
   path: string[]
-): types.MemberExpression => {
+): types.OptionalMemberExpression => {
   if (path.length === 1) {
-    return types.memberExpression(base, types.identifier(path[0]), false)
+    return types.optionalMemberExpression(base, types.identifier(path[0]), false, true)
   }
@@ -734,6 +776,7 @@
 
-  return types.memberExpression(
+  return types.optionalMemberExpression(
     generateMemberExpressionASTFromBase(base, pathClone),
     types.identifier(path[path.length - 1]),
-    false
+    false,
+    true
   )
@@ -744,3 +787,3 @@ }
   path: Array<string | number>
-): types.MemberExpression | types.Identifier => {
+): types.OptionalMemberExpression | types.Identifier => {
   const pathClone = [...path]
@@ -755,5 +798,6 @@ if (path.length === 1) {
   if (typeof currentPath === 'number') {
-    return types.memberExpression(
+    return types.optionalMemberExpression(
       generateMemberExpressionASTFromPath(pathClone),
       types.numericLiteral(currentPath),
+      false,
       true
@@ -765,6 +809,7 @@ )
 
-  return types.memberExpression(
+  return types.optionalMemberExpression(
     generateMemberExpressionASTFromPath(pathClone),
     containsSpecial ? types.stringLiteral(currentPath) : types.identifier(currentPath),
-    containsSpecial
+    containsSpecial,
+    true
   )
@@ -774,3 +819,3 @@ }
 export const generateURLParamsAST = (
-  urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue>
+  urlParams: Record<string, UIDLStaticValue | UIDLStateValue | UIDLPropValue | UIDLExpressionValue>
 ): types.TemplateLiteral | null => {
@@ -796,3 +841,3 @@ if (!urlParams) {
 const resolveDynamicValuesFromUrlParams = (
-  field: UIDLStaticValue | UIDLPropValue | UIDLStateValue,
+  field: UIDLStaticValue | UIDLPropValue | UIDLStateValue | UIDLExpressionValue,
   query: Record<string, types.Expression>,
@@ -803,3 +848,2 @@ prefix: string = null
     query[prefix] = resolveUrlParamsValue(field)
-    return
   }
@@ -968,19 +1012,29 @@ }
 
-export const resolveObjectValue = (prop: UIDLStaticValue | UIDLPropValue | UIDLExpressionValue) => {
+export const resolveObjectValue = (
+  prop: UIDLStaticValue | UIDLExpressionValue
+):
+  | types.Identifier
+  | types.StringLiteral
+  | types.NumericLiteral
+  | types.BooleanLiteral
+  | types.ObjectExpression
+  | types.Expression => {
+  if (prop.type === 'static') {
+    const value =
+      typeof prop.content === 'string'
+        ? types.stringLiteral(prop.content)
+        : typeof prop.content === 'boolean'
+        ? types.booleanLiteral(prop.content)
+        : typeof prop.content === 'number'
+        ? types.numericLiteral(prop.content)
+        : typeof prop.content === 'object'
+        ? objectToObjectExpression(prop.content as unknown as Record<string, unknown>)
+        : types.identifier(String(prop.content))
+
+    return value
+  }
+
   if (prop.type === 'expr') {
-    return types.identifier(prop.content)
+    return getExpressionFromUIDLExpressionNode(prop)
   }
-
-  const value =
-    typeof prop.content === 'string'
-      ? types.stringLiteral(prop.content)
-      : typeof prop.content === 'boolean'
-      ? types.booleanLiteral(prop.content)
-      : typeof prop.content === 'number'
-      ? types.numericLiteral(prop.content)
-      : typeof prop.content === 'object'
-      ? objectToObjectExpression(prop.content as unknown as Record<string, unknown>)
-      : types.identifier(String(prop.content))
-
-  return value
 }
@@ -987,0 +1041,0 @@

No alert changes

Improved metrics

Total package byte prevSize

617256

6.87%

Lines of code

8160

4.58%

Worsened metrics

Dependency count

7

40%

Dependency changes

• + Added

  @babel/core@^7.5.5

• + Added

  @babel/preset-react@^7.22.5

• + Added

  @ampproject/remapping@2.3.0
  (transitive)

• + Added

  @babel/code-frame@7.26.2
  (transitive)

• + Added

  @babel/compat-data@7.26.8
  (transitive)

• + Added

  @babel/core@7.26.9
  (transitive)

• + Added

  @babel/generator@7.26.9
  (transitive)

• + Added

  @babel/helper-annotate-as-pure@7.25.9
  (transitive)

• + Added

  @babel/helper-compilation-targets@7.26.5
  (transitive)

• + Added

  @babel/helper-module-imports@7.25.9
  (transitive)

• + Added

  @babel/helper-module-transforms@7.26.0
  (transitive)

• + Added

  @babel/helper-plugin-utils@7.26.5
  (transitive)

• + Added

  @babel/helper-validator-option@7.25.9
  (transitive)

• + Added

  @babel/helpers@7.26.9
  (transitive)

• + Added

  @babel/parser@7.26.9
  (transitive)

• + Added

  @babel/plugin-syntax-jsx@7.25.9
  (transitive)

• + Added

  @babel/plugin-transform-react-display-name@7.25.9
  (transitive)

• + Added

  @babel/plugin-transform-react-jsx@7.25.9
  (transitive)

• + Added

  @babel/plugin-transform-react-jsx-development@7.25.9
  (transitive)

• + Added

  @babel/plugin-transform-react-pure-annotations@7.25.9
  (transitive)

• + Added

  @babel/preset-react@7.26.3
  (transitive)

• + Added

  @babel/template@7.26.9
  (transitive)

• + Added

  @babel/traverse@7.26.9
  (transitive)

• + Added

  @jridgewell/gen-mapping@0.3.8
  (transitive)

• + Added

  @jridgewell/resolve-uri@3.1.2
  (transitive)

• + Added

  @jridgewell/set-array@1.2.1
  (transitive)

• + Added

  @jridgewell/sourcemap-codec@1.5.0
  (transitive)

• + Added

  @jridgewell/trace-mapping@0.3.25
  (transitive)

• + Added

  browserslist@4.24.4
  (transitive)

• + Added

  caniuse-lite@1.0.30001703
  (transitive)

• + Added

  convert-source-map@2.0.0
  (transitive)

• + Added

  debug@4.4.0
  (transitive)

• + Added

  electron-to-chromium@1.5.113
  (transitive)

• + Added

  escalade@3.2.0
  (transitive)

• + Added

  gensync@1.0.0-beta.2
  (transitive)

• + Added

  globals@11.12.0
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  jsesc@3.1.0
  (transitive)

• + Added

  json5@2.2.3
  (transitive)

• + Added

  lru-cache@5.1.1
  (transitive)

• + Added

  ms@2.1.3
  (transitive)

• + Added

  node-releases@2.0.19
  (transitive)

• + Added

  picocolors@1.1.1
  (transitive)

• + Added

  semver@6.3.1
  (transitive)

• + Added

  update-browserslist-db@1.1.3
  (transitive)

• + Added

  yallist@3.1.1
  (transitive)

• Updated

  @teleporthq/teleport-shared@^0.32.0

• Updated

  @teleporthq/teleport-types@^0.32.0