search

nuxtlabs / nuxt-component-meta

Gather Nuxt components metadata on build time and make them available on production.
69 stars 6 forks source link

Get screenshot of the component #30

Open Atinux opened 1 year ago

Atinux commented 1 year ago

Using data64, this could be an option disabled by default.

Would love to explore the best way to do this @farnabaz @kevinmarrec

Atinux commented 1 year ago

I think it would be possible once https://github.com/nuxt/framework/pull/5689 land, can you confirm @danielroe @pi0 ?

pi0 commented 1 year ago

Components prefixed wth .island and .server are possible to be individually rendered with linked PR with a specific endpoint.

danielroe commented 1 year ago

Yes. Currently the PR returns a result like:

{
  "rendered": [ { "html": "<pre data-v-a0337c84> Route: /foo </pre>" } ],
  "scripts": "<script type=\"module\" src=\"/_nuxt/entry.65591c03.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/RouteComponent.96ab4d69.mjs\" crossorigin></script>",
  "styles": "<link rel=\"stylesheet\" href=\"/_nuxt/entry.4e0f8d43.css\"><link rel=\"stylesheet\" href=\"/_nuxt/RouteComponent.2df1bd45.css\">"
}

(API may change as the PR is refined.)

This allows for a completely independent HTML document to be constructed which renders that component only, including all needed CSS. (scripts should be ignored in this context.)

Tahul commented 1 year ago

Who should we assign @Atinux ?

Atinux commented 1 year ago

We can start without screenshots for now on Studio, let's keep it for now and do not assigne anyone.