@teleporthq/teleport-plugin-html-base-component - npm Package Compare versions

Comparing version 0.29.0-alpha.0 to 0.29.0

__tests__/index.ts

@@ -26,3 +26,3 @@ import {
     expect(htmlChunk).toBeDefined()
-    expect(htmlChunk.name).toBe('html-template')
+    expect(htmlChunk.name).toBe('html-chunk')
   })
@@ -29,0 +29,0 @@

dist/cjs/constants.d.ts

@@ -1,2 +0,2 @@
-export declare const DEFAULT_COMPONENT_CHUNK_NAME = "html-template";
+export declare const DEFAULT_COMPONENT_CHUNK_NAME = "html-chunk";
 //# sourceMappingURL=constants.d.ts.map

dist/cjs/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_COMPONENT_CHUNK_NAME = void 0;
-exports.DEFAULT_COMPONENT_CHUNK_NAME = 'html-template';
+exports.DEFAULT_COMPONENT_CHUNK_NAME = 'html-chunk';
 //# sourceMappingURL=constants.js.map

dist/cjs/index.d.ts

@@ -8,5 +8,5 @@ import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
     htmlComponentPlugin: ComponentPlugin;
-    addExternals: (list: Record<string, ComponentUIDL>) => void;
+    addExternals: (list: Record<string, ComponentUIDL>, plugins: ComponentPlugin[]) => void;
 }
-declare type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;
+type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;
 export declare const createHTMLBasePlugin: HtmlPluginFactory<HtmlPluginConfig>;
@@ -13,0 +13,0 @@ declare const _default: HtmlPlugin;

dist/cjs/index.js

@@ -28,3 +28,3 @@ "use strict";
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
@@ -60,12 +60,15 @@ if (y = 0, t) op = [op[0] & 2, t.value];
     var externals = {};
