Write code in real-time (#407)

README.md

@@ -197,6 +197,7 @@ Projects we're inspired by:
 * [Responsively](https://github.com/responsively-org/responsively-app)
 * [Supabase](https://github.com/supabase/supabase)
 * [ShadCN](https://github.com/shadcn-ui/ui)
+* [hymhub/css-to-tailwind](https://github.com/hymhub/css-to-tailwind)
 
 ## License
 

app/electron/main/code/diff/index.ts

@@ -54,7 +54,6 @@ function processGroupedRequests(groupedRequests: Map<string, RequestsByPath>): C
         const generated = generateCode(ast, generateOptions, codeBlock);
         diffs.push({ original, generated, path });
     }
-
     return diffs;
 }
 

app/electron/main/code/diff/transform.ts

@@ -218,6 +218,6 @@ function updateNodeTextContent(node: t.JSXElement, textContent: string): void {
     if (textNode) {
         textNode.value = textContent;
     } else {
-        console.error('Text node not found');
+        node.children.unshift(t.jsxText(textContent));
     }
 }

app/electron/preload/webview/changes/index.ts

@@ -104,7 +104,7 @@ export class CssStyleChange {
             enter: (decl: Declaration) => {
                 if (decl.property === property) {
                     decl.value = { type: 'Raw', value: value };
-                    if (value === '' || value === 'none') {
+                    if (value === '') {
                         rule.block.children = rule.block.children.filter(
                             (decl: Declaration) => decl.property !== property,
                         );
@@ -115,7 +115,7 @@ export class CssStyleChange {
         });
 
         if (!found) {
-            if (value === '' || value === 'none') {
+            if (value === '') {
                 rule.block.children = rule.block.children.filter(
                     (decl: Declaration) => decl.property !== property,
                 );

app/electron/preload/webview/dom.ts

@@ -7,7 +7,7 @@ import { LayerNode } from '/common/models/element/layers';
 export function processDom(root: HTMLElement = document.body) {
     const layerTree = buildLayerTree(root);
     if (!layerTree) {
-        console.error('Error building layer tree');
+        console.error('Error building layer tree, root element is null');
         return;
     }
     ipcRenderer.sendToHost(WebviewChannels.DOM_READY, layerTree);

app/electron/preload/webview/elements/text.ts

@@ -1,5 +1,10 @@
 import { publishEditText } from '../events/publish';
-import { getDomElement, restoreElementStyle, saveTimestamp } from './helpers';
+import {
+    getDomElement,
+    getImmediateTextContent,
+    restoreElementStyle,
+    saveTimestamp,
+} from './helpers';
 import { EditorAttributes } from '/common/constants';
 import { getUniqueSelector } from '/common/helpers';
 import { TextDomElement } from '/common/models/element';
@@ -73,7 +78,7 @@ export function stopEditingText(): void {
     if (!el) {
         return;
     }
-    cleanUpElementAfterDragging(el);
+    cleanUpElementAfterEditing(el);
     publishEditText(getDomElement(el, true));
 }
 
@@ -113,7 +118,7 @@ function prepareElementForEditing(el: HTMLElement) {
     }
 }
 
-function cleanUpElementAfterDragging(el: HTMLElement) {
+function cleanUpElementAfterEditing(el: HTMLElement) {
     restoreElementStyle(el);
     removeEditingAttributes(el);
     saveTimestamp(el);
@@ -135,7 +140,8 @@ export function clearTextEditedElements() {
 
 function updateTextContent(el: HTMLElement, content: string): void {
     if (!el.hasAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_CONTENT)) {
-        el.setAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_CONTENT, el.textContent || '');
+        const originalContent = getImmediateTextContent(el);
+        el.setAttribute(EditorAttributes.DATA_ONLOOK_ORIGINAL_CONTENT, originalContent || '');
     }
     el.textContent = content;
 }

app/electron/preload/webview/events/index.ts

@@ -77,10 +77,9 @@ function listenForEditEvents() {
     });
 
     ipcRenderer.on(WebviewChannels.CLEAN_AFTER_WRITE_TO_CODE, () => {
-        change.clearStyleSheet();
         removeInsertedElements();
         clearMovedElements();
         clearTextEditedElements();
-        setTimeout(processDom, 500);
+        processDom();
     });
 }

app/electron/preload/webview/index.ts

@@ -3,11 +3,16 @@ import { processDom } from './dom';
 import { listenForEvents } from './events';
 
 function handleBodyReady() {
-    processDom();
+    keepDomUpdated();
     setApi();
     listenForEvents();
 }
 
+function keepDomUpdated() {
+    processDom();
+    setInterval(() => processDom(), 5000);
+}
+
 const handleDocumentBody = setInterval(() => {
     window.onerror = function logError(errorMsg, url, lineNumber) {
         console.log(`Unhandled error: ${errorMsg} ${url} ${lineNumber}`);

app/src/lib/editor/engine/ast/index.ts

@@ -8,15 +8,19 @@ import { TemplateNode } from '/common/models/element/templateNode';
 
 export class AstManager {
     private doc: Document | undefined;
-    displayLayers: LayerNode[] = [];
+    private displayLayers: LayerNode[] = [];
     templateNodeMap: TemplateNodeMap = new TemplateNodeMap();
 
     constructor() {
         makeAutoObservable(this);
     }
 
-    updateLayers(newLayers: LayerNode[]) {
-        this.displayLayers = newLayers;
+    get layers() {
+        return this.displayLayers;
+    }
+
+    set layers(layers: LayerNode[]) {
+        this.displayLayers = layers;
     }
 
     replaceElement(selector: string, newNode: LayerNode) {
@@ -78,7 +82,6 @@ export class AstManager {
     }
 
     setMapRoot(rootElement: Element) {
-        this.clear();
         this.setDoc(rootElement.ownerDocument);
 
         if (isOnlookInDoc(rootElement.ownerDocument)) {
@@ -165,6 +168,6 @@ export class AstManager {
 
     clear() {
         this.templateNodeMap = new TemplateNodeMap();
-        this.updateLayers([]);
+        this.displayLayers = [];
     }
 }

app/src/lib/editor/engine/code/index.ts

@@ -1,19 +1,36 @@
 import { sendAnalytics } from '@/lib/utils';
 import { CssToTailwindTranslator, ResultCode } from 'css-to-tailwind-translator';
 import { WebviewTag } from 'electron';
+import { debounce } from 'lodash';
+import { makeAutoObservable, reaction } from 'mobx';
 import { twMerge } from 'tailwind-merge';
 import { AstManager } from '../ast';
+import { HistoryManager } from '../history';
 import { WebviewManager } from '../webview';
-import { EditorAttributes, MainChannels } from '/common/constants';
+import { EditorAttributes, MainChannels, WebviewChannels } from '/common/constants';
 import { CodeDiff, CodeDiffRequest } from '/common/models/code';
 import { InsertedElement, MovedElement, TextEditedElement } from '/common/models/element/domAction';
 import { TemplateNode } from '/common/models/element/templateNode';
 
 export class CodeManager {
+    isExecuting = false;
+    isQueued = false;
+
     constructor(
         private webviewManager: WebviewManager,
         private astManager: AstManager,
-    ) {}
+        private historyManager: HistoryManager,
+    ) {
+        makeAutoObservable(this);
+        this.listenForUndoChange();
+    }
+
+    listenForUndoChange() {
+        reaction(
+            () => this.historyManager.length,
+            () => this.generateAndWriteCodeDiffs(),
+        );
+    }
 
     viewSource(templateNode?: TemplateNode): void {
         if (!templateNode) {
@@ -24,6 +41,32 @@ export class CodeManager {
         sendAnalytics('view source code');
     }
 
+    generateAndWriteCodeDiffs = debounce(this.undebouncedGenerateAndWriteCodeDiffs, 1000);
+
+    async undebouncedGenerateAndWriteCodeDiffs(): Promise<void> {
+        if (this.isExecuting) {
+            this.isQueued = true;
+            return;
+        }
+        const codeDiffs = await this.generateCodeDiffs();
+        if (codeDiffs.length === 0) {
+            console.error('No code diffs found.');
+            return;
+        }
+        const res = await window.api.invoke(MainChannels.WRITE_CODE_BLOCKS, codeDiffs);
+        if (res) {
+            this.webviewManager.getAll().forEach((webview) => {
+                webview.send(WebviewChannels.CLEAN_AFTER_WRITE_TO_CODE);
+            });
+        }
+
+        this.isExecuting = false;
+        if (this.isQueued) {
+            this.isQueued = false;
+            this.generateAndWriteCodeDiffs();
+        }
+    }
+
     async generateCodeDiffs(): Promise<CodeDiff[]> {
         const webviews = [...this.webviewManager.getAll().values()];
         if (webviews.length === 0) {

app/src/lib/editor/engine/history/index.ts

@@ -122,7 +122,7 @@ export class HistoryManager {
 
         switch (action.type) {
             case 'update-style':
-                sendAnalytics('edit action', {
+                sendAnalytics('style action', {
                     type: action.type,
                     style: action.style,
                     new_value: action.change.updated,

app/src/lib/editor/engine/index.ts

@@ -30,7 +30,6 @@ export class EditorEngine {
     private projectInfoManager: ProjectInfoManager = new ProjectInfoManager();
     private canvasManager: CanvasManager;
     private domManager: DomManager = new DomManager(this.astManager);
-    private codeManager: CodeManager = new CodeManager(this.webviewManager, this.astManager);
     private elementManager: ElementManager = new ElementManager(
         this.overlayManager,
         this.astManager,
@@ -50,6 +49,11 @@ export class EditorEngine {
         this.historyManager,
         this.astManager,
     );
+    private codeManager: CodeManager = new CodeManager(
+        this.webviewManager,
+        this.astManager,
+        this.historyManager,
+    );
 
     constructor(private projectsManager: ProjectsManager) {
         makeAutoObservable(this);
@@ -136,7 +140,6 @@ export class EditorEngine {
     }
 
     async refreshLayers() {
-        this.ast.clear();
         const webviews = this.webviews.webviews;
         if (webviews.size === 0) {
             return;

app/src/lib/editor/eventHandler.ts

@@ -32,11 +32,10 @@ export class WebviewEventHandler {
                 console.error('No args found for dom ready event');
                 return;
             }
-            this.editorEngine.ast.clear();
             const body = await this.editorEngine.dom.getBodyFromWebview(webview);
             this.editorEngine.dom.setDom(webview.id, body);
             const layerTree = e.args[0] as LayerNode;
-            this.editorEngine.ast.updateLayers([layerTree as LayerNode]);
+            this.editorEngine.ast.layers = [layerTree as LayerNode];
         };
     }
 

app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx

@@ -26,7 +26,7 @@ const ColorInput = observer(
         }, [elementStyle]);
 
         function isNoneInput() {
-            return inputString === 'initial' || inputString === '';
+            return inputString === 'initial' || inputString === '' || inputString === 'transparent';
         }
 
         function sendStyleUpdate(newValue: string) {
@@ -71,7 +71,7 @@ const ColorInput = observer(
                 <button
                     className="text-text"
                     onClick={() => {
-                        const newValue = isNoneInput() ? '#000000' : '';
+                        const newValue = isNoneInput() ? '#000000' : 'transparent';
                         sendStyleUpdate(newValue);
                     }}
                 >

app/src/routes/editor/LayersPanel/LayersTab.tsx

@@ -12,11 +12,11 @@ import { LayerNode } from '/common/models/element/layers';
 const LayersTab = observer(() => {
     const treeRef = useRef<TreeApi<LayerNode>>();
     const editorEngine = useEditorEngine();
-    const [domTree, setDomTree] = useState<LayerNode[]>(editorEngine.ast.displayLayers);
+    const [domTree, setDomTree] = useState<LayerNode[]>(editorEngine.ast.layers);
     const [treeHovered, setTreeHovered] = useState(false);
     const { ref, width, height } = useResizeObserver();
 
-    useEffect(() => setDomTree(editorEngine.ast.displayLayers), [editorEngine.ast.displayLayers]);
+    useEffect(() => setDomTree(editorEngine.ast.layers), [editorEngine.ast.layers]);
     useEffect(handleSelectChange, [editorEngine.elements.selected]);
 
     function handleMouseLeaveTree() {

app/src/routes/editor/TopBar/index.tsx

@@ -7,7 +7,6 @@ import { observer } from 'mobx-react-lite';
 import ModeToggle from './ModeToggle';
 import OpenCode from './OpenCode';
 import ProjectBreadcrumb from './ProjectSelect';
-import PublishModal from './PublishModal';
 import { Hotkey } from '/common/hotkeys';
 
 const EditorTopBar = observer(() => {
@@ -63,7 +62,6 @@ const EditorTopBar = observer(() => {
             <ModeToggle />
             <div className="flex space-x-2 flex-grow basis-0 justify-end">
                 <OpenCode />
-                <PublishModal />
             </div>
         </div>
     );

app/src/routes/editor/WebviewArea/Frame.tsx

@@ -73,7 +73,6 @@ const Frame = observer(
 
         function handleUrlChange(e: any) {
             setWebviewSrc(e.url);
-            editorEngine.clear();
         }
 
         async function handleDomReady() {