feat(docs): allow file input in playground

purescraps · May 18, 2024 · ea45f36 · ea45f36
1 parent 18addee
commit ea45f36
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 20 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -17,13 +17,15 @@
     "@purescraps/purehtml": "^0.2.0",
     "@react-nano/router": "^0.13.0",
     "@tabler/icons-react": "^3.4.0",
+    "cheerio": "1.0.0-rc.12",
     "monaco-editor": "^0.48.0",
     "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "yaml": "^2.4.2"
   },
   "devDependencies": {
+    "@types/cheerio": "^0.22.35",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",

diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/src/Playground.tsx b/docs/src/Playground.tsx
@@ -3,6 +3,10 @@
 import {
   Accordion,
   Alert,
+  Code,
+  Collapse,
+  Divider,
+  FileInput,
   Grid,
   Paper,
   Select,
@@ -15,7 +19,7 @@ import {
   IconJson,
   IconSettingsAutomation,
 } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Example, exampleToComboboxItem, examples } from './examples';
 import { usePureHtml } from './hooks/usePureHtml';
 
@@ -27,10 +31,27 @@ export function Playground() {
   );
   const [config, setConfig] = useState('');
   const [html, setHtml] = useState('');
+  const [htmlFileContents, setHtmlFileContents] = useState<string | null>(null);
   const { configIsValid, result } = usePureHtml({
-    inputHtml: html,
+    inputHTML: htmlFileContents ?? html,
     configYaml: config,
   });
+  const onHtmlFileChange = useCallback(
+    (file: File | null) => {
+      if (!file) {
+        return setHtmlFileContents(null);
+      }
+
+      file
+        .text()
+        .then((contents) => setHtmlFileContents(contents))
+        .catch((err) => {
+          console.error('Cannot read selected html file contents:', err);
+          alert('Cannot read the HTML contents. Please try again.');
+        });
+    },
+    [setHtmlFileContents]
+  );
 
   useEffect(() => {
     if (!selectedExample) {
@@ -78,18 +99,35 @@ export function Playground() {
               </Accordion.Control>
               <Accordion.Panel>
                 <Paper shadow="sm" pt="sm" withBorder>
-                  <Editor
-                    height="25vh"
-                    language="html"
-                    options={{
-                      formatOnType: true,
-                      tabSize: 2,
-                      insertSpaces: true,
-                      minimap: { enabled: false },
-                    }}
-                    onChange={(val) => setHtml(val ?? '')}
-                    value={html}
-                    theme="vs-dark"
+                  <Collapse in={htmlFileContents === null}>
+                    <Editor
+                      height="25vh"
+                      language="html"
+                      options={{
+                        formatOnType: true,
+                        tabSize: 2,
+                        insertSpaces: true,
+                        minimap: { enabled: false },
+                      }}
+                      onChange={(val) => setHtml(val ?? '')}
+                      value={html}
+                      theme="vs-dark"
+                    />
+                  </Collapse>
+
+                  <Collapse in={htmlFileContents !== null} p="sm">
+                    <Code>Deselect HTML file to re-open the editor.</Code>
+                  </Collapse>
+
+                  <Divider mt="sm" label="or upload html" />
+
+                  <FileInput
+                    accept="text/html"
+                    clearable
+                    label="Select an HTML file"
+                    m="sm"
+                    mt="0"
+                    onChange={onHtmlFileChange}
                   />
                 </Paper>
               </Accordion.Panel>

diff --git a/docs/src/hooks/usePureHtml.ts b/docs/src/hooks/usePureHtml.ts
@@ -1,24 +1,30 @@
 'use client';
 
 import { ConfigFactory, extract } from '@purescraps/purehtml';
-import { useEffect, useState } from 'react';
+import { load } from 'cheerio';
+import { useEffect, useMemo, useState } from 'react';
 
 export interface UsePureHtml {
   configIsValid: boolean;
   result: string;
 }
 
 export function usePureHtml({
-  inputHtml,
+  inputHTML,
   configYaml,
 }: {
-  inputHtml: string;
+  inputHTML: string;
   configYaml: string;
 }): UsePureHtml {
   const [state, setState] = useState<UsePureHtml>({
     configIsValid: true,
     result: '',
   });
+  // cache cheerio.load call for handling big HTMLs
+  const input = useMemo<cheerio.Root | null>(
+    () => (inputHTML ? load(inputHTML) : null),
+    [inputHTML]
+  );
   const [config, setConfig] = useState<unknown>(null);
 
   useEffect(() => {
@@ -36,22 +42,24 @@ export function usePureHtml({
   }, [configYaml]);
 
   useEffect(() => {
-    if (!config || !inputHtml) {
+    if (!config || !input) {
       setState((s) => ({ ...s, result: '' }));
       return;
     }
 
     try {
       const result = JSON.stringify(
-        extract(inputHtml, config as any, 'https://example.com'),
+        extract(input, config as any, 'https://example.com'),
         null,
         '  '
       );
       setState((s) => ({ ...s, result }));
     } catch (err) {
+      console.error('cannot extract data:', err);
+
       setState((s) => ({ ...s, result: '' }));
     }
-  }, [config, inputHtml]);
+  }, [config, input]);
 
   return state;
 }