Improve write to code (#403)

onlook-dev · Sep 24, 2024 · c5d3785 · c5d3785
1 parent 343ee33
commit c5d3785
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 77 deletions.
diff --git a/app/electron/main/code/diff/index.ts b/app/electron/main/code/diff/index.ts
@@ -59,8 +59,5 @@ function processGroupedRequests(groupedRequests: Map<string, RequestsByPath>): C
 }
 
 function generateCode(ast: t.File, options: GeneratorOptions, codeBlock: string): string {
-    return removeSemiColonIfApplicable(
-        generate(ast, { ...options, retainLines: false }, codeBlock).code,
-        codeBlock,
-    );
+    return removeSemiColonIfApplicable(generate(ast, options, codeBlock).code, codeBlock);
 }
diff --git a/app/electron/main/code/diff/transform.ts b/app/electron/main/code/diff/transform.ts
@@ -84,13 +84,23 @@ function insertElementToNode(path: NodePath<t.JSXElement>, element: InsertedElem
             path.node.children.unshift(newElement);
             break;
         case InsertPos.INDEX:
-            if (
-                element.location.index !== undefined &&
-                element.location.index < path.node.children.length
-            ) {
-                path.node.children.splice(element.location.index + 1, 0, newElement);
+            // Note: children includes non-JSXElement which our index does not account for. We need to find the JSXElement/JSXFragment-only index.
+            if (element.location.index !== undefined) {
+                const jsxElements = path.node.children.filter(
+                    (child) => t.isJSXElement(child) || t.isJSXFragment(child),
+                ) as t.JSXElement[];
+
+                const targetIndex = Math.min(element.location.index, jsxElements.length);
+
+                if (targetIndex === path.node.children.length) {
+                    path.node.children.push(newElement);
+                } else {
+                    const targetChild = jsxElements[targetIndex];
+                    const targetChildIndex = path.node.children.indexOf(targetChild);
+                    path.node.children.splice(targetChildIndex, 0, newElement);
+                }
             } else {
-                console.error(`Invalid index: ${element.location.index}`);
+                console.error('Invalid index: undefined');
                 path.node.children.push(newElement);
             }
             break;
@@ -170,8 +180,7 @@ function moveElementInNode(
     filepath: string,
     element: MovedElementWithTemplate,
 ): void {
-    // Note: children includes non-JSXElement which our index does not account for. We need to find the JSXElement-only index.
-
+    // Note: children includes non-JSXElement which our index does not account for. We need to find the JSXElement/JSXFragment-only index.
     const children = path.node.children;
     const elementToMoveIndex = children.findIndex((child) => {
         if (t.isJSXElement(child)) {
@@ -187,7 +196,7 @@ function moveElementInNode(
         const [elementToMove] = children.splice(elementToMoveIndex, 1);
 
         const jsxElements = children.filter(
-            (child) => t.isJSXElement(child) || child === elementToMove,
+            (child) => t.isJSXElement(child) || t.isJSXFragment(child) || child === elementToMove,
         ) as t.JSXElement[];
 
         const targetIndex = Math.min(element.location.index, jsxElements.length);

diff --git a/app/electron/preload/webview/elements/helpers.ts b/app/electron/preload/webview/elements/helpers.ts
@@ -102,3 +102,14 @@ export const isElementInserted = (selector: string): boolean => {
     }
     return targetEl.hasAttribute(EditorAttributes.DATA_ONLOOK_INSERTED);
 };
+
+export const getImmediateTextContent = (el: HTMLElement): string | undefined => {
+    const stringArr = Array.from(el.childNodes)
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((node) => node.textContent);
+
+    if (stringArr.length === 0) {
+        return;
+    }
+    return stringArr.join('');
+};
diff --git a/app/electron/preload/webview/elements/insert.ts b/app/electron/preload/webview/elements/insert.ts
@@ -1,5 +1,5 @@
 import { CssStyleChange } from '../changes';
-import { getDeepElement, getDomElement } from './helpers';
+import { getDeepElement, getDomElement, getImmediateTextContent } from './helpers';
 import { ActionElement, ActionElementLocation } from '/common/actions';
 import { EditorAttributes, INLINE_ONLY_CONTAINERS } from '/common/constants';
 import { getUniqueSelector } from '/common/helpers';
@@ -161,7 +161,7 @@ function getInsertedElement(el: HTMLElement): InsertedElement {
         timestamp: parseInt(el.getAttribute(EditorAttributes.DATA_ONLOOK_TIMESTAMP) || '0'),
         attributes: {},
         location: getInsertedLocation(el),
-        textContent: el.textContent || undefined,
+        textContent: getImmediateTextContent(el),
     };
 }
 

diff --git a/app/src/routes/editor/EditPanel/inputs/NestedInputs.tsx b/app/src/routes/editor/EditPanel/inputs/NestedInputs.tsx
@@ -1,6 +1,5 @@
 import { useEditorEngine } from '@/components/Context';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import {
     BorderAllIcon,
@@ -30,15 +29,12 @@ const DISPLAY_NAME_OVERRIDE: Record<string, any> = {
     'Bottom Left': <CornerBottomLeftIcon className="w-4 h-4" />,
 };
 
-const VALID_KEYS = ['margin', 'padding', 'borderRadius'];
+const TOP_ELEMENT_KEYS = ['margin', 'padding', 'borderRadius'];
 
 const NestedInputs = observer(({ elementStyles: styles }: { elementStyles: ElementStyle[] }) => {
     const editorEngine = useEditorEngine();
     const [showGroup, setShowGroup] = useState(false);
     const [elementStyles, setElementStyles] = useState(styles);
-    const constructChangeMultiple = elementStyles.map((style) =>
-        constructChangeCurried(style.value),
-    );
 
     useEffect(() => {
         setElementStyles(styles);
@@ -55,15 +51,6 @@ const NestedInputs = observer(({ elementStyles: styles }: { elementStyles: Eleme
 
     const onTopValueChanged = (key: string, value: string) => {
         setElementStyles(elementStyles.map((style) => ({ ...style, value })));
-        elementStyles.forEach((elementStyle) => {
-            if (elementStyle.key === key) {
-                return;
-            }
-            editorEngine.style.updateElementStyle(
-                elementStyle.key,
-                constructChangeMultiple[elementStyles.indexOf(elementStyle)](value),
-            );
-        });
     };
 
     function renderTopInputs(elementStyle: ElementStyle) {
@@ -119,7 +106,7 @@ const NestedInputs = observer(({ elementStyles: styles }: { elementStyles: Eleme
     return (
         <div className="grid grid-cols-2 gap-2 my-2">
             {elementStyles.map((elementStyle) =>
-                VALID_KEYS.includes(elementStyle.key)
+                TOP_ELEMENT_KEYS.includes(elementStyle.key)
                     ? renderTopInputs(elementStyle)
                     : renderBottomInputs(elementStyle),
             )}

diff --git a/demos/remix/app/routes/_index.tsx b/demos/remix/app/routes/_index.tsx
@@ -2,54 +2,54 @@ import type { MetaFunction } from "@remix-run/node";
 import React, { Fragment } from "react";
 
 export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
+    return [
+        { title: "New Remix App" },
+        { name: "description", content: "Welcome to Remix!" },
+    ];
 };
 
 export default function Index() {
-  return (
-    <div className="font-sans p-4">
-      <>
-        <React.Fragment>
-          <Fragment>
-            <h1 className="text-3xl">Welcome to Remix</h1>
-          </Fragment>
-        </React.Fragment>
-      </>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div >
-  );
+    return (
+        <div className="font-sans p-4">
+            <>
+                <React.Fragment>
+                    <Fragment>
+                        <h1 className="text-3xl">Welcome to Remix</h1>
+                    </Fragment>
+                </React.Fragment>
+            </>
+            <ul className="list-disc mt-4 pl-6 space-y-2">
+                <li>
+                    <a
+                        className="text-blue-700 underline visited:text-purple-900"
+                        target="_blank"
+                        href="https://remix.run/start/quickstart"
+                        rel="noreferrer"
+                    >
+                        5m Quick Start
+                    </a>
+                </li>
+                <li>
+                    <a
+                        className="text-blue-700 underline visited:text-purple-900"
+                        target="_blank"
+                        href="https://remix.run/start/tutorial"
+                        rel="noreferrer"
+                    >
+                        30m Tutorial
+                    </a>
+                </li>
+                <li>
+                    <a
+                        className="text-blue-700 underline visited:text-purple-900"
+                        target="_blank"
+                        href="https://remix.run/docs"
+                        rel="noreferrer"
+                    >
+                        Remix Docs
+                    </a>
+                </li>
+            </ul>
+        </div>
+    );
 }