Hey are the docs missing a build step for deno?

LiveViewJS Express is listening on port 9001!
GET http://localhost:9001/ - 2022-10-09T05:08:00.606Z
GET http://localhost:9001/favicon.ico - 2022-10-09T05:08:01.161Z
GET http://localhost:9001/counter - 2022-10-09T05:08:09.683Z
GET http://localhost:9001/js/index.js - 2022-10-09T05:08:09.703Z
[uncaught application error]: NotFoundError - No such file or directory (os error 2), stat 'public/js/index.js'

request: { url: "http://localhost:9001/js/index.js", method: "GET", hasBody: false }
response: { status: 404, type: undefined, hasBody: false, writable: true }

    at createHttpError (https://deno.land/x/[email protected]/httpError.ts:128:10)
    at send (https://deno.land/x/[email protected]/send.ts:279:13)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/example/index.ts:82:3
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/deno/server.ts:117:11
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/example/index.ts:58:3
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)

nothing happens when I click the counter buttons

I think a simple example on deno-deploy would be really cool, right now there's just a lot of boiler-plate to think about. I also think that using JSX could would be cool as well just wrapping the render method so something else can create the HTML string like https://hdot.dev/ or preact (https://www.npmjs.com/package/preact-render-to-string).

import { createLiveView, html } from "liveviewjs";

/**
 * A basic counter that increments and decrements a number.
 */
export const counterLiveView = createLiveView<
  { count: number }, // Define LiveView Context (a.k.a state)
  { type: "increment" } | { type: "decrement" } // Define LiveView Events
>({
  mount: (socket) => {
    // init state, set count to 0
    socket.assign({ count: 0 });
  },
  handleEvent: (event, socket) => {
    // handle increment and decrement events
    const { count } = socket.context;
    switch (event.type) {
      case "increment":
        socket.assign({ count: count + 1 });
        break;
      case "decrement":
        socket.assign({ count: count - 1 });
        break;
    }
  },
  render: (context) => {
    // render the view based on the state
    const { count } = context;
    return html`
      <div>
        <h1>Count is: ${count}</h1>
        <button phx-click="decrement">-</button>
        <button phx-click="increment">+</button>
      </div>
    `;
  },
});

serve({
  "/": counterLiveView,
})

Hey Donnie,

First of all, thanks for putting this together. Love it.

While playing around with the examples (and inspecting the code for the Todo MVC demo), I noticed there are no examples which fetch data externally via async/fetch operations. What's the recommended/planned way of doing so?

I feel as if mount, render, handleEvent and handleInfo should all optionally support async signatures, so that one can actually fetch/push data from/to external sources/apis.

I'm new to Liveview (thanks for referencing the pragmatic series), so still trying to wrap my head around some of the more advanced concepts.

Once again, thanks for bringing this to node.

The file here with the BroadcastChannelPubSub export, where is this used in the deno example?

https://github.com/floodfx/liveviewjs/blob/main/packages/deno/src/deno/broadcastChannelPubSub.ts

The autocomplete example in readme is linking to a 404 page: https://github.com/floodfx/liveviewjs/blob/main/packages/examples/src/liveviews/autocomplete

Currently the diff replies are sending all the dynamic and static parts of the live views instead of only sending the parts that have changed. That is, if only the 4th dynamic part has changed then the diff should only contain that key/value pair.

It appears the LiveView name is already in use via the Phoenix LiveView project. Will you consider changing the name so that users of both libraries can avoid confusion and get better search results?

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Patch Changes

• 08e4e41: Fix unsubscribe bug with undefined subscriber

@liveviewjs/[email protected]

Patch Changes

• Updated dependencies [08e4e41]
  • [email protected]

@liveviewjs/[email protected]

Patch Changes

• Updated dependencies [08e4e41]
  • [email protected]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Patch Changes

• 6318d39: Fix bug where handleInfo was not being awaited

@liveviewjs/[email protected]

Patch Changes

• Updated dependencies [6318d39]
  • [email protected]

@liveviewjs/[email protected]

Patch Changes

• Updated dependencies [6318d39]
  • [email protected]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Patch Changes

• c6f6985: Support Node16+ (add polyfills for fetch and structuredClone)

@liveviewjs/[email protected]

Patch Changes

• c6f6985: Support Node16+ (add polyfills for fetch and structuredClone)
• Updated dependencies [c6f6985]
  • [email protected]

@liveviewjs/[email protected]

Patch Changes

• c6f6985: Support Node16+ (add polyfills for fetch and structuredClone)
• Updated dependencies [c6f6985]
  • [email protected]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Patch Changes

• a927c16: Support path params in route
  • Core: Support path params in routes for HTTP and WS
  • Examples: Add "helloNameLiveView" example
  • Express / Deno: Update server integration to use matchRoute helper

@liveviewjs/[email protected]

Patch Changes

• a927c16: Support path params in route
  • Core: Support path params in routes for HTTP and WS
  • Examples: Add "helloNameLiveView" example
  • Express / Deno: Update server integration to use matchRoute helper
• Updated dependencies [a927c16]
  • [email protected]

@liveviewjs/[email protected]

Patch Changes

• a927c16: Support path params in route
  • Core: Support path params in routes for HTTP and WS
  • Examples: Add "helloNameLiveView" example
  • Express / Deno: Update server integration to use matchRoute helper
• Updated dependencies [a927c16]
  • [email protected]

I cannot get handleInfo() to run automatically when called from a callback (e.g. establishing a database connection).

I am using liveview 0.7.5. and node with express.

Putting this in mount():

setTimeout(()=>socket.sendInfo("from mount->setTimeout"),0);

Results in sendInfo() receiving the message after the next handleEvent().

export const myLiveView = createLiveView({
    mount: (socket) => {
        socket.assign({
            useEmoji: false,
        });
        setTimeout(()=>socket.sendInfo("from mount->setTimeout"),0);
    },
    handleEvent(event, socket) {
        socket.assign({ useEmoji: !socket.context.useEmoji });
    },
    handleInfo: (info, socket) => {
        console.log({info});
    },
    render: (context /* const */) => {
        const msg = context.useEmoji ? "hello" : "Hello World";
        
        return html`
            ${msg}
            <br/>
            <button phx-click="toggle">Toggle message</button>
            `;
    }
});