Skip to content

Instantly share code, notes, and snippets.

@CyriacBr
Last active June 29, 2022 19:48
Show Gist options
  • Save CyriacBr/8b6330e7a807b5f7b2f0f9756adb987b to your computer and use it in GitHub Desktop.
Save CyriacBr/8b6330e7a807b5f7b2f0f9756adb987b to your computer and use it in GitHub Desktop.
Support SolidJs inside MDX files
import { compile } from 'xdm';
import * as Path from 'path';
import * as fs from 'fs';
import * as babel from '@babel/core';
import esbuild from 'esbuild';
async function main() {
/**
* Compile MDX file with XDM
*/
const path = Path.join(__dirname, './index.mdx');
const res = await compile(fs.readFileSync(path), {
jsx: true,
});
let code = res.value.toString();
console.log('== MDX Result ==');
console.log('code :>> ', code);
/**
* Bundle XDM output in order to resolve imports
*/
const out = await esbuild.build({
stdin: {
contents: code,
sourcefile: 'code.ts',
resolveDir: __dirname,
loader: 'jsx',
},
jsx: 'preserve',
bundle: true,
write: false,
external: ['solid-js'],
format: 'esm',
});
code = out.outputFiles[0].text;
console.log('== ESBUILD Result ==');
console.log('code :>> ', code);
/**
* Compile JSX with solid's babel plugin
*/
babel.transform(
code,
{
presets: ['solid'],
},
(err, res) => {
if (err) {
console.error(err);
return;
}
console.log('== BABEL Result ==');
console.log('res.code :>> ', res!.code);
fs.writeFileSync(Path.join(__dirname, './out.js'), res!.code!);
}
);
}
main().catch((err) => console.error(err));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment