Skip to content

Commit

Permalink
Merge pull request #12 from floodfx/examples_index
Browse files Browse the repository at this point in the history 
Examples index
  • Loading branch information
@floodfx
floodfx authored Feb 1, 2022
2 parents 4b6f09a + 5b10b5b commit f407287
Show file tree
Hide file tree
Showing 30 changed files with 8,657 additions and 265 deletions.
76 changes: 42 additions & 34 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,74 +19,82 @@ This is still in very early PoC territory. You probably shouldn't put this into
### Show me some code! ⌨️
**Step 1** Implement a `LiveViewComponent`
```ts
import {html, LiveViewComponent, LiveViewContext, LiveViewExternalEventListener, LiveViewInternalEventListener,PhxSocket } from "liveviewjs";
import { SessionData } from "express-session";
import {html, BaseLiveViewComponent, LiveViewComponent, LiveViewExternalEventListener, LiveViewMountParams, LiveViewSocket } from "liveviewjs";

// define your component's data shape
export interface LightContext {
brightness: number;
}

// optionally define the events your component will respond to
export type LightEvent = "on" | "off";
// define the component events
export type LightEvent = "on" | "off" | "up" | "down";

// simple in memory database for the context
// production apps would use more durable system
const _db: { [key: string]: LightContext } = {};
// implement your component
export class LightLiveViewComponent extends BaseLiveViewComponent<LightContext, never> implements
LiveViewComponent<LightContext, never>,
LiveViewExternalEventListener<LightContext, LightEvent, never> {

// implement your LiveViewComponents
export class LightLiveViewComponent implements
LiveViewComponent<LightContext>,
LiveViewExternalEventListener<LightContext, "on", any>,
LiveViewExternalEventListener<LightContext, "off", any> {


// handle mount events - called on initial http request AND subsequent socket connections
mount(params: any, session: any, socket: PhxSocket) {
const ctx: LightContext = { brightness: 10 };
_db[socket.id] = ctx; // store the ctx by socket id to look up later
return { data: ctx };
// mount is called before html render on HTTP requests and
// when the socket is connected on the phx-join event
mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<LightContext>) {
// set the default value(s) for the component data
return { brightness: 10 };
};

// define and render the HTML for your LiveViewComponent
render(context: LiveViewContext<LightContext>) {
// the `html` function is a tagged template literal that
// allows LiveView to send back only the data that has changed
// based on user events - note the `phx-click` bindings on the
// buttons in the template
// Define and render the HTML for your LiveViewComponent
// This function is called after any context change and
// only diffs are sent back to the page to re-render
render(context: LightContext) {
const { brightness } = context;
return html`
<div id="light">
<h1>Front Porch Light</h1>
<h1>Front Porch Light </h1>
<div class="meter">
<span style="width: ${context.data.brightness} %>%">
${context.data.brightness}%
</span>
<div>${brightness}%</div>
<progress id="light_level" value="${brightness}" max="100">
</progress>
</div>
<button phx-click="off">
Off
</button>
<button phx-click="down">
Down
</button>
<button phx-click="up">
Up
</button>
<button phx-click="on">
On
</button>
</div>
`
};

// handle external events sent form client
handleEvent(event: LightEvent, params: any, socket: PhxSocket) {
const ctx = _db[socket.id]; // lookup current context by socket id
// Handle events sent back from the client... Events
// may update the state (context) of the component and
// cause a re-render
handleEvent(event: LightEvent, params: never, socket: LiveViewSocket<LightContext>) {
const ctx: LightContext = { brightness: socket.context.brightness };
switch (event) {
case 'off':
ctx.brightness = 0;
break;
case 'on':
ctx.brightness = 100;
break;
case 'up':
ctx.brightness = Math.min(ctx.brightness + 10, 100);
break;
case 'down':
ctx.brightness = Math.max(ctx.brightness - 10, 0);
break;
}
// udpate context by socket id
_db[socket.id] = ctx;
return { data: ctx };
return ctx;
}

}
Expand Down
130 changes: 81 additions & 49 deletions coverage/clover.xml
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,84 @@
<?xml version="1.0" encoding="UTF-8"?>
<coverage generated="1643089445215" clover="3.2.0">
<project timestamp="1643089445216" name="All files">
<metrics statements="43" coveredstatements="15" conditionals="17" coveredconditionals="0" methods="13" coveredmethods="5" elements="73" coveredelements="20" complexity="0" loc="43" ncloc="43" packages="1" files="1" classes="1"/>
<file name="index.ts" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/server/templates/index.ts">
<metrics statements="43" coveredstatements="15" conditionals="17" coveredconditionals="0" methods="13" coveredmethods="5"/>
<line num="8" count="1" type="stmt"/>
<line num="19" count="1" type="stmt"/>
<line num="21" count="1" type="stmt"/>
<line num="23" count="1" type="stmt"/>
<line num="24" count="0" type="cond" truecount="0" falsecount="3"/>
<line num="25" count="0" type="stmt"/>
<line num="27" count="0" type="cond" truecount="0" falsecount="1"/>
<line num="28" count="0" type="stmt"/>
<line num="31" count="0" type="stmt"/>
<line num="35" count="2" type="cond" truecount="0" falsecount="1"/>
<line num="36" count="0" type="stmt"/>
<line num="38" count="2" type="cond" truecount="0" falsecount="1"/>
<line num="39" count="0" type="stmt"/>
<line num="41" count="2" type="stmt"/>
<line num="44" count="1" type="stmt"/>
<line num="50" count="2" type="stmt"/>
<line num="51" count="2" type="stmt"/>
<line num="55" count="0" type="stmt"/>
<line num="56" count="0" type="cond" truecount="0" falsecount="1"/>
<line num="57" count="0" type="stmt"/>
<line num="59" count="0" type="cond" truecount="0" falsecount="1"/>
<line num="60" count="0" type="stmt"/>
<line num="63" count="0" type="stmt"/>
<line num="69" count="0" type="cond" truecount="0" falsecount="1"/>
<line num="70" count="0" type="stmt"/>
<line num="75" count="0" type="stmt"/>
<line num="76" count="0" type="cond" truecount="0" falsecount="2"/>
<line num="77" count="0" type="stmt"/>
<line num="81" count="0" type="cond" truecount="0" falsecount="2"/>
<line num="83" count="0" type="cond" truecount="0" falsecount="2"/>
<line num="84" count="0" type="stmt"/>
<line num="91" count="0" type="stmt"/>
<line num="94" count="0" type="stmt"/>
<line num="95" count="0" type="stmt"/>
<line num="101" count="0" type="stmt"/>
<line num="108" count="0" type="cond" truecount="0" falsecount="1"/>
<line num="109" count="0" type="stmt"/>
<line num="111" count="0" type="stmt"/>
<line num="115" count="2" type="stmt"/>
<line num="116" count="2" type="stmt"/>
<line num="117" count="2" type="stmt"/>
<line num="123" count="1" type="stmt"/>
<line num="124" count="2" type="stmt"/>
</file>
<coverage generated="1643683810006" clover="3.2.0">
<project timestamp="1643683810006" name="All files">
<metrics statements="51" coveredstatements="49" conditionals="14" coveredconditionals="11" methods="19" coveredmethods="18" elements="84" coveredelements="78" complexity="0" loc="51" ncloc="51" packages="4" files="5" classes="5"/>
<package name="examples.autocomplete">
<metrics statements="5" coveredstatements="4" conditionals="1" coveredconditionals="0" methods="2" coveredmethods="2"/>
<file name="data.ts" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/examples/autocomplete/data.ts">
<metrics statements="5" coveredstatements="4" conditionals="1" coveredconditionals="0" methods="2" coveredmethods="2"/>
<line num="3" count="1" type="stmt"/>
<line num="4" count="1" type="cond" truecount="0" falsecount="1"/>
<line num="5" count="0" type="stmt"/>
<line num="7" count="1001" type="stmt"/>
<line num="10" count="1" type="stmt"/>
</file>
</package>
<package name="examples.live-search">
<metrics statements="7" coveredstatements="7" conditionals="0" coveredconditionals="0" methods="5" coveredmethods="5"/>
<file name="data.ts" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/examples/live-search/data.ts">
<metrics statements="7" coveredstatements="7" conditionals="0" coveredconditionals="0" methods="5" coveredmethods="5"/>
<line num="12" count="1" type="stmt"/>
<line num="13" count="7" type="stmt"/>
<line num="16" count="1" type="stmt"/>
<line num="17" count="7" type="stmt"/>
<line num="20" count="1" type="stmt"/>
<line num="21" count="1" type="stmt"/>
<line num="24" count="1" type="stmt"/>
</file>
</package>
<package name="misc.erlang">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
<file name="Erlang.js" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/misc/erlang/Erlang.js">
<metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
</file>
<file name="index.ts" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/misc/erlang/index.ts">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
<line num="2" count="1" type="stmt"/>
<line num="4" count="1" type="stmt"/>
<line num="5" count="2" type="stmt"/>
<line num="7" count="2" type="stmt"/>
</file>
</package>
<package name="server.templates">
<metrics statements="35" coveredstatements="34" conditionals="13" coveredconditionals="11" methods="11" coveredmethods="10"/>
<file name="index.ts" path="/Users/donnie/src/github.com/floodfx/liveviewjs/src/server/templates/index.ts">
<metrics statements="35" coveredstatements="34" conditionals="13" coveredconditionals="11" methods="11" coveredmethods="10"/>
<line num="8" count="1" type="stmt"/>
<line num="19" count="1" type="stmt"/>
<line num="21" count="1" type="stmt"/>
<line num="23" count="1" type="cond" truecount="0" falsecount="1"/>
<line num="24" count="1" type="cond" truecount="0" falsecount="1"/>
<line num="25" count="0" type="stmt"/>
<line num="28" count="1" type="stmt"/>
<line num="32" count="14" type="cond" truecount="1" falsecount="0"/>
<line num="33" count="1" type="stmt"/>
<line num="35" count="13" type="cond" truecount="1" falsecount="0"/>
<line num="36" count="1" type="stmt"/>
<line num="38" count="12" type="stmt"/>
<line num="41" count="1" type="stmt"/>
<line num="47" count="32" type="stmt"/>
<line num="48" count="32" type="stmt"/>
<line num="53" count="25" type="cond" truecount="1" falsecount="0"/>
<line num="54" count="10" type="stmt"/>
<line num="59" count="15" type="stmt"/>
<line num="60" count="53" type="cond" truecount="2" falsecount="0"/>
<line num="61" count="10" type="stmt"/>
<line num="65" count="43" type="cond" truecount="2" falsecount="0"/>
<line num="67" count="4" type="cond" truecount="2" falsecount="0"/>
<line num="68" count="2" type="stmt"/>
<line num="75" count="8" type="stmt"/>
<line num="78" count="8" type="stmt"/>
<line num="79" count="2" type="stmt"/>
<line num="85" count="39" type="stmt"/>
<line num="92" count="15" type="cond" truecount="1" falsecount="0"/>
<line num="93" count="7" type="stmt"/>
<line num="95" count="15" type="stmt"/>
<line num="99" count="9" type="stmt"/>
<line num="100" count="14" type="stmt"/>
<line num="101" count="14" type="stmt"/>
<line num="107" count="1" type="stmt"/>
<line num="108" count="30" type="stmt"/>
</file>
</package>
</project>
</coverage>
Loading

0 comments on commit f407287

Please sign in to comment.