Updates the documentation

docs/XTermRun.tsx

@@ -6,7 +6,10 @@ import * as terminosaurus from 'terminosaurus';
 import React, {useEffect, useRef} from 'react';
 import {PassThrough} from 'stream';
 
-export function XTermRun({code, rows}: {code: string, rows?: number}) {
+import grammar from '#data/languages/TypeScript.tmLanguage.json';
+import theme   from '#data/themes/WinterIsComing.json';
+
+export function XTermRun({className = ``, code, rows}: {className?: string, code: string, rows?: number}) {
     const stdin = useRef<XTermScreenIn>();
     if (!stdin.current)
         stdin.current = new PassThrough();
@@ -18,8 +21,11 @@ export function XTermRun({code, rows}: {code: string, rows?: number}) {
         stdout.current.rows = 24;
     }
 
+    const cleanupRef = useRef<() => void>();
+
     useEffect(() => {
-        const fn = new Function(`React, module, exports, require`, code);
+        if (cleanupRef.current)
+            return;
 
         const run = (arg1?: any, arg2?: any) => {
             const opts = typeof arg1 === `function` ? {} : {...arg1};
@@ -55,6 +61,8 @@ export function XTermRun({code, rows}: {code: string, rows?: number}) {
             [`react`]: React,
             [`terminosaurus`]: patchedTerminosaurus,
             [`terminosaurus/react`]: patchedTerminosaurusReact,
+            [`#data/languages/TypeScript.tmLanguage.json`]: {default: grammar},
+            [`#data/themes/WinterIsComing.json`]: {default: theme},
         };
 
         const module = {exports: {}};
@@ -65,10 +73,118 @@ export function XTermRun({code, rows}: {code: string, rows?: number}) {
             return (vendors as any)[p];
         };
 
-        fn(React, module, module.exports, require);
+        const rafTimers = new Set<number>();
+
+        const fakeRequestAnimationFrame = (cb: () => void) => {
+            const id = requestAnimationFrame(() => {
+                rafTimers.delete(id);
+                cb();
+            });
+
+            rafTimers.add(id);
+            return id;
+        };
+
+        const fakeClearAnimationFrame = (id: number) => {
+            cancelAnimationFrame(id);
+            rafTimers.delete(id);
+        };
+
+        const interalTimers = new Set<ReturnType<typeof setInterval>>();
+
+        const fakeSetInterval = (cb: () => void, ms: number) => {
+            const id = setInterval(cb, ms);
+            interalTimers.add(id);
+            return id;
+        };
+
+        const fakeClearInterval = (id: ReturnType<typeof setInterval>) => {
+            clearInterval(id);
+            interalTimers.delete(id);
+        };
+
+        const timeoutTimers = new Set<ReturnType<typeof setTimeout>>();
+
+        const fakeSetTimeout = (cb: () => void, ms: number) => {
+            const id = setTimeout(() => {
+                timeoutTimers.delete(id);
+                cb();
+            }, ms);
+
+            timeoutTimers.add(id);
+            return id;
+        };
+
+        const fakeClearTimeout = (id: ReturnType<typeof setTimeout>) => {
+            clearTimeout(id);
+            timeoutTimers.delete(id);
+        };
+
+        const fn = new Function(`
+            React,
+            
+            module,
+            exports,
+            require,
+
+            requestAnimationFrame,
+            cancelAnimationFrame,
+
+            setInterval,
+            clearInterval,
+
+            setTimeout,
+            clearTimeout,
+        `, code);
+
+        fn(
+            React,
+
+            module,
+            module.exports,
+            require,
+
+            fakeRequestAnimationFrame,
+            fakeClearAnimationFrame,
+            fakeSetInterval,
+            fakeClearInterval,
+            fakeSetTimeout,
+            fakeClearTimeout,
+        );
+
+        cleanupRef.current = () => {
+            for (const id of rafTimers)
+                cancelAnimationFrame(id);
+
+            for (const id of interalTimers)
+                clearInterval(id);
+
+            for (const id of timeoutTimers)
+                clearTimeout(id);
+
+            rafTimers.clear();
+            interalTimers.clear();
+            timeoutTimers.clear();
+        };
+
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+            }
+        };
     }, []);
 
-    return <pre><code>
-        <XTerm stdin={stdin.current} stdout={stdout.current} rows={rows}/>
-    </code></pre>;
+    return (
+        <pre className={`mt-0 ${className} flex flex-col`}>
+            <div className={`flex space-x-2 mb-4 flex-none`}>
+                <div className={`w-2 h-2 rounded-full bg-red-300`}/>
+                <div className={`w-2 h-2 rounded-full bg-yellow-300`}/>
+                <div className={`w-2 h-2 rounded-full bg-green-300`}/>
+            </div>
+
+            <code className={`flex flex-1`}>
+                <XTerm className={`w-full`} stdin={stdin.current} stdout={stdout.current} rows={rows}/>
+            </code>
+        </pre>
+    );
 }

