From a3d65cad88d4a08460c09ef25cd7173d92093a21 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Wed, 14 Jun 2023 17:21:49 -0300
Subject: [PATCH] Feature/use target (#1206)

* init useTarget

* l

* v

* f

* f

* add test

* get parseJsx working

* f

* clean

* clean

* f

* f

* f

* f

* f

* f

* f

* f

* f

* rmv

* throw

* f
---
 package.json                                  |   9 +-
 .../__snapshots__/alpine.test.ts.snap         |  30 ++
 .../__snapshots__/angular.import.test.ts.snap |  56 +++
 .../__snapshots__/angular.mapper.test.ts.snap |  58 +++
 .../__snapshots__/angular.test.ts.snap        |  98 ++++
 .../__tests__/__snapshots__/html.test.ts.snap | 122 +++++
 .../__snapshots__/liquid.test.ts.snap         |  10 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  52 +++
 .../__snapshots__/marko.test.ts.snap          |  22 +
 .../__snapshots__/parse-jsx.test.ts.snap      | 258 +++++++++++
 .../__snapshots__/preact.test.ts.snap         |  34 ++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  32 ++
 .../__snapshots__/react-native.test.ts.snap   |  56 +++
 .../__snapshots__/react.test.ts.snap          |  32 ++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  40 ++
 .../__snapshots__/solid.test.ts.snap          |  76 +++
 .../__snapshots__/stencil.test.ts.snap        |  38 ++
 .../__snapshots__/svelte.test.ts.snap         |  22 +
 .../__tests__/__snapshots__/taro.test.ts.snap |  34 ++
 .../vue-composition.test.ts.snap              |  30 ++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  42 ++
 .../__snapshots__/webcomponent.test.ts.snap   | 436 +++++++++++++-----
 .../src/__tests__/data/use-target.raw.tsx     |  37 ++
 packages/core/src/__tests__/test-generator.ts |   2 +
 packages/core/src/constants/hooks.ts          |   7 +
 packages/core/src/constants/html_tags.ts      |  17 +
 .../core/src/generators/alpine/generate.ts    |   9 +-
 packages/core/src/generators/angular.ts       |  19 +-
 packages/core/src/generators/html.ts          | 148 +++---
 packages/core/src/generators/liquid.ts        |   4 +-
 packages/core/src/generators/lit/generate.ts  |   9 +-
 .../core/src/generators/marko/generate.ts     |  10 +-
 packages/core/src/generators/mitosis.ts       |   7 +-
 .../generators/qwik/component-generator.ts    |   4 +-
 .../core/src/generators/qwik/src-generator.ts |   4 +-
 packages/core/src/generators/react/blocks.ts  |   4 +-
 .../core/src/generators/react/generator.ts    |  15 +-
 packages/core/src/generators/react/types.ts   |   1 +
 packages/core/src/generators/rsc.ts           |   1 +
 packages/core/src/generators/solid/blocks.ts  |   4 +-
 packages/core/src/generators/solid/index.ts   |   4 +-
 .../core/src/generators/stencil/generate.ts   |   8 +-
 packages/core/src/generators/svelte/blocks.ts |   4 +-
 packages/core/src/generators/svelte/svelte.ts |   4 +-
 packages/core/src/generators/template.ts      |   4 +-
 packages/core/src/generators/vue/blocks.ts    |   4 +-
 packages/core/src/generators/vue/vue.ts       |   9 +-
 packages/core/src/helpers/merge-options.ts    |  22 +-
 .../core/src/helpers/plugins/process-code.ts  | 103 -----
 .../src/helpers/plugins/process-code/index.ts |  87 ++++
 .../src/helpers/plugins/process-code/types.ts |  21 +
 .../helpers/plugins/process-target-blocks.ts  |  60 +++
 packages/core/src/index.ts                    |  58 +--
 .../core/src/parsers/jsx/element-parser.ts    |   6 +-
 .../core/src/parsers/jsx/function-parser.ts   |  75 ++-
 packages/core/src/parsers/jsx/helpers.ts      |  17 -
 packages/core/src/parsers/jsx/hooks.ts        |  69 ---
 .../core/src/parsers/jsx/hooks/helpers.ts     |  29 ++
 packages/core/src/parsers/jsx/hooks/index.ts  |  62 +++
 .../core/src/parsers/jsx/hooks/use-target.ts  |  77 ++++
 packages/core/src/parsers/jsx/index.ts        |   2 -
 packages/core/src/parsers/jsx/jsx.ts          |  45 +-
 packages/core/src/targets.ts                  |   2 +
 packages/core/src/types/mitosis-component.ts  |  10 +
 yarn.lock                                     |  26 +-
 65 files changed, 2147 insertions(+), 550 deletions(-)
 create mode 100644 packages/core/src/__tests__/data/use-target.raw.tsx
 delete mode 100644 packages/core/src/helpers/plugins/process-code.ts
 create mode 100644 packages/core/src/helpers/plugins/process-code/index.ts
 create mode 100644 packages/core/src/helpers/plugins/process-code/types.ts
 create mode 100644 packages/core/src/helpers/plugins/process-target-blocks.ts
 delete mode 100644 packages/core/src/parsers/jsx/hooks.ts
 create mode 100644 packages/core/src/parsers/jsx/hooks/helpers.ts
 create mode 100644 packages/core/src/parsers/jsx/hooks/index.ts
 create mode 100644 packages/core/src/parsers/jsx/hooks/use-target.ts

diff --git a/package.json b/package.json
index 307721c483..099726cf3f 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,10 @@
     "ci:e2e": "yarn workspace @builder.io/e2e-app run e2e",
     "ci": "run-s \"ci:*\"",
     "commit": "git-cz",
-    "fix": "run-p -c 'lint:* --fix'",
-    "fmt": "yarn fmt:prettier",
+    "fmt": "run-s 'fmt:*'",
+    "fmt:eslint": "yarn lint:eslint --fix",
     "fmt:prettier": "yarn lint:prettier --write",
-    "lint": "run-p -c lint:*",
+    "lint": "run-p -c 'lint:*'",
     "lint:eslint": "eslint --cache 'packages/**/*.ts{,x}'",
     "lint:prettier": "yarn run prettier --check",
     "prerelease": "yarn build",
@@ -71,6 +71,7 @@
     "@builder.io/e2e-app": "workspace:*"
   },
   "resolutions": {
-    "@sveltejs/package@1.0.0-next.1": "patch:@sveltejs/package@npm:1.0.0-next.1#.yarn/patches/@sveltejs-package-npm-1.0.0-next.1-2fd015530b.patch"
+    "@sveltejs/package@1.0.0-next.1": "patch:@sveltejs/package@npm:1.0.0-next.1#.yarn/patches/@sveltejs-package-npm-1.0.0-next.1-2fd015530b.patch",
+    "prettier": "^2.8.7"
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 4e9fe08d9f..d3eeca0722 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2544,6 +2544,21 @@ exports[`Alpine.js > jsx > Javascript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > useTarget 1`] = `
+"<div x-data=\\"useTargetComponent()\\"><span x-html=\\"name\\"></span></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useTargetComponent\\", () => ({
+      get name() {
+        const prefix = \\"a\\";
+        return prefix + \\"foo\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Remove Internal mitosis package 1`] = `
 "<div x-data=\\"myBasicComponent()\\">
   Hello
@@ -5096,6 +5111,21 @@ exports[`Alpine.js > jsx > Typescript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > useTarget 1`] = `
+"<div x-data=\\"useTargetComponent()\\"><span x-html=\\"name\\"></span></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useTargetComponent\\", () => ({
+      get name() {
+        const prefix = \\"a\\";
+        return prefix + \\"foo\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > svelte > Javascript Test > basic 1`] = `
 "<div x-data=\\"myComponent()\\">
   <input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />
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 4ab97bf43c..3b2253e1a8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4064,6 +4064,34 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8554,6 +8582,34 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
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 e421947e6a..2369901532 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4156,6 +4156,35 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8741,6 +8770,35 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 7d92f49657..c145582a5d 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -7465,6 +7465,55 @@ export class MyComponent {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > useTarget 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15773,6 +15822,55 @@ export class MyComponent {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > useTarget 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+
+@NgModule({
+  declarations: [UseTargetComponent],
+  imports: [CommonModule],
+  exports: [UseTargetComponent],
+})
+export class UseTargetComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > useTarget 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"use-target-component, UseTargetComponent\\",
+  template: \`
+    <div>{{name}}</div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class UseTargetComponent {
+  get name() {
+    const prefix = true;
+    return prefix + \\"foo\\";
+  }
+}
+"
+`;
+
 exports[`Angular > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 79247cfb78..a374c01470 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -5930,6 +5930,67 @@ exports[`Html > jsx > Javascript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > useTarget 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state.name --></template>
+</div>
+<script>
+  (() => {
+    const state = {
+      get name() {
+        const prefix = \\"h\\";
+        return prefix + \\"foo\\";
+      },
+    };
+
+    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='div-1']\\").forEach((el) => {
+        renderTextNode(el, state.name);
+      });
+
+      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 > Remove Internal mitosis package 1`] = `
 "<div>
   Hello
@@ -11921,6 +11982,67 @@ exports[`Html > jsx > Typescript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > useTarget 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state.name --></template>
+</div>
+<script>
+  (() => {
+    const state = {
+      get name() {
+        const prefix = \\"h\\";
+        return prefix + \\"foo\\";
+      },
+    };
+
+    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='div-1']\\").forEach((el) => {
+        renderTextNode(el, state.name);
+      });
+
+      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 > svelte > Javascript Test > basic 1`] = `
 "<div>
   <input data-el=\\"input-1\\" data-dom-state=\\"input-2\\" />
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index aebfe629d7..8f510804d6 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -857,6 +857,11 @@ exports[`Liquid > jsx > Javascript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > useTarget 1`] = `
+"<div>{{name}}</div>
+"
+`;
+
 exports[`Liquid > jsx > Remove Internal mitosis package 1`] = `
 "<div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
 "
@@ -1719,6 +1724,11 @@ exports[`Liquid > jsx > Typescript Test > use-style-outside-component 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > useTarget 1`] = `
+"<div>{{name}}</div>
+"
+`;
+
 exports[`Liquid > svelte > Javascript Test > basic 1`] = `
 "<div>
   <input value=\\"{{name}}\\" />
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 756213ac77..5e3b2f6a08 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -3949,6 +3949,32 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > useTarget 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"use-target-component\\")
+export default class UseTargetComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  get name() {
+    const prefix = \\"li\\";
+    return prefix + \\"foo\\";
+  }
+
+  render() {
+    return html\`
+
+          <div>\${this.name}</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Remove Internal mitosis package 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -8326,6 +8352,32 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > useTarget 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"use-target-component\\")
+export default class UseTargetComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  get name() {
+    const prefix = \\"li\\";
+    return prefix + \\"foo\\";
+  }
+
+  render() {
+    return html\`
+
+          <div>\${this.name}</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > svelte > Javascript Test > basic 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 a141eb3efb..425f1f5d0a 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2317,6 +2317,17 @@ style {
 <button type=\\"button\\">Button</button>"
 `;
 
+exports[`Marko > jsx > Javascript Test > useTarget 1`] = `
+"class {
+  get name() {
+    const prefix = \\"m\\";
+    return prefix + \\"foo\\";
+  }
+}
+
+<div>\${component.name}</div>"
+`;
+
 exports[`Marko > jsx > Remove Internal mitosis package 1`] = `
 "class {
   onCreate() {
@@ -4613,6 +4624,17 @@ style {
 <button type=\\"button\\">Button</button>"
 `;
 
+exports[`Marko > jsx > Typescript Test > useTarget 1`] = `
+"class {
+  get name() {
+    const prefix = \\"m\\";
+    return prefix + \\"foo\\";
+  }
+}
+
+<div>\${component.name}</div>"
+`;
+
 exports[`Marko > svelte > Javascript Test > basic 1`] = `
 "class {
   onCreate() {
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 3fbc2dadea..616adc6aac 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -11662,6 +11662,135 @@ exports[`Parse JSX > Javascript > use-style-outside-component 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > useTarget 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "UseTargetComponent",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "get name() {
+  const prefix = \\"USE_TARGET_BLOCK_1\\";
+  return prefix + 'foo';
+}",
+      "type": "getter",
+    },
+  },
+  "subComponents": [],
+  "targetBlocks": {
+    "1": {
+      "alpine": {
+        "code": "'a'",
+      },
+      "angular": {
+        "code": "true",
+      },
+      "customElement": {
+        "code": "'c'",
+      },
+      "default": {
+        "code": "'Default str'",
+      },
+      "html": {
+        "code": "'h'",
+      },
+      "liquid": {
+        "code": "'l'",
+      },
+      "lit": {
+        "code": "'li'",
+      },
+      "marko": {
+        "code": "'m'",
+      },
+      "mitosis": {
+        "code": "'mi'",
+      },
+      "preact": {
+        "code": "'p'",
+      },
+      "qwik": {
+        "code": "'q'",
+      },
+      "react": {
+        "code": "123",
+      },
+      "reactNative": {
+        "code": "'rn'",
+      },
+      "rsc": {
+        "code": "'rsc'",
+      },
+      "solid": {
+        "code": "'so'",
+      },
+      "stencil": {
+        "code": "'st'",
+      },
+      "svelte": {
+        "code": "'s'",
+      },
+      "swift": {
+        "code": "'sw'",
+      },
+      "taro": {
+        "code": "'t'",
+      },
+      "template": {
+        "code": "'te'",
+      },
+      "vue": {
+        "code": "'v'",
+      },
+      "vue2": {
+        "code": "'v2'",
+      },
+      "vue3": {
+        "code": "'v3'",
+      },
+      "webcomponent": {
+        "code": "'wc'",
+      },
+    },
+  },
+}
+`;
+
 exports[`Parse JSX > Remove Internal mitosis package 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -23969,6 +24098,135 @@ exports[`Parse JSX > Typescript > use-style-outside-component 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > useTarget 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "UseTargetComponent",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "get name() {
+  const prefix = \\"USE_TARGET_BLOCK_1\\";
+  return prefix + 'foo';
+}",
+      "type": "getter",
+    },
+  },
+  "subComponents": [],
+  "targetBlocks": {
+    "1": {
+      "alpine": {
+        "code": "'a'",
+      },
+      "angular": {
+        "code": "true",
+      },
+      "customElement": {
+        "code": "'c'",
+      },
+      "default": {
+        "code": "'Default str'",
+      },
+      "html": {
+        "code": "'h'",
+      },
+      "liquid": {
+        "code": "'l'",
+      },
+      "lit": {
+        "code": "'li'",
+      },
+      "marko": {
+        "code": "'m'",
+      },
+      "mitosis": {
+        "code": "'mi'",
+      },
+      "preact": {
+        "code": "'p'",
+      },
+      "qwik": {
+        "code": "'q'",
+      },
+      "react": {
+        "code": "123",
+      },
+      "reactNative": {
+        "code": "'rn'",
+      },
+      "rsc": {
+        "code": "'rsc'",
+      },
+      "solid": {
+        "code": "'so'",
+      },
+      "stencil": {
+        "code": "'st'",
+      },
+      "svelte": {
+        "code": "'s'",
+      },
+      "swift": {
+        "code": "'sw'",
+      },
+      "taro": {
+        "code": "'t'",
+      },
+      "template": {
+        "code": "'te'",
+      },
+      "vue": {
+        "code": "'v'",
+      },
+      "vue2": {
+        "code": "'v2'",
+      },
+      "vue3": {
+        "code": "'v3'",
+      },
+      "webcomponent": {
+        "code": "'wc'",
+      },
+    },
+  },
+}
+`;
+
 exports[`Parse JSX > boolean attribute 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 3da952f070..89160a9d7a 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3149,6 +3149,23 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > useTarget 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = \\"p\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Preact > jsx > Remove Internal mitosis package 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6716,6 +6733,23 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > useTarget 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = \\"p\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Preact > svelte > Javascript Test > basic 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 e2cf6cb110..11871a5c80 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4755,6 +4755,22 @@ button {
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > useTarget 1`] = `
+"import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
+
+export const UseTargetComponent = component$((props) => {
+  const state = {};
+  const name = useComputed$(() => {
+    const prefix = \\"q\\";
+    return prefix + \\"foo\\";
+  });
+  return <div>{name.value}</div>;
+});
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`qwik > jsx > Remove Internal mitosis package 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -8123,6 +8139,22 @@ button {
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > useTarget 1`] = `
+"import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
+
+export const UseTargetComponent = component$((props: any) => {
+  const state: any = {};
+  const name = useComputed$(() => {
+    const prefix = \\"q\\";
+    return prefix + \\"foo\\";
+  });
+  return <div>{name.value}</div>;
+});
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`qwik > mount 1`] = `
 {
   "high.cjs": "const __proxyMerge__ = (exports.__proxyMerge__ = function __proxyMerge__(
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 1927ce89be..5ce7d503ad 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -3672,6 +3672,34 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = \\"rn\\";
+    return prefix + \\"foo\\";
+  }
+
+  return (
+    <View>
+      <Text>{name()}</Text>
+    </View>
+  );
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`React Native > jsx > Remove Internal mitosis package 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -7770,6 +7798,34 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = \\"rn\\";
+    return prefix + \\"foo\\";
+  }
+
+  return (
+    <View>
+      <Text>{name()}</Text>
+    </View>
+  );
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`React Native > svelte > Javascript Test > basic 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index cd1a4624b8..3bd44ed791 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3057,6 +3057,22 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = 123;
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`React > jsx > Remove Internal mitosis package 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -6531,6 +6547,22 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = 123;
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`React > stamped (mobx) 1`] = `
 "import * as React from \\"react\\";
 import { useEffect } 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 2a348e17db..4ef7f6d833 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2899,6 +2899,26 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+
+function UseTargetComponent(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = {
+    get name() {
+      const prefix = \\"rsc\\";
+      return prefix + \\"foo\\";
+    },
+  };
+
+  return <div>{state.name}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`RSC > jsx > Remove Internal mitosis package 1`] = `
 "import * as React from \\"react\\";
 
