@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
142 lines (141 loc) • 5.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFileExtensionForTarget = exports.getComponentFileExtensionForTarget = exports.renameImport = exports.renameComponentImport = exports.renameComponentFile = exports.INPUT_EXTENSION_REGEX = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = exports.checkIsSvelteComponentFilePath = exports.COMPONENT_IMPORT_EXTENSIONS = void 0;
const output_1 = require("./output");
const COMPONENT_EXTENSIONS = {
jsx: ['.lite.tsx', '.lite.jsx'],
svelte: ['.svelte'],
};
exports.COMPONENT_IMPORT_EXTENSIONS = [COMPONENT_EXTENSIONS.svelte, COMPONENT_EXTENSIONS.jsx]
.flat()
.concat(['.lite']);
const checkIsSvelteComponentFilePath = (filePath) => COMPONENT_EXTENSIONS.svelte.some((x) => filePath.endsWith(x));
exports.checkIsSvelteComponentFilePath = checkIsSvelteComponentFilePath;
const checkIsLiteComponentFilePath = (filePath) => COMPONENT_EXTENSIONS.jsx.some((x) => filePath.endsWith(x));
exports.checkIsLiteComponentFilePath = checkIsLiteComponentFilePath;
const checkIsMitosisComponentFilePath = (filePath) => (0, exports.checkIsLiteComponentFilePath)(filePath) || (0, exports.checkIsSvelteComponentFilePath)(filePath);
exports.checkIsMitosisComponentFilePath = checkIsMitosisComponentFilePath;
/**
* Matches `.svelte`, `.lite.tsx`, `.lite.jsx` files (with optional `.jsx`/`.tsx` extension)
*/
exports.INPUT_EXTENSION_REGEX = /\.(svelte|(lite(\.tsx|\.jsx)?))/g;
const getExplicitFileExtension = (path, explicitBuildFileExtensions) => {
if (explicitBuildFileExtensions) {
for (const [extension, regex] of Object.entries(explicitBuildFileExtensions)) {
const match = path.match(regex);
if (match) {
return extension;
}
}
}
return undefined;
};
const renameComponentFile = ({ path, target, options, }) => {
var _a;
const explicitExtension = getExplicitFileExtension(path, (_a = options.options[target]) === null || _a === void 0 ? void 0 : _a.explicitBuildFileExtensions);
const extension = explicitExtension !== null && explicitExtension !== void 0 ? explicitExtension : (0, exports.getComponentFileExtensionForTarget)({
type: 'filename',
target,
isTypescript: (0, output_1.checkShouldOutputTypeScript)({ options, target }),
});
return path.replace(exports.INPUT_EXTENSION_REGEX, extension);
};
exports.renameComponentFile = renameComponentFile;
/**
* just like `INPUT_EXTENSION_REGEX`, but adds trailing quotes to the end of import paths.
*/
const INPUT_EXTENSION_IMPORT_REGEX = /\.(svelte|(lite(\.tsx|\.jsx)?))(?<quote>['"])/g;
const renameComponentImport = ({ importPath, target, explicitImportFileExtension, }) => {
return importPath.replace(INPUT_EXTENSION_IMPORT_REGEX, `${(0, exports.getComponentFileExtensionForTarget)({
type: 'import',
target,
explicitImportFileExtension,
})}$4`);
};
exports.renameComponentImport = renameComponentImport;
const renameImport = ({ importPath, target, explicitImportFileExtension, }) => {
return importPath.replace(/\.js(['"])/g, `${(0, exports.getFileExtensionForTarget)({
target,
explicitImportFileExtension,
})}$1`);
};
exports.renameImport = renameImport;
/**
* Provides the correct file extension for a given component. This is used:
* - in `core` to render import statements within other components.
* - in `cli` to render filenames for generated components, and import statements within plain `.js`/`.ts` files.
*/
const getComponentFileExtensionForTarget = (args) => {
switch (args.target) {
case 'angular': {
switch (args.type) {
case 'import':
return '.js';
case 'filename':
return args.isTypescript ? '.ts' : '.js';
}
}
case 'alpine':
case 'html':
return '.html';
case 'svelte':
return '.svelte';
case 'swift':
return '.swift';
case 'vue':
return '.vue';
case 'webcomponent':
return '.ts';
case 'lit':
return '.ts';
case 'qwik': {
switch (args.type) {
case 'import':
return '.jsx';
case 'filename':
return args.isTypescript ? '.tsx' : '.jsx';
}
}
case 'solid':
case 'preact':
case 'react':
case 'reactNative':
case 'rsc':
case 'stencil':
switch (args.type) {
case 'import':
// we can't have `.jsx`/`.tsx` extensions in the import paths, so we stick with implicit file extensions.
return args.explicitImportFileExtension ? '.js' : '';
case 'filename':
return args.isTypescript ? '.tsx' : '.jsx';
}
case 'marko':
return '.marko';
default:
return '.js';
}
};
exports.getComponentFileExtensionForTarget = getComponentFileExtensionForTarget;
const getFileExtensionForTarget = ({ target, explicitImportFileExtension, }) => {
switch (target) {
case 'angular':
case 'alpine':
case 'html':
case 'svelte':
case 'swift':
case 'vue':
case 'webcomponent':
case 'lit':
case 'qwik':
case 'react':
case 'reactNative':
case 'rsc':
case 'solid':
case 'stencil':
case 'marko':
case 'preact':
default:
return explicitImportFileExtension ? '.js' : '';
}
};
exports.getFileExtensionForTarget = getFileExtensionForTarget;