위젯에서 인라인 스타일 전체 제거

penxle · Nov 21, 2024 · 5e510cf · 5e510cf
1 parent 394b682
commit 5e510cf
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 33 deletions.
diff --git a/sdks/browser-sdk/src/App.svelte b/sdks/browser-sdk/src/App.svelte
@@ -1,16 +1,15 @@
-<svelte:options customElement={{ tag: 'rdbl-widget' }} />
-
 <script lang="ts">
   import { trpc } from './trpc';
   import Widget from './Widget.svelte';
 
   type Props = {
-    'site-id': string;
+    dom: HTMLElement;
+    siteId: string;
   };
 
-  let { 'site-id': siteId }: Props = $props();
+  let { dom, siteId }: Props = $props();
 </script>
 
 {#await trpc.widget.site.query({ siteId }) then site}
-  <Widget {site} />
+  <Widget {dom} {site} />
 {/await}
diff --git a/sdks/browser-sdk/src/Widget.svelte b/sdks/browser-sdk/src/Widget.svelte
@@ -11,6 +11,7 @@
   import mixpanel from 'mixpanel-browser';
   import { onMount, tick, untrack } from 'svelte';
   import { fly, scale } from 'svelte/transition';
+  import viteStyle from 'virtual:style.css?inline';
   import { z } from 'zod';
   import ArrowUpIcon from '~icons/lucide/arrow-up';
   import IconChevronLeft from '~icons/lucide/chevron-left';
@@ -20,6 +21,7 @@
   import IconHeadset from '~icons/lucide/headset';
   import IconSquareArrowOurUpRight from '~icons/lucide/square-arrow-out-up-right';
   import IconX from '~icons/lucide/x';
+  import appStyle from './app.css?inline';
   import ReadableLogo from './assets/readable-logo.svg';
   import Sparkles from './assets/Sparkles.svelte';
   import { BOT_MESSAGE } from './assets/strings';
@@ -30,17 +32,28 @@
   import type { TRPCOutput } from './trpc';
 
   type Props = {
+    dom: HTMLElement;
     site: TRPCOutput['widget']['site'];
   };
 
-  let { site }: Props = $props();
+  let { dom, site }: Props = $props();
+
+  $effect(() => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(appStyle + viteStyle);
+    sheet.insertRule(`:host { --widget-theme-color: ${site.themeColor}; --widget-theme-color-2: ${themeColor2} }`);
+
+    if (dom.shadowRoot) {
+      dom.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  });
+
+  const themeColor2 = $derived(new TinyColor(site.themeColor).spin(26).toString());
 
   let popoverEl: HTMLDivElement;
   let open = $state(false);
   let expanded = $state(false);
 
-  const themeColor2 = $derived(new TinyColor(site.themeColor).spin(26).toString());
-
   const selectors = [
     'title',
     'h1',
@@ -69,11 +82,8 @@
     const topLayerElement = topLayerElements.at(-1) ?? null;
     if (topLayerElement !== lastTopLayerElement) {
       lastTopLayerElement = topLayerElement;
-      const widgetEl = document.querySelector('rdbl-widget');
-      if (widgetEl) {
-        (topLayerElement ?? document.body).append(widgetEl);
-        popoverEl.showPopover();
-      }
+      (topLayerElement ?? document.body).append(dom);
+      popoverEl.showPopover();
     }
 
     try {
@@ -149,6 +159,7 @@
     // textarea 높이 자동 조정
     chatFormTextareaEl.style.height = 'auto';
     chatFormTextareaEl.style.height = `${chatFormTextareaEl.scrollHeight}px`;
+    chatFormTextareaEl.style.maxHeight = `${textareaLineHeightPx * 5}px`;
   });
 
   const {
@@ -290,8 +301,6 @@
   >
     {#if open}
       <div
-        style:--widget-theme-color={site.themeColor}
-        style:--widget-theme-color-2={themeColor2}
         class={center({
           position: 'absolute',
           inset: '0',
@@ -308,8 +317,6 @@
       </div>
     {:else}
       <div
-        style:--widget-theme-color={site.themeColor}
-        style:--widget-theme-color-2={themeColor2}
         class={center({
           position: 'absolute',
           inset: '0',
@@ -327,11 +334,7 @@
   </button>
 
   {#if open}
-    <div
-      style:--widget-theme-color={site.themeColor}
-      style:--widget-theme-color-2={themeColor2}
-      class={css({ display: 'contents' })}
-    >
+    <div class={css({ display: 'contents' })}>
       <div
         class={css(
           {
@@ -673,7 +676,6 @@
                 <textarea
                   bind:this={chatFormTextareaEl}
                   name="question"
-                  style:max-height={`${textareaLineHeightPx * 5}px`}
                   class={css({
                     flexGrow: '1',
                     paddingLeft: '14px',

diff --git a/sdks/browser-sdk/src/script.ts b/sdks/browser-sdk/src/script.ts
@@ -1,8 +1,8 @@
 import '@readable/lib/dayjs';
-import './App.svelte';
 
 import mixpanel from 'mixpanel-browser';
-import styles from './app.css?inline';
+import { mount } from 'svelte';
+import App from './App.svelte';
 
 mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, {
   api_host: 'https://t.rdbl.app',
@@ -25,10 +25,14 @@ mixpanel.register({
 });
 
 const dom = document.createElement('rdbl-widget');
-dom.setAttribute('site-id', siteId);
-
-const sheet = new CSSStyleSheet();
-sheet.replaceSync(styles);
-dom.shadowRoot?.adoptedStyleSheets.push(sheet);
+const shadow = dom.attachShadow({ mode: 'open' });
+
+mount(App, {
+  target: shadow,
+  props: {
+    dom,
+    siteId,
+  },
+});
 
 document.body.append(dom);
diff --git a/sdks/browser-sdk/src/vite/css.js b/sdks/browser-sdk/src/vite/css.js
@@ -0,0 +1,38 @@
+/** @returns {import('vite').Plugin[]} */
+export const css = () => {
+  return [
+    {
+      name: 'css:inline',
+      enforce: 'post',
+
+      resolveId(id) {
+        if (id.endsWith('virtual:style.css?inline')) {
+          return '\u0000css:style.js';
+        }
+      },
+
+      load(id) {
+        if (id === '\u0000css:style.js') {
+          return 'export default __CSS_STYLE_MARKER__';
+        }
+      },
+
+      generateBundle(_, bundle) {
+        let css = '';
+        for (const [name, chunk] of Object.entries(bundle)) {
+          if (name === 'style.css' && chunk.type === 'asset') {
+            css = chunk.source;
+          }
+        }
+
+        for (const [name, chunk] of Object.entries(bundle)) {
+          if (name === 'script.js' && chunk.type === 'chunk') {
+            chunk.code = chunk.code.replaceAll('__CSS_STYLE_MARKER__', JSON.stringify(css));
+          }
+        }
+
+        delete bundle['style.css'];
+      },
+    },
+  ];
+};
diff --git a/sdks/browser-sdk/svelte.config.js b/sdks/browser-sdk/svelte.config.js
@@ -3,9 +3,6 @@ import { sveltePreprocess } from 'svelte-preprocess';
 /** @type {import('@sveltejs/kit').Config} */
 export default {
   preprocess: sveltePreprocess(),
-  compilerOptions: {
-    customElement: true,
-  },
   kit: {
     alias: {
       '@/*': '../../apps/api/src/*',

diff --git a/sdks/browser-sdk/vite.config.ts b/sdks/browser-sdk/vite.config.ts
@@ -2,6 +2,7 @@ import path from 'node:path';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vite';
+import { css } from './src/vite/css';
 
 export default defineConfig({
   plugins: [
@@ -10,6 +11,7 @@ export default defineConfig({
       scale: 1,
       compiler: 'svelte',
     }),
+    css(),
   ],
   resolve: {
     alias: {
@@ -18,6 +20,7 @@ export default defineConfig({
   },
   build: {
     target: 'es2020',
+    cssCodeSplit: false,
     lib: {
       name: 'Readable',
       entry: './src/script.ts',