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.

Sign up for GitHub

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

Jump to bottom

Native esbuild integration, defaults switched to esbuild/postcss #461

Merged
merged 23 commits into from
Jan 10, 2022
Merged

Native esbuild integration, defaults switched to esbuild/postcss #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
b5c2d3e
Native esbuild integration, defaults switched to esbuild/postcss
jaredcwhite Nov 25, 2021
81c29d2
fix cops
jaredcwhite Nov 25, 2021
b26dc1e
Merge branch 'main' into esbuild-bundling
jaredcwhite Dec 8, 2021
71464f3
Rework Cucumber test to verify esbuild and webpack configs
jaredcwhite Dec 8, 2021
cfad48e
Add new esbuild test
jaredcwhite Dec 8, 2021
79b8e38
Output final bundle sizes
jaredcwhite Dec 8, 2021
63729ec
try a different seed for GH actions
jaredcwhite Dec 8, 2021
b273f37
Make components test more idempotent
jaredcwhite Dec 8, 2021
8ec1fa1
fix cop
jaredcwhite Dec 8, 2021
ef87c1a
another try for GH actions
jaredcwhite Dec 8, 2021
6334152
Fix failing GH test (again)
jaredcwhite Dec 8, 2021
75594c0
Improve the Tailwind CSS bundled configuration
jaredcwhite Dec 8, 2021
2dc9786
Ensure latest versions of PostCSS
jaredcwhite Dec 9, 2021
01764e4
Glob, src/_components and Stimulus + esbuild working
jaredcwhite Dec 10, 2021
5582319
Get Tailwind v3 with JIT working
jaredcwhite Dec 10, 2021
9ae50c5
Add throw/catch :halt to reload hooks
jaredcwhite Dec 10, 2021
d632a8e
Update esbuild migration script
jaredcwhite Dec 11, 2021
41ea4bd
CSS fix for index.js.rb file as esbuild entrypoint
jaredcwhite Dec 15, 2021
2a30411
fix security issue in #473
jaredcwhite Dec 16, 2021
2f7efdd
Update various esbuild config options
jaredcwhite Dec 16, 2021
5fe9158
Support Ruby2JS entrypoint
jaredcwhite Dec 16, 2021
435bf5b
backtrack and find entrypoint automatically
jaredcwhite Dec 16, 2021
eff9688
Add `publicPath` so assets can be referenced within esbuild bundle
jaredcwhite Dec 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
263 changes: 263 additions & 0 deletions bridgetown-core/features/asset_path_tag.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
Feature: AssetPath Tag
As a web developer who likes managing frontend assets with Webpack or esbuild
I want to be able to easily link JS and CSS output bundles using manifest.json
So browsers don't use cached, out-of-date bundles

Scenario: Use frontend manifest
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path css %}" />
<script src="{% asset_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"javascript/index.js": "all.hashgoeshere.js",
"styles/index.css": "all.hashgoeshere.css"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "/_bridgetown/static/all.hashgoeshere.js" in "output/index.html"
And I should see "/_bridgetown/static/all.hashgoeshere.css" in "output/index.html"
And I should not see "//_bridgetown/static/all.hashgoeshere.js" in "output/index.html"
And I should not see "MISSING_FRONTEND_BUNDLING_CONFIG" in "output/index.html"
And I should not see "MISSING_ESBUILD_MANIFEST_FILE" in "output/index.html"

Scenario: Use custom filename in frontend manifest
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path css %}" />
<link rel="preload" href="{% asset_path images/folder/somefile.png %}" />
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"javascript/index.js": "all.hashgoeshere.js",
"styles/index.css": "all.hashgoeshere.css",
"images/folder/somefile.png": "somefile.hashgoeshere.png"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "/_bridgetown/static/somefile.hashgoeshere.png" in "output/index.html"

Scenario: Missing frontend manifest
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path css %}" />
<script src="{% asset_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "MISSING_FRONTEND_BUNDLING_CONFIG" in "output/index.html"

Scenario: Missing asset file
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path bad %}" />
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"javascript/index.js": "all.hashgoeshere.js",
"styles/index.css": "all.hashgoeshere.css"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "esbuild:" in the build output

Scenario: Broken frontend manifest (css)
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path css %}" />
<script src="{% asset_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"javascript/index.js": "all.hashgoeshere.js"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "esbuild:" in the build output

Scenario: Broken frontend manifest (js)
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% asset_path css %}" />
<script src="{% asset_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"styles/index.css": "all.hashgoeshere.css"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "esbuild:" in the build output

Scenario: Use frontend manifest in an ERB layout
Given I have a _layouts directory
And I have a "_layouts/default.erb" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="<%= asset_path :css %>" />
<script src="<%= asset_path :js %>" defer></script>
</head>
<body>
Static: <%= relative_url "_bridgetown" %>
<%= yield %>
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "esbuild.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"javascript/index.js": "all.hashgoeshere.js",
"styles/index.css": "all.hashgoeshere.css"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "/_bridgetown/static/all.hashgoeshere.js" in "output/index.html"
And I should see "Static: /_bridgetown" in "output/index.html"
And I should not see "MISSING_FRONTEND_BUNDLING_CONFIG" in "output/index.html"

Scenario: Use Webpack manifest
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% webpack_path css %}" />
<script src="{% webpack_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "webpack.config.js" file with content:
"""
"""
And I have a ".bridgetown-cache/frontend-bundling" directory
And I have a ".bridgetown-cache/frontend-bundling/manifest.json" file with content:
"""
{
"main.js": "all.hashgoeshere.js",
"main.css": "../css/all.hashgoeshere.css"
}
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "/_bridgetown/static/js/all.hashgoeshere.js" in "output/index.html"
And I should see "/_bridgetown/static/css/all.hashgoeshere.css" in "output/index.html"
And I should not see "//_bridgetown/static/js/all.hashgoeshere.js" in "output/index.html"
And I should not see "MISSING_WEBPACK_MANIFEST_FILE" in "output/index.html"

Scenario: Missing Webpack manifest
Given I have a _layouts directory
And I have a "_layouts/default.html" file with content:
"""
<html>
<head>
<link rel="stylesheet" href="{% webpack_path css %}" />
<script src="{% webpack_path js %}" defer></script>
</head>
<body>
{{ content }}
</body>
</html>
"""
And I have an "index.html" page with layout "default" that contains "page content"
And I have a "webpack.config.js" file with content:
"""
"""
When I run bridgetown build
Then the "output/index.html" file should exist
And I should see "MISSING_WEBPACK_MANIFEST_FILE" in "output/index.html"
7 changes: 5 additions & 2 deletions bridgetown-core/features/support/helpers.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,12 @@ def self.source_dir

def self.root_files
[
".bridgetown-webpack",
".bridgetown-webpack/manifest.json",
".bridgetown-cache",
".bridgetown-cache/frontend-bundling",
".bridgetown-cache/frontend-bundling/manifest.json",
"bridgetown.config.yml",
"webpack.config.js",
"esbuild.config.js",
"plugins",
"plugins/nested",
"plugins/nested/subnested",
Expand Down
Loading