-    var addExternals = function (list) {
+    var plugins = [];
+    var addExternals = function (list, subComponentPlugins) {
+        if (subComponentPlugins === void 0) { subComponentPlugins = []; }
         externals = __assign(__assign({}, externals), (list || {}));
+        plugins = subComponentPlugins;
     };
     var htmlComponentPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, _a, propDefinitions, _b, stateDefinitions, templatesLookUp, compBase, bodyContent;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, templatesLookUp, compBase, bodyContent;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
-                    uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-                    _a = uidl.propDefinitions, propDefinitions = _a === void 0 ? {} : _a, _b = uidl.stateDefinitions, stateDefinitions = _b === void 0 ? {} : _b;
+                    uidl = structure.uidl, _a = structure.chunks, chunks = _a === void 0 ? [] : _a, dependencies = structure.dependencies, options = structure.options;
+                    _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b, _c = uidl.stateDefinitions, stateDefinitions = _c === void 0 ? {} : _c;
                     templatesLookUp = {};
@@ -75,11 +78,14 @@ compBase = wrapComponent
                         : teleport_plugin_common_1.HASTBuilders.createHTMLNode('div');
-                    return [4 /*yield*/, (0, node_handlers_1.generateHtmlSynatx)(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, Object.values(externals).reduce(function (acc, comp) {
-                            teleport_shared_1.UIDLUtils.setFriendlyOutputOptions(comp);
-                            comp.name = teleport_shared_1.StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
-                            comp.name = teleport_shared_1.UIDLUtils.getComponentClassName(comp);
-                            acc[comp.name] = comp;
-                            return acc;
-                        }, {}), options.projectRouteDefinition, { chunks: chunks, dependencies: dependencies, options: options })];
+                    return [4 /*yield*/, (0, node_handlers_1.generateHtmlSynatx)(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, {
+                            externals: Object.values(externals).reduce(function (acc, comp) {
+                                teleport_shared_1.UIDLUtils.setFriendlyOutputOptions(comp);
+                                comp.name = teleport_shared_1.StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
+                                comp.name = teleport_shared_1.UIDLUtils.getComponentClassName(comp);
+                                acc[comp.name] = comp;
+                                return acc;
+                            }, {}),
+                            plugins: plugins,
+                        }, options.projectRouteDefinition, { chunks: chunks, dependencies: dependencies, options: options })];
                 case 1:
-                    bodyContent = _c.sent();
+                    bodyContent = _d.sent();
                     teleport_plugin_common_1.HASTUtils.addChildNode(compBase, bodyContent);
@@ -86,0 +92,0 @@ chunks.push({

dist/cjs/node-handlers.d.ts

@@ -1,3 +0,6 @@
-import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, UIDLRouteDefinitions } from '@teleporthq/teleport-types';
-declare type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, externals: Record<string, ComponentUIDL>, routeDefinitions: UIDLRouteDefinitions, structure: {
+import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, UIDLRouteDefinitions, ComponentPlugin } from '@teleporthq/teleport-types';
+type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
+    externals: Record<string, ComponentUIDL>;
+    plugins: ComponentPlugin[];
+}, routeDefinitions: UIDLRouteDefinitions, structure: {
     chunks: ChunkDefinition[];
@@ -4,0 +7,0 @@ dependencies: Record<string, UIDLDependency>;

dist/cjs/node-handlers.js

@@ -28,3 +28,3 @@ "use strict";
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
@@ -67,5 +67,6 @@ if (y = 0, t) op = [op[0] & 2, t.value];
 var constants_1 = require("./constants");
-var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         switch (node.type) {
+            case 'inject':
             case 'raw':
@@ -78,5 +79,5 @@ return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(node.content.toString())];
             case 'element':
-                return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 'dynamic':
-                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             default:
@@ -89,3 +90,3 @@ throw new teleport_types_1.HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
 exports.generateHtmlSynatx = generateHtmlSynatx;
-var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, compTag, _i, children_1, child, childTag;
@@ -103,3 +104,3 @@ return __generator(this, function (_e) {
                 if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 1:
@@ -115,3 +116,3 @@ compTag = _e.sent();
                 child = children_1[_i];
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(child, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 4:
@@ -152,10 +153,11 @@ childTag = _e.sent();
 }); };
-var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, _b, attrs, key, _c, children, dependencies, chunks, options, comp, lookUpTemplates, compHasSlots, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
-    var _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+var generateComponentContent = function (node, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, comp, lookUpTemplates, compHasSlots, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
+    var _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
             case 0:
+                externals = subComponentOptions.externals, plugins = subComponentOptions.plugins;
                 _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key, _c = _a.children, children = _c === void 0 ? [] : _c;
-                dependencies = structure.dependencies, chunks = structure.chunks, options = structure.options;
+                dependencies = structure.dependencies, _d = structure.chunks, chunks = _d === void 0 ? [] : _d, options = structure.options;
                 comp = teleport_shared_1.UIDLUtils.cloneObject(externals[elementType] || {});
@@ -221,11 +223,11 @@ lookUpTemplates = {};
                 lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_d = comp.node.content) === null || _d === void 0 ? void 0 : _d.style) || {})), { display: {
+                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_e = comp.node.content) === null || _e === void 0 ? void 0 : _e.style) || {})), { display: {
                                     type: 'static',
                                     content: 'contents',
-                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, subComponentOptions, routeDefinitions, structure)];
             case 1:
-                compTag = (_e.sent());
+                compTag = (_f.sent());
                 cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
                     templateStyle: 'html',
-                    templateChunkName: 'html-template',
+                    templateChunkName: constants_1.DEFAULT_COMPONENT_CHUNK_NAME,
                     declareDependency: 'import',
@@ -236,21 +238,32 @@ forceScoping: true,
                 });
