Revert "Svelte child components (#331)" (#355)

This reverts commit c5a5271.

Author: kgsvg

.gitignore

@@ -10,7 +10,6 @@ npm/*
 *.log
 components/**/index.js
 components/**/index.js.map
-components/**/nylas-component.css
 components/**/main.js
 components/**/main.js.map
 components/**/styles.css

commons/src/components/DefaultError.svelte

@@ -43,3 +43,9 @@ export {
 } from "./methods/component";
 export { silence } from "./methods/api";
 export { ErrorStore } from "./store/error";
+/**
+ * Esbuild tree shakes NError, however it is used in each component
+ * This code prevents Esbuild from tree-shaking NError
+ */
+import _ from "./components/NError.svelte";
+void _;

commons/src/index.ts

@@ -6,7 +6,7 @@ import type {
   ConversationQuery,
   StoredMessage,
 } from "@commons/types/Nylas";
-import { silence } from "@commons/methods/api";
+import { silence } from "@commons";
 
 function initializeConversations() {
   const { subscribe, set, update } = writable<Record<string, Conversation>>({});

commons/src/store/conversations.ts

@@ -4,7 +4,6 @@
   import { tick } from "svelte";
   import { get_current_component, onMount } from "svelte/internal";
   import { spring } from "svelte/motion";
-  import "@commons/components/NError.svelte";
   import { CalendarStore, EventStore, ManifestStore } from "@commons";
   import {
     buildInternalProps,

components/agenda/src/Agenda.svelte

@@ -6,7 +6,6 @@
     isValidTimezone,
     setTimeZoneOffset,
   } from "@commons/methods/convertDateTimeZone";
-  import "@commons/components/NError.svelte";
   import {
     ManifestStore,
     AvailabilityStore,

components/availability/src/Availability.svelte

@@ -1,8 +1,15 @@
-import config, { svelteWebConfig } from "../../rollup.common.config";
+import config, { svelteConfig } from "../../rollup.common.config";
+import svelte from "rollup-plugin-svelte";
+import svelteSVG from "rollup-plugin-svelte-svg";
+import json from "@rollup/plugin-json";
 
-config.plugins = [
-  ...svelteWebConfig({ svg: true, json: true }),
-  ...config.plugins,
-];
+config.plugins.unshift(svelteSVG());
+
+config.plugins.unshift(
+  svelte({
+    ...svelteConfig,
+  }),
+);
+config.plugins.unshift(json());
 
 export default { ...config, input: "src/main.ts" };

components/composer/rollup.config.js

@@ -1,12 +1,11 @@
 <svelte:options tag="nylas-composer" immutable />
 
 <script lang="ts">
-  import HTMLEditor from "./components/HTMLEditor.svelte";
-  import AlertBar from "./components/AlertBar.svelte";
-  import ComposerAttachment from "./components/Attachment.svelte";
-  import DatepickerModal from "./components/DatepickerModal.svelte";
-  import ContactsSearch from "./components/ContactsSearch.svelte";
-  import NylasError from "@commons/components/DefaultError.svelte";
+  import "./components/HTMLEditor.svelte";
+  import "./components/AlertBar.svelte";
+  import "./components/Attachment.svelte";
+  import "./components/DatepickerModal.svelte";
+  import "./components/ContactsSearch.svelte";
   import LoadingIcon from "./assets/loading.svg";
 
   import {
@@ -155,10 +154,6 @@
   $: subject = value?.subject ?? $message.subject;
 
   onMount(async () => {
-    const style = document.createElement("style");
-    style.innerHTML = '@import "../nylas-component.css"';
-    document.querySelector("nylas-composer").shadowRoot.prepend(style);
-
     isLoading = true;
     await tick();
 
@@ -671,7 +666,7 @@
   }
 </style>
 
-<NylasError {id} />
+<nylas-error {id} />
 
 {#if themeUrl}
   <link
@@ -748,8 +743,8 @@
             </div>
           {/if}
           {#if _this.show_to}
-            <ContactsSearch
-              id="to-field"
+            <nylas-contacts-search
+              data-cy="to-field"
               placeholder="To:"
               change={handleContactsChange("to")}
               contacts={to}
@@ -784,8 +779,8 @@
         </div>
         {#if _this.show_cc}
           <div class="cc-container">
-            <ContactsSearch
-              id="cc-field"
+            <nylas-contacts-search
+              data-cy="cc-field"
               placeholder="CC:"
               contacts={cc}
               value={$message.cc}
@@ -807,8 +802,8 @@
         {/if}
         {#if _this.show_bcc}
           <div class="cc-container">
-            <ContactsSearch
-              id="bcc-field"
+            <nylas-contacts-search
+              data-cy="bcc-field"
               placeholder="BCC:"
               contacts={bcc}
               value={$message.bcc}
@@ -845,7 +840,8 @@
         {/if}
 
         <!-- HTML Editor -->
-        <HTMLEditor
+        <nylas-html-editor
+          data-cy="html-editor"
           html={$message.body || template}
           onchange={handleBodyChange}
           replace_fields={_this.replace_fields}
@@ -858,7 +854,7 @@
               <div class="attachments-caption">Attachments:</div>
 
               {#each $attachments as fileAttachment}
-                <ComposerAttachment
+                <nylas-composer-attachment
                   attachment={fileAttachment}
                   remove={handleRemoveFile}
                 />
@@ -895,25 +891,29 @@
       </footer>
       <!-- Date Picker Component -->
       {#if showDatepicker}
-        <DatepickerModal close={datePickerClose} {schedule} />
+        <nylas-composer-datepicker-modal close={datePickerClose} {schedule} />
       {/if}
       <!-- Datepicker Alert (if message is scheduled) -->
       {#if $message.send_at && !sendError && !sendSuccess}
-        <AlertBar type="info" dismissible={true} ondismiss={removeSchedule}>
+        <nylas-composer-alert-bar
+          type="info"
+          dismissible={true}
+          ondismiss={removeSchedule}
+        >
           Send scheduled for
           <span>{formatDate(new Date(datepickerTimestamp))}</span>
-        </AlertBar>
+        </nylas-composer-alert-bar>
       {/if}
       <!-- Alerts -->
       {#if sendError}
-        <AlertBar type="danger" dismissible={true}>
+        <nylas-composer-alert-bar type="danger" dismissible={true}>
           Error: Failed to send the message.
-        </AlertBar>
+        </nylas-composer-alert-bar>
       {/if}
       {#if sendSuccess}
-        <AlertBar type="success" dismissible={true}>
+        <nylas-composer-alert-bar type="success" dismissible={true}>
           Message sent successfully!
-        </AlertBar>
+        </nylas-composer-alert-bar>
       {/if}
     {/if}
   </div>

components/composer/src/Composer.wc.svelte renamed to components/composer/src/Composer.svelte

@@ -1,3 +1,5 @@
+<svelte:options tag="nylas-composer-alert-bar" />
+
 <script>
   export let type = "primary";
   export let dismissible = true;

components/composer/src/components/AlertBar.svelte

@@ -1,3 +1,5 @@
+<svelte:options tag="nylas-composer-attachment" />
+
 <script lang="ts">
   import CloseIcon from "../assets/close.svg";
   import LoadingIcon from "../assets/loading.svg";
@@ -17,7 +19,7 @@
 
 <style lang="scss">
   @import "../../../theming/variables.scss";
-  .composer-attachment {
+  .wrapper {
     padding: 0.3rem 0;
   }
 
@@ -85,7 +87,7 @@
 </style>
 
 {#if attachment}
-  <div class="composer-attachment">
+  <div class="wrapper">
     <div class="file-item">
       <div class="file-info">
         {#if !attachment.error}

components/composer/src/components/Attachment.svelte

@@ -1,3 +1,5 @@
+<svelte:options tag="nylas-contacts-search" immutable={true} />
+
 <script lang="ts">
   import { debounce, isValidEmail } from "../lib/utils";
   import { tick } from "svelte";
@@ -14,7 +16,6 @@
   export let single: boolean = false;
   export let change: ChangeCallback | void;
   export let show_dropdown: boolean = true;
-  export let id: string;
 
   let selectedContacts: Participant[] = [];
   let term: string = ""; // TODO: rename to "term"
@@ -325,7 +326,6 @@
     {#if (single && !selectedContacts.length) || !single}
       <form on:submit|preventDefault={handleSubmit} class="search-form">
         <input
-          {id}
           data-cy="contacts-search-field"
           type="text"
           name="email"

components/composer/src/components/ContactsSearch.svelte

@@ -1,5 +1,7 @@
+<svelte:options tag="nylas-composer-datepicker-modal" />
+
 <script type="ts">
-  import "../../../datepicker/src/Datepicker.wc.svelte"; // TODO: for local development. This'll update your bundle on commons changes.
+  import "../../../datepicker/src/Datepicker.svelte"; // TODO: for local development. This'll update your bundle on commons changes.
   import CloseIcon from "../assets/close.svg";
   import type {
     DatepickerCallback,

components/composer/src/components/DatepickerModal.svelte

@@ -1,10 +1,12 @@
+<svelte:options tag="nylas-html-editor" />
+
 <script lang="ts">
   import { defaultActions } from "../lib/html-editor";
   import type { ReplaceFields, ToolbarItem } from "@commons/types/Composer";
 
   export let onchange = (_html: string) => Promise.resolve({});
   export let html = "";
-  export let show_editor_toolbar: boolean;
+  export let show_editor_toolbar = true;
   export let replace_fields: ReplaceFields[] | null = null;
 
   let container: HTMLDivElement;