Fix: build (#1375)

* fixerooni

* f

* cleaner true bool binding

* strip true prop

* f

* f

* f

Author: samijaber

.changeset/clever-dragons-ring.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Fix: improve imports so mitosis can be built in browser easily

.tool-versions

@@ -1 +1 @@
-nodejs lts-gallium
+nodejs 18.17.0

packages/core/src/helpers/component-file-extensions.ts

@@ -1,4 +1,5 @@
-import { checkShouldOutputTypeScript, MitosisConfig, Target } from '@builder.io/mitosis';
+import { MitosisConfig, Target } from '@/types/config';
+import { checkShouldOutputTypeScript } from './output';
 
 const COMPONENT_EXTENSIONS = {
   jsx: ['.lite.tsx', '.lite.jsx'],

packages/core/src/parsers/builder/builder.ts

@@ -1,10 +1,12 @@
+import { blockToMitosis } from '@/generators/mitosis';
+import { hashCodeAsString } from '@/symbols/symbol-processor';
+import { MitosisComponent, MitosisState } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
 import generate from '@babel/generator';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 import json5 from 'json5';
 import { mapKeys, merge, omit, omitBy, sortBy, upperFirst } from 'lodash';
 import traverse from 'traverse';
-import { MitosisComponent, MitosisState, blockToMitosis, hashCodeAsString } from '../..';
 import { Size, sizeNames, sizes } from '../../constants/media-sizes';
 import { createSingleBinding } from '../../helpers/bindings';
 import { capitalize } from '../../helpers/capitalize';

packages/core/src/parsers/jsx/hooks/use-target.ts

@@ -1,8 +1,32 @@
+import type { Target } from '@/types/config';
 import * as babel from '@babel/core';
 import generate from '@babel/generator';
-import { targets } from '../../../targets';
 import { MitosisComponent, TargetBlockDefinition } from '../../../types/mitosis-component';
 
+const TARGETS: Record<Target, null> = {
+  alpine: null,
+  angular: null,
+  customElement: null,
+  html: null,
+  mitosis: null,
+  liquid: null,
+  react: null,
+  reactNative: null,
+  solid: null,
+  svelte: null,
+  swift: null,
+  template: null,
+  webcomponent: null,
+  vue: null,
+  stencil: null,
+  qwik: null,
+  marko: null,
+  preact: null,
+  lit: null,
+  rsc: null,
+  taro: null,
+};
+
 const { types } = babel;
 
 export const getTargetId = (component: MitosisComponent) => {
@@ -62,7 +86,7 @@ export const getUseTargetStatements = (path: babel.NodePath<babel.types.CallExpr
       );
     }
 
-    if (!Object.keys(targets).concat('default').includes(prop.key.name)) {
+    if (!Object.keys(TARGETS).concat('default').includes(prop.key.name)) {
       throw new Error('ERROR Parsing `useTarget()`: Invalid target: ' + prop.key.name);
     }
     const keyName = prop.key.name as unknown as 'default';

packages/core/src/parsers/jsx/state.ts

@@ -1,5 +1,5 @@
 import * as babel from '@babel/core';
-import generate from '@babel/generator';
+// import generate from '@babel/generator';
 import { MitosisNode } from '@builder.io/mitosis';
 import { pipe } from 'fp-ts/lib/function';
 import traverse from 'traverse';
@@ -52,12 +52,14 @@ function mapStateIdentifiersInExpression(expression: string, stateProperties: st
             try {
               path.replaceWith(newExpression);
             } catch (err) {
-              console.log('err: ', {
-                from: generate(path.parent).code,
-                fromChild: generate(path.node).code,
-                to: newExpression,
-                // err,
-              });
+              console.error(err);
+
+              // console.log('err: ', {
+              //   from: generate(path.parent).code,
+              //   fromChild: generate(path.node).code,
+              //   to: newExpression,
+              //   // err,
+              // });
             }
           }
         }