Skip to content

Scripts

Jump to bottom
Regis Philibert edited this page Oct 31, 2022 · 10 revisions

HUGE/Scripts handles the project's scripts.

TL;DR:

HUGE Config

# _huge/config/scripts.yaml
scripts:

- name: main
  path: js/index.js

- name: carousel
  path: js/carousel/index.js
  params:
    title: Land of surprises!
    slides:
    - title: What an adventure
      url: /adventures
    - title: What a disapointment
      url: /disapointment
    #[...]

Hugo template

<head>
<!-- main -->
{{ partial "huge/scripts/tags "main" }}
{{ if .IsHome }}
  <!-- carousel -->
  {{ partial "huge/scripts/tags "carousel" }}
{{ end }}
</head>

JavaScript

import * as params from '@params';
// Yes we can inject values from the config with params!
const carousel = require('./carousel')
document.getElementById("#carousel").html = carousel.init(params.title, params.slides)

HTML

<head>
  <!-- main -->
  <script crossorigin="anonymous" defer="defer" src="/js/index.07a5a[...]99251.js" type="text/javascript"></script>
  <!-- carousel -->
  <script crossorigin="anonymous" defer="defer" src="/js/carousel/index.a6ecf[...]158e0.js" type="text/javascript"></script>
</head>

Declaring the project's scripts

Users need to declare their scripts in the scripts key of _huge/config/scripts.{yaml|json|toml}

Each script declaration takes a number of parameters, only one being mandatory: the path. Here is the list of available keys:

  • path*: The path relative to the assets directory of the given file.
  • name: A user defined string which serves as an alias when calling the script tags from the templates.
  • internal: A boolean, if set to true the script will be considered 'internal' and its content printed inside the <script></script> tag rather than requested as external through the tags's src attribute. Defaults to false
  • load: A string (async|defer|none). The loading strategy. If different than none and the script is not internal, this will add the defer or async boolean attribute. Defaults to defer.
  • attributes: A map. A set of custom attributes to add to the script tag. Keys without values will be added as boolean attributes.
  • crossorigin: A string. If not none this will add the crossorigin attribute with the given string as value. Defaults to anonymous.
  • fingerprint: A string or a slice either containing or pointing to the environment (as defined in huge/env/Get) or the string always or never. Defaults to production. See huge/env/When
  • minify: Same as the above for the minifying operation.
  • integrity: A boolean. If set to true and the script is not internal this will automatically enable fingerprint and will add the integrity attribute with hash to the printed tag. Defaults to false.
  • output_path: A string in the form of a file path to customize the output path of the generated asset. Extension must match the expected. (Ex: output_path: /main.js for path: /framewk/internal.jsx). IMPORTANT: Minimum Hugo Version: 0.100.0
  • [Hugo settings], passed on as is: (https://gohugo.io/hugo-pipes/js#options):
    • inject. A slice.
    • externals. A slice.
    • params. A map
    • shims. A map
    • target. A string

Functions

huge/scripts/tags

The "huge/scripts/tags" partial is used to print the tags of some of the declared scripts in the templates.

Parameters

The partial parameters can be a lone entry pointing to a script or a slice of entries. For a slice HUGE will produce the tags for every script in the given order.

Either as a lone entry or within a slice, each script must either be:

A string HUGE will find any declared script whose name matches the given string and produce its tag.

A map HUGE will use the settings passed through the given map to attempt at producing a tag for the style. If a declared style is found matching the value of the name key. It will read the declared style settings, overwrites them with the given map and produce the tag.

Examples

{{ partial "huge/script/tags" "main" }}

Above HUGE will find a declared script whose name is main and produce its tag.

{{ partial "huge/scripts/tags" (slice "main" "carousel") }}

Above HUGE will find a declared script whose name is main and produce its tag. It will then find a declared script whose name is carousel and produce its tag.

{{ partial "huge/styles/tags" (slice
  "main"
  (dict
    "name" "carousel"
    "params" (dict
      "slides" (partial "carousel/GetSlides")
    )
  )
)}}

Above HUGE will find a declared script whose name is main and produce its tag. It will then find a declared script whose name is carousel and use the resulting map as setting, incuding the critical path. It will merge on top of this base settings the one passed directly through the partial: params.

Global Settings

env_keys

The module takes a list of environment variable keys to be replaced by their found value.

params:
  tnd_scripts:
    env_keys:
      - API_KEY
      - SERVICE_URL
      ...

In order for your scripts to proper define variables when bundling, the module needs to know the list of environment variable keys which need to be fetched and properly replaced so that

let public_api_key = process.env.API_KEY
let endpoint = process.env.SERVICE_URL

be processed as

let public_api_key = "the_value_of_API_KEY"
let endpoint = "the_value_of_SERVICE_URL"

Note that by default, Huge will process HUGO_ENV and NODE_ENV.

This is a HUGE WIP right now! Stay tune for more info as we push it to Alpha!

Clone this wiki locally