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
Hapi
Fastify
HTTP

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

    [ ... ]
});

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

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

app.route({
    method: 'GET',
    path: podlet.content(),
    handler: (request, h) => {
        const incoming = request.app.podium;

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

        [ ... ]
    },
});

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

    [ ... ]
});

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
Hapi
Fastify
HTTP

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

    [ ... ]
});

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

app.route({
    method: 'GET',
    path: layout.pathname(),
    handler: (request, h) => {
        const incoming = request.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

        [ ... ]
    },
});

app.start();

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

    [ ... ]
});

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
Hapi
Fastify
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',
});

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

    [ ... ]
});

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.route({
    method: 'GET',
    path: layout.pathname(),
    handler: (request, h) => {
        const incoming = request.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

        [ ... ]
    },
});

app.start();

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

    [ ... ]
});

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.

AssetCSS​

Properties​

Methods​

.toJSON()​

.toJsxAttributes()​

.toHTML()​

AssetJS​

Properties​

Methods​

.toJSON()​

.toJsxAttributes()​

.toHTML()​

AssetCSS

Properties

Methods

.toJSON()

.toJsxAttributes()

.toHTML()

AssetJS

Properties

Methods

.toJSON()

.toJsxAttributes()

.toHTML()