allow hybrid static/dynamic pages/components

[aralroca]

Things to adapt:

• notFound during streaming works in a different way, for static pages should display the 404 page directly
• -It should work in desktop app / android / ios
• add prerender macro to render components on build time

[aralroca]

Idea: use <SomeComponent render:static /> option or similar to this. And during build add a macro and replace it to something like {renderToString(<SomeComponent />)}

[aralroca]

I added this open-source library: https://github.com/aralroca/prerender-macro?tab=readme-ov-file

[aralroca]

Some problems with the integration of prerender-macro and Brisa:

1. If put as the first plugin (before the Brisa plugins), then Bun puts the jsx-runtime in a chunk and instead of calling jsxDEV or jsx it calls D or whatever letter is set, which makes it very difficult for subsequent plugins to continue working.
2. Also is not working when it has this:

   brisa/packages/brisa/src/utils/compile-files/index.ts

   Line 64 in 91fd850

   external: ["brisa", "brisa/server"],

   this code was added to don't add the RPC in layouts, otherwise is adding all the Brisa code inside the layout and always detecting the rpc.
3. If it is set as the last plugin, as the meriyah parser and astring do not support import attributes yet, then the prerender-macro does not find any import attribute and does nothing.

On 1st: it would be nice to find a way to know the identifier of jsx or jsxDEV so that the current plugins will always work.

On 3th: we will have to wait for meriyah and astring to support it, I have already opened the issues:

• meriyah: Add ImportAttribute for import attributes (stage 3 Estree) meriyah/meriyah#253
• astring: Add support to Estree import attributes davidbonnet/astring#704

[aralroca]

The 1st problem (letter instead ofjsxDEV) can be solved with splitting: false to don't generate these chunks, however, another problem comes: generating 1 chunk for each page to add the Brisa package there, so a lot of code...

[aralroca]

Related with #183

[aralroca]

Ok, an idea to solve it at the page level for now (for the component level we need to wait for the issues commented above).

For example, for a dynamic route to prerender some params:

export default function ProductPage() {
  // ...
}

// Provides the function to generate static parameters to then prerender these pages in build-time
export const prerender = () => [{ slug: '1' }, { slug: '2' }];

For a page that has no dynamic route:

// Configures to prerender this page in build-time
export const prerender = true;

Warning

This prerender = true only makes sense for output="server", for the others are already pre-rendered by default.

TODO:

•  When output="static" is present and a dynamic path does not have a prefetch with params, a warning message is displayed in the terminal when building.
• During the build, the .html files are generated and the terminal informs about their execution. (For both prerender=true and prerender=()=> [{ slug: 'slug1'}]).
• log in the terminal the new generated static pages (IS_STATIC_OUTPUT=false)
• log in the terminal the new generated static pages (IS_STATIC_OUTPUT=true)
• These .html files should be served as assets using output="server"
• For output='android'|'desktop'|'ios' behave this prerender as output="static".
• Should also work with /[...rest] routes
• Should also work with /[[...catchAll]] routes
• Should also work with i18n translated pages and with the correct lang prefix
• Should work with trailingSlash
• Should work with basePath
• Docs

[aralroca]

Nowadays you can create static pages and have other dynamic ones thanks to the prerender export. However, I leave the issue open because it would be missing at the component level, I created this lib with the intention and it does it well, however we still can not integrate it until the external parser tools support import attributes.

[aralroca]

I did this PR to Meriyah to support import attributes 🎉

This the PR of Astring to support import attributes 🎉

[aralroca]

Both PR's are already merged, we can now integrate them into Brisa! 🎉

[aralroca]

I have to look for alternatives to:

import Foo from '@/foo' with { type: 'prerender' }

More context is this library I made:

https://github.com/aralroca/prerender-macro/

But it was not compatible until now with the parser and generator I was using in Brisa and I didn't want to use the TypeScript parser which is 3mb and very slow.

Now they have accepted my PR in meriyah and in astring and it works fine, however, I have to look for an alternative to the declaration since meriyah does not support TypeScript and when transpiling it with Bun before using the parser is deleting the import attributes... It pisses me off a bit because “with { type: ‘prerender’ }” was nice. Nevertheless if it is possible to make that when analyzing it is without the import attribute although then from the parser if it adds the import attribute of the macro to be able to be done.

I have thought about alternatives and we could use an attribute in the component, ex:

<Foo is:prerendered foo="bar" />

There are good parts of this alternative:

• Optimizations can be made so that if the component is used at various locations on the page you can decide how much it has to be prerendered in build-time and when it is dynamic in runtime.
• Thanks to Type-safe TypeScript it will be easier to exceed and provide documentation while developers consume their components (improves DX).

However, other names came to my mind: <Foo build:time />, <Foo renderOn="build" />. Which one do you like more @amatiasq @AlbertSabate @danielart?

[aralroca]

Maybe something related with AOT or JIT instead of "build-time" or "run-time"? What do you think makes more sense?