A modern library for embedding Pyret into webpages with Next.js 14+ support
npm install @ironm00n/pyret-embedA modern, TypeScript-first library for embedding Pyret into webpages with Next.js 14+ support.
``bash`
npm install @ironm00n/pyret-embed
This library targets modern browsers and requires:
- ES2024 features support (including Promise.withResolvers())
`tsx
"use client";
import { useEffect, useRef } from "react";
import { makeEmbedConfig } from "@ironm00n/pyret-embed";
export default function PyretEmbed() {
const containerRef = useRef
useEffect(() => {
if (!containerRef.current) return;
makeEmbedConfig({
container: containerRef.current,
state: {
editorContents: "use context starter2024\n\n'Hello from Next.js!'",
replContents: "",
definitionsAtLastRun: "",
interactionsSinceLastRun: [],
},
options: {
footerStyle: "hide",
warnOnExit: false,
},
});
}, []);
return
;$3
`html
`$3
`javascript
import { makeEmbed } from "@ironm00n/pyret-embed/api";const container = document.getElementById("pyret-container");
makeEmbed("pyret-1", container).then((embed) => {
embed.sendReset({
editorContents: "use context starter2024\n\n'Hello!'",
replContents: "",
definitionsAtLastRun: "",
interactionsSinceLastRun: [],
});
});
`API Reference
See src/pyret.ts for full API documentation.
Development
$3
`bash
nix develop
npm install
npm run build
`$3
`bash
npm install
npm run build
`$3
-
npm run build - Build the package
- npm run dev - Build in watch mode
- npm run clean - Clean build artifacts
- npm run typecheck - Type check without buildingExamples
See the
examples/ directory for complete working examples:-
basic.html - Basic HTML usage
- fs.html - File system integration
- nextjs-example.tsx - Next.js component
- simple-test.html` - Simple test page