Tests: SDKs: custom components

.github/workflows/ci.yml

@@ -155,6 +155,9 @@ jobs:
       - name: Build E2E tests
         run: yarn e2e:build:specs
 
+      - name: Build E2E custom components
+        run: yarn workspace @builder.io/sdks-tests-custom-components build
+
       - name: Build E2E apps
         run: yarn e2e:build:${{ matrix.sdk }}
 
@@ -228,6 +231,9 @@ jobs:
       - name: Build E2E tests
         run: yarn workspace @builder.io/sdks-e2e-tests build
 
+      - name: Build E2E custom components
+        run: yarn workspace @builder.io/sdks-tests-custom-components build
+
       - name: Build E2E apps
         run: yarn workspace @builder.io/react-tests build
 

examples/remix-minimal-starter/app/components/Button/Button.tsx

@@ -0,0 +1,35 @@
+import { Builder } from '@builder.io/react';
+
+export function Button(props) {
+  return (
+    <>
+      {props.link ? (
+        <>
+          <a
+            role="button"
+            className="a-7ce05d40"
+            href={props.link}
+            target={props.openLinkInNewTab ? '_blank' : undefined}
+            {...props.attributes}
+          >
+            {props.text}
+          </a>
+        </>
+      ) : (
+        <button className="button-7ce05d40" {...props.attributes}>
+          {props.text}
+        </button>
+      )}
+      <style>{`.button-7ce05d40 {
+all: unset;
+color: cyan;
+}.a-7ce05d40 {
+color: cyan;
+}`}</style>
+    </>
+  );
+}
+
+Builder.registerComponent(Button, {
+  name: 'Core:Button',
+});

examples/remix-minimal-starter/app/routes/$.tsx → examples/remix-minimal-starter/app/routes/($slug).tsx

@@ -4,14 +4,18 @@ import { Builder } from '@builder.io/sdk';
 import { Links, Meta, Scripts, useCatch, useLoaderData } from '@remix-run/react';
 import type { LoaderFunction } from '@remix-run/node';
 import builderConfig from '../../builderConfig.json';
+import { Button } from '../components/Button/Button';
 
 builder.init(builderConfig.apiKey);
+Builder.registerComponent(Button, {
+  name: 'Core:Button',
+});
 
 export const loader: LoaderFunction = async ({ params }) => {
   const page = await builder
     .get('page', {
       userAttributes: {
-        urlPath: `/${params['*']}`,
+        urlPath: `/${params.slug || ''}`,
       },
     })
     .toPromise();

examples/remix-minimal-starter/builderConfig.json

@@ -1,3 +1,3 @@
 {
-  "apiKey": "cb3255f61d654ba7849be3b13e1c4151"
-}
+  "apiKey": "f1a790f8c3204b3b8c5c1795aeac4660"
+}

