From f9772898d8d1d6bf6a3cadcea47765a94dc68621 Mon Sep 17 00:00:00 2001 From: Kyle Cordes Date: Wed, 22 Jun 2022 17:16:48 -0500 Subject: [PATCH] E2E: Add Vue 2, add Angular, Mitosis output is source not package (#500) * Include test context making E2E failures much easier to investigate * mitosis-source approach for Vue 3 * mitosis-source approach for Solid * mitosis-source approach for React * mitosis-source approach for Svelte * Move E2E spec in to e2e-app; makes semantic sense * E2E for Vue 2 * build/test/lint everything else before E2E * E2E: update state using methods in useStore * Rename outputs per target fixes #473 fixes #476 fixes #499 * E2E for Angular * Accommodate upstream changes - all E2E passes --- .github/workflows/on-push-build.yml | 3 + .github/workflows/pr-runner.yml | 3 + .gitignore | 1 - .prettierignore | 6 +- package.json | 6 +- packages/cli/src/build/helpers/extensions.ts | 18 +- packages/e2e-angular/.browserslistrc | 16 + packages/e2e-angular/.gitignore | 30 + packages/e2e-angular/README.md | 9 + packages/e2e-angular/angular.json | 79 + .../angular_src/app/app.component.html | 1 + .../angular_src/app/app.component.ts | 7 + .../e2e-angular/angular_src/app/app.module.ts | 13 + .../angular_src/app/mitosis.module.ts | 15 + .../angular_src}/assets/.gitkeep | 0 .../environments/environment.prod.ts | 3 + .../angular_src/environments/environment.ts | 16 + packages/e2e-angular/angular_src/favicon.ico | Bin 0 -> 948 bytes packages/e2e-angular/angular_src/index.html | 13 + packages/e2e-angular/angular_src/main.ts | 13 + packages/e2e-angular/angular_src/polyfills.ts | 4 + packages/e2e-angular/angular_src/styles.css | 1 + packages/e2e-angular/mitosis.config.js | 5 + packages/e2e-angular/package.json | 37 + packages/e2e-angular/playwright.config.ts | 3 + packages/e2e-angular/tsconfig.app.json | 11 + packages/e2e-angular/tsconfig.json | 30 + packages/e2e-app-spec/README.md | 7 - packages/e2e-app-spec/package.json | 6 - packages/e2e-app-spec/tests/example.spec.ts | 15 - packages/e2e-app/README.md | 7 + packages/e2e-app/mitosis.config.js | 17 +- packages/e2e-app/package.json | 15 +- .../shared.config.ts | 6 +- .../src/components/my-component.lite.tsx | 20 +- packages/e2e-app/tests/context.ts | 3 + packages/e2e-app/tests/example.spec.ts | 19 + packages/e2e-react/.gitignore | 9 +- packages/e2e-react/README.md | 4 +- packages/e2e-react/index.html | 2 +- packages/e2e-react/mitosis.config.js | 8 + packages/e2e-react/package.json | 9 +- packages/e2e-react/playwright.config.ts | 4 +- packages/e2e-react/react_src/App.tsx | 13 + .../e2e-react/{src => react_src}/main.tsx | 0 .../{src => react_src}/vite-env.d.ts | 0 packages/e2e-react/src/App.tsx | 9 - packages/e2e-react/tsconfig.json | 3 +- packages/e2e-solid/.gitignore | 4 + packages/e2e-solid/README.md | 4 +- packages/e2e-solid/index.html | 2 +- packages/e2e-solid/mitosis.config.js | 5 + packages/e2e-solid/package.json | 11 +- packages/e2e-solid/playwright.config.ts | 4 +- packages/e2e-solid/solid_src/App.tsx | 9 + .../e2e-solid/{src => solid_src}/index.tsx | 0 packages/e2e-solid/src/App.tsx | 11 - packages/e2e-solid/tsconfig.json | 4 +- packages/e2e-svelte/.gitignore | 4 + packages/e2e-svelte/README.md | 4 +- packages/e2e-svelte/index.html | 2 +- packages/e2e-svelte/mitosis.config.js | 5 + packages/e2e-svelte/package.json | 9 +- packages/e2e-svelte/playwright.config.ts | 4 +- packages/e2e-svelte/src/App.svelte | 10 - packages/e2e-svelte/svelte_src/App.svelte | 5 + .../e2e-svelte/{src => svelte_src}/main.mts | 0 .../{src => svelte_src}/vite-env.d.ts | 0 packages/e2e-svelte/tsconfig.json | 12 +- packages/e2e-vue2/.gitignore | 4 + packages/e2e-vue2/README.md | 9 + packages/e2e-vue2/index.html | 12 + packages/e2e-vue2/mitosis.config.js | 5 + packages/e2e-vue2/package.json | 28 + packages/e2e-vue2/playwright.config.ts | 3 + packages/e2e-vue2/public/.gitkeep | 0 packages/e2e-vue2/tsconfig.json | 28 + packages/e2e-vue2/tsconfig.node.json | 8 + packages/e2e-vue2/vite.config.ts | 24 + packages/e2e-vue2/vue_src/App.vue | 14 + packages/e2e-vue2/vue_src/assets/.gitkeep | 0 .../src => e2e-vue2/vue_src}/env.d.ts | 0 packages/e2e-vue2/vue_src/main.ts | 8 + packages/e2e-vue2/vue_src/shims-tsx.d.ts | 13 + packages/e2e-vue2/vue_src/shims-vue.d.ts | 4 + packages/e2e-vue3/.gitignore | 11 +- packages/e2e-vue3/README.md | 10 +- packages/e2e-vue3/index.html | 2 +- packages/e2e-vue3/mitosis.config.js | 5 + packages/e2e-vue3/package.json | 11 +- packages/e2e-vue3/playwright.config.ts | 4 +- packages/e2e-vue3/tsconfig.json | 8 +- packages/e2e-vue3/{src => vue_src}/App.vue | 2 +- packages/e2e-vue3/vue_src/assets/.gitkeep | 0 packages/e2e-vue3/vue_src/env.d.ts | 8 + packages/e2e-vue3/{src => vue_src}/main.ts | 0 yarn.lock | 5939 +++++++++++++++-- 97 files changed, 5967 insertions(+), 821 deletions(-) create mode 100644 packages/e2e-angular/.browserslistrc create mode 100644 packages/e2e-angular/.gitignore create mode 100644 packages/e2e-angular/README.md create mode 100644 packages/e2e-angular/angular.json create mode 100644 packages/e2e-angular/angular_src/app/app.component.html create mode 100644 packages/e2e-angular/angular_src/app/app.component.ts create mode 100644 packages/e2e-angular/angular_src/app/app.module.ts create mode 100644 packages/e2e-angular/angular_src/app/mitosis.module.ts rename packages/{e2e-vue3/src => e2e-angular/angular_src}/assets/.gitkeep (100%) create mode 100644 packages/e2e-angular/angular_src/environments/environment.prod.ts create mode 100644 packages/e2e-angular/angular_src/environments/environment.ts create mode 100644 packages/e2e-angular/angular_src/favicon.ico create mode 100644 packages/e2e-angular/angular_src/index.html create mode 100644 packages/e2e-angular/angular_src/main.ts create mode 100644 packages/e2e-angular/angular_src/polyfills.ts create mode 100644 packages/e2e-angular/angular_src/styles.css create mode 100644 packages/e2e-angular/mitosis.config.js create mode 100644 packages/e2e-angular/package.json create mode 100644 packages/e2e-angular/playwright.config.ts create mode 100644 packages/e2e-angular/tsconfig.app.json create mode 100644 packages/e2e-angular/tsconfig.json delete mode 100644 packages/e2e-app-spec/README.md delete mode 100644 packages/e2e-app-spec/package.json delete mode 100644 packages/e2e-app-spec/tests/example.spec.ts create mode 100644 packages/e2e-app/README.md rename packages/{e2e-app-spec => e2e-app}/shared.config.ts (94%) create mode 100644 packages/e2e-app/tests/context.ts create mode 100644 packages/e2e-app/tests/example.spec.ts create mode 100644 packages/e2e-react/mitosis.config.js create mode 100644 packages/e2e-react/react_src/App.tsx rename packages/e2e-react/{src => react_src}/main.tsx (100%) rename packages/e2e-react/{src => react_src}/vite-env.d.ts (100%) delete mode 100644 packages/e2e-react/src/App.tsx create mode 100644 packages/e2e-solid/.gitignore create mode 100644 packages/e2e-solid/mitosis.config.js create mode 100644 packages/e2e-solid/solid_src/App.tsx rename packages/e2e-solid/{src => solid_src}/index.tsx (100%) delete mode 100644 packages/e2e-solid/src/App.tsx create mode 100644 packages/e2e-svelte/.gitignore create mode 100644 packages/e2e-svelte/mitosis.config.js delete mode 100644 packages/e2e-svelte/src/App.svelte create mode 100644 packages/e2e-svelte/svelte_src/App.svelte rename packages/e2e-svelte/{src => svelte_src}/main.mts (100%) rename packages/e2e-svelte/{src => svelte_src}/vite-env.d.ts (100%) create mode 100644 packages/e2e-vue2/.gitignore create mode 100644 packages/e2e-vue2/README.md create mode 100644 packages/e2e-vue2/index.html create mode 100644 packages/e2e-vue2/mitosis.config.js create mode 100644 packages/e2e-vue2/package.json create mode 100644 packages/e2e-vue2/playwright.config.ts create mode 100644 packages/e2e-vue2/public/.gitkeep create mode 100644 packages/e2e-vue2/tsconfig.json create mode 100644 packages/e2e-vue2/tsconfig.node.json create mode 100644 packages/e2e-vue2/vite.config.ts create mode 100644 packages/e2e-vue2/vue_src/App.vue create mode 100644 packages/e2e-vue2/vue_src/assets/.gitkeep rename packages/{e2e-vue3/src => e2e-vue2/vue_src}/env.d.ts (100%) create mode 100644 packages/e2e-vue2/vue_src/main.ts create mode 100644 packages/e2e-vue2/vue_src/shims-tsx.d.ts create mode 100644 packages/e2e-vue2/vue_src/shims-vue.d.ts create mode 100644 packages/e2e-vue3/mitosis.config.js rename packages/e2e-vue3/{src => vue_src}/App.vue (54%) create mode 100644 packages/e2e-vue3/vue_src/assets/.gitkeep create mode 100644 packages/e2e-vue3/vue_src/env.d.ts rename packages/e2e-vue3/{src => vue_src}/main.ts (100%) diff --git a/.github/workflows/on-push-build.yml b/.github/workflows/on-push-build.yml index c76f01e45d..69d9c1a413 100644 --- a/.github/workflows/on-push-build.yml +++ b/.github/workflows/on-push-build.yml @@ -31,6 +31,9 @@ jobs: - name: Install browsers for Playwright run: yarn ci:e2e-prep + - name: Build E2E tests + run: yarn ci:e2e-build + - name: Run E2E tests run: yarn ci:e2e diff --git a/.github/workflows/pr-runner.yml b/.github/workflows/pr-runner.yml index eb2f432847..676aae2566 100644 --- a/.github/workflows/pr-runner.yml +++ b/.github/workflows/pr-runner.yml @@ -38,5 +38,8 @@ jobs: - name: Install browsers for Playwright run: yarn ci:e2e-prep + - name: Build E2E tests + run: yarn ci:e2e-build + - name: Run E2E tests run: yarn ci:e2e diff --git a/.gitignore b/.gitignore index 200f6c82a8..d72e685483 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,3 @@ examples/**/output packages/e2e-app/output **/test-results/ **/playwright-report/ -**/playwright/.cache/ diff --git a/.prettierignore b/.prettierignore index 3123c28512..bf228236b1 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,5 +10,7 @@ packages/e2e-app/output/** **/test-results/ **/playwright-report/ **/playwright/.cache/ -packages/e2e-vue3/src/lib/** -**/tsconfig.json \ No newline at end of file +packages/e2e-*/src/** +packages/e2e-*/*_src/lib/** +packages/e2e-*/*_src/app/lib/** +**/tsconfig.json diff --git a/package.json b/package.json index 0fc1d14691..2bed2b2549 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,12 @@ }, "scripts": { "lerna": "lerna", - "ci:build": "yarn workspaces foreach -pt --exclude @builder.io/mitosis-fiddle --verbose run build", + "ci:build": "yarn workspaces foreach -pt --exclude @builder.io/mitosis-fiddle --exclude \"*/e2e*\" --verbose run build", "ci:lint": "yarn run lint:prettier", "ci:test": "yarn workspaces foreach run test --passWithNoTests", "ci:e2e-prep": "playwright install --with-deps", - "ci:e2e": "yarn workspaces foreach run e2e", + "ci:e2e-build": "yarn workspaces foreach -pt --include \"*/e2e*\" --verbose run build", + "ci:e2e": "yarn workspaces foreach --verbose run e2e", "ci": "run-s \"ci:*\"", "commit": "git-cz", "fix": "run-p -c 'lint:* --fix'", @@ -36,7 +37,6 @@ }, "devDependencies": { "@babel/preset-env": "^7.6.0", - "@builder.io/e2e-app-spec": "workspace:*", "@playwright/test": "^1.22.2", "@typescript-eslint/eslint-plugin": "^5.27.1", "@typescript-eslint/parser": "^5.27.1", diff --git a/packages/cli/src/build/helpers/extensions.ts b/packages/cli/src/build/helpers/extensions.ts index d135a07670..3d718c7f3b 100644 --- a/packages/cli/src/build/helpers/extensions.ts +++ b/packages/cli/src/build/helpers/extensions.ts @@ -2,16 +2,22 @@ import { Target } from '@builder.io/mitosis'; export const getFileExtensionForTarget = (target: Target) => { switch (target) { + case 'angular': + return '.ts'; + case 'html': + return '.html'; + case 'solid': + return '.jsx'; + case 'svelte': + return '.svelte'; + case 'swift': + return '.swift'; case 'vue': case 'vue2': case 'vue3': return '.vue'; - case 'swift': - return '.swift'; - case 'svelte': - return '.svelte'; - case 'solid': - return '.jsx'; + case 'webcomponent': + return '.ts'; default: return '.js'; } diff --git a/packages/e2e-angular/.browserslistrc b/packages/e2e-angular/.browserslistrc new file mode 100644 index 0000000000..4f9ac26980 --- /dev/null +++ b/packages/e2e-angular/.browserslistrc @@ -0,0 +1,16 @@ +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries + +# For the full list of supported browsers by the Angular framework, please see: +# https://angular.io/guide/browser-support + +# You can see what browsers were selected by your queries by running: +# npx browserslist + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions +Firefox ESR diff --git a/packages/e2e-angular/.gitignore b/packages/e2e-angular/.gitignore new file mode 100644 index 0000000000..65f15d3618 --- /dev/null +++ b/packages/e2e-angular/.gitignore @@ -0,0 +1,30 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db + +# Mitosis input, copied in from elsewhere +src +# Mitosis output +angular_src/app/lib diff --git a/packages/e2e-angular/README.md b/packages/e2e-angular/README.md new file mode 100644 index 0000000000..294f6b9f52 --- /dev/null +++ b/packages/e2e-angular/README.md @@ -0,0 +1,9 @@ +# E2E test harness for Angular + +To recompile and run just this set of E2E tests, you can run these commands at +the project root: + +```bash +yarn workspace @builder.io/e2e-angular run build +yarn workspace @builder.io/e2e-angular run e2e +``` diff --git a/packages/e2e-angular/angular.json b/packages/e2e-angular/angular.json new file mode 100644 index 0000000000..8fb058521b --- /dev/null +++ b/packages/e2e-angular/angular.json @@ -0,0 +1,79 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "e2e-angular": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "angular_src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/e2e-angular", + "index": "angular_src/index.html", + "main": "angular_src/main.ts", + "polyfills": "angular_src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": ["angular_src/favicon.ico", "angular_src/assets"], + "styles": ["angular_src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "angular_src/environments/environment.ts", + "with": "angular_src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "e2e-angular:build:production" + }, + "development": { + "browserTarget": "e2e-angular:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "e2e-angular:build" + } + } + } + } + } +} diff --git a/packages/e2e-angular/angular_src/app/app.component.html b/packages/e2e-angular/angular_src/app/app.component.html new file mode 100644 index 0000000000..41b536b4ce --- /dev/null +++ b/packages/e2e-angular/angular_src/app/app.component.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-angular/angular_src/app/app.component.ts b/packages/e2e-angular/angular_src/app/app.component.ts new file mode 100644 index 0000000000..9222f6bc69 --- /dev/null +++ b/packages/e2e-angular/angular_src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', +}) +export class AppComponent {} diff --git a/packages/e2e-angular/angular_src/app/app.module.ts b/packages/e2e-angular/angular_src/app/app.module.ts new file mode 100644 index 0000000000..4d4784c848 --- /dev/null +++ b/packages/e2e-angular/angular_src/app/app.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { MitosisModule } from './mitosis.module'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, MitosisModule], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/packages/e2e-angular/angular_src/app/mitosis.module.ts b/packages/e2e-angular/angular_src/app/mitosis.module.ts new file mode 100644 index 0000000000..5e11e41886 --- /dev/null +++ b/packages/e2e-angular/angular_src/app/mitosis.module.ts @@ -0,0 +1,15 @@ +// This is a hand-written module, to match the exact names/paths of the +// components we are using from Mitosis output. Ideally this would be generated +// by Mitosis, and/or Angular 14 "standalone components" would be generated. + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import MyComponent from './lib/angular/src/components/my-component'; + +@NgModule({ + declarations: [MyComponent], + imports: [CommonModule], + exports: [MyComponent], +}) +export class MitosisModule {} diff --git a/packages/e2e-vue3/src/assets/.gitkeep b/packages/e2e-angular/angular_src/assets/.gitkeep similarity index 100% rename from packages/e2e-vue3/src/assets/.gitkeep rename to packages/e2e-angular/angular_src/assets/.gitkeep diff --git a/packages/e2e-angular/angular_src/environments/environment.prod.ts b/packages/e2e-angular/angular_src/environments/environment.prod.ts new file mode 100644 index 0000000000..c9669790be --- /dev/null +++ b/packages/e2e-angular/angular_src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true, +}; diff --git a/packages/e2e-angular/angular_src/environments/environment.ts b/packages/e2e-angular/angular_src/environments/environment.ts new file mode 100644 index 0000000000..66998ae9a7 --- /dev/null +++ b/packages/e2e-angular/angular_src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/packages/e2e-angular/angular_src/favicon.ico b/packages/e2e-angular/angular_src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + E2eAngular + + + + + + + + diff --git a/packages/e2e-angular/angular_src/main.ts b/packages/e2e-angular/angular_src/main.ts new file mode 100644 index 0000000000..d9a2e7e4a5 --- /dev/null +++ b/packages/e2e-angular/angular_src/main.ts @@ -0,0 +1,13 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/packages/e2e-angular/angular_src/polyfills.ts b/packages/e2e-angular/angular_src/polyfills.ts new file mode 100644 index 0000000000..cbdf9afb64 --- /dev/null +++ b/packages/e2e-angular/angular_src/polyfills.ts @@ -0,0 +1,4 @@ +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. diff --git a/packages/e2e-angular/angular_src/styles.css b/packages/e2e-angular/angular_src/styles.css new file mode 100644 index 0000000000..90d4ee0072 --- /dev/null +++ b/packages/e2e-angular/angular_src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/packages/e2e-angular/mitosis.config.js b/packages/e2e-angular/mitosis.config.js new file mode 100644 index 0000000000..46d46de53e --- /dev/null +++ b/packages/e2e-angular/mitosis.config.js @@ -0,0 +1,5 @@ +module.exports = { + files: 'src/**', + dest: 'angular_src/app/lib', + targets: ['angular'], +}; diff --git a/packages/e2e-angular/package.json b/packages/e2e-angular/package.json new file mode 100644 index 0000000000..b58f31cab1 --- /dev/null +++ b/packages/e2e-angular/package.json @@ -0,0 +1,37 @@ +{ + "name": "@builder.io/e2e-angular", + "version": "0.0.1", + "scripts": { + "build": "yarn run mitosis && ng build", + "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", + "ng": "ng", + "start": "yarn run mitosis && ng serve", + "serve": "http-server dist/e2e-angular", + "watch": "yarn run mitosis && ng build --watch --configuration development" + }, + "private": true, + "dependencies": { + "@angular/animations": "^14.0.0", + "@angular/common": "^14.0.0", + "@angular/compiler": "^14.0.0", + "@angular/core": "^14.0.0", + "@angular/forms": "^14.0.0", + "@angular/platform-browser": "^14.0.0", + "@angular/platform-browser-dynamic": "^14.0.0", + "@builder.io/e2e-app": "workspace:*", + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*", + "http-server": "^14.1.1", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.11.4" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^14.0.2", + "@angular/cli": "~14.0.2", + "@angular/compiler-cli": "^14.0.0", + "sync-directory": "^5.1.5", + "typescript": "~4.7.2" + } +} diff --git a/packages/e2e-angular/playwright.config.ts b/packages/e2e-angular/playwright.config.ts new file mode 100644 index 0000000000..be0defa0fa --- /dev/null +++ b/packages/e2e-angular/playwright.config.ts @@ -0,0 +1,3 @@ +import { configFor } from '@builder.io/e2e-app/shared.config'; + +export default configFor('e2e-angular', 7506); diff --git a/packages/e2e-angular/tsconfig.app.json b/packages/e2e-angular/tsconfig.app.json new file mode 100644 index 0000000000..fb8d51ef0d --- /dev/null +++ b/packages/e2e-angular/tsconfig.app.json @@ -0,0 +1,11 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["angular_src/main.ts", "angular_src/polyfills.ts"], + "include": ["angular_src/**/*.d.ts"], + "exclude": ["angular_src/**/global.d.ts"] +} diff --git a/packages/e2e-angular/tsconfig.json b/packages/e2e-angular/tsconfig.json new file mode 100644 index 0000000000..a8164d7d16 --- /dev/null +++ b/packages/e2e-angular/tsconfig.json @@ -0,0 +1,30 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noImplicitAny": false, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2020", + "module": "es2020", + "lib": ["es2020", "dom"] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/packages/e2e-app-spec/README.md b/packages/e2e-app-spec/README.md deleted file mode 100644 index c102acf0a1..0000000000 --- a/packages/e2e-app-spec/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# E2E App Specification - -The goal of this package is to contain a playwright configuration and set of -tests that test the E2E app. - -To the extent mitosis works correctly, the app will pass the same set of tests -regardless of which target framework is used. diff --git a/packages/e2e-app-spec/package.json b/packages/e2e-app-spec/package.json deleted file mode 100644 index 3b24ee5ca1..0000000000 --- a/packages/e2e-app-spec/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@builder.io/e2e-app-spec", - "description": "Playwright specification for the e2e-app; should be met by all mitosis (web) output", - "private": true, - "version": "0.0.1" -} diff --git a/packages/e2e-app-spec/tests/example.spec.ts b/packages/e2e-app-spec/tests/example.spec.ts deleted file mode 100644 index 67a5006fea..0000000000 --- a/packages/e2e-app-spec/tests/example.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('todo list add', async ({ page }) => { - await page.goto('/'); - - await expect(page.locator('li')).toHaveCount(2); - - await page.locator('input').click(); - - await page.locator('input').fill('Test Items One'); - - await page.locator('text=Add list item').click(); // Add button - - await expect(page.locator('li')).toHaveCount(3); -}); diff --git a/packages/e2e-app/README.md b/packages/e2e-app/README.md new file mode 100644 index 0000000000..5bb29f0a0e --- /dev/null +++ b/packages/e2e-app/README.md @@ -0,0 +1,7 @@ +# E2E App and Specification + +This package contains a set of Mitosis which form a small working application, +and Playwright specs for that application. + +To the extent mitosis works correctly, the app will pass the same set of tests +regardless of which target framework is used. diff --git a/packages/e2e-app/mitosis.config.js b/packages/e2e-app/mitosis.config.js index 234371a51e..c1da357e72 100644 --- a/packages/e2e-app/mitosis.config.js +++ b/packages/e2e-app/mitosis.config.js @@ -1,18 +1,9 @@ module.exports = { files: 'src/**', targets: [ - 'react', - // still unsupported - // 'qwik', - // 'builder', - 'vue', - 'html', - 'svelte', - 'solid', - 'angular', - 'webcomponent', + // 'qwik', // CLI does not support target: qwik + // 'builder', // CLI does not support target: builder + 'html', // HTML output in a JS file + 'webcomponent', // TS output in a JS file ], - options: { - react: { transpiler: { format: 'esm' } }, - }, }; diff --git a/packages/e2e-app/package.json b/packages/e2e-app/package.json index fe20a94b8a..4ec8ad3dd8 100644 --- a/packages/e2e-app/package.json +++ b/packages/e2e-app/package.json @@ -1,26 +1,13 @@ { "name": "@builder.io/e2e-app", + "description": "App for verifying Mitosis works, including Playwright specification", "private": true, "version": "0.0.1", "scripts": { "build": "mitosis build" }, - "exports": { - "./angular/*": "./output/angular/src/*", - "./html/*": "./output/html/src/*", - "./qwik/*": "./output/qwik/src/*", - "./react/*": "./output/react/src/*", - "./solid/*": "./output/solid/src/*", - "./svelte/*": "./output/svelte/src/*", - "./vue3/*": "./output/vue/nuxt2/src/*" - }, "dependencies": { "@builder.io/mitosis": "workspace:*", "@builder.io/mitosis-cli": "workspace:*" - }, - "devDependencies": { - "solid-js": "^1.4.3", - "solid-styled-components": "^0.28.1", - "vue": "^3.2.36" } } diff --git a/packages/e2e-app-spec/shared.config.ts b/packages/e2e-app/shared.config.ts similarity index 94% rename from packages/e2e-app-spec/shared.config.ts rename to packages/e2e-app/shared.config.ts index 73d3ddc188..dfbf005e77 100644 --- a/packages/e2e-app-spec/shared.config.ts +++ b/packages/e2e-app/shared.config.ts @@ -1,10 +1,14 @@ import type { PlaywrightTestConfig } from '@playwright/test'; import { devices } from '@playwright/test'; +import { targetContext } from './tests/context'; + /** * See https://playwright.dev/docs/test-configuration. */ export function configFor(packageName: string, port: number): PlaywrightTestConfig { + targetContext.name = packageName; + return { testDir: __dirname + '/tests', /* Maximum time one test can run for. */ @@ -100,7 +104,7 @@ export function configFor(packageName: string, port: number): PlaywrightTestConf // also to test against "run dev" for a faster development cycle. webServer: { - command: `yarn workspace ${packageName} run serve --port ${port}`, + command: `yarn workspace @builder.io/${packageName} run serve --port ${port}`, port, reuseExistingServer: false, }, diff --git a/packages/e2e-app/src/components/my-component.lite.tsx b/packages/e2e-app/src/components/my-component.lite.tsx index 2a9432adac..542a080f74 100644 --- a/packages/e2e-app/src/components/my-component.lite.tsx +++ b/packages/e2e-app/src/components/my-component.lite.tsx @@ -3,19 +3,23 @@ import { useStore } from '@builder.io/mitosis'; export interface State { list: string[]; newItemName: string; + setItemName: any; + addItem: any; } export default function MyComponent(props: any) { const state = useStore({ list: ['hello', 'world'], newItemName: 'New item', - }); - // Inner function is more readble, but errors in Svelte generation - // https://github.com/BuilderIO/mitosis/issues/472 - // function addItem() { - // state.list = [...state.list, state.newItemName]; - // } + setItemName(event: Event) { + state.newItemName = (event.target as any).value; + }, + + addItem() { + state.list = [...state.list, state.newItemName]; + }, + }); return (
(state.newItemName = event.target.value)} + onChange={(event) => state.setItemName(event)} /> diff --git a/packages/e2e-app/tests/context.ts b/packages/e2e-app/tests/context.ts new file mode 100644 index 0000000000..a61f947e08 --- /dev/null +++ b/packages/e2e-app/tests/context.ts @@ -0,0 +1,3 @@ +export let targetContext = { + name: '', +}; diff --git a/packages/e2e-app/tests/example.spec.ts b/packages/e2e-app/tests/example.spec.ts new file mode 100644 index 0000000000..103a7bd012 --- /dev/null +++ b/packages/e2e-app/tests/example.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/test'; + +import { targetContext } from './context'; + +test.describe(targetContext.name, () => { + test('todo list add', async ({ page }) => { + await page.goto('/'); + + await expect(page.locator('li')).toHaveCount(2); + + await page.locator('input').click(); + + await page.locator('input').fill('Test Items One'); + + await page.locator('text=Add list item').click(); // Add button + + await expect(page.locator('li')).toHaveCount(3); + }); +}); diff --git a/packages/e2e-react/.gitignore b/packages/e2e-react/.gitignore index 0642c0fd7c..aacf499cb3 100644 --- a/packages/e2e-react/.gitignore +++ b/packages/e2e-react/.gitignore @@ -1,5 +1,6 @@ -logs -*.log* -dist dist-ssr -*.local + +# Mitosis input, copied in from elsewhere +src +# Mitosis output +react_src/lib diff --git a/packages/e2e-react/README.md b/packages/e2e-react/README.md index fc7c3d84da..4cd28c28c6 100644 --- a/packages/e2e-react/README.md +++ b/packages/e2e-react/README.md @@ -1,11 +1,9 @@ # E2E test harness for React -"Yarn workspaces" uses its understanding of the build graph in a limited way, so -to recompile and run just this set of E2E tests, you can run these commands at +To recompile and run just this set of E2E tests, you can run these commands at the project root: ```bash -yarn workspace @builder.io/e2e-app run build yarn workspace @builder.io/e2e-react run build yarn workspace @builder.io/e2e-react run e2e ``` diff --git a/packages/e2e-react/index.html b/packages/e2e-react/index.html index ec41bbddb0..4c3e35fa2b 100644 --- a/packages/e2e-react/index.html +++ b/packages/e2e-react/index.html @@ -7,6 +7,6 @@
- + diff --git a/packages/e2e-react/mitosis.config.js b/packages/e2e-react/mitosis.config.js new file mode 100644 index 0000000000..8d22acab57 --- /dev/null +++ b/packages/e2e-react/mitosis.config.js @@ -0,0 +1,8 @@ +module.exports = { + files: 'src/**', + dest: 'react_src/lib', + targets: ['react'], + options: { + react: { transpiler: { format: 'esm' } }, + }, +}; diff --git a/packages/e2e-react/package.json b/packages/e2e-react/package.json index 4869b29c90..71344a596f 100644 --- a/packages/e2e-react/package.json +++ b/packages/e2e-react/package.json @@ -3,14 +3,16 @@ "private": true, "version": "0.0.1", "scripts": { - "build": "tsc && vite build", - "dev": "vite", + "build": "yarn run mitosis && tsc && vite build", + "dev": "yarn run mitosis && vite", "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", "serve": "vite preview" }, "dependencies": { "@builder.io/e2e-app": "workspace:*", - "@builder.io/e2e-app-spec": "workspace:*", + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -18,6 +20,7 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@vitejs/plugin-react": "^1.3.0", + "sync-directory": "^5.1.5", "typescript": "^4", "vite": "^2.9.9" } diff --git a/packages/e2e-react/playwright.config.ts b/packages/e2e-react/playwright.config.ts index 1050e269dd..eb7ee9eb28 100644 --- a/packages/e2e-react/playwright.config.ts +++ b/packages/e2e-react/playwright.config.ts @@ -1,3 +1,3 @@ -import { configFor } from '@builder.io/e2e-app-spec/shared.config'; +import { configFor } from '@builder.io/e2e-app/shared.config'; -export default configFor('@builder.io/e2e-react', 7502); +export default configFor('e2e-react', 7502); diff --git a/packages/e2e-react/react_src/App.tsx b/packages/e2e-react/react_src/App.tsx new file mode 100644 index 0000000000..3980364b8d --- /dev/null +++ b/packages/e2e-react/react_src/App.tsx @@ -0,0 +1,13 @@ +// Consume the compiled React component, not the lite.tsx file (which is a debugging reference) +// @ts-ignore +import MyComponent from './lib/react/src/components/my-component'; + +// Make our copy of React available globally, where the imported components expect it. +import React from 'react'; +window.React = React; + +function App() { + return ; +} + +export default App; diff --git a/packages/e2e-react/src/main.tsx b/packages/e2e-react/react_src/main.tsx similarity index 100% rename from packages/e2e-react/src/main.tsx rename to packages/e2e-react/react_src/main.tsx diff --git a/packages/e2e-react/src/vite-env.d.ts b/packages/e2e-react/react_src/vite-env.d.ts similarity index 100% rename from packages/e2e-react/src/vite-env.d.ts rename to packages/e2e-react/react_src/vite-env.d.ts diff --git a/packages/e2e-react/src/App.tsx b/packages/e2e-react/src/App.tsx deleted file mode 100644 index f54295ee74..0000000000 --- a/packages/e2e-react/src/App.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// TODO Mitosis output include TS compiled output suitable to use via node_modules. -// @ts-ignore -import MyComponent from '@builder.io/e2e-app/react/components/my-component.lite'; - -function App() { - return ; -} - -export default App; diff --git a/packages/e2e-react/tsconfig.json b/packages/e2e-react/tsconfig.json index 676770da38..78ff17f760 100644 --- a/packages/e2e-react/tsconfig.json +++ b/packages/e2e-react/tsconfig.json @@ -16,6 +16,7 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": ["src", "./**/*.tsx"], + "include": ["react_src", "react_src/**/*.tsx"], + "exclude": ["react_src/lib", "**/*.lite.tsx"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/e2e-solid/.gitignore b/packages/e2e-solid/.gitignore new file mode 100644 index 0000000000..57737edde8 --- /dev/null +++ b/packages/e2e-solid/.gitignore @@ -0,0 +1,4 @@ +# Mitosis input, copied in from elsewhere +src +# Mitosis output +solid_src/lib diff --git a/packages/e2e-solid/README.md b/packages/e2e-solid/README.md index 23e138b9c3..4d9b1c772c 100644 --- a/packages/e2e-solid/README.md +++ b/packages/e2e-solid/README.md @@ -1,11 +1,9 @@ # E2E test harness for Solid -"Yarn workspaces" uses its understanding of the build graph in a limited way, so -to recompile and run just this set of E2E tests, you can run these commands at +To recompile and run just this set of E2E tests, you can run these commands at the project root: ```bash -yarn workspace @builder.io/e2e-app run build yarn workspace @builder.io/e2e-solid run build yarn workspace @builder.io/e2e-solid run e2e ``` diff --git a/packages/e2e-solid/index.html b/packages/e2e-solid/index.html index 48c59fc124..39b756a350 100644 --- a/packages/e2e-solid/index.html +++ b/packages/e2e-solid/index.html @@ -11,6 +11,6 @@
- + diff --git a/packages/e2e-solid/mitosis.config.js b/packages/e2e-solid/mitosis.config.js new file mode 100644 index 0000000000..c61263fd00 --- /dev/null +++ b/packages/e2e-solid/mitosis.config.js @@ -0,0 +1,5 @@ +module.exports = { + files: 'src/**', + dest: 'solid_src/lib', + targets: ['solid'], +}; diff --git a/packages/e2e-solid/package.json b/packages/e2e-solid/package.json index a4c48a3d01..e8e0f35c5e 100644 --- a/packages/e2e-solid/package.json +++ b/packages/e2e-solid/package.json @@ -3,18 +3,21 @@ "private": true, "version": "0.0.1", "scripts": { - "build": "vite build", - "dev": "vite", + "build": "yarn run mitosis && vite build", + "dev": "yarn run mitosis && vite", "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", "serve": "vite preview" }, "dependencies": { "@builder.io/e2e-app": "workspace:*", - "@builder.io/e2e-app-spec": "workspace:*", - "solid-js": "^1.4.2", + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*", + "solid-js": "^1.4.3", "solid-styled-components": "^0.28.1" }, "devDependencies": { + "sync-directory": "^5.1.5", "typescript": "^4", "vite": "^2.9.9", "vite-plugin-solid": "^2.2.6" diff --git a/packages/e2e-solid/playwright.config.ts b/packages/e2e-solid/playwright.config.ts index 509cb4b109..d979bae051 100644 --- a/packages/e2e-solid/playwright.config.ts +++ b/packages/e2e-solid/playwright.config.ts @@ -1,3 +1,3 @@ -import { configFor } from '@builder.io/e2e-app-spec/shared.config'; +import { configFor } from '@builder.io/e2e-app/shared.config'; -export default configFor('@builder.io/e2e-solid', 7501); +export default configFor('e2e-solid', 7501); diff --git a/packages/e2e-solid/solid_src/App.tsx b/packages/e2e-solid/solid_src/App.tsx new file mode 100644 index 0000000000..2920d21a60 --- /dev/null +++ b/packages/e2e-solid/solid_src/App.tsx @@ -0,0 +1,9 @@ +import MyComponent from './lib/solid/src/components/my-component.lite'; + +import type { Component } from 'solid-js'; + +const App: Component = () => { + return ; +}; + +export default App; diff --git a/packages/e2e-solid/src/index.tsx b/packages/e2e-solid/solid_src/index.tsx similarity index 100% rename from packages/e2e-solid/src/index.tsx rename to packages/e2e-solid/solid_src/index.tsx diff --git a/packages/e2e-solid/src/App.tsx b/packages/e2e-solid/src/App.tsx deleted file mode 100644 index 30a20368ed..0000000000 --- a/packages/e2e-solid/src/App.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// TODO make Mitosis output include TS suitable to use via node_modules. -// @ts-ignore -import MyComponent from '@builder.io/e2e-app/solid/components/my-component.lite'; - -import type { Component } from 'solid-js'; - -const App: Component = () => { - return ; -}; - -export default App; diff --git a/packages/e2e-solid/tsconfig.json b/packages/e2e-solid/tsconfig.json index 249b2732a7..382f7fa372 100644 --- a/packages/e2e-solid/tsconfig.json +++ b/packages/e2e-solid/tsconfig.json @@ -11,5 +11,7 @@ "types": ["vite/client"], "noEmit": true, "isolatedModules": true - } + }, + "include": ["solid_src/**/*.ts", "solid_src/**/*.d.ts", "solid_src/**/*.tsx"], + "exclude": ["**/*.lite.tsx"] } diff --git a/packages/e2e-svelte/.gitignore b/packages/e2e-svelte/.gitignore new file mode 100644 index 0000000000..02ec99b40c --- /dev/null +++ b/packages/e2e-svelte/.gitignore @@ -0,0 +1,4 @@ +# Mitosis input, copied in from elsewhere +src +# Mitosis output +svelte_src/lib diff --git a/packages/e2e-svelte/README.md b/packages/e2e-svelte/README.md index eaa5b498fb..9fd7c2a59c 100644 --- a/packages/e2e-svelte/README.md +++ b/packages/e2e-svelte/README.md @@ -1,11 +1,9 @@ # E2E test harness for Svelte -"Yarn workspaces" uses its understanding of the build graph in a limited way, so -to recompile and run just this set of E2E tests, you can run these commands at +To recompile and run just this set of E2E tests, you can run these commands at the project root: ```bash -yarn workspace @builder.io/e2e-app run build yarn workspace @builder.io/e2e-svelte run build yarn workspace @builder.io/e2e-svelte run e2e ``` diff --git a/packages/e2e-svelte/index.html b/packages/e2e-svelte/index.html index e00c91b0cc..e5ea49cccd 100644 --- a/packages/e2e-svelte/index.html +++ b/packages/e2e-svelte/index.html @@ -8,6 +8,6 @@
- + diff --git a/packages/e2e-svelte/mitosis.config.js b/packages/e2e-svelte/mitosis.config.js new file mode 100644 index 0000000000..948057c9f5 --- /dev/null +++ b/packages/e2e-svelte/mitosis.config.js @@ -0,0 +1,5 @@ +module.exports = { + files: 'src/**', + dest: 'svelte_src/lib', + targets: ['svelte'], +}; diff --git a/packages/e2e-svelte/package.json b/packages/e2e-svelte/package.json index aa4128b7b8..76bbfe744a 100644 --- a/packages/e2e-svelte/package.json +++ b/packages/e2e-svelte/package.json @@ -3,15 +3,17 @@ "private": true, "version": "0.0.1", "scripts": { - "build": "yarn run check && vite build", + "build": "yarn run mitosis && yarn run check && vite build", "check": "svelte-check --tsconfig ./tsconfig.json", - "dev": "vite", + "dev": "yarn run mitosis && vite", "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", "serve": "vite preview" }, "dependencies": { "@builder.io/e2e-app": "workspace:*", - "@builder.io/e2e-app-spec": "workspace:*" + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", @@ -19,6 +21,7 @@ "svelte": "^3.48.0", "svelte-check": "^2.7.2", "svelte-preprocess": "^4.10.7", + "sync-directory": "^5.1.5", "tslib": "^2.4.0", "typescript": "^4", "vite": "^2.9.9" diff --git a/packages/e2e-svelte/playwright.config.ts b/packages/e2e-svelte/playwright.config.ts index b58f7de4e9..8ddfd98133 100644 --- a/packages/e2e-svelte/playwright.config.ts +++ b/packages/e2e-svelte/playwright.config.ts @@ -1,3 +1,3 @@ -import { configFor } from '@builder.io/e2e-app-spec/shared.config'; +import { configFor } from '@builder.io/e2e-app/shared.config'; -export default configFor('@builder.io/e2e-svelte', 7504); +export default configFor('e2e-svelte', 7504); diff --git a/packages/e2e-svelte/src/App.svelte b/packages/e2e-svelte/src/App.svelte deleted file mode 100644 index f7247db05c..0000000000 --- a/packages/e2e-svelte/src/App.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/e2e-svelte/svelte_src/App.svelte b/packages/e2e-svelte/svelte_src/App.svelte new file mode 100644 index 0000000000..d5a722761c --- /dev/null +++ b/packages/e2e-svelte/svelte_src/App.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/e2e-svelte/src/main.mts b/packages/e2e-svelte/svelte_src/main.mts similarity index 100% rename from packages/e2e-svelte/src/main.mts rename to packages/e2e-svelte/svelte_src/main.mts diff --git a/packages/e2e-svelte/src/vite-env.d.ts b/packages/e2e-svelte/svelte_src/vite-env.d.ts similarity index 100% rename from packages/e2e-svelte/src/vite-env.d.ts rename to packages/e2e-svelte/svelte_src/vite-env.d.ts diff --git a/packages/e2e-svelte/tsconfig.json b/packages/e2e-svelte/tsconfig.json index bb548cdd89..4c8af551f9 100644 --- a/packages/e2e-svelte/tsconfig.json +++ b/packages/e2e-svelte/tsconfig.json @@ -17,12 +17,12 @@ "isolatedModules": true }, "include": [ - "src/**/*.d.ts", - "src/**/*.ts", - "src/**/*.js", - "src/**/*.svelte", - "src/main.mts", - "src/main.mts" + "svelte_src/**/*.d.ts", + "svelte_src/**/*.ts", + "svelte_src/**/*.js", + "svelte_src/**/*.svelte", + "svelte_src/main.mts", + "svelte_src/main.mts" ], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/e2e-vue2/.gitignore b/packages/e2e-vue2/.gitignore new file mode 100644 index 0000000000..ad6af6fd9a --- /dev/null +++ b/packages/e2e-vue2/.gitignore @@ -0,0 +1,4 @@ +# Mitosis input, copied in from elsewhere +src +# Mitosis output +vue_src/lib diff --git a/packages/e2e-vue2/README.md b/packages/e2e-vue2/README.md new file mode 100644 index 0000000000..70f2e959ce --- /dev/null +++ b/packages/e2e-vue2/README.md @@ -0,0 +1,9 @@ +# E2E test harness for Vue 2 + +To recompile and run just this set of E2E tests, you can run these commands at +the project root: + +```bash +yarn workspace @builder.io/e2e-vue2 run build +yarn workspace @builder.io/e2e-vue2 run e2e +``` diff --git a/packages/e2e-vue2/index.html b/packages/e2e-vue2/index.html new file mode 100644 index 0000000000..0cbd276805 --- /dev/null +++ b/packages/e2e-vue2/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App + + +
+ + + diff --git a/packages/e2e-vue2/mitosis.config.js b/packages/e2e-vue2/mitosis.config.js new file mode 100644 index 0000000000..205733ef9b --- /dev/null +++ b/packages/e2e-vue2/mitosis.config.js @@ -0,0 +1,5 @@ +module.exports = { + files: 'src/**', + dest: 'vue_src/lib', + targets: ['vue2'], +}; diff --git a/packages/e2e-vue2/package.json b/packages/e2e-vue2/package.json new file mode 100644 index 0000000000..4274601cd1 --- /dev/null +++ b/packages/e2e-vue2/package.json @@ -0,0 +1,28 @@ +{ + "name": "@builder.io/e2e-vue2", + "private": true, + "version": "0.0.1", + "scripts": { + "build": "yarn run mitosis && tsc --noEmit && vite build", + "dev": "yarn run mitosis && tsc --noEmit && vite", + "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", + "serve": "vite preview" + }, + "dependencies": { + "@builder.io/e2e-app": "workspace:*", + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*", + "vue": "^2.6.12", + "vue-class-component": "^7.2.6", + "vue-property-decorator": "^9.1.2" + }, + "devDependencies": { + "sync-directory": "^5.1.5", + "typescript": "^4", + "vite": "^2.9.10", + "vite-plugin-components": "^0.13.2", + "vite-plugin-vue2": "^1.2.1", + "vue-template-compiler": "^2.6.12" + } +} diff --git a/packages/e2e-vue2/playwright.config.ts b/packages/e2e-vue2/playwright.config.ts new file mode 100644 index 0000000000..04ccba1742 --- /dev/null +++ b/packages/e2e-vue2/playwright.config.ts @@ -0,0 +1,3 @@ +import { configFor } from '@builder.io/e2e-app/shared.config'; + +export default configFor('e2e-vue2', 7505); diff --git a/packages/e2e-vue2/public/.gitkeep b/packages/e2e-vue2/public/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/e2e-vue2/tsconfig.json b/packages/e2e-vue2/tsconfig.json new file mode 100644 index 0000000000..82fe10a663 --- /dev/null +++ b/packages/e2e-vue2/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "strict": true, + "jsx": "preserve", + "importHelpers": true, + "moduleResolution": "node", + "experimentalDecorators": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "useDefineForClassFields": false, + "sourceMap": true, + "baseUrl": ".", + "paths": { + "@/*": ["vue_src/*"] + }, + "lib": ["esnext", "dom", "dom.iterable", "scripthost"] + }, + "include": [ + "vue_src/**/*.ts", + "vue_src/**/*.d.ts", + "vue_src/**/*.tsx", + "vue_src/**/*.vue" + ], + "exclude": ["node_modules", "**/*.lite.tsx"] +} diff --git a/packages/e2e-vue2/tsconfig.node.json b/packages/e2e-vue2/tsconfig.node.json new file mode 100644 index 0000000000..e993792cb1 --- /dev/null +++ b/packages/e2e-vue2/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/packages/e2e-vue2/vite.config.ts b/packages/e2e-vue2/vite.config.ts new file mode 100644 index 0000000000..62e9db6f8f --- /dev/null +++ b/packages/e2e-vue2/vite.config.ts @@ -0,0 +1,24 @@ +import { defineConfig } from 'vite'; +import { createVuePlugin } from 'vite-plugin-vue2'; +import ViteComponents from 'vite-plugin-components'; +import { resolve } from 'path'; + +const config = defineConfig({ + resolve: { + alias: { + '@': `${resolve(__dirname, 'vue_src')}`, + }, + }, + + build: { + minify: true, + }, + + plugins: [createVuePlugin({}), ViteComponents({ transformer: 'vue2' })], + + server: { + port: 8080, + }, +}); + +export default config; diff --git a/packages/e2e-vue2/vue_src/App.vue b/packages/e2e-vue2/vue_src/App.vue new file mode 100644 index 0000000000..bbcd04157f --- /dev/null +++ b/packages/e2e-vue2/vue_src/App.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/e2e-vue2/vue_src/assets/.gitkeep b/packages/e2e-vue2/vue_src/assets/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/e2e-vue3/src/env.d.ts b/packages/e2e-vue2/vue_src/env.d.ts similarity index 100% rename from packages/e2e-vue3/src/env.d.ts rename to packages/e2e-vue2/vue_src/env.d.ts diff --git a/packages/e2e-vue2/vue_src/main.ts b/packages/e2e-vue2/vue_src/main.ts new file mode 100644 index 0000000000..e5c1db2aea --- /dev/null +++ b/packages/e2e-vue2/vue_src/main.ts @@ -0,0 +1,8 @@ +import Vue from 'vue'; +import App from './App.vue'; + +Vue.config.productionTip = false; + +new Vue({ + render: (h) => h(App), +}).$mount('#app'); diff --git a/packages/e2e-vue2/vue_src/shims-tsx.d.ts b/packages/e2e-vue2/vue_src/shims-tsx.d.ts new file mode 100644 index 0000000000..3b88b58292 --- /dev/null +++ b/packages/e2e-vue2/vue_src/shims-tsx.d.ts @@ -0,0 +1,13 @@ +import Vue, { VNode } from 'vue'; + +declare global { + namespace JSX { + // tslint:disable no-empty-interface + interface Element extends VNode {} + // tslint:disable no-empty-interface + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any; + } + } +} diff --git a/packages/e2e-vue2/vue_src/shims-vue.d.ts b/packages/e2e-vue2/vue_src/shims-vue.d.ts new file mode 100644 index 0000000000..8f6f410263 --- /dev/null +++ b/packages/e2e-vue2/vue_src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue'; + export default Vue; +} diff --git a/packages/e2e-vue3/.gitignore b/packages/e2e-vue3/.gitignore index b1bb5e8415..ad6af6fd9a 100644 --- a/packages/e2e-vue3/.gitignore +++ b/packages/e2e-vue3/.gitignore @@ -1,7 +1,4 @@ -# Logs -logs -*.log* -*.local - -# Ignore the lib we copy in for testing -src/lib +# Mitosis input, copied in from elsewhere +src +# Mitosis output +vue_src/lib diff --git a/packages/e2e-vue3/README.md b/packages/e2e-vue3/README.md index e97e321fbc..08992ebc6d 100644 --- a/packages/e2e-vue3/README.md +++ b/packages/e2e-vue3/README.md @@ -1,17 +1,9 @@ # E2E test harness for Vue 3 -"Yarn workspaces" uses its understanding of the build graph in a limited way, so -to recompile and run just this set of E2E tests, you can run these commands at +To recompile and run just this set of E2E tests, you can run these commands at the project root: ```bash -yarn workspace @builder.io/e2e-app run build yarn workspace @builder.io/e2e-vue3 run build yarn workspace @builder.io/e2e-vue3 run e2e ``` - -This test harness copies the source output from the e2e-app project, because -that project emits Vue source code, rather than the compiled format suitable for -consumption via node_modules. While it is surely possible to consume .vue files -from node_modules, that isn't idiomatic and simple attempt yield -partially-broken components. diff --git a/packages/e2e-vue3/index.html b/packages/e2e-vue3/index.html index 5129516e37..0cbd276805 100644 --- a/packages/e2e-vue3/index.html +++ b/packages/e2e-vue3/index.html @@ -7,6 +7,6 @@
- + diff --git a/packages/e2e-vue3/mitosis.config.js b/packages/e2e-vue3/mitosis.config.js new file mode 100644 index 0000000000..88136de49f --- /dev/null +++ b/packages/e2e-vue3/mitosis.config.js @@ -0,0 +1,5 @@ +module.exports = { + files: 'src/**', + dest: 'vue_src/lib', + targets: ['vue3'], +}; diff --git a/packages/e2e-vue3/package.json b/packages/e2e-vue3/package.json index c3e29126ff..cf4c2c0103 100644 --- a/packages/e2e-vue3/package.json +++ b/packages/e2e-vue3/package.json @@ -3,20 +3,21 @@ "private": true, "version": "0.0.1", "scripts": { - "build": "yarn run copy && vue-tsc --noEmit && vite build", - "copy": "copyfiles -u 7 -V \"./node_modules/@builder.io/e2e-app/output/vue/vue3/src/components/**\" src/lib", - "dev": "vite", + "build": "yarn run mitosis && vue-tsc --noEmit && vite build", + "dev": "yarn run mitosis && vite", "e2e": "../../node_modules/.bin/playwright test", + "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build", "serve": "vite preview" }, "dependencies": { "@builder.io/e2e-app": "workspace:*", - "@builder.io/e2e-app-spec": "workspace:*", - "copyfiles": "^2.4.1", + "@builder.io/mitosis": "workspace:*", + "@builder.io/mitosis-cli": "workspace:*", "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.3.3", + "sync-directory": "^5.1.5", "typescript": "^4", "vite": "^2.9.10", "vue-tsc": "^0.37.3" diff --git a/packages/e2e-vue3/playwright.config.ts b/packages/e2e-vue3/playwright.config.ts index c2681334f3..a75707f3ac 100644 --- a/packages/e2e-vue3/playwright.config.ts +++ b/packages/e2e-vue3/playwright.config.ts @@ -1,3 +1,3 @@ -import { configFor } from '@builder.io/e2e-app-spec/shared.config'; +import { configFor } from '@builder.io/e2e-app/shared.config'; -export default configFor('@builder.io/e2e-vue3', 7503); +export default configFor('e2e-vue3', 7503); diff --git a/packages/e2e-vue3/tsconfig.json b/packages/e2e-vue3/tsconfig.json index cdd1fbf5f7..a972c818ea 100644 --- a/packages/e2e-vue3/tsconfig.json +++ b/packages/e2e-vue3/tsconfig.json @@ -14,6 +14,12 @@ "lib": ["esnext", "dom"], "skipLibCheck": true }, - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "include": [ + "vue_src/**/*.ts", + "vue_src/**/*.d.ts", + "vue_src/**/*.tsx", + "vue_src/**/*.vue" + ], + "exclude": ["**/*.lite.tsx"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/e2e-vue3/src/App.vue b/packages/e2e-vue3/vue_src/App.vue similarity index 54% rename from packages/e2e-vue3/src/App.vue rename to packages/e2e-vue3/vue_src/App.vue index 5ab8151dfd..a89fc5fc94 100644 --- a/packages/e2e-vue3/src/App.vue +++ b/packages/e2e-vue3/vue_src/App.vue @@ -1,5 +1,5 @@