add example that uses named param from route

floodfx · Oct 2, 2022 · cc82780 · cc82780
1 parent b7ca83f
commit cc82780
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git a/packages/examples/dist/liveviewjs-examples.d.ts b/packages/examples/dist/liveviewjs-examples.d.ts
@@ -125,6 +125,8 @@ declare const decarbLiveView: liveviewjs.LiveView<{
  */
 declare const xkcdLiveView: liveviewjs.LiveView<liveviewjs.AnyLiveContext, liveviewjs.AnyLiveEvent, liveviewjs.AnyLiveInfo>;
 
+declare const helloNameLiveView: liveviewjs.LiveView<liveviewjs.AnyLiveContext, liveviewjs.AnyLiveEvent, liveviewjs.AnyLiveInfo>;
+
 declare const helloToggleEmojiLiveView: liveviewjs.LiveView<liveviewjs.AnyLiveContext, liveviewjs.AnyLiveEvent, liveviewjs.AnyLiveInfo>;
 
 declare type MyContext = {
@@ -330,4 +332,4 @@ interface RouteDetails {
 }
 declare const routeDetails: RouteDetails[];
 
-export { FootprintData, FootprintUpdateInfo, PaginateOptions, RouteDetails, SortOptions, autocompleteLiveView, booksLiveView, counterLiveView, dashboardLiveView, decarbLiveView, helloToggleEmojiLiveView, jsCmdsLiveView, paginateLiveView, photosLiveView, printLiveView, routeDetails, rtCounterLiveView, searchLiveView, serversLiveView, sortLiveView, volumeLiveView, volunteerLiveView, xkcdLiveView };
+export { FootprintData, FootprintUpdateInfo, PaginateOptions, RouteDetails, SortOptions, autocompleteLiveView, booksLiveView, counterLiveView, dashboardLiveView, decarbLiveView, helloNameLiveView, helloToggleEmojiLiveView, jsCmdsLiveView, paginateLiveView, photosLiveView, printLiveView, routeDetails, rtCounterLiveView, searchLiveView, serversLiveView, sortLiveView, volumeLiveView, volunteerLiveView, xkcdLiveView };
diff --git a/packages/examples/dist/liveviewjs-examples.js b/packages/examples/dist/liveviewjs-examples.js
@@ -1733,6 +1733,17 @@ function today(path) {
     });
 }
 
+const helloNameLiveView = liveviewjs.createLiveView({
+    mount: (socket, _, params) => {
+        var _a;
+        socket.assign({ name: (_a = params.name) !== null && _a !== void 0 ? _a : "World" });
+    },
+    render: (context) => {
+        const { name } = context;
+        return liveviewjs.html `👋 ${name}! `;
+    },
+});
+
 const helloToggleEmojiLiveView = liveviewjs.createLiveView({
     mount: (socket) => {
         socket.assign({ useEmoji: false });
@@ -3130,6 +3141,7 @@ exports.booksLiveView = booksLiveView;
 exports.counterLiveView = counterLiveView;
 exports.dashboardLiveView = dashboardLiveView;
 exports.decarbLiveView = decarbLiveView;
+exports.helloNameLiveView = helloNameLiveView;
 exports.helloToggleEmojiLiveView = helloToggleEmojiLiveView;
 exports.jsCmdsLiveView = jsCmdsLiveView;
 exports.paginateLiveView = paginateLiveView;

diff --git a/packages/examples/dist/liveviewjs-examples.mjs b/packages/examples/dist/liveviewjs-examples.mjs
@@ -1731,6 +1731,17 @@ function today(path) {
     });
 }
 
+const helloNameLiveView = createLiveView({
+    mount: (socket, _, params) => {
+        var _a;
+        socket.assign({ name: (_a = params.name) !== null && _a !== void 0 ? _a : "World" });
+    },
+    render: (context) => {
+        const { name } = context;
+        return html `👋 ${name}! `;
+    },
+});
+
 const helloToggleEmojiLiveView = createLiveView({
     mount: (socket) => {
         socket.assign({ useEmoji: false });
@@ -3123,4 +3134,4 @@ const routeDetails = [
     },
 ];
 
-export { autocompleteLiveView, booksLiveView, counterLiveView, dashboardLiveView, decarbLiveView, helloToggleEmojiLiveView, jsCmdsLiveView, paginateLiveView, photosLiveView, printLiveView, routeDetails, rtCounterLiveView, searchLiveView, serversLiveView, sortLiveView, volumeLiveView, volunteerLiveView, xkcdLiveView };
+export { autocompleteLiveView, booksLiveView, counterLiveView, dashboardLiveView, decarbLiveView, helloNameLiveView, helloToggleEmojiLiveView, jsCmdsLiveView, paginateLiveView, photosLiveView, printLiveView, routeDetails, rtCounterLiveView, searchLiveView, serversLiveView, sortLiveView, volumeLiveView, volunteerLiveView, xkcdLiveView };
diff --git a/packages/examples/src/liveviews/hello/helloName.ts b/packages/examples/src/liveviews/hello/helloName.ts
@@ -0,0 +1,11 @@
+import { createLiveView, html } from "liveviewjs";
+
+export const helloNameLiveView = createLiveView({
+  mount: (socket, _, params) => {
+    socket.assign({ name: params.name ?? "World" });
+  },
+  render: (context) => {
+    const { name } = context;
+    return html`👋 ${name}! `;
+  },
+});
diff --git a/packages/examples/src/rollupEntry.ts b/packages/examples/src/rollupEntry.ts
@@ -5,6 +5,7 @@ export * from "./liveviews/counter/realtime";
 export * from "./liveviews/dashboard";
 export * from "./liveviews/decarbonize";
 export * from "./liveviews/fetch";
+export * from "./liveviews/hello/helloName";
 export * from "./liveviews/hello/helloToggleEmoji";
 export * from "./liveviews/jsCommands";
 export * from "./liveviews/liveSearch";