@tscircuit/runframe 0.0.172 → 0.0.174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -0
- package/dist/standalone-preview.min.js +410 -410
- package/dist/standalone.min.js +419 -419
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -71,6 +71,79 @@ The CircuitJsonPreview component provides:
|
|
|
71
71
|
import evalWebWorkerBlobUrl from "@tscircuit/eval/blob-url"
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
### Standalone Iframe
|
|
75
|
+
|
|
76
|
+
RunFrame can be embedded in an iframe, allowing you to evaluate tscircuit code from a parent application.
|
|
77
|
+
|
|
78
|
+
First, create an HTML file that will host your RunFrame iframe:
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!DOCTYPE html>
|
|
82
|
+
<html>
|
|
83
|
+
<head>
|
|
84
|
+
<title>RunFrame Host</title>
|
|
85
|
+
</head>
|
|
86
|
+
<body>
|
|
87
|
+
<iframe
|
|
88
|
+
id="runframe"
|
|
89
|
+
src="https://runframe.tscircuit.com/iframe.html"
|
|
90
|
+
style="width: 100%; height: 600px; border: none;"
|
|
91
|
+
></iframe>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
const iframe = document.getElementById("runframe")
|
|
95
|
+
|
|
96
|
+
// Example: Send circuit code to the iframe
|
|
97
|
+
function updateCircuit() {
|
|
98
|
+
iframe.contentWindow.postMessage(
|
|
99
|
+
{
|
|
100
|
+
vfs: {
|
|
101
|
+
"main.tsx": `
|
|
102
|
+
circuit.add(
|
|
103
|
+
<resistor resistance="1k" />
|
|
104
|
+
)
|
|
105
|
+
`,
|
|
106
|
+
},
|
|
107
|
+
entrypoint: "main.tsx",
|
|
108
|
+
},
|
|
109
|
+
"*"
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Listen for messages from the iframe
|
|
114
|
+
window.addEventListener("message", (event) => {
|
|
115
|
+
if (event.data.type === "CIRCUIT_RENDERED") {
|
|
116
|
+
console.log("Circuit rendering complete:", event.data.circuitJson)
|
|
117
|
+
}
|
|
118
|
+
})
|
|
119
|
+
</script>
|
|
120
|
+
</body>
|
|
121
|
+
</html>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
#### Communication Protocol
|
|
125
|
+
|
|
126
|
+
Messages sent to the iframe should follow this format:
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
interface IframeMessage {
|
|
130
|
+
vfs?: Record<string, string> // Virtual filesystem map
|
|
131
|
+
entrypoint?: string // Entry point file name
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Example message:
|
|
136
|
+
|
|
137
|
+
```javascript
|
|
138
|
+
{
|
|
139
|
+
vfs: {
|
|
140
|
+
"main.tsx": "circuit.add(<resistor resistance=\"1k\" />)",
|
|
141
|
+
"components.tsx": "export const CustomComponent = () => ..."
|
|
142
|
+
},
|
|
143
|
+
entrypoint: "main.tsx"
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
74
147
|
## Development
|
|
75
148
|
|
|
76
149
|
### File-Server Interaction with Edit Events
|