chore: replace mitosis generated vue output (options-api) with composition-api

output/vue/package.json

@@ -13,12 +13,12 @@
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/db-ui.es.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/db-ui.es.js"
       },
       "require": {
-        "default": "./dist/db-ui.umd.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/db-ui.umd.js"
       }
     }
   },
@@ -30,7 +30,6 @@
     "build": "npm-run-all build:*",
     "build:01_vite": "vite build",
     "build:02_types": "vue-tsc --declaration --emitDeclarationOnly",
-    "build:03_ts_workaround": "tsx scripts/fix-any-types.ts",
     "mv:dist": "cpr dist ../../build-outputs/vue/dist -o",
     "mv:package.json": "cpr package.json ../../build-outputs/vue/package.json -o",
     "mv:readme": "cpr README.md ../../build-outputs/vue/README.md -o",

packages/components/_templates/mitosis/new/component/tsx.ejs.t

@@ -1,19 +1,21 @@
 ---
 to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
-import { Show, useMetadata, useStore, useRef } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore, useRef, useDefaultProps } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
-import { handleFrameworkEvent } from "../../utils/form-components";
+import { handleFrameworkEventAngular, handleFrameworkEventVue } from "../../utils/form-components";
 <% } -%>
 
 useMetadata({});
 
+useDefaultProps< DB<%= h.changeCase.pascal(name) %>Props>({});
+
 export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.changeCase.pascal(name) %>Props) {
   // This is used as forwardRef
-  const ref = useRef<HTMLDivElement>(null);
+  const _ref = useRef<HTMLDivElement | null>(null);
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
       <% if(formValue!=="no"){   -%>
@@ -27,8 +29,8 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, <%= formValue %>),
-				vue: () => handleFrameworkEvent(this, event, <%= formValue %>)
+				angular: () => handleFrameworkEventAngular(this, event, <%= formValue %>),
+				vue: () => handleFrameworkEventVue(this, event, <%= formValue %>)
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

packages/components/configs/vue/index.js

@@ -1,3 +1,4 @@
 module.exports = {
-	typescript: true
+	typescript: true,
+	api: 'composition'
 };

packages/components/scripts/post-build/angular.ts

@@ -79,8 +79,8 @@ const setControlValueAccessorReplacements = (
 		writeValue(value: any) {
 		  this.${valueAccessor} = value;
 
-		  if (this.ref?.nativeElement) {
-			 this.renderer.setProperty(this.ref?.nativeElement, '${valueAccessor}', value);
+		  if (this._ref?.nativeElement) {
+			 this.renderer.setProperty(this._ref?.nativeElement, '${valueAccessor}', value);
 		  }
 		}
 
@@ -175,18 +175,12 @@ export class ${directive.name}Directive {}
 
 const getAttributePassing = (componentName: string) => `
 ngAfterViewInit(): void {
-\t\tconst element: HTMLElement | null = this.ref?.nativeElement;
+\t\tconst element: HTMLElement | null = this._ref?.nativeElement;
 \t\tenableCustomElementAttributePassing(element,'db-${componentName}')
 \t}`;
 
 export default (tmp?: boolean) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/angular/src/utils/form-components.ts`,
-		from: /\/\/ ANGULAR:/g,
-		to: ''
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const upperComponentName = `DB${transformToUpperComponentName(component.name)}`;
@@ -205,18 +199,14 @@ export default (tmp?: boolean) => {
 				to: 'ngAfterContentChecked'
 			},
 			{
-				from: '@ViewChild("ref") ref!: ElementRef | undefined;',
+				from: '@ViewChild("_ref") _ref!: ElementRef | undefined;',
 				to:
-					'@ViewChild("ref") ref!: ElementRef | undefined;' +
+					'@ViewChild("_ref") _ref!: ElementRef | undefined;' +
 					getAttributePassing(component.name)
 			},
 			{
 				from: '} from "../../utils"',
 				to: ', enableCustomElementAttributePassing } from "../../utils"'
-			},
-			{
-				from: /this.ref.nativeElement/g,
-				to: 'this.ref?.nativeElement'
 			}
 		];
 

packages/components/scripts/post-build/react.ts

@@ -81,16 +81,8 @@ export default (tmp?: boolean) => {
 					to: `function DB${upperComponentName}Fn(props: Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
-					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
-				},
-				{
-					from: 'if (ref.current)',
-					to: 'if (ref?.current)'
-				},
-				{
-					from: '[ref.current]',
-					to: '[ref]'
+					from: `DB${upperComponentName}.defaultProps`,
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nDB${upperComponentName}.defaultProps`
 				},
 				{
 					from: '>(null);',
@@ -106,9 +98,9 @@ export default (tmp?: boolean) => {
 					to: ', filterPassingProps, getRootProps } from "../../utils"'
 				},
 				{
-					from: 'ref={ref}',
+					from: 'ref={_ref}',
 					to:
-						'ref={ref}\n' +
+						'ref={_ref}\n' +
 						`{...filterPassingProps(props,${JSON.stringify([
 							...rootProps,
 							...(component?.config?.react?.propsPassingFilter ??

packages/components/scripts/post-build/stencil.ts

@@ -5,7 +5,7 @@ import { writeFileSync, existsSync } from 'node:fs';
 
 const enableCustomElementsAttributePassing = (componentName: string) =>
 	'componentDidLoad() {\n' +
-	`\tenableCustomElementAttributePassing(this.ref, "db-${componentName}")`;
+	`\tenableCustomElementAttributePassing(this._ref, "db-${componentName}")`;
 
 const getSlotDocs = (foundSlots: string[]): string => {
 	return `

packages/components/scripts/post-build/vue.ts

@@ -2,7 +2,7 @@ import { replaceInFileSync } from 'replace-in-file';
 
 import components, { Overwrite } from './components.js';
 
-import { runReplacements, transformToUpperComponentName } from '../utils';
+import { runReplacements } from '../utils';
 
 export default (tmp?: boolean) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
@@ -12,12 +12,6 @@ export default (tmp?: boolean) => {
 		from: /react/g,
 		to: `vue`
 	});
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/vue/src/utils/form-components.ts`,
-		from: `// VUE:`,
-		to: ``
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const vueFile = `../../${outputFolder}/vue/src/components/${componentName}/${componentName}.vue`;
@@ -38,40 +32,40 @@ export default (tmp?: boolean) => {
 
 			const replacements: Overwrite[] = [
 				{
-					from: /immediate: true,/g,
+					from: /immediate: true/g,
 					to: 'immediate: true,\nflush: "post"'
 				},
-				/* `this` can be undefined for ssr (nuxt) we need to add */
 				{
-					from: /this.\$refs.ref\?.validationMessage/g,
-					to: '(this as any)?.$refs.ref?.validationMessage'
+					from: 'className',
+					to: 'props.class'
 				}
 			];
 
 			/* This is a workaround for valid/invalid Messages.
 			 *  If a valid/invalid message appears it will use the old this._value,
 			 *  so we need to overwrite this._value with the current event.target.value.   */
-			[
-				'HTMLSelectElement',
-				'HTMLInputElement',
-				'HTMLTextAreaElement'
-			].forEach((element) => {
+
+			if (['select', 'textarea', 'input'].includes(componentName)) {
 				replacements.push({
-					from: `handleInput(event: InputEvent<${element}>) {`,
+					from: 'if (props.onInput) {',
 					to:
-						`handleInput(event: InputEvent<${element}>) {\n` +
-						'this._value = (event.target as any).value;'
+						'_value.value = (event.target as any).value;\n' +
+						'if (props.onInput) {'
 				});
-			});
+			}
 
 			if (component?.config?.vue?.vModel) {
 				replacements.push({
-					from: 'props: [',
-					to: `emits: ${JSON.stringify(
+					from: 'const props =',
+					to: `const emit = defineEmits(${JSON.stringify(
 						component?.config?.vue?.vModel.map(
 							(bin) => `update:${bin.modelValue}`
 						)
-					)},\nprops: [`
+					)})\n\nconst props =`
+				});
+				replacements.push({
+					from: 'handleFrameworkEventVue(() => {}',
+					to: 'handleFrameworkEventVue(emit'
 				});
 			}
 

packages/components/src/components/accordion-item/accordion-item.lite.tsx

@@ -2,6 +2,7 @@ import {
 	onMount,
 	Show,
 	Slot,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -13,8 +14,10 @@ import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBAccordionItemProps>({});
+
 export default function DBAccordionItem(props: DBAccordionItemProps) {
-	const ref = useRef<HTMLDetailsElement>(null);
+	const _ref = useRef<HTMLDetailsElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
 		_id: DEFAULT_ID,
@@ -42,7 +45,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 		<li id={state._id} class={cls('db-accordion-item', props.className)}>
 			<details
 				aria-disabled={getBooleanAsString(props.disabled)}
-				ref={ref}
+				ref={_ref}
 				open={state._open}>
 				<summary onClick={(event) => state.toggle(event)}>
 					<Show when={props.headlinePlain}>

packages/components/src/components/accordion/accordion.lite.tsx

@@ -3,6 +3,7 @@ import {
 	onMount,
 	onUpdate,
 	Show,
+	useDefaultProps,
 	useMetadata,
 	useRef,
 	useStore
@@ -15,8 +16,10 @@ import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({});
 
+useDefaultProps<DBAccordionProps>({});
+
 export default function DBAccordion(props: DBAccordionProps) {
-	const ref = useRef<HTMLUListElement>(null);
+	const _ref = useRef<HTMLUListElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionState>({
 		_id: DEFAULT_ID,
@@ -68,8 +71,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 	}, [state.initialized, props.name, props.behaviour, state._id]);
 
 	onUpdate(() => {
-		if (ref) {
-			const childDetails = ref.getElementsByTagName('details');
+		if (_ref) {
+			const childDetails = _ref.getElementsByTagName('details');
 			if (childDetails) {
 				for (const details of Array.from<HTMLDetailsElement>(
 					childDetails
@@ -82,12 +85,12 @@ export default function DBAccordion(props: DBAccordionProps) {
 				}
 			}
 		}
-	}, [ref, state._name]);
+	}, [_ref, state._name]);
 
 	onUpdate(() => {
-		if (ref && state._initOpenIndexDone) {
+		if (_ref && state._initOpenIndexDone) {
 			if (props?.initOpenIndex && props.initOpenIndex?.length > 0) {
-				const childDetails = ref.getElementsByTagName('details');
+				const childDetails = _ref.getElementsByTagName('details');
 				if (childDetails) {
 					const initOpenIndex =
 						props.behaviour === 'single' &&
@@ -105,11 +108,11 @@ export default function DBAccordion(props: DBAccordionProps) {
 			}
 			state._initOpenIndexDone = false;
 		}
-	}, [ref, state._initOpenIndexDone, props.initOpenIndex]);
+	}, [_ref, state._initOpenIndexDone, props.initOpenIndex]);
 
 	return (
 		<ul
-			ref={ref}
+			ref={_ref}
 			id={state._id}
 			class={cls('db-accordion', props.className)}
 			data-variant={props.variant}>