-                return [4 /*yield*/, cssPlugin({
-                        uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
-                        chunks: [
-                            {
-                                type: teleport_types_1.ChunkType.HAST,
-                                fileType: teleport_types_1.FileType.HTML,
-                                name: constants_1.DEFAULT_COMPONENT_CHUNK_NAME,
-                                linkAfter: [],
-                                content: compTag,
-                                meta: {
-                                    nodesLookup: lookUpTemplates,
-                                },
+                initialStructure = {
+                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    chunks: [
+                        {
+                            type: teleport_types_1.ChunkType.HAST,
+                            fileType: teleport_types_1.FileType.HTML,
+                            name: constants_1.DEFAULT_COMPONENT_CHUNK_NAME,
+                            linkAfter: [],
+                            content: compTag,
+                            meta: {
+                                nodesLookup: lookUpTemplates,
                             },
-                        ],
-                        dependencies: dependencies,
-                        options: options,
-                    })];
+                        },
+                    ],
+                    dependencies: dependencies,
+                    options: options,
+                };
+                return [4 /*yield*/, __spreadArray([cssPlugin], plugins, true).reduce(function (previousPluginOperation, plugin) { return __awaiter(void 0, void 0, void 0, function () {
+                        var modifiedStructure;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, previousPluginOperation];
+                                case 1:
+                                    modifiedStructure = _a.sent();
+                                    return [2 /*return*/, plugin(modifiedStructure)];
+                            }
+                        });
+                    }); }, Promise.resolve(initialStructure))];
             case 2:
