From 20ad8dc26c9aa43503dff8f6dd051e27d3d9b808 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:59:17 +0100
Subject: [PATCH 1/7] fix: angular native events vs. custom events (#1657)

* fix: angular native events vs. custom events

* fix: issue with linting

* chore: update snapshots

* Update .changeset/polite-pugs-pull.md

---------

Co-authored-by: Sami Jaber <me@sami.website>
---
 .changeset/polite-pugs-pull.md                |  31 +++++
 .../__snapshots__/angular.import.test.ts.snap |   8 +-
 .../__snapshots__/angular.mapper.test.ts.snap |   8 +-
 .../__snapshots__/angular.state.test.ts.snap  |   8 +-
 .../__snapshots__/angular.styles.test.ts.snap |   8 +-
 .../__snapshots__/angular.test.ts.snap        |  16 ++-
 .../angular/output-event-bindings.raw.tsx     |  10 +-
 .../core/src/generators/alpine/generate.ts    |  17 +--
 packages/core/src/generators/angular/index.ts |  28 +++--
 packages/core/src/generators/angular/types.ts |  15 ++-
 packages/core/src/generators/helpers/rsc.ts   |   3 +-
 .../core/src/generators/html/generator.ts     |  70 +++++------
 .../core/src/generators/liquid/generator.ts   |   3 +-
 packages/core/src/generators/lit/generate.ts  |   3 +-
 .../core/src/generators/marko/generate.ts     |   3 +-
 .../core/src/generators/mitosis/generator.ts  |  32 ++---
 .../qwik/helpers/add-prevent-default.ts       |   7 +-
 .../src/generators/qwik/helpers/handlers.ts   |   3 +-
 .../core/src/generators/qwik/src-generator.ts |   3 +-
 packages/core/src/generators/react/blocks.ts  |   3 +-
 packages/core/src/generators/solid/blocks.ts  |   3 +-
 .../src/generators/stencil/helpers/index.ts   |   3 +-
 packages/core/src/generators/svelte/blocks.ts |   5 +-
 .../core/src/generators/swift/generator.ts    |   3 +-
 .../core/src/generators/template/generator.ts |   3 +-
 packages/core/src/generators/vue/blocks.ts    |   5 +-
 packages/core/src/helpers/event-handlers.ts   | 111 +++++++++++++++++-
 packages/core/src/helpers/is-children.ts      |   2 +-
 28 files changed, 314 insertions(+), 100 deletions(-)
 create mode 100644 .changeset/polite-pugs-pull.md

diff --git a/.changeset/polite-pugs-pull.md b/.changeset/polite-pugs-pull.md
new file mode 100644
index 0000000000..a15e74df56
--- /dev/null
+++ b/.changeset/polite-pugs-pull.md
@@ -0,0 +1,31 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[angular]: Fix issue with events forced to become `toLowerCase()`.
+
+Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase. 
+[DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
+
+Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.
+
+If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`:
+
+```tsx
+import { useMetadata } from '@builder.io/mitosis';
+
+useMetadata({
+  angular: {
+    nativeEvents: ['onNativeEvent'],
+  },
+});
+
+export default function MyComponent(props) {
+  return (
+    <div>
+      <input onNativeEvent={(event) => console.log(event)} />
+      Hello!
+    </div>
+  );
+}
+```
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 6eeb8de867..5587defbd3 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5242,7 +5242,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13012,7 +13014,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index fa0867c783..0fa4c40421 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5327,7 +5327,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13225,7 +13227,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 70b083603c..de23dc6e71 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5442,7 +5442,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13489,7 +13491,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index b00b71c8cf..48f5cc8285 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -4703,7 +4703,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -11667,7 +11669,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index daccb367f9..7c285bc01d 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -9868,7 +9868,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9906,7 +9908,9 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -24494,7 +24498,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -24532,7 +24538,9 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx b/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
index d2fc81aa76..34095f04cc 100644
--- a/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
+++ b/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
@@ -1,4 +1,10 @@
-import { useState } from '@builder.io/mitosis';
+import { useMetadata, useState } from '@builder.io/mitosis';
+
+useMetadata({
+  angular: {
+    nativeEvents: ['onFakeNative'],
+  },
+});
 
 export default function MyComponent(props) {
   const [name, setName] = useState('Steve');
@@ -9,6 +15,8 @@ export default function MyComponent(props) {
         value={name}
         onChange={(event) => setName(event.target.value)}
         onChangeOrSomething={(event) => setName(event.target.value)}
+        onFakeNative={(event) => setName(event.target.value)}
+        onAnimationEnd={(event) => setName(event.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index f0a55519cb..93d11d9c11 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -1,6 +1,8 @@
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToAlpineOptions } from '@/generators/alpine/types';
 import { babelTransformCode } from '@/helpers/babel-transform';
 import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { getRefs } from '@/helpers/get-refs';
 import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
@@ -10,18 +12,17 @@ import { replaceIdentifiers } from '@/helpers/replace-identifiers';
 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, ForNode, MitosisNode } from '@/types/mitosis-node';
-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';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../../modules/plugins';
+} from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { ForNode, MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
+import { camelCase, flowRight as compose, curry, flow } from 'lodash';
+import { format } from 'prettier/standalone';
 import { renderMountHook } from './render-mount-hook';
 import { hasRootUpdateHook, renderUpdateHooks } from './render-update-hooks';
 
@@ -167,7 +168,7 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = {
     // TODO: proper babel transform to replace. Util for this
     const useValue = stripStateAndPropsRefs(value);
 
-    if (key.startsWith('on')) {
+    if (checkIsEvent(key)) {
       str += bindEventHandler(options)(key, value);
     } else if (key === 'ref') {
       str += ` x-ref="${useValue}"`;
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index b31710901d..20bd23ecf9 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -63,6 +63,7 @@ import {
   ToAngularOptions,
 } from './types';
 
+import { checkIsBindingNativeEvent, checkIsEvent } from '@/helpers/event-handlers';
 import { parse } from './parse-selector';
 
 const { types } = babel;
@@ -226,10 +227,20 @@ const stringifyBinding =
     const { code, arguments: cusArgs = ['event'] } = binding!;
     // TODO: proper babel transform to replace. Util for this
 
-    if (keyToUse.startsWith('on')) {
+    if (checkIsEvent(keyToUse)) {
       const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-      // Angular events are all lowerCased
-      return ` (${event.toLowerCase()})="${value}"`;
+
+      // native events are all lowerCased
+      const lowerCaseEvent = event.toLowerCase();
+      const eventKey =
+        checkIsBindingNativeEvent(event) ||
+        blockOptions.nativeEvents?.find(
+          (nativeEvent) =>
+            nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent,
+        )
+          ? lowerCaseEvent
+          : event;
+      return ` (${eventKey})="${value}"`;
     } else if (keyToUse === 'class') {
       return ` [class]="${code}" `;
     } else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
@@ -281,7 +292,7 @@ const handleNgOutletBindings = (node: MitosisNode, options: ToAngularOptions) =>
     let keyToUse = key.includes('-') ? `'${key}'` : key;
     keyToUse = keyToUse.replace('state.', '').replace('props.', '');
 
-    if (key.startsWith('on')) {
+    if (checkIsEvent(key)) {
       const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
       allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(
         /\(.*?\)/g,
@@ -311,6 +322,7 @@ export const blockToAngular = ({
   options = {},
   blockOptions = {
     nativeAttributes: [],
+    nativeEvents: [],
   },
 }: {
   root: MitosisComponent;
@@ -659,7 +671,7 @@ const handleBindings = (
       if (item.name === 'For') continue;
       if (key === 'key') continue;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         const { arguments: cusArgs = ['event'] } = item.bindings[key]!;
         const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
         if (
@@ -691,7 +703,7 @@ const handleBindings = (
         })`;
       }
     } else if (item.bindings[key]?.code) {
-      if (item.bindings[key]?.type !== 'spread' && !key.startsWith('on')) {
+      if (item.bindings[key]?.type !== 'spread' && !checkIsEvent(key)) {
         json.state[newBindingName] = { code: 'null', type: 'property' };
         makeReactiveState(
           json,
@@ -699,7 +711,7 @@ const handleBindings = (
           `this.${newBindingName} = ${item.bindings[key]!.code}`,
         );
         item.bindings[key]!.code = `state.${newBindingName}`;
-      } else if (key.startsWith('on')) {
+      } else if (checkIsEvent(key)) {
         const { arguments: cusArgs = ['event'] } = item.bindings[key]!;
         if (
           item.bindings[key]?.code.trim().startsWith('{') &&
@@ -941,6 +953,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
           blockOptions: {
             childComponents,
             nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
+            nativeEvents: useMetadata?.angular?.nativeEvents ?? [],
           },
         });
         if (options.state === 'inline-with-wrappers') {
@@ -964,6 +977,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       {
         childComponents,
         nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
+        nativeEvents: useMetadata?.angular?.nativeEvents ?? [],
       },
     );
 
diff --git a/packages/core/src/generators/angular/types.ts b/packages/core/src/generators/angular/types.ts
index ac4ef1cec2..9baa5e67e2 100644
--- a/packages/core/src/generators/angular/types.ts
+++ b/packages/core/src/generators/angular/types.ts
@@ -26,10 +26,19 @@ export const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions = {
 };
 
 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'. */
+  /**
+   * 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) */
+  /**
+   * If you encounter some native events which aren't generated in lower-case.
+   * Create a new PR inside [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) to fix it for all.
+   */
+  nativeEvents?: string[];
+  /**
+   * Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component)
+   */
   selector?: string;
 };
 
diff --git a/packages/core/src/generators/helpers/rsc.ts b/packages/core/src/generators/helpers/rsc.ts
index 0b25b4f07c..a88dd8a7bb 100644
--- a/packages/core/src/generators/helpers/rsc.ts
+++ b/packages/core/src/generators/helpers/rsc.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import type { MitosisComponent } from '@/types/mitosis-component';
 import type { MitosisNode } from '@/types/mitosis-node';
@@ -18,7 +19,7 @@ export const checkIfIsClientComponent = (json: MitosisComponent) => {
   let foundEventListener = false;
   traverse(json).forEach(function (node) {
     if (isMitosisNode(node) && !checkIsNodeAMitosisComponent(node)) {
-      if (Object.keys(node.bindings).filter((item) => item.startsWith('on')).length) {
+      if (Object.keys(node.bindings).filter((item) => checkIsEvent(item)).length) {
         foundEventListener = true;
         this.stop();
       }
diff --git a/packages/core/src/generators/html/generator.ts b/packages/core/src/generators/html/generator.ts
index a23ca9ed25..911d4f42cf 100644
--- a/packages/core/src/generators/html/generator.ts
+++ b/packages/core/src/generators/html/generator.ts
@@ -1,48 +1,50 @@
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 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 { 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 { babelTransformExpression } from '@/helpers/babel-transform';
+import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
+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 { 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 { TranspilerGenerator } from '../../types/transpiler';
+} from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
+import { NodePath, types } from '@babel/core';
+import { pipe } from 'fp-ts/lib/function';
+import { camelCase, kebabCase } from 'lodash';
+import traverse from 'neotraverse/legacy';
+
+import isChildren from '@/helpers/is-children';
+import { format } from 'prettier/standalone';
 import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 
 type ScopeVars = Array<string>;
@@ -424,7 +426,7 @@ const blockToHtml = (
       // TODO: proper babel transform to replace. Util for this
       const useValue = value;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         let event = key.replace('on', '').toLowerCase();
         const fnName = camelCase(`on-${elId}-${event}`);
         const codeContent: string = removeSurroundingBlock(
diff --git a/packages/core/src/generators/liquid/generator.ts b/packages/core/src/generators/liquid/generator.ts
index a2392e7ebf..bf9a43a0b2 100644
--- a/packages/core/src/generators/liquid/generator.ts
+++ b/packages/core/src/generators/liquid/generator.ts
@@ -1,4 +1,5 @@
 import { ToLiquidOptions } from '@/generators/liquid/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { fastClone } from '../../helpers/fast-clone';
@@ -113,7 +114,7 @@ const blockToLiquid = (json: MitosisNode, options: ToLiquidOptions = {}): string
       // TODO: proper babel transform to replace. Util for this
       const useValue = stripStateAndPropsRefs(value);
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         // Do nothing
       } else if (isValidLiquidBinding(useValue)) {
         str += ` ${key}="{{${useValue}}}" `;
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index a61b5be276..ace3cab4eb 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -1,6 +1,7 @@
 import { ToLitOptions } from '@/generators/lit/types';
 import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { getProps } from '@/helpers/get-props';
@@ -92,7 +93,7 @@ const blockToLit = (json: MitosisNode, options: ToLitOptions = {}): string => {
       // TODO: maybe use ref directive instead
       // https://lit.dev/docs/templates/directives/#ref
       str += ` ref="${code}" `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       const useKey = '@' + key.substring(2).toLowerCase();
 
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 257ac43b73..edd79ab8d8 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -2,6 +2,7 @@ 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 { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { getRefs } from '@/helpers/get-refs';
@@ -90,7 +91,7 @@ const blockToMarko = (json: MitosisNode, options: InternalToMarkoOptions): strin
       str += ` ...(${code}) `;
     } else if (key === 'ref') {
       str += ` key="${camelCase(code)}" `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const asyncKeyword = async ? 'async ' : '';
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
       str += ` ${dashCase(useKey)}=(${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(
diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts
index 6dc1770eb5..98998f4f06 100644
--- a/packages/core/src/generators/mitosis/generator.ts
+++ b/packages/core/src/generators/mitosis/generator.ts
@@ -1,27 +1,29 @@
+import { HOOKS } from '@/constants/hooks';
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToMitosisOptions } from '@/generators/mitosis/types';
+import { dedent } from '@/helpers/dedent';
+import { checkIsEvent } from '@/helpers/event-handlers';
+import { fastClone } from '@/helpers/fast-clone';
+import { getComponents } from '@/helpers/get-components';
+import { getRefs } from '@/helpers/get-refs';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { isRootTextNode } from '@/helpers/is-root-text-node';
+import { mapRefs } from '@/helpers/map-refs';
+import { renderPreComponent } from '@/helpers/render-imports';
+import { checkHasState } from '@/helpers/state';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode, checkIsForNode, checkIsShowNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
 import json5 from 'json5';
 import { format } from 'prettier/standalone';
-import { HOOKS } from '../../constants/hooks';
-import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
-import { dedent } from '../../helpers/dedent';
-import { fastClone } from '../../helpers/fast-clone';
-import { getComponents } from '../../helpers/get-components';
-import { getRefs } from '../../helpers/get-refs';
-import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
-import { isRootTextNode } from '../../helpers/is-root-text-node';
-import { mapRefs } from '../../helpers/map-refs';
-import { renderPreComponent } from '../../helpers/render-imports';
-import { checkHasState } from '../../helpers/state';
-import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode, checkIsForNode, checkIsShowNode } from '../../types/mitosis-node';
-import { TranspilerGenerator } from '../../types/transpiler';
+
 import { blockToReact, componentToReact } from '../react';
 
 export const DEFAULT_FORMAT: ToMitosisOptions['format'] = 'legacy';
@@ -144,7 +146,7 @@ export const blockToMitosis = (
 
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${json.bindings[key]?.code})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const { arguments: cusArgs = ['event'], async } = json.bindings[key]!;
       const asyncKeyword = async ? 'async ' : '';
       str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${value.replace(/\s*;$/, '')}} `;
diff --git a/packages/core/src/generators/qwik/helpers/add-prevent-default.ts b/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
index 72776ca000..1592b9c757 100644
--- a/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
+++ b/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
@@ -1,6 +1,7 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
+import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { MitosisComponent } from '@/types/mitosis-component';
 import traverse from 'neotraverse/legacy';
-import { isMitosisNode } from '../../../helpers/is-mitosis-node';
-import { MitosisComponent } from '../../../types/mitosis-component';
 
 /**
  * Find event handlers that explicitly call .preventDefault() and
@@ -12,7 +13,7 @@ export function addPreventDefault(json: MitosisComponent) {
     if (isMitosisNode(node)) {
       if (node.bindings) {
         for (const key of Object.keys(node.bindings)) {
-          if (key.startsWith('on')) {
+          if (checkIsEvent(key)) {
             if (node.bindings[key]?.code.includes('.preventDefault()')) {
               const event = key.slice(2).toLowerCase();
               node.properties['preventdefault:' + event] = '';
diff --git a/packages/core/src/generators/qwik/helpers/handlers.ts b/packages/core/src/generators/qwik/helpers/handlers.ts
index 24abda603d..a4fdcfddd2 100644
--- a/packages/core/src/generators/qwik/helpers/handlers.ts
+++ b/packages/core/src/generators/qwik/helpers/handlers.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { MitosisNode } from '../../../types/mitosis-node';
 import { renderUseLexicalScope } from '../component';
 import { arrowFnBlock, EmitFn, File, SrcBuilder } from '../src-generator';
@@ -61,5 +62,5 @@ function renderHandler(file: File, symbol: string, code: string) {
 }
 
 function isEventName(name: string) {
-  return name.startsWith('on') && name.charAt(2).toUpperCase() == name.charAt(2);
+  return checkIsEvent(name) && name.charAt(2).toUpperCase() == name.charAt(2);
 }
diff --git a/packages/core/src/generators/qwik/src-generator.ts b/packages/core/src/generators/qwik/src-generator.ts
index 5db00c84c0..abbf04ddd5 100644
--- a/packages/core/src/generators/qwik/src-generator.ts
+++ b/packages/core/src/generators/qwik/src-generator.ts
@@ -1,6 +1,7 @@
 import parserTypeScript from 'prettier/parser-typescript';
 import { format } from 'prettier/standalone';
 
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { convertExportDefaultToReturn } from '../../parsers/builder';
 import { stableJSONserialize } from './helpers/stable-serialize';
@@ -424,7 +425,7 @@ export class SrcBuilder {
 }
 
 function isEvent(name: string): boolean {
-  return name.startsWith('on') && isUppercase(name.charAt(2)) && !name.endsWith('$');
+  return checkIsEvent(name) && isUppercase(name.charAt(2)) && !name.endsWith('$');
 }
 
 function isUppercase(ch: string): boolean {
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 3d7fc3736e..40dc24b97d 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import isChildren from '@/helpers/is-children';
 import { isRootTextNode } from '@/helpers/is-root-text-node';
@@ -296,7 +297,7 @@ export const blockToReact = (
     }
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${value})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       const { arguments: cusArgs = ['event'] } = json.bindings[key]!;
       const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
diff --git a/packages/core/src/generators/solid/blocks.ts b/packages/core/src/generators/solid/blocks.ts
index 3f6e2f0039..8f3b57741d 100644
--- a/packages/core/src/generators/solid/blocks.ts
+++ b/packages/core/src/generators/solid/blocks.ts
@@ -1,4 +1,5 @@
 import { babelTransformExpression } from '@/helpers/babel-transform';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { objectHasKey } from '@/helpers/typescript';
@@ -89,7 +90,7 @@ export const blockToSolid = (
 
     if (type === 'spread') {
       str += ` {...(${code})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index 61c5bb06bd..f4dd441239 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -1,11 +1,12 @@
 import { ToStencilOptions } from '@/generators/stencil/types';
 import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { renderPreComponent } from '@/helpers/render-imports';
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { MitosisComponent, MitosisState } from '@/types/mitosis-component';
 import { MitosisNode } from '@/types/mitosis-node';
 
-export const isEvent = (key: string): boolean => key.startsWith('on');
+export const isEvent = (key: string): boolean => checkIsEvent(key);
 
 /**
  * We need to "emit" events those can be on multiple places, so we do it as post step
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index ae492cfbe1..7fe2388256 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -1,4 +1,5 @@
 import { createSingleBinding } from '@/helpers/bindings';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import isChildren from '@/helpers/is-children';
 import { isUpperCase } from '@/helpers/is-upper-case';
 import { getForArguments } from '@/helpers/nodes/for';
@@ -222,7 +223,7 @@ const stringifyBinding =
     if (type === 'spread') {
       const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
-    } else if (key.startsWith('on') && isValidHtmlTag) {
+    } else if (checkIsEvent(key) && isValidHtmlTag) {
       const { async } = binding;
       // handle html native on[event] props
       const event = key.replace('on', '').toLowerCase();
@@ -236,7 +237,7 @@ const stringifyBinding =
         const asyncKeyword = async ? 'async ' : '';
         return ` on:${event}="{${asyncKeyword}(${cusArgs.join(',')}) => {${valueWithoutBlock}}}" `;
       }
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       // handle on[custom event] props
       const valueWithoutBlock = removeSurroundingBlock(code);
 
diff --git a/packages/core/src/generators/swift/generator.ts b/packages/core/src/generators/swift/generator.ts
index 5e9370c853..af7a87ee47 100644
--- a/packages/core/src/generators/swift/generator.ts
+++ b/packages/core/src/generators/swift/generator.ts
@@ -1,4 +1,5 @@
 import { ToSwiftOptions } from '@/generators/swift/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import traverse from 'neotraverse/legacy';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
@@ -149,7 +150,7 @@ const blockToSwift = (json: MitosisNode, options: ToSwiftOptions): string => {
         continue;
       }
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         if (key === 'onClick') {
           continue;
         } else {
diff --git a/packages/core/src/generators/template/generator.ts b/packages/core/src/generators/template/generator.ts
index 9c8325d4e1..4877477662 100644
--- a/packages/core/src/generators/template/generator.ts
+++ b/packages/core/src/generators/template/generator.ts
@@ -1,4 +1,5 @@
 import { ToTemplateOptions } from '@/generators/template/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { dedent } from '../../helpers/dedent';
@@ -76,7 +77,7 @@ const blockToTemplate = (json: MitosisNode, options: ToTemplateOptions = {}) =>
       // TODO: proper babel transform to replace. Util for this
       const useValue = value;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         // Do nothing
       } else {
         str += ` ${key}="\${${useValue}}" `;
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 639e7854f1..0f6f7e89fa 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -1,4 +1,5 @@
 import { createSingleBinding } from '@/helpers/bindings';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import isChildren from '@/helpers/is-children';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
@@ -130,7 +131,7 @@ const stringifyBinding =
       // TODO: proper babel transform to replace. Util for this
       const useValue = value?.code || '';
 
-      if (key.startsWith('on') && isValidHtmlTag) {
+      if (checkIsEvent(key) && isValidHtmlTag) {
         // handle html native on[event] props
         const { arguments: cusArgs = ['event'], async } = value;
         let event = key.replace('on', '').toLowerCase();
@@ -154,7 +155,7 @@ const stringifyBinding =
         const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
 
         return `${eventHandlerKey}="${eventHandlerValue}"`;
-      } else if (key.startsWith('on')) {
+      } else if (checkIsEvent(key)) {
         // handle on[custom event] props
         const { arguments: cusArgs = ['event'] } = node.bindings[key]!;
         return `:${key}="(${cusArgs.join(',')}) => ${encodeQuotes(useValue)}"`;
diff --git a/packages/core/src/helpers/event-handlers.ts b/packages/core/src/helpers/event-handlers.ts
index d263630434..0f938db322 100644
--- a/packages/core/src/helpers/event-handlers.ts
+++ b/packages/core/src/helpers/event-handlers.ts
@@ -1 +1,110 @@
-export const checkIsBindingEventHandler = (code: string) => code.startsWith('on');
+export const checkIsEvent = (code: string) => code.startsWith('on');
+
+const nativeEvents = [
+  'abort',
+  'animationcancel',
+  'animationend',
+  'animationiteration',
+  'animationstart',
+  'auxclick',
+  'beforeinput',
+  'beforetoggle',
+  'blur',
+  'cancel',
+  'canplay',
+  'canplaythrough',
+  'change',
+  'click',
+  'close',
+  'compositionend',
+  'compositionstart',
+  'compositionupdate',
+  'contextlost',
+  'contextmenu',
+  'contextrestored',
+  'copy',
+  'cuechange',
+  'cut',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'dragstart',
+  'drop',
+  'durationchange',
+  'emptied',
+  'ended',
+  'error',
+  'focus',
+  'focusin',
+  'focusout',
+  'formdata',
+  'gotpointercapture',
+  'input',
+  'invalid',
+  'keydown',
+  'keypress',
+  'keyup',
+  'load',
+  'loadeddata',
+  'loadedmetadata',
+  'loadstart',
+  'lostpointercapture',
+  'mousedown',
+  'mouseenter',
+  'mouseleave',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'paste',
+  'pause',
+  'play',
+  'playing',
+  'pointercancel',
+  'pointerdown',
+  'pointerenter',
+  'pointerleave',
+  'pointermove',
+  'pointerout',
+  'pointerover',
+  'pointerup',
+  'progress',
+  'ratechange',
+  'reset',
+  'resize',
+  'scroll',
+  'scrollend',
+  'securitypolicyviolation',
+  'seeked',
+  'seeking',
+  'select',
+  'selectionchange',
+  'selectstart',
+  'slotchange',
+  'stalled',
+  'submit',
+  'suspend',
+  'timeupdate',
+  'toggle',
+  'touchcancel',
+  'touchend',
+  'touchmove',
+  'touchstart',
+  'transitioncancel',
+  'transitionend',
+  'transitionrun',
+  'transitionstart',
+  'volumechange',
+  'waiting',
+  'webkitanimationend',
+  'webkitanimationiteration',
+  'webkitanimationstart',
+  'webkittransitionend',
+  'wheel',
+];
+
+export const checkIsBindingNativeEvent = (code: string) =>
+  !!nativeEvents.find((nativeEvent) => nativeEvent === code.toLowerCase());
diff --git a/packages/core/src/helpers/is-children.ts b/packages/core/src/helpers/is-children.ts
index acbceac1cd..7c7ef76a8b 100644
--- a/packages/core/src/helpers/is-children.ts
+++ b/packages/core/src/helpers/is-children.ts
@@ -1,4 +1,4 @@
-import { MitosisNode } from '../types/mitosis-node';
+import { MitosisNode } from '@/types/mitosis-node';
 
 export const getTextValue = (node: MitosisNode) => {
   const textValue = node.bindings._text?.code || node.properties.__text || '';

From af43f50798611b6c75bf94bd8ec855171471eb12 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:51:59 +0100
Subject: [PATCH 2/7] Feat complex metadata (#1638)

* feat: improve parseJSX to resolve complex useMetadata

* fix: issue with metadata always be flat without correct depth

* chore: add changeset

* chore: add example for complex useMetadata

* chore: run fmt

* fix: complex metadata with spread variable

* chore: run fmt

* chore: update snapshots

* chore: moved `isTypescriptFile` from `src/helpers` to `parsers/jsx/helpers`

* chore: update snapshots
---
 .changeset/clean-cobras-know.md               |  31 +
 examples/metdata/.eslintrc.js                 |  18 +
 examples/metdata/.gitignore                   |   1 +
 examples/metdata/README.md                    |   3 +
 examples/metdata/mitosis.config.js            |  37 +
 examples/metdata/package.json                 |  22 +
 examples/metdata/src/components/data.ts       |  13 +
 .../metdata/src/components/metadata.lite.tsx  |   8 +
 examples/metdata/src/shared/data.ts           |  11 +
 examples/metdata/src/shared/model.ts          |   5 +
 examples/metdata/tsconfig.json                |  10 +
 .../__snapshots__/alpine.test.ts.snap         | 104 ++-
 .../__snapshots__/angular.import.test.ts.snap | 236 ++++-
 .../__snapshots__/angular.mapper.test.ts.snap | 240 ++++-
 .../__snapshots__/angular.state.test.ts.snap  | 236 ++++-
 .../__snapshots__/angular.styles.test.ts.snap | 208 ++++-
 .../__snapshots__/angular.test.ts.snap        | 444 ++++++++-
 .../__tests__/__snapshots__/html.test.ts.snap | 190 +++-
 .../__snapshots__/liquid.test.ts.snap         |  82 +-
 .../__tests__/__snapshots__/lit.test.ts.snap  | 158 +++-
 .../__snapshots__/marko.test.ts.snap          |  94 +-
 .../__snapshots__/mitosis.test.ts.snap        | 474 +++++++++-
 .../__snapshots__/parse-jsx.test.ts.snap      | 349 +++++++
 .../__snapshots__/preact.test.ts.snap         | 114 ++-
 .../__tests__/__snapshots__/qwik.test.ts.snap | 118 ++-
 .../__snapshots__/react-native.test.ts.snap   | 162 +++-
 .../react-state-builder.test.ts.snap          | 118 ++-
 .../react-state-mobx.test.ts.snap             | 114 ++-
 .../react-state-solid.test.ts.snap            | 110 ++-
 .../react-state-valtio.test.ts.snap           | 110 ++-
 .../react-state-variables.test.ts.snap        | 110 ++-
 .../__snapshots__/react.test.ts.snap          | 110 ++-
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 880 +++++++++++++++---
 .../__snapshots__/solid.test.ts.snap          | 228 ++++-
 .../__snapshots__/stencil.test.ts.snap        | 134 ++-
 .../__snapshots__/svelte.test.ts.snap         | 379 +++++++-
 .../__tests__/__snapshots__/taro.test.ts.snap | 114 ++-
 .../vue-composition.test.ts.snap              | 106 ++-
 .../__tests__/__snapshots__/vue.test.ts.snap  | 122 ++-
 .../__snapshots__/webcomponent.test.ts.snap   | 470 +++++++++-
 .../core/src/__tests__/data/meta/figma.ts     |  12 +
 .../src/__tests__/data/meta/figma/data.ts     |  48 +
 .../__tests__/data/meta/figma/figma.raw.tsx   |  19 +
 packages/core/src/__tests__/data/meta/meta.ts |   1 +
 .../data/meta/sub/complex-meta.raw.tsx        |  11 +
 .../src/__tests__/data/meta/sub/meta-model.ts |   7 +
 .../src/__tests__/data/meta/sub/meta-sub.ts   |  14 +
 packages/core/src/__tests__/react.test.ts     |   2 +-
 packages/core/src/__tests__/test-generator.ts |  41 +-
 packages/core/src/parsers/jsx/helpers.ts      |  37 +-
 packages/core/src/parsers/jsx/hooks/index.ts  |  45 +-
 .../src/parsers/jsx/hooks/use-metadata.ts     | 219 +++++
 packages/core/src/parsers/jsx/imports.ts      |  15 +-
 packages/core/src/parsers/jsx/jsx.ts          | 243 +++--
 packages/core/src/parsers/jsx/types.ts        |   9 +-
 .../src/routes/docs/customizability/index.mdx |  14 +-
 yarn.lock                                     |  10 +
 57 files changed, 6713 insertions(+), 507 deletions(-)
 create mode 100644 .changeset/clean-cobras-know.md
 create mode 100644 examples/metdata/.eslintrc.js
 create mode 100644 examples/metdata/.gitignore
 create mode 100644 examples/metdata/README.md
 create mode 100644 examples/metdata/mitosis.config.js
 create mode 100644 examples/metdata/package.json
 create mode 100644 examples/metdata/src/components/data.ts
 create mode 100644 examples/metdata/src/components/metadata.lite.tsx
 create mode 100644 examples/metdata/src/shared/data.ts
 create mode 100644 examples/metdata/src/shared/model.ts
 create mode 100644 examples/metdata/tsconfig.json
 create mode 100644 packages/core/src/__tests__/data/meta/figma.ts
 create mode 100644 packages/core/src/__tests__/data/meta/figma/data.ts
 create mode 100644 packages/core/src/__tests__/data/meta/figma/figma.raw.tsx
 create mode 100644 packages/core/src/__tests__/data/meta/meta.ts
 create mode 100644 packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx
 create mode 100644 packages/core/src/__tests__/data/meta/sub/meta-model.ts
 create mode 100644 packages/core/src/__tests__/data/meta/sub/meta-sub.ts
 create mode 100644 packages/core/src/parsers/jsx/hooks/use-metadata.ts

diff --git a/.changeset/clean-cobras-know.md b/.changeset/clean-cobras-know.md
new file mode 100644
index 0000000000..7e55cccc2e
--- /dev/null
+++ b/.changeset/clean-cobras-know.md
@@ -0,0 +1,31 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All] Refactored `useMetadata` hook to enable import resolution instead of simple `JSON5` parsing.
+
+You could use a normal JS `Object` and import it inside your `*.lite.tsx` file like this:
+
+```ts
+// data.ts
+
+export const myMetadata: Record<string, string | number> = {
+  a: 'b',
+  c: 1,
+};
+```
+
+```tsx
+// my-button.lite.tsx
+import { useMetadata } from '@builder.io/mitosis';
+import { myMetadata } from './data.ts';
+
+useMetadata({
+  x: 'y',
+  my: myMetadata,
+});
+
+export default function MyButton() {
+  return <button></button>;
+}
+```
diff --git a/examples/metdata/.eslintrc.js b/examples/metdata/.eslintrc.js
new file mode 100644
index 0000000000..6251926add
--- /dev/null
+++ b/examples/metdata/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  plugins: ["@builder.io/mitosis"],
+  parser: "@typescript-eslint/parser",
+  extends: [],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    "@builder.io/mitosis/no-conditional-render": "warn",
+  },
+};
diff --git a/examples/metdata/.gitignore b/examples/metdata/.gitignore
new file mode 100644
index 0000000000..6caf68aff4
--- /dev/null
+++ b/examples/metdata/.gitignore
@@ -0,0 +1 @@
+output
\ No newline at end of file
diff --git a/examples/metdata/README.md b/examples/metdata/README.md
new file mode 100644
index 0000000000..9e598a89e6
--- /dev/null
+++ b/examples/metdata/README.md
@@ -0,0 +1,3 @@
+# Metadata example for Mitosis
+
+This is an example to showcase the ``useMetadata`` hook. You can use this to set predefined configuration parameters for each component. Or you can add additional parameters to use them in a plugin.
diff --git a/examples/metdata/mitosis.config.js b/examples/metdata/mitosis.config.js
new file mode 100644
index 0000000000..217056e20c
--- /dev/null
+++ b/examples/metdata/mitosis.config.js
@@ -0,0 +1,37 @@
+const metadataPlugin = () => ({
+  code: {
+    pre: (code, json) => {
+      if (json.meta.useMetadata) {
+        return `
+          /**
+          useMetadata:
+          ${JSON.stringify(json.meta.useMetadata)}
+          */
+          
+          ${code}`;
+      }
+
+      return code;
+    },
+  },
+});
+
+module.exports = {
+  files: 'src/**',
+  commonOptions: {
+    plugins: [metadataPlugin],
+  },
+  targets: [
+    'react',
+    // still unsupported
+    // 'qwik',
+    // 'builder',
+    'vue',
+    'html',
+    // TO-DO: fix error causing svelte output not to work
+    // 'svelte',
+    'solid',
+    'angular',
+    'webcomponent',
+  ],
+};
diff --git a/examples/metdata/package.json b/examples/metdata/package.json
new file mode 100644
index 0000000000..64e6eb4d19
--- /dev/null
+++ b/examples/metdata/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@builder.io/metadata-example",
+  "private": true,
+  "scripts": {
+    "build": "mitosis build",
+    "lint": "eslint"
+  },
+  "exports": {
+    "./react/*": "./dist/react/src/*",
+    "./qwik/*": "./dist/qwik/src/*",
+    "./vue/*": "./dist/vue/src/*",
+    "./svelte/*": "./dist/svelte/src/*",
+    "./angular/*": "./dist/angular/src/*",
+    "./html/*": "./dist/html/src/*",
+    "./solid/*": "./dist/solid/src/*"
+  },
+  "dependencies": {
+    "@builder.io/mitosis": "workspace:*",
+    "@builder.io/mitosis-cli": "workspace:*",
+    "eslint": "^7.21.0"
+  }
+}
diff --git a/examples/metdata/src/components/data.ts b/examples/metdata/src/components/data.ts
new file mode 100644
index 0000000000..a363ffeec9
--- /dev/null
+++ b/examples/metdata/src/components/data.ts
@@ -0,0 +1,13 @@
+import { ComponentMetadata } from '@builder.io/mitosis';
+import { customMetaData } from '../shared/data';
+
+export const metadata: ComponentMetadata = {
+  regularKey: 'abc',
+  'some-key': customMetaData,
+  react: {
+    forwardRef: 'xxx',
+  },
+  vue: {
+    customKey: 'yyy',
+  },
+};
diff --git a/examples/metdata/src/components/metadata.lite.tsx b/examples/metdata/src/components/metadata.lite.tsx
new file mode 100644
index 0000000000..a143f9a0b1
--- /dev/null
+++ b/examples/metdata/src/components/metadata.lite.tsx
@@ -0,0 +1,8 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { metadata } from './data';
+
+useMetadata({ ...metadata });
+
+export default function MetadataExample() {
+  return <div>Metadata</div>;
+}
diff --git a/examples/metdata/src/shared/data.ts b/examples/metdata/src/shared/data.ts
new file mode 100644
index 0000000000..e44cb48def
--- /dev/null
+++ b/examples/metdata/src/shared/data.ts
@@ -0,0 +1,11 @@
+import { CustomMetadata } from './model';
+
+export const customMetaData: CustomMetadata = {
+  a: 'custom',
+  b: 1,
+  c: {
+    d: 'nested',
+  },
+};
+
+
diff --git a/examples/metdata/src/shared/model.ts b/examples/metdata/src/shared/model.ts
new file mode 100644
index 0000000000..1a9c259e05
--- /dev/null
+++ b/examples/metdata/src/shared/model.ts
@@ -0,0 +1,5 @@
+export type CustomMetadata = {
+  a: string;
+  b: number;
+  c: Object;
+};
diff --git a/examples/metdata/tsconfig.json b/examples/metdata/tsconfig.json
new file mode 100644
index 0000000000..372ba40607
--- /dev/null
+++ b/examples/metdata/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "jsxImportSource": "@builder.io/mitosis"
+  },
+  "include": ["src"]
+}
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 435fd037c3..09c985ebb8 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -241,7 +241,10 @@ exports[`Alpine.js > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div x-data=\\"myBasicOutputsComponent()\\"></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div x-data=\\"myBasicOutputsComponent()\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myBasicOutputsComponent\\", () => ({
@@ -1630,7 +1633,9 @@ exports[`Alpine.js > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<style>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<style>
   .input {
     color: red;
   }
@@ -1784,6 +1789,20 @@ exports[`Alpine.js > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div x-data=\\"complexMetaRaw()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"complexMetaRaw\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > componentWithContext 1`] = `
 "<div x-data=\\"componentWithContext()\\">
   <div><span x-html=\\"foo.value\\"></span></div>
@@ -1922,6 +1941,35 @@ exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  x-data=\\"figmaButton()\\"
+  x-bind:data-icon=\\"icon\\"
+  x-bind:data-disabled=\\"interactiveState\\"
+  x-bind:data-width=\\"width\\"
+  x-bind:data-size=\\"size\\"
+>
+  <span x-html=\\"label\\"></span>
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"figmaButton\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>
@@ -3319,7 +3367,10 @@ exports[`Alpine.js > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div x-data=\\"myBasicOutputsComponent()\\"></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div x-data=\\"myBasicOutputsComponent()\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myBasicOutputsComponent\\", () => ({
@@ -4697,7 +4748,9 @@ exports[`Alpine.js > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<style>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<style>
   .input {
     color: red;
   }
@@ -4851,6 +4904,20 @@ exports[`Alpine.js > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div x-data=\\"complexMetaRaw()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"complexMetaRaw\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > componentWithContext 1`] = `
 "<div x-data=\\"componentWithContext()\\">
   <div><span x-html=\\"foo.value\\"></span></div>
@@ -4989,6 +5056,35 @@ exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  x-data=\\"figmaButton()\\"
+  x-bind:data-icon=\\"icon\\"
+  x-bind:data-disabled=\\"interactiveState\\"
+  x-bind:data-width=\\"width\\"
+  x-bind:data-size=\\"size\\"
+>
+  <span x-html=\\"label\\"></span>
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"figmaButton\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 5587defbd3..9eae1c7824 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -392,7 +392,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3574,7 +3579,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3852,6 +3862,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3967,7 +4012,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4484,6 +4534,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4774,7 +4872,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -5230,7 +5333,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -7821,7 +7929,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11271,7 +11384,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11561,6 +11679,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11684,7 +11837,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12226,6 +12384,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12533,7 +12739,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -13002,7 +13213,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 0fa4c40421..e240c67e28 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -399,7 +399,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3624,7 +3629,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3909,6 +3919,42 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4027,7 +4073,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4552,6 +4603,55 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+  bootstrap: [SomeOtherComponent],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4848,7 +4948,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -5315,7 +5420,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -7954,7 +8064,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11447,7 +11562,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11744,6 +11864,42 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11870,7 +12026,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12420,6 +12581,55 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+  bootstrap: [SomeOtherComponent],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12735,7 +12945,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -13215,7 +13430,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index de23dc6e71..ca8e43d62e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -415,7 +415,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3712,7 +3717,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3988,6 +3998,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4101,7 +4146,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4658,6 +4708,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4974,7 +5072,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -5430,7 +5533,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -8095,7 +8203,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11685,7 +11798,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11973,6 +12091,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12094,7 +12247,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12677,6 +12835,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13010,7 +13216,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -13479,7 +13690,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index 48f5cc8285..e11df639ef 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -351,7 +351,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3256,7 +3261,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3503,6 +3513,34 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3595,7 +3633,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4060,6 +4103,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4308,7 +4392,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -4691,7 +4780,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -6974,7 +7068,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -10147,7 +10246,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -10406,6 +10510,34 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10506,7 +10638,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -10996,6 +11133,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11261,7 +11439,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -11657,7 +11840,12 @@ export class OnUpdateWithDepsModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 7c285bc01d..2f51bbbf88 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -734,7 +734,12 @@ export default class MyBasicOutputsComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -778,7 +783,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > Basic Outputs Meta 2`] = `
-"import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -6793,7 +6803,12 @@ export default class MyBasicForwardRefComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -6834,7 +6849,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > basicForwardRefMetadata 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -7299,6 +7319,69 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class ComplexMetaRaw {}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7505,7 +7588,12 @@ export default class RenderContent {
 `;
 
 exports[`Angular > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -7535,7 +7623,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > customSelector 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -8484,6 +8577,95 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9021,7 +9203,12 @@ export default class MyBasicComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -9058,7 +9245,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > nativeAttributes 2`] = `
-"import { Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -9856,7 +10048,12 @@ export default class OnUpdateWithDeps {
 `;
 
 exports[`Angular > jsx > Javascript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -9898,7 +10095,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > outputEventBinding 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -14678,7 +14880,12 @@ export default class MyBasicOutputsComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -14722,7 +14929,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > Basic Outputs Meta 2`] = `
-"import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -21273,7 +21485,12 @@ export default class MyBasicForwardRefComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -21319,7 +21536,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > basicForwardRefMetadata 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 export interface Props {
@@ -21803,6 +22025,69 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class ComplexMetaRaw {}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -22025,7 +22310,12 @@ export default class RenderContent {
 `;
 
 exports[`Angular > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -22055,7 +22345,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > customSelector 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -23054,6 +23349,95 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -23625,7 +24009,12 @@ export default class MyBasicComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -23662,7 +24051,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > nativeAttributes 2`] = `
-"import { Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -24486,7 +24880,12 @@ export default class OnUpdateWithDeps {
 `;
 
 exports[`Angular > jsx > Typescript Test > outputEventBinding 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -24528,7 +24927,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > outputEventBinding 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeEvents\\":[\\"onFakeNative\\"]}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 754830f4af..8d57f9a86c 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -825,7 +825,10 @@ exports[`Html > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Html > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 <script>
   (() => {
     const state = { name: \\"PatrickJS\\" };
@@ -4133,7 +4136,9 @@ exports[`Html > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Html > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div>
   <input
     class=\\"input\\"
     data-el=\\"input-1\\"
@@ -4401,6 +4406,15 @@ exports[`Html > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > componentWithContext 1`] = `
 "<template data-el=\\"div-1\\"><!-- foo.value --></template>
 <script>
@@ -4946,6 +4960,83 @@ exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button data-el=\\"button-1\\">
+  <template data-el=\\"div-1\\"><!-- props.label --></template>
+</button>
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+        el.setAttribute(\\"data-icon\\", props.icon);
+
+        el.setAttribute(\\"data-disabled\\", props.interactiveState);
+
+        el.setAttribute(\\"data-width\\", props.width);
+
+        el.setAttribute(\\"data-size\\", props.size);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, props.label);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > getterState 1`] = `
 "<div>
   <p>
@@ -8579,7 +8670,10 @@ exports[`Html > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Html > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 <script>
   (() => {
     const state = { name: \\"PatrickJS\\" };
@@ -11887,7 +11981,9 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Html > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div>
   <input
     class=\\"input\\"
     data-el=\\"input-1\\"
@@ -12155,6 +12251,15 @@ exports[`Html > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > componentWithContext 1`] = `
 "<template data-el=\\"div-1\\"><!-- foo.value --></template>
 <script>
@@ -12700,6 +12805,83 @@ exports[`Html > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button data-el=\\"button-1\\">
+  <template data-el=\\"div-1\\"><!-- props.label --></template>
+</button>
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+        el.setAttribute(\\"data-icon\\", props.icon);
+
+        el.setAttribute(\\"data-disabled\\", props.interactiveState);
+
+        el.setAttribute(\\"data-width\\", props.width);
+
+        el.setAttribute(\\"data-size\\", props.size);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, props.label);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > getterState 1`] = `
 "<div>
   <p>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 4907f9241c..a34f841bd7 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -55,7 +55,10 @@ exports[`Liquid > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Liquid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 "
 `;
 
@@ -466,7 +469,9 @@ exports[`Liquid > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Liquid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
 <style>
   .input {
     color: red;
@@ -537,6 +542,15 @@ exports[`Liquid > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > componentWithContext 1`] = `
 "<div><div>{{foo.value}}</div></div>
 "
@@ -597,6 +611,29 @@ exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  data-icon=\\"{{icon}}\\"
+  data-disabled=\\"{{interactiveState}}\\"
+  data-width=\\"{{width}}\\"
+  data-size=\\"{{size}}\\"
+>
+  {{label}}
+</button>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > getterState 1`] = `
 "<div>
   <p>{{foo2}}</p>
@@ -1032,7 +1069,10 @@ exports[`Liquid > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Liquid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 "
 `;
 
@@ -1443,7 +1483,9 @@ exports[`Liquid > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Liquid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
 <style>
   .input {
     color: red;
@@ -1514,6 +1556,15 @@ exports[`Liquid > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > componentWithContext 1`] = `
 "<div><div>{{foo.value}}</div></div>
 "
@@ -1574,6 +1625,29 @@ exports[`Liquid > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  data-icon=\\"{{icon}}\\"
+  data-disabled=\\"{{interactiveState}}\\"
+  data-width=\\"{{width}}\\"
+  data-size=\\"{{size}}\\"
+>
+  {{label}}
+</button>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > getterState 1`] = `
 "<div>
   <p>{{foo2}}</p>
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index f64458f4a0..c7b341db53 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -300,7 +300,12 @@ export default class MyBasicOutputsComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-outputs-component\\")
@@ -2298,7 +2303,12 @@ export default class MyBasicForwardRefComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-forward-ref-component\\")
@@ -2504,6 +2514,32 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"complex-meta-raw\\")
+export default class ComplexMetaRaw extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -2774,6 +2810,45 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"figma-button\\")
+export default class FigmaButton extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() icon: any;
+  @property() interactiveState: any;
+  @property() width: any;
+  @property() size: any;
+  @property() label: any;
+
+  render() {
+    return html\`
+
+          <button
+          data-icon=\\"\${this.icon}\\"
+          data-disabled=\\"\${this.interactiveState}\\"
+          data-width=\\"\${this.width}\\"
+          data-size=\\"\${this.size}\\"
+        >
+          \${this.label}
+        </button>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > getterState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -4911,7 +4986,12 @@ export default class MyBasicOutputsComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-outputs-component\\")
@@ -7167,7 +7247,12 @@ export default class MyBasicForwardRefComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 export interface Props {
@@ -7385,6 +7470,32 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"complex-meta-raw\\")
+export default class ComplexMetaRaw extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -7685,6 +7796,45 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"figma-button\\")
+export default class FigmaButton extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() icon: any;
+  @property() interactiveState: any;
+  @property() width: any;
+  @property() size: any;
+  @property() label: any;
+
+  render() {
+    return html\`
+
+          <button
+          data-icon=\\"\${this.icon}\\"
+          data-disabled=\\"\${this.interactiveState}\\"
+          data-width=\\"\${this.width}\\"
+          data-size=\\"\${this.size}\\"
+        >
+          \${this.label}
+        </button>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > getterState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 41633ba0e5..2a786b2d27 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -266,7 +266,13 @@ exports[`Marko > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Marko > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -1527,7 +1533,13 @@ style {
 `;
 
 exports[`Marko > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -1660,6 +1672,18 @@ style {
 </div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -1779,6 +1803,25 @@ exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          class {}
+
+<button
+  data-icon=(input.icon)
+  data-disabled=(input.interactiveState)
+  data-width=(input.width)
+  data-size=(input.size)
+>
+  \${input.label}
+</button>"
+`;
+
 exports[`Marko > jsx > Javascript Test > getterState 1`] = `
 "class {
   get foo2() {
@@ -2963,7 +3006,13 @@ exports[`Marko > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Marko > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -4235,7 +4284,13 @@ style {
 `;
 
 exports[`Marko > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -4370,6 +4425,18 @@ style {
 </div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -4489,6 +4556,25 @@ exports[`Marko > jsx > Typescript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          class {}
+
+<button
+  data-icon=(input.icon)
+  data-disabled=(input.interactiveState)
+  data-width=(input.width)
+  data-size=(input.size)
+>
+  \${input.label}
+</button>"
+`;
+
 exports[`Marko > jsx > Typescript Test > getterState 1`] = `
 "class {
   get foo2() {
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 5cbc1dd33e..8b2e56b818 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -248,7 +248,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -1668,14 +1673,14 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascr
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (16:12)
-  14 |     const state = useStore({ name: 'PatrickJS',});
-  15 |
-> 16 | const props.inputRef = useRef();
+"',' expected. (22:12)
+  20 |     const state = useStore({ name: 'PatrickJS',});
+  21 |
+> 22 | const props.inputRef = useRef();
      |            ^
-  17 |
-  18 |
-  19 |"
+  23 |
+  24 |
+  25 |"
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -1793,6 +1798,29 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+    spreadStringValue: \\"f\\",
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 
@@ -1950,6 +1978,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return [
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -3307,7 +3394,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -4954,14 +5046,14 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescr
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (19:12)
-  17 |     const state = useStore({ name: 'PatrickJS',});
-  18 |
-> 19 | const props.inputRef = useRef();
+"',' expected. (25:12)
+  23 |     const state = useStore({ name: 'PatrickJS',});
+  24 |
+> 25 | const props.inputRef = useRef();
      |            ^
-  20 |
-  21 |
-  22 |"
+  26 |
+  27 |
+  28 |"
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -5086,6 +5178,29 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+    spreadStringValue: \\"f\\",
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 export interface ComponentWithContextProps {
@@ -5269,6 +5384,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return [
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -7417,7 +7591,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -8851,14 +9030,14 @@ exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRef 1`] =
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (16:12)
-  14 |     const state = useStore({ name: 'PatrickJS',});
-  15 |
-> 16 | const props.inputRef = useRef();
+"',' expected. (22:12)
+  20 |     const state = useStore({ name: 'PatrickJS',});
+  21 |
+> 22 | const props.inputRef = useRef();
      |            ^
-  17 |
-  18 |
-  19 |"
+  23 |
+  24 |
+  25 |"
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -8976,6 +9155,29 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+    spreadStringValue: \\"f\\",
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 
@@ -9133,6 +9335,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -10531,7 +10792,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -12198,14 +12464,14 @@ exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRef 1`] =
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (19:12)
-  17 |     const state = useStore({ name: 'PatrickJS',});
-  18 |
-> 19 | const props.inputRef = useRef();
+"',' expected. (25:12)
+  23 |     const state = useStore({ name: 'PatrickJS',});
+  24 |
+> 25 | const props.inputRef = useRef();
      |            ^
-  20 |
-  21 |
-  22 |"
+  26 |
+  27 |
+  28 |"
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -12330,6 +12596,29 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+    spreadStringValue: \\"f\\",
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 export interface ComponentWithContextProps {
@@ -12515,6 +12804,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -16478,6 +16826,17 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > complexMeta 1`] = `
+"import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -16715,6 +17074,26 @@ export default MyComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > figmaMeta 1`] = `
+"import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -20163,6 +20542,17 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > complexMeta 1`] = `
+"import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -20400,6 +20790,26 @@ export default MyComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > figmaMeta 1`] = `
+"import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 76f99fba8e..57e1f1b0a7 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6866,6 +6866,54 @@ exports[`Parse JSX > Javascript > classState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > complexMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "asdf": {
+        "booleanValue": true,
+        "innerObject": {
+          "booleanValue": false,
+          "numberValue": 2,
+          "stringValue": "inner",
+        },
+        "numberValue": 1,
+        "spreadStringValue": "f",
+        "stringValue": "d",
+      },
+      "x": "y",
+    },
+  },
+  "name": "ComplexMetaRaw",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > componentWithContext 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -7719,6 +7767,132 @@ exports[`Parse JSX > Javascript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > figmaMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "data-disabled": {
+          "bindingType": "expression",
+          "code": "props.interactiveState",
+          "type": "single",
+        },
+        "data-icon": {
+          "bindingType": "expression",
+          "code": "props.icon",
+          "type": "single",
+        },
+        "data-size": {
+          "bindingType": "expression",
+          "code": "props.size",
+          "type": "single",
+        },
+        "data-width": {
+          "bindingType": "expression",
+          "code": "props.width",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.label",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "figma": {
+        "name": "def-button-beta-outlined",
+        "props": {
+          "icon": {
+            "key": "👁️ Icon",
+            "type": "boolean",
+            "value": {
+              "false": false,
+              "true": "placeholder",
+            },
+          },
+          "iconMedium": {
+            "key": "📍 Icon Medium",
+            "type": "instance",
+          },
+          "iconSmall": {
+            "key": "📍 Icon Small",
+            "type": "instance",
+          },
+          "interactiveState": {
+            "key": "Interactive State",
+            "type": "enum",
+            "value": {
+              "(Def) Enabled": false,
+              "Disabled": "true",
+              "Focused": false,
+              "Hovered": false,
+              "Pressed": false,
+            },
+          },
+          "label": {
+            "key": "✏️ Label",
+            "type": "string",
+          },
+          "size": {
+            "key": "Size",
+            "type": "enum",
+            "value": {
+              "(Def) Medium": false,
+              "Small": "small",
+            },
+          },
+          "width": {
+            "key": "Width",
+            "type": "enum",
+            "value": {
+              "(Def) Auto Width": false,
+              "Full Width": "full",
+            },
+          },
+        },
+        "url": "https://www.figma.com/xxx",
+      },
+    },
+  },
+  "name": "FigmaButton",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > getterState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -20043,6 +20217,54 @@ exports[`Parse JSX > Typescript > classState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > complexMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "asdf": {
+        "booleanValue": true,
+        "innerObject": {
+          "booleanValue": false,
+          "numberValue": 2,
+          "stringValue": "inner",
+        },
+        "numberValue": 1,
+        "spreadStringValue": "f",
+        "stringValue": "d",
+      },
+      "x": "y",
+    },
+  },
+  "name": "ComplexMetaRaw",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > componentWithContext 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -20936,6 +21158,133 @@ exports[`Parse JSX > Typescript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > figmaMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "data-disabled": {
+          "bindingType": "expression",
+          "code": "props.interactiveState",
+          "type": "single",
+        },
+        "data-icon": {
+          "bindingType": "expression",
+          "code": "props.icon",
+          "type": "single",
+        },
+        "data-size": {
+          "bindingType": "expression",
+          "code": "props.size",
+          "type": "single",
+        },
+        "data-width": {
+          "bindingType": "expression",
+          "code": "props.width",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.label",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "figma": {
+        "name": "def-button-beta-outlined",
+        "props": {
+          "icon": {
+            "key": "👁️ Icon",
+            "type": "boolean",
+            "value": {
+              "false": false,
+              "true": "placeholder",
+            },
+          },
+          "iconMedium": {
+            "key": "📍 Icon Medium",
+            "type": "instance",
+          },
+          "iconSmall": {
+            "key": "📍 Icon Small",
+            "type": "instance",
+          },
+          "interactiveState": {
+            "key": "Interactive State",
+            "type": "enum",
+            "value": {
+              "(Def) Enabled": false,
+              "Disabled": "true",
+              "Focused": false,
+              "Hovered": false,
+              "Pressed": false,
+            },
+          },
+          "label": {
+            "key": "✏️ Label",
+            "type": "string",
+          },
+          "size": {
+            "key": "Size",
+            "type": "enum",
+            "value": {
+              "(Def) Medium": false,
+              "Small": "small",
+            },
+          },
+          "width": {
+            "key": "Width",
+            "type": "enum",
+            "value": {
+              "(Def) Auto Width": false,
+              "Full Width": "full",
+            },
+          },
+        },
+        "url": "https://www.figma.com/xxx",
+      },
+    },
+  },
+  "name": "FigmaButton",
+  "propsTypeRef": "any",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > getterState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 09eab87c3f..3e5fc770be 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Preact > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState, useEffect } from \\"preact/hooks\\";
 
@@ -1789,7 +1794,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Preact > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
@@ -1976,6 +1986,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > componentWithContext 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -2219,6 +2246,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > getterState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -3915,7 +3968,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Preact > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState, useEffect } from \\"preact/hooks\\";
 
@@ -5763,7 +5821,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Preact > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
@@ -5961,6 +6024,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > componentWithContext 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6236,6 +6316,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > getterState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index b4e285c5ca..4d49a89339 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -1984,7 +1984,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          import {
   Fragment,
   component$,
   h,
@@ -3700,7 +3706,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          import {
   $,
   Fragment,
   component$,
@@ -3869,6 +3881,23 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const ComplexMetaRaw = component$((props) => {
+  return <div></div>;
+});
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > contentState 1`] = `
 "import {
   Fragment,
@@ -4029,6 +4058,32 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const FigmaButton = component$((props) => {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+});
+
+export default FigmaButton;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > getterState 1`] = `
 "import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
@@ -5664,7 +5719,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          import {
   Fragment,
   component$,
   h,
@@ -7613,7 +7674,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          import {
   $,
   Fragment,
   component$,
@@ -7792,6 +7859,23 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const ComplexMetaRaw = component$((props: any) => {
+  return <div></div>;
+});
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > contentState 1`] = `
 "import {
   Fragment,
@@ -7971,6 +8055,32 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const FigmaButton = component$((props: any) => {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+});
+
+export default FigmaButton;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > getterState 1`] = `
 "import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 6a11d32212..7cd91475be 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -324,7 +324,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React Native > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -2390,7 +2395,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React Native > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -2647,6 +2657,35 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function ComplexMetaRaw(props) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > componentWithContext 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -2996,6 +3035,44 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function FigmaButton(props) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      <Text>{props.label}</Text>
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5554,7 +5631,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React Native > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -7873,7 +7955,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React Native > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -8141,6 +8228,35 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function ComplexMetaRaw(props: any) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > componentWithContext 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -8522,6 +8638,44 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function FigmaButton(props: any) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      <Text>{props.label}</Text>
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index e10e5b46f2..bbea432570 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -1797,7 +1802,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -1988,6 +1998,24 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  const state = useBuilderState({});
+
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2242,6 +2270,33 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  const state = useBuilderState({});
+
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -3898,7 +3953,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -5752,7 +5812,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -5954,6 +6019,24 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  const state = useBuilderState({});
+
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6240,6 +6323,33 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  const state = useBuilderState({});
+
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 5c9aaa1ce4..e7ddbc2ad6 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -206,7 +206,12 @@ export default observedMyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -1847,7 +1852,12 @@ export default observedMyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -2045,6 +2055,23 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+const observedComplexMetaRaw = observer(ComplexMetaRaw);
+export default observedComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2297,6 +2324,32 @@ export default observedMyComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+const observedFigmaButton = observer(FigmaButton);
+export default observedFigmaButton;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -3962,7 +4015,12 @@ export default observedMyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -5840,7 +5898,12 @@ export default observedMyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -6047,6 +6110,23 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+const observedComplexMetaRaw = observer(ComplexMetaRaw);
+export default observedComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6331,6 +6411,32 @@ export default observedMyComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+const observedFigmaButton = observer(FigmaButton);
+export default observedFigmaButton;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index 61e149d3fd..c183b05b58 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -199,7 +199,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -1792,7 +1797,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -1981,6 +1991,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2225,6 +2251,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -3832,7 +3883,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -5662,7 +5718,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -5860,6 +5921,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6136,6 +6213,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index d550f3a398..e7c9ed47cf 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -199,7 +199,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -1795,7 +1800,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -1984,6 +1994,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2228,6 +2254,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -3835,7 +3886,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -5668,7 +5724,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -5866,6 +5927,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6142,6 +6219,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 7e44207a3f..b3f4293bd6 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -107,7 +107,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -1226,7 +1231,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -1409,6 +1419,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -1649,6 +1675,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -2879,7 +2930,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -4191,7 +4247,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -4385,6 +4446,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -4657,6 +4734,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index ba3fffdf46..98120ce9d2 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -1774,7 +1779,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -1960,6 +1970,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2202,6 +2228,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -3812,7 +3863,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -5645,7 +5701,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5842,6 +5903,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6116,6 +6193,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 47d8be4914..cfd4fdd68a 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -214,7 +219,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > BasicAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return <input autoCapitalize=\\"on\\" autoComplete=\\"on\\" spellCheck />;
@@ -225,7 +235,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 function MyBooleanAttribute(props) {
@@ -434,7 +449,12 @@ export default MyPreviousComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Button 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   return (
@@ -462,7 +482,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Column(props) {
   const getColumns = function getColumns() {
@@ -522,7 +547,12 @@ export default Column;
 `;
 
 exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ContentSlotCode(props) {
   return (
@@ -1128,7 +1158,12 @@ export default ImgStateComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Img 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 function ImgComponent(props) {
@@ -1180,7 +1215,12 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import FormInputComponent from \\"./input.raw\\";
 
 function Stepper(props) {
@@ -1224,7 +1264,12 @@ export default NestedStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > RawText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function RawText(props) {
   return (
@@ -1240,7 +1285,12 @@ export default RawText;
 `;
 
 exports[`RSC > jsx > Javascript Test > Section 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SectionComponent(props) {
   return (
@@ -1264,7 +1314,12 @@ export default SectionComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Select 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 function SelectComponent(props) {
@@ -1294,7 +1349,12 @@ export default SelectComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotDefault 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SlotCode(props) {
   return (
@@ -1311,7 +1371,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 function SlotCode(props) {
@@ -1327,7 +1392,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotJsx 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 function SlotCode(props) {
@@ -1343,7 +1413,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotNamed 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SlotCode(props) {
   return (
@@ -1518,7 +1593,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Submit 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SubmitButton(props) {
   return (
@@ -1563,7 +1643,12 @@ export default Text;
 `;
 
 exports[`RSC > jsx > Javascript Test > Textarea 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Textarea(props) {
   return (
@@ -1613,7 +1698,12 @@ export default UseValueAndFnFromStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > Video 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Video(props) {
   return (
@@ -1771,7 +1861,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -1836,7 +1931,12 @@ export default MyBasicOnUpdateReturnComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > class + ClassName + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
 
 function MyBasicComponent(props) {
@@ -1864,7 +1964,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > class + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -1886,7 +1991,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > className + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -1957,6 +2067,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2136,7 +2262,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 const DEFAULT_VALUES = {
   name: \\"Sami\\",
@@ -2199,8 +2330,38 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   const foo2 = function foo2() {
@@ -2227,7 +2388,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 function RenderContent(props) {
@@ -2323,7 +2489,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > nestedShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedShow(props) {
   return (
@@ -2348,7 +2519,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Javascript Test > nestedStyles 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedStyles(props) {
   return (
@@ -2479,7 +2655,12 @@ export default OnInit;
 `;
 
 exports[`RSC > jsx > Javascript Test > onInitPlain 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function OnInitPlain(props) {
   console.log(\\"onInit\\");
@@ -2576,7 +2757,12 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`RSC > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 const b = 3;
 const foo = () => {};
@@ -2593,7 +2779,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > preserveTyping 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2627,7 +2818,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > propsInterface 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2640,7 +2836,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > propsType 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2682,14 +2883,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (213:8)
-  211 |    {shouldWrap() ? (
-  212 |    <>{isEmptyHtmlElement(tag()) ? (
-> 213 |    <tag()  {...(attributes())}  {...(actions())}  />
+"Identifier expected. (219:8)
+  217 |    {shouldWrap() ? (
+  218 |    <>{isEmptyHtmlElement(tag()) ? (
+> 219 |    <tag()  {...(attributes())}  {...(actions())}  />
       |        ^
-  214 |  ) : null}
-  215 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  216 |    <>{repeatItemData()?.map((data, index) => ("
+  220 |  ) : null}
+  221 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  222 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Javascript Test > renderContentExample 1`] = `
@@ -2745,7 +2946,12 @@ export default RenderContent;
 `;
 
 exports[`RSC > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   return (
@@ -2773,7 +2979,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > rootShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function RenderStyles(props) {
   return (
@@ -2794,7 +3005,12 @@ export default RenderStyles;
 `;
 
 exports[`RSC > jsx > Javascript Test > self-referencing component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -2810,7 +3026,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > self-referencing component with children 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -2854,7 +3075,12 @@ export default SetState;
 `;
 
 exports[`RSC > jsx > Javascript Test > showExpressions 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowWithOtherValues(props) {
   return (
@@ -2900,7 +3126,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithFor 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedShow(props) {
   return (
@@ -2923,7 +3154,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithOtherValues 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowWithOtherValues(props) {
   return (
@@ -2943,7 +3179,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithRootText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowRootText(props) {
   return <>{props.conditionA ? <>ContentA</> : <div>else-condition-A</div>}</>;
@@ -2984,7 +3225,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadAttrs 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...attrs} />;
@@ -2995,7 +3241,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadNestedProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...props.nested} />;
@@ -3006,7 +3257,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...props} />;
@@ -3017,7 +3273,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > store-async-function 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StringLiteralStore(props) {
   const arrowFunction = async function arrowFunction() {
@@ -3053,7 +3314,12 @@ export default StringLiteralStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > styleClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3080,7 +3346,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > stylePropClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StylePropClassAndCss(props) {
   return (
@@ -3105,7 +3376,12 @@ export default StylePropClassAndCss;
 `;
 
 exports[`RSC > jsx > Javascript Test > subComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import Foo from \\"./foo-sub-component\\";
 
 function SubComponent(props) {
@@ -3117,7 +3393,12 @@ export default SubComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > svgComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SvgComponent(props) {
   return (
@@ -3144,7 +3425,12 @@ export default SvgComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > typeDependency 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function TypeDependency(props) {
   return <div>{props.foo}</div>;
@@ -3197,7 +3483,12 @@ export default TypeGetterStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3220,7 +3511,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style-and-css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3248,7 +3544,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style-outside-component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3298,7 +3599,12 @@ export default UseTargetComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > webComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props) {
@@ -3541,7 +3847,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -3561,7 +3872,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > BasicAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return <input autoCapitalize=\\"on\\" autoComplete=\\"on\\" spellCheck />;
@@ -3572,7 +3888,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   children: any;
@@ -3798,7 +4119,12 @@ export default MyPreviousComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Button 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -3833,7 +4159,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Column = {
   content: any; // TODO: Implement this when support for dynamic CSS lands
@@ -3908,7 +4239,12 @@ export default Column;
 `;
 
 exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -4585,7 +4921,12 @@ export default ImgStateComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Img 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ImgProps {
   attributes?: any;
@@ -4667,7 +5008,12 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import FormInputComponent from \\"./input.raw\\";
 
 function Stepper(props: any) {
@@ -4718,7 +5064,12 @@ export default NestedStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > RawText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface RawTextProps {
   attributes?: any;
@@ -4739,7 +5090,12 @@ export default RawText;
 `;
 
 exports[`RSC > jsx > Typescript Test > Section 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface SectionProps {
   maxWidth?: number;
@@ -4769,7 +5125,12 @@ export default SectionComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Select 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface FormSelectProps {
   options?: {
@@ -4811,7 +5172,12 @@ export default SelectComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotDefault 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4832,7 +5198,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4852,7 +5223,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotJsx 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4872,7 +5248,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotNamed 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -5056,7 +5437,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Submit 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -5115,7 +5501,12 @@ export default Text;
 `;
 
 exports[`RSC > jsx > Typescript Test > Textarea 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface TextareaProps {
   attributes?: any;
@@ -5182,7 +5573,12 @@ export default UseValueAndFnFromStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > Video 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface VideoProps {
   attributes?: any;
@@ -5371,7 +5767,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5441,7 +5842,12 @@ export default MyBasicOnUpdateReturnComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > class + ClassName + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
 
 function MyBasicComponent(props: any) {
@@ -5469,7 +5875,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > class + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return (
@@ -5491,7 +5902,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > className + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return (
@@ -5568,6 +5984,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -5775,7 +6207,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   name: string;
@@ -5842,8 +6279,38 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   foo: string;
@@ -5874,7 +6341,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > import types 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type RenderContentProps = {
   options?: GetContentOptions;
@@ -5977,7 +6449,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > nestedShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6007,7 +6484,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Typescript Test > nestedStyles 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedStyles(props: any) {
   return (
@@ -6142,7 +6624,12 @@ export default OnInit;
 `;
 
 exports[`RSC > jsx > Typescript Test > onInitPlain 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function OnInitPlain(props: any) {
   console.log(\\"onInit\\");
@@ -6243,7 +6730,12 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`RSC > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Types = {
   s: any[];
@@ -6270,7 +6762,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > preserveTyping 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export type A = \\"test\\";
 export interface C {
@@ -6322,7 +6819,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > propsInterface 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Person {
   name: string;
@@ -6340,7 +6842,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > propsType 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Person = {
   name: string;
@@ -6387,14 +6894,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (221:8)
-  219 |    {shouldWrap() ? (
-  220 |    <>{isEmptyHtmlElement(tag()) ? (
-> 221 |    <tag()  {...(attributes())}  {...(actions())}  />
+"Identifier expected. (227:8)
+  225 |    {shouldWrap() ? (
+  226 |    <>{isEmptyHtmlElement(tag()) ? (
+> 227 |    <tag()  {...(attributes())}  {...(actions())}  />
       |        ^
-  222 |  ) : null}
-  223 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  224 |    <>{repeatItemData()?.map((data, index) => ("
+  228 |  ) : null}
+  229 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  230 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Typescript Test > renderContentExample 1`] = `
@@ -6458,7 +6965,12 @@ export default RenderContent;
 `;
 
 exports[`RSC > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -6493,7 +7005,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > rootShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface RenderStylesProps {
   foo: string;
@@ -6518,7 +7035,12 @@ export default RenderStyles;
 `;
 
 exports[`RSC > jsx > Typescript Test > self-referencing component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6534,7 +7056,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > self-referencing component with children 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6578,7 +7105,12 @@ export default SetState;
 `;
 
 exports[`RSC > jsx > Typescript Test > showExpressions 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6629,7 +7161,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithFor 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6657,7 +7194,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithOtherValues 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6681,7 +7223,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithRootText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6735,7 +7282,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadAttrs 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...attrs} />;
@@ -6746,7 +7298,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadNestedProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...props.nested} />;
@@ -6757,7 +7314,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...props} />;
@@ -6768,7 +7330,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > store-async-function 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StringLiteralStore(props: any) {
   const arrowFunction = async function arrowFunction() {
@@ -6804,7 +7371,12 @@ export default StringLiteralStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > styleClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6831,7 +7403,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > stylePropClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StylePropClassAndCss(props: any) {
   return (
@@ -6856,7 +7433,12 @@ export default StylePropClassAndCss;
 `;
 
 exports[`RSC > jsx > Typescript Test > subComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import Foo from \\"./foo-sub-component\\";
 
 function SubComponent(props: any) {
@@ -6868,7 +7450,12 @@ export default SubComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > svgComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SvgComponent(props: any) {
   return (
@@ -6895,7 +7482,12 @@ export default SvgComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > typeDependency 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export type TypeDependencyProps = {
   foo: Foo;
@@ -6962,7 +7554,12 @@ export default TypeGetterStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6985,7 +7582,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style-and-css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -7013,7 +7615,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style-outside-component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -7063,7 +7670,12 @@ export default UseTargetComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > webComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props: any) {
@@ -7419,7 +8031,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > slots 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -7435,7 +8052,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -7821,7 +8443,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > slots 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -7837,7 +8464,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 4f1e461a87..cf97f5963c 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -693,7 +693,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -715,7 +720,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > Basic Outputs Meta 2`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4061,7 +4071,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4088,7 +4103,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForwardRefMetadata 2`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4406,6 +4426,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+function ComplexMetaRaw(props) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+function ComplexMetaRaw(props) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > componentWithContext 1`] = `
 "import { useContext } from \\"solid-js\\";
 
@@ -4876,6 +4932,56 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > getterState 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
@@ -8569,7 +8675,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props: any) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -8591,7 +8702,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > Basic Outputs Meta 2`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props: any) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -12447,7 +12563,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 export interface Props {
   showInput: boolean;
@@ -12479,7 +12600,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForwardRefMetadata 2`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 export interface Props {
   showInput: boolean;
@@ -12816,6 +12942,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+function ComplexMetaRaw(props: any) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+function ComplexMetaRaw(props: any) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > componentWithContext 1`] = `
 "import { useContext } from \\"solid-js\\";
 
@@ -13346,6 +13508,56 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props: any) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props: any) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > getterState 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 47b9a97c71..7958c9a80c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -292,7 +292,12 @@ export class MyBasicOutputsComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-outputs-component\\",
@@ -2111,7 +2116,12 @@ export class MyBasicForwardRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
@@ -2309,6 +2319,25 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"complex-meta-raw\\",
+})
+export class ComplexMetaRaw {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -2537,6 +2566,40 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"figma-button\\",
+})
+export class FigmaButton {
+  @Prop() icon: any;
+  @Prop() interactiveState: any;
+  @Prop() width: any;
+  @Prop() size: any;
+  @Prop() label: any;
+
+  render() {
+    return (
+      <button
+        data-icon={this.icon}
+        data-disabled={this.interactiveState}
+        data-width={this.width}
+        data-size={this.size}
+      >
+        {this.label}
+      </button>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -4171,7 +4234,12 @@ export class MyBasicOutputsComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-outputs-component\\",
@@ -6245,7 +6313,12 @@ export class MyBasicForwardRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 export interface Props {
   showInput: boolean;
@@ -6455,6 +6528,25 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"complex-meta-raw\\",
+})
+export class ComplexMetaRaw {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -6713,6 +6805,40 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"figma-button\\",
+})
+export class FigmaButton {
+  @Prop() icon: any;
+  @Prop() interactiveState: any;
+  @Prop() width: any;
+  @Prop() size: any;
+  @Prop() label: any;
+
+  render() {
+    return (
+      <button
+        data-icon={this.icon}
+        data-disabled={this.interactiveState}
+        data-width={this.width}
+        data-size={this.size}
+      >
+        {this.label}
+      </button>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 2d4bf25a51..b9aa7e2401 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -224,22 +224,47 @@ exports[`Svelte > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<script>
-  import { onMount } from \\"svelte\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          <script >
+  import { onMount } from 'svelte'
+
+
+
+
+
+
+
+
 
   export let onMessage;
-  export let onEvent;
-  export let message;
+export let onEvent;
+export let message;
+
+
+
+
+
+
+
+
+  let name = 'PatrickJS';
+
+
+  onMount(() => { onMessage(name);
+onEvent(message); });
+
+
+
+
 
-  let name = \\"PatrickJS\\";
 
-  onMount(() => {
-    onMessage(name);
-    onEvent(message);
-  });
 </script>
 
-<div />"
+<div ></div>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > BasicAttribute 1`] = `"<input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />"`;
@@ -1629,19 +1654,50 @@ exports[`Svelte > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<script>
-  export let inputRef;
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          <script >
 
-  let name = \\"PatrickJS\\";
-</script>
 
-<div><input class=\\"input\\" bind:this={inputRef} bind:value={name} /></div>
 
-<style>
-  .input {
-    color: red;
-  }
-</style>"
+
+
+
+
+
+
+
+    export let inputRef;
+
+
+
+
+
+
+
+
+    let name = 'PatrickJS';
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><input  class=\\"input\\"  bind:this={inputRef}  bind:value={name}  /></div>
+
+  <style>
+    .input {
+color: red;
+}
+  </style>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -1753,6 +1809,47 @@ exports[`Svelte > jsx > Javascript Test > classState 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ></div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > componentWithContext 1`] = `
 "<script>
   import { getContext, setContext } from \\"svelte\\";
@@ -1930,6 +2027,51 @@ exports[`Svelte > jsx > Javascript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+  export let icon;
+export let interactiveState;
+export let width;
+export let size;
+export let label;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  data-icon={icon}  data-disabled={interactiveState}  data-width={width}  data-size={size} >{label}</button>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > getterState 1`] = `
 "<script>
   export let foo;
@@ -3319,22 +3461,47 @@ exports[`Svelte > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Svelte > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<script lang=\\"ts\\">
-  import { onMount } from \\"svelte\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          <script lang='ts'>
+  import { onMount } from 'svelte'
+
+
+
+
+
+
+
+
 
   export let onMessage;
-  export let onEvent;
-  export let message;
+export let onEvent;
+export let message;
+
+
+
+
+
+
+
+
+  let name = 'PatrickJS';
+
+
+  onMount(() => { onMessage(name);
+onEvent(message); });
+
+
+
+
 
-  let name = \\"PatrickJS\\";
 
-  onMount(() => {
-    onMessage(name);
-    onEvent(message);
-  });
 </script>
 
-<div />"
+<div ></div>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > BasicAttribute 1`] = `
@@ -5061,26 +5228,60 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Svelte > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<script context=\\"module\\" lang=\\"ts\\">
-  export interface Props {
-    showInput: boolean;
-    inputRef: HTMLInputElement;
-  }
-</script>
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          <script context='module' lang='ts'>
+      export interface Props {
+showInput: boolean;
+inputRef: HTMLInputElement;
+}
 
-<script lang=\\"ts\\">
-  export let inputRef: Props[\\"inputRef\\"];
+    </script>
+    
 
-  let name = \\"PatrickJS\\";
-</script>
+    
+<script lang='ts'>
 
-<div><input class=\\"input\\" bind:this={inputRef} bind:value={name} /></div>
 
-<style>
-  .input {
-    color: red;
-  }
-</style>"
+
+
+
+
+
+
+
+
+    export let inputRef: Props['inputRef'];
+
+
+
+
+
+
+
+
+    let name = 'PatrickJS';
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><input  class=\\"input\\"  bind:this={inputRef}  bind:value={name}  /></div>
+
+  <style>
+    .input {
+color: red;
+}
+  </style>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -5207,6 +5408,47 @@ exports[`Svelte > jsx > Typescript Test > classState 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ></div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > componentWithContext 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface ComponentWithContextProps {
@@ -5426,6 +5668,51 @@ exports[`Svelte > jsx > Typescript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+  export let icon;
+export let interactiveState;
+export let width;
+export let size;
+export let label;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  data-icon={icon}  data-disabled={interactiveState}  data-width={width}  data-size={size} >{label}</button>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > getterState 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface ButtonProps {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 532b08e5ce..4b6a40dffd 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -198,7 +198,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Taro > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -1787,7 +1792,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Taro > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 import { View, Input } from \\"@tarojs/components\\";
@@ -1978,6 +1988,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function ComplexMetaRaw(props) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2225,6 +2252,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function FigmaButton(props) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
@@ -3890,7 +3943,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Taro > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -5746,7 +5804,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Taro > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5949,6 +6012,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function ComplexMetaRaw(props: any) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6230,6 +6310,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function FigmaButton(props: any) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index e25007a4b0..8e001ee85b 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -245,7 +245,10 @@ onMounted(() => {
 `;
 
 exports[`Vue > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -1751,7 +1754,9 @@ const name = ref(\\"PatrickJS\\");
 `;
 
 exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -1898,6 +1903,16 @@ const styleState = ref({
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<template>
+  <div></div>
+</template>"
+`;
+
 exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -2096,6 +2111,40 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup>
+const props = defineProps([
+  \\"icon\\",
+  \\"interactiveState\\",
+  \\"width\\",
+  \\"size\\",
+  \\"label\\",
+]);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
@@ -3618,7 +3667,10 @@ onMounted(() => {
 `;
 
 exports[`Vue > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -5319,7 +5371,9 @@ const name = ref(\\"PatrickJS\\");
 `;
 
 exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -5478,6 +5532,16 @@ const styleState = ref({
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<template>
+  <div></div>
+</template>"
+`;
+
 exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -5706,6 +5770,40 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang=\\"ts\\">
+const props = defineProps([
+  \\"icon\\",
+  \\"interactiveState\\",
+  \\"width\\",
+  \\"size\\",
+  \\"label\\",
+]);
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > getterState 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 14dd49c49a..05c3a9c3ca 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -308,7 +308,10 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -2064,7 +2067,9 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -2266,6 +2271,24 @@ export default defineComponent({
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"complex-meta-raw\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -2532,6 +2555,40 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"figma-button\\",
+
+  props: [\\"icon\\", \\"interactiveState\\", \\"width\\", \\"size\\", \\"label\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
@@ -4530,7 +4587,10 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -6541,7 +6601,9 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -6755,6 +6817,24 @@ export default defineComponent({
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+*/
+
+<template>
+  <div></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"complex-meta-raw\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -7051,6 +7131,40 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"figma-button\\",
+
+  props: [\\"icon\\", \\"interactiveState\\", \\"width\\", \\"size\\", \\"label\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > getterState 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 19d0e8a5d7..1e28e23eff 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -1892,6 +1892,11 @@ customElements.define(\\"my-basic-outputs-component\\", MyBasicOutputsComponent)
 
 exports[`webcomponent > jsx > Javascript Test > Basic Outputs Meta 1`] = `
 "/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-outputs-component></my-basic-outputs-component>
@@ -8296,6 +8301,11 @@ customElements.define(
 
 exports[`webcomponent > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 "/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-forward-ref-component></my-basic-forward-ref-component>
@@ -9076,6 +9086,99 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <complex-meta-raw></complex-meta-raw>
+ *
+ */
+class ComplexMetaRaw extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div></div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"complex-meta-raw\\", ComplexMetaRaw);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -10201,6 +10304,137 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <figma-button></figma-button>
+ *
+ */
+class FigmaButton extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [
+      \\"icon\\",
+      \\"interactiveState\\",
+      \\"width\\",
+      \\"size\\",
+      \\"label\\",
+    ];
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <button data-el=\\"button-figma-button-1\\">
+        <template data-el=\\"div-figma-button-1\\"><!-- props.label --></template>
+      </button>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-figma-button-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"data-icon\\", this.props.icon);
+        el.setAttribute(\\"data-disabled\\", this.props.interactiveState);
+        el.setAttribute(\\"data-width\\", this.props.width);
+        el.setAttribute(\\"data-size\\", this.props.size);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-figma-button-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.label);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"figma-button\\", FigmaButton);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > getterState 1`] = `
 "/**
  * Usage:
@@ -18433,6 +18667,11 @@ customElements.define(\\"my-basic-outputs-component\\", MyBasicOutputsComponent)
 
 exports[`webcomponent > jsx > Typescript Test > Basic Outputs Meta 1`] = `
 "/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-outputs-component></my-basic-outputs-component>
@@ -25060,7 +25299,12 @@ customElements.define(
 `;
 
 exports[`webcomponent > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"export interface Props {
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+export interface Props {
   showInput: boolean;
   inputRef: HTMLInputElement;
 }
@@ -25853,6 +26097,99 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false},\\"spreadStringValue\\":\\"f\\"}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <complex-meta-raw></complex-meta-raw>
+ *
+ */
+class ComplexMetaRaw extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div></div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"complex-meta-raw\\", ComplexMetaRaw);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > componentWithContext 1`] = `
 "export interface ComponentWithContextProps {
   content: string;
@@ -27008,6 +27345,137 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <figma-button></figma-button>
+ *
+ */
+class FigmaButton extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [
+      \\"icon\\",
+      \\"interactiveState\\",
+      \\"width\\",
+      \\"size\\",
+      \\"label\\",
+    ];
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <button data-el=\\"button-figma-button-1\\">
+        <template data-el=\\"div-figma-button-1\\"><!-- props.label --></template>
+      </button>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-figma-button-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"data-icon\\", this.props.icon);
+        el.setAttribute(\\"data-disabled\\", this.props.interactiveState);
+        el.setAttribute(\\"data-width\\", this.props.width);
+        el.setAttribute(\\"data-size\\", this.props.size);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-figma-button-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.label);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"figma-button\\", FigmaButton);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > getterState 1`] = `
 "export interface ButtonProps {
   foo: string;
diff --git a/packages/core/src/__tests__/data/meta/figma.ts b/packages/core/src/__tests__/data/meta/figma.ts
new file mode 100644
index 0000000000..5ade4321e9
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma.ts
@@ -0,0 +1,12 @@
+export type FigmaProp = {
+  type: 'instance' | 'string' | 'boolean' | 'enum' | 'children' | 'textContent';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: Record<string, any>;
+  key: string;
+};
+
+export type FigmaCodeConnect = {
+  name: string;
+  url: string;
+  props: Record<string, FigmaProp>;
+};
diff --git a/packages/core/src/__tests__/data/meta/figma/data.ts b/packages/core/src/__tests__/data/meta/figma/data.ts
new file mode 100644
index 0000000000..8a3446f086
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma/data.ts
@@ -0,0 +1,48 @@
+import { FigmaCodeConnect, FigmaProp } from '../figma';
+
+const buttonProps: Record<string, FigmaProp> = {
+  iconSmall: { type: 'instance', key: '📍 Icon Small' },
+  iconMedium: { type: 'instance', key: '📍 Icon Medium' },
+  label: { type: 'string', key: '✏️ Label' },
+  icon: {
+    type: 'boolean',
+    key: '👁️ Icon',
+    value: {
+      false: false,
+      true: 'placeholder',
+    },
+  },
+  interactiveState: {
+    type: 'enum',
+    key: 'Interactive State',
+    value: {
+      '(Def) Enabled': false,
+      Hovered: false,
+      Pressed: false,
+      Focused: false,
+      Disabled: 'true',
+    },
+  },
+  size: {
+    type: 'enum',
+    key: 'Size',
+    value: {
+      '(Def) Medium': false,
+      Small: 'small',
+    },
+  },
+  width: {
+    type: 'enum',
+    key: 'Width',
+    value: {
+      '(Def) Auto Width': false,
+      'Full Width': 'full',
+    },
+  },
+};
+
+export const outline: FigmaCodeConnect = {
+  name: 'def-button-beta-outlined',
+  url: 'https://www.figma.com/xxx',
+  props: buttonProps,
+};
diff --git a/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx b/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx
new file mode 100644
index 0000000000..48e32f61ce
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx
@@ -0,0 +1,19 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { outline } from './data';
+
+useMetadata({
+  figma: outline,
+});
+
+export default function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
diff --git a/packages/core/src/__tests__/data/meta/meta.ts b/packages/core/src/__tests__/data/meta/meta.ts
new file mode 100644
index 0000000000..c6200ee413
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/meta.ts
@@ -0,0 +1 @@
+export const xyz = { spreadStringValue: 'f' };
diff --git a/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx b/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx
new file mode 100644
index 0000000000..1b3a4bfd3d
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx
@@ -0,0 +1,11 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { abc } from './meta-sub';
+
+useMetadata({
+  x: 'y',
+  asdf: abc,
+});
+
+export default function ComplexMetaRaw() {
+  return <div></div>;
+}
diff --git a/packages/core/src/__tests__/data/meta/sub/meta-model.ts b/packages/core/src/__tests__/data/meta/sub/meta-model.ts
new file mode 100644
index 0000000000..8e7a177966
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/meta-model.ts
@@ -0,0 +1,7 @@
+export type MetaModel = {
+  stringValue?: string;
+  spreadStringValue?: string;
+  booleanValue?: boolean;
+  numberValue?: number;
+  innerObject?: MetaModel;
+};
diff --git a/packages/core/src/__tests__/data/meta/sub/meta-sub.ts b/packages/core/src/__tests__/data/meta/sub/meta-sub.ts
new file mode 100644
index 0000000000..5b0593d712
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/meta-sub.ts
@@ -0,0 +1,14 @@
+import { xyz } from '../meta';
+import { MetaModel } from './meta-model';
+
+export const abc: MetaModel = {
+  stringValue: 'd',
+  booleanValue: true,
+  numberValue: 1,
+  innerObject: { stringValue: 'inner', numberValue: 2, booleanValue: false },
+  ...xyz,
+};
+
+const aaa: MetaModel = { stringValue: 'i', ...xyz };
+
+export default aaa;
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index 1930cf3f2b..6aa214b422 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -1,5 +1,5 @@
+import { componentToReact } from '@/generators/react';
 import { parseJsx } from '..';
-import { componentToReact } from '../generators/react';
 import { runTestsForTarget } from './test-generator';
 
 import stamped from './data/blocks/stamped-io.raw.tsx?raw';
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index c939c914df..d3b759a6fe 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -2,7 +2,7 @@ import { parseJsx } from '@/parsers/jsx';
 import { Target } from '@/types/config';
 import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
 import { describe, expect, test } from 'vitest';
-import { MitosisComponent, createTypescriptProject, parseSvelte } from '..';
+import { MitosisComponent, Plugin, createTypescriptProject, parseSvelte } from '..';
 
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);
@@ -19,6 +19,8 @@ const basicForShow = getRawFile('./data/for/basic-for-show.raw.tsx');
 const basicBooleanAttribute = getRawFile('./data/basic-boolean-attribute.raw.tsx');
 const basicOnMountUpdate = getRawFile('./data/basic-onMount-update.raw.tsx');
 const basicContext = getRawFile('./data/basic-context.raw.tsx');
+const complexMeta = getRawFile('./data/meta/sub/complex-meta.raw.tsx');
+const figmaMeta = getRawFile('./data/meta/figma/figma.raw.tsx');
 const basicOutputsMeta = getRawFile('./data/basic-outputs-meta.raw.tsx');
 const basicOutputs = getRawFile('./data/basic-outputs.raw.tsx');
 const subComponent = getRawFile('./data/sub-component.raw.tsx');
@@ -227,6 +229,8 @@ const BASIC_TESTS: Tests = {
   'onInit & onMount': onInitonMount,
   'Basic Context': basicContext,
   'Basic Outputs Meta': basicOutputsMeta,
+  complexMeta,
+  figmaMeta,
   'Basic Outputs': basicOutputs,
   className: classNameJsx,
   'Image State': imageState,
@@ -578,6 +582,24 @@ const JSX_TESTS_FOR_TARGET: Partial<Record<Target, Tests[]>> = {
   ],
 };
 
+const metaDataPlugin: Plugin = () => ({
+  code: {
+    pre: (code: string, json: MitosisComponent) => {
+      if (json.meta.useMetadata) {
+        return `
+          /**
+          useMetadata:
+          ${JSON.stringify(json.meta.useMetadata)}
+          */
+          
+          ${code}`;
+      }
+
+      return code;
+    },
+  },
+});
+
 export const runTestsForJsx = () => {
   test('Remove Internal mitosis package', async () => {
     const component = parseJsx((await basicMitosis).code, {
@@ -597,8 +619,9 @@ export const runTestsForJsx = () => {
         Object.keys(tests).forEach((key) => {
           test(key, async () => {
             const singleTest = tests[key];
-            const t = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
-            const component = parseJsx((await t).code, config);
+            const testPromise = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
+            const t = await testPromise;
+            const component = parseJsx(t.code, { ...config, filePath: t.filePath });
             expect(component).toMatchSnapshot();
           });
         });
@@ -650,8 +673,14 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
   only?: string[]; // Test only some tests based on key
 }) => {
   const configurations: { options: X; testName: string }[] = [
-    { options: { ...options, typescript: false }, testName: 'Javascript Test' },
-    { options: { ...options, typescript: true }, testName: 'Typescript Test' },
+    {
+      options: { ...options, typescript: false, plugins: [metaDataPlugin] },
+      testName: 'Javascript Test',
+    },
+    {
+      options: { ...options, typescript: true, plugins: [metaDataPlugin] },
+      testName: 'Typescript Test',
+    },
   ];
 
   type ParserConfig = {
@@ -675,6 +704,7 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                 }
               : {
                   typescript: false,
+                  filePath,
                 },
           ),
         testsArray: filterTests(JSX_TESTS_FOR_TARGET[target], only),
@@ -694,6 +724,7 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                 const t = await basicMitosis;
                 const component = parseJsx(t.code, {
                   compileAwayPackages: ['@dummy/custom-mitosis'],
+                  filePath: t.filePath,
                 });
                 const output = generator(options)({ component, path: t.filePath });
                 expect(output).toMatchSnapshot();
diff --git a/packages/core/src/parsers/jsx/helpers.ts b/packages/core/src/parsers/jsx/helpers.ts
index b7dc1fbf11..8c1035c6fe 100644
--- a/packages/core/src/parsers/jsx/helpers.ts
+++ b/packages/core/src/parsers/jsx/helpers.ts
@@ -1,7 +1,14 @@
+import { tryParseJson } from '@/helpers/json';
+import { objectHasKey } from '@/helpers/typescript';
+import { Context } from '@/parsers/jsx/types';
 import * as babel from '@babel/core';
+import { BabelFileResult } from '@babel/core';
 import generate from '@babel/generator';
-import { tryParseJson } from '../../helpers/json';
-import { objectHasKey } from '../../helpers/typescript';
+import tsPlugin from '@babel/plugin-syntax-typescript';
+import tsPreset from '@babel/preset-typescript';
+import { Visitor } from '@babel/traverse';
+
+const typescriptBabelPreset = [tsPreset, { isTSX: true, allExtensions: true }];
 
 const { types } = babel;
 
@@ -14,7 +21,8 @@ export const uncapitalize = (str: string) => {
 };
 
 export const parseCode = (node: babel.types.Node) => {
-  return generate(node).code;
+  const generatorResult = generate(node);
+  return generatorResult.code;
 };
 
 export const parseCodeJson = (node: babel.types.Node) => {
@@ -33,3 +41,26 @@ export const transformAttributeName = (name: string) => {
   if (objectHasKey(HTML_ATTR_FROM_JSX, name)) return HTML_ATTR_FROM_JSX[name];
   return name;
 };
+
+export const babelStripTypes = (code: string, typescript?: boolean): string =>
+  typescript
+    ? (babel.transform(code, {
+        configFile: false,
+        babelrc: false,
+        presets: [typescriptBabelPreset],
+      })?.code as string)
+    : code;
+
+export const babelDefaultTransform = (
+  code: string,
+  visitor: Visitor<Context>,
+): BabelFileResult | null =>
+  babel.transform(code, {
+    configFile: false,
+    babelrc: false,
+    comments: false,
+    plugins: [[tsPlugin, { isTSX: true }], (): babel.PluginObj<Context> => ({ visitor })],
+  });
+
+export const isTypescriptFile = (fileName: string): boolean =>
+  fileName.endsWith('.ts') || fileName.endsWith('.tsx');
diff --git a/packages/core/src/parsers/jsx/hooks/index.ts b/packages/core/src/parsers/jsx/hooks/index.ts
index f1c177f956..99d57d5223 100644
--- a/packages/core/src/parsers/jsx/hooks/index.ts
+++ b/packages/core/src/parsers/jsx/hooks/index.ts
@@ -1,10 +1,12 @@
+import { HOOKS } from '@/constants/hooks';
+import { resolveMetadata } from '@/parsers/jsx/hooks/use-metadata';
+import { MitosisComponent } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
 import generate from '@babel/generator';
-import { HOOKS } from '../../../constants/hooks';
-import { MitosisComponent } from '../../../types/mitosis-component';
 import { parseCodeJson } from '../helpers';
 import { parseStateObjectToMitosisState } from '../state';
-import { ParseMitosisOptions } from '../types';
+import { Context, ParseMitosisOptions } from '../types';
 import { getHook } from './helpers';
 
 const { types } = babel;
@@ -31,32 +33,43 @@ export function generateUseStyleCode(expression: babel.types.CallExpression) {
  * the returned nodes array
  */
 export const collectModuleScopeHooks =
-  (component: MitosisComponent, options: ParseMitosisOptions) => (nodes: babel.types.Statement[]) =>
-    nodes.filter((node) => {
+  (context: Context, options: ParseMitosisOptions) => (path: NodePath<babel.types.Program>) => {
+    const programNodes = path.node.body;
+    return programNodes.filter((node) => {
       const hook = getHook(node);
       if (!hook) {
         return true;
       }
       if (types.isIdentifier(hook.callee)) {
         const metadataHooks = new Set((options.jsonHookNames || []).concat(HOOKS.METADATA));
-        if (metadataHooks.has(hook.callee.name)) {
+        const name = hook.callee.name;
+        if (metadataHooks.has(name)) {
+          const metaDataObjectNode = hook.arguments[0];
+
+          let json: any;
           try {
-            component.meta[hook.callee.name] = {
-              ...((component.meta[hook.callee.name] as Object) || {}),
-              ...parseCodeJson(hook.arguments[0]),
-            };
-            return false;
+            json = options.filePath
+              ? resolveMetadata({ context, node: metaDataObjectNode, nodePath: path, options })
+              : parseCodeJson(metaDataObjectNode);
           } catch (e) {
-            console.error(`Error parsing metadata hook ${hook.callee.name}`);
+            // Meta data isn't simple json convert it to ast
+            console.error(`Error parsing metadata hook ${name}`);
             throw e;
           }
-        } else if (hook.callee.name === HOOKS.STYLE) {
-          component.style = generateUseStyleCode(hook);
+
+          context.builder.component.meta[name] = {
+            ...((context.builder.component.meta[name] as Object) || {}),
+            ...json,
+          };
+          return false;
+        } else if (name === HOOKS.STYLE) {
+          context.builder.component.style = generateUseStyleCode(hook);
           return false;
-        } else if (hook.callee.name === HOOKS.DEFAULT_PROPS) {
-          parseDefaultPropsHook(component, hook);
+        } else if (name === HOOKS.DEFAULT_PROPS) {
+          parseDefaultPropsHook(context.builder.component, hook);
         }
       }
 
       return true;
     });
+  };
diff --git a/packages/core/src/parsers/jsx/hooks/use-metadata.ts b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
new file mode 100644
index 0000000000..534cf7e0cd
--- /dev/null
+++ b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
@@ -0,0 +1,219 @@
+import { mapImportDeclarationToMitosisImport } from '@/helpers/mitosis-imports';
+import {
+  babelDefaultTransform,
+  babelStripTypes,
+  isTypescriptFile,
+  parseCodeJson,
+} from '@/parsers/jsx/helpers';
+import { Context, ParseMitosisOptions, ResolvedImport } from '@/parsers/jsx/types';
+import { MitosisImport } from '@/types/mitosis-component';
+import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
+import { existsSync, readFileSync } from 'fs-extra-promise';
+import * as path from 'path';
+
+type ResolveData = {
+  nodePath: NodePath<babel.types.Program>;
+  currentFilePath?: string;
+  resolvedImports?: ResolvedImport[];
+};
+
+const getCodeFromImport = (
+  importObject: MitosisImport,
+  currentFile?: string,
+): { code?: string; typescript?: boolean; importFilePath?: string } => {
+  if (currentFile) {
+    // resolve path of import
+    const originFile = path.basename(currentFile);
+    const typescript = isTypescriptFile(originFile);
+    const importFile =
+      isTypescriptFile(importObject.path) || importObject.path.endsWith('.js')
+        ? importObject.path
+        : `${importObject.path}.${typescript ? 'ts' : 'js'}`;
+    const importFilePath = path.resolve(path.dirname(currentFile), importFile);
+    if (existsSync(importFilePath)) {
+      return { code: readFileSync(importFilePath).toString(), typescript, importFilePath };
+    }
+    return { typescript };
+  }
+
+  return {};
+};
+
+const fillDeclarations = ({
+  declaration,
+  valueToResolve,
+  currentFilePath,
+  nodePath,
+}: {
+  declaration: babel.types.VariableDeclaration;
+  valueToResolve: string;
+} & ResolveData): Record<string, any> => {
+  let result = {};
+  for (const variable of declaration.declarations) {
+    if (babel.types.isIdentifier(variable.id)) {
+      if (variable.id.name === valueToResolve && variable.init) {
+        const filled = resolveObjectsRecursive({
+          node: variable.init,
+          nodePath,
+          currentFilePath,
+        });
+
+        result = {
+          ...result,
+          ...filled,
+        };
+      }
+    }
+  }
+  return result;
+};
+
+const resolve = ({
+  nodePath,
+  currentFilePath,
+  valueToResolve,
+  resolvedImports,
+}: ResolveData & { valueToResolve: string }): Record<string, any> => {
+  let result = {};
+  const programNodes = nodePath.node.body;
+  for (const statement of programNodes) {
+    if (babel.types.isImportDeclaration(statement)) {
+      const importObject = mapImportDeclarationToMitosisImport(statement);
+
+      if (Object.keys(importObject.imports).includes(valueToResolve)) {
+        if (resolvedImports) {
+          // We add this statement, to remove it from imports of generated file
+          resolvedImports.push({ path: importObject.path, value: valueToResolve });
+        }
+
+        // In this case the variable was imported
+        const { code, typescript, importFilePath } = getCodeFromImport(
+          importObject,
+          currentFilePath,
+        );
+        if (code) {
+          const jsxToUse = babelStripTypes(code, typescript);
+
+          babelDefaultTransform(jsxToUse, {
+            Program(path) {
+              const statements: babel.types.Statement[] = path.node.body;
+              for (const pStatement of statements) {
+                if (babel.types.isExportNamedDeclaration(pStatement)) {
+                  const declaration = pStatement.declaration;
+                  if (babel.types.isVariableDeclaration(declaration)) {
+                    const filledDeclaration = fillDeclarations({
+                      declaration,
+                      valueToResolve,
+                      currentFilePath: importFilePath,
+                      nodePath: path,
+                    });
+                    result = {
+                      ...result,
+                      ...filledDeclaration,
+                    };
+                  }
+                }
+              }
+            },
+          });
+        }
+      }
+    } else if (babel.types.isVariableDeclaration(statement)) {
+      // In this case the variable is inside the same file
+      const filledDeclaration = fillDeclarations({
+        declaration: statement,
+        valueToResolve,
+        currentFilePath,
+        nodePath,
+      });
+      result = {
+        ...result,
+        ...filledDeclaration,
+      };
+    }
+  }
+
+  return result;
+};
+
+const resolveObjectsRecursive = ({
+  node,
+  nodePath,
+  currentFilePath,
+  resolvedImports,
+}: {
+  node: babel.types.Node;
+} & ResolveData): Record<string, any> => {
+  let result = {};
+
+  if (babel.types.isObjectExpression(node)) {
+    for (const prop of node.properties) {
+      if (babel.types.isObjectProperty(prop)) {
+        if (babel.types.isIdentifier(prop.key)) {
+          const objectKey = prop.key.name;
+          if (babel.types.isIdentifier(prop.value)) {
+            const valueToResolve = prop.value.name;
+            // In this case we have some variable defined in the same or another file
+            const resolved = resolve({
+              nodePath,
+              currentFilePath,
+              valueToResolve,
+              resolvedImports,
+            });
+            result = {
+              ...result,
+              [objectKey]: { ...resolved },
+            };
+          } else {
+            // In this case we have a primitive value
+            const json = parseCodeJson(prop.value);
+            result = {
+              ...result,
+              [objectKey]: json,
+            };
+          }
+        }
+      } else if (babel.types.isSpreadElement(prop)) {
+        if (babel.types.isIdentifier(prop.argument)) {
+          const valueToResolve = prop.argument.name;
+
+          result = {
+            ...result,
+            ...resolve({ nodePath, currentFilePath, valueToResolve }),
+          };
+        }
+      } else {
+        // In this case we have a primitive value
+        result = {
+          ...result,
+          ...parseCodeJson(prop),
+        };
+      }
+    }
+  }
+
+  return result;
+};
+
+export const resolveMetadata = ({
+  context,
+  node,
+  nodePath,
+  options,
+}: {
+  context: Context;
+  node: babel.types.Node;
+  nodePath: NodePath<babel.types.Program>;
+  options: ParseMitosisOptions;
+}): Record<string, any> => {
+  if (context.cwd && options?.filePath) {
+    const resolvedImports: ResolvedImport[] = [];
+    const currentFilePath = `${context.cwd}/${options.filePath}`;
+    const metadata = resolveObjectsRecursive({ node, nodePath, currentFilePath, resolvedImports });
+    context.builder.resolvedImports = resolvedImports;
+    return metadata;
+  }
+
+  return {};
+};
diff --git a/packages/core/src/parsers/jsx/imports.ts b/packages/core/src/parsers/jsx/imports.ts
index 05d1ca9f0c..32ab915e40 100644
--- a/packages/core/src/parsers/jsx/imports.ts
+++ b/packages/core/src/parsers/jsx/imports.ts
@@ -1,9 +1,7 @@
+import { mapImportDeclarationToMitosisImport } from '@/helpers/mitosis-imports';
 import * as babel from '@babel/core';
-import { mapImportDeclarationToMitosisImport } from '../../helpers/mitosis-imports';
 import { Context, ParseMitosisOptions } from './types';
 
-const { types } = babel;
-
 export const handleImportDeclaration = ({
   options,
   path,
@@ -24,7 +22,16 @@ export const handleImportDeclaration = ({
     return;
   }
   const importObject = mapImportDeclarationToMitosisImport(path.node);
-  context.builder.component.imports.push(importObject);
+  const resolvedImport = context.builder.resolvedImports?.find(
+    (rImport) => rImport.path === importObject.path,
+  );
+  if (resolvedImport) {
+    delete importObject.imports[resolvedImport.value];
+  }
+
+  if (Object.keys(importObject.imports).length > 0) {
+    context.builder.component.imports.push(importObject);
+  }
 
   path.remove();
 };
diff --git a/packages/core/src/parsers/jsx/jsx.ts b/packages/core/src/parsers/jsx/jsx.ts
index df6a1669ef..970130f9f3 100644
--- a/packages/core/src/parsers/jsx/jsx.ts
+++ b/packages/core/src/parsers/jsx/jsx.ts
@@ -1,23 +1,22 @@
+import { HOOKS } from '@/constants/hooks';
+import { createMitosisComponent } from '@/helpers/create-mitosis-component';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
+import { tryParseJson } from '@/helpers/json';
+import { stripNewlinesInStrings } from '@/helpers/replace-new-lines-in-strings';
+import { getSignalImportName } from '@/helpers/signals';
 import { traverseNodes } from '@/helpers/traverse-nodes';
+import { MitosisComponent } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
 import generate from '@babel/generator';
-import tsPlugin from '@babel/plugin-syntax-typescript';
 import tsPreset from '@babel/preset-typescript';
 import { pipe } from 'fp-ts/lib/function';
-import { HOOKS } from '../../constants/hooks';
-import { createMitosisComponent } from '../../helpers/create-mitosis-component';
-import { tryParseJson } from '../../helpers/json';
-import { stripNewlinesInStrings } from '../../helpers/replace-new-lines-in-strings';
-import { getSignalImportName } from '../../helpers/signals';
-import { MitosisComponent } from '../../types/mitosis-component';
 import { jsonToAst } from './ast';
 import { collectTypes, isTypeOrInterface } from './component-types';
 import { extractContextComponents } from './context';
 import { jsxElementToJson } from './element-parser';
 import { generateExports } from './exports';
 import { componentFunctionToJson } from './function-parser';
-import { isImportOrDefaultExport } from './helpers';
+import { babelDefaultTransform, babelStripTypes, isImportOrDefaultExport } from './helpers';
 import { collectModuleScopeHooks } from './hooks';
 import { getMagicString, getTargetId, getUseTargetStatements } from './hooks/use-target';
 import { handleImportDeclaration } from './imports';
@@ -25,7 +24,7 @@ import { undoPropsDestructure } from './props';
 import { findOptionalProps } from './props-types';
 import { findSignals } from './signals';
 import { mapStateIdentifiers } from './state';
-import { Context, ParseMitosisOptions } from './types';
+import { ParseMitosisOptions } from './types';
 
 const { types } = babel;
 
@@ -57,130 +56,112 @@ export function parseJsx(
     ..._options,
   };
 
-  const jsxToUse = options.typescript
-    ? jsx
-    : // strip typescript types by running through babel's TS preset.
-      (babel.transform(jsx, {
-        configFile: false,
-        babelrc: false,
-        presets: [typescriptBabelPreset],
-      })?.code as string);
-
   const stateToScope: string[] = [];
 
-  const output = babel.transform(jsxToUse, {
-    configFile: false,
-    babelrc: false,
-    comments: false,
-    plugins: [
-      [tsPlugin, { isTSX: true }],
-      (): babel.PluginObj<Context> => ({
-        visitor: {
-          JSXExpressionContainer(path, context) {
-            if (types.isJSXEmptyExpression(path.node.expression)) {
-              path.remove();
-            }
-          },
-          Program(path, context) {
-            if (context.builder) {
-              return;
-            }
-
-            beforeParse(path);
-
-            context.builder = {
-              component: createMitosisComponent(),
-            };
-
-            const keepStatements = path.node.body.filter(
-              (statement) => isImportOrDefaultExport(statement) || isTypeOrInterface(statement),
-            );
-
-            context.builder.component.exports = generateExports(path);
-
-            subComponentFunctions = path.node.body
-              .filter(
-                (node) =>
-                  !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node),
-              )
-              .map((node) => `export default ${generate(node).code!}`);
-
-            const preComponentCode = pipe(
-              path.node.body.filter((statement) => !isImportOrDefaultExport(statement)),
-              collectModuleScopeHooks(context.builder.component, options),
-              types.program,
-              generate,
-              (generatorResult) => generatorResult.code,
-            );
-
-            // TODO: support multiple? e.g. for others to add imports?
-            context.builder.component.hooks.preComponent = { code: preComponentCode };
-
-            path.replaceWith(types.program(keepStatements));
-          },
-          FunctionDeclaration(path, context) {
-            const { node } = path;
-            if (types.isIdentifier(node.id)) {
-              const name = node.id.name;
-              if (name[0].toUpperCase() === name[0]) {
-                path.traverse({
-                  /**
-                   * Plugin to find all `useTarget()` assignment calls inside of the component function body
-                   * and replace them with a magic string.
-                   */
-                  CallExpression(path) {
-                    if (!types.isCallExpression(path.node)) return;
-                    if (!types.isIdentifier(path.node.callee)) return;
-                    if (path.node.callee.name !== HOOKS.TARGET) return;
-
-                    const targetBlock = getUseTargetStatements(path);
-
-                    if (!targetBlock) return;
-
-                    const blockId = getTargetId(context.builder.component);
-
-                    // replace the useTarget() call with a magic string
-                    path.replaceWith(types.stringLiteral(getMagicString(blockId)));
-
-                    // store the target block in the component
-                    context.builder.component.targetBlocks = {
-                      ...context.builder.component.targetBlocks,
-                      [blockId]: targetBlock,
-                    };
-                  },
-                });
-                path.replaceWith(jsonToAst(componentFunctionToJson(node, context, stateToScope)));
-              }
-            }
-          },
-          ImportDeclaration(path, context) {
-            handleImportDeclaration({ options, path, context });
-          },
-          ExportDefaultDeclaration(path) {
-            path.replaceWith(path.node.declaration);
-          },
-          JSXElement(path) {
-            const { node } = path;
-            path.replaceWith(jsonToAst(jsxElementToJson(node)));
-          },
-          ExportNamedDeclaration(path, context) {
-            const { node } = path;
-            if (
-              babel.types.isTSInterfaceDeclaration(node.declaration) ||
-              babel.types.isTSTypeAliasDeclaration(node.declaration)
-            ) {
-              collectTypes(path, context);
-            }
-          },
-          TSTypeAliasDeclaration(path, context) {
-            collectTypes(path, context);
-          },
-          TSInterfaceDeclaration(path, context) {
-            collectTypes(path, context);
-          },
-        },
-      }),
-    ],
+  const jsxToUse = babelStripTypes(jsx, !options.typescript);
+
+  const output = babelDefaultTransform(jsxToUse, {
+    JSXExpressionContainer(path, context) {
+      if (types.isJSXEmptyExpression(path.node.expression)) {
+        path.remove();
+      }
+    },
+    Program(path, context) {
+      if (context.builder) {
+        return;
+      }
+
+      beforeParse(path);
+
+      context.builder = {
+        component: createMitosisComponent(),
+      };
+
+      const keepStatements = path.node.body.filter(
+        (statement) => isImportOrDefaultExport(statement) || isTypeOrInterface(statement),
+      );
+
+      context.builder.component.exports = generateExports(path);
+
+      subComponentFunctions = path.node.body
+        .filter(
+          (node) => !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node),
+        )
+        .map((node) => `export default ${generate(node).code!}`);
+
+      const preComponentCode = pipe(
+        path,
+        collectModuleScopeHooks(context, options),
+        types.program,
+        generate,
+        (generatorResult) => generatorResult.code,
+      );
+
+      // TODO: support multiple? e.g. for others to add imports?
+      context.builder.component.hooks.preComponent = { code: preComponentCode };
+
+      path.replaceWith(types.program(keepStatements));
+    },
+    FunctionDeclaration(path, context) {
+      const { node } = path;
+      if (types.isIdentifier(node.id)) {
+        const name = node.id.name;
+        if (name[0].toUpperCase() === name[0]) {
+          path.traverse({
+            /**
+             * Plugin to find all `useTarget()` assignment calls inside of the component function body
+             * and replace them with a magic string.
+             */
+            CallExpression(path) {
+              if (!types.isCallExpression(path.node)) return;
+              if (!types.isIdentifier(path.node.callee)) return;
+              if (path.node.callee.name !== HOOKS.TARGET) return;
+
+              const targetBlock = getUseTargetStatements(path);
+
+              if (!targetBlock) return;
+
+              const blockId = getTargetId(context.builder.component);
+
+              // replace the useTarget() call with a magic string
+              path.replaceWith(types.stringLiteral(getMagicString(blockId)));
+
+              // store the target block in the component
+              context.builder.component.targetBlocks = {
+                ...context.builder.component.targetBlocks,
+                [blockId]: targetBlock,
+              };
+            },
+          });
+          path.replaceWith(jsonToAst(componentFunctionToJson(node, context, stateToScope)));
+        }
+      }
+    },
+    ImportDeclaration(path, context) {
+      handleImportDeclaration({ options, path, context });
+    },
+    ExportDefaultDeclaration(path) {
+      path.replaceWith(path.node.declaration);
+    },
+    JSXElement(path) {
+      const { node } = path;
+      path.replaceWith(jsonToAst(jsxElementToJson(node)));
+    },
+    ExportNamedDeclaration(path, context) {
+      const { node } = path;
+      if (
+        babel.types.isTSInterfaceDeclaration(node.declaration) ||
+        babel.types.isTSTypeAliasDeclaration(node.declaration)
+      ) {
+        collectTypes(path, context);
+      }
+    },
+    TSTypeAliasDeclaration(path, context) {
+      collectTypes(path, context);
+    },
+    TSInterfaceDeclaration(path, context) {
+      collectTypes(path, context);
+    },
   });
 
   if (!output || !output.code) {
diff --git a/packages/core/src/parsers/jsx/types.ts b/packages/core/src/parsers/jsx/types.ts
index ce923be699..c9522f4959 100644
--- a/packages/core/src/parsers/jsx/types.ts
+++ b/packages/core/src/parsers/jsx/types.ts
@@ -1,5 +1,5 @@
+import { MitosisComponent } from '@/types/mitosis-component';
 import { Project } from 'ts-morph';
-import { MitosisComponent } from '../../types/mitosis-component';
 
 export type ParseMitosisOptions = {
   jsonHookNames?: string[];
@@ -11,9 +11,16 @@ export type ParseMitosisOptions = {
   filePath?: string;
 };
 
+export type ResolvedImport = {
+  path: string;
+  value: string;
+};
+
 export type Context = {
   // Babel has other context
+  cwd?: string;
   builder: {
     component: MitosisComponent;
+    resolvedImports?: ResolvedImport[];
   };
 };
diff --git a/packages/docs/src/routes/docs/customizability/index.mdx b/packages/docs/src/routes/docs/customizability/index.mdx
index a318ca765a..46230ba177 100644
--- a/packages/docs/src/routes/docs/customizability/index.mdx
+++ b/packages/docs/src/routes/docs/customizability/index.mdx
@@ -62,9 +62,13 @@ You will see that we traverse the JSON nodes, and for each MitosisNode, we remov
 
 ## useMetadata
 
-What happens if you want a plugin to only apply to a specific set of components? Or if you'd like to provide some metadata for your plugin, and that metadata will depend on which component is being compiled?
+What happens if you want a plugin to only apply to a specific set of components?
+Or if you'd like to provide some metadata for your plugin,
+and that metadata will depend on which component is being compiled?
 
-This is where our `useMetadata` hook comes in handy. All you need to do is import and use the hook (you can use it anywhere in your mitosis component file, even at the top root level!):
+This is where our `useMetadata` hook comes in handy.
+All you need to do is import and use the hook
+(you can use it anywhere in your mitosis component file, even at the top root level!):
 
 ```tsx
 import { useMetadata } from '@builder.io/mitosis';
@@ -76,7 +80,9 @@ export default function SmileReviews(props: SmileReviewsProps) {
 }
 ```
 
-The metadata will be stored in your mitosis component's JSON, under `json.meta.useMetadata.mySpecialComponentType`. You can then use it in your JSON pre/post plugins:
+The metadata will be stored in your mitosis component's JSON
+, under `json.meta.useMetadata.mySpecialComponentType`.
+You can then use it in your JSON pre/post plugins:
 
 ```tsx
 const plugin = {
@@ -91,6 +97,8 @@ const plugin = {
 };
 ```
 
+Check the [example](https://github.com/BuilderIO/mitosis/tree/main/examples/metadata/src/components/metadata.lite.tsx) to see a complex `useMetadata` usage.
+
 ## Component JSON
 
 The way Mitosis' engine works is:
diff --git a/yarn.lock b/yarn.lock
index dbf4067591..313e86fc11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3172,6 +3172,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@builder.io/metadata-example@workspace:examples/metdata":
+  version: 0.0.0-use.local
+  resolution: "@builder.io/metadata-example@workspace:examples/metdata"
+  dependencies:
+    "@builder.io/mitosis": "workspace:*"
+    "@builder.io/mitosis-cli": "workspace:*"
+    eslint: "npm:^7.21.0"
+  languageName: unknown
+  linkType: soft
+
 "@builder.io/mitosis-cli@workspace:*, @builder.io/mitosis-cli@workspace:packages/cli":
   version: 0.0.0-use.local
   resolution: "@builder.io/mitosis-cli@workspace:packages/cli"

From f94ea1163a9964090183fbdf1cf00b00ef78036e Mon Sep 17 00:00:00 2001
From: builderio-bot <sami+builderbot@builder.io>
Date: Wed, 15 Jan 2025 07:47:44 -0400
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=93=A6=20Publish=20Mitosis=20(#1658)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/clean-cobras-know.md | 31 -----------------
 .changeset/polite-pugs-pull.md  | 31 -----------------
 packages/cli/CHANGELOG.md       |  8 +++++
 packages/cli/package.json       |  2 +-
 packages/core/CHANGELOG.md      | 60 +++++++++++++++++++++++++++++++++
 packages/core/package.json      |  2 +-
 6 files changed, 70 insertions(+), 64 deletions(-)
 delete mode 100644 .changeset/clean-cobras-know.md
 delete mode 100644 .changeset/polite-pugs-pull.md

diff --git a/.changeset/clean-cobras-know.md b/.changeset/clean-cobras-know.md
deleted file mode 100644
index 7e55cccc2e..0000000000
--- a/.changeset/clean-cobras-know.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-'@builder.io/mitosis': patch
----
-
-[All] Refactored `useMetadata` hook to enable import resolution instead of simple `JSON5` parsing.
-
-You could use a normal JS `Object` and import it inside your `*.lite.tsx` file like this:
-
-```ts
-// data.ts
-
-export const myMetadata: Record<string, string | number> = {
-  a: 'b',
-  c: 1,
-};
-```
-
-```tsx
-// my-button.lite.tsx
-import { useMetadata } from '@builder.io/mitosis';
-import { myMetadata } from './data.ts';
-
-useMetadata({
-  x: 'y',
-  my: myMetadata,
-});
-
-export default function MyButton() {
-  return <button></button>;
-}
-```
diff --git a/.changeset/polite-pugs-pull.md b/.changeset/polite-pugs-pull.md
deleted file mode 100644
index a15e74df56..0000000000
--- a/.changeset/polite-pugs-pull.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-'@builder.io/mitosis': patch
----
-
-[angular]: Fix issue with events forced to become `toLowerCase()`.
-
-Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase. 
-[DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
-
-Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.
-
-If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`:
-
-```tsx
-import { useMetadata } from '@builder.io/mitosis';
-
-useMetadata({
-  angular: {
-    nativeEvents: ['onNativeEvent'],
-  },
-});
-
-export default function MyComponent(props) {
-  return (
-    <div>
-      <input onNativeEvent={(event) => console.log(event)} />
-      Hello!
-    </div>
-  );
-}
-```
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index da6eac4936..4867a6e2a9 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @builder.io/mitosis-cli
 
+## 0.5.25
+
+### Patch Changes
+
+- Updated dependencies [af43f50]
+- Updated dependencies [20ad8dc]
+  - @builder.io/mitosis@0.5.25
+
 ## 0.5.24
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 28f0cc7fd8..978cbb8e47 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.24",
+  "version": "0.5.25",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 80cd30c496..cf92021fc5 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,65 @@
 # Change Log
 
+## 0.5.25
+
+### Patch Changes
+
+- af43f50: [All] Refactored `useMetadata` hook to enable import resolution instead of simple `JSON5` parsing.
+
+  You could use a normal JS `Object` and import it inside your `*.lite.tsx` file like this:
+
+  ```ts
+  // data.ts
+
+  export const myMetadata: Record<string, string | number> = {
+    a: 'b',
+    c: 1,
+  };
+  ```
+
+  ```tsx
+  // my-button.lite.tsx
+  import { useMetadata } from '@builder.io/mitosis';
+  import { myMetadata } from './data.ts';
+
+  useMetadata({
+    x: 'y',
+    my: myMetadata,
+  });
+
+  export default function MyButton() {
+    return <button></button>;
+  }
+  ```
+
+- 20ad8dc: [angular]: Fix issue with events forced to become `toLowerCase()`.
+
+  Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase.
+  [DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
+
+  Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.
+
+  If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`:
+
+  ```tsx
+  import { useMetadata } from '@builder.io/mitosis';
+
+  useMetadata({
+    angular: {
+      nativeEvents: ['onNativeEvent'],
+    },
+  });
+
+  export default function MyComponent(props) {
+    return (
+      <div>
+        <input onNativeEvent={(event) => console.log(event)} />
+        Hello!
+      </div>
+    );
+  }
+  ```
+
 ## 0.5.24
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 55f53e9ed0..36760b341d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.24",
+  "version": "0.5.25",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

From 57bdffe72e68a953c41c4d366031b1bab92d0879 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:55:31 +0100
Subject: [PATCH 4/7] fix: issue in angular with definite assignment (#1660)

* fix: issue in angular with definite assignment

* chore: update snapshots
---
 .changeset/quiet-camels-double.md             |  5 ++++
 .../__snapshots__/angular.import.test.ts.snap | 14 +++++-----
 .../__snapshots__/angular.mapper.test.ts.snap | 14 +++++-----
 .../__snapshots__/angular.state.test.ts.snap  | 14 +++++-----
 .../__snapshots__/angular.styles.test.ts.snap | 14 +++++-----
 .../__snapshots__/angular.test.ts.snap        | 28 +++++++++----------
 packages/core/src/generators/angular/index.ts |  7 +++--
 7 files changed, 52 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/quiet-camels-double.md

diff --git a/.changeset/quiet-camels-double.md b/.changeset/quiet-camels-double.md
new file mode 100644
index 0000000000..892545a367
--- /dev/null
+++ b/.changeset/quiet-camels-double.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[angular] fix issue with definite assignment (!) for props with defaultProps
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 9eae1c7824..fd29d4e5e0 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -8637,7 +8637,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -11933,11 +11933,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -12069,11 +12069,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index e240c67e28..678825f373 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -8783,7 +8783,7 @@ import { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -12123,11 +12123,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -12260,11 +12260,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index ca8e43d62e..df0e55ee93 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -8927,7 +8927,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -12343,11 +12343,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -12479,11 +12479,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index e11df639ef..dfef1606d6 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -7700,7 +7700,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -10720,11 +10720,11 @@ const defaultProps = {
   \`,
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -10849,11 +10849,11 @@ const defaultProps = {
   \`,
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 2f51bbbf88..7da64dcada 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -16163,7 +16163,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -16288,7 +16288,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 })
 export default class ContentSlotJsxCode {
   @Input() attributes!: Props[\\"attributes\\"];
-  @Input() content!: Props[\\"content\\"] = defaultProps[\\"content\\"];
+  @Input() content: Props[\\"content\\"] = defaultProps[\\"content\\"];
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
 
@@ -22434,11 +22434,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -22574,11 +22574,11 @@ const defaultProps = {
   imports: [CommonModule],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
@@ -22703,11 +22703,11 @@ const defaultProps = {
   ],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
@@ -22838,11 +22838,11 @@ const defaultProps = {
   imports: [CommonModule],
 })
 export default class Button {
-  @Input() link!: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
+  @Input() link: ButtonProps[\\"link\\"] = defaultProps[\\"link\\"];
   @Input() attributes!: ButtonProps[\\"attributes\\"];
-  @Input() openLinkInNewTab!: ButtonProps[\\"openLinkInNewTab\\"] =
+  @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
-  @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
   @Output() onClick = new EventEmitter();
 
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index 20bd23ecf9..ae13fd59cf 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -1077,9 +1077,12 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       ${Array.from(props)
         .filter((item) => !isSlotProperty(item) && item !== 'children')
         .map((item) => {
+          const hasDefaultProp = json.defaultProps && json.defaultProps.hasOwnProperty(item);
           const propType = propsTypeRef ? `${propsTypeRef}["${item}"]` : 'any';
-          let propDeclaration = `@Input() ${item}${options.typescript ? `!: ${propType}` : ''}`;
-          if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+          let propDeclaration = `@Input() ${item}${
+            options.typescript ? `${hasDefaultProp ? '' : '!'}: ${propType}` : ''
+          }`;
+          if (hasDefaultProp) {
             propDeclaration += ` = defaultProps["${item}"]`;
           }
           return propDeclaration;

From dbfc4623e75080666a64d0f094898da69ae42f6f Mon Sep 17 00:00:00 2001
From: builderio-bot <sami+builderbot@builder.io>
Date: Wed, 15 Jan 2025 09:58:47 -0400
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=93=A6=20Publish=20Mitosis=20(#1662)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/quiet-camels-double.md | 5 -----
 packages/cli/CHANGELOG.md         | 7 +++++++
 packages/cli/package.json         | 2 +-
 packages/core/CHANGELOG.md        | 6 ++++++
 packages/core/package.json        | 2 +-
 5 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/quiet-camels-double.md

diff --git a/.changeset/quiet-camels-double.md b/.changeset/quiet-camels-double.md
deleted file mode 100644
index 892545a367..0000000000
--- a/.changeset/quiet-camels-double.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@builder.io/mitosis': patch
----
-
-[angular] fix issue with definite assignment (!) for props with defaultProps
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 4867a6e2a9..be6b44c214 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @builder.io/mitosis-cli
 
+## 0.5.26
+
+### Patch Changes
+
+- Updated dependencies [57bdffe]
+  - @builder.io/mitosis@0.5.26
+
 ## 0.5.25
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 978cbb8e47..3e7f0616b8 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.25",
+  "version": "0.5.26",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index cf92021fc5..85ce12bbfb 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.5.26
+
+### Patch Changes
+
+- 57bdffe: [angular] fix issue with definite assignment (!) for props with defaultProps
+
 ## 0.5.25
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 36760b341d..96c6a4ecf0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.25",
+  "version": "0.5.26",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

From 92ad2c671d359ea7ec55e5b0cbeb778ee412cd07 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Wed, 15 Jan 2025 13:44:15 -0500
Subject: [PATCH 6/7] Fix/mitosis dep (#1663)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* rm dep

* 👹

* 🏃

* 👹
---
 .changeset/gold-cougars-collect.md            |  6 ++
 packages/core/package.json                    |  2 -
 packages/core/src/__tests__/qwik.test.ts      |  7 +-
 .../src/parsers/jsx/hooks/use-metadata.ts     |  2 +-
 yarn.lock                                     | 68 -------------------
 5 files changed, 11 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/gold-cougars-collect.md

diff --git a/.changeset/gold-cougars-collect.md b/.changeset/gold-cougars-collect.md
new file mode 100644
index 0000000000..f34ebf2581
--- /dev/null
+++ b/.changeset/gold-cougars-collect.md
@@ -0,0 +1,6 @@
+---
+'@builder.io/mitosis': patch
+'@builder.io/mitosis-cli': patch
+---
+
+Misc: stop using `fs-extra-promise` dependency
diff --git a/packages/core/package.json b/packages/core/package.json
index 96c6a4ecf0..8be7f083ec 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -86,7 +86,6 @@
     "@types/babel__core": "7.1.14",
     "@types/dedent": "^0.7.0",
     "@types/estree": "^1.0.2",
-    "@types/fs-extra-promise": "^1.0.10",
     "@types/hash-sum": "^1.0.0",
     "@types/json5": "0.0.30",
     "@types/lodash": "^4.14.165",
@@ -95,7 +94,6 @@
     "@types/prettier": "^2.1.5",
     "@types/rollup__plugin-virtual": "^2.0.1",
     "concurrently": "^8.2.2",
-    "fs-extra-promise": "^1.0.1",
     "rimraf": "^5.0.5",
     "rollup": "^2.70.1",
     "strip-ansi": "^6.0.1",
diff --git a/packages/core/src/__tests__/qwik.test.ts b/packages/core/src/__tests__/qwik.test.ts
index 53cf4458d7..f7aa030ca5 100644
--- a/packages/core/src/__tests__/qwik.test.ts
+++ b/packages/core/src/__tests__/qwik.test.ts
@@ -1,9 +1,9 @@
-import { outputFileAsync } from 'fs-extra-promise';
+import { mkdirSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
 import stripAnsi from 'strip-ansi';
 import { File } from '../generators/qwik';
 import { componentToQwik } from '../generators/qwik/component-generator';
-import { addComponent, createFileSet, FileSet } from '../generators/qwik/index';
+import { FileSet, addComponent, createFileSet } from '../generators/qwik/index';
 import { builderContentToMitosisComponent } from '../parsers/builder';
 import { parseJsx } from '../parsers/jsx';
 import {
@@ -27,7 +27,8 @@ const debugOutput = async (fileSet: FileSet) => {
   if (debugFiles) {
     for (const key in fileSet) {
       const file = (fileSet as any)[key];
-      await outputFileAsync(resolve(base, file.path), file.contents);
+      await mkdirSync(base, { recursive: true });
+      await writeFileSync(resolve(base, file.path), file.contents);
     }
   }
 };
diff --git a/packages/core/src/parsers/jsx/hooks/use-metadata.ts b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
index 534cf7e0cd..4ffd9fc430 100644
--- a/packages/core/src/parsers/jsx/hooks/use-metadata.ts
+++ b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
@@ -9,7 +9,7 @@ import { Context, ParseMitosisOptions, ResolvedImport } from '@/parsers/jsx/type
 import { MitosisImport } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
 import { NodePath } from '@babel/core';
-import { existsSync, readFileSync } from 'fs-extra-promise';
+import { existsSync, readFileSync } from 'fs';
 import * as path from 'path';
 
 type ResolveData = {
diff --git a/yarn.lock b/yarn.lock
index 313e86fc11..7f35947e90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3376,7 +3376,6 @@ __metadata:
     "@types/babel__core": "npm:7.1.14"
     "@types/dedent": "npm:^0.7.0"
     "@types/estree": "npm:^1.0.2"
-    "@types/fs-extra-promise": "npm:^1.0.10"
     "@types/hash-sum": "npm:^1.0.0"
     "@types/json5": "npm:0.0.30"
     "@types/lodash": "npm:^4.14.165"
@@ -3388,7 +3387,6 @@ __metadata:
     concurrently: "npm:^8.2.2"
     csstype: "npm:^3.0.4"
     fp-ts: "npm:^2.11.10"
-    fs-extra-promise: "npm:^1.0.1"
     hash-sum: "npm:^2.0.0"
     json5: "npm:^2.1.3"
     lodash: "npm:^4.17.20"
@@ -6226,13 +6224,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/bluebird@npm:*":
-  version: 3.5.36
-  resolution: "@types/bluebird@npm:3.5.36"
-  checksum: 10/74d3870a745a3a70a5f516b8a85746938506b013ca4f8722b4f9b252860efd645d7ce7599dca8e0c86b4145c290f67daa812ad6c9274cc1b450d690b60de7b19
-  languageName: node
-  linkType: hard
-
 "@types/body-parser@npm:*":
   version: 1.19.2
   resolution: "@types/body-parser@npm:1.19.2"
@@ -6453,26 +6444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/fs-extra-promise@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "@types/fs-extra-promise@npm:1.0.10"
-  dependencies:
-    "@types/bluebird": "npm:*"
-    "@types/fs-extra": "npm:^4"
-    "@types/node": "npm:*"
-  checksum: 10/a65d59cb9335df5ed30deade86763c99771b76694b04bec15bbadaeedf4e4f8557aa7d7cbf6d08f2e92ac4e5b4be071e9a89f50d03490dd3fe8d2699029e6b74
-  languageName: node
-  linkType: hard
-
-"@types/fs-extra@npm:^4":
-  version: 4.0.12
-  resolution: "@types/fs-extra@npm:4.0.12"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10/a78250cb222bb64966747ca16120485e1b14d985a2d1bb6b2d4f21113925c39155e02749c4d6fcc4c6e10b80fc332345a89f5a93756439aaede6f7d4ea81db89
-  languageName: node
-  linkType: hard
-
 "@types/fs-extra@npm:^9.0.13":
   version: 9.0.13
   resolution: "@types/fs-extra@npm:9.0.13"
@@ -8756,13 +8727,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bluebird@npm:^3.5.0":
-  version: 3.7.2
-  resolution: "bluebird@npm:3.7.2"
-  checksum: 10/007c7bad22c5d799c8dd49c85b47d012a1fe3045be57447721e6afbd1d5be43237af1db62e26cb9b0d9ba812d2e4ca3bac82f6d7e016b6b88de06ee25ceb96e7
-  languageName: node
-  linkType: hard
-
 "bn.js@npm:^4.0.0, bn.js@npm:^4.1.0, bn.js@npm:^4.11.9":
   version: 4.12.0
   resolution: "bn.js@npm:4.12.0"
@@ -12879,16 +12843,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra-promise@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "fs-extra-promise@npm:1.0.1"
-  dependencies:
-    bluebird: "npm:^3.5.0"
-    fs-extra: "npm:^2.1.2"
-  checksum: 10/09b29c5df8e1b333090deef0127ba9094ebb7dc9a4cd7c8163b048b82eaccb978674b2cf3565d2d8332c40ecfd0e6587f1415d10ff3b7f99735b5c52b676d62e
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^10.1.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
@@ -12911,16 +12865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "fs-extra@npm:2.1.2"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    jsonfile: "npm:^2.1.0"
-  checksum: 10/2cd92acba96fc2a180b7fc9d7966765d3eb4dfe8b52c112da62d421b40d07554e814ead8364f7be002449bfecb2180ec9ee37f85c4eee28e5281c7969c5cd059
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^7.0.1, fs-extra@npm:~7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -15044,18 +14988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^2.1.0":
-  version: 2.4.0
-  resolution: "jsonfile@npm:2.4.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10/517656e0a7c4eda5a90341dd0ec9e9b7590d0c77d66d8aad0162615dfc7c5f219c82565b927cc4cc774ca93e484d118a274ef0def74279a3d8afb4ff2f4e4800
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"

From ed0d7fae13ed29295e73ad2f3da9edef475502a8 Mon Sep 17 00:00:00 2001
From: builderio-bot <sami+builderbot@builder.io>
Date: Wed, 15 Jan 2025 16:22:15 -0400
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=93=A6=20Publish=20Mitosis=20(#1664)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/gold-cougars-collect.md | 6 ------
 packages/cli/CHANGELOG.md          | 8 ++++++++
 packages/cli/package.json          | 2 +-
 packages/core/CHANGELOG.md         | 6 ++++++
 packages/core/package.json         | 2 +-
 5 files changed, 16 insertions(+), 8 deletions(-)
 delete mode 100644 .changeset/gold-cougars-collect.md

diff --git a/.changeset/gold-cougars-collect.md b/.changeset/gold-cougars-collect.md
deleted file mode 100644
index f34ebf2581..0000000000
--- a/.changeset/gold-cougars-collect.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@builder.io/mitosis': patch
-'@builder.io/mitosis-cli': patch
----
-
-Misc: stop using `fs-extra-promise` dependency
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index be6b44c214..518537720d 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @builder.io/mitosis-cli
 
+## 0.5.27
+
+### Patch Changes
+
+- 92ad2c6: Misc: stop using `fs-extra-promise` dependency
+- Updated dependencies [92ad2c6]
+  - @builder.io/mitosis@0.5.27
+
 ## 0.5.26
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 3e7f0616b8..1b9414e488 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.26",
+  "version": "0.5.27",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 85ce12bbfb..35fd88b3e2 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.5.27
+
+### Patch Changes
+
+- 92ad2c6: Misc: stop using `fs-extra-promise` dependency
+
 ## 0.5.26
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 8be7f083ec..8b665eeb1f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.26",
+  "version": "0.5.27",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {