Repository: tscircuit/tscircuit.com
Pull request #1007: simplified fsMap that would be passed to runframe
Author: login: ShiboSoftwareDev
Labels: name: 💎 Bounty
name: $10
Created: 2025-05-02T14:25:12Z | Merged: 2025-05-04T15:03:45Z



Diff:
diff --git a/src/components/CodeAndPreview.tsx b/src/components/CodeAndPreview.tsx
index cdf0d87f6..9f4f53f6c 100644
--- a/src/components/CodeAndPreview.tsx
+++ b/src/components/CodeAndPreview.tsx
@@ -188,34 +188,9 @@ export function CodeAndPreview({ snippet }: Props) {
   useWarnUserOnPageChange({ hasUnsavedChanges })
 
   const fsMap = useMemo(() => {
-    const possibleExportNames = [
-      ...(code.match(/export function (\w+)/)?.slice(1) ?? []),
-      ...(code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
-    ]
-
-    const exportName = possibleExportNames[0]
-
-    let entrypointContent: string
-    if (snippetType === "board") {
-      entrypointContent = `
-        import ${exportName ? `{ ${exportName} as Package }` : "Package"} from "./index.tsx"
-        circuit.add(<Package />)
-      `.trim()
-    } else {
-      const hasBoard =
-        /<\s*board\s*\/\s*>|<\s*board\s*[^>]*>[\s\S]*?<\/\s*board\s*>/.test(
-          code,
-        )
-      entrypointContent = `
-        import ${exportName ? `{ ${exportName} as Package }` : "Package"} from "./index.tsx"
-        circuit.add(${hasBoard ? '<Package name="U1" />' : `<board>\n  <Package name="U1" />\n</board>`})
-      `.trim()
-    }
-
     return {
       "index.tsx": code,
-      "manual-edits.json": manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent,
+      "manual-edits.json": manualEditsFileContent || "",
     }
   }, [code, manualEditsFileContent])
 
@@ -293,7 +268,6 @@ export function CodeAndPreview({ snippet }: Props) {
                 )
               }}
               fsMap={fsMap}
-              entrypoint="main.tsx"
             />
           </div>
         )}
diff --git a/src/components/package-port/CodeAndPreview.tsx b/src/components/package-port/CodeAndPreview.tsx
index 78918e758..a28877145 100644
--- a/src/components/package-port/CodeAndPreview.tsx
+++ b/src/components/package-port/CodeAndPreview.tsx
@@ -288,26 +288,6 @@ export function CodeAndPreview({ pkg }: Props) {
   }
 
   const fsMap = useMemo(() => {
-    const possibleExportNames = [
-      ...(state.code.match(/export function (\w+)/)?.slice(1) ?? []),
-      ...(state.code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
-    ]
-
-    const exportName = possibleExportNames[0]
-    const importStatement = exportName
-      ? `import { ${exportName} as Package } from "./index.tsx"`
-      : `import Package from "./index.tsx"`
-
-    const hasBoard =
-      /<\s*board\s*\/\s*>|<\s*board\s*[^>]*>[\s\S]*?<\/\s*board\s*>/.test(
-        state.code,
-      )
-
-    const entrypointContent =
-      packageType === "board"
-        ? `${importStatement}\ncircuit.add(<Package />)`
-        : `${importStatement}\ncircuit.add(${hasBoard ? '<Package name="U1" />' : `<board>\n  <Package name="U1" />\n</board>`})`
-
     return {
       ...state.pkgFilesWithContent.reduce(
         (acc, file) => {
@@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
     }
   }, [
     state.manualEditsFileContent,
@@ -432,7 +411,6 @@ export function CodeAndPreview({ pkg }: Props) {
                 }))
               }}
               fsMap={fsMap}
-              entrypoint="main.tsx"
             />
           </div>
         )}


Reviews:
user: login: seveibar
body: Tagging @ArnavK-09 to make sure we don't break everything (@ShiboSoftwareDev have you tested on a couple of packages?)

This is definitely the approach I was thinking, we may need to patch eval to make sure it works but yea it's much nicer to have this logic consolidated across all repos evaluating tscircuit
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T14:44:06Z
user: login: ArnavK-09
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-02T15:07:47Z
user: login: ArnavK-09
body: lgtm
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-03T09:31:27Z
user: login: seveibar
body: For the package port, you should be passing all the package files to RunFrame, not just the manual edits and index file content
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-03T13:55:43Z
user: login: seveibar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-03T14:11:50Z
user: login: ShiboSoftwareDev
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-03T14:19:06Z
user: login: ArnavK-09
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-03T17:06:28Z
user: login: ShiboSoftwareDev
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-03T17:16:47Z
user: login: ShiboSoftwareDev
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-03T17:17:53Z
user: login: seveibar
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-04T15:00:41Z

Review comments:
diff_hunk: @@ -288,37 +288,9 @@ export function CodeAndPreview({ pkg }: Props) {
   }
 
   const fsMap = useMemo(() => {
-    const possibleExportNames = [
-      ...(state.code.match(/export function (\w+)/)?.slice(1) ?? []),
-      ...(state.code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
-    ]
-
-    const exportName = possibleExportNames[0]
-    const importStatement = exportName
-      ? `import { ${exportName} as Package } from "./index.tsx"`
-      : `import Package from "./index.tsx"`
-
-    const hasBoard =
-      /<\s*board\s*\/\s*>|<\s*board\s*[^>]*>[\s\S]*?<\/\s*board\s*>/.test(
-        state.code,
-      )
-
-    const entrypointContent =
-      packageType === "board"
-        ? `${importStatement}\ncircuit.add(<Package />)`
-        : `${importStatement}\ncircuit.add(${hasBoard ? '<Package name="U1" />' : `<board>\n  <Package name="U1" />\n</board>`})`
-
     return {
-      ...state.pkgFilesWithContent.reduce(
-        (acc, file) => {
-          acc[file.path] = file.content
-          return acc
-        },
-        {} as Record<string, string>,
-      ),
path: src/components/package-port/CodeAndPreview.tsx
user: login: ArnavK-09
body: broken directory imports
created_at: 2025-05-02T15:07:08Z
author_association: COLLABORATOR
diff_hunk: @@ -288,37 +288,9 @@ export function CodeAndPreview({ pkg }: Props) {
   }
 
   const fsMap = useMemo(() => {
-    const possibleExportNames = [
-      ...(state.code.match(/export function (\w+)/)?.slice(1) ?? []),
-      ...(state.code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
-    ]
-
-    const exportName = possibleExportNames[0]
-    const importStatement = exportName
-      ? `import { ${exportName} as Package } from "./index.tsx"`
-      : `import Package from "./index.tsx"`
-
-    const hasBoard =
-      /<\s*board\s*\/\s*>|<\s*board\s*[^>]*>[\s\S]*?<\/\s*board\s*>/.test(
-        state.code,
-      )
-
-    const entrypointContent =
-      packageType === "board"
-        ? `${importStatement}\ncircuit.add(<Package />)`
-        : `${importStatement}\ncircuit.add(${hasBoard ? '<Package name="U1" />' : `<board>\n  <Package name="U1" />\n</board>`})`
-
     return {
-      ...state.pkgFilesWithContent.reduce(
-        (acc, file) => {
-          acc[file.path] = file.content
-          return acc
-        },
-        {} as Record<string, string>,
-      ),
path: src/components/package-port/CodeAndPreview.tsx
user: login: ArnavK-09
body: ![image](https://github.com/user-attachments/assets/f2987d85-4312-4734-9f36-a244ddc93f43)

created_at: 2025-05-02T15:07:33Z
author_association: COLLABORATOR
diff_hunk: @@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
path: src/components/package-port/CodeAndPreview.tsx
user: login: seveibar
body: I think I see the confusion- you're always modifying `index.tsx` even if that's not the file the user is editing? This doesn't make sense, we should edit whatever file the user edited CC @ArnavK-09 
created_at: 2025-05-03T14:11:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
path: src/components/package-port/CodeAndPreview.tsx
user: login: ShiboSoftwareDev
body: this logic has nothing to do with modifying it's just passing it down as an fsMap, that's what I thought
created_at: 2025-05-03T14:19:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
path: src/components/package-port/CodeAndPreview.tsx
user: login: ArnavK-09
body: > I think I see the confusion- you're always modifying `index.tsx` even if that's not the file the user is editing? This doesn't make sense, we should edit whatever file the user edited CC @ArnavK-09 

    Yup notable bug, can be fixed in future pr or this your wish
This pr accomplish the title and lgtm

Also this thing is also needed for cli, so I think we need to find proper way to pass to runframe
#1018
created_at: 2025-05-03T17:06:28Z
author_association: COLLABORATOR
diff_hunk: @@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
path: src/components/package-port/CodeAndPreview.tsx
user: login: ShiboSoftwareDev
body: @seveibar I thought you were pointing out a regression
created_at: 2025-05-03T17:16:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -316,9 +296,8 @@ export function CodeAndPreview({ pkg }: Props) {
         },
         {} as Record<string, string>,
       ),
-      "index.tsx": entryPointCode ?? "// No Default Code Found",
-      "manual-edits.json": state.manualEditsFileContent ?? "{}",
-      "main.tsx": entrypointContent.trim(),
+      "index.tsx": state.code,
+      "manual-edits.json": state.manualEditsFileContent,
path: src/components/package-port/CodeAndPreview.tsx
user: login: ShiboSoftwareDev
body: I'll see what I can do

created_at: 2025-05-03T17:17:53Z
author_association: CONTRIBUTOR

PR comments:
user: login: ShiboSoftwareDev
created_at: 2025-05-02T14:54:50Z
body: @seveibar there is a preview
author_association: CONTRIBUTOR
user: login: seveibar
created_at: 2025-05-03T13:55:57Z
body: /bounty $10
author_association: CONTRIBUTOR
user: login: algora-pbc[bot]
created_at: 2025-05-03T13:56:01Z
body: ## 💎 $10 bounty [• tscircuit](https://algora.io/tscircuit)
### Steps to solve:
1. **Start working**: Comment `/attempt #1007` with your implementation plan
2. **Submit work**: Create a pull request including `/claim #1007` in the PR body to claim the bounty
3. **Receive payment**: 100% of the bounty is received 2-5 days post-reward. [Make sure you are eligible for payouts](https://algora.io/docs/payments#supported-countries-regions)

### ❗ Important guidelines:
- To claim a bounty, you need to **provide a short demo video** of your changes in your pull request
- If anything is unclear, **ask for clarification** before starting as this will help avoid potential rework
- Low quality AI PRs will not receive review and will be closed
- Do not ask to be assigned unless you've contributed before

Thank you for contributing to tscircuit/tscircuit.com!
author_association: NONE
user: login: ShiboSoftwareDev
created_at: 2025-05-03T14:07:09Z
body: @seveibar isn't this what's happening rn? 
![image](https://github.com/user-attachments/assets/fc3f39aa-335b-42a5-a81a-6c0707b2f3d1)


author_association: CONTRIBUTOR
user: login: ShiboSoftwareDev
created_at: 2025-05-03T14:07:52Z
body: I also updated the old deprecated file, maybe you thought that was it
author_association: CONTRIBUTOR
user: login: ShiboSoftwareDev
created_at: 2025-05-04T14:42:01Z
body: @ArnavK-09 did you work on this issue? Did you find anything interesting?
author_association: CONTRIBUTOR