{"plugin":{"id":1,"name":"react-to-html","icon":"📄","description":"React page components to static HTML page. SSG ready for CDN","longDescription":"### Frame-Master Plugin Overview\nThe Frame-Master plugin is a powerful tool designed to transform React components into static HTML files. It offers two key features:\n* **Filesystem-based routing**: This allows for a more intuitive and organized approach to managing routes within your application, directly mapping to the file system structure.\n* **Layout stacking support**: This feature enables the creation of complex, nested layouts, enhancing the flexibility and customization of your application's UI.\n\n### Basic Hooks\nThe plugin provides essential hooks to facilitate its functionality. One of the fundamental hooks is:\n#### `usePath`\n- **Purpose**: The `usePath` hook returns the current path. This is crucial for maintaining consistency in layout rendering, ensuring that the correct layout is applied based on the current route or path.\n- **Use Case**: By utilizing the `usePath` hook, developers can create components that are aware of their position within the application's routing structure. This awareness is key to dynamically rendering the appropriate layout or modifying the component's behavior based on its current path.","version":"0.2.0","compatibleVersions":"^3.0.0","author":"Justin Halle","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"build","tags":["react","html","cdn","static"],"published":true,"npmPackage":"frame-master-plugin-react-to-html","githubUrl":"https://github.com/shpaw415/frame-master-plugin-react-to-html","docsUrl":"https://github.com/shpaw415/frame-master-plugin-react-to-html/blob/main/README.md","installation":"bun add frame-master-plugin-react-to-html","quickStart":"// first create your shell\n// src/shell.tsx\nexport default function Shell({ children }: { children: JSX.Element }) {\n return (\n \n \n \n \n My Application\n \n {/* id=\"root\" for hydration if you have the plugin for that */}\n {children}\n \n );\n}\n\n// Then create your page\n// src/pages/index.tsx\nexport default function HomePage() {\n return (\n \n );\n}\n\n// finally the layout\n// src/pages/layout.tsx\nexport default function MainLayout({ children }: { children: JSX.Element }) {\n return (\n <>\n \n {children}\n \n \n );\n}","configuration":"import type { FrameMasterConfig } from \"frame-master/server/types\";\nimport ReactToHtml from \"frame-master-plugin-react-to-html\";\n\nconst config: FrameMasterConfig = {\n HTTPServer: { port: 3000 },\n plugins: [\n ReactToHtml({\n outDir: \".frame-master/build\",\n srcDir: \"src/pages\",\n shellPath: \"src/shell.tsx\",\n }),\n ],\n};\n\nexport default config;","upvote":0,"downvote":0,"createdAt":"2025-11-25T20:05:27.000Z","updatedAt":"2025-12-11T20:30:59.000Z","dependencies":[]}}