UNPKG

@builder.io/mitosis

Version:

Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io

130 lines (129 loc) 5 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getExportsAndLocal = exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = void 0; const dash_case_1 = require("../../../helpers/dash-case"); const event_handlers_1 = require("../../../helpers/event-handlers"); const render_imports_1 = require("../../../helpers/render-imports"); const getTagName = (name, { prefix }) => { const dashName = (0, dash_case_1.dashCase)(name); if (prefix) { const dashPrefix = prefix.endsWith('-') ? prefix : `${prefix}-`; if (!dashName.startsWith(dashPrefix)) { return `${dashPrefix}${dashName}`; } } return dashName; }; exports.getTagName = getTagName; const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => { const propsTypeRef = json.propsTypeRef; const internalTypes = json.types; const isInternalType = propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef)); return props .map((item) => { var _a; const defaultProp = defaultProps ? (_a = defaultProps[item]) === null || _a === void 0 ? void 0 : _a.code : undefined; const defaultPropString = defaultProp ? ` = ${defaultProp}` : ''; const propOption = propOptions[item]; const hasTyping = propsTypeRef && propsTypeRef !== 'any' && propsTypeRef !== 'unknown' && propsTypeRef !== 'never' && !isInternalType; if ((0, event_handlers_1.checkIsEvent)(item)) { // Stencil adds "on" to every `@Event` so we need to remove "on" from event props // https://stenciljs.com/docs/events#using-events-in-jsx const eventType = hasTyping ? `EventEmitter<Parameters<Required<${propsTypeRef}>["${item}"]>[number]> | void` : 'any'; return `@Event() ${(0, event_handlers_1.getEventNameWithoutOn)(item)}: ${eventType}${defaultPropString}`; } const propType = hasTyping ? `${propsTypeRef}["${item}"]` : 'any'; return `@Prop(${propOption ? JSON.stringify(propOption) : ''}) ${item}: ${propType}${defaultPropString}`; }) .join(';\n'); }; exports.getPropsAsCode = getPropsAsCode; /** * Check for root element if it needs a wrapping <Host> * @param children */ const needsWrap = (children) => { if (children.length !== 1) { return true; } else if (children.length === 1) { const firstChild = children.at(0); if ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'Show' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'For') { return true; } } return false; }; exports.needsWrap = needsWrap; /** * Dynamically creates all imports from `@stencil/core` * @param wrap * @param events * @param props * @param dataString * @param watch */ const getStencilCoreImportsAsString = ({ wrap, events, props, dataString, watch, }) => { const stencilCoreImports = { Component: true, h: true, Fragment: true, Host: wrap, Watch: watch, Event: events.length > 0, EventEmitter: events.length > 0, Prop: props.length > 0, State: dataString.length > 0, }; return Object.entries(stencilCoreImports) .map(([key, bool]) => (bool ? key : '')) .filter((key) => !!key) .join(', '); }; exports.getStencilCoreImportsAsString = getStencilCoreImportsAsString; const getImports = (json, options, childComponents) => { return (0, render_imports_1.renderPreComponent)({ explicitImportFileExtension: options.explicitImportFileExtension, component: json, target: 'stencil', excludeExportAndLocal: true, importMapper: (_, theImport, importedValues) => { const childImport = importedValues.defaultImport; if (childImport && childComponents.includes(childImport)) { return `import {${childImport}} from '${theImport.path}';`; } return undefined; }, }); }; exports.getImports = getImports; /** * Converts the deps string into an array of strings * @param deps The hook dependencies as string e.g.: "[this.a,this.b]" */ const getDepsAsArray = (deps) => { return deps .replace('[', '') .replace(']', '') .replaceAll('this.', '') .split(',') .map((dep) => dep.trim()); }; exports.getDepsAsArray = getDepsAsArray; const getExportsAndLocal = (json) => { return Object.entries(json.exports || {}) .map(([key, { usedInLocal, code }]) => { if (usedInLocal) { return `${key} = ${code.substring(code.indexOf('=') + 1)}`; } return ''; }) .join('\n'); }; exports.getExportsAndLocal = getExportsAndLocal;