List things related to a resource with a custom display #119

jg10-mastodon-social · 2025-05-24T06:49:52Z

Partly addresses #43

This PR descoped to exclude rev, given this will involve changes very similar to rel. Covering rev in a separate PR will hopefully make both PRs easier to review.

elements/src/components/pos-list/pos-list.tsx

jg10-mastodon-social · 2025-05-24T06:57:14Z

elements/src/components/pos-list/pos-list.tsx

+    if (templateElement == null) {
+      this.error = "No template element found"
+    } else if (templateElement.content.childElementCount != 1) {
+      this.error = "Template element should only have one child, e.g. li"


The reason for this is that the component will provide resources to each child based on their index. Compared to #43 (comment) this gets rid of the intermediate pos-resource. However, it will still not be possible to have li nested directly within ul, given that pos-list lies between them.

One option would be to allow pos-list to be used as a customized built-in element, i.e. <ul is="pos-list"></ul>. I would need to look into whether/how stenciljs supports this.

Update: stenciljs does not support customized built-in elements stenciljs/core#4089 (comment)

What about assigning role="list"?

The issue I had in mind is that the only permitted parents for li are ul and ol (or menu). So if a dashboard user cares about correct HTML then I suppose they could use <div role="listitem" style="display:list-item"> I hadn't thought of that.

I've currently ignored correct HTML for this PR. In storybook I've used bare lis. Let me know if it's an issue.

angelo-v · 2025-05-24T11:42:44Z

elements/src/components/pos-list/pos-list.tsx

+
+  receiveResource = (resource: Thing) => {
+    this.items = []
+    if (this.rel) this.items = resource.relations().filter(relation => relation.predicate == this.rel).flatMap(relation => relation.uris);


I think instead of querying all relations and then filter Thing should provide a method to get the relation in question directly. Also is it limited to relations to other resources or could the predicate refer to literals as well?

Ok. I'll work on that. There'll be a similar method for rev. Literals are out of scope for this particular PR but will need to be revisited as part of #105 . I'll think about options to handle forward compatibility.

elements/src/components/pos-list/pos-list.tsx

angelo-v · 2025-05-24T11:47:59Z

elements/src/components/pos-list/pos-list.spec.tsx

+    });
+    expect(page.root).toEqualHtml(`
+          <pos-list rel="http://schema.org/video" />
+            <template><div>Test</div></template>


Why use template and not (named) slots?

https://stenciljs.com/docs/templating-jsx#slots

What happens within a list is that templated content gets repeated and the original template should never actually be rendered. Slots could be used but to me the semantics are all wrong. We're not actually slotting anything anywhere - we're using a template to create a new set of items.

jg10-mastodon-social · 2025-05-25T04:53:48Z

elements/src/components/pos-list/pos-list.tsx

+  async provideResource(event: SubscribeResourceEvent) {
+    event.stopPropagation();
+    this.provideQueue.push(event);
+    this.provideResources();


In contrast to pos-resource, pos-list is in control of the uris of children, so we don't need to store consumers and call them when uris change. However, we do still need to deal with race conditions where provideResource is called before this.os has been set, which is why I'm using a queue. We will eventually also need to deal with updating the children when this.items changes, but that's out of scope of this PR.

I did not get the need for the provide queue yet, tbh. Is there a respective test that fails if no queue is used that helps to highlight the problem?

Iguess, while this.os is not present the list should not start rendering anything. If it doesnt there is no chance of children requesting a resource. After that we could just provide the resource as soon as requested, without a queue?

elements/src/components/pos-list/pos-list.tsx

jg10-mastodon-social · 2025-05-25T04:56:47Z

elements/src/components/pos-list/pos-list.tsx

+    while (this.provideQueue.length > 0) {
+      let ev = this.provideQueue.pop();
+      let resourceUri = ev.currentTarget.getAttribute('about');
+      let resource = this.os.store.get(resourceUri);


For a subject-connected list, I could use Thing methods directly. I've used this architecture so that the same component will be able to handle enumerating lists too.

I've also excluded fetching from this PR - the current list element will only display already loaded resources.

This is consistent with pos-list being lazy-first - it's a display helper that only secondarily triggers network access. A follow up PR with fetching will also need to revisit how core is dealing with repeated fetches of the same resource.

jg10-mastodon-social · 2025-05-26T06:45:09Z

core/src/thing/Thing.relations.spec.ts

+      "https://jane.doe.example/container/file.ttl#fragment",
+      store,
+    );
+    const result = it.relations("http://vocab.test/first");


I'm suggesting this solution because it results in a minimal and backward compatible change to the core API. If we were to add a completely new method, it would be useful to rationalise what return types we want to provide, given that we're departing from RDF/JS specifications.

I am not 100% convinced about this, but if this works for the list we can go this path for now

jg10-mastodon-social · 2025-06-07T06:34:29Z

storybook/stories/composition/2_list-composition.stories.mdx

+                    </template>
+                </pos-list>:
+                <pos-value predicate="http://www.w3.org/ns/solid/terms#publicId"/></pos-value>
+            </li>


The use of nested lists is a bit more complex than originally intended, but it turns out the example used in pos-relations uses schema:skills in a way that ends up like this. In the process it demonstrates the flexibility of pos-list, including being able to change subject for a singleton list (solid:publicId has a single object), which provides a basic implementation of #89. So I think I'm happy with it.

I've also put it under the composition menu because it doesn't make sense to use pos-list without pos-resource as a parent and with some kind of child.

Really cool example. My first reaction was "Isn't there an easier way to get the singleton value, like pos-value" but this indeed would only provide the publicId URI and no way to get the label. So really cool to see that lists can be used that way as well.

Yet I would appreciate to have a simpler example for pos-list. Yes, you need a pos-resource and a child, but still a minimal viable example would be useful imho. Perhaps similar to what is in the unit tests. Perhaps we need a new category for this. "Templating" comes to my mind.

jg10-mastodon-social · 2025-06-07T06:43:31Z

I've marked as ready for review because I'm not sure what e2e test should be included (is the integration test enough?), and I think we can maybe descope and implement rev in a separate PR - this one is probably complex enough as it is?

angelo-v

Good work so far! I have several comments and questions, but many of them are minor, I think this goes into a good direction.

angelo-v · 2025-06-09T16:43:12Z

core/src/thing/Thing.relations.spec.ts

+      "https://jane.doe.example/container/file.ttl#fragment",
+      store,
+    );
+    const result = it.relations("http://vocab.test/first");


I am not 100% convinced about this, but if this works for the list we can go this path for now

angelo-v · 2025-06-09T16:44:38Z

elements/CHANGELOG.md

@@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added

 - `IndexedDbOfflineCache`: A PodOS cache implementation that uses IndexedDB to store data for offline usage
+- [pos-list](../docs/elements/components/pos-list):


Make sure this goes into the correct section while rebasing

angelo-v · 2025-06-09T16:50:51Z

elements/src/components/pos-list/pos-list.integration.spec.tsx

+      .calledWith('https://video.test/video-2')
+      .mockReturnValue({ uri: 'https://video.test/video-2', label: () => 'Video 2' });
+    const page = await newSpecPage({
+      components: [PosApp, PosLabel, PosList, PosResource],


You could say supportsShadowDom: false, here to make the test output more consice (get rid of mock:shadow-root)

angelo-v · 2025-06-09T16:54:09Z

elements/src/components/pos-list/pos-list.spec.tsx

+  it('sets about attribute on children', async () => {
+    const page = await newSpecPage({
+      components: [PosList],
+      html: `<pos-list rel="http://schema.org/video"><template><div>Test</div></template></pos-list>`,


some newlines would make this more readable

angelo-v · 2025-06-09T16:56:25Z

elements/src/components/pos-list/pos-list.tsx

+  componentWillLoad() {
+    subscribePodOs(this);
+    subscribeResource(this);
+    let templateElement = this.host.querySelector('template');


This could be const

angelo-v · 2025-06-09T17:23:34Z

elements/src/components/pos-list/pos-list.tsx

+      <this.templateNodeName
+        innerHTML={this.templateString}
+        about={it}
+        onPod-os:resource={ev => this.provideResource(ev)}


Why ware we doing this instead of wrapping each child in a pos-resource?

angelo-v · 2025-06-09T17:34:59Z

elements/src/components/pos-list/pos-list.tsx

+  async provideResource(event: SubscribeResourceEvent) {
+    event.stopPropagation();
+    this.provideQueue.push(event);
+    this.provideResources();


I did not get the need for the provide queue yet, tbh. Is there a respective test that fails if no queue is used that helps to highlight the problem?

angelo-v · 2025-06-09T17:35:22Z

elements/src/components/pos-list/pos-list.tsx

+  @Watch('os')
+  private async provideResources() {
+    while (this.provideQueue.length > 0) {
+      let ev = this.provideQueue.pop();


Please use const whenever possible

angelo-v · 2025-06-09T17:36:48Z

elements/src/components/pos-list/pos-list.tsx

+      if (resource) {
+        ev.detail(resource);
+      } else {
+        this.provideQueue.push(ev);


This else part is untested but also unreachable, since resource is always != null

angelo-v · 2025-06-09T17:41:31Z

elements/src/components/pos-list/pos-list.tsx

+  async provideResource(event: SubscribeResourceEvent) {
+    event.stopPropagation();
+    this.provideQueue.push(event);
+    this.provideResources();


Iguess, while this.os is not present the list should not start rendering anything. If it doesnt there is no chance of children requesting a resource. After that we could just provide the resource as soon as requested, without a queue?

angelo-v · 2025-06-09T17:44:41Z

all dependencies are updated to the latest patch version at minimum

You don't need to bother with this in the PR, I will do this after merging before releasing a new version

angelo-v · 2025-06-09T18:15:40Z

I am having an issue using this within another stencil component. If I paste an example directly in index.html it works, but the same example fails when I e.g. use it in pos-app-browser (just replacecing the regular pos-app content with the pos-list example).

In the latter case it fails, because it does not recognize the template child (childElementCount == 0). Don't know why yet.

angelo-v · 2025-06-09T19:02:26Z

It seems to be related to what is described here: https://stackoverflow.com/a/70778523

If I pass the content to <template innerHTML={"..."} instead of the template body then it works!

angelo-v · 2025-06-09T19:05:38Z

I managed to show my bookmarks using pos-list by the way, which is really cool!

<pos-app>
      <pos-resource uri="https://angelo.veltens.org/public/bookmarks">
        <pos-list rel="http://purl.org/dc/terms/references">
          <template>
            <article>
              <h2>
                <pos-label></pos-label>
              </h2>
              <pos-value predicate="http://www.w3.org/2002/01/bookmark#recalls"></pos-value>
            </article>
          </template>
        </pos-list>
      </pos-resource>
    </pos-app>

What is unfortunately still not possible with PodOS is actually linking to the value because I cannot use pos-value in an <a href for example. ~~Not sure if we have an issue for this yet~~ see #123

jg10-mastodon-social force-pushed the feat/basic-list branch from 6a40e50 to 72edc1e Compare May 24, 2025 06:51

jg10-mastodon-social commented May 24, 2025

View reviewed changes

elements/src/components/pos-list/pos-list.tsx Outdated Show resolved Hide resolved

jg10-mastodon-social commented May 24, 2025

View reviewed changes

angelo-v reviewed May 24, 2025

View reviewed changes

jg10-mastodon-social commented May 25, 2025

View reviewed changes

elements/src/components/pos-list/pos-list.tsx Show resolved Hide resolved

jg10-mastodon-social commented May 25, 2025

View reviewed changes

elements/src/components/pos-list/pos-list.tsx Outdated Show resolved Hide resolved

jg10-mastodon-social commented May 25, 2025

View reviewed changes

jg10-mastodon-social commented May 26, 2025

View reviewed changes

angelo-v force-pushed the main branch from d11efb5 to b61bf11 Compare June 2, 2025 17:24

jg10-mastodon-social added 6 commits June 7, 2025 15:16

feat: pos-list creates children for specified rel

67bd5cb

feat: pos-list renders the provided template

c4fcc77

feat: pos-list provides resources to descendants

0a66140

feat(core): thing.relations takes optional predicate

94170ac

refactor(pos-list): pass predicate to resource.relations

2d0507a

test: pos-list integration

ffc74ab

jg10-mastodon-social force-pushed the feat/basic-list branch from d8624cc to ffc74ab Compare June 7, 2025 05:37

jg10-mastodon-social added 5 commits June 7, 2025 16:13

doc: add story for pos-list composition

1c42e4a

fix(pos-list): unused import

b129556

doc: generate pos-list docs

420d49d

doc(pos-list): add to changelog

4fa3fcd

doc: update Thing.relations changelog

1b4d7fb

jg10-mastodon-social commented Jun 7, 2025

View reviewed changes

jg10-mastodon-social marked this pull request as ready for review June 7, 2025 06:42

angelo-v requested changes Jun 9, 2025

View reviewed changes

angelo-v mentioned this pull request Jun 9, 2025

Use URIs or other properties of things within attributes #123

Open

List things related to a resource with a custom display #119

Are you sure you want to change the base?

List things related to a resource with a custom display #119

Uh oh!

Conversation

jg10-mastodon-social commented May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jg10-mastodon-social May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jg10-mastodon-social commented Jun 7, 2025

Uh oh!

angelo-v left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

angelo-v commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

angelo-v commented Jun 9, 2025

Uh oh!

jg10-mastodon-social commented May 24, 2025 •

edited

Loading

jg10-mastodon-social May 24, 2025 •

edited

Loading

angelo-v commented Jun 9, 2025 •

edited

Loading

angelo-v commented Jun 9, 2025 •

edited

Loading