Update svelte config to compile web components and svelte components

commons/src/components/ContactImage/ContactImage.svelte → commons/src/components/ContactImage.svelte

@@ -1,5 +1,3 @@
-<svelte:options tag="nylas-contact-image" />
-
 <script>
   import { ContactAvatarStore } from "@commons";
   import { beforeUpdate } from "svelte/internal";

commons/src/components/ErrorMessage.svelte

@@ -1,5 +1,3 @@
-<svelte:options tag="nylas-message-error" />
-
 <script>
   export let error_message = "Uh oh! Looks like an error occurred";
 </script>

commons/src/components/MessageBody.svelte

@@ -1,5 +1,3 @@
-<svelte:options tag="nylas-message-body" />
-
 <!-- This component is being used to render Message body in Email component. 
   This is to ensure the styles in the html message body are encapsulated and 
   does not affect the global component enclosing it -->

commons/src/components/NError.svelte

@@ -1,5 +1,3 @@
-<svelte:options tag="nylas-error" immutable={true} />
-
 <script lang="ts">
   import { ErrorStore } from "../store/error";
   import type { NError } from "@commons/types/Nylas";

commons/src/components/Tooltip.svelte

@@ -1,5 +1,3 @@
-<svelte:options tag="nylas-tooltip" />
-
 <script lang="ts">
   import { get_current_component } from "svelte/internal";
   import { getEventDispatcher } from "@commons/methods/component";

commons/src/index.ts

@@ -44,5 +44,5 @@ 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 _;
+import NError from "./components/NError.svelte";
+void NError;

components/agenda/rollup.config.js

@@ -1,10 +1,8 @@
-import config, { svelteConfig } from "../../rollup.common.config";
-import svelte from "rollup-plugin-svelte";
+import config, {
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
+} from "../../rollup.common.config";
 
-config.plugins.unshift(
-  svelte({
-    ...svelteConfig,
-  }),
-);
+config.plugins.unshift(svelteWebComponentsConfig, svelteComponentsConfig);
 
 export default { ...config, input: "src/main.ts" };

components/agenda/src/Agenda.svelte

@@ -1313,7 +1313,7 @@
   }
 </style>
 
-<nylas-error {id} />
+<NError {id} />
 
 {#if themeUrl}
   <link rel="stylesheet" href={themeUrl} />

components/agenda/src/main.ts

@@ -1,4 +1,4 @@
 import "@commons/define-component-patch";
-import Agenda from "./Agenda.svelte";
+import agenda from "./agenda.svelte";
 
-export default Agenda;
+export default agenda;

components/availability/rollup.config.js

@@ -1,13 +1,13 @@
-import config, { svelteConfig } from "../../rollup.common.config";
-import svelte from "rollup-plugin-svelte";
+import config, {
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
+} from "../../rollup.common.config";
 import svelteSVG from "rollup-plugin-svelte-svg";
 
-config.plugins.unshift(svelteSVG());
-
 config.plugins.unshift(
-  svelte({
-    ...svelteConfig,
-  }),
+  svelteSVG(),
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
 );
 
 export default { ...config, input: "src/main.ts" };

components/availability/src/Availability.svelte

@@ -11,7 +11,7 @@
     CalendarStore,
     ErrorStore,
     ContactStore,
-  } from "../../../commons/src";
+  } from "@commons";
   import { handleError } from "@commons/methods/api";
   import { onMount, afterUpdate, tick } from "svelte";
   import { get_current_component } from "svelte/internal";
@@ -42,8 +42,8 @@
     Day,
     PreDatedTimeSlot,
   } from "@commons/types/Availability";
