Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update svelte config to compile web components and svelte components #234

Closed
wants to merge 9 commits into from
Closed

Update svelte config to compile web components and svelte components #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6f0c583
Rollup config changes
heatlikeheatwave Nov 30, 2021
0e577ea
Converted more web components to svelte components
heatlikeheatwave Nov 30, 2021
8beb397
Removing main.ts for svelte components
heatlikeheatwave Nov 30, 2021
bd1cb6d
Moved svelte components to commons
heatlikeheatwave Nov 30, 2021
e857f64
lowercase component names for web components in main.ts files
heatlikeheatwave Nov 30, 2021
73a55e6
Moved datepicker and contacts-search back to components dir
heatlikeheatwave Dec 1, 2021
645384b
Imported NError to all components
heatlikeheatwave Dec 2, 2021
88b885d
Removed get_current_component from htmleditor
heatlikeheatwave Dec 2, 2021
3c952b0
Separated composer svelte components out and created css files; added…
heatlikeheatwave Dec 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ...mponents/ContactImage/ContactImage.svelte → commons/src/components/ContactImage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<svelte:options tag="nylas-contact-image" />

<script>
import { ContactAvatarStore } from "@commons";
import { beforeUpdate } from "svelte/internal";
Expand Down
2 changes: 0 additions & 2 deletions commons/src/components/ErrorMessage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<svelte:options tag="nylas-message-error" />

<script>
export let error_message = "Uh oh! Looks like an error occurred";
</script>
Expand Down
2 changes: 0 additions & 2 deletions commons/src/components/MessageBody.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
2 changes: 0 additions & 2 deletions commons/src/components/NError.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 0 additions & 2 deletions commons/src/components/Tooltip.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
4 changes: 2 additions & 2 deletions commons/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment on lines +47 to +48
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if this is the right change to have made here

5 changes: 5 additions & 0 deletions commons/src/methods/appendStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default function setShadowStyle(host: any, styleContent: string): void {
const style = document.createElement("style");
style.innerHTML = styleContent;
host.shadowRoot.appendChild(style);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would probably be helpful to leave a comment or link to the comment that suggested this workaround. It seems like in order to retain the functionality of svelte components, we have to lose the scoped component styles feature. Since this change seems to be more permanent (I don't see interest from svelte team to fix this in the near future) it'd be nice to hear thoughts from the rest of the team.

Essentially, I think this means:

  1. all child svelte component styles need to be in their own file
  2. child component styles can now conflict since they're not scoped by the compiler
  3. child components lose they're reusability since we have to inject styles into their specific parent shadow dom

cc: @philrenaud @pooja169usp @ozsivanov @AaronDDM

12 changes: 5 additions & 7 deletions components/agenda/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" };
3 changes: 2 additions & 1 deletion components/agenda/src/Agenda.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
getEventDispatcher,
} from "@commons/methods/component";
import type { EventPosition } from "./methods/position";
import NError from "@commons/components/NError.svelte";
import { populatePositionMap, updateEventPosition } from "./methods/position";
import { getDynamicEndTime, getDynamicStartTime } from "./methods/time";
import type { AgendaProperties } from "@commons/types/Nylas";
Expand Down Expand Up @@ -1313,7 +1314,7 @@
}
</style>

<nylas-error {id} />
<NError {id} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be imported in now. Caught an error when yarn start.
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Imported NError to all the components, this should be resolved now. Thanks for catching this!


