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

Comparing version 0.35.0-alpha.0 to 0.36.0-alpha.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,3 +8,3 @@ import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
     htmlComponentPlugin: ComponentPlugin;
-    addExternals: (list: Record<string, ComponentUIDL>) => void;
+    addExternals: (list: Record<string, ComponentUIDL>, plugins: ComponentPlugin[]) => void;
 }
@@ -11,0 +11,0 @@ type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;

dist/cjs/index.js

@@ -59,12 +59,15 @@ "use strict";
     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 = {};
@@ -74,11 +77,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);
@@ -85,0 +91,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';
-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

@@ -66,3 +66,3 @@ "use strict";
 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) {
@@ -78,5 +78,5 @@ switch (node.type) {
             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 +89,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 +103,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 +115,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 +152,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 +222,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 +237,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 +278,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);
@@ -269,0 +284,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,3 +8,3 @@ import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
     htmlComponentPlugin: ComponentPlugin;
-    addExternals: (list: Record<string, ComponentUIDL>) => void;
+    addExternals: (list: Record<string, ComponentUIDL>, plugins: ComponentPlugin[]) => void;
 }
@@ -11,0 +11,0 @@ type HtmlPluginFactory<T> = (config?: Partial<T & ComponentDefaultPluginParams>) => HtmlPlugin;

dist/esm/index.js

@@ -56,12 +56,15 @@ var __assign = (this && this.__assign) || function () {
     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 = {};
@@ -71,11 +74,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);
@@ -82,0 +88,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';
-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

@@ -63,3 +63,3 @@ var __assign = (this && this.__assign) || function () {
 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) {
@@ -75,5 +75,5 @@ switch (node.type) {
             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 +85,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 +99,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 +111,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 +148,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 +218,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 +233,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 +274,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);
@@ -265,0 +280,0 @@ }

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.35.0-alpha.0",
+  "version": "0.36.0-alpha.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.35.0-alpha.0",
-    "@teleporthq/teleport-plugin-css": "^0.35.0-alpha.0",
-    "@teleporthq/teleport-shared": "^0.35.0-alpha.0",
-    "@teleporthq/teleport-types": "^0.35.0-alpha.0",
-    "@teleporthq/teleport-uidl-builders": "^0.35.0-alpha.0"
+    "@teleporthq/teleport-plugin-common": "^0.36.0-alpha.0",
+    "@teleporthq/teleport-plugin-css": "^0.36.0-alpha.0",
+    "@teleporthq/teleport-shared": "^0.36.0-alpha.0",
+    "@teleporthq/teleport-types": "^0.36.0-alpha.0",
+    "@teleporthq/teleport-uidl-builders": "^0.36.0-alpha.0"
   },
-  "gitHead": "e8ce842bf620a51081ff6f1cdf95b276325c19d2"
+  "gitHead": "4f42496a502dc3bacb427e2ecc6fabda42cde0c2"
 }

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,
@@ -70,3 +75,3 @@ structure
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -82,3 +87,3 @@ structure
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -104,3 +109,3 @@ structure
   stateDefinitions,
-  externals,
+  subComponentOptions,
   routeDefinitions,
@@ -132,3 +137,3 @@ structure
       stateDefinitions,
-      externals,
+      subComponentOptions,
       routeDefinitions,
@@ -147,3 +152,3 @@ structure
         stateDefinitions,
-        externals,
+        subComponentOptions,
         routeDefinitions,
@@ -190,3 +195,6 @@ structure
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  externals: Record<string, ComponentUIDL>,
+  subComponentOptions: {
+    externals: Record<string, ComponentUIDL>
+    plugins: ComponentPlugin[]
+  },
   routeDefinitions: UIDLRouteDefinitions,
@@ -199,4 +207,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
@@ -297,3 +306,3 @@ const lookUpTemplates: Record<string, unknown> = {}
     statesForInstance,
-    externals,
+    subComponentOptions,
     routeDefinitions,
@@ -305,3 +314,3 @@ structure
     templateStyle: 'html',
-    templateChunkName: 'html-template',
+    templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
     declareDependency: 'import',
@@ -313,3 +322,3 @@ forceScoping: true,
 
-  const result = await cssPlugin({
+  const initialStructure: ComponentStructure = {
     uidl: {
@@ -334,4 +343,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) {
@@ -346,3 +363,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)
@@ -349,0 +371,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

157681

3.39%

Lines of code

1570

5.37%

Dependency changes

• + Added

  @teleporthq/teleport-plugin-common@0.36.6
  (transitive)

• + Added

  @teleporthq/teleport-plugin-css@0.36.6
  (transitive)

• + Added

  @teleporthq/teleport-shared@0.36.6
  (transitive)

• + Added

  @teleporthq/teleport-types@0.36.6
  (transitive)

• + Added

  @teleporthq/teleport-uidl-builders@0.36.6
  (transitive)

• - Removed

  @teleporthq/teleport-plugin-common@0.35.0
  (transitive)

• - Removed

  @teleporthq/teleport-plugin-css@0.35.0
  (transitive)

• - Removed

  @teleporthq/teleport-shared@0.35.0
  (transitive)

• - Removed

  @teleporthq/teleport-types@0.35.0
  (transitive)

• - Removed

  @teleporthq/teleport-uidl-builders@0.35.0
  (transitive)

• Updated

  @teleporthq/teleport-plugin-common@^0.36.0-alpha.0

• Updated

  @teleporthq/teleport-plugin-css@^0.36.0-alpha.0

• Updated

  @teleporthq/teleport-shared@^0.36.0-alpha.0

• Updated

  @teleporthq/teleport-types@^0.36.0-alpha.0

• Updated

  @teleporthq/teleport-uidl-builders@^0.36.0-alpha.0