Skip to content

feat: Build and upload vanilla ESM bundle to assets manager #5671

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

Open
muhammad-ali-pk wants to merge 2 commits into
base: main
Choose a base branch
from
+132 −7
Open

feat: Build and upload vanilla ESM bundle to assets manager #5671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac626a8
feat: create ESM bundle, and upload to assets manager
muhammad-ali-pk Oct 13, 2025
af4c8d2
setup QA
muhammad-ali-pk Oct 17, 2025
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
82 changes: 82 additions & 0 deletions .github/workflows/pr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,85 @@ jobs:
github-token: ${{ secrets.GITHUB_TOKEN }}
reporter: github-pr-check
fail-on-error: true

build-css:
name: Build Vanilla CSS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: Read Vanilla version from package.json
run: |
node -p "require('./package.json').version" > VANILLA_VERSION
echo "Building Vanilla CSS v$(cat VANILLA_VERSION)"
- run: yarn install
- run: yarn build
- run: yarn test
- name: Show size of the build file
run: stat -c '%s' build/css/build.css
- run: cp VANILLA_VERSION build/css
- uses: actions/upload-artifact@v4
with:
name: css
path: build/css
build-js:
name: Build Vanilla JS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: Read Vanilla version from package.json
run: |
node -p "require('./package.json').version" > VANILLA_VERSION
echo "Building Vanilla JS v$(cat VANILLA_VERSION)"
- name: Install esbuild and dependencies
run: npm install esbuild
- name: Create esbuild configuration file
# This step creates a script to execute your specific esbuild configuration
run: |
echo 'require("esbuild").build({
entryPoints: ["templates/static/js/index.js"],
bundle: true,
outfile: "build/js/vanilla.bundle.mjs",
format: "esm",
sourcemap: true,
minify: true,
tsconfigRaw: {},
});' > esbuild-config.js
- name: Run esbuild to generate ESM bundle
run: node esbuild-config.js
- name: Show size of the build file
run: stat -c '%s' build/js/vanilla.bundle.mjs
- run: cp VANILLA_VERSION build/js
- uses: actions/upload-artifact@v4
with:
name: js
path: build/js/vanilla.bundle.mjs
build:
name: Build Vanilla CSS and JS
runs-on: ubuntu-latest
needs: [build-css, build-js]


publish-assets:
name: Publish to assets server
needs: [build]
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/download-artifact@v4
with:
name: css
path: css
- name: Install upload-assets snap
run: sudo snap install upload-assets
- name: Upload assets to assets server
run: |
upload-assets --url-path vanilla-framework-version-$(cat css/VANILLA_VERSION).min.css css/build.css
upload-assets --url-path vanilla-framework-version-$(cat js/VANILLA_VERSION).min.mjs build/js/vanilla.bundle.mjs
env:
UPLOAD_ASSETS_API_TOKEN: ${{secrets.UPLOAD_ASSETS_API_TOKEN}}
56 changes: 49 additions & 7 deletions .github/workflows/publish-on-release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,69 @@
types: [published]

jobs:
build:
name: Build Vanilla
build-css:
name: Build Vanilla CSS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v4
with:
node-version: 18
- name: Read Vanilla version from package.json
run: |
node -p "require('./package.json').version" > VANILLA_VERSION
echo "Building Vanilla v$(cat VANILLA_VERSION)"
echo "Building Vanilla CSS v$(cat VANILLA_VERSION)"
- run: yarn install
- run: yarn build
- run: yarn test
- name: Show size of the build file
run: stat -c '%s' build/css/build.css
- run: cp VANILLA_VERSION build/css
- uses: actions/upload-artifact@v5
with:
name: css
path: build/css

build-js:
Comment on lines 9 to 31

Check warning

Code scanning / CodeQL

Workflow does not contain permissions Medium

Actions job or workflow does not limit the permissions of the GITHUB_TOKEN. Consider setting an explicit permissions block, using the following as a minimal starting point: {contents: read}
name: Build Vanilla JS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: Read Vanilla version from package.json
run: |
node -p "require('./package.json').version" > VANILLA_VERSION
echo "Building Vanilla JS v$(cat VANILLA_VERSION)"
- name: Install esbuild and dependencies
run: npm install esbuild
- name: Create esbuild configuration file
# This step creates a script to execute your specific esbuild configuration
run: |
echo 'require("esbuild").build({
entryPoints: ["templates/static/js/index.js"],
bundle: true,
outfile: "build/js/vanilla.bundle.mjs",
format: "esm",
sourcemap: true,
minify: true,
tsconfigRaw: {},
});' > esbuild-config.js
- name: Run esbuild to generate ESM bundle
run: node esbuild-config.js
- name: Show size of the build file
run: stat -c '%s' build/js/vanilla.bundle.mjs
- run: cp VANILLA_VERSION build/js
- uses: actions/upload-artifact@v4
with:
name: js
path: build/js/vanilla.bundle.mjs
build:
name: Build Vanilla CSS and JS
runs-on: ubuntu-latest
needs: [build-css, build-js]

publish-npm:
name: Publish to NPM
needs: build
Expand Down Expand Up @@ -60,16 +100,18 @@
path: css
- name: Install upload-assets snap
run: sudo snap install upload-assets
- name: Upload to assets server
run: upload-assets --url-path vanilla-framework-version-$(cat css/VANILLA_VERSION).min.css css/build.css
- name: Upload assets to assets server
run: |
upload-assets --url-path vanilla-framework-version-$(cat css/VANILLA_VERSION).min.css css/build.css
upload-assets --url-path vanilla-framework-version-$(cat js/VANILLA_VERSION).min.mjs build/js/vanilla.bundle.mjs
env:
UPLOAD_ASSETS_API_TOKEN: ${{secrets.UPLOAD_ASSETS_API_TOKEN}}

notify-figma:
name: Notify Figma library maintainers
needs: publish-npm
runs-on: ubuntu-latest
steps:
- name: Notify Figma library maintainers
run: |
curl -X POST -H "Content-Type: application/json" -d '{ "source": "Vanilla CSS", "change-summary": " [Vanilla release notes](${{ github.event.release.html_url }})" }' ${{ secrets.FIGMA_LIBRARY_ALERT_URL }}
curl -X POST -H "Content-Type: application/json" -d '{ "source": "Vanilla CSS", "change-summary": " [Vanilla release notes](${{ github.event.release.html_url }})" }' ${{ secrets.FIGMA_LIBRARY_ALERT_URL }}
1 change: 1 addition & 0 deletions guides/release-process.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ In case that fails, here are manual steps to release to assets server:

- `dotrun build`
- `upload-assets --url-path vanilla-framework-version-X.X.X.min.css build/css/build.css`
- `upload-assets --url-path vanilla-framework-version-X.X.X.min.mjs build/js/vanilla.bundle.mjs`

## Deploying vanillaframework.io

Expand Down