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

Comparing version 0.22.2 to 0.22.3

dist/cjs/node-handlers.js

@@ -49,2 +49,11 @@ "use strict";
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -65,2 +74,4 @@ exports.generateHtmlSynatx = void 0;
                 return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(teleport_shared_1.StringUtils.encode(node.content.toString()))];
+            case 'slot':
+                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createHTMLNode(node.type)];
             case 'element':
@@ -138,13 +149,45 @@ return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
 var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, _b, attrs, key, dependencies, chunks, options, comp, lookUpTemplates, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    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) {
             case 0:
-                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key;
+                _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;
-                comp = externals[elementType];
+                comp = teleport_shared_1.UIDLUtils.cloneObject(externals[elementType] || {});
                 lookUpTemplates = {};
-                if (!comp) {
+                compHasSlots = false;
+                if (!comp || !(comp === null || comp === void 0 ? void 0 : comp.node)) {
                     throw new teleport_types_1.HTMLComponentGeneratorError("".concat(elementType, " is not found from the externals. \n\n        Received ").concat(JSON.stringify(Object.keys(externals), null, 2)));
                 }
+                if (children.length) {
+                    compHasSlots = true;
+                    teleport_shared_1.UIDLUtils.traverseNodes(comp.node, function (childNode, parentNode) {
+                        var _a, _b;
+                        if (childNode.type === 'slot' && parentNode.type === 'element') {
+                            var nonSlotNodes = (_b = (_a = parentNode.content) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.filter(function (n) { return n.type !== 'slot'; });
+                            parentNode.content.children = __spreadArray(__spreadArray([], nonSlotNodes, true), [
+                                {
+                                    type: 'element',
+                                    content: {
+                                        key: 'custom-slot',
+                                        elementType: 'slot',
+                                        style: {
+                                            display: {
+                                                type: 'static',
+                                                content: 'contents',
+                                            },
+                                        },
+                                        children: children,
+                                    },
+                                },
+                            ], false);
+                        }
+                    });
+                    /*
+                      Since we don't generate direct component children in HTML. We need to reset this,
+                      or else the plugins like css and others try to parse and process them.
+                    */
+                    node.content.children = [];
+                }
                 combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
@@ -172,7 +215,10 @@ propsForInstance = Object.keys(combinedProps).reduce(function (acc, propKey) {
                 }, {});
-                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(elementType);
+                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(teleport_shared_1.StringUtils.camelCaseToDashCase(elementType));
                 lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(comp.node, lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                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: {
+                                    type: 'static',
+                                    content: 'contents',
+                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
             case 1:
-                compTag = (_c.sent());
+                compTag = (_e.sent());
                 cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
@@ -204,10 +250,18 @@ templateStyle: 'html',
             case 2:
-                result = _c.sent();
-                chunk = chunks.find(function (item) { return item.name === comp.name; });
-                if (!chunk) {
-                    styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
-                    chunks.push(styleChunk);
+                result = _e.sent();
+                if (compHasSlots) {
+                    result.chunks.forEach(function (chunk) {
+                        if (chunk.fileType === teleport_types_1.FileType.CSS) {
+                            chunks.push(chunk);
+                        }
+                    });
                 }
-                teleport_plugin_common_1.HASTUtils.addChildNode(elementNode, compTag);
-                return [2 /*return*/, elementNode];
+                else {
+                    chunk = chunks.find(function (item) { return item.name === comp.name; });
+                    if (!chunk) {
+                        styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
+                        chunks.push(styleChunk);
+                    }
+                }
+                return [2 /*return*/, compTag];
         }
@@ -214,0 +268,0 @@ });

dist/esm/node-handlers.js

@@ -48,5 +48,14 @@ var __assign = (this && this.__assign) || function () {
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { HTMLComponentGeneratorError, ChunkType, FileType, } from '@teleporthq/teleport-types';
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common';
-import { StringUtils } from '@teleporthq/teleport-shared';
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
 import { staticNode } from '@teleporthq/teleport-uidl-builders';
@@ -62,2 +71,4 @@ import { createCSSPlugin } from '@teleporthq/teleport-plugin-css';
                 return [2 /*return*/, HASTBuilders.createTextNode(StringUtils.encode(node.content.toString()))];
+            case 'slot':
+                return [2 /*return*/, HASTBuilders.createHTMLNode(node.type)];
             case 'element':
@@ -134,13 +145,45 @@ return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
 var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, _b, attrs, key, dependencies, chunks, options, comp, lookUpTemplates, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    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) {
             case 0:
-                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key;
+                _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;
-                comp = externals[elementType];
+                comp = UIDLUtils.cloneObject(externals[elementType] || {});
                 lookUpTemplates = {};
-                if (!comp) {
+                compHasSlots = false;
+                if (!comp || !(comp === null || comp === void 0 ? void 0 : comp.node)) {
                     throw new HTMLComponentGeneratorError("".concat(elementType, " is not found from the externals. \n\n        Received ").concat(JSON.stringify(Object.keys(externals), null, 2)));
                 }
+                if (children.length) {
+                    compHasSlots = true;
+                    UIDLUtils.traverseNodes(comp.node, function (childNode, parentNode) {
+                        var _a, _b;
+                        if (childNode.type === 'slot' && parentNode.type === 'element') {
+                            var nonSlotNodes = (_b = (_a = parentNode.content) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.filter(function (n) { return n.type !== 'slot'; });
+                            parentNode.content.children = __spreadArray(__spreadArray([], nonSlotNodes, true), [
+                                {
+                                    type: 'element',
+                                    content: {
+                                        key: 'custom-slot',
+                                        elementType: 'slot',
+                                        style: {
+                                            display: {
+                                                type: 'static',
+                                                content: 'contents',
+                                            },
+                                        },
+                                        children: children,
+                                    },
+                                },
+                            ], false);
+                        }
+                    });
+                    /*
+                      Since we don't generate direct component children in HTML. We need to reset this,
+                      or else the plugins like css and others try to parse and process them.
+                    */
+                    node.content.children = [];
+                }
                 combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
@@ -168,7 +211,10 @@ propsForInstance = Object.keys(combinedProps).reduce(function (acc, propKey) {
                 }, {});
-                elementNode = HASTBuilders.createHTMLNode(elementType);
+                elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType));
                 lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, generateHtmlSynatx(comp.node, lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                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: {
+                                    type: 'static',
+                                    content: 'contents',
+                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
             case 1:
-                compTag = (_c.sent());
+                compTag = (_e.sent());
                 cssPlugin = createCSSPlugin({
@@ -200,10 +246,18 @@ templateStyle: 'html',
             case 2:
-                result = _c.sent();
-                chunk = chunks.find(function (item) { return item.name === comp.name; });
-                if (!chunk) {
-                    styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
-                    chunks.push(styleChunk);
+                result = _e.sent();
+                if (compHasSlots) {
+                    result.chunks.forEach(function (chunk) {
+                        if (chunk.fileType === FileType.CSS) {
+                            chunks.push(chunk);
+                        }
+                    });
                 }
-                HASTUtils.addChildNode(elementNode, compTag);
-                return [2 /*return*/, elementNode];
+                else {
+                    chunk = chunks.find(function (item) { return item.name === comp.name; });
+                    if (!chunk) {
+                        styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
+                        chunks.push(styleChunk);
+                    }
+                }
+                return [2 /*return*/, compTag];
         }
@@ -210,0 +264,0 @@ });

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -33,3 +33,3 @@ "author": "teleportHQ",
   },
-  "gitHead": "d90f5f7b77b1bdaf7703760abf2fd97af0e768a4"
+  "gitHead": "7f670fc2d9d6468f9689712e424f5bff3c9c8a0b"
 }

src/node-handlers.ts

@@ -22,3 +22,3 @@ import {
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
-import { StringUtils } from '@teleporthq/teleport-shared'
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { staticNode } from '@teleporthq/teleport-uidl-builders'
@@ -58,2 +58,5 @@ import { createCSSPlugin } from '@teleporthq/teleport-plugin-css'
 
+    case 'slot':
+      return HASTBuilders.createHTMLNode(node.type)
+
     case 'element':
@@ -187,8 +190,9 @@ return generatElementNode(
 ) => {
-  const { elementType, attrs = {}, key } = node.content
+  const { elementType, attrs = {}, key, children = [] } = node.content
   const { dependencies, chunks, options } = structure
-  const comp = externals[elementType]
+  const comp = UIDLUtils.cloneObject(externals[elementType] || {}) as ComponentUIDL
   const lookUpTemplates: Record<string, unknown> = {}
+  let compHasSlots: boolean = false
 
-  if (!comp) {
+  if (!comp || !comp?.node) {
     throw new HTMLComponentGeneratorError(`${elementType} is not found from the externals. \n
@@ -198,2 +202,33 @@ Received ${JSON.stringify(Object.keys(externals), null, 2)}`)
 
+  if (children.length) {
+    compHasSlots = true
+    UIDLUtils.traverseNodes(comp.node, (childNode, parentNode) => {
+      if (childNode.type === 'slot' && parentNode.type === 'element') {
+        const nonSlotNodes = parentNode.content?.children?.filter((n) => n.type !== 'slot')
+        parentNode.content.children = [
+          ...nonSlotNodes,
+          {
+            type: 'element',
+            content: {
+              key: 'custom-slot',
+              elementType: 'slot',
+              style: {
+                display: {
+                  type: 'static',
+                  content: 'contents',
+                },
+              },
+              children,
+            },
+          },
+        ]
+      }
+    })
+    /* 
+      Since we don't generate direct component children in HTML. We need to reset this,
+      or else the plugins like css and others try to parse and process them.
+    */
+    node.content.children = []
+  }
+
   const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
@@ -232,7 +267,19 @@ const propsForInstance = Object.keys(combinedProps).reduce(
   )
-  const elementNode = HASTBuilders.createHTMLNode(elementType)
+  const elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType))
   lookUpTemplates[key] = elementNode
 
   const compTag = (await generateHtmlSynatx(
-    comp.node,
+    {
+      ...comp.node,
+      content: {
+        ...comp.node.content,
+        style: {
+          ...(comp.node.content?.style || {}),
+          display: {
+            type: 'static',
+            content: 'contents',
+          },
+        },
+      },
+    },
     lookUpTemplates,
@@ -277,10 +324,17 @@ propsForInstance,
 
-  const chunk = chunks.find((item) => item.name === comp.name)
-  if (!chunk) {
-    const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
-    chunks.push(styleChunk)
+  if (compHasSlots) {
+    result.chunks.forEach((chunk) => {
+      if (chunk.fileType === FileType.CSS) {
+        chunks.push(chunk)
+      }
+    })
+  } else {
+    const chunk = chunks.find((item) => item.name === comp.name)
+    if (!chunk) {
+      const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
+      chunks.push(styleChunk)
+    }
   }
 
-  HASTUtils.addChildNode(elementNode, compTag)
-  return elementNode
+  return compTag
 }
@@ -287,0 +341,0 @@

No alert changes

Improved metrics

Total package byte prevSize

144632

increased by7.79%

Lines of code

1475

increased by12.17%

No dependency changes