Merge pull request #49 from author-more/build/es-modules

build: switch to es modules

Author: Belar

README.md

@@ -26,4 +26,7 @@ It delivers a desktop-like experience for Penpot users with the addition of inte
 1. Run `npm ci` to install packages.  
    *Other package managers such as Yarn, PNPM, or Bun should work as well.*
 1. (Optional) Run `npm run dev` to start the application in development mode. This will open a new window with the application running.
+    
+    > Note: Penpot Desktop is using ES Modules. Make sure to read the [ES Modules (ESM) in Electron guide](https://www.electronjs.org/docs/latest/tutorial/esm).
+
 1. Run `npm run build` to build the application. By default, it will build for the current OS and architecture, but you can pass flags to build for other platforms. See the [Electron Builder documentation](https://www.electron.build/cli) for more information.

package.json

@@ -18,6 +18,7 @@
     "url": "https://github.com/author-more/penpot-desktop/issues",
     "email": "penpotdesktop@authormore.com"
   },
+  "type":"module",
   "scripts": {
     "start": "npm run dev",
     "build": "electron-builder --config build/electron-builder.yml",

src/base/components/titlebar.html

@@ -1,7 +1,7 @@
 <div class="titlebar">
     <!-- Controls -->
     <sl-tooltip content="Settings" style="--sl-tooltip-arrow-size: 0;">
-        <button onclick="ToggleSettings()"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
+        <button id="toggle-settings"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
     </sl-tooltip>
 
     <!-- Titlebar Buttons -->

src/base/global.d.ts

@@ -0,0 +1,3 @@
+type Ipc = import("../types/ipc.ts");
+
+declare var api: Ipc.Api

src/base/index.html

@@ -3,18 +3,12 @@
         <title>Penpot Desktop</title>
         <link rel="stylesheet" href="./styles/index.css"/>
         <link rel="stylesheet" href="../../node_modules/@shoelace-style/shoelace/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark')"/>
-        <script type="module" src="../../node_modules/@shoelace-style/shoelace/cdn/shoelace.js"></script>
-        <script src="../../node_modules/electron-tabs/dist/electron-tabs.js"></script>
-        <script src="./scripts/dom.js"></script>
-        <script src="./scripts/electron-tabs.js"></script>
-        <script src="./scripts/instance.js"></script>
-        <script src="./scripts/theme.js"></script>
-        <script src="./scripts/toggles.js"></script>
+        <script src="./scripts/main.js" type="module"></script>
     </head> 
     <body>
         <drag></drag>
         <sl-include id="include-controls" src="./components/controls.html"></sl-include>
-        <sl-include src="./components/titlebar.html"></sl-include>
+        <sl-include id="include-titlebar" src="./components/titlebar.html"></sl-include>
         <sl-include src="./components/splash.html"></sl-include>
         <sl-include id="include-tabs" src="./components/tabs.html"></sl-include>
         <sl-include id="include-settings" src="./components/settings.html"></sl-include>
@@ -23,7 +17,7 @@
             <img src="./assets/penpot-logo/logo-white.png"/>
             <h2>No tabs are opened</h2>
             <p>Add a new tab to start making awesome things.</p>
-            <button onclick='document.querySelector("body > #include-tabs > tab-group").shadowRoot.querySelector("div > nav > div.buttons > button").click(); ATWC()'>Create a tab</button>
+            <button id="open-tab">Create a tab</button>
         </div>
     </body>
 </html>

src/base/scripts/dom.js

@@ -25,7 +25,7 @@
  * @param {string} includeSelector - The CSS selector of the sl-include element.
  * @param {Class<E> =} type - The expected type of the element.
  */
-function getIncludedElement(selector, includeSelector, type) {
+export function getIncludedElement(selector, includeSelector, type) {
   return new Promise((resolve) => {
     const includeElement = document.querySelector(includeSelector);
     if (!includeElement) {
@@ -59,7 +59,7 @@ function getIncludedElement(selector, includeSelector, type) {
  * @param {ParentNode | null | undefined} parent
  * @return {E | null}
  */
-function typedQuerySelector(selector, type, parent = document) {
+export function typedQuerySelector(selector, type, parent = document) {
   const element = parent?.querySelector(selector);
   if (element instanceof type) {
     return element;

src/base/scripts/electron-tabs.js

@@ -1,11 +1,14 @@
+import { getIncludedElement, typedQuerySelector } from "./dom.js";
+import { handleInTabThemeUpdate, THEME_TAB_EVENTS } from "./theme.js";
+
 /**
  * @typedef {import("electron-tabs").TabGroup} TabGroup
  * @typedef {import("electron-tabs").Tab} Tab
  * @typedef {import("electron").WebviewTag} WebviewTag
  */
 
 const DEFAULT_INSTANCE = "https://design.penpot.app/";
-const PRELOAD_PATH = "./scripts/webviews/preload.js";
+const PRELOAD_PATH = "./scripts/webviews/preload.mjs";
 const DEFAULT_TAB_OPTIONS = Object.freeze({
   src: DEFAULT_INSTANCE,
   active: true,
@@ -16,23 +19,23 @@ const DEFAULT_TAB_OPTIONS = Object.freeze({
   ready: tabReadyHandler,
 });
 
-window.addEventListener("DOMContentLoaded", async () => {
+export async function initTabs() {
   const tabGroup = await getTabGroup();
 
   tabGroup?.on("tab-removed", () => {
-    ATWC();
+    handleNoTabs();
   });
   tabGroup?.on("tab-added", () => {
-    ATWC();
+    handleNoTabs();
   });
 
   prepareTabReloadButton();
-});
 
-window.api.onOpenTab(openTab);
-window.api.onTabMenuAction(handleTabMenuAction);
+  window.api.onOpenTab(openTab);
+  window.api.onTabMenuAction(handleTabMenuAction);
+}
 
-async function resetTabs() {
+export async function resetTabs() {
   const tabGroup = await getTabGroup();
   tabGroup?.eachTab((tab) => tab.close(false));
   openTab();
@@ -41,7 +44,7 @@ async function resetTabs() {
 /**
  * @param {string =} href
  */
-async function setDefaultTab(href) {
+export async function setDefaultTab(href) {
   const tabGroup = await getTabGroup();
 
   tabGroup?.setDefaultTab({
@@ -53,7 +56,7 @@ async function setDefaultTab(href) {
 /**
  * @param {string =} href
  */
-async function openTab(href) {
+export async function openTab(href) {
   const tabGroup = await getTabGroup();
 
   tabGroup?.addTab(
@@ -107,12 +110,12 @@ function tabReadyHandler(tab) {
 }
 
 /**
- * Calls a tab and requests a theme update send-out. 
+ * Calls a tab and requests a theme update send-out.
  * If no tab is provided, calls the active tab.
- *  
+ *
  * @param {Tab =} tab
  */
-async function requestTabTheme(tab) {
+export async function requestTabTheme(tab) {
   tab = tab || (await getActiveTab());
 
   if (tab) {
@@ -126,7 +129,18 @@ async function getActiveTab() {
   return tabGroup?.getActiveTab();
 }
 
-async function getTabGroup() {
+async function handleNoTabs() {
+  const tabGroup = await getTabGroup();
+  const tabs = tabGroup?.getTabs();
+  const hasTabs = !!tabs?.length;
+
+  const noTabsExistPage = typedQuerySelector(".no-tabs-exist", HTMLElement);
+  if (noTabsExistPage) {
+    noTabsExistPage.style.display = hasTabs ? "none" : "inherit";
+  }
+}
+
+export async function getTabGroup() {
   return /** @type {TabGroup | null} */ (
     await getIncludedElement("tab-group", "#include-tabs")
   );

src/base/scripts/instance.js

@@ -1,16 +1,19 @@
+import { getIncludedElement } from "./dom.js";
+import { openTab, resetTabs, setDefaultTab } from "./electron-tabs.js";
+
 const INSTANCE_STORE_KEY = "Instance";
 const INSTANCE_EVENTS = Object.freeze({
   REGISTER: "registerInstance",
   REMOVE: "removeInstance",
 });
 
-window.addEventListener("DOMContentLoaded", async () => {
+export async function initInstance() {
   const savedInstance = await registerSavedInstance();
 
   await setDefaultTab(savedInstance);
   openTab(savedInstance);
   prepareSaveButton();
-});
+}
 
 async function prepareSaveButton() {
   const { instanceSaveButton } = await getInstanceSettingsForm();
@@ -36,11 +39,11 @@ async function saveInstance(trigger) {
     await setDefaultTab(instance);
   } else {
     const savedInstance = localStorage.getItem(INSTANCE_STORE_KEY);
-    
+
     if (savedInstance) {
       window.api.send(INSTANCE_EVENTS.REMOVE, savedInstance);
     }
-    
+
     localStorage.removeItem(INSTANCE_STORE_KEY);
     await setDefaultTab();
   }

src/base/scripts/main.js

@@ -0,0 +1,14 @@
+import "../../../node_modules/@shoelace-style/shoelace/cdn/shoelace.js";
+import "../../../node_modules/electron-tabs/dist/electron-tabs.js";
+
+import { initTabs } from "./electron-tabs.js";
+import { initInstance } from "./instance.js";
+import { initTheme } from "./theme.js";
+import { initToggles } from "./toggles.js";
+
+window.addEventListener("DOMContentLoaded", () => {
+  initTabs();
+  initInstance();
+  initTheme();
+  initToggles();
+});

src/base/scripts/theme.js

@@ -4,16 +4,19 @@
  * @typedef {import("electron").IpcMessageEvent} IpcMessageEvent
  */
 
+import { getIncludedElement } from "./dom.js";
+import { requestTabTheme } from "./electron-tabs.js";
+
 const THEME_STORE_KEY = "theme";
-const THEME_TAB_EVENTS = Object.freeze({
+export const THEME_TAB_EVENTS = Object.freeze({
   REQUEST_UPDATE: "theme-request-update",
   UPDATE: "theme-update",
 });
 
 /** @type {ThemeSetting | null} */
 let currentThemeSetting = null;
 
-window.addEventListener("DOMContentLoaded", () => {
+export function initTheme() {
   currentThemeSetting = /** @type {ThemeSetting | null} */ (
     localStorage.getItem(THEME_STORE_KEY)
   );
@@ -23,7 +26,7 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 
   prepareForm(currentThemeSetting);
-});
+}
 
 /**
  * @param {ThemeSetting | null} themeSetting
@@ -80,7 +83,7 @@ async function getThemeSettingsForm() {
 /**
  * @param {string} inTabTheme
  */
-function handleInTabThemeUpdate(inTabTheme) {
+export function handleInTabThemeUpdate(inTabTheme) {
   const shouldUseInTabTheme = currentThemeSetting === "tab";
 
   if (shouldUseInTabTheme) {

src/base/scripts/toggles.js

@@ -1,73 +1,29 @@
-/**
- * @typedef {import('@shoelace-style/shoelace').SlAlert} SlAlert
- */
+import { getIncludedElement, typedQuerySelector } from "./dom.js";
+import { openTab } from "./electron-tabs.js";
 
-// Settings
-function ToggleSettings() {
+export async function initToggles() {
+  const { toggleSettingsButton, openTabButton } = await getToggles();
+
+  toggleSettingsButton?.addEventListener("click", () => toggleSettings());
+  openTabButton?.addEventListener("click", () => openTab());
+}
+
+function toggleSettings() {
   const settingsUi = typedQuerySelector("#settings", HTMLElement);
   if (settingsUi) {
     const isVisible = settingsUi.style.display === "flex";
     settingsUi.style.display = isVisible ? "none" : "flex";
   }
 }
 
-// Detect if there are no tabs
-setTimeout(async () => {
-  const tabGroup = await getTabGroup();
-  const tabClose = tabGroup?.shadowRoot?.querySelector(
-    "div > nav > div.tabs > div > span.tab-close"
+async function getToggles() {
+  const toggleSettingsButton = await getIncludedElement(
+    "#toggle-settings",
+    "#include-titlebar",
+    HTMLButtonElement
   );
-  const button = tabGroup?.shadowRoot?.querySelector(
-    "div > nav > div.buttons > button"
-  );
-  tabClose?.addEventListener("click", () => ATWC());
-  button?.addEventListener("click", () => ATWC());
-}, 2000);
-
-async function ATWC() {
-  const tabGroup = await getTabGroup();
-  const tabs = tabGroup?.shadowRoot?.querySelector("div > nav > div.tabs > *");
-  const hasTabs = typeof tabs != "undefined" && tabs != null;
-
-  const noTabsExistPage = typedQuerySelector(".no-tabs-exist", HTMLElement);
-  const tabClose = tabGroup?.shadowRoot?.querySelector(
-    "div > nav > div.tabs > div > span.tab-close"
-  );
-
-  if (noTabsExistPage) {
-    noTabsExistPage.style.display = hasTabs ? "none" : "inherit";
-  }
-  tabClose?.addEventListener("click", () => ATWC());
-}
 
-// Alerts
-/// Docs: https://shoelace.style/getting-started/usage#methods
-/// No Instance
-function ShowNoInstance() {
-  const noInstanceAlert = getNoInstanceAlert();
-  if (noInstanceAlert) {
-    noInstanceAlert.show();
-  }
-}
+  const openTabButton = typedQuerySelector("#open-tab", HTMLButtonElement);
 
-function HideNoInstance() {
-  const noInstanceAlert = getNoInstanceAlert();
-  if (noInstanceAlert) {
-    noInstanceAlert.hide();
-  }
+  return { toggleSettingsButton, openTabButton };
 }
-
-function getNoInstanceAlert() {
-  // Type guard would require a type import. As a compromise, we use a type guard for a HTMLElement and assume the type as SlAlert.
-  return /** @type {SlAlert | null}*/ (
-    typedQuerySelector("#noinstance", HTMLElement)
-  );
-}
-
-setTimeout(() => {
-  const instanceField = typedQuerySelector("#InstanceField", HTMLInputElement);
-  const isInstanceFieldEmpty = instanceField?.value === "";
-  if (isInstanceFieldEmpty) {
-    ShowNoInstance();
-  }
-}, 1000);

src/base/scripts/webviews/preload.js renamed to src/base/scripts/webviews/preload.mjs

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+  },
+  "include": ["**/*", "../types"]
+}

src/base/tsconfig.json

@@ -1,15 +1,2 @@
-type Electron = import("electron");
-
-declare var api: {
-  send: (channel: string, data: unknown) => void;
-  setTheme: (themeId: Electron.NativeTheme["themeSource"]) => void;
-  onOpenTab: (callback: (href: string) => void) => void;
-  onTabMenuAction: (
-    callback: ({ command: string, tabId: number }) => void
-  ) => void;
-};
-
-declare var mainWindow: Electron.BrowserWindow;
-
 declare var transparent: boolean;
 declare var AppIcon: string;