Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add lib functions renderTemplate() and renderPreview() etc #4329

Merged
merged 4 commits into from
Oct 20, 2023

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Oct 13, 2023

We chatted on Slack yesterday that we could bypass the Review app and render HTML using:

// We have no "full template" renderer
const html = '???'

// Inject rendered HTML into the page
await page.setContent(html)

This PR adds new lib functions renderTemplate() and renderPreview() to make it possible

✅ Pre-built styles govuk-frontend.min.css
✅ Pre-built script govuk-frontend.min.js
✅ Lib functions to render components
❌ Lib functions to render templates and previews

// We have no "full template" renderer
const html = renderPreview(componentName, renderOptions)

// Inject rendered HTML into the page
await page.setContent(html)

Shared test helpers and library functions

This PR also aligns options between render functions and helpers, matching up their names too

  • Test helpers in @govuk-frontend/helpers import test and dev dependencies (local use only)
  • Library functions in @govuk-frontend/lib import production dependencies (deployed to Heroku)
import { render } from '@govuk-frontend/lib/components' // Returns strings
import { render } from '@govuk-frontend/helpers/nunjucks' // Returns Cheerio objects
import { render } from '@govuk-frontend/helpers/puppeteer' // Returns Puppeteer pages

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 13, 2023 08:57 Inactive
@github-actions
Copy link

github-actions bot commented Oct 13, 2023

📋 Stats

File sizes

File Size
dist/govuk-frontend-4.7.0.min.css 120.66 KiB
dist/govuk-frontend-4.7.0.min.js 51.56 KiB
dist/govuk-frontend-ie8-4.7.0.min.css 81.59 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 75.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 70.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs 3.8 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.99 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 37.06 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.3 KiB

Modules

File Size
all.mjs 67.27 KiB
components/accordion/accordion.mjs 20.15 KiB
components/button/button.mjs 4.16 KiB
components/character-count/character-count.mjs 20.41 KiB
components/checkboxes/checkboxes.mjs 5.3 KiB
components/error-summary/error-summary.mjs 5.46 KiB
components/exit-this-page/exit-this-page.mjs 15.47 KiB
components/header/header.mjs 3.3 KiB
components/notification-banner/notification-banner.mjs 4 KiB
components/radios/radios.mjs 4.3 KiB
components/skip-link/skip-link.mjs 3.29 KiB
components/tabs/tabs.mjs 9.05 KiB

View stats and visualisations on the review app


Action run for 699dccc

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 13, 2023 09:07 Inactive
@colinrotherham colinrotherham changed the base branch from main to puppeteer-arguments October 13, 2023 16:42
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 13, 2023 16:42 Inactive
@colinrotherham colinrotherham self-assigned this Oct 16, 2023
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 16, 2023 11:50 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 16, 2023 14:48 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 16, 2023 15:41 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 16, 2023 15:49 Inactive
Base automatically changed from puppeteer-arguments to main October 17, 2023 14:37
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 18, 2023 10:49 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 18, 2023 13:11 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 18, 2023 14:40 Inactive
This is preparation work for a new `renderTemplate()` function which will be compatible with the same options

E.g. Nunjucks render `context` is universally `options.context` whether rendered by Nunjucks or called by a Puppeteer test
This makes `renderTemplate()` available to the Review app by adding it to `@govuk-frontend/lib`

Like the `render()` test helper, the Cheerio version stays in `@govuk-frontend/helpers`
This will be used to bypass the Review app in future
Test helpers and lib functions are now consistent

Library functions always return strings, but test helpers are available for Nunjucks (via Cheerio) and Google Chrome (via Puppeteer page)

```
import { render } from '@govuk-frontend/lib/components'
import { render } from '@govuk-frontend/helpers/nunjucks'
import { render } from '@govuk-frontend/helpers/puppeteer'
```
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4329 October 19, 2023 16:22 Inactive
Copy link
Member

@romaricpascal romaricpascal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I like the generic rendering to string from lib then specialised in nunjucks to get a cheerio object and in puppeteer to run on the page. Only a little question, but it's not a blocker, just a confirmation that I understood that change correctly.

@@ -19,6 +19,9 @@ const frontendPath = packageTypeToPath('govuk-frontend', {

router.use('/assets', express.static(join(frontendPath, 'assets')))
router.use('/javascripts', express.static(frontendPath))
router.use('/stylesheets', express.static(join(paths.app, 'dist/stylesheets')))
router.use('/stylesheets', [
express.static(frontendPath),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question Just to confirm that I understand this change properly: this leads Express to also look in govuk-frontend (however resolved earlier in the file) alongside looking at the built stylesheets from the review app. In turn, this enables it to find the /stylesheets/govuk-frontend.min.css from the boilerplate markup, is that it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah Express.js accepts an array of routes to try in order

Makes sure we can resolve CSS files from both locations:

/stylesheets/govuk-frontend.min.css
/stylesheets/app.min.css

@colinrotherham colinrotherham merged commit c7d8179 into main Oct 20, 2023
2 checks passed
@colinrotherham colinrotherham deleted the render-template branch October 20, 2023 11:08
@colinrotherham colinrotherham linked an issue Oct 23, 2023 that may be closed by this pull request
1 task
@colinrotherham colinrotherham removed their assignment Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

Restore ability for tests to fail when component initialisation throws
3 participants