{#if themeUrl}
<link rel="stylesheet" href={themeUrl} />
Expand Down
4 changes: 2 additions & 2 deletions components/agenda/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions components/availability/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" };
15 changes: 8 additions & 7 deletions components/availability/src/Availability.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -42,8 +42,9 @@
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 NError from "@commons/components/NError.svelte";
import {
getTimeString,
getCondensedTimeString,
Expand Down Expand Up @@ -1488,9 +1489,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}
Expand Down Expand Up @@ -1760,7 +1761,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">
Expand All @@ -1785,7 +1786,7 @@
</div>
</div>
{#if hasError}
<nylas-message-error />
<ErrorMessage />
{/if}
</main>
{/if}
2 changes: 1 addition & 1 deletion components/availability/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "@commons/define-component-patch";
import availability from "./Availability.svelte";
import availability from "./availability.svelte";

export default availability;
16 changes: 8 additions & 8 deletions components/composer/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" };
35 changes: 16 additions & 19 deletions components/composer/src/Composer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<svelte:options tag="nylas-composer" immutable />

<script lang="ts">
import "./components/HTMLEditor.svelte";
import "./components/AlertBar.svelte";
import "./components/Attachment.svelte";
import "./components/DatepickerModal.svelte";
import "../../contacts-search/src/ContactsSearch.svelte";
import HTMLEditor from "./components/HTMLEditor.svelte";
import AlertBar from "./components/AlertBar.svelte";
import Attachment from "./components/Attachment.svelte";
import DatepickerModal from "./components/DatepickerModal.svelte";
import LoadingIcon from "./assets/loading.svg";
import "../../contacts-search/src/contacts-search.svelte";
import NError from "@commons/components/NError.svelte";
import {
ManifestStore,
sendMessage,
Expand Down Expand Up @@ -585,7 +586,7 @@
}
</style>

<nylas-error {id} />
<NError {id} />

{#if themeUrl}
<link
Expand Down Expand Up @@ -724,7 +725,7 @@
{/if}

<!-- HTML Editor -->
<nylas-html-editor
<HTMLEditor
html={$message.body || template}
onchange={handleBodyChange}
replace_fields={_this.replace_fields}
Expand All @@ -736,7 +737,7 @@
<div class="attachments-caption">Attachments:</div>

{#each $attachments as fileAttachment}
<nylas-composer-attachment
<Attachment
attachment={fileAttachment}
remove={handleRemoveFile}
/>
Expand Down Expand Up @@ -783,29 +784,25 @@
</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}
<nylas-composer-alert-bar
type="info"
dismissible={true}
ondismiss={removeSchedule}
>
<AlertBar type="info" dismissible={true} ondismiss={removeSchedule}>
Send scheduled for
<span>{formatDate(new Date(datepickerTimestamp))}</span>
</nylas-composer-alert-bar>
</AlertBar>
{/if}
<!-- Alerts -->
{#if sendError}
<nylas-composer-alert-bar type="danger" dismissible={true}>
<AlertBar type="danger" dismissible={true}>
Error: Failed to send the message.
</nylas-composer-alert-bar>
</AlertBar>
{/if}
{#if sendSuccess}
<nylas-composer-alert-bar type="success" dismissible={true}>
<AlertBar type="success" dismissible={true}>
Message sent successfully!
</nylas-composer-alert-bar>
</AlertBar>
{/if}
{/if}
</div>
Expand Down
79 changes: 7 additions & 72 deletions components/composer/src/components/AlertBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<svelte:options tag="nylas-composer-alert-bar" />

<script>
import setShadowStyle from "@commons/methods/appendStyles";

const composer = document.querySelector("nylas-composer");
if (composer) {
setShadowStyle(composer, '@import "./styles/alertbar.css"');
}

export let type = "primary";
export let dismissible = true;
export let visible = true;
Expand All @@ -12,76 +17,6 @@
};
</script>

<style lang="scss">
.alert-bar {
padding: var(--composer-outer-padding, 15px);
text-align: center;
font-size: var(--composer-font-size-small, 12px);
border-bottom-left-radius: var(--composer-border-color, #f7f7f7-radius);
border-bottom-right-radius: var(--composer-border-radius, 6px);
&__container {
display: flex;
align-items: center;
justify-content: between;
}
&__text {
flex-grow: 1;
}
&__close {
outline: 0;
border: 0;
background: none;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
&:hover {
opacity: 1;
}
}
*:focus {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
// Modifiers
&.success {
background: var(
--composer-success-light-color,
var(--composer-primary-color, #5c77ff)
);
color: var(
--composer-success-color,
var(--composer-background-color, white)
);
.alert-bar__close {
color: var(
--composer-success-color,
var(--composer-background-color, white)
);
}
}
&.danger {
background: var(--composer-danger-light-color, #ffe3e3);
color: var(--composer-danger-color, #ff5c5c);
.alert-bar__close {
color: var(--composer-danger-color, #ff5c5c);
}
}
&.info {
background: var(
--composer-info-light-color,
var(--composer-primary-light-color, #f0f2ff)
);
color: var(--composer-info-color, var(--composer-primary-color, #5c77ff));
.alert-bar__close {
color: var(
--composer-info-color,
var(--composer-primary-color, #5c77ff)
);
}
}
}
</style>

{#if visible}
<div
class="alert-bar"
Expand Down
Loading