Add HTML codegen

.changeset/nervous-worms-confess.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add HTML codegen

apps/docs/pages/html-editor.tsx

@@ -29,18 +29,18 @@ const initialValue: any = {
       style: {
         color: 'primary',
         fontSize: [
-        {
-          value: 4,
-          unit: 'rem',
-        },
-        {
-          value: 6,
-          unit: 'rem',
-        },
-        {
-          value: 10,
-          unit: 'rem',
-        },
+          {
+            value: 4,
+            unit: 'rem',
+          },
+          {
+            value: 6,
+            unit: 'rem',
+          },
+          {
+            value: 10,
+            unit: 'rem',
+          },
         ],
         fontWeight: 900,
         fontFamily: 'Inter',
@@ -218,25 +218,29 @@ export default function HtmlEditorExample() {
   const [html, setHtml] = useState(initialValue)
 
   return (
-      <HtmlEditorProvider value={html}>
-        <div sx={{ 
-          display: 'grid', 
+    <HtmlEditorProvider value={html}>
+      <div
+        sx={{
+          display: 'grid',
           gridTemplateAreas: '"nav content"',
           gridTemplateColumns: 'auto 1fr',
           gridTemplateRows: 'auto',
           height: 'calc(100vh - 64px)',
-          }}>
-            <div sx={{ 
-              gridArea: 'nav',
-              maxheight: 'calc(100vh - 64px)',
-              overflow: 'auto', 
-            }}>
-              <HtmlEditor onChange={setHtml} />
-            </div>
-            <div sx={{ overflow: 'auto',  width: '100%', gridArea: 'content', }}>
-              <HtmlRenderer value={html} />
-            </div>
+        }}
+      >
+        <div
+          sx={{
+            gridArea: 'nav',
+            maxheight: 'calc(100vh - 64px)',
+            overflow: 'auto',
+          }}
+        >
+          <HtmlEditor onChange={setHtml} />
+        </div>
+        <div sx={{ overflow: 'auto', width: '100%', gridArea: 'content' }}>
+          <HtmlRenderer value={html} />
         </div>
-      </HtmlEditorProvider>
+      </div>
+    </HtmlEditorProvider>
   )
 }

packages/gui/src/lib/codegen/html.ts

@@ -0,0 +1,14 @@
+import { HtmlNode } from '../../components/html/types'
+
+export const html = async (node: HtmlNode) => {
+  const res = await fetch('https://components.ai/api/v1/gui/export/html', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ html: node }),
+  })
+
+  const docHtml: string = await res.text()
+  return docHtml
+}

packages/gui/src/lib/codegen/index.ts

@@ -7,6 +7,8 @@ import { isNestedSelector, isNestedSelectorWithSyntax } from '../util'
 import { stringifyCSSObject } from './stringify-css-object'
 import { toCSSObject } from './to-css-object'
 
+export { html } from './html'
+
 const DEFAULT_BREAKPOINTS_COUNT = 3
 
 const getStylesByBreakpoint = (obj: any, breakpoint: number): any => {