notjs-react 0.3.3 → 0.3.5
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 +47 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -144,6 +144,53 @@ int main() {
|
|
|
144
144
|
/>
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
+
## Troubleshooting
|
|
148
|
+
|
|
149
|
+
### CSS Styling Issues in Frameworks (Astro, Next.js, etc.)
|
|
150
|
+
|
|
151
|
+
Although NotJS includes self-contained CSS, some frameworks may experience styling issues due to **CSS purging/tree-shaking**. The terminal styles (xterm.js) are added dynamically at runtime, so build tools may incorrectly remove them as "unused."
|
|
152
|
+
|
|
153
|
+
#### Symptoms
|
|
154
|
+
- Terminal appears with white/blank background
|
|
155
|
+
- Terminal resizing doesn't work
|
|
156
|
+
- Missing terminal UI elements
|
|
157
|
+
|
|
158
|
+
#### Solution: Wrapper Component (Recommended)
|
|
159
|
+
|
|
160
|
+
Create a wrapper component with explicit dimensions and **always import the CSS in the wrapper**:
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
// components/NotJSWrapper.tsx
|
|
164
|
+
import { NotJS } from 'notjs-react'
|
|
165
|
+
import 'notjs-react/styles.css' // Critical: Import styles here
|
|
166
|
+
|
|
167
|
+
export function NotJSWrapper({ width = '100%', height = '600px', ...props }) {
|
|
168
|
+
return (
|
|
169
|
+
<div style={{ width, height }}>
|
|
170
|
+
<NotJS {...props} />
|
|
171
|
+
</div>
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
Then use the wrapper in your MDX/pages:
|
|
177
|
+
|
|
178
|
+
```mdx
|
|
179
|
+
import { NotJSWrapper } from '@/components/NotJSWrapper'
|
|
180
|
+
|
|
181
|
+
# My Blog Post
|
|
182
|
+
|
|
183
|
+
<NotJSWrapper
|
|
184
|
+
width="100%"
|
|
185
|
+
height="500px"
|
|
186
|
+
apiBaseUrl="https://your-api.com/api"
|
|
187
|
+
websocketUrl="wss://your-api.com/terminal"
|
|
188
|
+
initialLanguage="java"
|
|
189
|
+
/>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
**Important**: The CSS import (`import 'notjs-react/styles.css'`) must be in the wrapper component file, not just in your page/MDX file. This ensures the styles are properly bundled and not purged by the build process.
|
|
193
|
+
|
|
147
194
|
## Development
|
|
148
195
|
|
|
149
196
|
To develop the library locally:
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "notjs-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "A React component for interactive code execution for C,C++,Java, Go and Rust",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"main": "./dist/index.cjs",
|
|
6
7
|
"module": "./dist/index.js",
|
|
7
8
|
"types": "./dist/index.d.ts",
|