@@ -6216,6 +6236,26 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+
+function UseTargetComponent(props: any) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = {
+    get name() {
+      const prefix = \\"rsc\\";
+      return prefix + \\"foo\\";
+    },
+  };
+
+  return <div>{state.name}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`RSC > svelte > Javascript Test > basic 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 5a9a6378ea..6f2ccf371d 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6192,6 +6192,44 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > useTarget 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = \\"so\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > useTarget 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = \\"so\\";
+    return prefix + \\"foo\\";
+  }
+
+  return (
+    <>
+      <div>{name()}</div>
+    </>
+  );
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Solid > jsx > Remove Internal mitosis package 1`] = `
 "import { createSignal } from \\"solid-js\\";
 
@@ -13148,6 +13186,44 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > useTarget 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = \\"so\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > useTarget 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = \\"so\\";
+    return prefix + \\"foo\\";
+  }
+
+  return (
+    <>
+      <div>{name()}</div>
+    </>
+  );
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Solid > svelte > Javascript Test > basic 1`] = `
 "import { createSignal } 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 f2400c603e..863e395e1c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -2879,6 +2879,25 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > useTarget 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"use-target-component\\",
+})
+export default class UseTargetComponent {
+  get name() {
+    const prefix = \\"st\\";
+    return prefix + \\"foo\\";
+  }
+
+  render() {
+    return <div>{this.name}</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Remove Internal mitosis package 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -5794,6 +5813,25 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > useTarget 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"use-target-component\\",
+})
+export default class UseTargetComponent {
+  get name() {
+    const prefix = \\"st\\";
+    return prefix + \\"foo\\";
+  }
+
+  render() {
+    return <div>{this.name}</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > svelte > Javascript Test > basic 1`] = `
 "import { Component, Prop, h, State, Fragment } 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 af5e59e599..658dff915f 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2553,6 +2553,17 @@ exports[`Svelte > jsx > Javascript Test > use-style-outside-component 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > useTarget 1`] = `
+"<script>
+  $: name = () => {
+    const prefix = \\"s\\";
+    return prefix + \\"foo\\";
+  };
+</script>
+
+<div>{name()}</div>"
+`;
+
 exports[`Svelte > jsx > Remove Internal mitosis package 1`] = `
 "<script>
   let name = \\"PatrickJS\\";
