refactor: Move EJS into user templates (`template.html`) #1768

rschristian · 2023-01-05T03:00:28Z

What kind of change does this PR introduce?

Refactor

Did you add tests for your changes?

Existing cover

Summary

Moves head-end.ejs & body-end.ejs into user templates.

Originally, these were abstracted out in #862 to allow us to make alterations to the templates without breaking changes, but I don't think we ever really leaned into this. #1608, for example, was put behind a major as the API in the templates changed so drastically; almost every user with a custom template would've needed to make an adjustment (or a few). As such, the API contract never really shifted from html-webpack-plugin's template parameters.

Therefore, I believe continuing to have these abstracted out is doing more harm than good. We've received numerous issues & discussions both here and on Slack from users asking how to make simple alterations, like adding a meta tag or a attribute on a script tag. In the case of adding an attribute to script tags, the user would need to know to hop into preact-cli's source and find body-end.ejs to copy it into their template. That's not an ideal experience, even if we had documentation covering that.

By moving the EJS templates into users' projects (and switching the file extension to .ejs), my hope is that it'll be much clearer to users how they can customize this behavior. We'll still need a wiki page (reminder to myself) going over some things like the cli and htmlWebpackPlugin keys that are accessible for the power users, but immediate transparency should improve (I hope).

Additionally, the work done in #1466 went a long way towards making this change possible and palatable. The EJS is far simpler now and won't give new users a scare, which is awesome.

Does this PR introduce a breaking change?

Yes, <% preact.headEnd %> and <% preact.bodyEnd %> will no longer be supported.

If they still exist in the user's template, the compilation will error out and they'll be provided with a link for the new default template. While we could replace with empty strings, that's hardly a successful compilation as it'll be unusable; there will be no links to any resources in the HTML.

They'll need to copy from the default template that will ship with v4 or delete theirs if they have no customization made, as preact-cli will use the default if a user's cannot be found.

changeset-bot · 2023-01-05T03:00:31Z

🦋 Changeset detected

Latest commit: 50439be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
preact-cli	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

rschristian · 2023-01-07T15:06:43Z