-                result = _e.sent();
+                result = _f.sent();
                 if (compHasSlots) {
@@ -266,3 +279,6 @@ result.chunks.forEach(function (chunk) {
                     if (!chunk) {
-                        styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
+                        styleChunk = result.chunks.find(function (item) { return item.fileType === teleport_types_1.FileType.CSS; });
+                        if (!styleChunk) {
+                            return [2 /*return*/];
+                        }
                         chunks.push(styleChunk);
@@ -322,3 +338,3 @@ }
         if (attrValue.type === 'raw') {
-            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content));
+            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content);
             return;
@@ -337,3 +353,3 @@ }
 var getValueFromReference = function (key, definitions) {
-    var usedReferenceValue = definitions[key];
+    var usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key];
     if (!usedReferenceValue) {
@@ -345,3 +361,3 @@ throw new teleport_types_1.HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (!['string', 'number'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type)) {
+    if (!['string', 'number', 'object'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type)) {
         throw new teleport_types_1.HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
@@ -348,0 +364,0 @@ }

dist/esm/constants.d.ts

@@ -1,2 +0,2 @@
-export declare const DEFAULT_COMPONENT_CHUNK_NAME = "html-template";
+export declare const DEFAULT_COMPONENT_CHUNK_NAME = "html-chunk";
 //# sourceMappingURL=constants.d.ts.map

dist/esm/constants.js

@@ -1,2 +0,2 @@
-export var DEFAULT_COMPONENT_CHUNK_NAME = 'html-template';
+export var DEFAULT_COMPONENT_CHUNK_NAME = 'html-chunk';
 //# sourceMappingURL=constants.js.map

dist/esm/index.d.ts

@@ -8,5 +8,5 @@ import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
     htmlComponentPlugin: ComponentPlugin;
-    addExternals: (list: Record<string, ComponentUIDL>) => void;
+    addExternals: (list: Record<string, ComponentUIDL>, plugins: ComponentPlugin[]) => void;
 }
-declare type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;
+type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;
 export declare const createHTMLBasePlugin: HtmlPluginFactory<HtmlPluginConfig>;
@@ -13,0 +13,0 @@ declare const _default: HtmlPlugin;

dist/esm/index.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
@@ -57,12 +57,15 @@ if (y = 0, t) op = [op[0] & 2, t.value];
     var externals = {};
-    var addExternals = function (list) {
+    var plugins = [];
+    var addExternals = function (list, subComponentPlugins) {
+        if (subComponentPlugins === void 0) { subComponentPlugins = []; }
         externals = __assign(__assign({}, externals), (list || {}));
+        plugins = subComponentPlugins;
     };
     var htmlComponentPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, _a, propDefinitions, _b, stateDefinitions, templatesLookUp, compBase, bodyContent;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, templatesLookUp, compBase, bodyContent;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
-                    uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-                    _a = uidl.propDefinitions, propDefinitions = _a === void 0 ? {} : _a, _b = uidl.stateDefinitions, stateDefinitions = _b === void 0 ? {} : _b;
+                    uidl = structure.uidl, _a = structure.chunks, chunks = _a === void 0 ? [] : _a, dependencies = structure.dependencies, options = structure.options;
+                    _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b, _c = uidl.stateDefinitions, stateDefinitions = _c === void 0 ? {} : _c;
                     templatesLookUp = {};
@@ -72,11 +75,14 @@ compBase = wrapComponent
                         : HASTBuilders.createHTMLNode('div');
-                    return [4 /*yield*/, generateHtmlSynatx(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, Object.values(externals).reduce(function (acc, comp) {
-                            UIDLUtils.setFriendlyOutputOptions(comp);
-                            comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
-                            comp.name = UIDLUtils.getComponentClassName(comp);
-                            acc[comp.name] = comp;
-                            return acc;
-                        }, {}), options.projectRouteDefinition, { chunks: chunks, dependencies: dependencies, options: options })];
+                    return [4 /*yield*/, generateHtmlSynatx(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, {
+                            externals: Object.values(externals).reduce(function (acc, comp) {
+                                UIDLUtils.setFriendlyOutputOptions(comp);
+                                comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
+                                comp.name = UIDLUtils.getComponentClassName(comp);
+                                acc[comp.name] = comp;
+                                return acc;
+                            }, {}),
+                            plugins: plugins,
+                        }, options.projectRouteDefinition, { chunks: chunks, dependencies: dependencies, options: options })];
                 case 1:
-                    bodyContent = _c.sent();
+                    bodyContent = _d.sent();
                     HASTUtils.addChildNode(compBase, bodyContent);
@@ -83,0 +89,0 @@ chunks.push({

dist/esm/node-handlers.d.ts

@@ -1,3 +0,6 @@
-import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, UIDLRouteDefinitions } from '@teleporthq/teleport-types';
-declare type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, externals: Record<string, ComponentUIDL>, routeDefinitions: UIDLRouteDefinitions, structure: {
+import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, UIDLRouteDefinitions, ComponentPlugin } from '@teleporthq/teleport-types';
+type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
+    externals: Record<string, ComponentUIDL>;
+    plugins: ComponentPlugin[];
+}, routeDefinitions: UIDLRouteDefinitions, structure: {
     chunks: ChunkDefinition[];
@@ -4,0 +7,0 @@ dependencies: Record<string, UIDLDependency>;

dist/esm/node-handlers.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
@@ -64,5 +64,6 @@ if (y = 0, t) op = [op[0] & 2, t.value];
 import { DEFAULT_COMPONENT_CHUNK_NAME } from './constants';
-export var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+export var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         switch (node.type) {
+            case 'inject':
             case 'raw':
@@ -75,5 +76,5 @@ return [2 /*return*/, HASTBuilders.createTextNode(node.content.toString())];
             case 'element':
-                return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 'dynamic':
-                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             default:
@@ -85,3 +86,3 @@ throw new HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
 }); };
-var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, compTag, _i, children_1, child, childTag;
@@ -99,3 +100,3 @@ return __generator(this, function (_e) {
                 if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 1:
@@ -111,3 +112,3 @@ compTag = _e.sent();
                 child = children_1[_i];
-                return [4 /*yield*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+                return [4 /*yield*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
             case 4:
@@ -148,10 +149,11 @@ childTag = _e.sent();
 }); };
-var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, _b, attrs, key, _c, children, dependencies, chunks, options, comp, lookUpTemplates, compHasSlots, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
-    var _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+var generateComponentContent = function (node, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, comp, lookUpTemplates, compHasSlots, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
+    var _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
             case 0:
+                externals = subComponentOptions.externals, plugins = subComponentOptions.plugins;
                 _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key, _c = _a.children, children = _c === void 0 ? [] : _c;
-                dependencies = structure.dependencies, chunks = structure.chunks, options = structure.options;
+                dependencies = structure.dependencies, _d = structure.chunks, chunks = _d === void 0 ? [] : _d, options = structure.options;
                 comp = UIDLUtils.cloneObject(externals[elementType] || {});
@@ -217,11 +219,11 @@ lookUpTemplates = {};
                 lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, generateHtmlSynatx(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_d = comp.node.content) === null || _d === void 0 ? void 0 : _d.style) || {})), { display: {
+                return [4 /*yield*/, generateHtmlSynatx(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_e = comp.node.content) === null || _e === void 0 ? void 0 : _e.style) || {})), { display: {
                                     type: 'static',
                                     content: 'contents',
-                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, subComponentOptions, routeDefinitions, structure)];
             case 1:
-                compTag = (_e.sent());
+                compTag = (_f.sent());
                 cssPlugin = createCSSPlugin({
                     templateStyle: 'html',
-                    templateChunkName: 'html-template',
+                    templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
                     declareDependency: 'import',
@@ -232,21 +234,32 @@ forceScoping: true,
                 });
-                return [4 /*yield*/, cssPlugin({
-                        uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
-                        chunks: [
-                            {
-                                type: ChunkType.HAST,
-                                fileType: FileType.HTML,
-                                name: DEFAULT_COMPONENT_CHUNK_NAME,
-                                linkAfter: [],
-                                content: compTag,
-                                meta: {
-                                    nodesLookup: lookUpTemplates,
-                                },
+                initialStructure = {
+                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    chunks: [
+                        {
+                            type: ChunkType.HAST,
+                            fileType: FileType.HTML,
+                            name: DEFAULT_COMPONENT_CHUNK_NAME,
+                            linkAfter: [],
+                            content: compTag,
+                            meta: {
+                                nodesLookup: lookUpTemplates,
                             },
-                        ],
-                        dependencies: dependencies,
-                        options: options,
-                    })];
+                        },
+                    ],
+                    dependencies: dependencies,
+                    options: options,
+                };
+                return [4 /*yield*/, __spreadArray([cssPlugin], plugins, true).reduce(function (previousPluginOperation, plugin) { return __awaiter(void 0, void 0, void 0, function () {
+                        var modifiedStructure;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, previousPluginOperation];
+                                case 1:
+                                    modifiedStructure = _a.sent();
+                                    return [2 /*return*/, plugin(modifiedStructure)];
+                            }
+                        });
+                    }); }, Promise.resolve(initialStructure))];
             case 2:
