A small improvement for the way metadata is handled

[bruno-gregorio]

I've been learning Remix for a new project, and I'm positively surprised by its overall quality. In particular, I'm impressed by how intuitive the APIs are. There's a certain coherence to the way things are done. This makes the learning process an enjoyable and more productive experience.

That said, there's one area where I see room for improvement: the meta function.
In theory, this function returns an array of MetaDescriptor objects, but those objects have five variations:

• <meta> tags with name and content.
• <meta> tags with property and content.
• <title> tags.
• <link> tags.
• <script> tags.

I suggest adding the possibility for this function to return an object where the keys are the kind of tag being generated, and the values can either be a map of its attributes or an array of such objects. Let me give an example:

Instead of writing this:

export function meta() {
  return [
    {
      property: "custom:data",
      content: "Some data",
    },
    {
      name: "description",
      content: "application description",
    },
    {
      title: "My Application",
    },
    {
      tagName: "link",
      rel: "canonical",
      href: "https://some.site",
    },
    {
      "script:ld+json": {
        "@context": "https://schema.org",
        "@type": "Organization",
        name: "Remix",
        url: "https://remix.run",
      },
    },
  ];
}

We could write something this:

export function meta() {
  return {
    meta: [
      {
        property: "custom:data",
        content: "Some data",
      },
      {
        name: "description",
        content: "application description",
      },
    ],
    title: {
      content: "My Application",
    },
    link: {
      rel: "canonical",
      href: "https://some.site",
    },
    script: {
      type: "application/ld+json",
      content: {
        "@context": "https://schema.org",
        "@type": "Organization",
        name: "Remix",
        url: "https://remix.run",
      },
    },
  };
}

My suggestion has a few rough edges, like the ambiguous use of the content property, but I think you understood what I meant.

Last but not least, I would like to request a convenience function mergeWithParentMeta to make merging with the metadata from the parent route a more straightforward process.

export function meta() {
  return mergeWithParentMeta({
    meta: [
      {
        property: "custom:data",
        content: "Some data",
      },
      {
        name: "description",
        content: "application description",
      },
    ],
    title: {
      content: "My Application",
    },
    link: {
      rel: "canonical",
      href: "https://some.site",
    },
    script: {
      type: "application/ld+json",
      content: {
        "@context": "https://schema.org",
        "@type": "Organization",
        name: "Remix",
        url: "https://remix.run",
      },
    },
  });
}

[sergiodxa]

A similar API was used in Remix v2, the MetaFunction returned an object, the problem with that and the reason it was changed is that meta tags can be duplicated, but an object doesn't allow for that (you can't have duplicated keys) so the solution at that time was that now keys could have a single value or an array, adding more and more complexity as new cases arise.

For v2 the MetaFunction API was changed to an array so you can return any amount of tags with the same name while always using the same syntax.