Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nathsou/explang
Generic React component to explore any programming language
https://github.com/nathsou/explang
Last synced: about 2 months ago
JSON representation
Generic React component to explore any programming language
- Host: GitHub
- URL: https://github.com/nathsou/explang
- Owner: nathsou
- Created: 2021-10-20T21:01:11.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-24T11:20:32.000Z (about 3 years ago)
- Last Synced: 2024-10-11T20:42:55.037Z (3 months ago)
- Language: TypeScript
- Size: 206 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ExpLang
A generic React component to create playgrounds to explore any programming language.
## Usage
Add the following peer dependencies to your `package.json`'s devDependencies :
```json
"@geoffcox/react-splitter": "^2.1.0",
"ace-builds": "^1.4.12",
"react-ace": "^9.4.0"
```
```typescript
import { Playground, ButtonActions, Samples } from 'explang';
// create as many actions as needed, they will be turned into buttons in the top bar
// here we create two buttons to run and disassemble a piece of code
const actions: ButtonActions = {
Run: async (code, setOutput) => {
setOutput('running...');
const res = await compile(code);
if (res.isSuccess) {
setOutput(await run(res.output));
} else {
setOutput(`Error: ${res.error}`);
}
},
Disassemble: async (code, setOutput) => {
setOutput(await disassemble(code));
},
};
const samples: Samples = {
'Fibonacci': `fn fib(n: usize) { ... }`,
'Factorial': `fn fact(n: usize) { ... }`,
};
export const App = () => (
);
```
## Screenshot
