Isolate side-effects

index.html

@@ -14,6 +14,7 @@
         </script>
         <script type="module">
             import { DPoPTokenProvider, ReactiveFetchManager } from "./dist/mod.js"
+            import "./dist/registerElements.js"
 
             /* Page functionality: Buttons */
             document.addEventListener("DOMContentLoaded", () =>

package.json

@@ -11,8 +11,13 @@
   "type": "module",
   "types": "./dist/mod.d.ts",
   "exports": {
-    ".": "./dist/mod.js"
+    ".": "./dist/mod.js",
+    "./registerElements": "./dist/registerElements.js"
   },
+  "sideEffects": [
+    "./dist/registerElements.js",
+    "./dist/reactive-fetch-worker.js"
+  ],
   "files": [
     "dist"
   ],

src/AuthorizationCodeFlow.ts

@@ -38,6 +38,8 @@ const html = `
  * Put on an HTML page and connect to a token provider to implement the Authorization Code Flow using a popup.
  *
  * @remarks
+ * This element is not {@link customElements.define defined} when importing the module. Import {@link registerElements} to define it.
+ *
  * See the {@link getCode} method for integrating this element into your application.
  *
  * The appearance of this web component can be customized from the hosting HTML by using {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::part CSS parts}.
@@ -245,5 +247,3 @@ export class AuthorizationCodeFlow extends HTMLElement {
         this.#cancelCodeRequest?.call(undefined, new CodeRequestCancelledError(this.#authorizationUri!))
     }
 }
-
-customElements.define("authorization-code-flow", AuthorizationCodeFlow)

src/IdpPicker.ts

@@ -102,5 +102,3 @@ export class IdpPicker extends HTMLElement {
         return await promise
     }
 }
-
-customElements.define("idp-picker", IdpPicker)

src/registerElements.ts

@@ -0,0 +1,23 @@
+/**
+ * Registers the Web Components (custom HTML elements) of this library.
+ *
+ * @example Importing as a module specifier
+ * ```js
+ * import "@solid/reactive-authentication/registerElements"
+ * ```
+ *
+ * @example Importing from a CDN
+ * ```html
+ * <script type="module" src="https://unpkg.com/@solid/reactive-authentication/dist/registerElements.js"></script>
+ * <authorization-code-flow></authorization-code-flow>
+ * <idp-picker></idp-picker>
+ * ```
+ *
+ * @module
+ */
+
+import { AuthorizationCodeFlow } from "./AuthorizationCodeFlow.js"
+import { IdpPicker } from "./IdpPicker.js"
+
+customElements.define("authorization-code-flow", AuthorizationCodeFlow)
+customElements.define("idp-picker", IdpPicker)

typedoc.json

@@ -1,4 +1,8 @@
 {
+    "entryPoints": [
+        "./src/mod.ts",
+        "./src/registerElements.ts"
+    ],
     "out": "./_site",
     "highlightLanguages": [
         "ts",