-                result = _e.sent();
+                result = _f.sent();
                 if (compHasSlots) {
@@ -262,3 +275,6 @@ result.chunks.forEach(function (chunk) {
                     if (!chunk) {
-                        styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
+                        styleChunk = result.chunks.find(function (item) { return item.fileType === FileType.CSS; });
+                        if (!styleChunk) {
+                            return [2 /*return*/];
+                        }
                         chunks.push(styleChunk);
@@ -318,3 +334,3 @@ }
         if (attrValue.type === 'raw') {
-            HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content));
+            HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content);
             return;
@@ -333,3 +349,3 @@ }
 var getValueFromReference = function (key, definitions) {
-    var usedReferenceValue = definitions[key];
+    var usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key];
     if (!usedReferenceValue) {
@@ -341,3 +357,3 @@ throw new HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (!['string', 'number'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type)) {
+    if (!['string', 'number', 'object'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type)) {
         throw new HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
@@ -344,0 +360,0 @@ }

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.29.0-alpha.0",
+  "version": "0.29.0",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -27,9 +27,9 @@ "author": "teleportHQ",
   "dependencies": {
-    "@teleporthq/teleport-plugin-common": "^0.29.0-alpha.0",
-    "@teleporthq/teleport-plugin-css": "^0.29.0-alpha.0",
-    "@teleporthq/teleport-shared": "^0.29.0-alpha.0",
-    "@teleporthq/teleport-types": "^0.29.0-alpha.0",
-    "@teleporthq/teleport-uidl-builders": "^0.29.0-alpha.0"
+    "@teleporthq/teleport-plugin-common": "^0.29.0",
+    "@teleporthq/teleport-plugin-css": "^0.29.0",
+    "@teleporthq/teleport-shared": "^0.29.0",
+    "@teleporthq/teleport-types": "^0.29.0",
+    "@teleporthq/teleport-uidl-builders": "^0.29.0"
   },
-  "gitHead": "2f323d56f7f8fb7823f9a77d154f9873ec08b38d"
+  "gitHead": "9a99af0b622182d02a80ea6ff6b45221facab5c9"
 }

src/constants.ts

@@ -1,1 +0,1 @@
-export const DEFAULT_COMPONENT_CHUNK_NAME = 'html-template'
+export const DEFAULT_COMPONENT_CHUNK_NAME = 'html-chunk'

src/index.ts

@@ -21,3 +21,3 @@ import {
   htmlComponentPlugin: ComponentPlugin
-  addExternals: (list: Record<string, ComponentUIDL>) => void
+  addExternals: (list: Record<string, ComponentUIDL>, plugins: ComponentPlugin[]) => void
 }
@@ -30,4 +30,8 @@
   let externals: Record<string, ComponentUIDL> = {}
+  let plugins: ComponentPlugin[] = []
 
-  const addExternals = (list?: Record<string, ComponentUIDL>) => {
+  const addExternals = (
+    list?: Record<string, ComponentUIDL>,
+    subComponentPlugins: ComponentPlugin[] = []
+  ) => {
     externals = {
@@ -37,6 +41,7 @@ ...externals,
     }
+    plugins = subComponentPlugins
   }
 
   const htmlComponentPlugin: ComponentPlugin = async (structure) => {
-    const { uidl, chunks, dependencies, options } = structure
+    const { uidl, chunks = [], dependencies, options } = structure
     const { propDefinitions = {}, stateDefinitions = {} } = uidl
@@ -54,9 +59,15 @@
       stateDefinitions,
-      Object.values(externals).reduce((acc: Record<string, ComponentUIDL>, comp: ComponentUIDL) => {
-        UIDLUtils.setFriendlyOutputOptions(comp)
-        comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent'
-        comp.name = UIDLUtils.getComponentClassName(comp)
-        acc[comp.name] = comp
-        return acc
-      }, {}),
+      {
+        externals: Object.values(externals).reduce(
+          (acc: Record<string, ComponentUIDL>, comp: ComponentUIDL) => {
+            UIDLUtils.setFriendlyOutputOptions(comp)
+            comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent'
+            comp.name = UIDLUtils.getComponentClassName(comp)
+            acc[comp.name] = comp
+            return acc
+          },
+          {}
+        ),
+        plugins,
+      },
       options.projectRouteDefinition,
@@ -63,0 +74,0 @@ { chunks, dependencies, options }

src/node-handlers.ts

@@ -20,2 +20,4 @@ import {
   UIDLRouteDefinitions,
+  ComponentPlugin,
+  ComponentStructure,
 } from '@teleporthq/teleport-types'
@@ -33,3 +35,6 @@ import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  externals: Record<string, ComponentUIDL>,
+  subComponentOptions: {
+    externals: Record<string, ComponentUIDL>
+    plugins: ComponentPlugin[]
+  },
   routeDefinitions: UIDLRouteDefinitions,
@@ -48,3 +53,3 @@ structure: {
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
@@ -54,2 +59,3 @@ structure
   switch (node.type) {
+    case 'inject':
     case 'raw':
@@ -70,3 +76,3 @@ return HASTBuilders.createTextNode(node.content.toString())
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -82,3 +88,3 @@ structure
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -104,3 +110,3 @@ structure
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
@@ -118,3 +124,2 @@ structure
   } = node.content
-
   const elementNode = HASTBuilders.createHTMLNode(elementType)
@@ -133,3 +138,3 @@ templatesLookUp[key] = elementNode
       stateDefinitions,
-      externals,
+      subComponentOptions,
       routeDefinitions,
@@ -148,3 +153,3 @@ structure
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -191,3 +196,6 @@ structure
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  externals: Record<string, ComponentUIDL>,
+  subComponentOptions: {
+    externals: Record<string, ComponentUIDL>
+    plugins: ComponentPlugin[]
+  },
   routeDefinitions: UIDLRouteDefinitions,
@@ -200,4 +208,5 @@ structure: {
 ) => {
+  const { externals, plugins } = subComponentOptions
   const { elementType, attrs = {}, key, children = [] } = node.content
-  const { dependencies, chunks, options } = structure
+  const { dependencies, chunks = [], options } = structure
   const comp = UIDLUtils.cloneObject(externals[elementType] || {}) as ComponentUIDL
@@ -244,3 +253,2 @@ const lookUpTemplates: Record<string, unknown> = {}
   const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
-
   const propsForInstance = Object.keys(combinedProps).reduce(
@@ -278,3 +286,2 @@ (acc: Record<string, UIDLPropDefinition>, propKey) => {
   )
-
   const elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType))
@@ -300,3 +307,3 @@ lookUpTemplates[key] = elementNode
     statesForInstance,
-    externals,
+    subComponentOptions,
     routeDefinitions,
@@ -308,3 +315,3 @@ structure
     templateStyle: 'html',
-    templateChunkName: 'html-template',
+    templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
     declareDependency: 'import',
@@ -316,3 +323,3 @@ forceScoping: true,
 
-  const result = await cssPlugin({
+  const initialStructure: ComponentStructure = {
     uidl: {
@@ -337,4 +344,12 @@ ...comp,
     options,
-  })
+  }
 
+  const result = await [cssPlugin, ...plugins].reduce(
+    async (previousPluginOperation: Promise<ComponentStructure>, plugin) => {
+      const modifiedStructure = await previousPluginOperation
+      return plugin(modifiedStructure)
+    },
+    Promise.resolve(initialStructure)
+  )
+
   if (compHasSlots) {
@@ -349,3 +364,8 @@ result.chunks.forEach((chunk) => {
     if (!chunk) {
-      const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
+      const styleChunk = result.chunks.find(
+        (item: ChunkDefinition) => item.fileType === FileType.CSS
+      )
+      if (!styleChunk) {
+        return
+      }
       chunks.push(styleChunk)
@@ -431,3 +451,3 @@ }
     if (attrValue.type === 'raw') {
-      HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content))
+      HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content)
       return
@@ -450,3 +470,3 @@ }
 ): string => {
-  const usedReferenceValue = definitions[key]
+  const usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key]
 
@@ -469,3 +489,3 @@ if (!usedReferenceValue) {
 
-  if (!['string', 'number'].includes(usedReferenceValue?.type)) {
+  if (!['string', 'number', 'object'].includes(usedReferenceValue?.type)) {
     throw new HTMLComponentGeneratorError(
@@ -472,0 +492,0 @@ `Attribute is using dynamic value, but received of type ${JSON.stringify(

No alert changes

Improved metrics

Total package byte prevSize

157054

5.43%

Lines of code

1570

5.58%

Dependency changes

• Updated

  @teleporthq/teleport-plugin-common@^0.29.0

• Updated

  @teleporthq/teleport-plugin-css@^0.29.0

• Updated

  @teleporthq/teleport-shared@^0.29.0

• Updated

  @teleporthq/teleport-types@^0.29.0

• Updated

  @teleporthq/teleport-uidl-builders@^0.29.0