-  import "@commons/components/ContactImage/ContactImage.svelte";
-  import "@commons/components/ErrorMessage.svelte";
+  import ContactImage from "@commons/components/ContactImage.svelte";
+  import ErrorMessage from "@commons/components/ErrorMessage.svelte";
   import {
     getTimeString,
     getCondensedTimeString,
@@ -1488,9 +1488,9 @@
 </style>
 
 {#if manifest && manifest.error}
-  <nylas-error {id} />
+  <NError {id} />
 {:else if _this.participants.length === 0 && _this.calendars.length === 0}
-  <nylas-message-error
+  <ErrorMessage
     error_message="Please enter participants to see availability."
   />
 {:else}
@@ -1760,7 +1760,7 @@
         {#each displayedAttendees as attendee, idx}
           <div class={getAttendeeClass(attendee, idx)}>
             <div class="default-avatar">
-              <nylas-contact-image contact={attendee} />
+              <ContactImage contact={attendee} />
             </div>
             <div class="contact-details">
               <span class="name">
@@ -1785,7 +1785,7 @@
       </div>
     </div>
     {#if hasError}
-      <nylas-message-error />
+      <ErrorMessage />
     {/if}
   </main>
 {/if}

components/availability/src/main.ts

@@ -1,4 +1,4 @@
 import "@commons/define-component-patch";
-import availability from "./Availability.svelte";
+import availability from "./availability.svelte";
 
 export default availability;

components/composer/rollup.config.js

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

components/composer/src/Composer.svelte

@@ -4,8 +4,8 @@
   import "./components/HTMLEditor.svelte";
   import "./components/AlertBar.svelte";
   import "./components/Attachment.svelte";
-  import "./components/DatepickerModal.svelte";
-  import "../../contacts-search/src/ContactsSearch.svelte";
+  import DatepickerModal from "./components/DatepickerModal.svelte";
+  import ContactsSearch from "../../contacts-search/src/ContactsSearch.svelte";
   import LoadingIcon from "./assets/loading.svg";
   import {
     ManifestStore,
@@ -585,7 +585,7 @@
   }
 </style>
 
-<nylas-error {id} />
+<NError {id} />
 
 {#if themeUrl}
   <link
@@ -632,7 +632,7 @@
         <!-- Search -->
         <div class="contacts-wrapper">
           {#if _this.show_from}
-            <nylas-contacts-search
+            <ContactSearch
               placeholder="From:"
               single={true}
               change={handleContactsChange("from")}
@@ -641,7 +641,7 @@
             />
           {/if}
           {#if _this.show_to}
-            <nylas-contacts-search
+            <ContactSearch
               placeholder="To:"
               change={handleContactsChange("to")}
               contacts={to}
@@ -670,7 +670,7 @@
         </div>
         {#if _this.show_cc}
           <div class="cc-container">
-            <nylas-contacts-search
+            <ContactSearch
               placeholder="CC:"
               contacts={cc}
               value={$message.cc}
@@ -691,7 +691,7 @@
         {/if}
         {#if _this.show_bcc}
           <div class="cc-container">
-            <nylas-contacts-search
+            <ContactSearch
               placeholder="BCC:"
               contacts={bcc}
               value={$message.bcc}
@@ -783,7 +783,7 @@
       </footer>
       <!-- Date Picker Component -->
       {#if showDatepicker}
-        <nylas-composer-datepicker-modal close={datePickerClose} {schedule} />
+        <DatepickerModal close={datePickerClose} {schedule} />
       {/if}
       <!-- Datepicker Alert (if message is scheduled) -->
       {#if $message.send_at && !sendError && !sendSuccess}

components/composer/src/components/DatepickerModal.svelte

@@ -1,7 +1,5 @@
-<svelte:options tag="nylas-composer-datepicker-modal" />
-
 <script type="ts">
-  import "../../../datepicker/src/Datepicker.svelte"; // TODO: for local development. This'll update your bundle on commons changes.
+  import Datepicker from "../../../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,
@@ -95,7 +93,7 @@
     <span class="close" on:click={close}>
       <CloseIcon class="CloseIcon" />
     </span>
-    <nylas-datepicker {change} timepicker={true} min={new Date()} />
+    <Datepicker {change} timepicker={true} min={new Date()} />
     <button class="save-btn" on:click={submit}> Schedule send </button>
   </div>
 </div>

components/composer/src/main.ts

@@ -1,3 +1,3 @@
 import "@commons/define-component-patch";
-import Composer from "./Composer.svelte";
+import Composer from "./composer.svelte";
 export default Composer;

components/contact-list/rollup.config.js

@@ -1,10 +1,8 @@
-import config, { svelteConfig } from "../../rollup.common.config";
-import svelte from "rollup-plugin-svelte";
+import config, {
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
+} from "../../rollup.common.config";
 
-config.plugins.unshift(
-  svelte({
-    ...svelteConfig,
-  }),
-);
+config.plugins.unshift(svelteWebComponentsConfig, svelteComponentsConfig);
 
 export default { ...config, input: "src/main.ts" };

components/contact-list/src/ContactList.svelte → components/contact-list/src/contact-list.svelte

@@ -457,7 +457,7 @@
   }
 </style>
 
-<nylas-error {id} />
+<NError {id} />
 
 {#if themeUrl}
   <link rel="stylesheet" href={themeUrl} />

components/contact-list/src/main.ts

@@ -1,4 +1,4 @@
 import "@commons/define-component-patch";
-import ContactList from "./ContactList.svelte";
+import ContactList from "./contact-list.svelte";
 
 export default ContactList;

components/contacts-search/lib/utils.ts

@@ -1,4 +1,4 @@
-import type { CallbackDebounceFunction } from "@commons/types/ContactsSearch";
+import type { CallbackDebounceFunction } from "@commons/types/ContactsSearch.ts";
 
 export const debounce = (
   func: CallbackDebounceFunction,

components/contacts-search/rollup.config.js

@@ -1,12 +1,13 @@
-import config, { svelteConfig } from "../../rollup.common.config";
-import svelte from "rollup-plugin-svelte";
+import config, {
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
+} from "../../rollup.common.config";
 import svelteSVG from "rollup-plugin-svelte-svg";
 
-config.plugins.unshift(svelteSVG());
 config.plugins.unshift(
-  svelte({
-    ...svelteConfig,
-  }),
+  svelteSVG(),
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
 );
 
 export default { ...config, input: "src/main.ts" };

components/contacts-search/src/ContactsSearch.svelte

@@ -1,14 +1,12 @@
-<svelte:options tag="nylas-contacts-search" immutable={true} />
-
 <script lang="ts">
-  import { debounce, isValidEmail } from "../lib/utils";
+  import { debounce, isValidEmail } from "../lib/utils.ts";
   import { tick } from "svelte";
-  import type { Participant } from "@commons/types/Nylas";
+  import type { Participant } from "@commons/types/Nylas.ts";
   import type {
     FetchContactsCallback,
     ChangeCallback,
     BlurOptions,
-  } from "@commons/types/ContactsSearch";
+  } from "@commons/types/ContactsSearch.ts";
   export let contacts: Participant[] | FetchContactsCallback;
 
   export let value: Participant[] = [];

components/contacts-search/src/contacts-search.html

@@ -9,9 +9,9 @@
   <body>
     <script src="../index.js"></script>
 
-    <nylas-contacts-search></nylas-contacts-search>
+    <ContactSearch />
     <script>
-      const el = document.querySelector("nylas-contacts-search");
+      const el = document.querySelector("div.dropdown");
       el.onChange = () => {
         console.log("change handler");
       };

components/conversation/rollup.config.js

@@ -1,13 +1,13 @@
-import config, { svelteConfig } from "../../rollup.common.config";
-import svelte from "rollup-plugin-svelte";
+import config, {
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
+} from "../../rollup.common.config";
 import svelteSVG from "rollup-plugin-svelte-svg";
 
-config.plugins.unshift(svelteSVG());
-
 config.plugins.unshift(
-  svelte({
-    ...svelteConfig,
-  }),
+  svelteSVG(),
+  svelteWebComponentsConfig,
+  svelteComponentsConfig,
 );
 
 export default { ...config, input: "src/main.ts" };