packages/cli/src/lib/webpack/render-html-plugin.js

 				return {
 					cli: {
 						title,
 						url,
 						manifest: config.manifest,
-						inlineCss: config['inlineCss'],


Already available as config.inlineCss, no point in having a duplicated top level key for it.

…sion to .ejs

* refactor: Merging EJS templates and switcing preferred template extension to .ejs * test: Fixing test suite to reflect latest changes * chore: Cleaning * docs: Updating ReadMe * docs: Adding changeset * refactor: Add error message for <% preact.(head|body)End %>

* Chore: Updating html-webpack-plugin to v4 (#1608) * chore: Correcting changeset * feat: webpack v5 (#1645) * feat: webpack-v5 * test: Update tests * docs: Updating docs to reflect changes * chore: Removing optimize-plugin local patch * refactor: Determine CSS module by filename, not directory (#1714) * refactor: Determine CSS module by filename, not directory * docs: Adding changeset * refactor: Project creation pull from templates 'main' branch * test: Updating tests * revert: Accidentally removed log message * refactor: Extracting project creation out to own package (#1708) * refactor: Extracting out project creation to own package * docs: Adding changeset * refactor: Misc edits to common deps & workspace helper scripts * test: Fixing 'create' test suite * ci: Increase minimum Node version * chore: Fix typos * docs: Update ReadMe instructions * chore: Better (and untaken) package name * docs: Update changeset * test: Update 'create' test suite & build output hashes * docs: Expounding upon changeset * refactor: Drop Preact 8 support (#1716) * refactor: Drops support for Preact v8 * docs: Adding changeset * refactor: Switch to automatic runtime JSX transform (#1725) * refactor: Switch over to automatic runtime transform for JSX * test: Removing `h` imports from test suite * docs: Adding changeset * docs: Adding readme for create-cli (#1728) * docs: Adding readme for create-cli * feat: Initial publish * fix: Correcting broken readme links * refactor: Disable hashing ssr-build's css (#1733) * refactor: Disable hashing ssr-build's css * docs: Adding changeset * test: Fix unrelated change from altered template * refactor: Remove `--preload` flag (#1737) * refactor: Removes `--preload` flag & functionality * docs: Adding changeset * docs: Updating readme for removal of preload * refactor: Separate internal concepts of config and env (#1734) * refactor: Separate internal concepts of config and env * docs: Adding changeset * refactor: prune flags (#1752) * refactor: Revise inconsistent, unused, and deprecated flags * docs: Adding changeset * feat: Improved errors and warnings (#1758) * refactor: Better root error handling * refactor: Switch prerender plugin to be async for error gen * refactor: Simplify & improve compilation messages * refactor: Bump Node version, remove `src` arg in build & watch, and misc housekeeping (#1753) * refactor: Drop rimraf for built-in fs.rm * refactor: Drop src argument in build & watch cmds * refactor: Extract info cmd from CLI entrypoint * refactor: Remove update-notifier * refactor: Switch from fs.promises to fs/promises * docs: Adding changeset * refactor: Move EJS into user templates (`template.html`) (#1768) * refactor: Merging EJS templates and switcing preferred template extension to .ejs * test: Fixing test suite to reflect latest changes * chore: Cleaning * docs: Updating ReadMe * docs: Adding changeset * refactor: Add error message for <% preact.(head|body)End %> * chore: Publishing cli & create-cli * Refactor: Enable Prefresh by Default (#1772) * refactor: Enables HMR via Prefresh by default * docs: Adding changeset * test: Updating tests to reflect changes to templates * refactor: Remove Critters (perhaps temporarily) (#1778) * refactor: Remove Critters (perhaps temporarily) * docs: Adding changeset * chore: Publish v4.0.0-next.2 * refactor: Vendor Critters so that 7c811ac can be reverted (#1780) * docs: Remove CLI beta note from readme * docs: Bump minimum Node version listed in readme

rschristian requested a review from a team as a code owner January 5, 2023 03:00

rschristian force-pushed the refactor/template-ejs branch 3 times, most recently from 5d611bd to 11b5313 Compare January 5, 2023 22:01

rschristian force-pushed the next branch 3 times, most recently from cf43b1d to f6139b5 Compare January 6, 2023 01:29

rschristian force-pushed the refactor/template-ejs branch from 11b5313 to 87e4561 Compare January 6, 2023 01:32

rschristian force-pushed the next branch from f6139b5 to 8305867 Compare January 6, 2023 01:42

rschristian force-pushed the refactor/template-ejs branch from 87e4561 to 75bb672 Compare January 6, 2023 01:52

rschristian force-pushed the next branch from 8305867 to 8250b23 Compare January 6, 2023 02:31

rschristian force-pushed the refactor/template-ejs branch from 75bb672 to 7ed5e45 Compare January 6, 2023 02:33

rschristian commented Jan 7, 2023

View reviewed changes

rschristian added 6 commits January 7, 2023 09:21

refactor: Merging EJS templates and switcing preferred template exten…

6581e54

…sion to .ejs

test: Fixing test suite to reflect latest changes

30945de

chore: Cleaning

562e331

docs: Updating ReadMe

616abd8

docs: Adding changeset

1f9a775

refactor: Add error message for <% preact.(head|body)End %>

f649f71

rschristian force-pushed the refactor/template-ejs branch from 50439be to f649f71 Compare January 7, 2023 15:29

rschristian merged commit 4bde138 into next Jan 7, 2023

rschristian deleted the refactor/template-ejs branch January 7, 2023 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Move EJS into user templates (`template.html`) #1768

refactor: Move EJS into user templates (`template.html`) #1768

rschristian commented Jan 5, 2023 •

edited

Loading

changeset-bot bot commented Jan 5, 2023 •

edited

Loading

rschristian Jan 7, 2023

refactor: Move EJS into user templates (template.html) #1768

refactor: Move EJS into user templates (template.html) #1768

Conversation

rschristian commented Jan 5, 2023 • edited Loading

What kind of change does this PR introduce?

Did you add tests for your changes?

Summary

Does this PR introduce a breaking change?

changeset-bot bot commented Jan 5, 2023 • edited Loading

🦋 Changeset detected

rschristian Jan 7, 2023

Choose a reason for hiding this comment

refactor: Move EJS into user templates (`template.html`) #1768

refactor: Move EJS into user templates (`template.html`) #1768

rschristian commented Jan 5, 2023 •

edited

Loading

changeset-bot bot commented Jan 5, 2023 •

edited

Loading