@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
JavaScript
;
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;