docs/components.tsx

@@ -1,8 +1,35 @@
+import fs from 'fs';
+import {transpile} from 'drdoc/src/lib/transpile';
+
 import {XTermRun} from './XTermRun';
 
-export function XTermExample({transpiled, rows, children}: {transpiled: string, rows?: number, children: React.ReactNode}) {
+export function XTermExample({code, rows, children}: {code: string, rows?: number, children: React.ReactNode}) {
     return <div>
         {children}
-        <XTermRun code={transpiled} rows={rows}/>
+
+        <div className={`mt-2`}>
+            <XTermRun code={transpile(code)} rows={rows}/>
+        </div>
     </div>;
 }
+
+const spawn = `
+    if (typeof exports.run !== "undefined") {
+        require("terminosaurus").run(screen => {
+            const animate = exports.run(screen);
+            animate && setInterval(animate, 1000 / 60);
+        });
+    }
+
+    if (typeof exports.App !== "undefined") {
+        require("terminosaurus/react").render(React.createElement(exports.App));
+    }
+`;
+
+export async function XTermFullExample({path}: {path: string}) {
+    const code = await fs.promises.readFile(`../examples/${path}`, `utf8`);
+
+    return (
+        <XTermRun className={`absolute inset-4`} code={transpile(code) + spawn}/>
+    );
+}

docs/config.ts

@@ -1,10 +1,20 @@
 export const config = {
-  title: `terminosaurus`,
+  title: `Terminosaurus`,
   description: `A terminal UI library for React`,
 
   repository: `arcanis/terminosaurus`,
   mainBranch: `main`,
 
+  algolia: {
+    appId: `IYF7ONNL0T`,
+    apiKey: `1e1e83c3e91cb276524a4806387c8df0`,
+    indexName: `clipanion`,
+  },
+
+  package: {
+    name: `terminosaurus`,
+  },
+
   theme: {
     primaryColor: `#f97316`,
     secondaryColor: `#eb5c78`,
@@ -13,31 +23,53 @@ export const config = {
   logo: {
     viewbox: `-5 -5 24 24`,
     icon: `<path fill="currentColor" fill-rule="evenodd" d="M1.546 12.25V3.314h10.908v8.934a.204.204 0 0 1-.205.205H1.751a.204.204 0 0 1-.205-.205Zm-1.5-10.5C.046.81.81.047 1.751.047h10.498c.942 0 1.705.763 1.705 1.705V12.25c0 .942-.763 1.705-1.705 1.705H1.751A1.704 1.704 0 0 1 .046 12.25z" clip-rule="evenodd"/>`,
+    title: `terminosaurus`,
   },
 
   hero: {
     title: `Terminosaurus`,
-    description: `Terminosaurus is a UI library for terminals. Bring your React apps to the terminal with ease!`,
+    description: `Terminosaurus is a graphical UI library for terminals. Bring interactive user interfaces to your CLIs with ease!`,
     filter: ``,
   },
 
   example: {
+    url: `/docs/examples/simple-form`,
     language: `tsx`,
     code: `
       import {useState} from 'react';
       import {render} from 'terminosaurus/react';
-      
+
       function App() {
         const [counter, setCounter] = useState(0);
-    
+
         return (
           <term:div onClick={() => setCounter(counter + 1)}>
             Counter: {counter}
           </term:div>
         );
       }
-    
+
       render({}, <App/>);
     `,
   },
+
+  featured: [{
+    title: `Type Safe`,
+    description: `Clipanion provides type inference for the options you declare: no duplicated types to write and keep in sync.`,
+  }, {
+    title: `Tooling Integration`,
+    description: `Because it uses standard ES6 classes, tools like ESLint can easily lint your options to detect the unused ones.`,
+  }, {
+    title: `Feature Complete`,
+    description: `Clipanion supports subcommands, arrays, counters, execution contexts, error handling, option proxying, and much more.`,
+  }, {
+    title: `Soundness`,
+    description: `Clipanion unifies your commands into a proper state machine. It gives little room for bugs, and unlocks command overloads.`,
+  }, {
+    title: `Tree Shaking`,
+    description: `The core is implemented using a functional approach, letting most bundlers only keep what you actually use.`,
+  }, {
+    title: `Battle Tested`,
+    description: `Clipanion is used to power Yarn - likely one of the most complex CLI used everyday by the JavaScript community.`,
+  }],
 };