Mark "lit" dependency as external to optimize bundle size and avoid issues when mixing Lit dependencies (#551)

* Mark "lit" dependency as external to optimize bundle size

The "lit" dependency is now marked as external, meaning it won't be bundled with the library. This improves code reuse if another library that uses chameleon also uses Lit, and can also fix some issues as it won't mix Lit versions for the development server (because Chameleon was bundling Lit in prod mode, but another libraries use Lit in "dev" mode for the dev server).

* Fix test runner not working

* Use minor versions for the "lit" peerDependency

Author: ncamera

package-lock.json

@@ -42,7 +42,6 @@
     "@genexus/markdown-parser": "~0.3.0",
     "@open-wc/lit-helpers": "0.7.0",
     "html5-qrcode": "^2.3.8",
-    "lit": "~3.3.0",
     "livekit-client": "~2.12.0",
     "mdast-util-from-markdown": "2.0.2",
     "monaco-editor": "^0.48.0",
@@ -78,6 +77,9 @@
     "typescript": "~5.4.5",
     "vite": "^5.2.10"
   },
+  "peerDependencies": {
+    "lit": "^3.3.0"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

package.json

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { when } from "lit/directives/when";
+import { when } from "lit/directives/when.js";
 
 import { tokenMap } from "../../../../common/utils";
 import type { ChatActionsRender, ChatMessage } from "../../types";

src/components/chat/internal/renders/actions.lit.ts

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { when } from "lit/directives/when";
+import { when } from "lit/directives/when.js";
 import type { MarkdownViewerCodeRenderOptions } from "../../../markdown-viewer/parsers/types";
 import type { ChatCallbacks, ChatCodeBlockRender } from "../../types";
 import { copy } from "../../utils";

src/components/chat/internal/renders/code-block.lit.ts

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { when } from "lit/directives/when";
+import { when } from "lit/directives/when.js";
 import { tokenMap } from "../../../../common/utils";
 import type {
   ChatCodeBlockRender,

src/components/chat/internal/renders/content.lit.ts

@@ -1,6 +1,6 @@
 import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined";
-import { when } from "lit/directives/when";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
 
 import type { ChMimeTypeFormatMap } from "../../../../common/mimeTypes/mime-types";
 import { tokenMap } from "../../../../common/utils";

src/components/chat/internal/renders/file.lit.ts

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { when } from "lit/directives/when";
+import { when } from "lit/directives/when.js";
 import { tokenMap } from "../../../../common/utils";
 import type { ChatMessageSource, ChatSourceRender } from "../../types";
 

src/components/chat/internal/renders/source.lit.ts

@@ -1,5 +1,5 @@
 import { html, nothing, type TemplateResult } from "lit";
-import { classMap } from "lit/directives/class-map";
+import { classMap } from "lit/directives/class-map.js";
 import { AlignType, Table } from "mdast";
 import { getLinkDefinition, setLinkDefinition } from "./link-resolver";
 import type { rawHTMLToJSX } from "./raw-html-to-jsx.lit";

src/components/markdown-viewer/parsers/renders.lit.ts

@@ -1,10 +1,12 @@
 import { Config } from "@stencil/core";
 import { OutputTarget } from "@stencil/core/internal";
-import { sass } from "@stencil/sass";
 import { reactOutputTarget } from "@stencil/react-output-target";
+import { sass } from "@stencil/sass";
 
 import { reactOutputExcludedComponents } from "./src/framework-integrations.ts";
 
+const isTesting = process.env.npm_lifecycle_script?.startsWith("stencil test");
+
 const outputTargets: OutputTarget[] = [
   {
     type: "dist",
@@ -47,6 +49,24 @@ export const config: Config = {
     // library's components.
     enableImportInjection: true
   },
+
+  // Don't apply external dependencies when running test, because Stencil won't
+  // be able resolve the imports
+  rollupPlugins: {
+    before: isTesting
+      ? []
+      : [
+          {
+            name: "external-deps",
+            options(options) {
+              return {
+                ...options,
+                external: [/^lit\/.*/]
+              };
+            }
+          }
+        ]
+  },
   testing: {
     browserArgs: ["--no-sandbox", "--disable-setuid-sandbox"],
     verbose: true,