Migrate ID system (#782)

apps/studio/common/helpers/ids.ts

@@ -0,0 +1,10 @@
+import { EditorAttributes } from '@onlook/models/constants';
+export const VALID_DATA_ATTR_CHARS = 'abcdefghijklmnopqrstuvwxyz0123456789-._:';
+
+export function getOid(node: HTMLElement): string | undefined {
+    return node.getAttribute(EditorAttributes.DATA_ONLOOK_ID) as string;
+}
+
+export function getInstanceId(node: HTMLElement): string | undefined {
+    return node.getAttribute(EditorAttributes.DATA_ONLOOK_INSTANCE_ID) as string;
+}

apps/studio/common/helpers/index.ts

@@ -1,40 +1,24 @@
 import { DOM_IGNORE_TAGS, EditorAttributes } from '@onlook/models/constants';
-import { finder } from '../selector';
-import { getOrAssignUuid } from '/electron/preload/webview/elements/helpers';
 
-export function escapeSelector(selector: string) {
-    return CSS.escape(selector);
-}
-export function querySelectorCommand(selector: string) {
-    return `document.querySelector('${escapeSelector(selector)}')`;
+export function elementFromDomId(domId: string): HTMLElement | null {
+    return document.querySelector(`[${EditorAttributes.DATA_ONLOOK_DOM_ID}="${domId}"]`);
 }
 
-export const getUniqueSelector = (el: HTMLElement, root?: Element | undefined): string => {
-    let selector = el.tagName.toLowerCase();
-    getOrAssignUuid(el);
-
-    const onlookUniqueId = getOnlookUniqueSelector(el);
-    if (onlookUniqueId) {
-        return onlookUniqueId;
-    }
-    try {
-        if (el.nodeType !== Node.ELEMENT_NODE) {
-            return selector;
-        }
-        if (root) {
-            selector = finder(el, { className: () => false, root });
-        } else {
-            selector = finder(el, { className: () => false });
-        }
-    } catch (e) {
-        console.warn('Error creating selector ', e);
+export function selectorFromDomId(domId: string, escape: boolean = false) {
+    const selector = `[${EditorAttributes.DATA_ONLOOK_DOM_ID}="${domId}"]`;
+    if (!escape) {
+        return selector;
     }
-    return selector;
-};
+    return escapeSelector(selector);
+}
 
-export const getOnlookUniqueSelector = (el: HTMLElement): string => {
-    return `[${EditorAttributes.DATA_ONLOOK_UNIQUE_ID}="${getOrAssignUuid(el)}"]`;
-};
+export function getArrayString(items: string[]) {
+    return `[${items.map((item) => `'${item}'`).join(',')}]`;
+}
+
+export function escapeSelector(selector: string) {
+    return CSS.escape(selector);
+}
 
 export function capitalizeFirstLetter(string: string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -53,7 +37,7 @@ export function isValidHtmlElement(element: Element): boolean {
 
 export function isOnlookInDoc(doc: Document): boolean {
     const attributeExists = doc.evaluate(
-        '//*[@data-onlook-id]',
+        `//*[@${EditorAttributes.DATA_ONLOOK_ID}]`,
         doc,
         null,
         XPathResult.BOOLEAN_TYPE,

apps/studio/common/helpers/template.ts

@@ -1,15 +1,5 @@
-import { compressSync, decompressSync, strFromU8, strToU8 } from 'fflate';
-import { EditorAttributes } from '@onlook/models/constants';
 import type { TemplateNode } from '@onlook/models/element';
-
-export function getTemplateNode(element: Element): TemplateNode | undefined {
-    const encodedTemplateNode = element.getAttribute(EditorAttributes.DATA_ONLOOK_ID);
-    if (!encodedTemplateNode) {
-        return;
-    }
-    const templateNode = decode(encodedTemplateNode);
-    return templateNode;
-}
+import { compressSync, decompressSync, strFromU8, strToU8 } from 'fflate';
 
 export function encode(templateNode: TemplateNode) {
     const buffer = strToU8(JSON.stringify(templateNode));

apps/studio/common/ide.ts

@@ -1,6 +1,6 @@
-import type { Icons } from '@onlook/ui/icons';
 import type { TemplateNode } from '@onlook/models/element';
 import { IdeType } from '@onlook/models/ide';
+import type { Icons } from '@onlook/ui/icons';
 
 export class IDE {
     static readonly VS_CODE = new IDE('VSCode', IdeType.VS_CODE, 'vscode', 'VSCodeLogo');
@@ -57,4 +57,8 @@ export class IDE {
         }
         return codeCommand;
     }
+
+    getCodeFileCommand(filePath: string) {
+        return `${this.command}://file/${filePath}`;
+    }
 }