packages/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "workspaces": [
     "sdks-tests",
+    "sdks-tests-custom-components",
     "sdks",
     "react",
     "react-tests",

packages/react-tests/nextjs/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@builder.io/react": "workspace:*",
     "@builder.io/sdks-e2e-tests": "workspace:*",
+    "@builder.io/sdks-tests-custom-components": "workspace:*",
     "next": "^12.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/react-tests/nextjs/pages/[[...index]].tsx

@@ -6,17 +6,19 @@ import type {
   GetStaticPropsContext,
   InferGetStaticPropsType,
 } from 'next';
-import { BuilderComponent, builder } from '@builder.io/react';
+import { BuilderComponent, builder, Builder } from '@builder.io/react';
 import DefaultErrorPage from 'next/error';
 import Head from 'next/head';
 import { useEffect } from 'react';
+import { getCustomComponents } from '@builder.io/sdks-tests-custom-components/output/react/src/index';
 
 builder.init(getAPIKey());
 
 type StaticProps = { index: string[] };
 
 export async function getStaticProps(x: GetStaticPropsContext<StaticProps>) {
-  return { props: getProps(x.params.index ? `/${x.params.index.join('/')}` : '/') };
+  const path = x.params.index ? `/${x.params.index.join('/')}` : '/';
+  return { props: { ...getProps(path), customComponents: getCustomComponents(path) } };
 }
 
 export function getStaticPaths(): GetStaticPathsResult<StaticProps> {
@@ -40,6 +42,10 @@ builder.canTrack = false;
 export default function Page(props: PageProps & { apiVersion: any }) {
   const router = useRouter();
 
+  props.customComponents.forEach(({ component, ...info }) => {
+    Builder.registerComponent(component, info);
+  });
+
   if (props?.apiVersion) {
     builder.apiVersion = props?.apiVersion;
   }

packages/react-tests/react-remix/app/routes/($slug).tsx

@@ -1,12 +1,17 @@
 import { Links, Meta, Scripts, useCatch, useLoaderData, useParams } from '@remix-run/react';
 import type { LoaderFunction } from '@remix-run/node';
-import { BuilderComponent, builder } from '@builder.io/react';
+import { BuilderComponent, builder, Builder } from '@builder.io/react';
 import { getAPIKey, getProps } from '@builder.io/sdks-e2e-tests';
 import { useEffect } from 'react';
+import { getCustomComponents } from '@builder.io/sdks-tests-custom-components/output/react/src/index';
 
 builder.init(getAPIKey());
 
-export const loader: LoaderFunction = async ({ params }) => getProps(`/${params.slug || ''}`);
+export const loader: LoaderFunction = async ({ params }) => {
+  const path = `/${params.slug || ''}`;
+  const props = { ...getProps(path), customComponents: getCustomComponents(path) };
+  return { props: props };
+};
 
 export function CatchBoundary() {
   const caught = useCatch();
@@ -34,9 +39,15 @@ export function CatchBoundary() {
 }
 
 export default function Page() {
-  const props = useLoaderData<ReturnType<typeof getProps>>();
+  const props = useLoaderData<
+    ReturnType<typeof getProps> & { customComponents: ReturnType<typeof getCustomComponents> }
+  >();
   const params = useParams();
 
+  props.customComponents.forEach(({ component, ...info }) => {
+    Builder.registerComponent(component, info);
+  });
+
   if (props?.apiVersion) {
     builder.apiVersion = props?.apiVersion;
   }

packages/react-tests/react-remix/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@builder.io/react": "workspace:*",
     "@builder.io/sdks-e2e-tests": "workspace:*",
+    "@builder.io/sdks-tests-custom-components": "workspace:*",
     "@remix-run/node": "^1.14.3",
     "@remix-run/react": "^1.14.3",
     "@remix-run/serve": "^1.14.3",

packages/react-tests/react-vite/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@builder.io/react": "workspace:*",
     "@builder.io/sdks-e2e-tests": "workspace:*",
+    "@builder.io/sdks-tests-custom-components": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/react-tests/react-vite/src/App.tsx

@@ -1,13 +1,18 @@
 import { getAPIKey, getProps } from '@builder.io/sdks-e2e-tests';
-import { BuilderComponent, builder } from '@builder.io/react';
+import { BuilderComponent, builder, Builder } from '@builder.io/react';
 import { useEffect } from 'react';
+import { getCustomComponents } from '@builder.io/sdks-tests-custom-components/output/react/src/index';
 
 builder.init(getAPIKey());
 // default to not tracking, and re-enable when appropriate
 builder.canTrack = false;
 
 function App() {
-  const props = getProps() as any;
+  const props = { ...getProps(), customComponents: getCustomComponents() };
+
+  props.customComponents.forEach(({ component, ...info }) => {
+    Builder.registerComponent(component, info);
+  });
 
   if (props?.apiVersion) {
     builder.apiVersion = props?.apiVersion;

packages/sdks-tests-custom-components/.eslintrc.cjs

@@ -0,0 +1,38 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  env: {
+    node: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['@typescript-eslint', 'unused-imports'],
+  rules: {
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'object-shorthand': 'error',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports', disallowTypeAnnotations: false },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
+
+    // Note: you must disable the base rule as it can report incorrect errors
+    'require-await': 'off',
+    '@typescript-eslint/require-await': 'error',
+
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+  },
+};

packages/sdks-tests-custom-components/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+
+output/

packages/sdks-tests-custom-components/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.

packages/sdks-tests-custom-components/mitosis.config.cjs

@@ -0,0 +1,43 @@
+/**
+ * @typedef {import('@builder.io/mitosis')} Mitosis
+ * @typedef {import('@builder.io/mitosis').MitosisNode} MitosisNode
+ * @typedef {import('@builder.io/mitosis').StateValue} StateValue
+ * @typedef {import('@builder.io/mitosis').MitosisConfig} MitosisConfig
+ * @typedef {import('@builder.io/mitosis').Plugin} Plugin
+ */
+
+/**
+ * @type {MitosisConfig['options']['vue']}
+ */
+const vueConfig = {
+  typescript: true,
+  namePrefix: path => (path.includes('/blocks/') ? 'builder' : ''),
+  asyncComponentImports: true,
+  api: 'options',
+};
+
+/**
+ * @type {MitosisConfig}
+ */
+module.exports = {
+  files: 'src/**',
+  targets: ['reactNative', 'vue2', 'rsc', 'vue3', 'solid', 'svelte', 'react', 'qwik'],
+  options: {
+    vue2: {
+      ...vueConfig,
+    },
+    vue3: vueConfig,
+    react: {
+      stylesType: 'style-tag',
+    },
+    reactNative: {
+      typescript: true,
+    },
+    qwik: {
+      typescript: true,
+    },
+    svelte: {
+      typescript: true,
+    },
+  },
+};

packages/sdks-tests-custom-components/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@builder.io/sdks-tests-custom-components",
+  "description": "Mitosis codebase containing custom components used for SDK tests",
+  "private": true,
+  "scripts": {
+    "start": "watch 'yarn run build' ./src",
+    "build": "mitosis build"
+  },
+  "type": "module",
+  "dependencies": {
+    "@builder.io/mitosis": "^0.0.93",
+    "@builder.io/mitosis-cli": "^0.0.52",
+    "@builder.io/sdks": "workspace:*",
+    "watch": "^1.0.2"
+  }
+}

packages/sdks-tests-custom-components/src/button.lite.tsx

@@ -0,0 +1,34 @@
+import { Show } from '@builder.io/mitosis';
+
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}
+
+/**
+ * Custom Button component that adds a `cyan` color.
+ */
+export default function Button(props: ButtonProps) {
+  return (
+    <Show
+      when={props.link}
+      else={
+        <button css={{ all: 'unset', color: 'cyan' }} {...props.attributes}>
+          {props.text}
+        </button>
+      }
+    >
+      <a
+        css={{ color: 'cyan' }}
+        role="button"
+        href={props.link}
+        target={props.openLinkInNewTab ? '_blank' : undefined}
+        {...props.attributes}
+      >
+        {props.text}
+      </a>
+    </Show>
+  );
+}