Assets

When an asset is registered through the .css() or .js() methods in a podlet or layout an appropriate AssetCSS or AssetJS object is created.

The AssetCSS or AssetJS objects are then available on the .css or .js properties of the HttpIncoming object on a request.

Example of printing the assets set in a podlet:

Express

const podlet = new Podlet([ ... ]);

podlet.css({ value: '/assets/styles.css' });
podlet.js({ value: '/assets/scripts.js', type: 'esm' });

app.get(podlet.content(), (req, res) => {
    const incoming = res.locals.podium;

    console.log(incoming.css)  // array of AssetCSS objects
    console.log(incoming.js)   // array of AssetJS objects

    [ ... ]
});

Fastify

const podlet = new Podlet([ ... ]);

podlet.css({ value: '/assets/styles.css' });
podlet.js({ value: '/assets/scripts.js', type: 'esm' });

app.get(podlet.content(), async (request, reply) => {
    const incoming = reply.app.podium;

    console.log(incoming.css)  // array of AssetCSS objects
    console.log(incoming.js)   // array of AssetJS objects

    [ ... ]
});

HTTP

const podlet = new Podlet([ ... ]);

podlet.css({ value: '/assets/styles.css' });
podlet.js({ value: '/assets/scripts.js', type: 'esm' });

const server = http.createServer(async (req, res) => {
    let incoming = new HttpIncoming(req, res);
    incoming = await podlet.process(incoming);

    console.log(incoming.css)  // array of AssetCSS objects
    console.log(incoming.js)   // array of AssetJS objects

    [ ... ]
});

server.listen(7100);

When a layout fetches a podlet and parses the podlet's manifest, any assets on the .css and .js properties of the manifest are also parsed into the appropriate AssetCSS or AssetJS objects.

These AssetCSS or AssetJS objects are then available on the .css or .js properties of the Podlet Response object returned by the .client.fetch() method or emitted by the beforeStream event when the .client.stream() method is used.

Example of a layout fetching a podlet and printing the assets of the podlet:

Express

const podlet = layout.client.register({
    name: 'myPodlet',
    uri: 'http://localhost:7100/manifest.json',
});

app.get(layout.pathname(), async (req, res, next) => {
    const incoming = res.locals.podium;

    const response = await podlet.fetch(incoming);

    console.log(response.css)  // array with the podlets AssetCSS objects
    console.log(response.js)   // array with the podlets AssetJS objects

    [ ... ]
});

Fastify

const podlet = layout.client.register({
    name: 'myPodlet',
    uri: 'http://localhost:7100/manifest.json',
});

app.get(layout.pathname(), async (request, reply) => {
    const incoming = reply.app.podium;

    const response = await podlet.fetch(incoming);

    console.log(response.css)  // array with the podlets AssetCSS objects
    console.log(response.js)   // array with the podlets AssetJS objects

    [ ... ]
});

HTTP

const podlet = layout.client.register({
    name: 'myPodlet',
    uri: 'http://localhost:7100/manifest.json',
});

const server = http.createServer(async (req, res) => {
    let incoming = new HttpIncoming(req, res);
    incoming = await layout.process(incoming);

    const response = await podlet.fetch(incoming);

    console.log(response.css)  // array with the podlets AssetCSS objects
    console.log(response.js)   // array with the podlets AssetJS objects

    [ ... ]
});

When fetching one or more podlets from a layout, it's common to then include the assets from these podlets in the full HTML document being composed in this layout.

By setting a Podlet Response or an array of Podlet Response objects (returned when podlets are requested) on the HttpIncoming.podlets property in a layout, podlet AssetCSS and AssetJS objects will be set on the properties HttpIncoming.css and HttpIncoming.js respectively.

In this way the layout's registered assets, together with assets for all requested podlets, will be available for the document template in two arrays, one for CSS and another array for JS.

Express

layout.css({ value: '/assets/styles.css' });
layout.js({ value: '/assets/scripts.js', type: 'esm' });

const podletA = layout.client.register({
    name: 'myPodletA',
    uri: 'http://localhost:7100/manifest.json',
});

const podletB = layout.client.register({
    name: 'myPodletB',
    uri: 'http://localhost:7200/manifest.json',
});

const podletC = layout.client.register({
    name: 'myPodletC',
    uri: 'http://localhost:7300/manifest.json',
});

app.get(layout.pathname(), async (req, res, next) => {
    const incoming = res.locals.podium;

    const response = await Promise.all(
        podletA.fetch(incoming),
        podletB.fetch(incoming),
    );

    const singleResponse = await podletC.fetch(incoming);

    // This appends the assets from the podlets onto incoming.css and incoming.js
    incoming.podlets = response;

    // A single response is also supported
    incoming.podlets = singleResponse;

    console.log(incoming.css)  // array with the layouts and podlets AssetCSS objects
    console.log(incoming.js)   // array with the layouts and podlets AssetJS objects

    [ ... ]
});

