Comments (7)
Thanks for sending over the example, it made sense after looking at it that react-live isn't needed when it handles so much of it itself. I've managed to get something working with async here: https://github.com/Adam-Collier/vite-mdx-playground/tree/evaluate_async however there are a couple of problems I'm coming across when it comes to handling errors. For example if I was to do something like <Row>some content here</Row>
(where Row isn't imported) the error bounces back to the Error Boundary rather than being handled in the try catch and gets logged to the console as an uncaught error. But if I remove the try catch and just start writing an opening tag <
the error isn't caught by the ErrorBoundary and goes straight to console (I think this is promise related and the Error Boundary doesn't handle those cases). So I'm wondering if there is a way of handling the errors that I may be missing here? so they are caught and shown in the UI rather than logging to the console
from xdm.
- Why do you want an MDX live editor?
- Why use
compileSync
, and notcompile
? This could probably be async - Why use
compile
at all, and notevaluate
? evaluate
supports exports, and can support imports tooevaluate
gives you a React node back — that’s what you’re looking for, right?
from xdm.
It's potentially going to live within a CMS so we can preview the content and save it. I tried compile
rather than compileSync
to begin with but LiveProvider's transformCode
just seems to ignore async functions. Ahh evaluate seems more like it! So now I have:
import React, { useState } from 'react';
import * as runtime from 'react/jsx-runtime.js';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { evaluateSync } from 'xdm';
import './App.css';
function App(props) {
const [code, setCode] = useState('# Hello, world!\n\n This is some markup!');
return (
<div className="App">
<LiveProvider
code={code}
transformCode={(code) => {
let { default: Content } = evaluateSync(code, {
...runtime,
});
console.log(Content);
return String(Content);
}}
scope={{}}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
</div>
);
}
export default App;
but now _jsxs is not defined
so I'm assuming something needs to be added in scope?
from xdm.
OK, getting closer.
The next thing: the package react-live
is doing work that xdm is already doing.
You don’t need it at all (it’s already done).
(And in fact serializing String(Content)
doesn‘t work)
The readme of react-live
explains what it’s doing and using under the hood. That might help to point you in the right direction.
from xdm.
Here’s a tiny, bad, example, of how it can be done: https://codesandbox.io/s/romantic-shannon-k1goq?file=/src/App.js.
You could use compileSync
, if you really want to use react-live
, it might work, but they duplicate several things: Bublé is packed at 130kb — the size of the whole of xdm.
from xdm.
A bit of googling shows me: https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971.
from xdm.
Closing this for now. I think it has garnered enough conversation to be useful for future readers. Feel free to comment with more Qs tho!
from xdm.
Related Issues (20)
- Can't override imported descendant components HOT 2
- What to do if a remark plugin generates HTML nodes? HOT 4
- How to get tree from compile ? HOT 4
- `defaultComponents` configuration prop
- Replace `got` with alternative that doesn't depend on `@types/node`
- Node loader should pass actual URL object instead of file-URL-as-string to `vfile`
- Vue Router calls generated MDXContent function without props parameter, causing TypeError
- Importing xdm on Next.js results in Webpack fail: reading from "node:assert" is not handled by plugins HOT 10
- Using MDXProvider for evaluate, options.useMDXComponents HOT 3
- question: Can interpolation occur in link urls and references? HOT 2
- Code blocks inside components are processed incorrectly. HOT 3
- How to make XDM handle type = 'html' MDAST nodes? HOT 4
- Pass components prop to Next page HOT 3
- Performance issues in a live editor using evaluate HOT 5
- Question: What is the roadmap for XDM and how does it relate to MDX 2? HOT 2
- Allow `options.pragmaImportSource` to work with named exports. HOT 11
- Pass VFile Data Back HOT 16
- Question: are there plans to start releasing recma libraries? HOT 17
- Weird use of paragraph tag inside a header HOT 4
- Adding a mdxJsxAttributeValueExpression to a JSX Node has no effect HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xdm.