Fix: vue2 components naming

.yarn/versions/1aa27f56.yml

@@ -0,0 +1,3 @@
+undecided:
+  - "@builder.io/mitosis-repo"
+  - "@builder.io/mitosis"

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

packages/core/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.0.109",
+  "version": "0.0.110",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

packages/core/src/__tests__/__snapshots__/vue.test.ts.snap

@@ -305,7 +305,7 @@ import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.r
 
 export default defineComponent({
   name: \\"my-boolean-attribute\\",
-  components: { MyBooleanAttributeComponent: MyBooleanAttributeComponent },
+  components: { \\"my-boolean-attribute-component\\": MyBooleanAttributeComponent },
   props: [\\"type\\"],
 });
 </script>"
@@ -333,8 +333,8 @@ import MyBasicComponent from \\"./basic.raw\\";
 export default defineComponent({
   name: \\"my-basic-child-component\\",
   components: {
-    MyBasicComponent: MyBasicComponent,
-    MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
+    \\"my-basic-component\\": MyBasicComponent,
+    \\"my-basic-on-mount-update-component\\": MyBasicOnMountUpdateComponent,
   },
 
   data() {
@@ -923,8 +923,8 @@ import {
 export default defineComponent({
   name: \\"form-component\\",
   components: {
-    BuilderBlockComponent: BuilderBlockComponent,
-    BuilderBlocks: BuilderBlocks,
+    \\"builder-block-component\\": BuilderBlockComponent,
+    \\"builder-blocks\\": BuilderBlocks,
   },
   props: [
     \\"previewState\\",
@@ -1544,7 +1544,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default defineComponent({
   name: \\"slot-code\\",
-  components: { ContentSlotCode: ContentSlotCode },
+  components: { \\"content-slot-code\\": ContentSlotCode },
 });
 </script>"
 `;
@@ -1563,7 +1563,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default defineComponent({
   name: \\"slot-code\\",
-  components: { ContentSlotCode: ContentSlotCode },
+  components: { \\"content-slot-code\\": ContentSlotCode },
 });
 </script>"
 `;
@@ -2215,7 +2215,7 @@ import BuilderContext from \\"@dummy/context.vue\\";
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { BuilderContext: BuilderContext },
+  components: { \\"builder-context\\": BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
 
   provide() {
@@ -2374,7 +2374,7 @@ import RenderBlock from \\"./builder-render-block.raw\\";
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { RenderBlock: RenderBlock },
+  components: { \\"render-block\\": RenderBlock },
   props: [\\"renderContentProps\\"],
 
   methods: {
@@ -2863,10 +2863,10 @@ import RenderRepeatedBlock from \\"./render-repeated-block.vue\\";
 export default defineComponent({
   name: \\"render-block\\",
   components: {
-    RenderRepeatedBlock: RenderRepeatedBlock,
-    BlockStyles: BlockStyles,
-    RenderComponentWithContext: RenderComponentWithContext,
-    RenderComponent: RenderComponent,
+    \\"render-repeated-block\\": RenderRepeatedBlock,
+    \\"block-styles\\": BlockStyles,
+    \\"render-component-with-context\\": RenderComponentWithContext,
+    \\"render-component\\": RenderComponent,
   },
   props: [\\"block\\", \\"context\\"],
 
@@ -3072,7 +3072,10 @@ import RenderBlocks from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { RenderBlocks: RenderBlocks, BuilderContext: BuilderContext },
+  components: {
+    \\"render-blocks\\": RenderBlocks,
+    \\"builder-context\\": BuilderContext,
+  },
   props: [\\"content\\", \\"customComponents\\"],
 
   data() {
@@ -3340,7 +3343,7 @@ import Foo from \\"./foo-sub-component.vue\\";
 
 export default defineComponent({
   name: \\"sub-component\\",
-  components: { Foo: Foo },
+  components: { foo: Foo },
 });
 </script>"
 `;
@@ -3830,7 +3833,7 @@ type Props = {
 
 export default defineComponent({
   name: \\"my-boolean-attribute\\",
-  components: { MyBooleanAttributeComponent: MyBooleanAttributeComponent },
+  components: { \\"my-boolean-attribute-component\\": MyBooleanAttributeComponent },
   props: [\\"type\\"],
 });
 </script>"
@@ -3858,8 +3861,8 @@ import MyBasicComponent from \\"./basic.raw\\";
 export default defineComponent({
   name: \\"my-basic-child-component\\",
   components: {
-    MyBasicComponent: MyBasicComponent,
-    MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
+    \\"my-basic-component\\": MyBasicComponent,
+    \\"my-basic-on-mount-update-component\\": MyBasicOnMountUpdateComponent,
   },
 
   data() {
@@ -4529,8 +4532,8 @@ export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"e
 export default defineComponent({
   name: \\"form-component\\",
   components: {
-    BuilderBlockComponent: BuilderBlockComponent,
-    BuilderBlocks: BuilderBlocks,
+    \\"builder-block-component\\": BuilderBlockComponent,
+    \\"builder-blocks\\": BuilderBlocks,
   },
   props: [
     \\"previewState\\",
@@ -5239,7 +5242,7 @@ type Props = {
 
 export default defineComponent({
   name: \\"slot-code\\",
-  components: { ContentSlotCode: ContentSlotCode },
+  components: { \\"content-slot-code\\": ContentSlotCode },
 });
 </script>"
 `;
@@ -5262,7 +5265,7 @@ type Props = {
 
 export default defineComponent({
   name: \\"slot-code\\",
-  components: { ContentSlotCode: ContentSlotCode },
+  components: { \\"content-slot-code\\": ContentSlotCode },
 });
 </script>"
 `;
@@ -5995,7 +5998,7 @@ import BuilderContext from \\"@dummy/context.vue\\";
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { BuilderContext: BuilderContext },
+  components: { \\"builder-context\\": BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
 
   provide() {
@@ -6183,7 +6186,7 @@ type RenderContentProps = {
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { RenderBlock: RenderBlock },
+  components: { \\"render-block\\": RenderBlock },
   props: [\\"renderContentProps\\"],
 
   methods: {
@@ -6736,10 +6739,10 @@ export type RenderBlockProps = {
 export default defineComponent({
   name: \\"render-block\\",
   components: {
-    RenderRepeatedBlock: RenderRepeatedBlock,
-    BlockStyles: BlockStyles,
-    RenderComponentWithContext: RenderComponentWithContext,
-    RenderComponent: RenderComponent,
+    \\"render-repeated-block\\": RenderRepeatedBlock,
+    \\"block-styles\\": BlockStyles,
+    \\"render-component-with-context\\": RenderComponentWithContext,
+    \\"render-component\\": RenderComponent,
   },
   props: [\\"block\\", \\"context\\"],
 
@@ -6953,7 +6956,10 @@ type Props = {
 
 export default defineComponent({
   name: \\"render-content\\",
-  components: { RenderBlocks: RenderBlocks, BuilderContext: BuilderContext },
+  components: {
+    \\"render-blocks\\": RenderBlocks,
+    \\"builder-context\\": BuilderContext,
+  },
   props: [\\"content\\", \\"customComponents\\"],
 
   data() {
@@ -7241,7 +7247,7 @@ import Foo from \\"./foo-sub-component.vue\\";
 
 export default defineComponent({
   name: \\"sub-component\\",
-  components: { Foo: Foo },
+  components: { foo: Foo },
 });
 </script>"
 `;
@@ -7663,7 +7669,7 @@ import Button from \\"./Button.vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-  components: { Button: Button },
+  components: { button: Button },
 
   data() {
     return { disabled: false };
@@ -8099,7 +8105,7 @@ import Button from \\"./Button.vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-  components: { Button: Button },
+  components: { button: Button },
 
   data() {
     return { disabled: false };

packages/core/src/generators/vue/helpers.ts

@@ -46,14 +46,17 @@ export function encodeQuotes(string: string) {
   return string.replace(/"/g, '"');
 }
 
+export const mapMitosisComponentToKebabCase = (componentName: string) =>
+  componentName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
 // Transform <FooBar> to <foo-bar> as Vue2 needs
 export const renameMitosisComponentsToKebabCase = (str: string) =>
   str.replace(/<\/?\w+/g, (match) => {
     const tagName = match.replaceAll('<', '').replaceAll('/', '');
     if (VALID_HTML_TAGS.includes(tagName)) {
       return match;
     } else {
-      return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      return mapMitosisComponentToKebabCase(match);
     }
   });
 

packages/core/src/generators/vue/optionsApi.ts

@@ -7,7 +7,13 @@ import { getStateObjectStringFromComponent } from '../../helpers/get-state-objec
 import { checkIsDefined } from '../../helpers/nullable';
 import { checkIsComponentImport } from '../../helpers/render-imports';
 import { extendedHook, MitosisComponent } from '../../types/mitosis-component';
-import { encodeQuotes, getContextKey, getContextValue, getOnUpdateHookName } from './helpers';
+import {
+  encodeQuotes,
+  getContextKey,
+  getContextValue,
+  getOnUpdateHookName,
+  mapMitosisComponentToKebabCase,
+} from './helpers';
 import { ToVueOptions } from './types';
 
 const getContextProvideString = (json: MitosisComponent, options: ToVueOptions) => {
@@ -42,6 +48,8 @@ const generateComponentImport =
   (componentName: string): string => {
     if (options.vueVersion >= 3 && options.asyncComponentImports) {
       return `'${componentName}': defineAsyncComponent(${componentName})`;
+    } else if (options.vueVersion === 2) {
+      return `'${mapMitosisComponentToKebabCase(componentName)}': ${componentName}`;
     } else {
       return `'${componentName}': ${componentName}`;
     }

packages/core/src/generators/vue/vue.ts

@@ -233,6 +233,11 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
 
     const tsLangAttribute = options.typescript ? `lang='ts'` : '';
 
+    if (component.name === 'ContentVariants') {
+      console.log('setting');
+      (global as any).TESTING = true;
+    }
+
     let str: string = dedent`
     ${
       template.trim().length > 0
@@ -286,6 +291,12 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
   `;
 
     str = runPreCodePlugins(str, options.plugins, { json: component });
+    if (component.name === 'ContentVariants') {
+      if (str.includes('<content')) {
+        console.log('found it before prettier');
+        // console.log(str);
+      }
+    }
     if (true || options.prettier !== false) {
       try {
         str = format(str, {
@@ -308,7 +319,6 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
       str = str.replace(pattern, '').trim();
     }
     str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
-
     return str;
   };