Fastify

layout.css({ value: '/assets/styles.css' });
layout.js({ value: '/assets/scripts.js', type: 'esm' });

const podletA = layout.client.register({
    name: 'myPodletA',
    uri: 'http://localhost:7100/manifest.json',
});

const podletB = layout.client.register({
    name: 'myPodletB',
    uri: 'http://localhost:7200/manifest.json',
});

const podletC = layout.client.register({
    name: 'myPodletC',
    uri: 'http://localhost:7300/manifest.json',
});

app.get(layout.pathname(), async (request, reply) => {
    const incoming = reply.app.podium;

    const response = await Promise.all(
        podletA.fetch(incoming),
        podletB.fetch(incoming),
    );

    const singleResponse = await podletC.fetch(incoming);

    // This appends the assets from the podlets onto incoming.css and incoming.js
    incoming.podlets = response;

    // A single response is also supported
    incoming.podlets = singleResponse;

    console.log(incoming.css)  // array with the layouts and podlets AssetCSS objects
    console.log(incoming.js)   // array with the layouts and podlets AssetJS objects

    [ ... ]
});

HTTP

layout.css({ value: '/assets/styles.css' });
layout.js({ value: '/assets/scripts.js', type: 'esm' });

const podletA = layout.client.register({
    name: 'myPodletA',
    uri: 'http://localhost:7100/manifest.json',
});

const podletB = layout.client.register({
    name: 'myPodletB',
    uri: 'http://localhost:7200/manifest.json',
});

const podletC = layout.client.register({
    name: 'myPodletC',
    uri: 'http://localhost:7300/manifest.json',
});

const server = http.createServer(async (req, res) => {
    let incoming = new HttpIncoming(req, res);
    incoming = await layout.process(incoming);

    const response = await Promise.all(
        podletA.fetch(incoming),
        podletB.fetch(incoming),
    );

    const singleResponse = await podletC.fetch(incoming);

    // This appends the assets from the podlets onto incoming.css and incoming.js
    incoming.podlets = response;

    // A single response is also supported
    incoming.podlets = singleResponse;

    console.log(incoming.css)  // array with the layouts and podlets AssetCSS objects
    console.log(incoming.js)   // array with the layouts and podlets AssetJS objects

    [ ... ]
});

AssetCSS

An AssetCSS instance holds information about a Cascading Style Sheet related to a podlet or layout.

Properties

An AssetCSS instance has the following properties:

property	type	getter	setter	default	details
value	string	✓		''	Relative or absolute URL to the CSS asset
href	string	✓		''	Alias for the value property
crossorigin	string	✓	✓	undefined	Correlates to the same attribute on an HTML <link> element
disabled	boolean	✓	✓	false	Correlates to the same attribute on an HTML <link> element
hreflang	string	✓	✓	undefined	Correlates to the same attribute on an HTML <link> element
title	string	✓	✓	undefined	Correlates to the same attribute on an HTML <link> element
media	string	✓	✓	undefined	Correlates to the same attribute on an HTML <link> element
type	string	✓	✓	text/css	Correlates to the same attribute on an HTML <link> element
rel	string	✓	✓	stylesheet	Correlates to the same attribute on an HTML <link> element
as	string	✓	✓	undefined	Correlates to the same attribute on an HTML <link> element

Methods

An AssetCSS instance has the following methods:

.toJSON()

Returns a JSON representation of the AssetCSS instance.

.toJsxAttributes()

Returns a JSON representation of the AssetCSS instance ready for use in a JSX link tag

<link {...css.toJsxAttributes()} />

.toHTML()

Returns an HTML <link> element as a string representation of the AssetCSS instance.

AssetJS

An AssetJS instance holds information about a podlet or layout's Javascript client side assets.

Properties

An AssetJS instance has the following properties:

property	type	getter	setter	default	details
value	string	✓		''	Relative or absolute URL to the CSS asset
src	string	✓		''	Alias for the value property
referrerpolicy	string	✓	✓	undefined	Correlates to the same attribute on an HTML <script> element
crossorigin	string	✓	✓	undefined	Correlates to the same attribute on an HTML <script> element
integrity	string	✓	✓	undefined	Correlates to the same attribute on an HTML <script> element
nomodule	boolean	✓	✓	false	Correlates to the same attribute on an HTML <script> element
async	boolean	✓	✓	false	Correlates to the same attribute on an HTML <script> element
defer	boolean	✓	✓	false	Correlates to the same attribute on an HTML <script> element
type	string	✓	✓	undefined	Correlates to the same attribute on an HTML <script> element

Methods

An AssetJS instance has the following methods:

.toJSON()

Returns a JSON representation of the AssetJS instance.

.toJsxAttributes()

Returns a JSON representation of the AssetJS instance ready for use in a JSX script tag.

<script {...js.toJsxAttributes()}></script>

.toHTML()

Returns an HTML <script> element as a string representation of the AssetJS instance.