feat: Custom element correct registration and SSG/SSR support

vuesence · Feb 9, 2024 · 43dcec9 · 43dcec9
1 parent a4208d7
commit 43dcec9
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <title>Release Timeline</title>
   </head>
   <body class="dark">
-    <div id="app" />
+    <div id="release-timeline" />
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "release-timeline",
   "type": "module",
-  "version": "0.5.11",
+  "version": "0.5.23",
   "private": false,
   "source": "src/index.ts",
   "author": "Ruslan Makarov",

diff --git a/public/wc-demo.html b/public/wc-demo.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Release Timeline CDN demo</title>
     <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-    <script src="https://unpkg.com/release-timeline/dist/ce.umd.js"></script>
-    <!-- <script src="ce.umd.js"></script> -->
+    <script src="https://unpkg.com/release-timeline/dist/index.umd.js"></script>
     <link href="https://unpkg.com/release-timeline/dist/animated-background.css" rel="stylesheet" />
     <script>
       window.rt_options = {

diff --git a/src/App.vue b/src/App.vue
@@ -2,16 +2,17 @@
 import { ref } from "vue";
 
 import ReleaseTimeline from "./ReleaseTimeline.vue";
-import { DefaultOptions as options } from "./options";
+import { DefaultOptions } from "./options";
+import { mergeObjects } from "./utils";
 
-import "./css/animated-background.css";
+const props = defineProps({
+  initOptions: Object,
+  default: () => ({}),
+});
 
+const options = mergeObjects(DefaultOptions, props.initOptions);
 const key = ref(0);
 
-// configure options
-options.github.owner = "vuesence";
-options.github.repo = "release-timeline";
-
 function changeRepo() {
   const url = prompt("Please enter Github Repo url", "https://github.com/vitejs/vite.git");
   const pathParts = url.split("/").filter(part => part); // Remove empty parts

diff --git a/src/TimelineItemIssues.vue b/src/TimelineItemIssues.vue
@@ -32,7 +32,7 @@ const tabs = [
 ];
 
 if (props.options.display.release.defaultOpenTab) {
-  curTab.value = props.options.display.release.defaultOpenTab;
+  toggle(props.options.display.release.defaultOpenTab);
 }
 
 function toggle(_tab: string) {

diff --git a/src/index.ts b/src/index.ts
@@ -1,12 +1,19 @@
-import { defineCustomElement } from "vue";
-import ReleaseTimelineCE from "./ReleaseTimeline.ce.vue";
-import ReleaseTimeline from "./ReleaseTimeline.vue";
+import { createApp, defineCustomElement } from "vue";
 import { DefaultOptions } from "./options";
+import ReleaseTimeline from "./ReleaseTimeline.vue";
+import App from "./App.vue";
+
+if (globalThis.window) {
+  import("./ReleaseTimeline.ce.vue").then((module) => {
+    window.customElements.define("release-timeline", defineCustomElement(module));
+  });
+}
 
-// function initCE() {
-window.customElements.define("release-timeline", defineCustomElement(ReleaseTimelineCE));
-// }
+function mountRT(initOptions) {
+  const app = createApp(App, { initOptions });
+  app.mount("#release-timeline");
+}
 
-export { ReleaseTimeline, DefaultOptions };
+export { ReleaseTimeline, DefaultOptions, mountRT };
 
 export {};
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,13 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 
-const app = createApp(App);
-app.mount("#app");
+// configure options
+const initOptions = {
+  github: {
+    owner: "vuesence",
+    repo: "release-timeline",
+  },
+};
+
+const app = createApp(App, { initOptions });
+app.mount("#release-timeline");
diff --git a/src/options.ts b/src/options.ts
@@ -29,8 +29,8 @@ export const DefaultOptions = {
     span: 200,
   },
   display: {
-    animatedBackground: true,
-    animatedBackgroundForLightTheme: false,
+    // animatedBackground: true,
+    // animatedBackgroundForLightTheme: false,
     release: {
       name: true,
       username: true,
@@ -40,7 +40,7 @@ export const DefaultOptions = {
       hidePullUsername: false,
       hideCommitUsername: true,
       hideMergeCommits: true,
-      // defaultOpenTab: "pulls",
+      defaultOpenTab: "pulls",
     },
   },
 };
diff --git a/vite.config-lib.ts b/vite.config-lib.ts
@@ -22,6 +22,7 @@ export default defineConfig({
         globals: {
           vue: "Vue",
         },
+        inlineDynamicImports: true,
       },
     },
   },