add image

Author: azu

README.md

@@ -2,6 +2,8 @@
 
 A HonKit plugin for [Sandpack](https://sandpack.codesandbox.io/docs/).
 
+![img.png](img.png)
+
 ## Installation
 
     npm install honkit-plugin-sandpack
@@ -20,22 +22,50 @@ Via `book.json`:
 
 Integration code with HTML comments.
 
+
     <!-- sandpack:{
       "files": {
         "/src/index.js": {
-          "path": "src/index.js"
+          "path": "example1/index.js"
         },
         "/index.html": {
-          "path": "src/index.html"
+          "path": "example1/index.html"
         }
       },
-      "entry": "/src/index.js",
+      "entry": "/index.html",
       "dependencies": {
         "uuid": "latest"
       }
     } -->
     ```js
-    const test = 1
+    document.querySelector("h1").style.color = "red";
+    ```
+
+More complex example.
+
+
+    <!-- sandpack:{
+      "files": {
+        "/src/index.js": {
+          "prependCode": "import '/src/index.css'; // Hack to load index.css\n",
+          "path": "example2/src/index.js"
+        },
+        "/src/App.js": {
+          "path": "example2/src/App.js",
+          "active": true
+        },
+        "/src/index.css": {
+          "path": "example2/src/index.css",
+          "hidden": true
+        },
+        "/index.html": {
+          "path": "example2/index.html"
+        }
+      },
+      "entry": "/index.html"
+    } -->
+    ```js
+    // Todo App
     ```
 
 For more details, See [example](public/)

img.png

@@ -1,7 +1,7 @@
 import { parseComment } from "./parse-comment";
-import type { SandpackBundlerFile } from "@codesandbox/sandpack-client/dist/types/types";
 import * as fs from "fs";
 import path from "path";
+import { SandboxOptions } from "./sandpack";
 
 const escapeHTMLComment = (content: string) => {
     // It will be restored when parsing comment
@@ -20,11 +20,7 @@ export const inlineFiles = (content: string, filePath: string) => {
                     path: importPath,
                     appendCode,
                     ...originalProps
-                } = entry[1] as SandpackBundlerFile & {
-                    prependCode?: string;
-                    path?: string;
-                    appendCode?: string;
-                };
+                } = entry[1] as SandboxOptions["files"][1];
 
                 const loadedCode = importPath
                     ? escapeHTMLComment(fs.readFileSync(path.resolve(baseDir, importPath), "utf-8"))

src/hook-inline.ts

@@ -1,10 +1,34 @@
 import { Sandpack, SandpackPredefinedTemplate, SandpackSetup } from "@codesandbox/sandpack-react";
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { parseComment, SandboxInfo } from "./parse-comment";
+import { parseComment } from "./parse-comment";
 import { t } from "./localize";
+import { Dependencies, SandpackBundlerFile } from "@codesandbox/sandpack-client/dist/types/types";
 
-export const attachToElement = (element: HTMLElement, options: SandboxInfo, isOpen: boolean = false) => {
+// Based: SandboxInfo
+export type SandboxOptions = {
+    files: Record<
+        string,
+        SandpackBundlerFile & {
+            // prepend code snippet
+            prependCode?: string;
+            // load the path and fill code with it
+            // this path is based on the markdown file path
+            path?: string;
+            // append code snippet
+            appendCode?: string;
+        }
+    >;
+    dependencies?: Dependencies;
+    devDependencies?: Dependencies;
+    entry?: string;
+    /**
+     * What template we use, if not defined we infer the template from the dependencies or files.
+     */
+    template?: string;
+};
+
+export const attachToElement = (element: HTMLElement, options: SandboxOptions, isOpen: boolean = false) => {
     let currentRoot: ReturnType<typeof createRoot> | null;
     let containerElement: HTMLDivElement | null = null;
     const insert = (node: HTMLElement) => {
@@ -174,7 +198,7 @@ window.gitbook.events.bind("page.change", function () {
     updateCodeBlocs();
 });
 
-function replaceCodeWithConsole(codeBlock: Element, options: SandboxInfo) {
+function replaceCodeWithConsole(codeBlock: Element, options: SandboxOptions) {
     const codes = codeBlock.getElementsByTagName("code");
     if (!codes || codes.length === 0) {
         return;