FEEDBACK_PACKET_1.md

Feedback Packet 1

The intention of these "packets" will be to highlight one or more workflows or feature sets in a way that doesn't require a large time commitment to test and offer feedback on. The aim is to drop new feedback packets at regular intervals while we incorporate feedback and iterate.

Why "packets"? I got the idea for the name from the TTRPG industry where they often use play test content "packets" to gather feedback.

If you are able to follow the guide outlined below, gather your thoughts and then offer some feedback that would be most appreciated.

Installation

mkdir test-packet
cd test-packet
npm init -f
npm i @podium/element @podium/podlet-server

Edit your package.json file and add "type": "module", to enable esm support.

Running the server

npx @podium/podlet-server dev

And visit http://localhost:8080 and you should be redirected to the podlet's manifest file.

Building a simple podlet, step by step

Step 1. The content route

Create a content.js file in the test-packet folder. Inside this file, we need to export a Lit custom element which will be automatically server rendered and hydrated client side.

Here is an example of a basic component with some simple markup in it.

// content.js
import { html } from "lit";
import { PodiumElement } from "@podium/element";

export default class Content extends PodiumElement {
  render() {
    return html`
      <section>
        <div>
          <h2>How much money?</h2>
          <p>Most likely, a lot</p>
          <div>
            <a href="/">Buy and Sell</a>
          </div>
        </div>
      </section>
    `;
  }
}

Fire up the server again

npx @podium/podlet-server dev

And visit http://localhost:8080

Step 2. The fallback route

Adding a fallback is much the same. Define a component in the file fallback.js

// content.js
import { html } from "lit";
import { PodiumElement } from "@podium/element";

export default class Fallback extends PodiumElement {
  render() {
    return html`<div>Ooops! Something went wrong</div>`;
  }
}

You should now be able to visit http://localhost:8080 and then add /fallback to the end of the url to get the fallback route.

Step 3. Server side data

In most cases, you'll need some kind of server side data in your component. To do so, define a file called server.js and call the setContentState function. Pass it a function that responds with data. This function will be called on each request.

// server.js
export default async function server(app) {
  app.setContentState(async (req) => {
    return [
        { name: "Norway" },
        { name: "Sweden" },
        { name: "Finland" },
        { name: "Denmark" },
        { name: "New Zealand??" },
    ]
  });
}

And then back in content.js you can access this data using this.initialState.

// content.js
import { html } from "lit";
import { PodiumElement } from "@podium/element";

export default class Content extends PodiumElement {
  render() {
    return html`
      <section>
        <h1>List of countries</h1>
        <ul>
            ${this.initialState.map(({ name }) => html`<li>${name}</li>`)}
        </ul>
      </section>
    `;
  }
}

There is a matching setFallbackState function you can call if you need data in your fallback.

Feedback

Send us you feedback which ever way works best for you. DM, in the podium-labs channel, email. Happy to receive it.