Chore mitosis update

.github/workflows/02-e2e.yml

@@ -50,12 +50,7 @@ jobs:
       - name: 🚋 Get working directory
         id: workingDirectory
         shell: bash
-        run: |
-          if [[ ${{ matrix.framework }} == "vue" ]]; then
-            echo "dir=vue/vue3" >> $GITHUB_OUTPUT
-          else
-            echo "dir=${{ matrix.framework }}" >> $GITHUB_OUTPUT
-          fi
+        run: echo "dir=${{ matrix.framework }}" >> $GITHUB_OUTPUT
 
       - name: 👩‍🔬 Test with Playwright 🎭
         working-directory: ./output/${{ steps.workingDirectory.outputs.dir }}

README.md

@@ -29,7 +29,7 @@ designers, and content authors build, maintain, and scale best of class digital
 | [components](https://github.com/db-ui/mono/tree/main/packages/components)   | CSS/SCSS styles for components      | [![@db-ui/components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/components "DB UI – on NPM")             |
 | [ngx-components](https://github.com/db-ui/mono/tree/main/output/angular)    | Native Angular components           | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM")     |
 | [react-components](https://github.com/db-ui/mono/tree/main/output/react)    | Native React components             | [![@db-ui/react-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
-| [v-components](https://github.com/db-ui/mono/tree/main/output/vue/vue3)     | Native Vue components               | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
+| [v-components](https://github.com/db-ui/mono/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
 
 ## How to use
 

docs/migration/alpha-beta.md

@@ -38,3 +38,17 @@
 | 🔄 changed `db-card` elevation             | We replaced the box-shadow elevation with bg-level                            | 1. `props.elevation` ➡ `props.elevationLevel` (1,2,3) <br/>2. `props.variant` ➡ `props.behaviour` <br/>3. Removed card-image                                                                             |
 | 🆕 valid/invalid message form-components   | We add additional messages for `required` form-components like `DBInput` etc. | Use `validMessage="XXX"` and `invalidMessage="XXX"` to display the required information for form-components. Otherwise you will see a default message with a `TODO: ...`                                   |
 | 🔄 changed `db-link` variant               | We renamed the variants for the link                                          | `primary` ➡ `brand`                                                                                                                                                                                       |
+
+### React
+
+`slot` prefix was removed for all components containing another child element, for example:
+
+```tsx
+<DBHeader slotBrand={...
+```
+
+becomes
+
+```tsx
+<DBHeader brand={...
+```

e2e/docker-compose.yml

@@ -15,13 +15,13 @@ services:
       - "./../showcases:/e2e/showcases"
       - "./../output/react/playwright:/e2e/output/react/playwright"
       - "./../output/react/src:/e2e/output/react/src"
-      - "./../output/vue/vue3/src:/e2e/output/vue/vue3/src"
+      - "./../output/vue/src:/e2e/output/vue/src"
       - type: bind
         source: ./package.json
         target: /e2e/package.json
       - type: bind
         source: ./../output/react/playwright.config.ts
         target: /e2e/output/react/playwright.config.ts
       - type: bind
-        source: ./../output/vue/vue3/playwright.config.ts
-        target: /e2e/output/vue/vue3/playwright.config.ts
+        source: ./../output/vue/playwright.config.ts
+        target: /e2e/output/vue/playwright.config.ts

e2e/package.json

@@ -6,8 +6,7 @@
   "workspaces": [
     "showcases/*",
     "packages/*",
-    "output/*",
-    "output/vue/vue3"
+    "output/*"
   ],
   "scripts": {
     "regenerate": "npm-run-all -p regenerate:*",

package.json

@@ -17,7 +17,6 @@
   "workspaces": [
     "packages/*",
     "output/*",
-    "output/vue/vue3",
     "showcases/*",
     "docs",
     "scripts"

packages/components/_templates/mitosis/new/showcases/vue-showcase-component.ejs.t

@@ -4,7 +4,7 @@ to: "<%= showcases ? `../../showcases/vue-showcase/src/components/${name}/${h.ch
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/<%= name %>.json";
-import { DB<%= h.changeCase.pascal(name) %> } from "../../../../../output/vue/vue3/src";
+import { DB<%= h.changeCase.pascal(name) %> } from "../../../../../output/vue/src";
 </script>
 
 <template>

packages/components/mitosis-vue.config.js

@@ -1,9 +1,9 @@
 module.exports = {
 	files: 'src/**',
-	targets: ['vue3'],
+	targets: ['vue'],
 	dest: '../../output/tmp',
 	options: {
-		vue3: {
+		vue: {
 			typescript: true
 		}
 	}

packages/components/mitosis.config.js

@@ -1,6 +1,6 @@
 module.exports = {
 	files: 'src/**',
-	targets: ['angular', 'vue3', 'webcomponent', 'react'],
+	targets: ['angular', 'vue', 'webcomponent', 'react'],
 	dest: '../../output',
 	options: {
 		react: {
@@ -10,7 +10,7 @@ module.exports = {
 			typescript: true,
 			standalone: true
 		},
-		vue3: {
+		vue: {
 			typescript: true
 		},
 		webcomponent: {

packages/components/package.json

@@ -26,7 +26,7 @@
     "build:mitosis": "mitosis build",
     "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && npm run build-components:directives && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
     "compile:react": "mitosis build -c mitosis-react.config.js && node -e \"require('./scripts/post-build/react.js')(true)\" && cpr ../../output/tmp/react/src ../../output/react/src -o",
-    "compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/vue3/src ../../output/vue/vue3/src -o",
+    "compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/src ../../output/vue/src -o",
     "copy-assets": "cpr ../foundations/assets build/assets -o",
     "copy-output": "npm-run-all copy:*",
     "copy:outputs": "cpr build ../../build-outputs/components/build -o",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "^0.0.15",
-    "@builder.io/mitosis": "^0.0.147",
-    "@builder.io/mitosis-cli": "^0.0.100",
+    "@builder.io/mitosis": "^0.1.7",
+    "@builder.io/mitosis-cli": "^0.1.7",
     "@react-docgen/cli": "^2.0.3",
     "cpr": "3.0.1",
     "cssnano": "^6.1.0",

packages/components/scripts/post-build/copy-files.js

@@ -8,36 +8,26 @@ module.exports = () => {
 		for (const framework of Frameworks) {
 			// TODO: Add other frameworks after Playwright supports them in component tests
 			if (framework === 'react' || framework === 'vue') {
-				const resolvedFramework =
-					framework === 'vue' ? `vue/vue3` : framework;
 				if (
 					Fse.pathExistsSync(
 						`./src/components/${name}/${name}.spec.tsx`
 					)
 				) {
 					Fse.copySync(
 						`./src/components/${name}/${name}.spec.tsx`,
-						`../../output/${resolvedFramework}/src/components/${name}/${name}.spec.tsx`
+						`../../output/${framework}/src/components/${name}/${name}.spec.tsx`
 					);
 				}
 				Fse.copySync(
 					`./test/playwright/boilerplate`,
-					`../../output/${resolvedFramework}/playwright`,
+					`../../output/${framework}/playwright`,
 					{ overwrite: true }
 				);
 				Fse.copySync(
 					`./test/playwright/config.ts`,
-					`../../output/${resolvedFramework}/playwright.config.ts`,
+					`../../output/${framework}/playwright.config.ts`,
 					{ overwrite: true }
 				);
-
-				if (framework === 'vue') {
-					Replace({
-						files: `../../output/${resolvedFramework}/playwright.config.ts`,
-						from: './../../__snapshots__',
-						to: './../../../__snapshots__'
-					});
-				}
 			}
 		}
 	}