From 38703bbe2a4258b5ad7828bf04c46d3f0e8d355c Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Tue, 21 May 2024 10:48:40 -0400
Subject: [PATCH 1/3] init playground options

---
 packages/docs/src/components/code-rotator.tsx |   6 +-
 .../docs/src/components/options-modal.tsx     | 110 ++++++++++++++++++
 packages/docs/src/routes/playground/index.tsx |  92 +++++++++------
 packages/docs/src/services/compile.ts         |  63 +++-------
 4 files changed, 190 insertions(+), 81 deletions(-)
 create mode 100644 packages/docs/src/components/options-modal.tsx

diff --git a/packages/docs/src/components/code-rotator.tsx b/packages/docs/src/components/code-rotator.tsx
index 1da2eda97c..26ed461708 100644
--- a/packages/docs/src/components/code-rotator.tsx
+++ b/packages/docs/src/components/code-rotator.tsx
@@ -245,7 +245,11 @@ export const CodeRotator = component$((props: { class: ClassList }) => {
   const compileAll = $(async (code: string) => {
     await Promise.allSettled(
       frameworkExamples.map(async (framework) => {
-        const output = await compile(code, framework as OutputFramework, 'jsx');
+        const output = await compile({
+          code,
+          output: framework as OutputFramework,
+          inputSyntax: 'jsx'
+        });
         (outputs as any)[framework] = output.replace(
           /\n?\n?import { useStore } from "..";\n?/g,
           '',
diff --git a/packages/docs/src/components/options-modal.tsx b/packages/docs/src/components/options-modal.tsx
new file mode 100644
index 0000000000..b3c51d1dd9
--- /dev/null
+++ b/packages/docs/src/components/options-modal.tsx
@@ -0,0 +1,110 @@
+import { ToVueOptions } from '@builder.io/mitosis';
+import { $, Signal, component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { OutputFramework } from '~/services/compile';
+import Select from './select';
+
+type Option<O> = {name: keyof O} & ({
+  type: 'boolean';
+  default: boolean
+} | {
+  type: 'enum';
+  enum: Array<string>;
+  default: string;
+});
+
+const DEFAULT_OPTIONS: Option<ToVueOptions>[] = [{
+  name: 'typescript', 
+  type: 'boolean',
+  default: true
+}]
+
+type Dictionary<T> = {
+  [index: string]: T
+}
+type Options = Dictionary<string | boolean>
+
+export const getDefaultOptions = (target: OutputFramework) => {
+  const opts = getOptions(target)
+  const opt: Options = {}
+
+  for (const o of opts) {
+    opt[o.name] = o.default
+  }
+
+  return opt
+}
+
+
+const _getOptions = (target:OutputFramework) => {
+  switch (target) {
+    case 'vue':
+      const o: Array<Option<ToVueOptions>> = [{
+        name: 'casing',
+        type: 'enum',
+        enum: ['pascal', 'kebab'],
+        default: 'pascal'
+      },
+    {
+      name: 'api',
+      type: 'enum',
+      enum: ['options', 'composition'],
+      default: 'composition'
+    }]
+
+      return o
+      
+  
+    default:
+      return []
+  }
+}
+const getOptions = (target:OutputFramework) => {
+  return [
+    ...DEFAULT_OPTIONS,
+    ..._getOptions(target)
+  ]
+}
+
+export default component$(
+  ({options, target}: {    options: Options, target:Signal<OutputFramework> }) => {
+    const showModal = useSignal(true);
+
+    useVisibleTask$(() => {
+      if (target.value === 'angular') {
+        showModal.value = false
+      }
+    })
+
+
+
+    return (
+      <div>
+      <button onClick$={$(() => {
+        showModal.value = !showModal.value
+      })} class={'px-3 py-1.5 outline-0 rounded text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-990 bg-primary focus:ring-primary bg-opacity-10 border border-primary border-opacity-50 transition-colors duration-200 ease-in-out appearance-none'}>options</button>
+
+      {showModal.value && <div class={"absolute top-40 bottom-40 left-40 right-40 bg-purple-990 z-50 p-10"}>
+      <h1>{target.value} settings.</h1>
+
+<div class="w-full flex flex-col gap-4 pt-4">
+      {getOptions(target.value).map(option => {
+        console.log('consuming option: ', {option, options});
+        
+        return <div class="flex gap-2 items-baseline justify-between">
+          <div>{option.name}</div>
+          <div>{option.type === 'boolean' ? <form><input type="checkbox" checked={options[option.name] as boolean} onChange$={$(() => {
+            console.log('before: ', options.value);
+            
+            options[option.name] = !options[option.name]
+
+            console.log('after: ', options.value);
+          })} ></input></form> : <Select onChange$={$((newVal) => {
+            options[option.name] = newVal
+          })} value={options[option.name] as string} options={option.enum} class="" />}</div>
+        </div>
+      })}
+      </div></div>}
+      </div>
+    );
+  },
+);
diff --git a/packages/docs/src/routes/playground/index.tsx b/packages/docs/src/routes/playground/index.tsx
index 3faa815d09..ba76e88810 100644
--- a/packages/docs/src/routes/playground/index.tsx
+++ b/packages/docs/src/routes/playground/index.tsx
@@ -1,10 +1,12 @@
-import { $, component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { $, component$, useSignal, useStore, useVisibleTask$ } from '@builder.io/qwik';
 import { DocumentHead, routeLoader$, useLocation, useNavigate } from '@builder.io/qwik-city';
 import lzString from 'lz-string';
 import { ContentLoaderCode } from 'qwik-content-loader';
 import { CodeEditor } from '~/components/code-editor';
+import OptionsModal, { getDefaultOptions } from '~/components/options-modal';
 import Select from '~/components/select';
 import {
+  CompileArgs,
   InputSyntax,
   OutputFramework,
   compile,
@@ -39,9 +41,9 @@ const useOutput1 = routeLoader$(async (requestEvent) => {
   }
 
   const output = await compile(
-    code || defaultCode,
-    outputTab || defaultTopTab,
-    inputTab || defaultInputTab,
+    {code: code || defaultCode,
+    output: outputTab || defaultTopTab,
+    inputSyntax: inputTab || defaultInputTab,}
   ).catch((err) => {
     console.error(err);
     return formatErrorToDisplay(err);
@@ -54,11 +56,11 @@ const useOutput2 = routeLoader$(async (requestEvent) => {
   const outputTab = requestEvent.url.searchParams.get('outputTab') as OutputFramework;
   const inputTab = requestEvent.url.searchParams.get('inputTab') as InputSyntax;
 
-  const output = await compile(
+  const output = await compile({
     code,
-    outputTab || defaultBottomTab,
-    inputTab || defaultInputTab,
-  ).catch((err) => {
+   output: outputTab || defaultBottomTab,
+   inputSyntax: inputTab || defaultInputTab,
+  }).catch((err) => {
     console.error(err);
     return formatErrorToDisplay(err);
   });
@@ -73,13 +75,19 @@ export default component$(() => {
   const inputTab = location.url.searchParams.get('inputTab') as InputSyntax;
   const loaderOutput1 = useOutput1().value;
   const loaderOutput2 = useOutput2().value;
-
+  const showSecondOutput = useSignal(true);
   const code = useSignal(initialCode || defaultCode);
   const inputSyntax = useSignal<InputSyntax>(inputTab || defaultInputTab);
   const output = useSignal(loaderOutput1 || '');
   const outputOneFramework = useSignal<OutputFramework>(outputTab || defaultTopTab);
+  const optionsOne = useStore(getDefaultOptions(outputTab || defaultTopTab), {
+    deep: true
+  });
   const output2 = useSignal(loaderOutput2 || '');
   const outputTwoFramework = useSignal<OutputFramework>(defaultBottomTab);
+  const optionsTwo = useStore(getDefaultOptions(defaultBottomTab), {
+    deep: true
+  })
   const visible = useSignal(false);
   const isThrottling = useSignal(false);
   const isThrottling2 = useSignal(false);
@@ -112,7 +120,7 @@ export default component$(() => {
   });
 
   const throttledCompileOne = $(
-    async (code: string, outputFramework: OutputFramework, inputSyntax: InputSyntax) => {
+    async (args: CompileArgs) => {
       updateUrl();
       if (throttleTimeout1.value) {
         clearTimeout(throttleTimeout1.value);
@@ -121,7 +129,7 @@ export default component$(() => {
         throttleTimeout1.value = setTimeout(async () => {
           isThrottling.value = true;
           try {
-            output.value = await compile(code, outputFramework, inputSyntax);
+            output.value = await compile(args);
             errorOne.value = '';
           } catch (err) {
             errorOne.value = formatErrorToDisplay(err);
@@ -134,7 +142,7 @@ export default component$(() => {
       }
       isThrottling.value = true;
       try {
-        output.value = await compile(code, outputFramework, inputSyntax);
+        output.value = await compile(args);
         errorOne.value = '';
       } catch (err) {
         errorOne.value = formatErrorToDisplay(err);
@@ -145,7 +153,7 @@ export default component$(() => {
   );
 
   const throttledCompileTwo = $(
-    async (code: string, outputFramework: OutputFramework, inputSyntax: InputSyntax) => {
+    async (args: CompileArgs) => {
       if (throttleTimeout2.value) {
         clearTimeout(throttleTimeout2.value);
       }
@@ -153,7 +161,7 @@ export default component$(() => {
         throttleTimeout2.value = setTimeout(async () => {
           isThrottling.value = true;
           try {
-            output2.value = await compile(code, outputFramework, inputSyntax);
+            output2.value = await compile(args);
             errorTwo.value = '';
           } catch (err) {
             errorTwo.value = formatErrorToDisplay(err);
@@ -165,7 +173,7 @@ export default component$(() => {
       }
       isThrottling2.value = true;
       try {
-        output2.value = await compile(code, outputFramework, inputSyntax);
+        output2.value = await compile(args);
         errorTwo.value = '';
       } catch (err) {
         errorTwo.value = formatErrorToDisplay(err);
@@ -178,8 +186,9 @@ export default component$(() => {
   useVisibleTask$(async ({ track }) => {
     track(code);
     track(outputOneFramework);
+    track(optionsOne);
     try {
-      await throttledCompileOne(code.value, outputOneFramework.value, inputSyntax.value);
+      await throttledCompileOne({code: code.value, output: outputOneFramework.value, inputSyntax: inputSyntax.value, outputOptions: optionsOne});
     } catch (err) {
       console.warn(err);
     }
@@ -188,8 +197,9 @@ export default component$(() => {
   useVisibleTask$(async ({ track }) => {
     track(code);
     track(outputTwoFramework);
+    track(optionsTwo);
     try {
-      await throttledCompileTwo(code.value, outputTwoFramework.value, inputSyntax.value);
+      await throttledCompileTwo({code: code.value, output: outputTwoFramework.value, inputSyntax: inputSyntax.value, outputOptions: optionsTwo});
     } catch (err) {
       console.warn(err);
     }
@@ -198,8 +208,12 @@ export default component$(() => {
   // Always reload on window refocus to ensure cloudflare workers are warm
   useVisibleTask$(({ cleanup }) => {
     const fn = () => {
-      throttledCompileOne(code.value, outputOneFramework.value, inputSyntax.value);
-      throttledCompileTwo(code.value, outputTwoFramework.value, inputSyntax.value);
+      throttledCompileOne({
+        code: code.value, output: outputOneFramework.value, inputSyntax: inputSyntax.value, outputOptions: optionsOne
+      });
+      throttledCompileTwo({
+        code: code.value, output: outputTwoFramework.value, inputSyntax: inputSyntax.value, outputOptions: optionsTwo
+      });
     };
     addEventListener('focus', fn);
     cleanup(() => {
@@ -220,11 +234,12 @@ export default component$(() => {
               class="ml-auto max-md:scale-[0.85] -my-2 max-md:-mr-1.5"
               value={inputSyntax.value}
               onChange$={(syntax: any) => {
-                compile(
-                  code.value,
-                  syntax === 'jsx' ? 'mitosis' : 'svelte',
-                  inputSyntax.value,
-                ).then((output) => {
+                compile({
+                code:  code.value,
+                  output: syntax === 'jsx' ? 'mitosis' : 'svelte',
+                  inputSyntax: inputSyntax.value,
+                
+                }).then((output) => {
                   code.value = output.replace(/\n?\n?import { useStore } from "..";\n?/g, '');
                   inputSyntax.value = syntax;
                 });
@@ -259,12 +274,16 @@ export default component$(() => {
           {visible.value && (
             // Workaround weird bug where this doesn't render correctly
             // server side
+<div class="ml-auto mr-2 max-md:scale-[0.85] mx-md:-my-2 max-md:-mr-1.5 flex gap-2 items-baseline">
+<OptionsModal options={optionsOne} target={outputOneFramework} />
             <Select
-              class="ml-auto mr-2 max-md:scale-[0.85] mx-md:-my-2 max-md:-mr-1.5"
               value={outputOneFramework.value}
-              onChange$={(framework: any) => (outputOneFramework.value = framework)}
+              onChange$={(framework: any) => {
+                 outputOneFramework.value = framework;
+                 Object.assign(optionsOne, getDefaultOptions(framework))
+              }}
               options={outputs}
-            />
+            /></div>
           )}
         </div>
         <div class="h-[50%] max-md:h-auto grow relative">
@@ -284,20 +303,27 @@ export default component$(() => {
             </div>
           )}
         </div>
-        <div class="min-h-[50px] max-md:min-h-[40px] max-md:hidden flex items-center border-primary border-opacity-50 border-t -mt-4 pt-4">
+        <div class={["min-h-[50px] max-md:min-h-[40px] max-md:hidden flex border-primary border-opacity-50 border-t -mt-4 pt-4", showSecondOutput.value ? '' : 'pb-4']}>
           {visible.value && (
             // Workaround weird bug where this doesn't render correctly
             // server side
+            <div class="ml-auto mr-2 md:mr-6 gap-2 flex  items-baseline">
+            <button class={'px-3 py-1.5 outline-0 rounded text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-990 bg-primary focus:ring-primary bg-opacity-10 border border-primary border-opacity-50 transition-colors duration-200 ease-in-out appearance-none'} onClick$={$(() => {
+              showSecondOutput.value = !showSecondOutput.value
+            })}>{showSecondOutput.value ? 'hide' : 'show'}</button>
+            <OptionsModal options={optionsTwo} target={outputTwoFramework} />
             <Select
-              class="ml-auto mr-2 md:mr-6"
               value={outputTwoFramework.value}
-              onChange$={(framework: any) => (outputTwoFramework.value = framework)}
+              onChange$={(framework: any) => {
+                outputTwoFramework.value = framework;
+                Object.assign(optionsTwo, getDefaultOptions(framework))
+              }}
               options={outputs}
-            />
+            /></div>
           )}
         </div>
 
-        <div class="h-[50%] relative max-md:hidden">
+        {showSecondOutput.value && <div class="h-[50%] relative max-md:hidden">
           <ContentLoaderCode
             width={400}
             class="ml-16 mt-3 opacity-10 origin-top-left max-md:scale-75 max-md:ml-4"
@@ -313,7 +339,7 @@ export default component$(() => {
               <ErrorWarning errorMessage={errorTwo.value} />
             </div>
           )}
-        </div>
+        </div>}
       </div>
     </div>
   );
diff --git a/packages/docs/src/services/compile.ts b/packages/docs/src/services/compile.ts
index d7cbfefede..9b6b1f6ea7 100644
--- a/packages/docs/src/services/compile.ts
+++ b/packages/docs/src/services/compile.ts
@@ -16,6 +16,7 @@ export type OutputFramework =
   | 'preact'
   | 'stencil'
   | 'alpine';
+
 export const outputs: OutputFramework[] = [
   'react',
   'svelte',
@@ -53,66 +54,34 @@ export const languageByFramework: Record<OutputFramework, string> = {
   alpine: 'html',
 };
 
-const getOutputGenerator = async ({ output }: { output: OutputFramework }) => {
-  const {
-    componentToSvelte,
-    componentToVue,
-    componentToReact,
-    componentToQwik,
-    componentToAngular,
-    componentToMitosis,
-    componentToAlpine,
-    componentToLit,
-    componentToMarko,
-    componentToPreact,
-    componentToReactNative,
-    componentToSolid,
-    componentToStencil,
-  } = await import('@builder.io/mitosis');
-
-  const options = {};
+const getOutputGenerator = async ({ output, options }: { output: OutputFramework, options: any }) => {
+  const { targets } = await import('@builder.io/mitosis');
 
   switch (output) {
-    case 'qwik':
-      return componentToQwik(options);
-    case 'react':
-      return componentToReact(options);
-    case 'angular':
-      return componentToAngular(options);
-    case 'svelte':
-      return componentToSvelte(options);
-    case 'mitosis':
-      return componentToMitosis();
-    case 'alpine':
-      return componentToAlpine();
-    case 'lit':
-      return componentToLit();
-    case 'marko':
-      return componentToMarko();
-    case 'preact':
-      return componentToPreact();
-    case 'reactNative':
-      return componentToReactNative();
-    case 'solid':
-      return componentToSolid();
-    case 'stencil':
-      return componentToStencil();
     case 'json':
       return ({ component }: { component: MitosisComponent }) => JSON.stringify(component, null, 2);
-    case 'vue':
-      return componentToVue({ api: 'composition' });
     default:
-      throw new Error('unexpected Output ' + output);
+      if (output in targets) {
+        return targets[output](options)
+      }
+
+      throw new Error(`unexpected output: \`${output}\`.`);
   }
 };
 
+export type CompileArgs = {
+  code: string, output: OutputFramework, inputSyntax: InputSyntax, outputOptions?: any
+}
+
 export const compile = server$(
-  async (code: string, output: OutputFramework, inputSyntax: InputSyntax) => {
+  async ({code, output, inputSyntax, outputOptions}: CompileArgs) => {
     const { parseJsx, parseSvelte } = await import('@builder.io/mitosis');
     const parsed = inputSyntax === 'svelte' ? await parseSvelte(code) : parseJsx(code);
 
-    const outputGenerator = await getOutputGenerator({ output });
+    const outputGenerator = await getOutputGenerator({ output, options: outputOptions });
 
+    console.log('getting generator with: ', {output, outputOptions});
+    
     const outputCode = outputGenerator({ component: parsed });
 
     return outputCode;

From c6b62f3765fd94e2971bd0dc3bebdd06e665ee2b Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Tue, 21 May 2024 10:51:51 -0400
Subject: [PATCH 2/3] f

---
 packages/docs/src/components/header.tsx        |  2 +-
 packages/docs/src/components/options-modal.tsx | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/docs/src/components/header.tsx b/packages/docs/src/components/header.tsx
index 10d20057ed..d28ebbcb01 100644
--- a/packages/docs/src/components/header.tsx
+++ b/packages/docs/src/components/header.tsx
@@ -40,7 +40,7 @@ export default component$(() => {
               alt="Mitosis logo"
               class="object-contain max-md:max-w-[110px]"
               width={160}
-              height={80}
+              height={40}
               src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0fdb9aabd10f4205b3b3b56d7b950239"
             />
           </Link>
diff --git a/packages/docs/src/components/options-modal.tsx b/packages/docs/src/components/options-modal.tsx
index b3c51d1dd9..98a9b547b9 100644
--- a/packages/docs/src/components/options-modal.tsx
+++ b/packages/docs/src/components/options-modal.tsx
@@ -1,5 +1,5 @@
 import { ToVueOptions } from '@builder.io/mitosis';
-import { $, Signal, component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { $, Signal, component$, useSignal } from '@builder.io/qwik';
 import { OutputFramework } from '~/services/compile';
 import Select from './select';
 
@@ -67,14 +67,7 @@ const getOptions = (target:OutputFramework) => {
 
 export default component$(
   ({options, target}: {    options: Options, target:Signal<OutputFramework> }) => {
-    const showModal = useSignal(true);
-
-    useVisibleTask$(() => {
-      if (target.value === 'angular') {
-        showModal.value = false
-      }
-    })
-
+    const showModal = useSignal(false);
 
 
     return (
@@ -83,7 +76,7 @@ export default component$(
         showModal.value = !showModal.value
       })} class={'px-3 py-1.5 outline-0 rounded text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-990 bg-primary focus:ring-primary bg-opacity-10 border border-primary border-opacity-50 transition-colors duration-200 ease-in-out appearance-none'}>options</button>
 
-      {showModal.value && <div class={"absolute top-40 bottom-40 left-40 right-40 bg-purple-990 z-50 p-10"}>
+      {showModal.value && <div class={"absolute top-40 bottom-40 left-40 right-40 bg-purple-990 z-50 p-10 max-w-2xl"}>
       <h1>{target.value} settings.</h1>
 
 <div class="w-full flex flex-col gap-4 pt-4">

From 4c4dde8359670d4c3ea66ddcefa01032ac5d4d31 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Tue, 21 May 2024 10:55:35 -0400
Subject: [PATCH 3/3] f

---
 packages/docs/src/components/options-modal.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/components/options-modal.tsx b/packages/docs/src/components/options-modal.tsx
index 98a9b547b9..d7394e9b1a 100644
--- a/packages/docs/src/components/options-modal.tsx
+++ b/packages/docs/src/components/options-modal.tsx
@@ -1,4 +1,4 @@
-import { ToVueOptions } from '@builder.io/mitosis';
+import { ToReactOptions, ToVueOptions } from '@builder.io/mitosis';
 import { $, Signal, component$, useSignal } from '@builder.io/qwik';
 import { OutputFramework } from '~/services/compile';
 import Select from './select';
@@ -37,7 +37,7 @@ export const getDefaultOptions = (target: OutputFramework) => {
 
 const _getOptions = (target:OutputFramework) => {
   switch (target) {
-    case 'vue':
+    case 'vue':{
       const o: Array<Option<ToVueOptions>> = [{
         name: 'casing',
         type: 'enum',
@@ -51,9 +51,19 @@ const _getOptions = (target:OutputFramework) => {
       default: 'composition'
     }]
 
-      return o
+      return o}
       
-  
+    case 'react': {
+
+    const o: Array<Option<ToReactOptions>> = [{
+      name: 'stylesType',
+      type: 'enum',
+      enum: [
+        'emotion', 'styled-components', 'styled-jsx', 'react-native', 'style-tag'
+      ],
+      default: 'style-tag'
+    }]
+ return o }
     default:
       return []
   }