From 194360408adf8dfeb3410304ef5ada088a0d4b51 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:19:31 -0400
Subject: [PATCH] fix: state parser supports string literal keys (#1535)

* fix: string literal can be parsed as state key

* prettierignore

* update snapshots

* update changelog

* add test to note other bug

* fix template

* trigger rebuild

* add support for failing tests

* fix test

* get ci to run again
---
 .changeset/eleven-lies-hope.md                |   5 +
 .../__snapshots__/alpine.test.ts.snap         |  42 +++
 .../__snapshots__/angular.import.test.ts.snap | 186 ++++++++++
 .../__snapshots__/angular.mapper.test.ts.snap | 188 ++++++++++
 .../__snapshots__/angular.state.test.ts.snap  | 186 ++++++++++
 .../__snapshots__/angular.styles.test.ts.snap | 172 +++++++++
 .../__snapshots__/angular.test.ts.snap        | 336 ++++++++++++++++++
 .../__tests__/__snapshots__/html.test.ts.snap | 260 ++++++++++++++
 .../__snapshots__/liquid.test.ts.snap         |  20 ++
 .../__tests__/__snapshots__/lit.test.ts.snap  |  50 +++
 .../__snapshots__/marko.test.ts.snap          |  44 +++
 .../__snapshots__/parse-jsx.test.ts.snap      | 216 +++++++++++
 .../__snapshots__/preact.test.ts.snap         |  52 +++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  66 ++++
 .../__snapshots__/react-native.test.ts.snap   |  84 +++++
 .../__snapshots__/react.test.ts.snap          |  52 +++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  52 +++
 .../__snapshots__/solid.test.ts.snap          | 112 ++++++
 .../__snapshots__/stencil.test.ts.snap        |  36 ++
 .../__snapshots__/svelte.test.ts.snap         |  32 ++
 .../__tests__/__snapshots__/taro.test.ts.snap |  54 +++
 .../vue-composition.test.ts.snap              |  64 ++++
 .../__tests__/__snapshots__/vue.test.ts.snap  | 122 +++++++
 .../__snapshots__/webcomponent.test.ts.snap   | 196 ++++++++++
 .../data/string-literal-store-kebab.raw.tsx   |   8 +
 .../data/string-literal-store.raw.tsx         |   8 +
 packages/core/src/__tests__/test-generator.ts |  63 +++-
 packages/core/src/parsers/jsx/state.ts        |   9 +-
 28 files changed, 2704 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/eleven-lies-hope.md
 create mode 100644 packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx
 create mode 100644 packages/core/src/__tests__/data/string-literal-store.raw.tsx

diff --git a/.changeset/eleven-lies-hope.md b/.changeset/eleven-lies-hope.md
new file mode 100644
index 0000000000..2ecec62b8f
--- /dev/null
+++ b/.changeset/eleven-lies-hope.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+state parser supports string literal keys
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 58e415f0c7..7c346b43e4 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2536,6 +2536,27 @@ exports[`Alpine.js > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > string-literal-store 1`] = `
+"<div x-data=\\"stringLiteralStore()\\"><span x-html=\\"foo\\"></span></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"stringLiteralStore\\", () => ({
+      foo: 123,
+    }));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"unknown: Unexpected token, expected \\",\\" (2:60)
+
+  1 | document.addEventListener('alpine:init', () => {
+> 2 |               Alpine.data('stringLiteralStore', () => ({ foo-bar: 123,}))
+    |                                                             ^
+  3 |           })"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<style>
   .div {
@@ -5271,6 +5292,27 @@ exports[`Alpine.js > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > string-literal-store 1`] = `
+"<div x-data=\\"stringLiteralStore()\\"><span x-html=\\"foo\\"></span></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"stringLiteralStore\\", () => ({
+      foo: 123,
+    }));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"unknown: Unexpected token, expected \\",\\" (2:60)
+
+  1 | document.addEventListener('alpine:init', () => {
+> 2 |               Alpine.data('stringLiteralStore', () => ({ foo-bar: 123,}))
+    |                                                             ^
+  3 |           })"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<style>
   .div {
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 7535542a35..06fb6766e8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5017,6 +5017,99 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10997,6 +11090,99 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > styleClassAndCss 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 c479210914..5d7f41c36f 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5114,6 +5114,100 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent]
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11206,6 +11300,100 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent]
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 756a3b1e07..091d060290 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5242,6 +5242,99 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11522,6 +11615,99 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index a07a703d34..a81acb8b4a 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -4394,6 +4394,92 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9677,6 +9763,92 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > styleClassAndCss 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 2481eeb224..b00096d38c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -9338,6 +9338,174 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > string-literal-store 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
+exports[`Angular > jsx > Javascript Test > string-literal-store-kebab 2`] = `
+"import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}"
+`;
+
 exports[`Angular > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -20508,6 +20676,174 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > string-literal-store 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > string-literal-store 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"string-literal-store, StringLiteralStore\\",
+  template: \`
+    <div>{{foo}}</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class StringLiteralStore {
+  foo = 123;
+}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  
+})
+export class StringLiteralStoreModule {}"
+`;
+
+exports[`Angular > jsx > Typescript Test > string-literal-store-kebab 2`] = `
+"import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+
+
+
+
+
+
+@Component({
+  selector: 'string-literal-store, StringLiteralStore',template: \`
+
+        <div>{{'foo-bar'}}</div>
+
+        \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
+})
+export default class StringLiteralStore {
+
+
+
+
+
+
+
+
+
+
+
+
+
+   foo-bar= 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+}"
+`;
+
 exports[`Angular > jsx > Typescript Test > styleClassAndCss 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 55ddada279..4c47ee787a 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -6282,6 +6282,136 @@ exports[`Html > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > string-literal-store 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state.foo --></template>
+</div>
+<script>
+  (() => {
+    const state = { foo: 123 };
+
+    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.foo);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
+exports[`Html > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state['foo-bar'] --></template>
+</div>
+<script>
+  (() => {
+    const state = { foo-bar: 123,};
+
+    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['foo-bar']);
+          });
+
+
+      destroyAnyNodes();
+
+
+
+      pendingUpdate = false;
+    }
+
+
+
+    // Update with initial state on first load
+    update();
+
+
+
+
+
+
+
+
+      // Helper text DOM nodes
+      function renderTextNode(el, text) {
+        const textNode = document.createTextNode(text);
+        if (el?.scope) {
+          textNode.scope = el.scope
+        }
+        if (el?.context) {
+          child.context = el.context;
+        }
+        el.after(textNode);
+        nodesToDestroy.push(el.nextSibling);
+      }
+
+
+  })()
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<div class=\\"builder-column div\\" data-el=\\"div-1\\"></div>
 <style>
@@ -12967,6 +13097,136 @@ exports[`Html > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > string-literal-store 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state.foo --></template>
+</div>
+<script>
+  (() => {
+    const state = { foo: 123 };
+
+    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.foo);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
+exports[`Html > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"<div>
+  <template data-el=\\"div-1\\"><!-- state['foo-bar'] --></template>
+</div>
+<script>
+  (() => {
+    const state = { foo-bar: 123,};
+
+    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['foo-bar']);
+          });
+
+
+      destroyAnyNodes();
+
+
+
+      pendingUpdate = false;
+    }
+
+
+
+    // Update with initial state on first load
+    update();
+
+
+
+
+
+
+
+
+      // Helper text DOM nodes
+      function renderTextNode(el, text) {
+        const textNode = document.createTextNode(text);
+        if (el?.scope) {
+          textNode.scope = el.scope
+        }
+        if (el?.context) {
+          child.context = el.context;
+        }
+        el.after(textNode);
+        nodesToDestroy.push(el.nextSibling);
+      }
+
+
+  })()
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<div class=\\"builder-column div\\" data-el=\\"div-1\\"></div>
 <style>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index cce2f475bf..57798b6ee1 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -772,6 +772,16 @@ exports[`Liquid > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > string-literal-store 1`] = `
+"<div>{{foo}}</div>
+"
+`;
+
+exports[`Liquid > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<div class=\\"builder-column div\\"></div>
 <style>
@@ -1659,6 +1669,16 @@ exports[`Liquid > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > string-literal-store 1`] = `
+"<div>{{foo}}</div>
+"
+`;
+
+exports[`Liquid > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<div class=\\"builder-column div\\"></div>
 <style>
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 93f9b5b6a2..d3f0752c10 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -3847,6 +3847,31 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > string-literal-store 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"string-literal-store\\")
+export default class StringLiteralStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() foo = 123;
+
+  render() {
+    return html\`
+
+          <div>\${this.foo}</div>
+
+        \`;
+  }
+}
+"
+`;
+
+exports[`Lit > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`Lit > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -8402,6 +8427,31 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > string-literal-store 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"string-literal-store\\")
+export default class StringLiteralStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() foo = 123;
+
+  render() {
+    return html\`
+
+          <div>\${this.foo}</div>
+
+        \`;
+  }
+}
+"
+`;
+
+exports[`Lit > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`Lit > jsx > Typescript Test > styleClassAndCss 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 f7ddfb60b7..e876eccb22 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2315,6 +2315,28 @@ exports[`Marko > jsx > Javascript Test > spreadProps 1`] = `
 <input ...(props) />"
 `;
 
+exports[`Marko > jsx > Javascript Test > string-literal-store 1`] = `
+"class {
+  onCreate() {
+    this.state = { foo: 123 };
+  }
+}
+
+<div>\${state.foo}</div>"
+`;
+
+exports[`Marko > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"class {
+
+    onCreate() {
+      this.state = { foo-bar: 123,}
+    }
+
+}
+
+<div>\${component.'foo-bar'}</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > styleClassAndCss 1`] = `
 "class {}
 
@@ -4752,6 +4774,28 @@ exports[`Marko > jsx > Typescript Test > spreadProps 1`] = `
 <input ...(props) />"
 `;
 
+exports[`Marko > jsx > Typescript Test > string-literal-store 1`] = `
+"class {
+  onCreate() {
+    this.state = { foo: 123 };
+  }
+}
+
+<div>\${state.foo}</div>"
+`;
+
+exports[`Marko > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"class {
+
+    onCreate() {
+      this.state = { foo-bar: 123,}
+    }
+
+}
+
+<div>\${component.'foo-bar'}</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > styleClassAndCss 1`] = `
 "class {}
 
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 2c68a8e344..e2a84cb16b 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -9906,6 +9906,114 @@ exports[`Parse JSX > Javascript > spreadProps 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > string-literal-store 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state.foo",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "foo": {
+      "code": "123",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > Javascript > string-literal-store-kebab 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state['foo-bar']",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "foo-bar": {
+      "code": "123",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > styleClassAndCss 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -21229,6 +21337,114 @@ exports[`Parse JSX > Typescript > spreadProps 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > string-literal-store 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state.foo",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "foo": {
+      "code": "123",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > Typescript > string-literal-store-kebab 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "code": "state['foo-bar']",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "foo-bar": {
+      "code": "123",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > styleClassAndCss 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 19b0bd78a8..24fbc83739 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3137,6 +3137,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > string-literal-store 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Preact > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (16:13)
+  14 |
+  15 |   function StringLiteralStore(props) {
+> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  17 |
+  18 |
+  19 |"
+`;
+
 exports[`Preact > jsx > Javascript Test > styleClassAndCss 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6937,6 +6963,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > string-literal-store 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Preact > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (16:13)
+  14 |
+  15 |   function StringLiteralStore(props:any) {
+> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  17 |
+  18 |
+  19 |"
+`;
+
 exports[`Preact > jsx > Typescript Test > styleClassAndCss 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 7c04ce49b7..0db8209c81 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4771,6 +4771,39 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > string-literal-store 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+export const StringLiteralStore = component$((props) => {
+  const state = useStore({ foo: 123 });
+
+  return <div>{state.foo}</div>;
+});
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`qwik > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"SyntaxError: ',' expected. (5:20)
+  3 | export const StringLiteralStore=component$((props)=>{const state=useStore({\\"foo-bar\\":123});
+  4 |
+> 5 | return (<div>{state.'foo-bar'}</div>)});
+    |                    ^
+  6 |
+  7 | export default StringLiteralStore;
+========================================================================
+import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
+
+export const StringLiteralStore=component$((props)=>{const state=useStore({\\"foo-bar\\":123});
+
+return (<div>{state.'foo-bar'}</div>)});
+
+export default StringLiteralStore;
+
+========================================================================"
+`;
+
 exports[`qwik > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
@@ -8433,6 +8466,39 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > string-literal-store 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+export const StringLiteralStore = component$((props: any) => {
+  const state = useStore<any>({ foo: 123 });
+
+  return <div>{state.foo}</div>;
+});
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`qwik > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"SyntaxError: ',' expected. (5:20)
+  3 | export const StringLiteralStore=component$((props:any)=>{const state=useStore<any>({\\"foo-bar\\":123});
+  4 |
+> 5 | return (<div>{state.'foo-bar'}</div>)});
+    |                    ^
+  6 |
+  7 | export default StringLiteralStore;
+========================================================================
+import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
+
+export const StringLiteralStore=component$((props:any)=>{const state=useStore<any>({\\"foo-bar\\":123});
+
+return (<div>{state.'foo-bar'}</div>)});
+
+export default StringLiteralStore;
+
+========================================================================"
+`;
+
 exports[`qwik > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index fd27d0ea12..6b2ad76f59 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4333,6 +4333,48 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > string-literal-store 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return (
+    <View>
+      <Text>{foo}</Text>
+    </View>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React Native > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (16:13)
+  14 |
+  15 |   function StringLiteralStore(props) {
+> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  17 |
+  18 |
+  19 |"
+`;
+
 exports[`React Native > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -9443,6 +9485,48 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > string-literal-store 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return (
+    <View>
+      <Text>{foo}</Text>
+    </View>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React Native > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (16:13)
+  14 |
+  15 |   function StringLiteralStore(props:any) {
+> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  17 |
+  18 |
+  19 |"
+`;
+
 exports[`React Native > jsx > Typescript Test > styleClassAndCss 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 eb4425e778..715160aa3b 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3047,6 +3047,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:13)
+  13 |
+  14 |   function StringLiteralStore(props) {
+> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`React > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
@@ -6751,6 +6777,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:13)
+  13 |
+  14 |   function StringLiteralStore(props:any) {
+> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`React > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index da7a22d5cd..27b9a47dc8 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2792,6 +2792,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`RSC > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:13)
+  13 |
+  14 |   function StringLiteralStore(props) {
+> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`RSC > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
@@ -6225,6 +6251,32 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <div>{foo}</div>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`RSC > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:13)
+  13 |
+  14 |   function StringLiteralStore(props:any) {
+> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`RSC > jsx > Typescript Test > styleClassAndCss 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 4403685e3f..a4462e2e95 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6350,6 +6350,62 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > string-literal-store 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = createSignal(123);
+
+  return (
+    <>
+      <div>{foo()}</div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > string-literal-store 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = createSignal(123);
+
+  return (
+    <>
+      <div>{foo()}</div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:11)
+  13 |
+  14 |
+> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
+     |           ^
+  16 |
+  17 |
+  18 |"
+`;
+
+exports[`Solid > jsx > Javascript Test > string-literal-store-kebab 2`] = `
+"',' expected. (15:11)
+  13 |
+  14 |
+> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
+     |           ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`Solid > jsx > Javascript Test > styleClassAndCss 1`] = `
 "function MyComponent(props) {
   return (
@@ -14000,6 +14056,62 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > string-literal-store 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = createSignal(123);
+
+  return (
+    <>
+      <div>{foo()}</div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > string-literal-store 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = createSignal(123);
+
+  return (
+    <>
+      <div>{foo()}</div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (15:11)
+  13 |
+  14 |
+> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
+     |           ^
+  16 |
+  17 |
+  18 |"
+`;
+
+exports[`Solid > jsx > Typescript Test > string-literal-store-kebab 2`] = `
+"',' expected. (15:11)
+  13 |
+  14 |
+> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
+     |           ^
+  16 |
+  17 |
+  18 |"
+`;
+
 exports[`Solid > jsx > Typescript Test > styleClassAndCss 1`] = `
 "function MyComponent(props: any) {
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index e057a517d8..066497ad5f 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -2795,6 +2795,24 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > string-literal-store 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"string-literal-store\\",
+})
+export default class StringLiteralStore {
+  @State() foo = 123;
+
+  render() {
+    return <div>{this.foo}</div>;
+  }
+}
+"
+`;
+
+exports[`Stencil > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`Stencil > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -5866,6 +5884,24 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > string-literal-store 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"string-literal-store\\",
+})
+export default class StringLiteralStore {
+  @State() foo = 123;
+
+  render() {
+    return <div>{this.foo}</div>;
+  }
+}
+"
+`;
+
+exports[`Stencil > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`Stencil > jsx > Typescript Test > styleClassAndCss 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 82df72b589..eefbcbc2cb 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2622,6 +2622,22 @@ exports[`Svelte > jsx > Javascript Test > spreadNestedProps 1`] = `
 
 exports[`Svelte > jsx > Javascript Test > spreadProps 1`] = `"<input {...$$props} />"`;
 
+exports[`Svelte > jsx > Javascript Test > string-literal-store 1`] = `
+"<script>
+  let foo = 123;
+</script>
+
+<div>{foo}</div>"
+`;
+
+exports[`Svelte > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"unknown: Missing semicolon. (1:8)
+
+> 1 | let  foo-bar= 123
+    |         ^
+  2 |"
+`;
+
 exports[`Svelte > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<script>
   function stringifyStyles(stylesObj) {
@@ -6011,6 +6027,22 @@ exports[`Svelte > jsx > Typescript Test > spreadProps 1`] = `
 <input {...$$props} />"
 `;
 
+exports[`Svelte > jsx > Typescript Test > string-literal-store 1`] = `
+"<script lang=\\"ts\\">
+  let foo = 123;
+</script>
+
+<div>{foo}</div>"
+`;
+
+exports[`Svelte > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"unknown: Missing semicolon. (1:8)
+
+> 1 | let  foo-bar= 123
+    |         ^
+  2 |"
+`;
+
 exports[`Svelte > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<script lang=\\"ts\\">
   function stringifyStyles(stylesObj) {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 7438f60581..89254f8fed 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3101,6 +3101,33 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function StringLiteralStore(props) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <View>{foo}</View>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Taro > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"',' expected. (17:13)
+  15 |
+  16 |   function StringLiteralStore(props) {
+> 17 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  18 |
+  19 |
+  20 |"
+`;
+
 exports[`Taro > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -6895,6 +6922,33 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function StringLiteralStore(props: any) {
+  const [foo, setFoo] = useState(() => 123);
+
+  return <View>{foo}</View>;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Taro > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"',' expected. (17:13)
+  15 |
+  16 |   function StringLiteralStore(props:any) {
+> 17 |   const [foo-bar, setFoo-bar] = useState(() => (123))
+     |             ^
+  18 |
+  19 |
+  20 |"
+`;
+
 exports[`Taro > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import { View } from \\"@tarojs/components\\";
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 a89779fdc3..e1a30d8579 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2794,6 +2794,38 @@ exports[`Vue > jsx > Javascript Test > spreadProps 1`] = `
 </template>"
 `;
 
+exports[`Vue > jsx > Javascript Test > string-literal-store 1`] = `
+"<template>
+  <div>{{ foo }}</div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const foo = ref(123);
+</script>"
+`;
+
+exports[`Vue > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"<template>
+  <div>{{ \\"foo-bar\\" }}</div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\"
+
+
+
+
+
+
+
+
+
+const foo-bar= ref(123)
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<template>
   <div
@@ -6131,6 +6163,38 @@ exports[`Vue > jsx > Typescript Test > spreadProps 1`] = `
 </template>"
 `;
 
+exports[`Vue > jsx > Typescript Test > string-literal-store 1`] = `
+"<template>
+  <div>{{ foo }}</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+const foo = ref(123);
+</script>"
+`;
+
+exports[`Vue > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"<template>
+  <div>{{ \\"foo-bar\\" }}</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\"
+
+
+
+
+
+
+
+
+
+const foo-bar= ref(123)
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > styleClassAndCss 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 18bcdf906c..4857f92cb7 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -3473,6 +3473,67 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > string-literal-store 1`] = `
+"<template>
+  <div>{{ foo }}</div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"string-literal-store\\",
+
+  data() {
+    return { foo: 123 };
+  },
+});
+</script>"
+`;
+
+exports[`Vue > jsx > Javascript Test > string-literal-store-kebab 1`] = `
+"<template>
+  <div>{{ \\"foo-bar\\" }}</div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\"
+
+
+
+
+
+
+
+
+
+
+  export default defineComponent( {
+  name: 'string-literal-store',
+
+
+
+  data() {
+    return { foo-bar: 123,}
+  },
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+  )
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<template>
   <div
@@ -7622,6 +7683,67 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > string-literal-store 1`] = `
+"<template>
+  <div>{{ foo }}</div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"string-literal-store\\",
+
+  data() {
+    return { foo: 123 };
+  },
+});
+</script>"
+`;
+
+exports[`Vue > jsx > Typescript Test > string-literal-store-kebab 1`] = `
+"<template>
+  <div>{{ \\"foo-bar\\" }}</div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\"
+
+
+
+
+
+
+
+
+
+
+  export default defineComponent( {
+  name: 'string-literal-store',
+
+
+
+  data() {
+    return { foo-bar: 123,}
+  },
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+  )
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > styleClassAndCss 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 d3b54d5c5d..0d9a49d675 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -13815,6 +13815,104 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > string-literal-store 1`] = `
+"/**
+ * Usage:
+ *
+ *  <string-literal-store></string-literal-store>
+ *
+ */
+class StringLiteralStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { foo: 123 };
+    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-string-literal-store-1\\"><!-- state.foo --></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-string-literal-store-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.state.foo);
+      });
+  }
+
+  // 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(\\"string-literal-store\\", StringLiteralStore);
+"
+`;
+
+exports[`webcomponent > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`webcomponent > jsx > Javascript Test > styleClassAndCss 1`] = `
 "/**
  * Usage:
@@ -28764,6 +28862,104 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > string-literal-store 1`] = `
+"/**
+ * Usage:
+ *
+ *  <string-literal-store></string-literal-store>
+ *
+ */
+class StringLiteralStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { foo: 123 };
+    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-string-literal-store-1\\"><!-- state.foo --></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-string-literal-store-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.state.foo);
+      });
+  }
+
+  // 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(\\"string-literal-store\\", StringLiteralStore);
+"
+`;
+
+exports[`webcomponent > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
+
 exports[`webcomponent > jsx > Typescript Test > styleClassAndCss 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx b/packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx
new file mode 100644
index 0000000000..3f4c487e41
--- /dev/null
+++ b/packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx
@@ -0,0 +1,8 @@
+import { useStore } from '@builder.io/mitosis';
+
+// TODO PLAN-207
+export default function StringLiteralStore() {
+  const state = useStore({ 'foo-bar': 123 });
+
+  return <div>{state['foo-bar']}</div>;
+}
diff --git a/packages/core/src/__tests__/data/string-literal-store.raw.tsx b/packages/core/src/__tests__/data/string-literal-store.raw.tsx
new file mode 100644
index 0000000000..5cb478c3fa
--- /dev/null
+++ b/packages/core/src/__tests__/data/string-literal-store.raw.tsx
@@ -0,0 +1,8 @@
+import { useStore } from '@builder.io/mitosis';
+
+export default function StringLiteralStore() {
+  /* prettier-ignore */
+  const state = useStore({ "foo": 123 });
+
+  return <div>{state.foo}</div>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index bbd6822b84..19d7c7b888 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -122,7 +122,19 @@ const renderContentExample = getRawFile('./data/render-content.raw.tsx');
 const onClickToPressable = getRawFile('./data/react-native/onclick-to-pressable.raw.tsx');
 const inputToTextInputRN = getRawFile('./data/react-native/text-input.raw.tsx');
 
-type Tests = { [index: string]: RawFile };
+const StringLiteralStore = getRawFile('./data/string-literal-store.raw.tsx');
+const StringLiteralStoreKebab = getRawFile('./data/string-literal-store-kebab.raw.tsx');
+
+/**
+ * Use TestsWithFailFor when you want to write a test that you know will fail
+ * on certain targets. This is useful in test driven development when you want
+ * to capture a test before support for a specific target has been implemented.
+ */
+type TestWithFailFor = { file: RawFile; failFor: Target[] };
+type Tests = { [index: string]: RawFile | TestWithFailFor };
+const isTestWithFailFor = (test: RawFile | TestWithFailFor): test is TestWithFailFor => {
+  return 'failFor' in test;
+};
 
 const SVELTE_SYNTAX_TESTS: Tests = {
   basic: getRawFile('./syntax/svelte/basic.raw.svelte'),
@@ -225,6 +237,28 @@ const BASIC_TESTS: Tests = {
   useTarget,
   signalsOnUpdate,
   getterState,
+  'string-literal-store': StringLiteralStore,
+  'string-literal-store-kebab': {
+    file: StringLiteralStoreKebab,
+    failFor: [
+      'alpine',
+      'customElement',
+      'mitosis',
+      'react',
+      'reactNative',
+      'solid',
+      'svelte',
+      'swift',
+      'template',
+      'webcomponent',
+      'stencil',
+      'qwik',
+      'preact',
+      'lit',
+      'rsc',
+      'taro',
+    ],
+  },
 };
 
 const SLOTS_TESTS: Tests = {
@@ -519,7 +553,9 @@ export const runTestsForJsx = () => {
       JSX_TESTS.forEach((tests) => {
         Object.keys(tests).forEach((key) => {
           test(key, async () => {
-            const component = parseJsx((await tests[key]).code, config);
+            const singleTest = tests[key];
+            const t = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
+            const component = parseJsx((await t).code, config);
             expect(component).toMatchSnapshot();
           });
         });
@@ -530,7 +566,9 @@ export const runTestsForJsx = () => {
 export const runTestsForSvelteSyntax = () => {
   Object.keys(SVELTE_SYNTAX_TESTS).forEach((key) => {
     test(key, async () => {
-      const component = await parseSvelte((await SVELTE_SYNTAX_TESTS[key]).code);
+      const singleTest = SVELTE_SYNTAX_TESTS[key];
+      const t = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
+      const component = await parseSvelte((await t).code);
       expect(component).toMatchSnapshot();
     });
   });
@@ -599,14 +637,23 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
           describe(testName, () => {
             testsArray.forEach((tests) => {
               Object.keys(tests).forEach((key) => {
+                const singleTest = tests[key];
+                const shouldFail =
+                  isTestWithFailFor(singleTest) && singleTest.failFor.includes(target);
                 test(key, async () => {
-                  const t = await tests[key];
+                  const t = isTestWithFailFor(singleTest)
+                    ? await singleTest.file
+                    : await singleTest;
                   const component = await parser(t);
                   const getOutput = () => generator(options)({ component, path: t.filePath });
-                  try {
-                    expect(getOutput()).toMatchSnapshot();
-                  } catch (error) {
-                    expect(getOutput).toThrowErrorMatchingSnapshot();
+                  if (shouldFail) {
+                    expect(getOutput).toThrowError();
+                  } else {
+                    try {
+                      expect(getOutput()).toMatchSnapshot();
+                    } catch (error) {
+                      expect(getOutput).toThrowErrorMatchingSnapshot();
+                    }
                   }
                 });
               });
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index 38479bbcc8..3ce21d1f5b 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -24,6 +24,7 @@ import {
   isOptionalMemberExpression,
   isPrivateName,
   isSpreadElement,
+  isStringLiteral,
   isTSAsExpression,
   isTSInterfaceBody,
   isTSType,
@@ -251,13 +252,15 @@ export const parseStateObjectToMitosisState = (
       throw new Error('Parse Error: Mitosis cannot consume private name in state object: ' + x.key);
     }
 
-    if (!isIdentifier(x.key)) {
+    if (!isIdentifier(x.key) && !isStringLiteral(x.key)) {
       throw new Error(
-        'Parse Error: Mitosis cannot consume non-identifier key in state object: ' + x.key,
+        'Parse Error: Mitosis cannot consume non-identifier and non-string key in state object: ' +
+          x.key,
       );
     }
 
-    state[x.key.name] = isState ? processStateObjectSlice(x) : processDefaultPropsSlice(x);
+    const keyName = isStringLiteral(x.key) ? x.key.value : x.key.name;
+    state[keyName] = isState ? processStateObjectSlice(x) : processDefaultPropsSlice(x);
   });
 
   return state;