Merge branch 'main' into docs-use-target-hook

README.MD

@@ -23,7 +23,7 @@
 
 ## Overview
 
-Mitosis provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.
+[Mitosis](https://mitosis.builder.io/docs/overview/) provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.
 
 Using Mitosis, you can:
 

packages/cli/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @builder.io/mitosis-cli
 
+## 0.4.5
+
+### Patch Changes
+
+- Updated dependencies [428b3ab]
+  - @builder.io/[email protected]
+
 ## 0.4.4
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.4.5
+
+### Patch Changes
+
+- 428b3ab: chore: update internal structure for generators and add more information for options and metadata
+
 ## 0.4.4
 
 ### Patch Changes

packages/core/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.4.4",
+  "version": "0.4.5",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

packages/core/src/generators/alpine/generate.ts

@@ -1,3 +1,4 @@
+import { ToAlpineOptions } from '@/generators/alpine/types';
 import { babelTransformCode } from '@/helpers/babel-transform';
 import { dashCase } from '@/helpers/dash-case';
 import { fastClone } from '@/helpers/fast-clone';
@@ -11,7 +12,7 @@ import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { collectCss } from '@/helpers/styles/collect-css';
 import { MitosisComponent } from '@/types/mitosis-component';
 import { checkIsForNode, ForNode, MitosisNode } from '@/types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
+import { TranspilerGenerator } from '@/types/transpiler';
 import { camelCase, flowRight as compose, curry, flow } from 'lodash';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
@@ -24,17 +25,6 @@ import {
 import { renderMountHook } from './render-mount-hook';
 import { hasRootUpdateHook, renderUpdateHooks } from './render-update-hooks';
 
-export interface ToAlpineOptions extends BaseTranspilerOptions {
-  /**
-   * use @on and : instead of `x-on` and `x-bind`
-   */
-  useShorthandSyntax?: boolean;
-  /**
-   * If true, the javascript won't be extracted into a separate script block.
-   */
-  inlineState?: boolean;
-}
-
 export const checkIsComponentNode = (node: MitosisNode): boolean =>
   node.name === '@builder.io/mitosis/component';
 

packages/core/src/generators/alpine/types.ts

@@ -0,0 +1,14 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToAlpineOptions extends BaseTranspilerOptions {
+  /**
+   * use @on and : instead of `x-on` and `x-bind`
+   */
+  useShorthandSyntax?: boolean;
+  /**
+   * If true, the javascript won't be extracted into a separate script block.
+   */
+  inlineState?: boolean;
+}
+
+export type AlpineMetadata = {};

packages/core/src/generators/angular/types.ts

@@ -19,8 +19,14 @@ export const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions = {
   visuallyIgnoreHostElement: true,
 };
 
-export interface AngularBlockOptions {
+export type AngularMetadata = {
+  /* Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding. 
+  If you want to skip some you can use the 'nativeAttributes'. */
+  nativeAttributes?: string[];
+  /* Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component) */
+  selector?: string;
+};
+
+export type AngularBlockOptions = {
   childComponents?: string[];
-  nativeAttributes?: string[]; // set by useMetadata (packages/core/src/types/metadata.ts)
-  selector?: string; // set by useMetadata (packages/core/src/types/metadata.ts)
-}
+} & AngularMetadata;

packages/core/src/generators/builder.ts → packages/core/src/generators/builder/generator.ts

@@ -1,31 +1,28 @@
+import { mediaQueryRegex, sizes } from '@/constants/media-sizes';
+import { ToBuilderOptions } from '@/generators/builder/types';
+import { dedent } from '@/helpers/dedent';
+import { fastClone } from '@/helpers/fast-clone';
+import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
+import { hasProps } from '@/helpers/has-props';
+import { isComponent } from '@/helpers/is-component';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { isUpperCase } from '@/helpers/is-upper-case';
+import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
 import { replaceNodes } from '@/helpers/replace-identifiers';
+import { checkHasState } from '@/helpers/state';
+import { isBuilderElement, symbolBlocksAsChildren } from '@/parsers/builder';
+import { hashCodeAsString } from '@/symbols/symbol-processor';
+import { ForNode, MitosisNode } from '@/types/mitosis-node';
+import { MitosisStyles } from '@/types/mitosis-styles';
+import { TranspilerArgs } from '@/types/transpiler';
 import { types } from '@babel/core';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 import json5 from 'json5';
 import { attempt, mapValues, omit, omitBy, set } from 'lodash';
 import traverse from 'neotraverse/legacy';
 import { format } from 'prettier/standalone';
-import { mediaQueryRegex, sizes } from '../constants/media-sizes';
-import { dedent } from '../helpers/dedent';
-import { fastClone } from '../helpers/fast-clone';
-import { filterEmptyTextNodes } from '../helpers/filter-empty-text-nodes';
-import { getStateObjectStringFromComponent } from '../helpers/get-state-object-string';
-import { hasProps } from '../helpers/has-props';
-import { isComponent } from '../helpers/is-component';
-import { isUpperCase } from '../helpers/is-upper-case';
-import { removeSurroundingBlock } from '../helpers/remove-surrounding-block';
-import { checkHasState } from '../helpers/state';
-import { isBuilderElement, symbolBlocksAsChildren } from '../parsers/builder';
-import { hashCodeAsString } from '../symbols/symbol-processor';
-import { ForNode, MitosisNode } from '../types/mitosis-node';
-import { MitosisStyles } from '../types/mitosis-styles';
-import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
-import { stringifySingleScopeOnMount } from './helpers/on-mount';
-
-export interface ToBuilderOptions extends BaseTranspilerOptions {
-  includeIds?: boolean;
-}
+import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 
 const omitMetaProperties = (obj: Record<string, any>) =>
   omitBy(obj, (_value, key) => key.startsWith('$'));

packages/core/src/generators/builder/index.ts

@@ -0,0 +1 @@
+export * from './generator';

packages/core/src/generators/builder/types.ts

@@ -0,0 +1,7 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToBuilderOptions extends BaseTranspilerOptions {
+  includeIds?: boolean;
+}
+
+export type BuilderMetadata = {};

packages/core/src/generators/html.ts → packages/core/src/generators/html/generator.ts

@@ -1,54 +1,50 @@
+import { ToHtmlOptions } from '@/generators/html/types';
 import { NodePath, types } from '@babel/core';
 import { pipe } from 'fp-ts/lib/function';
 import { camelCase, kebabCase } from 'lodash';
 import traverse from 'neotraverse/legacy';
 import { format } from 'prettier/standalone';
-import { SELF_CLOSING_HTML_TAGS } from '../constants/html_tags';
-import { babelTransformExpression } from '../helpers/babel-transform';
-import { dashCase } from '../helpers/dash-case';
-import { fastClone } from '../helpers/fast-clone';
-import { getPropFunctions } from '../helpers/get-prop-functions';
-import { getProps } from '../helpers/get-props';
-import { getPropsRef } from '../helpers/get-props-ref';
-import { getRefs } from '../helpers/get-refs';
-import { getStateObjectStringFromComponent } from '../helpers/get-state-object-string';
-import { hasBindingsText } from '../helpers/has-bindings-text';
-import { hasComponent } from '../helpers/has-component';
-import { hasProps } from '../helpers/has-props';
-import { hasStatefulDom } from '../helpers/has-stateful-dom';
-import isChildren from '../helpers/is-children';
-import { isComponent } from '../helpers/is-component';
-import { isHtmlAttribute } from '../helpers/is-html-attribute';
-import { isMitosisNode } from '../helpers/is-mitosis-node';
-import { mapRefs } from '../helpers/map-refs';
-import { initializeOptions } from '../helpers/merge-options';
-import { getForArguments } from '../helpers/nodes/for';
-import { removeSurroundingBlock } from '../helpers/remove-surrounding-block';
-import { renderPreComponent } from '../helpers/render-imports';
-import { stripMetaProperties } from '../helpers/strip-meta-properties';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
+import { babelTransformExpression } from '../../helpers/babel-transform';
+import { dashCase } from '../../helpers/dash-case';
+import { fastClone } from '../../helpers/fast-clone';
+import { getPropFunctions } from '../../helpers/get-prop-functions';
+import { getProps } from '../../helpers/get-props';
+import { getPropsRef } from '../../helpers/get-props-ref';
+import { getRefs } from '../../helpers/get-refs';
+import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
+import { hasBindingsText } from '../../helpers/has-bindings-text';
+import { hasComponent } from '../../helpers/has-component';
+import { hasProps } from '../../helpers/has-props';
+import { hasStatefulDom } from '../../helpers/has-stateful-dom';
+import isChildren from '../../helpers/is-children';
+import { isComponent } from '../../helpers/is-component';
+import { isHtmlAttribute } from '../../helpers/is-html-attribute';
+import { isMitosisNode } from '../../helpers/is-mitosis-node';
+import { mapRefs } from '../../helpers/map-refs';
+import { initializeOptions } from '../../helpers/merge-options';
+import { getForArguments } from '../../helpers/nodes/for';
+import { removeSurroundingBlock } from '../../helpers/remove-surrounding-block';
+import { renderPreComponent } from '../../helpers/render-imports';
+import { stripMetaProperties } from '../../helpers/strip-meta-properties';
 import {
   DO_NOT_USE_ARGS,
   DO_NOT_USE_CONTEXT_VARS_TRANSFORMS,
   DO_NOT_USE_VARS_TRANSFORMS,
   StripStateAndPropsRefsOptions,
   stripStateAndPropsRefs,
-} from '../helpers/strip-state-and-props-refs';
-import { collectCss } from '../helpers/styles/collect-css';
+} from '../../helpers/strip-state-and-props-refs';
+import { collectCss } from '../../helpers/styles/collect-css';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../modules/plugins';
-import { MitosisComponent } from '../types/mitosis-component';
-import { MitosisNode, checkIsForNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
-import { stringifySingleScopeOnMount } from './helpers/on-mount';
-
-export interface ToHtmlOptions extends BaseTranspilerOptions {
-  format?: 'class' | 'script';
-  prefix?: string;
-}
+} from '../../modules/plugins';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode, checkIsForNode } from '../../types/mitosis-node';
+import { TranspilerGenerator } from '../../types/transpiler';
+import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 
 type ScopeVars = Array<string>;
 type StringRecord = { [key: string]: string };