@@ -5682,6 +5693,17 @@ exports[`Svelte > jsx > Typescript Test > use-style-outside-component 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > useTarget 1`] = `
+"<script lang=\\"ts\\">
+  $: name = () => {
+    const prefix = \\"s\\";
+    return prefix + \\"foo\\";
+  };
+</script>
+
+<div>{name()}</div>"
+`;
+
 exports[`Svelte > svelte > Javascript Test > basic 1`] = `
 "<script>
   let name = \\"Steve\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 2844a997de..b735b3aa01 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3114,6 +3114,23 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function UseTargetComponent(props) {
+  function name() {
+    const prefix = \\"t\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <View>{name()}</View>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Taro > jsx > Remove Internal mitosis package 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -6674,6 +6691,23 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > useTarget 1`] = `
+"import * as React from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function UseTargetComponent(props: any) {
+  function name() {
+    const prefix = \\"t\\";
+    return prefix + \\"foo\\";
+  }
+
+  return <View>{name()}</View>;
+}
+
+export default UseTargetComponent;
+"
+`;
+
 exports[`Taro > svelte > Javascript Test > basic 1`] = `
 "import * as React from \\"react\\";
 import { useState } 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 ea5d7def25..17a9c65d64 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2827,6 +2827,21 @@ button {
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > useTarget 1`] = `
+"<template>
+  <div>{{ name }}</div>
+</template>
+
+<script setup>
+import { computed } from \\"vue\\";
+
+const name = computed(() => {
+  const prefix = \\"v3\\";
+  return prefix + \\"foo\\";
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Remove Internal mitosis package 1`] = `
 "<template>
   <div>Hello {{ name }}! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
@@ -6009,6 +6024,21 @@ button {
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > useTarget 1`] = `
+"<template>
+  <div>{{ name }}</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { computed } from \\"vue\\";
+
+const name = computed(() => {
+  const prefix = \\"v3\\";
+  return prefix + \\"foo\\";
+});
+</script>"
+`;
+
 exports[`Vue > svelte > Javascript Test > basic 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 d9eed88f65..2e0ac2fc11 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -3468,6 +3468,27 @@ button {
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > useTarget 1`] = `
+"<template>
+  <div>{{ name }}</div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"use-target-component\\",
+
+  computed: {
+    name() {
+      const prefix = \\"v2\\";
+      return prefix + \\"foo\\";
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Remove Internal mitosis package 1`] = `
 "<template>
   <div>Hello {{ name }}! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
@@ -7356,6 +7377,27 @@ button {
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > useTarget 1`] = `
+"<template>
+  <div>{{ name }}</div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"use-target-component\\",
+
+  computed: {
+    name() {
+      const prefix = \\"v2\\";
+      return prefix + \\"foo\\";
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > svelte > Javascript Test > basic 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 bbbd9cae11..ece540a20e 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -77,22 +77,24 @@ class SmileReviews extends HTMLElement {
       
           <input
             placeholder=\\"Title\\"
-            class=\\"input\\"
+            class=\\"input-smile-reviews\\"
             data-dom-state=\\"SmileReviews-input-smile-reviews-2\\"
           />
       
           <textarea
             placeholder=\\"How was your experience?\\"
-            class=\\"textarea\\"
+            class=\\"textarea-smile-reviews\\"
             data-dom-state=\\"SmileReviews-textarea-smile-reviews-1\\"
           ></textarea>
       
-          <button class=\\"button\\" data-el=\\"button-smile-reviews-2\\">Submit</button>
+          <button class=\\"button-smile-reviews\\" data-el=\\"button-smile-reviews-2\\">
+            Submit
+          </button>
         </template>
       
         <template data-el=\\"for-smile-reviews\\">
-          <div class=\\"review\\" data-el=\\"div-smile-reviews-2\\">
-            <img class=\\"img\\" data-el=\\"img-smile-reviews-1\\" />
+          <div class=\\"review-smile-reviews\\" data-el=\\"div-smile-reviews-2\\">
+            <img class=\\"img-smile-reviews\\" data-el=\\"img-smile-reviews-1\\" />
       
             <div data-el=\\"div-smile-reviews-3\\">
               <div>
@@ -116,16 +118,16 @@ class SmileReviews extends HTMLElement {
         </template>
       </div>
       <style>
-        .input {
+        .input-smile-reviews {
           display: block;
         }
-        .textarea {
+        .textarea-smile-reviews {
           display: block;
         }
-        .button {
+        .button-smile-reviews {
           display: block;
         }
-        .review {
+        .review-smile-reviews {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -133,7 +135,7 @@ class SmileReviews extends HTMLElement {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img {
+        .img-smile-reviews {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -480,7 +482,7 @@ class MyBasicRefComponent extends HTMLElement {
       <div>
         <template data-el=\\"show-my-basic-ref-component\\">
           <input
-            class=\\"input\\"
+            class=\\"input-my-basic-ref-component\\"
             data-el=\\"input-my-basic-ref-component-1\\"
             data-dom-state=\\"MyBasicRefComponent-input-my-basic-ref-component-1\\"
             data-ref=\\"MyBasicRefComponent-inputRef\\"
@@ -513,7 +515,7 @@ class MyBasicRefComponent extends HTMLElement {
         ! I can run in React, Qwik, Vue, Solid, or Web Component!
       </div>
       <style>
-        .input {
+        .input-my-basic-ref-component {
           color: red;
         }
       </style>\`;
@@ -714,7 +716,7 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">
+      <div class=\\"test div-my-basic-component\\">
         <input
           data-el=\\"input-my-basic-component-1\\"
           data-dom-state=\\"MyBasicComponent-input-my-basic-component-1\\"
@@ -723,7 +725,7 @@ class MyBasicComponent extends HTMLElement {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -2396,7 +2398,7 @@ class MyBasicRefComponent extends HTMLElement {
       <div>
         <template data-el=\\"show-my-basic-ref-component\\">
           <input
-            class=\\"input\\"
+            class=\\"input-my-basic-ref-component\\"
             data-el=\\"input-my-basic-ref-component-1\\"
             data-dom-state=\\"MyBasicRefComponent-input-my-basic-ref-component-1\\"
             data-ref=\\"MyBasicRefComponent-inputRef\\"
@@ -2429,7 +2431,7 @@ class MyBasicRefComponent extends HTMLElement {
         ! I can run in React, Qwik, Vue, Solid, or Web Component!
       </div>
       <style>
-        .input {
+        .input-my-basic-ref-component {
           color: red;
         }
       </style>\`;
@@ -3079,9 +3081,9 @@ class Column extends HTMLElement {
     });
 
     this._root.innerHTML = \`
-      <div class=\\"builder-columns div\\">
+      <div class=\\"builder-columns div-column\\">
         <template data-el=\\"for-column\\">
-          <div class=\\"builder-column div-2\\">
+          <div class=\\"builder-column div-column-2\\">
             <template data-el=\\"div-column-1\\"><!-- column.content --></template>
       
             <template data-el=\\"div-column-2\\"><!-- index --></template>
@@ -3089,23 +3091,23 @@ class Column extends HTMLElement {
         </template>
       </div>
       <style>
-        .div {
+        .div-column {
           display: flex;
           flex-direction: column;
           align-items: stretch;
           line-height: normal;
         }
         @media (max-width: 999px) {
-          .div {
+          .div-column {
             flex-direction: row;
           }
         }
         @media (max-width: 639px) {
-          .div {
+          .div-column {
             flex-direction: row-reverse;
           }
         }
-        .div-2 {
+        .div-column-2 {
           flex-grow: 1;
         }
       </style>\`;
@@ -3976,7 +3978,7 @@ class Image extends HTMLElement {
         <slot></slot>
       </div>
       <style>
-        .img {
+        .img-image {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -4076,7 +4078,7 @@ class Image extends HTMLElement {
       el.className =
         \\"builder-image\\" +
         (this.props._class ? \\" \\" + this.props._class : \\"\\") +
-        \\" img\\";
+        \\" img-image\\";
       el.setAttribute(\\"src\\", this.props.image);
       el.removeEventListener(\\"load\\", this.onImgImage1Load);
       el.addEventListener(\\"load\\", this.onImgImage1Load);
@@ -5725,22 +5727,24 @@ class SmileReviews extends HTMLElement {
       
           <input
             placeholder=\\"Title\\"
-            class=\\"input\\"
+            class=\\"input-smile-reviews\\"
             data-dom-state=\\"SmileReviews-input-smile-reviews-2\\"
           />
       
           <textarea
             placeholder=\\"How was your experience?\\"
-            class=\\"textarea\\"
+            class=\\"textarea-smile-reviews\\"
             data-dom-state=\\"SmileReviews-textarea-smile-reviews-1\\"
           ></textarea>
       
-          <button class=\\"button\\" data-el=\\"button-smile-reviews-2\\">Submit</button>
+          <button class=\\"button-smile-reviews\\" data-el=\\"button-smile-reviews-2\\">
+            Submit
+          </button>
         </template>
       
         <template data-el=\\"for-smile-reviews\\">
-          <div class=\\"review\\" data-el=\\"div-smile-reviews-2\\">
-            <img class=\\"img\\" data-el=\\"img-smile-reviews-1\\" />
+          <div class=\\"review-smile-reviews\\" data-el=\\"div-smile-reviews-2\\">
+            <img class=\\"img-smile-reviews\\" data-el=\\"img-smile-reviews-1\\" />
       
             <div data-el=\\"div-smile-reviews-3\\">
               <div>
@@ -5764,16 +5768,16 @@ class SmileReviews extends HTMLElement {
         </template>
       </div>
       <style>
-        .input {
+        .input-smile-reviews {
           display: block;
         }
-        .textarea {
+        .textarea-smile-reviews {
           display: block;
         }
-        .button {
+        .button-smile-reviews {
           display: block;
         }
-        .review {
+        .review-smile-reviews {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -5781,7 +5785,7 @@ class SmileReviews extends HTMLElement {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img {
+        .img-smile-reviews {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -6914,13 +6918,13 @@ class MyBasicForwardRefComponent extends HTMLElement {
     this._root.innerHTML = \`
       <div>
         <input
-          class=\\"input\\"
+          class=\\"input-my-basic-forward-ref-component\\"
           data-el=\\"input-my-basic-forward-ref-component-1\\"
           data-dom-state=\\"MyBasicForwardRefComponent-input-my-basic-forward-ref-component-1\\"
         />
       </div>
       <style>
-        .input {
+        .input-my-basic-forward-ref-component {
           color: red;
         }
       </style>\`;
@@ -7073,13 +7077,13 @@ class MyBasicForwardRefComponent extends HTMLElement {
     this._root.innerHTML = \`
       <div>
         <input
-          class=\\"input\\"
+          class=\\"input-my-basic-forward-ref-component\\"
           data-el=\\"input-my-basic-forward-ref-component-1\\"
           data-dom-state=\\"MyBasicForwardRefComponent-input-my-basic-forward-ref-component-1\\"
         />
       </div>
       <style>
-        .input {
+        .input-my-basic-forward-ref-component {
           color: red;
         }
       </style>\`;
@@ -7351,11 +7355,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test2 test div\\">
+      <div class=\\"test2 test div-my-basic-component\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -7446,9 +7450,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">Hello! I can run in React, Vue, Solid, or Liquid!</div>
+      <div class=\\"test div-my-basic-component\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -7539,9 +7545,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">Hello! I can run in React, Vue, Solid, or Liquid!</div>
+      <div class=\\"test div-my-basic-component\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -7739,7 +7747,7 @@ class MyBasicComponent extends HTMLElement {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -7775,7 +7783,7 @@ class MyBasicComponent extends HTMLElement {
     this._root
       .querySelectorAll(\\"[data-el='div-my-basic-component-1']\\")
       .forEach((el) => {
-        el.className = this.state.classState + \\" div\\";
+        el.className = this.state.classState + \\" div-my-basic-component\\";
         Object.assign(el.style, this.state.styleState);
       });
   }
@@ -9408,31 +9416,31 @@ class NestedStyles extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"div\\">Hello world</div>
+      <div class=\\"div-nested-styles\\">Hello world</div>
       <style>
-        .div {
+        .div-nested-styles {
           display: flex;
           --bar: red;
           color: var(--bar);
         }
         @media (max-width: env(--mobile)) {
-          .div {
+          .div-nested-styles {
             display: block;
           }
         }
-        .div:hover {
+        .div-nested-styles:hover {
           display: flex;
         }
-        .div:active {
+        .div-nested-styles:active {
           display: inline;
         }
-        .div .nested-selector {
+        .div-nested-styles .nested-selector {
           display: grid;
         }
-        .div .nested-selector:hover {
+        .div-nested-styles .nested-selector:hover {
           display: block;
         }
-        .div.nested-selector:active {
+        .div-nested-styles.nested-selector:active {
           display: inline-block;
         }
       </style>\`;
@@ -10748,11 +10756,11 @@ class RenderContent extends HTMLElement {
     });
 
     this._root.innerHTML = \`
-      <div class=\\"div\\" data-el=\\"div-render-content-1\\">
+      <div class=\\"div-render-content\\" data-el=\\"div-render-content-1\\">
         <render-blocks data-el=\\"render-blocks-render-content\\"></render-blocks>
       </div>
       <style>
-        .div {
+        .div-render-content {
           display: flex;
           flex-direction: columns;
         }
@@ -12219,9 +12227,9 @@ class MyComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"builder-column div\\" data-el=\\"div-my-component-1\\"></div>
+      <div class=\\"builder-column div-my-component\\" data-el=\\"div-my-component-1\\"></div>
       <style>
-        .div {
+        .div-my-component {
           display: flex;
           flex-direction: column;
           align-items: stretch;
@@ -12738,14 +12746,14 @@ class MyComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <button type=\\"button\\" class=\\"button\\">Button</button>
+      <button type=\\"button\\" class=\\"button-my-component\\">Button</button>
       <style>
         button {
           font-size: 12px;
           outline: 1px solid black;
         }
       
-        .button {
+        .button-my-component {
           background: blue;
           color: white;
         }
@@ -12894,6 +12902,107 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > useTarget 1`] = `
+"/**
+ * Usage:
+ *
+ *  <use-target-component></use-target-component>
+ *
+ */
+class UseTargetComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      get name() {
+        const prefix = \\"c\\";
+        return prefix + \\"foo\\";
+      },
+    };
+    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>
+        <template data-el=\\"div-use-target-component-1\\"><!-- state.name --></template>
+      </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() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-use-target-component-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.state.name);
+      });
+  }
+
+  // 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(\\"use-target-component\\", UseTargetComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Remove Internal mitosis package 1`] = `
 "/**
  * Usage:
@@ -13087,7 +13196,7 @@ class MyBasicRefComponent extends HTMLElement {
       <div>
         <template data-el=\\"show-my-basic-ref-component\\">
           <input
-            class=\\"input\\"
+            class=\\"input-my-basic-ref-component\\"
             data-el=\\"input-my-basic-ref-component-1\\"
             data-dom-state=\\"MyBasicRefComponent-input-my-basic-ref-component-1\\"
             data-ref=\\"MyBasicRefComponent-inputRef\\"
@@ -13120,7 +13229,7 @@ class MyBasicRefComponent extends HTMLElement {
         ! I can run in React, Qwik, Vue, Solid, or Web Component!
       </div>
       <style>
-        .input {
+        .input-my-basic-ref-component {
           color: red;
         }
       </style>\`;
@@ -13325,7 +13434,7 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">
+      <div class=\\"test div-my-basic-component\\">
         <input
           data-el=\\"input-my-basic-component-1\\"
           data-dom-state=\\"MyBasicComponent-input-my-basic-component-1\\"
@@ -13334,7 +13443,7 @@ class MyBasicComponent extends HTMLElement {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -15021,7 +15130,7 @@ class MyBasicRefComponent extends HTMLElement {
       <div>
         <template data-el=\\"show-my-basic-ref-component\\">
           <input
-            class=\\"input\\"
+            class=\\"input-my-basic-ref-component\\"
             data-el=\\"input-my-basic-ref-component-1\\"
             data-dom-state=\\"MyBasicRefComponent-input-my-basic-ref-component-1\\"
             data-ref=\\"MyBasicRefComponent-inputRef\\"
@@ -15054,7 +15163,7 @@ class MyBasicRefComponent extends HTMLElement {
         ! I can run in React, Qwik, Vue, Solid, or Web Component!
       </div>
       <style>
-        .input {
+        .input-my-basic-ref-component {
           color: red;
         }
       </style>\`;
@@ -15734,9 +15843,9 @@ class Column extends HTMLElement {
     });
 
     this._root.innerHTML = \`
-      <div class=\\"builder-columns div\\">
+      <div class=\\"builder-columns div-column\\">
         <template data-el=\\"for-column\\">
-          <div class=\\"builder-column div-2\\">
+          <div class=\\"builder-column div-column-2\\">
             <template data-el=\\"div-column-1\\"><!-- column.content --></template>
       
             <template data-el=\\"div-column-2\\"><!-- index --></template>
@@ -15744,23 +15853,23 @@ class Column extends HTMLElement {
         </template>
       </div>
       <style>
-        .div {
+        .div-column {
           display: flex;
           flex-direction: column;
           align-items: stretch;
           line-height: normal;
         }
         @media (max-width: 999px) {
-          .div {
+          .div-column {
             flex-direction: row;
           }
         }
         @media (max-width: 639px) {
-          .div {
+          .div-column {
             flex-direction: row-reverse;
           }
         }
-        .div-2 {
+        .div-column-2 {
           flex-grow: 1;
         }
       </style>\`;
@@ -16673,7 +16782,7 @@ class Image extends HTMLElement {
         <slot></slot>
       </div>
       <style>
-        .img {
+        .img-image {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -16773,7 +16882,7 @@ class Image extends HTMLElement {
       el.className =
         \\"builder-image\\" +
         (this.props._class ? \\" \\" + this.props._class : \\"\\") +
-        \\" img\\";
+        \\" img-image\\";
       el.setAttribute(\\"src\\", this.props.image);
       el.removeEventListener(\\"load\\", this.onImgImage1Load);
       el.addEventListener(\\"load\\", this.onImgImage1Load);
@@ -18498,22 +18607,24 @@ class SmileReviews extends HTMLElement {
       
           <input
             placeholder=\\"Title\\"
-            class=\\"input\\"
+            class=\\"input-smile-reviews\\"
             data-dom-state=\\"SmileReviews-input-smile-reviews-2\\"
           />
       
           <textarea
             placeholder=\\"How was your experience?\\"
-            class=\\"textarea\\"
+            class=\\"textarea-smile-reviews\\"
             data-dom-state=\\"SmileReviews-textarea-smile-reviews-1\\"
           ></textarea>
       
-          <button class=\\"button\\" data-el=\\"button-smile-reviews-2\\">Submit</button>
+          <button class=\\"button-smile-reviews\\" data-el=\\"button-smile-reviews-2\\">
+            Submit
+          </button>
         </template>
       
         <template data-el=\\"for-smile-reviews\\">
-          <div class=\\"review\\" data-el=\\"div-smile-reviews-2\\">
-            <img class=\\"img\\" data-el=\\"img-smile-reviews-1\\" />
+          <div class=\\"review-smile-reviews\\" data-el=\\"div-smile-reviews-2\\">
+            <img class=\\"img-smile-reviews\\" data-el=\\"img-smile-reviews-1\\" />
       
             <div data-el=\\"div-smile-reviews-3\\">
               <div>
@@ -18537,16 +18648,16 @@ class SmileReviews extends HTMLElement {
         </template>
       </div>
       <style>
-        .input {
+        .input-smile-reviews {
           display: block;
         }
-        .textarea {
+        .textarea-smile-reviews {
           display: block;
         }
-        .button {
+        .button-smile-reviews {
           display: block;
         }
-        .review {
+        .review-smile-reviews {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -18554,7 +18665,7 @@ class SmileReviews extends HTMLElement {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img {
+        .img-smile-reviews {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -19739,13 +19850,13 @@ class MyBasicForwardRefComponent extends HTMLElement {
     this._root.innerHTML = \`
       <div>
         <input
-          class=\\"input\\"
+          class=\\"input-my-basic-forward-ref-component\\"
           data-el=\\"input-my-basic-forward-ref-component-1\\"
           data-dom-state=\\"MyBasicForwardRefComponent-input-my-basic-forward-ref-component-1\\"
         />
       </div>
       <style>
-        .input {
+        .input-my-basic-forward-ref-component {
           color: red;
         }
       </style>\`;
@@ -19903,13 +20014,13 @@ class MyBasicForwardRefComponent extends HTMLElement {
     this._root.innerHTML = \`
       <div>
         <input
-          class=\\"input\\"
+          class=\\"input-my-basic-forward-ref-component\\"
           data-el=\\"input-my-basic-forward-ref-component-1\\"
           data-dom-state=\\"MyBasicForwardRefComponent-input-my-basic-forward-ref-component-1\\"
         />
       </div>
       <style>
-        .input {
+        .input-my-basic-forward-ref-component {
           color: red;
         }
       </style>\`;
@@ -20181,11 +20292,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test2 test div\\">
+      <div class=\\"test2 test div-my-basic-component\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -20276,9 +20387,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">Hello! I can run in React, Vue, Solid, or Liquid!</div>
+      <div class=\\"test div-my-basic-component\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -20369,9 +20482,11 @@ class MyBasicComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"test div\\">Hello! I can run in React, Vue, Solid, or Liquid!</div>
+      <div class=\\"test div-my-basic-component\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -20576,7 +20691,7 @@ class MyBasicComponent extends HTMLElement {
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style>
-        .div {
+        .div-my-basic-component {
           padding: 10px;
         }
       </style>\`;
@@ -20612,7 +20727,7 @@ class MyBasicComponent extends HTMLElement {
     this._root
       .querySelectorAll(\\"[data-el='div-my-basic-component-1']\\")
       .forEach((el) => {
-        el.className = this.state.classState + \\" div\\";
+        el.className = this.state.classState + \\" div-my-basic-component\\";
         Object.assign(el.style, this.state.styleState);
       });
   }
@@ -22287,31 +22402,31 @@ class NestedStyles extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"div\\">Hello world</div>
+      <div class=\\"div-nested-styles\\">Hello world</div>
       <style>
-        .div {
+        .div-nested-styles {
           display: flex;
           --bar: red;
           color: var(--bar);
         }
         @media (max-width: env(--mobile)) {
-          .div {
+          .div-nested-styles {
             display: block;
           }
         }
-        .div:hover {
+        .div-nested-styles:hover {
           display: flex;
         }
-        .div:active {
+        .div-nested-styles:active {
           display: inline;
         }
-        .div .nested-selector {
+        .div-nested-styles .nested-selector {
           display: grid;
         }
-        .div .nested-selector:hover {
+        .div-nested-styles .nested-selector:hover {
           display: block;
         }
-        .div.nested-selector:active {
+        .div-nested-styles.nested-selector:active {
           display: inline-block;
         }
       </style>\`;
@@ -23681,11 +23796,11 @@ class RenderContent extends HTMLElement {
     });
 
     this._root.innerHTML = \`
-      <div class=\\"div\\" data-el=\\"div-render-content-1\\">
+      <div class=\\"div-render-content\\" data-el=\\"div-render-content-1\\">
         <render-blocks data-el=\\"render-blocks-render-content\\"></render-blocks>
       </div>
       <style>
-        .div {
+        .div-render-content {
           display: flex;
           flex-direction: columns;
         }
@@ -25172,9 +25287,9 @@ class MyComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <div class=\\"builder-column div\\" data-el=\\"div-my-component-1\\"></div>
+      <div class=\\"builder-column div-my-component\\" data-el=\\"div-my-component-1\\"></div>
       <style>
-        .div {
+        .div-my-component {
           display: flex;
           flex-direction: column;
           align-items: stretch;
@@ -25699,14 +25814,14 @@ class MyComponent extends HTMLElement {
 
   connectedCallback() {
     this._root.innerHTML = \`
-      <button type=\\"button\\" class=\\"button\\">Button</button>
+      <button type=\\"button\\" class=\\"button-my-component\\">Button</button>
       <style>
         button {
           font-size: 12px;
           outline: 1px solid black;
         }
       
-        .button {
+        .button-my-component {
           background: blue;
           color: white;
         }
@@ -25855,6 +25970,107 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > useTarget 1`] = `
+"/**
+ * Usage:
+ *
+ *  <use-target-component></use-target-component>
+ *
+ */
+class UseTargetComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      get name() {
+        const prefix = \\"c\\";
+        return prefix + \\"foo\\";
+      },
+    };
+    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>
+        <template data-el=\\"div-use-target-component-1\\"><!-- state.name --></template>
+      </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() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-use-target-component-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.state.name);
+      });
+  }
+
+  // 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(\\"use-target-component\\", UseTargetComponent);
+"
+`;
+
 exports[`webcomponent > svelte > Javascript Test > basic 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/use-target.raw.tsx b/packages/core/src/__tests__/data/use-target.raw.tsx
new file mode 100644
index 0000000000..851dedb764
--- /dev/null
+++ b/packages/core/src/__tests__/data/use-target.raw.tsx
@@ -0,0 +1,37 @@
+import { useStore, useTarget } from '@builder.io/mitosis';
+
+export default function UseTargetComponent() {
+  const state = useStore({
+    get name() {
+      const prefix = useTarget<string | number | boolean>({
+        default: 'Default str',
+        react: 123,
+        angular: true,
+        vue: 'v',
+        alpine: 'a',
+        customElement: 'c',
+        html: 'h',
+        liquid: 'l',
+        lit: 'li',
+        marko: 'm',
+        mitosis: 'mi',
+        preact: 'p',
+        qwik: 'q',
+        reactNative: 'rn',
+        svelte: 's',
+        rsc: 'rsc',
+        solid: 'so',
+        stencil: 'st',
+        swift: 'sw',
+        taro: 't',
+        template: 'te',
+        vue2: 'v2',
+        vue3: 'v3',
+        webcomponent: 'wc',
+      });
+      return prefix + 'foo';
+    },
+  });
+
+  return <div>{state.name}</div>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index b8b0519c6f..9bd985b0cc 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -59,6 +59,7 @@ const useStyle = getRawFile('./data/styles/use-style.raw.tsx');
 const useStyleOutsideComponent = getRawFile('./data/styles/use-style-outside-component.raw.tsx');
 const useStyleAndCss = getRawFile('./data/styles/use-style-and-css.raw.tsx');
 const styleClassAndCss = getRawFile('./data/styles/style-class-and-css.raw.tsx');
+const useTarget = getRawFile('./data/use-target.raw.tsx');
 
 const button = getRawFile('./data/blocks/button.raw.tsx');
 const classNameJsx = getRawFile('./data/blocks/classname-jsx.raw.tsx');
@@ -201,6 +202,7 @@ const BASIC_TESTS: Tests = {
   referencingFunInsideHook,
   svgComponent,
   renderBlock,
+  useTarget,
 };
 
 const SLOTS_TESTS: Tests = {
diff --git a/packages/core/src/constants/hooks.ts b/packages/core/src/constants/hooks.ts
index 09a1832ffd..62887d4381 100644
--- a/packages/core/src/constants/hooks.ts
+++ b/packages/core/src/constants/hooks.ts
@@ -5,4 +5,11 @@ export const HOOKS = {
   REF: 'useRef',
   DEFAULT_PROPS: 'useDefaultProps',
   STYLE: 'useStyle',
+  TARGET: 'useTarget',
+  METADATA: 'useMetadata',
+  MOUNT: 'onMount',
+  UNMOUNT: 'onUnMount',
+  UPDATE: 'onUpdate',
+  INIT: 'onInit',
+  SET_CONTEXT: 'setContext',
 } as const;
diff --git a/packages/core/src/constants/html_tags.ts b/packages/core/src/constants/html_tags.ts
index 1a6c8c9b39..313fb030d8 100644
--- a/packages/core/src/constants/html_tags.ts
+++ b/packages/core/src/constants/html_tags.ts
@@ -177,3 +177,20 @@ export const VALID_HTML_TAGS = [
   'use',
   'view',
 ];
+
+export const SELF_CLOSING_HTML_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index 3ae6bf9735..d620c59e50 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -1,10 +1,12 @@
 import { camelCase, curry, flow, flowRight as compose } from 'lodash';
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { babelTransformCode } from '../../helpers/babel-transform';
 import { dashCase } from '../../helpers/dash-case';
 import { fastClone } from '../../helpers/fast-clone';
 import { getRefs } from '../../helpers/get-refs';
 import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
+import { initializeOptions } from '../../helpers/merge-options';
 import { removeSurroundingBlock } from '../../helpers/remove-surrounding-block';
 import { replaceIdentifiers } from '../../helpers/replace-identifiers';
 import { stripMetaProperties } from '../../helpers/strip-meta-properties';
@@ -16,7 +18,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../../modules/plugins';
-import { selfClosingTags } from '../../parsers/jsx';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { checkIsForNode, ForNode, MitosisNode } from '../../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
@@ -183,7 +184,7 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = {
       str += ` ${bind}${bindingType === 'spread' ? '' : key}="${useValue}" `.replace(':=', '=');
     }
   }
-  return selfClosingTags.has(json.name)
+  return SELF_CLOSING_HTML_TAGS.has(json.name)
     ? `${str} />`
     : `${str}>${(json.children ?? []).map((item) => blockToAlpine(item, options)).join('\n')}</${
         json.name
@@ -191,8 +192,10 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = {
 };
 
 export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
-  (options = {}) =>
+  (_options = {}) =>
   ({ component }) => {
+    const options = initializeOptions('alpine', _options);
+
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index 1b5ca49543..1330eef052 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -1,7 +1,7 @@
 import { flow, pipe } from 'fp-ts/lib/function';
 import { isString, kebabCase, uniq } from 'lodash';
 import { format } from 'prettier/standalone';
-import { VALID_HTML_TAGS } from '../constants/html_tags';
+import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '../constants/html_tags';
 import { dedent } from '../helpers/dedent';
 import { fastClone } from '../helpers/fast-clone';
 import { getComponentsUsed } from '../helpers/get-components-used';
@@ -31,12 +31,11 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../modules/plugins';
-import { selfClosingTags } from '../parsers/jsx';
 import { checkIsForNode, MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 
 import { MitosisComponent } from '..';
-import { mergeOptions } from '../helpers/merge-options';
+import { initializeOptions } from '../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../helpers/plugins/process-code';
 
 const BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
@@ -218,7 +217,7 @@ export const blockToAngular = (
         str += `[${key}]="${code}" `;
       }
     }
-    if (selfClosingTags.has(json.name)) {
+    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
       return str + ' />';
     }
     str += '>';
@@ -261,14 +260,14 @@ const processAngularCode =
       (newCode) => stripStateAndPropsRefs(newCode, { replaceWith }),
     );
 
+const DEFAULT_OPTIONS: ToAngularOptions = {
+  preserveImports: false,
+  preserveFileExtensions: false,
+};
+
 export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
   (userOptions = {}) =>
   ({ component: _component }) => {
-    const DEFAULT_OPTIONS = {
-      preserveImports: false,
-      preserveFileExtensions: false,
-    };
-
     // Make a copy we can safely mutate, similar to babel's toolchain
     let json = fastClone(_component);
 
@@ -277,7 +276,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
     const outputVars = uniq([...metaOutputVars, ...getPropFunctions(json)]);
     const stateVars = Object.keys(json?.state || {});
 
-    const options = mergeOptions({ ...DEFAULT_OPTIONS, ...userOptions });
+    const options = initializeOptions('angular', DEFAULT_OPTIONS, userOptions);
     options.plugins = [
       ...(options.plugins || []),
       CODE_PROCESSOR_PLUGIN((codeType) => {
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index 259db92c81..c6abf5d764 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -1,7 +1,9 @@
 import { NodePath, types } from '@babel/core';
+import { pipe } from 'fp-ts/lib/function';
 import { camelCase, kebabCase } from 'lodash';
 import { format } from 'prettier/standalone';
 import traverse from 'traverse';
+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';
@@ -19,6 +21,8 @@ import { isComponent } from '../helpers/is-component';
 import { isHtmlAttribute } from '../helpers/is-html-attribute';
 import { isMitosisNode } from '../helpers/is-mitosis-node';
 import { mapRefs } from '../helpers/map-refs';
+import { initializeOptions } from '../helpers/merge-options';
+import { getForArguments } from '../helpers/nodes/for';
 import { removeSurroundingBlock } from '../helpers/remove-surrounding-block';
 import { renderPreComponent } from '../helpers/render-imports';
 import { stripMetaProperties } from '../helpers/strip-meta-properties';
@@ -36,12 +40,8 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../modules/plugins';
-import { selfClosingTags } from '../parsers/jsx';
 import { MitosisComponent } from '../types/mitosis-component';
 import { checkIsForNode, MitosisNode } from '../types/mitosis-node';
-
-import { pipe } from 'fp-ts/lib/function';
-import { getForArguments } from '../helpers/nodes/for';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 
 export interface ToHtmlOptions extends BaseTranspilerOptions {
@@ -526,7 +526,7 @@ const blockToHtml = (
       );
     }
 
-    if (selfClosingTags.has(json.name)) {
+    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
       return str + ' />';
     }
     str += '>';
@@ -597,20 +597,20 @@ const htmlDecode = (html: string) => html.replace(/&quot;/gi, '"');
 
 // TODO: props support via custom elements
 export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
-  (options = {}) =>
+  (_options = {}) =>
   ({ component }) => {
-    const useOptions: InternalToHtmlOptions = {
-      ...options,
+    const options: InternalToHtmlOptions = initializeOptions('html', {
+      ..._options,
       onChangeJsById: {},
       js: '',
       namesMap: {},
       format: 'script',
-    };
+    });
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    addUpdateAfterSet(json, useOptions);
+    addUpdateAfterSet(json, options);
     const componentHasProps = hasProps(json);
 
     const hasLoop = hasComponent('For', json);
@@ -624,14 +624,14 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
       prefix: options.prefix,
     });
 
-    let str = json.children.map((item) => blockToHtml(item, useOptions)).join('\n');
+    let str = json.children.map((item) => blockToHtml(item, options)).join('\n');
 
     if (css.trim().length) {
       str += `<style>${css}</style>`;
     }
 
-    const hasChangeListeners = Boolean(Object.keys(useOptions.onChangeJsById).length);
-    const hasGeneratedJs = Boolean(useOptions.js.trim().length);
+    const hasChangeListeners = Boolean(Object.keys(options.onChangeJsById).length);
+    const hasGeneratedJs = Boolean(options.js.trim().length);
 
     if (hasChangeListeners || hasGeneratedJs || json.hooks.onMount?.code || hasLoop) {
       // TODO: collectJs helper for here and liquid
@@ -640,7 +640,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
       (() => {
         const state = ${getStateObjectStringFromComponent(json, {
           valueMapper: (value) =>
-            addUpdateAfterSetInCode(updateReferencesInCode(value, useOptions), useOptions),
+            addUpdateAfterSetInCode(updateReferencesInCode(value, options), options),
         })};
         ${componentHasProps ? `let props = {};` : ''}
         let context = null;
@@ -666,9 +666,9 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
             return;
           }
           pendingUpdate = true;
-          ${Object.keys(useOptions.onChangeJsById)
+          ${Object.keys(options.onChangeJsById)
             .map((key) => {
-              const value = useOptions.onChangeJsById[key];
+              const value = options.onChangeJsById[key];
               if (!value) {
                 return '';
               }
@@ -688,8 +688,8 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
               : `
                 ${json.hooks.onUpdate.reduce((code, hook) => {
                   code += addUpdateAfterSetInCode(
-                    updateReferencesInCode(hook.code, useOptions),
-                    useOptions,
+                    updateReferencesInCode(hook.code, options),
+                    options,
                   );
                   return code + '\n';
                 }, '')} 
@@ -699,7 +699,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
           pendingUpdate = false;
         }
 
-        ${useOptions.js}
+        ${options.js}
 
         // Update with initial state on first load
         update();
@@ -712,8 +712,8 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
             : `
             if (!onInitOnce) {
               ${updateReferencesInCode(
-                addUpdateAfterSetInCode(json.hooks?.onInit?.code, useOptions),
-                useOptions,
+                addUpdateAfterSetInCode(json.hooks?.onInit?.code, options),
+                options,
               )}
               onInitOnce = true;
             }
@@ -727,8 +727,8 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
               `
               // onMount
               ${updateReferencesInCode(
-                addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions),
-                useOptions,
+                addUpdateAfterSetInCode(json.hooks.onMount.code, options),
+                options,
               )} 
               `
         }
@@ -867,19 +867,19 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
 
 // TODO: props support via custom elements
 export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
-  (options = {}) =>
+  (_options = {}) =>
   ({ component }) => {
     const ComponentName = component.name;
     const kebabName = kebabCase(ComponentName);
 
-    const useOptions: InternalToHtmlOptions = {
+    const options: InternalToHtmlOptions = initializeOptions('customElement', {
       prefix: kebabName,
-      ...options,
+      ..._options,
       onChangeJsById: {},
       js: '',
       namesMap: {},
       format: 'class',
-    };
+    });
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
@@ -888,7 +888,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
     const [forwardProp, hasPropRef] = getPropsRef(json, true);
 
     const contextVars = Object.keys(json?.context?.get || {});
-    const childComponents = getChildComponents(json, useOptions);
+    const childComponents = getChildComponents(json, options);
     const componentHasProps = hasProps(json);
     const componentHasStatefulDom = hasStatefulDom(json);
     const props = getProps(json);
@@ -914,7 +914,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       setContext.push({ name, value, ref });
     }
 
-    addUpdateAfterSet(json, useOptions);
+    addUpdateAfterSet(json, options);
 
     const hasContext = context.length;
     const hasLoop = hasComponent('For', json);
@@ -925,8 +925,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       json = runPostJsonPlugins(json, options.plugins);
     }
     let css = '';
-    if (useOptions?.experimental?.css) {
-      css = useOptions?.experimental?.css(json, useOptions, {
+    if (options?.experimental?.css) {
+      css = options?.experimental?.css(json, options, {
         collectCss,
         prefix: options.prefix,
       });
@@ -940,7 +940,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
 
     let html = json.children
       .map((item) =>
-        blockToHtml(item, useOptions, {
+        blockToHtml(item, options, {
           childComponents,
           props,
           outputs,
@@ -949,12 +949,12 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
         }),
       )
       .join('\n');
-    if (useOptions?.experimental?.childrenHtml) {
-      html = useOptions?.experimental?.childrenHtml(html, kebabName, json, useOptions);
+    if (options?.experimental?.childrenHtml) {
+      html = options?.experimental?.childrenHtml(html, kebabName, json, options);
     }
 
-    if (useOptions?.experimental?.cssHtml) {
-      html += useOptions?.experimental?.cssHtml(css);
+    if (options?.experimental?.cssHtml) {
+      html += options?.experimental?.cssHtml(css);
     } else if (css.length) {
       html += `<style>${css}</style>`;
     }
@@ -988,8 +988,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
        * 
        */
       class ${ComponentName} extends ${
-      useOptions?.experimental?.classExtends
-        ? useOptions?.experimental?.classExtends(json, useOptions)
+      options?.experimental?.classExtends
+        ? options?.experimental?.classExtends(json, options)
         : 'HTMLElement'
     } {
         ${Array.from(domRefs)
@@ -1021,7 +1021,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
           this.state = ${getStateObjectStringFromComponent(json, {
             valueMapper: (value) =>
               pipe(
-                stripStateAndPropsRefs(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
+                stripStateAndPropsRefs(addUpdateAfterSetInCode(value, options, 'self.update'), {
                   includeProps: false,
                   includeState: true,
                   // TODO: if it's an arrow function it's this.state.
@@ -1061,7 +1061,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
               ? ''
               : `
             this.updateDeps = [${json.hooks.onUpdate
-              ?.map((hook) => updateReferencesInCode(hook?.deps || '[]', useOptions))
+              ?.map((hook) => updateReferencesInCode(hook?.deps || '[]', options))
               .join(',')}];
             `
           }
@@ -1071,12 +1071,12 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
           // batch updates
           this.pendingUpdate = false;
           ${
-            useOptions?.experimental?.componentConstructor
-              ? useOptions?.experimental?.componentConstructor(json, useOptions)
+            options?.experimental?.componentConstructor
+              ? options?.experimental?.componentConstructor(json, options)
               : ''
           }
 
-          ${useOptions.js}
+          ${options.js}
 
           ${jsRefs
             .map((ref) => {
@@ -1098,13 +1098,13 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
             : `
           disconnectedCallback() {
             ${
-              useOptions?.experimental?.disconnectedCallback
-                ? useOptions?.experimental?.disconnectedCallback(json, useOptions)
+              options?.experimental?.disconnectedCallback
+                ? options?.experimental?.disconnectedCallback(json, options)
                 : `
             // onUnMount
             ${updateReferencesInCode(
-              addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions),
-              useOptions,
+              addUpdateAfterSetInCode(json.hooks.onUnMount.code, options),
+              options,
               {
                 contextVars,
               },
@@ -1144,8 +1144,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
           `
           }
           ${
-            useOptions?.experimental?.connectedCallbackUpdate
-              ? useOptions?.experimental?.connectedCallbackUpdate(json, html, useOptions)
+            options?.experimental?.connectedCallbackUpdate
+              ? options?.experimental?.connectedCallbackUpdate(json, html, options)
               : `
               this._root.innerHTML = \`
       ${html}\`;
@@ -1169,8 +1169,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
                   : `
                   if (!this.onInitOnce) {
                     ${updateReferencesInCode(
-                      addUpdateAfterSetInCode(json.hooks?.onInit?.code, useOptions),
-                      useOptions,
+                      addUpdateAfterSetInCode(json.hooks?.onInit?.code, options),
+                      options,
                       {
                         contextVars,
                       },
@@ -1208,14 +1208,14 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
           }`
         }
         ${
-          !useOptions?.experimental?.attributeChangedCallback
+          !options?.experimental?.attributeChangedCallback
             ? ''
             : `
           attributeChangedCallback(name, oldValue, newValue) {
-            ${useOptions?.experimental?.attributeChangedCallback(
+            ${options?.experimental?.attributeChangedCallback(
               ['name', 'oldValue', 'newValue'],
               json,
-              useOptions,
+              options,
             )}
           }
           `
@@ -1229,8 +1229,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
                 `
                 // onMount
                 ${updateReferencesInCode(
-                  addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions),
-                  useOptions,
+                  addUpdateAfterSetInCode(json.hooks.onMount.code, options),
+                  options,
                   {
                     contextVars,
                   },
@@ -1252,24 +1252,20 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
                 ;(function (__prev, __next) {
                   const __hasChange = __prev.find((val, index) => val !== __next[index]);
                   if (__hasChange !== undefined) {
-                    ${updateReferencesInCode(hook.code, useOptions, {
+                    ${updateReferencesInCode(hook.code, options, {
                       contextVars,
                       context: 'self.',
                     })}
                     self.updateDeps[${index}] = __next;
                   }
-                }(self.updateDeps[${index}], ${updateReferencesInCode(
-                  hook?.deps || '[]',
-                  useOptions,
-                  {
-                    contextVars,
-                    context: 'self.',
-                  },
-                )}));
+                }(self.updateDeps[${index}], ${updateReferencesInCode(hook?.deps || '[]', options, {
+                  contextVars,
+                  context: 'self.',
+                })}));
                 `;
               } else {
                 code += `
-                ${updateReferencesInCode(hook.code, useOptions, {
+                ${updateReferencesInCode(hook.code, options, {
                   contextVars,
                   context: 'self.',
                 })}
@@ -1352,26 +1348,26 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
         }
 
         updateBindings() {
-          ${Object.keys(useOptions.onChangeJsById)
+          ${Object.keys(options.onChangeJsById)
             .map((key) => {
-              const value = useOptions.onChangeJsById[key];
+              const value = options.onChangeJsById[key];
               if (!value) {
                 return '';
               }
               let code = '';
-              if (useOptions?.experimental?.updateBindings) {
-                key = useOptions?.experimental?.updateBindings?.key(key, value, useOptions);
-                code = useOptions?.experimental?.updateBindings?.code(key, value, useOptions);
+              if (options?.experimental?.updateBindings) {
+                key = options?.experimental?.updateBindings?.key(key, value, options);
+                code = options?.experimental?.updateBindings?.code(key, value, options);
               } else {
-                code = updateReferencesInCode(value, useOptions, {
+                code = updateReferencesInCode(value, options, {
                   contextVars,
                 });
               }
               return `
               ${
-                useOptions?.experimental?.generateQuerySelectorAll
+                options?.experimental?.generateQuerySelectorAll
                   ? `
-              ${useOptions?.experimental?.generateQuerySelectorAll(key, code)}
+              ${options?.experimental?.generateQuerySelectorAll(key, code)}
               `
                   : `              
               this._root.querySelectorAll("[data-el='${key}']").forEach((el) => {
@@ -1484,8 +1480,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       }
 
       ${
-        useOptions?.experimental?.customElementsDefine
-          ? useOptions?.experimental?.customElementsDefine(kebabName, component, useOptions)
+        options?.experimental?.customElementsDefine
+          ? options?.experimental?.customElementsDefine(kebabName, component, options)
           : `customElements.define('${kebabName}', ${ComponentName});`
       }
     `;
diff --git a/packages/core/src/generators/liquid.ts b/packages/core/src/generators/liquid.ts
index 67dc4dd0f6..8d39b9aac9 100644
--- a/packages/core/src/generators/liquid.ts
+++ b/packages/core/src/generators/liquid.ts
@@ -1,4 +1,5 @@
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../constants/html_tags';
 import { fastClone } from '../helpers/fast-clone';
 import { getStateObjectStringFromComponent } from '../helpers/get-state-object-string';
 import { stripMetaProperties } from '../helpers/strip-meta-properties';
@@ -10,7 +11,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../modules/plugins';
-import { selfClosingTags } from '../parsers/jsx';
 import { checkIsForNode, MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 
@@ -122,7 +122,7 @@ const blockToLiquid = (json: MitosisNode, options: ToLiquidOptions = {}): string
         str += ` ${key}="{{${useValue}}}" `;
       }
     }
-    if (selfClosingTags.has(json.name)) {
+    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
       return str + ' />';
     }
     str += '>';
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 72e2a216fb..d6719dfe50 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -1,5 +1,6 @@
 import { camelCase, some } from 'lodash';
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { dashCase } from '../../helpers/dash-case';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
@@ -11,6 +12,7 @@ import { has } from '../../helpers/has';
 import { indent } from '../../helpers/indent';
 import { isUpperCase } from '../../helpers/is-upper-case';
 import { mapRefs } from '../../helpers/map-refs';
+import { initializeOptions } from '../../helpers/merge-options';
 import { renderPreComponent } from '../../helpers/render-imports';
 import { stripMetaProperties } from '../../helpers/strip-meta-properties';
 import { stripStateAndPropsRefs } from '../../helpers/strip-state-and-props-refs';
@@ -21,7 +23,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../../modules/plugins';
-import { selfClosingTags } from '../../parsers/jsx';
 import { checkIsForNode, MitosisNode } from '../../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 import { collectClassString } from './collect-class-string';
@@ -109,7 +110,7 @@ const blockToLit = (json: MitosisNode, options: ToLitOptions = {}): string => {
       }
     }
   }
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
   str += '>';
@@ -127,8 +128,10 @@ function processBinding(code: string) {
 }
 
 export const componentToLit: TranspilerGenerator<ToLitOptions> =
-  (options = {}) =>
+  (_options = {}) =>
   ({ component }) => {
+    const options = initializeOptions('lit', _options);
+
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 78a2db57cf..4abba293e8 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -1,6 +1,7 @@
 import hash from 'hash-sum';
 import { camelCase } from 'lodash';
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { dashCase } from '../../helpers/dash-case';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
@@ -10,6 +11,7 @@ import { getStateObjectStringFromComponent } from '../../helpers/get-state-objec
 import { hasProps } from '../../helpers/has-props';
 import { indent } from '../../helpers/indent';
 import { mapRefs } from '../../helpers/map-refs';
+import { initializeOptions } from '../../helpers/merge-options';
 import { getForArguments } from '../../helpers/nodes/for';
 import { renderPreComponent } from '../../helpers/render-imports';
 import { stripMetaProperties } from '../../helpers/strip-meta-properties';
@@ -21,7 +23,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../../modules/plugins';
-import { selfClosingTags } from '../../parsers/jsx';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { checkIsForNode, MitosisNode } from '../../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
@@ -99,7 +100,7 @@ const blockToMarko = (json: MitosisNode, options: InternalToMarkoOptions): strin
       str += ` ${key}=(${processBinding(options.component, code as string)}) `;
     }
   }
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
   str += '>';
@@ -151,10 +152,11 @@ export const componentToMarko: TranspilerGenerator<ToMarkoOptions> =
   (userOptions = {}) =>
   ({ component }) => {
     let json = fastClone(component);
-    const options: InternalToMarkoOptions = {
+    const options = initializeOptions<InternalToMarkoOptions>('marko', {
       ...userOptions,
       component: json,
-    };
+    });
+
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
diff --git a/packages/core/src/generators/mitosis.ts b/packages/core/src/generators/mitosis.ts
index 1512b06ae8..5f2d690dc3 100644
--- a/packages/core/src/generators/mitosis.ts
+++ b/packages/core/src/generators/mitosis.ts
@@ -1,5 +1,7 @@
 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';
@@ -9,7 +11,6 @@ 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 { METADATA_HOOK_NAME, selfClosingTags } from '../parsers/jsx';
 import { MitosisComponent } from '../types/mitosis-component';
 import { checkIsForNode, MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
@@ -95,7 +96,7 @@ export const blockToMitosis = (
       }
     }
   }
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
 
@@ -186,7 +187,7 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
 
     ${
       stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
-        ? `${METADATA_HOOK_NAME}(${stringifiedUseMetadata})`
+        ? `${HOOKS.METADATA}(${stringifiedUseMetadata})`
         : ''
     }
 
diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
index 361bc8baf5..120c15f762 100644
--- a/packages/core/src/generators/qwik/component-generator.ts
+++ b/packages/core/src/generators/qwik/component-generator.ts
@@ -1,7 +1,7 @@
 import { format } from 'prettier/standalone';
 import { convertTypeScriptToJS } from '../../helpers/babel-transform';
 import { fastClone } from '../../helpers/fast-clone';
-import { mergeOptions } from '../../helpers/merge-options';
+import { initializeOptions } from '../../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { replaceIdentifiers, replaceStateIdentifier } from '../../helpers/replace-identifiers';
 import { checkHasState } from '../../helpers/state';
@@ -87,7 +87,7 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
     // Make a copy we can safely mutate, similar to babel's toolchain
     let component = fastClone(_component);
 
-    const options = mergeOptions(DEFAULT_OPTIONS, userOptions);
+    const options = initializeOptions('qwik', DEFAULT_OPTIONS, userOptions);
 
     component = runPreJsonPlugins(component, options.plugins);
     component = runPostJsonPlugins(component, options.plugins);
diff --git a/packages/core/src/generators/qwik/src-generator.ts b/packages/core/src/generators/qwik/src-generator.ts
index 086384289f..d282e571a3 100644
--- a/packages/core/src/generators/qwik/src-generator.ts
+++ b/packages/core/src/generators/qwik/src-generator.ts
@@ -1,6 +1,6 @@
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { convertExportDefaultToReturn } from '../../parsers/builder';
-import { selfClosingTags } from '../../parsers/jsx';
 import { stableJSONserialize } from './helpers/stable-serialize';
 export interface SrcBuilderOptions {
   isPretty: boolean;
@@ -380,7 +380,7 @@ export class SrcBuilder {
   }
 
   isSelfClosingTag(symbol: Symbol | string) {
-    return selfClosingTags.has(String(symbol));
+    return SELF_CLOSING_HTML_TAGS.has(String(symbol));
   }
 
   jsxEnd(symbol: Symbol | string) {
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index e8f47d07d1..4842dd4159 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -1,11 +1,11 @@
 import { camelCase, upperFirst } from 'lodash';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { filterEmptyTextNodes } from '../../helpers/filter-empty-text-nodes';
 import isChildren from '../../helpers/is-children';
 import { isRootTextNode } from '../../helpers/is-root-text-node';
 import { isValidAttributeName } from '../../helpers/is-valid-attribute-name';
 import { getForArguments } from '../../helpers/nodes/for';
 import { isSlotProperty } from '../../helpers/slots';
-import { selfClosingTags } from '../../parsers/jsx';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { checkIsForNode, ForNode, MitosisNode } from '../../types/mitosis-node';
 import { closeFrag, getFragment, openFrag, processBinding, wrapInFragment } from './helpers';
@@ -234,7 +234,7 @@ export const blockToReact = (
     }
   }
 
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
 
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index b9df4a79f7..72971b3f23 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -15,7 +15,7 @@ import { gettersToFunctions } from '../../helpers/getters-to-functions';
 import { handleMissingState } from '../../helpers/handle-missing-state';
 import { isRootTextNode } from '../../helpers/is-root-text-node';
 import { mapRefs } from '../../helpers/map-refs';
-import { mergeOptions } from '../../helpers/merge-options';
+import { initializeOptions } from '../../helpers/merge-options';
 import { processHttpRequests } from '../../helpers/process-http-requests';
 import { renderPreComponent } from '../../helpers/render-imports';
 import { stripNewlinesInStrings } from '../../helpers/replace-new-lines-in-strings';
@@ -159,7 +159,18 @@ export const componentToReact: TranspilerGenerator<Partial<ToReactOptions>> =
   (reactOptions = {}) =>
   ({ component, path }) => {
     let json = fastClone(component);
-    const options: ToReactOptions = mergeOptions(DEFAULT_OPTIONS, reactOptions);
+
+    const target = reactOptions.preact
+      ? 'preact'
+      : reactOptions.type === 'native'
+      ? 'reactNative'
+      : reactOptions.type === 'taro'
+      ? 'taro'
+      : reactOptions.rsc
+      ? 'rsc'
+      : 'react';
+
+    const options = initializeOptions(target, DEFAULT_OPTIONS, reactOptions);
 
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/react/types.ts b/packages/core/src/generators/react/types.ts
index 5016fa3cb5..823404dce1 100644
--- a/packages/core/src/generators/react/types.ts
+++ b/packages/core/src/generators/react/types.ts
@@ -6,6 +6,7 @@ export interface ToReactOptions extends BaseTranspilerOptions {
   format?: 'lite' | 'safe';
   type: 'dom' | 'native' | 'taro';
   preact?: boolean;
+  rsc?: boolean;
   forwardRef?: string;
   experimental?: any;
   /**
diff --git a/packages/core/src/generators/rsc.ts b/packages/core/src/generators/rsc.ts
index 74688655b5..0b03f43438 100644
--- a/packages/core/src/generators/rsc.ts
+++ b/packages/core/src/generators/rsc.ts
@@ -73,6 +73,7 @@ export const componentToRsc: TranspilerGenerator<Partial<ToRscOptions>> =
       stylesType: 'style-tag',
       stateType: 'variables',
       contextType: 'prop-drill',
+      rsc: true,
     });
 
     return componentToReact(options)({ component: json, path });
diff --git a/packages/core/src/generators/solid/blocks.ts b/packages/core/src/generators/solid/blocks.ts
index f3cba375b4..d12b389028 100644
--- a/packages/core/src/generators/solid/blocks.ts
+++ b/packages/core/src/generators/solid/blocks.ts
@@ -1,9 +1,9 @@
 import { types } from '@babel/core';
 import { kebabCase } from 'lodash';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { babelTransformExpression } from '../../helpers/babel-transform';
 import { filterEmptyTextNodes } from '../../helpers/filter-empty-text-nodes';
 import { objectHasKey } from '../../helpers/typescript';
-import { selfClosingTags } from '../../parsers/jsx';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { checkIsForNode, MitosisNode } from '../../types/mitosis-node';
 import { collectClassString } from './helpers/styles';
@@ -109,7 +109,7 @@ export const blockToSolid = ({
       str += ` ${newKey}={${useValue}} `;
     }
   }
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
   str += '>';
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index ae1923752b..00d99544e9 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -13,7 +13,7 @@ import { getRefs } from '../../helpers/get-refs';
 import { stringifyContextValue } from '../../helpers/get-state-object-string';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
 import { isRootTextNode } from '../../helpers/is-root-text-node';
-import { mergeOptions } from '../../helpers/merge-options';
+import { initializeOptions } from '../../helpers/merge-options';
 import { checkIsDefined } from '../../helpers/nullable';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { renderPreComponent } from '../../helpers/render-imports';
@@ -96,7 +96,7 @@ export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
   ({ component }) => {
     let json = fastClone(component);
 
-    const options = mergeOptions(DEFAULT_OPTIONS, passedOptions);
+    const options = initializeOptions('solid', DEFAULT_OPTIONS, passedOptions);
     options.plugins = [
       ...(options.plugins || []),
       CODE_PROCESSOR_PLUGIN((codeType) => {
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 8e8d5e47da..1a72ff04c9 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -1,4 +1,5 @@
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { dashCase } from '../../helpers/dash-case';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
@@ -7,6 +8,7 @@ import { getProps } from '../../helpers/get-props';
 import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
 import { indent } from '../../helpers/indent';
 import { mapRefs } from '../../helpers/map-refs';
+import { initializeOptions } from '../../helpers/merge-options';
 import { getForArguments } from '../../helpers/nodes/for';
 import { renderPreComponent } from '../../helpers/render-imports';
 import { stripMetaProperties } from '../../helpers/strip-meta-properties';
@@ -18,7 +20,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../../modules/plugins';
-import { selfClosingTags } from '../../parsers/jsx';
 import { checkIsForNode, MitosisNode } from '../../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 import { collectClassString } from './collect-class-string';
@@ -79,7 +80,7 @@ const blockToStencil = (json: MitosisNode, options: ToStencilOptions = {}): stri
       str += ` ${key}={${processBinding(code as string)}} `;
     }
   }
-  if (selfClosingTags.has(json.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
   str += '>';
@@ -97,8 +98,9 @@ function processBinding(code: string) {
 }
 
 export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
-  (options = {}) =>
+  (_options = {}) =>
   ({ component }) => {
+    const options = initializeOptions('stencil', _options);
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index d925bcd0e7..8b1604253d 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -1,4 +1,4 @@
-import { selfClosingTags } from '../../parsers/jsx';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseNode, Binding, ForNode, MitosisNode } from '../../types/mitosis-node';
 
@@ -264,7 +264,7 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
     return str;
   }
 
-  if (selfClosingTags.has(tagName)) {
+  if (SELF_CLOSING_HTML_TAGS.has(tagName)) {
     return str + ' />';
   }
   str += '>';
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index c8bceec2d0..b0cd82340d 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -12,7 +12,7 @@ import {
 } from '../../helpers/get-state-object-string';
 import { gettersToFunctions } from '../../helpers/getters-to-functions';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
-import { mergeOptions } from '../../helpers/merge-options';
+import { initializeOptions } from '../../helpers/merge-options';
 import { stripGetter } from '../../helpers/patterns';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { renderPreComponent } from '../../helpers/render-imports';
@@ -113,7 +113,7 @@ const DEFAULT_OPTIONS: ToSvelteOptions = {
 export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
   (userProvidedOptions) =>
   ({ component }) => {
-    const options = mergeOptions(DEFAULT_OPTIONS, userProvidedOptions);
+    const options = initializeOptions('svelte', DEFAULT_OPTIONS, userProvidedOptions);
 
     options.plugins = [
       ...(options.plugins || []),
diff --git a/packages/core/src/generators/template.ts b/packages/core/src/generators/template.ts
index d7212d03e8..44d27c8316 100644
--- a/packages/core/src/generators/template.ts
+++ b/packages/core/src/generators/template.ts
@@ -1,4 +1,5 @@
 import { format } from 'prettier/standalone';
+import { SELF_CLOSING_HTML_TAGS } from '../constants/html_tags';
 import { dedent } from '../helpers/dedent';
 import { fastClone } from '../helpers/fast-clone';
 import { getStateObjectStringFromComponent } from '../helpers/get-state-object-string';
@@ -9,7 +10,6 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../modules/plugins';
-import { selfClosingTags } from '../parsers/jsx';
 import { checkIsForNode, MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 
@@ -83,7 +83,7 @@ const blockToTemplate = (json: MitosisNode, options: ToTemplateOptions = {}) =>
         str += ` ${key}="\${${useValue}}" `;
       }
     }
-    if (selfClosingTags.has(json.name)) {
+    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
       return str + ' />';
     }
     str += '>';
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 8c1451d2c3..1dfb6def8b 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -1,4 +1,5 @@
 import { identity, pipe } from 'fp-ts/lib/function';
+import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { filterEmptyTextNodes } from '../../helpers/filter-empty-text-nodes';
 import isChildren from '../../helpers/is-children';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
@@ -7,7 +8,6 @@ import { removeSurroundingBlock } from '../../helpers/remove-surrounding-block';
 import { replaceIdentifiers } from '../../helpers/replace-identifiers';
 import { isSlotProperty, stripSlotPrefix } from '../../helpers/slots';
 import { Dictionary } from '../../helpers/typescript';
-import { selfClosingTags } from '../../parsers/jsx';
 import { Binding, ForNode, MitosisNode, SpreadType } from '../../types/mitosis-node';
 import {
   addBindingsToJson,
@@ -424,7 +424,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
 
   str += getBlockBindings(node);
 
-  if (selfClosingTags.has(node.name)) {
+  if (SELF_CLOSING_HTML_TAGS.has(node.name)) {
     return str + ' />';
   }
 
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 133599aba8..107d3bf1bd 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -9,7 +9,7 @@ import { fastClone } from '../../helpers/fast-clone';
 import { getProps } from '../../helpers/get-props';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
 import { mapRefs } from '../../helpers/map-refs';
-import { mergeOptions } from '../../helpers/merge-options';
+import { initializeOptions } from '../../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { processHttpRequests } from '../../helpers/process-http-requests';
 import { renderPreComponent } from '../../helpers/render-imports';
@@ -105,7 +105,12 @@ const BASE_OPTIONS: ToVueOptions = {
 const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
   (userOptions) =>
   ({ component, path }) => {
-    const options = mergeOptions(BASE_OPTIONS, userOptions);
+    const options = initializeOptions(
+      userOptions?.vueVersion === 2 ? 'vue2' : 'vue3',
+      BASE_OPTIONS,
+      userOptions,
+    );
+
     options.plugins.unshift(
       CODE_PROCESSOR_PLUGIN((codeType) => {
         if (options.api === 'composition') {
diff --git a/packages/core/src/helpers/merge-options.ts b/packages/core/src/helpers/merge-options.ts
index 3bc554ad8c..68727f3f12 100644
--- a/packages/core/src/helpers/merge-options.ts
+++ b/packages/core/src/helpers/merge-options.ts
@@ -1,7 +1,8 @@
-import { BaseTranspilerOptions } from '..';
+import { BaseTranspilerOptions, Target } from '..';
+import { processTargetBlocks } from './plugins/process-target-blocks';
 
 /**
- * Merges options while combining the `plugins` array.
+ * Merges options while combining the `plugins` array, and adds any default plugins.
  */
 export const mergeOptions = <T extends BaseTranspilerOptions>(
   a: T,
@@ -15,3 +16,20 @@ export const mergeOptions = <T extends BaseTranspilerOptions>(
     plugins: [...(a.plugins || []), ...(b.plugins || []), ...(c?.plugins || [])],
   };
 };
+
+/**
+ * Merges options while combining the `plugins` array, and adds any default plugins.
+ */
+export const initializeOptions = <T extends BaseTranspilerOptions>(
+  target: Target,
+  a: T,
+  b: Partial<T> = {},
+  c?: Partial<T>,
+): T & { plugins: NonNullable<T['plugins']> } => {
+  const options = mergeOptions(a, b, c);
+
+  // we want this plugin to run first in every case, as it replaces magic strings with the correct code.
+  options.plugins.unshift(processTargetBlocks(target));
+
+  return options;
+};
diff --git a/packages/core/src/helpers/plugins/process-code.ts b/packages/core/src/helpers/plugins/process-code.ts
deleted file mode 100644
index 4f5bd7c30a..0000000000
--- a/packages/core/src/helpers/plugins/process-code.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { extendedHook, MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode } from '../../types/mitosis-node';
-import { Plugin } from '../../types/plugins';
-import { checkIsDefined } from '../nullable';
-import { traverseNodes } from '../traverse-nodes';
-
-type CodeType =
-  | 'hooks'
-  | 'hooks-deps'
-  | 'bindings'
-  | 'properties'
-  | 'state'
-  // this is for when we write dynamic JSX elements like `<state.foo>Hello</state.foo>` in Mitosis
-  | 'dynamic-jsx-elements';
-
-// declare function codeProcessor<T extends CodeType>(
-//   codeType: T,
-//   json: MitosisComponent,
-// ): (code: string, hookType: T extends 'hooks' ? keyof MitosisComponent['hooks'] : string) => string;
-declare function codeProcessor(
-  codeType: CodeType,
-  json: MitosisComponent,
-): (code: string, hookType: string) => string;
-
-type CodeProcessor = typeof codeProcessor;
-
-/**
- * Process code in each node.
- */
-const preProcessNodeCode = ({
-  json,
-  codeProcessor,
-  parentComponent,
-}: {
-  json: MitosisNode;
-  codeProcessor: CodeProcessor;
-  parentComponent: MitosisComponent;
-}) => {
-  // const propertiesProcessor = codeProcessor('properties');
-  // for (const key in json.properties) {
-  //   const value = json.properties[key];
-  //   if (key !== '_text' && value) {
-  //     json.properties[key] = propertiesProcessor(value);
-  //   }
-  // }
-
-  const bindingsProcessor = codeProcessor('bindings', parentComponent);
-  for (const key in json.bindings) {
-    const value = json.bindings[key];
-    if (value?.code) {
-      value.code = bindingsProcessor(value.code, key);
-    }
-  }
-
-  json.name = codeProcessor('dynamic-jsx-elements', parentComponent)(json.name, '');
-};
-
-/**
- * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
- */
-export const CODE_PROCESSOR_PLUGIN =
-  (codeProcessor: CodeProcessor): Plugin =>
-  () => ({
-    json: {
-      post: (json) => {
-        function processHook(key: keyof typeof json.hooks, hook: extendedHook) {
-          hook.code = codeProcessor('hooks', json)(hook.code, key);
-          if (hook.deps) {
-            hook.deps = codeProcessor('hooks-deps', json)(hook.deps, key);
-          }
-        }
-
-        /**
-         * process code in hooks
-         */
-        for (const key in json.hooks) {
-          const typedKey = key as keyof typeof json.hooks;
-          const hooks = json.hooks[typedKey];
-
-          if (checkIsDefined(hooks)) {
-            if (Array.isArray(hooks)) {
-              for (const hook of hooks) {
-                processHook(typedKey, hook);
-              }
-            } else {
-              processHook(typedKey, hooks);
-            }
-          }
-        }
-
-        for (const key in json.state) {
-          const state = json.state[key];
-          if (state) {
-            state.code = codeProcessor('state', json)(state.code, key);
-          }
-        }
-
-        traverseNodes(json, (node) => {
-          preProcessNodeCode({ json: node, codeProcessor, parentComponent: json });
-        });
-      },
-    },
-  });
diff --git a/packages/core/src/helpers/plugins/process-code/index.ts b/packages/core/src/helpers/plugins/process-code/index.ts
new file mode 100644
index 0000000000..816579038b
--- /dev/null
+++ b/packages/core/src/helpers/plugins/process-code/index.ts
@@ -0,0 +1,87 @@
+import { flow } from 'fp-ts/lib/function';
+import { extendedHook, MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+import { Plugin } from '../../../types/plugins';
+import { checkIsDefined } from '../../nullable';
+import { traverseNodes } from '../../traverse-nodes';
+import { CodeProcessor } from './types';
+
+/**
+ * Process code in each node.
+ */
+const preProcessNodeCode = ({
+  json,
+  codeProcessor,
+  parentComponent,
+}: {
+  json: MitosisNode;
+  codeProcessor: CodeProcessor;
+  parentComponent: MitosisComponent;
+}) => {
+  // const propertiesProcessor = codeProcessor('properties');
+  // for (const key in json.properties) {
+  //   const value = json.properties[key];
+  //   if (key !== '_text' && value) {
+  //     json.properties[key] = propertiesProcessor(value);
+  //   }
+  // }
+
+  const bindingsProcessor = codeProcessor('bindings', parentComponent);
+  for (const key in json.bindings) {
+    const value = json.bindings[key];
+    if (value?.code) {
+      value.code = bindingsProcessor(value.code, key);
+    }
+  }
+
+  json.name = codeProcessor('dynamic-jsx-elements', parentComponent)(json.name, '');
+};
+
+export const createCodeProcessorPlugin =
+  (codeProcessor: CodeProcessor) =>
+  (json: MitosisComponent): void => {
+    function processHook(key: keyof typeof json.hooks, hook: extendedHook) {
+      hook.code = codeProcessor('hooks', json)(hook.code, key);
+      if (hook.deps) {
+        hook.deps = codeProcessor('hooks-deps', json)(hook.deps, key);
+      }
+    }
+
+    /**
+     * process code in hooks
+     */
+    for (const key in json.hooks) {
+      const typedKey = key as keyof typeof json.hooks;
+      const hooks = json.hooks[typedKey];
+
+      if (checkIsDefined(hooks)) {
+        if (Array.isArray(hooks)) {
+          for (const hook of hooks) {
+            processHook(typedKey, hook);
+          }
+        } else {
+          processHook(typedKey, hooks);
+        }
+      }
+    }
+
+    for (const key in json.state) {
+      const state = json.state[key];
+      if (state) {
+        state.code = codeProcessor('state', json)(state.code, key);
+      }
+    }
+
+    traverseNodes(json, (node) => {
+      preProcessNodeCode({ json: node, codeProcessor, parentComponent: json });
+    });
+  };
+
+/**
+ * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
+ */
+export const CODE_PROCESSOR_PLUGIN = flow(
+  createCodeProcessorPlugin,
+  (plugin): Plugin =>
+    () => ({ json: { post: plugin } }),
+);
diff --git a/packages/core/src/helpers/plugins/process-code/types.ts b/packages/core/src/helpers/plugins/process-code/types.ts
new file mode 100644
index 0000000000..9830588a5d
--- /dev/null
+++ b/packages/core/src/helpers/plugins/process-code/types.ts
@@ -0,0 +1,21 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+
+export type CodeType =
+  | 'hooks'
+  | 'hooks-deps'
+  | 'bindings'
+  | 'properties'
+  | 'state'
+  // this is for when we write dynamic JSX elements like `<state.foo>Hello</state.foo>` in Mitosis
+  | 'dynamic-jsx-elements';
+
+// declare function codeProcessor<T extends CodeType>(
+//   codeType: T,
+//   json: MitosisComponent,
+// ): (code: string, hookType: T extends 'hooks' ? keyof MitosisComponent['hooks'] : string) => string;
+declare function codeProcessor(
+  codeType: CodeType,
+  json: MitosisComponent,
+): (code: string, hookType: string) => string;
+
+export type CodeProcessor = typeof codeProcessor;
diff --git a/packages/core/src/helpers/plugins/process-target-blocks.ts b/packages/core/src/helpers/plugins/process-target-blocks.ts
new file mode 100644
index 0000000000..af5f59bd9c
--- /dev/null
+++ b/packages/core/src/helpers/plugins/process-target-blocks.ts
@@ -0,0 +1,60 @@
+import { pipe } from 'fp-ts/lib/function';
+import { getIdFromMatch, USE_TARGET_MAGIC_REGEX } from '../../parsers/jsx/hooks/use-target';
+import { Targets } from '../../targets';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { Plugin } from '../../types/plugins';
+import { createCodeProcessorPlugin } from './process-code';
+
+const getBlockForTarget = ({
+  target,
+  json,
+  targetId,
+}: {
+  target: Targets;
+  json: MitosisComponent;
+  targetId: string;
+}) => {
+  const targetBlock = json.targetBlocks?.[targetId];
+  if (!targetBlock) return undefined;
+
+  switch (target) {
+    case 'vue3':
+    case 'vue':
+      return targetBlock['vue3'] || targetBlock['vue'] || targetBlock['default'];
+    default:
+      return targetBlock[target] || targetBlock['default'];
+  }
+};
+
+/**
+ * Processes `useTarget()` blocks for a given target.
+ */
+export const processTargetBlocks = (target: Targets): Plugin =>
+  pipe(
+    createCodeProcessorPlugin((_codeType, json) => (code) => {
+      const matches = code.match(USE_TARGET_MAGIC_REGEX);
+
+      if (!matches) return code;
+      for (const m of matches) {
+        // get the captured ID of the target block
+        const targetId = getIdFromMatch(m);
+
+        if (!targetId) continue;
+
+        // find the target block in the component, or the default target block
+        const targetBlock = getBlockForTarget({ target, json, targetId });
+
+        if (!targetBlock) {
+          throw new Error(
+            `Could not find \`useTarget()\` value in "${json.name}" for target "${target}", and no default value was set.`,
+          );
+        }
+
+        code = code.replaceAll(m, targetBlock.code);
+      }
+
+      return code;
+    }),
+    (plugin): Plugin =>
+      () => ({ json: { pre: plugin } }),
+  );
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index eb18d2bf85..f9b75bda72 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,4 +1,6 @@
 import { JSX } from '@builder.io/mitosis/jsx-runtime';
+import { Dictionary } from './helpers/typescript';
+import { TargetBlock } from './types/mitosis-component';
 
 export * from './flow';
 export * from './generators/alpine';
@@ -43,46 +45,28 @@ export * from './types/mitosis-node';
 export * from './types/plugins';
 export * from './types/transpiler';
 
-function Provider<T>(props: { value: T; children: JSX.Element }): any {
-  return null;
-}
+declare function Provider<T>(props: { value: T; children: JSX.Element }): any;
 
 export type Context<T> = {
   Provider: typeof Provider<T>;
 };
 
 // These compile away
-export const useStore = <T>(obj: T): T => {
-  throw new Error('useStore: Mitosis hook should have been compiled away');
-  return obj as T;
-};
-export const useState = <T>(obj: T): [T, (value: T) => void] => {
-  throw new Error('useState: Mitosis hook should have been compiled away');
-  return null as any;
-};
-export const useRef = <T>(obj?: null | void | T) => {
-  throw new Error('useRef: Mitosis hook should have been compiled away');
-  return obj as unknown as T;
-};
-export const useContext = <T = { [key: string]: any }>(key: Context<T>): T => null as unknown as T;
-export const createContext = <T = { [key: string]: any }>(value: T): Context<T> =>
-  null as unknown as Context<T>;
-export const setContext = <T = { [key: string]: any }>(
-  key: Context<T>,
-  value: Partial<T>,
-): void => {};
-export const onMount = (fn: () => any) => {
-  throw new Error('onMount: Mitosis hook should have been compiled away');
-  return null as any;
-};
-export const onUpdate = (fn: () => any, deps?: any[]) => null as any;
-export const onInit = (fn: () => any) => null as any;
-export const onUnMount = (fn: () => any) => null as any;
-export const useDynamicTag = (fn: () => any) => null as any;
-export const onError = (fn: () => any) => null as any;
-export const useMetadata = (obj: object) => {
-  throw new Error('useMetadata: Mitosis hook should have been compiled away');
-  return null as any;
-};
-export const useDefaultProps = <T = { [key: string]: any }>(value: T): T => null as unknown as T;
-export const useStyle = (value: string) => null as any;
+export declare function useStore<T>(obj: T): T;
+export declare function useState<T>(obj: T): [T, (value: T) => void];
+export declare function useRef<T>(obj?: null | void | T): T;
+export declare function useContext<T = Dictionary<any>>(key: Context<T>): T;
+export declare function createContext<T = Dictionary<any>>(value: T): Context<T>;
+export declare function setContext<T = Dictionary<any>>(key: Context<T>, value: Partial<T>): void;
+export declare function onMount(fn: () => any): void;
+export declare function onUpdate(fn: () => any, deps?: any[]): void;
+export declare function onInit(fn: () => any): void;
+export declare function onUnMount(fn: () => any): void;
+export declare function useDynamicTag(fn: () => any): void;
+export declare function onError(fn: () => any): void;
+export declare function useMetadata(obj: object): void;
+export declare function useDefaultProps<T = Dictionary<any>>(value: T): T;
+export declare function useStyle(value: string): void;
+
+// TO-DO: better type strictness that guarantees `Target` is a subset of `Targets`
+export declare function useTarget<Return>(dict: TargetBlock<Return>): Return;
diff --git a/packages/core/src/parsers/jsx/element-parser.ts b/packages/core/src/parsers/jsx/element-parser.ts
index c3354152a7..c40c728f54 100644
--- a/packages/core/src/parsers/jsx/element-parser.ts
+++ b/packages/core/src/parsers/jsx/element-parser.ts
@@ -92,7 +92,7 @@ export const jsxElementToJson = (
           else: jsxElementToJson(node.expression.alternate as any)!,
         },
         bindings: {
-          when: createSingleBinding({ code: generate(node.expression.test).code! }),
+          when: createSingleBinding({ code: generate(node.expression.test).code }),
         },
         children: [jsxElementToJson(node.expression.consequent as any)!],
       });
@@ -210,9 +210,7 @@ export const jsxElementToJson = (
 
         // boolean attribute
         if (value === null) {
-          memo[key] = createSingleBinding({
-            code: 'true',
-          });
+          memo[key] = createSingleBinding({ code: 'true' });
           return memo;
         }
         if (types.isJSXExpressionContainer(value) && !types.isStringLiteral(value.expression)) {
diff --git a/packages/core/src/parsers/jsx/function-parser.ts b/packages/core/src/parsers/jsx/function-parser.ts
index 8170875779..a50eb2710d 100644
--- a/packages/core/src/parsers/jsx/function-parser.ts
+++ b/packages/core/src/parsers/jsx/function-parser.ts
@@ -10,38 +10,13 @@ import { MitosisNode } from '../../types/mitosis-node';
 import { getPropsTypeRef } from './component-types';
 import { jsxElementToJson } from './element-parser';
 import { parseCode, parseCodeJson } from './helpers';
-import { METADATA_HOOK_NAME } from './hooks';
+import { generateUseStyleCode, parseDefaultPropsHook } from './hooks';
+import { processHookCode } from './hooks/helpers';
 import { parseStateObjectToMitosisState } from './state';
 import { Context } from './types';
 
 const { types } = babel;
 
-export function generateUseStyleCode(expression: babel.types.CallExpression) {
-  return generate(expression.arguments[0]).code.replace(/(^("|'|`)|("|'|`)$)/g, '');
-}
-
-export function parseDefaultPropsHook(
-  component: MitosisComponent,
-  expression: babel.types.CallExpression,
-) {
-  const firstArg = expression.arguments[0];
-  if (types.isObjectExpression(firstArg)) {
-    component.defaultProps = parseStateObjectToMitosisState(firstArg, false);
-  }
-}
-
-const processHookCode = (
-  firstArg: babel.types.ArrowFunctionExpression | babel.types.FunctionExpression,
-) =>
-  generate(firstArg.body)
-    .code.trim()
-    // Remove arbitrary block wrapping if any
-    // AKA
-    //  { console.log('hi') } -> console.log('hi')
-    .replace(/^{/, '')
-    .replace(/}$/, '')
-    .trim();
-
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
@@ -57,12 +32,9 @@ export const componentFunctionToJson = (
   for (const item of node.body.body) {
     if (types.isExpressionStatement(item)) {
       const expression = item.expression;
-      if (types.isCallExpression(expression)) {
-        if (types.isIdentifier(expression.callee)) {
-          if (
-            expression.callee.name === 'setContext' ||
-            expression.callee.name === 'provideContext'
-          ) {
+      if (types.isCallExpression(expression) && types.isIdentifier(expression.callee)) {
+        switch (expression.callee.name) {
+          case HOOKS.SET_CONTEXT: {
             const keyNode = expression.arguments[0];
             const valueNode = expression.arguments[1];
             if (types.isIdentifier(keyNode)) {
@@ -91,13 +63,17 @@ export const componentFunctionToJson = (
                 };
               }
             }
-          } else if (expression.callee.name === 'onMount') {
+            break;
+          }
+          case HOOKS.MOUNT: {
             const firstArg = expression.arguments[0];
             if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
               const code = processHookCode(firstArg);
               hooks.onMount = { code };
             }
-          } else if (expression.callee.name === 'onUpdate') {
+            break;
+          }
+          case HOOKS.UPDATE: {
             const firstArg = expression.arguments[0];
             const secondArg = expression.arguments[1];
             if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
@@ -117,25 +93,35 @@ export const componentFunctionToJson = (
                 ];
               }
             }
-          } else if (expression.callee.name === 'onUnMount') {
+            break;
+          }
+          case HOOKS.UNMOUNT: {
             const firstArg = expression.arguments[0];
             if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
               const code = processHookCode(firstArg);
               hooks.onUnMount = { code };
             }
-          } else if (expression.callee.name === 'onInit') {
+            break;
+          }
+          case HOOKS.INIT: {
             const firstArg = expression.arguments[0];
             if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
               const code = processHookCode(firstArg);
               hooks.onInit = { code };
             }
-          } else if (expression.callee.name === HOOKS.DEFAULT_PROPS) {
+            break;
+          }
+          case HOOKS.DEFAULT_PROPS: {
             parseDefaultPropsHook(context.builder.component, expression);
-          } else if (expression.callee.name === HOOKS.STYLE) {
+            break;
+          }
+          case HOOKS.STYLE: {
             context.builder.component.style = generateUseStyleCode(expression);
-          } else if (expression.callee.name === METADATA_HOOK_NAME) {
-            context.builder.component.meta[METADATA_HOOK_NAME] = {
-              ...context.builder.component.meta[METADATA_HOOK_NAME],
+            break;
+          }
+          case HOOKS.METADATA: {
+            context.builder.component.meta[HOOKS.METADATA] = {
+              ...context.builder.component.meta[HOOKS.METADATA],
               ...parseCodeJson(expression.arguments[0]),
             };
           }
@@ -184,10 +170,7 @@ export const componentFunctionToJson = (
               state[varName]!.typeParameter = generate(init.typeParameters.params[0]).code;
             }
           }
-        }
-        // Solid store format, like:
-        // const state = useStore({...})
-        if (init.callee.name === HOOKS.STORE) {
+        } else if (init.callee.name === HOOKS.STORE) {
           const firstArg = init.arguments[0];
           if (types.isObjectExpression(firstArg)) {
             const useStoreState = parseStateObjectToMitosisState(firstArg);
diff --git a/packages/core/src/parsers/jsx/helpers.ts b/packages/core/src/parsers/jsx/helpers.ts
index c96123a16b..b7dc1fbf11 100644
--- a/packages/core/src/parsers/jsx/helpers.ts
+++ b/packages/core/src/parsers/jsx/helpers.ts
@@ -5,23 +5,6 @@ import { objectHasKey } from '../../helpers/typescript';
 
 const { types } = babel;
 
-export const selfClosingTags = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-]);
-
 export const uncapitalize = (str: string) => {
   if (!str) {
     return str;
diff --git a/packages/core/src/parsers/jsx/hooks.ts b/packages/core/src/parsers/jsx/hooks.ts
deleted file mode 100644
index fbecd042ad..0000000000
--- a/packages/core/src/parsers/jsx/hooks.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as babel from '@babel/core';
-import { HOOKS } from '../../constants/hooks';
-import { MitosisComponent } from '../../types/mitosis-component';
-import { generateUseStyleCode, parseDefaultPropsHook } from './function-parser';
-import { parseCodeJson } from './helpers';
-import { ParseMitosisOptions } from './types';
-
-const { types } = babel;
-
-const getHook = (node: babel.Node) => {
-  const item = node;
-  if (types.isExpressionStatement(item)) {
-    const expression = item.expression;
-    if (types.isCallExpression(expression)) {
-      if (types.isIdentifier(expression.callee)) {
-        return expression;
-      }
-    }
-  }
-  return null;
-};
-
-export const METADATA_HOOK_NAME = 'useMetadata';
-
-/**
- * Transform useMetadata({...}) onto the component JSON as
- * meta: { metadataHook: { ... }}
- *
- * This function collects metadata and removes the statement from
- * the returned nodes array
- */
-export const collectModuleScopeHooks = (
-  nodes: babel.types.Statement[],
-  component: MitosisComponent,
-  options: ParseMitosisOptions,
-) => {
-  return nodes.filter((node) => {
-    const hook = getHook(node);
-    if (!hook) {
-      return true;
-    }
-    if (types.isIdentifier(hook.callee)) {
-      const metadataHooks = new Set((options.jsonHookNames || []).concat(METADATA_HOOK_NAME));
-      if (metadataHooks.has(hook.callee.name)) {
-        try {
-          if (component.meta[hook.callee.name]) {
-            component.meta[hook.callee.name] = {
-              ...(component.meta[hook.callee.name] as Object),
-              ...parseCodeJson(hook.arguments[0]),
-            };
-          } else {
-            component.meta[hook.callee.name] = parseCodeJson(hook.arguments[0]);
-          }
-          return false;
-        } catch (e) {
-          console.error(`Error parsing metadata hook ${hook.callee.name}`);
-          throw e;
-        }
-      } else if (hook.callee.name === HOOKS.STYLE) {
-        component.style = generateUseStyleCode(hook);
-        return false;
-      } else if (hook.callee.name === HOOKS.DEFAULT_PROPS) {
-        parseDefaultPropsHook(component, hook);
-      }
-    }
-
-    return true;
-  });
-};
diff --git a/packages/core/src/parsers/jsx/hooks/helpers.ts b/packages/core/src/parsers/jsx/hooks/helpers.ts
new file mode 100644
index 0000000000..72c53ba565
--- /dev/null
+++ b/packages/core/src/parsers/jsx/hooks/helpers.ts
@@ -0,0 +1,29 @@
+import * as babel from '@babel/core';
+import generate from '@babel/generator';
+
+const { types } = babel;
+
+export const getHook = (node: babel.Node) => {
+  const item = node;
+  if (types.isExpressionStatement(item)) {
+    const expression = item.expression;
+    if (types.isCallExpression(expression)) {
+      if (types.isIdentifier(expression.callee)) {
+        return expression;
+      }
+    }
+  }
+  return null;
+};
+
+export const processHookCode = (
+  firstArg: babel.types.ArrowFunctionExpression | babel.types.FunctionExpression,
+) =>
+  generate(firstArg.body)
+    .code.trim()
+    // Remove arbitrary block wrapping if any
+    // AKA
+    //  { console.log('hi') } -> console.log('hi')
+    .replace(/^{/, '')
+    .replace(/}$/, '')
+    .trim();
diff --git a/packages/core/src/parsers/jsx/hooks/index.ts b/packages/core/src/parsers/jsx/hooks/index.ts
new file mode 100644
index 0000000000..f1c177f956
--- /dev/null
+++ b/packages/core/src/parsers/jsx/hooks/index.ts
@@ -0,0 +1,62 @@
+import * as babel 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 { getHook } from './helpers';
+
+const { types } = babel;
+
+export function parseDefaultPropsHook(
+  component: MitosisComponent,
+  expression: babel.types.CallExpression,
+) {
+  const firstArg = expression.arguments[0];
+  if (types.isObjectExpression(firstArg)) {
+    component.defaultProps = parseStateObjectToMitosisState(firstArg, false);
+  }
+}
+
+export function generateUseStyleCode(expression: babel.types.CallExpression) {
+  return generate(expression.arguments[0]).code.replace(/(^("|'|`)|("|'|`)$)/g, '');
+}
+
+/**
+ * Transform useMetadata({...}) onto the component JSON as
+ * meta: { metadataHook: { ... }}
+ *
+ * This function collects metadata and removes the statement from
+ * the returned nodes array
+ */
+export const collectModuleScopeHooks =
+  (component: MitosisComponent, options: ParseMitosisOptions) => (nodes: babel.types.Statement[]) =>
+    nodes.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)) {
+          try {
+            component.meta[hook.callee.name] = {
+              ...((component.meta[hook.callee.name] as Object) || {}),
+              ...parseCodeJson(hook.arguments[0]),
+            };
+            return false;
+          } catch (e) {
+            console.error(`Error parsing metadata hook ${hook.callee.name}`);
+            throw e;
+          }
+        } else if (hook.callee.name === HOOKS.STYLE) {
+          component.style = generateUseStyleCode(hook);
+          return false;
+        } else if (hook.callee.name === HOOKS.DEFAULT_PROPS) {
+          parseDefaultPropsHook(component, hook);
+        }
+      }
+
+      return true;
+    });
diff --git a/packages/core/src/parsers/jsx/hooks/use-target.ts b/packages/core/src/parsers/jsx/hooks/use-target.ts
new file mode 100644
index 0000000000..42b1130963
--- /dev/null
+++ b/packages/core/src/parsers/jsx/hooks/use-target.ts
@@ -0,0 +1,77 @@
+import * as babel from '@babel/core';
+import generate from '@babel/generator';
+import { HOOKS } from '../../../constants/hooks';
+import { targets } from '../../../targets';
+import { MitosisComponent, TargetBlockCode } from '../../../types/mitosis-component';
+
+const { types } = babel;
+
+export const getTargetId = (component: MitosisComponent) => {
+  const latestId = Object.keys(component.targetBlocks || {}).length;
+  const blockId = (latestId + 1).toString();
+  return blockId;
+};
+
+export const getMagicString = (targetId: string) => [USE_TARGET_MAGIC_STRING, targetId].join('');
+
+export const USE_TARGET_MAGIC_STRING = 'USE_TARGET_BLOCK_';
+// check for uuid.v4() format
+const idRegex = /\d*/;
+
+const REGEX_BLOCK_NAME = 'blockId';
+
+export const USE_TARGET_MAGIC_REGEX = new RegExp(
+  // make sure to capture the id of the target block
+  `"${USE_TARGET_MAGIC_STRING}\(?<${REGEX_BLOCK_NAME}>${idRegex.source}\)"`,
+  'g',
+);
+
+export const getIdFromMatch = (match: string) => {
+  const USE_TARGET_MAGIC_REGEX_WITHOUT_G = new RegExp(
+    `"${USE_TARGET_MAGIC_STRING}\(?<${REGEX_BLOCK_NAME}>${idRegex.source}\)"`,
+  );
+  const result = match.match(USE_TARGET_MAGIC_REGEX_WITHOUT_G);
+  if (!result) return undefined;
+  return result.groups?.[REGEX_BLOCK_NAME];
+};
+
+/**
+ * This function finds `useTarget()` and converts it our JSON representation
+ */
+export const getUseTargetStatements = (
+  useTargetHook: babel.types.CallExpression,
+): TargetBlockCode | undefined => {
+  if (!types.isIdentifier(useTargetHook.callee)) return undefined;
+  if (useTargetHook.callee.name !== HOOKS.TARGET) return undefined;
+
+  const obj = useTargetHook.arguments[0];
+
+  if (!types.isObjectExpression(obj)) return undefined;
+
+  const targetBlock: TargetBlockCode = {};
+
+  obj.properties.forEach((prop) => {
+    if (!types.isObjectProperty(prop)) {
+      throw new Error('useTarget properties cannot be spread or references');
+    }
+    if (!types.isIdentifier(prop.key)) {
+      throw new Error('Expected an identifier, instead got: ' + prop.key);
+    }
+
+    if (!Object.keys(targets).concat('default').includes(prop.key.name)) {
+      throw new Error('Invalid target: ' + prop.key.name);
+    }
+
+    const targetCode = prop.value;
+    if (!types.isExpression(targetCode)) return undefined;
+
+    targetBlock[prop.key.name as unknown as 'default'] = {
+      code: generate(targetCode).code,
+    };
+
+    // TO-DO: replace the useTarget() call with a magic string
+    // this will be replaced with the actual target code later
+  });
+
+  return Object.keys(targetBlock).length ? targetBlock : undefined;
+};
diff --git a/packages/core/src/parsers/jsx/index.ts b/packages/core/src/parsers/jsx/index.ts
index e1138b6e60..7d86665bdb 100644
--- a/packages/core/src/parsers/jsx/index.ts
+++ b/packages/core/src/parsers/jsx/index.ts
@@ -1,3 +1 @@
-export { selfClosingTags } from './helpers';
-export { METADATA_HOOK_NAME } from './hooks';
 export { parseJsx } from './jsx';
diff --git a/packages/core/src/parsers/jsx/jsx.ts b/packages/core/src/parsers/jsx/jsx.ts
index 4f36b2da64..648e1bb6fb 100644
--- a/packages/core/src/parsers/jsx/jsx.ts
+++ b/packages/core/src/parsers/jsx/jsx.ts
@@ -20,6 +20,8 @@ import { Context, ParseMitosisOptions } from './types';
 
 import tsPlugin from '@babel/plugin-syntax-typescript';
 import tsPreset from '@babel/preset-typescript';
+import { HOOKS } from '../../constants/hooks';
+import { getMagicString, getTargetId, getUseTargetStatements } from './hooks/use-target';
 
 const { types } = babel;
 
@@ -99,8 +101,7 @@ export function parseJsx(
 
             const preComponentCode = pipe(
               path.node.body.filter((statement) => !isImportOrDefaultExport(statement)),
-              (statements) =>
-                collectModuleScopeHooks(statements, context.builder.component, options),
+              collectModuleScopeHooks(context.builder.component, options),
               types.program,
               generate,
               (generatorResult) => generatorResult.code,
@@ -116,6 +117,33 @@ export function parseJsx(
             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.isVariableDeclarator(path.parent)) return;
+                    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.node);
+
+                    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)));
               }
             }
@@ -150,7 +178,7 @@ export function parseJsx(
     ],
   });
 
-  const toParse = stripNewlinesInStrings(
+  const stringifiedMitosisComponent = stripNewlinesInStrings(
     output!
       .code!.trim()
       // Occasional issues where comments get kicked to the top. Full fix should strip these sooner
@@ -161,12 +189,13 @@ export function parseJsx(
       .replace(/^\({/, '{')
       .replace(/}\);$/, '}'),
   );
-  const parsed = tryParseJson(toParse);
 
-  mapStateIdentifiers(parsed);
-  extractContextComponents(parsed);
+  const mitosisComponent = tryParseJson(stringifiedMitosisComponent);
 
-  parsed.subComponents = subComponentFunctions.map((item) => parseJsx(item, options));
+  mapStateIdentifiers(mitosisComponent);
+  extractContextComponents(mitosisComponent);
 
-  return parsed;
+  mitosisComponent.subComponents = subComponentFunctions.map((item) => parseJsx(item, options));
+
+  return mitosisComponent;
 }
diff --git a/packages/core/src/targets.ts b/packages/core/src/targets.ts
index 9c79242f6f..5f7764c661 100644
--- a/packages/core/src/targets.ts
+++ b/packages/core/src/targets.ts
@@ -49,3 +49,5 @@ export const targets = {
   rsc,
   taro,
 } as const;
+
+export type Targets = keyof typeof targets;
diff --git a/packages/core/src/types/mitosis-component.ts b/packages/core/src/types/mitosis-component.ts
index f08141ec58..d2ac235dbf 100644
--- a/packages/core/src/types/mitosis-component.ts
+++ b/packages/core/src/types/mitosis-component.ts
@@ -1,4 +1,5 @@
 import { Dictionary } from '../helpers/typescript';
+import { Target } from './config';
 import { JSONObject } from './json';
 import { MitosisNode } from './mitosis-node';
 
@@ -68,6 +69,14 @@ export type StateValue = {
 
 export type MitosisState = Dictionary<StateValue | undefined>;
 
+export type TargetBlock<Return, Targets extends Target = Target> = Partial<{
+  [T in Targets | 'default']?: Return;
+}>;
+
+export type TargetBlockCode = TargetBlock<{
+  code: string;
+}>;
+
 export type MitosisComponent = {
   '@type': '@builder.io/mitosis/component';
   name: string;
@@ -97,6 +106,7 @@ export type MitosisComponent = {
     postComponent?: extendedHook;
     onUpdate?: extendedHook[];
   };
+  targetBlocks?: Dictionary<TargetBlockCode>;
   children: MitosisNode[];
   subComponents: MitosisComponent[];
   types?: string[];
diff --git a/yarn.lock b/yarn.lock
index 29c8fbcd3f..45abb16cf4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19431,30 +19431,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.4":
-  version: 2.8.4
-  resolution: "prettier@npm:2.8.4"
+"prettier@npm:^2.8.7":
+  version: 2.8.8
+  resolution: "prettier@npm:2.8.8"
   bin:
     prettier: bin-prettier.js
-  checksum: c173064bf3df57b6d93d19aa98753b9b9dd7657212e33b41ada8e2e9f9884066bb9ca0b4005b89b3ab137efffdf8fbe0b462785aba20364798ff4303aadda57e
-  languageName: node
-  linkType: hard
-
-"prettier@npm:>=2.0.0 <3.0.0":
-  version: 2.8.7
-  resolution: "prettier@npm:2.8.7"
-  bin:
-    prettier: bin-prettier.js
-  checksum: fdc8f2616f099f5f0d685907f4449a70595a0fc1d081a88919604375989e0d5e9168d6121d8cc6861f21990b31665828e00472544d785d5940ea08a17660c3a6
-  languageName: node
-  linkType: hard
-
-"prettier@npm:^2.3.2, prettier@npm:^2.5.0, prettier@npm:^2.6.1, prettier@npm:^2.7.1":
-  version: 2.7.1
-  resolution: "prettier@npm:2.7.1"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 55a4409182260866ab31284d929b3cb961e5fdb91fe0d2e099dac92eaecec890f36e524b4c19e6ceae839c99c6d7195817579cdffc8e2c80da0cb794463a748b
+  checksum: b49e409431bf129dd89238d64299ba80717b57ff5a6d1c1a8b1a28b590d998a34e083fa13573bc732bb8d2305becb4c9a4407f8486c81fa7d55100eb08263cf8
   languageName: node
   linkType: hard