packages/core/src/generators/html/index.ts

@@ -0,0 +1 @@
+export * from './generator';

packages/core/src/generators/html/types.ts

@@ -0,0 +1,8 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToHtmlOptions extends BaseTranspilerOptions {
+  format?: 'class' | 'script';
+  prefix?: string;
+}
+
+export type HtmlMetadata = {};

packages/core/src/generators/liquid.ts → packages/core/src/generators/liquid/generator.ts

@@ -1,22 +1,19 @@
+import { ToLiquidOptions } from '@/generators/liquid/types';
 import { format } from 'prettier/standalone';
-import { SELF_CLOSING_HTML_TAGS } from '../constants/html_tags';
-import { fastClone } from '../helpers/fast-clone';
-import { getStateObjectStringFromComponent } from '../helpers/get-state-object-string';
-import { stripMetaProperties } from '../helpers/strip-meta-properties';
-import { stripStateAndPropsRefs } from '../helpers/strip-state-and-props-refs';
-import { collectCss } from '../helpers/styles/collect-css';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
+import { fastClone } from '../../helpers/fast-clone';
+import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
+import { stripMetaProperties } from '../../helpers/strip-meta-properties';
+import { stripStateAndPropsRefs } from '../../helpers/strip-state-and-props-refs';
+import { collectCss } from '../../helpers/styles/collect-css';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../modules/plugins';
-import { MitosisNode, checkIsForNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
-
-export interface ToLiquidOptions extends BaseTranspilerOptions {
-  reactive?: boolean;
-}
+} from '../../modules/plugins';
+import { MitosisNode, checkIsForNode } from '../../types/mitosis-node';
+import { TranspilerGenerator } from '../../types/transpiler';
 
 /**
  * Test if the binding expression would be likely to generate

packages/core/src/generators/liquid/index.ts

@@ -0,0 +1 @@
+export * from './generator';

packages/core/src/generators/liquid/types.ts

@@ -0,0 +1,7 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToLiquidOptions extends BaseTranspilerOptions {
+  reactive?: boolean;
+}
+
+export type LiquidMetadata = {};

packages/core/src/generators/lit/generate.ts

@@ -1,3 +1,4 @@
+import { ToLitOptions } from '@/generators/lit/types';
 import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
@@ -15,7 +16,7 @@ import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { collectCss } from '@/helpers/styles/collect-css';
 import { checkIsForNode, MitosisNode } from '@/types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
+import { TranspilerGenerator } from '@/types/transpiler';
 import { camelCase, some } from 'lodash';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
@@ -42,10 +43,6 @@ const getCustomTagName = (name: string, options: ToLitOptions) => {
   return kebabCaseName;
 };
 
-export interface ToLitOptions extends BaseTranspilerOptions {
-  useShadowDom?: boolean;
-}
-
 const blockToLit = (json: MitosisNode, options: ToLitOptions = {}): string => {
   if (json.properties._text) {
     return json.properties._text;

packages/core/src/generators/lit/types.ts

@@ -0,0 +1,10 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToLitOptions extends BaseTranspilerOptions {
+  /**
+   * Enabled shadowDOM for generated lit components. Default: enabled
+   */
+  useShadowDom?: boolean;
+}
+
+export type LitMetadata = {};

packages/core/src/generators/marko/generate.ts

@@ -1,3 +1,5 @@
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
+import { ToMarkoOptions } from '@/generators/marko/types';
 import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
@@ -13,23 +15,20 @@ import { renderPreComponent } from '@/helpers/render-imports';
 import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { collectCss } from '@/helpers/styles/collect-css';
-import { MitosisComponent } from '@/types/mitosis-component';
-import { checkIsForNode, MitosisNode } from '@/types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
-import hash from 'hash-sum';
-import { camelCase } from 'lodash';
-import { format } from 'prettier/standalone';
-import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../../modules/plugins';
+} from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
+import hash from 'hash-sum';
+import { camelCase } from 'lodash';
+import { format } from 'prettier/standalone';
 import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 
-export interface ToMarkoOptions extends BaseTranspilerOptions {}
-
 interface InternalToMarkoOptions extends ToMarkoOptions {
   component: MitosisComponent;
 }

packages/core/src/generators/marko/types.ts

@@ -0,0 +1,5 @@
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export interface ToMarkoOptions extends BaseTranspilerOptions {}
+
+export type MarkoMetadata = {};