Skip to content

Merge pull request #2116 from Infineon/2113-search-field-updating-adv… #596

Merge pull request #2116 from Infineon/2113-search-field-updating-adv…

Merge pull request #2116 from Infineon/2113-search-field-updating-adv… #596

name: Deploy Stencil Web components Library to NPM
on:
push:
branches:
- master
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true
jobs:
stencil-library-release:
outputs:
VERSION: ${{ steps.build.outputs.VERSION }}
SKIP_REMAINING: ${{ steps.build.outputs.SKIP_REMAINING }}
runs-on: ubuntu-latest
if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')" # job will not run, if triggered via ship-it
steps:
- name: checkout
uses: actions/checkout@v4
with:
ref: ${{ github.ref }}
fetch-depth: 0 # fetch all tags for ship-it
- name: download + setup auto
uses: auto-it/setup-auto@v1
- name: Use Node.js 20.x
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: "https://registry.npmjs.org"
cache: 'npm'
- name: Install jq
run: |
if command -v jq &> /dev/null; then
echo "✅ jq is already installed: $(jq --version)"
else
echo "📦 Installing jq..."
sudo apt-get update && sudo apt-get install -y jq
fi
- name: Cache node modules
id: cache-npm
uses: actions/cache@v3
with:
path: |
~/.npm
**/node_modules
key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/lerna.json') }}
restore-keys: |
${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-
${{ runner.os }}-build-
- name: Install dependencies for all packages
run: |
npm ci
- name: Run tests
run: |
cd packages/components
npm test
- name: Build and deploy Stencil core package
id: build
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
npm run build:components
cd packages/components
VERSION=$(auto shipit --dry-run --quiet)
echo "VERSION=$VERSION" >> $GITHUB_ENV
echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
echo "SKIP_REMAINING=false" >> $GITHUB_OUTPUT
echo "WEBEX_MESSAGE=New package release - Version: $VERSION" >> $GITHUB_ENV
echo "Publishing: $VERSION"
auto shipit
- name: Check package availability
if: steps.build.outputs.SKIP_REMAINING == 'false'
uses: ./.github/actions/check-package-availability
with:
package: "@infineon/infineon-design-system-stencil"
version: ${{ steps.build.outputs.VERSION }}
max-attempts: 10
max-delay: 20
- name: Update Dependencies in Angular, Vue and React packages
if: steps.build.outputs.SKIP_REMAINING == 'false'
id: update-wrapper-dependencies
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
BRANCH_NAME: ${{ github.event_name == 'pull_request' && github.head_ref || github.ref_name }}
VERSION: ${{ steps.build.outputs.VERSION }}
run: |
echo "VERSION: $VERSION"
echo "Installing Stencil library for Angular, Vue and React: $VERSION"
lerna version $VERSION --no-git-tag-version --y
# Update Angular package
cd packages/components-angular/projects/component-library
jq 'del(.dependencies["@infineon/infineon-design-system-stencil"])' package.json > tmp && mv tmp package.json
jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > tmp && mv tmp package.json
cd ../../../../
# Update Vue package
cd packages/components-vue
VERSION_CLEAN=$(echo "$VERSION" | sed 's/^[\^~]*//') # strip any leading ^ or ~ just in case
jq 'del(.dependencies["@infineon/infineon-design-system-stencil"])' package.json > tmp && mv tmp package.json
jq --arg v "$VERSION_CLEAN" '.dependencies["@infineon/infineon-design-system-stencil"] = $v' package.json > tmp && mv tmp package.json
# Update React package
cd ../components-react
jq 'del(.dependencies["@infineon/infineon-design-system-stencil"])' package.json > tmp && mv tmp package.json
jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > tmp && mv tmp package.json
# Retry install of published Stencil package (race condition safe)
RETRIES=5
for i in $(seq 1 $RETRIES); do
echo "Attempt $i to install Stencil version: $VERSION"
if npm install "@infineon/infineon-design-system-stencil@$VERSION" --save-exact; then
echo "✅ Installed successfully on attempt $i"
break
else
echo "❌ Failed, retrying in $((i * 5)) seconds..."
sleep $((i * 5))
fi
done
cd ../../
npm install
# Verify updates
echo "Verifying updates in Angular package"
jq '.dependencies["@infineon/infineon-design-system-stencil"]' packages/components-angular/projects/component-library/package.json
echo "Verifying updates in Vue package"
jq '.dependencies["@infineon/infineon-design-system-stencil"]' packages/components-vue/package.json
echo "Verifying updates in React package"
jq '.dependencies["@infineon/infineon-design-system-stencil"]' packages/components-react/package.json
- name: Build and deploy Angular, Vue and React packages
if: steps.build.outputs.SKIP_REMAINING == 'false'
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
lerna version $VERSION --no-git-tag-version --y
npm run build:components-angular
npm run build:components-react
npm run build:components-vue
cd packages/components-angular/dist/@infineon/infineon-design-system-angular
npm publish
cd ../../../../components-react
npm publish
cd ../components-vue
npm publish
- name: Update Dependencies in example applications
if: steps.build.outputs.SKIP_REMAINING == 'false'
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
VERSION: ${{ steps.build.outputs.VERSION }}
run: |
# Update Vue wrapper component
cd examples/wrapper-components/vue-javascript
jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-vue"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
cd ../../..
# Update React wrapper component
cd examples/wrapper-components/react-vite-js
jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-react"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
cd ../../..
- name: Commit and push all changes
if: steps.build.outputs.SKIP_REMAINING == 'false'
env:
BRANCH_NAME: ${{ github.event_name == 'pull_request' && github.head_ref || github.ref_name }}
run: |
git config user.name "github-actions"
git config user.email "github-actions@github.com"
git add .
git commit -m "Update Stencil library version to $VERSION"
git push origin HEAD:$BRANCH_NAME
#deploy gh-pages previews for example applications:
deploy-master-vue:
needs: stencil-library-release
if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js 20.x
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: https://registry.npmjs.org
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Check package availability
uses: ./.github/actions/check-package-availability
with:
package: "@infineon/infineon-design-system-vue"
version: ${{ needs.stencil-library-release.outputs.VERSION }}
max-attempts: 10
max-delay: 20
- name: Install and Build
run: |
cd examples/wrapper-components/vue-javascript
npm i
npm run build
- name: Deploy Vue Example🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: examples/wrapper-components/vue-javascript/dist/ # The folder the action should deploy.
target-folder: vue-example
clean-exclude: |
angular-example/
react-example/
vanilla-example/
pr-preview/
pr-preview-vue-example/
pr-preview-react-example/
pr-preview-angular-example/
pr-preview-vanilla-example/
force: false
deploy-master-react:
needs: stencil-library-release
if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: https://registry.npmjs.org
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Check package availability
uses: ./.github/actions/check-package-availability
with:
package: "@infineon/infineon-design-system-react"
version: ${{ needs.stencil-library-release.outputs.VERSION }}
max-attempts: 10
max-delay: 20
- name: Install and Build
run: |
cd examples/wrapper-components/react-vite-js
rm -rf node_modules
npm install
REACT_VERSION=$(jq -r '.dependencies["@infineon/infineon-design-system-react"]' package.json)
STENCIL_VERSION=$(npm list @infineon/infineon-design-system-stencil --depth=1 | grep @infineon/infineon-design-system-stencil@ | awk -F@ '{print $3}')
echo "Installed version Stencil: $STENCIL_VERSION - Installed version React: $REACT_VERSION"
npm run build
- name: Deploy React Example🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: examples/wrapper-components/react-vite-js/dist # The folder the action should deploy.
target-folder: react-example
clean-exclude: |
angular-example/
vanilla-example/
vue-example/
pr-preview/
pr-preview-vue-example/
pr-preview-react-example/
pr-preview-angular-example/
pr-preview-vanilla-example/
force: false
deploy-master-angular:
needs: stencil-library-release
if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: https://registry.npmjs.org
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Check package availability
uses: ./.github/actions/check-package-availability
with:
package: "@infineon/infineon-design-system-angular"
version: ${{ needs.stencil-library-release.outputs.VERSION }}
max-attempts: 10
max-delay: 20
- name: Update package.json with new version
run: |
cd packages/components-angular
jq --arg VERSION "${{ needs.stencil-library-release.outputs.VERSION }}" '.dependencies["@infineon/infineon-design-system-angular"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
cd projects/component-library
jq --arg VERSION "${{ needs.stencil-library-release.outputs.VERSION }}" '.dependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
- name: Install and Build
run: |
cd packages/components-angular
npm install
npm run build my-app
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: packages/components-angular/dist/my-app/ # The folder the action should deploy.
target-folder: angular-example
clean-exclude: |
react-example/
vanilla-example/
vue-example/
pr-preview/
pr-preview-vue-example/
pr-preview-react-example/
pr-preview-angular-example/
pr-preview-vanilla-example/
force: false
deploy-master-vanilla:
needs: stencil-library-release
if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: https://registry.npmjs.org
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Update CDN Link in Vanilla example app & build
run: |
cd examples/stencil-components/vanilla-cdn
npm install
npm run update-link
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: examples/stencil-components/vanilla-cdn/dist # The folder the action should deploy.
target-folder: vanilla-example
clean-exclude: |
angular-example/
react-example/
vue-example/
pr-preview/
pr-preview-vue-example/
pr-preview-react-example/
pr-preview-angular-example/
pr-preview-vanilla-example/
force: false
send-webex-notification:
needs: [stencil-library-release, deploy-master-vue, deploy-master-react, deploy-master-angular, deploy-master-vanilla]
runs-on: ubuntu-latest
steps:
- name: Send Webex Notification
run: |
VERSION=${{ needs.stencil-library-release.outputs.VERSION }}
WEBEX_MESSAGE="**VERSION UPDATE**\nA new version has been released: [$VERSION](https://github.com/Infineon/infineon-design-system-stencil/releases/tag/v$VERSION)\nFollow the link to see what's included in this release."
curl https://webexapis.com/v1/messages -X POST -H "Authorization: Bearer ${{ secrets.WEBEX_TOKEN }}" -H "Content-Type: application/json" -d "{\"roomId\":\"${{ secrets.WEBEX_ROOM_ID }}\",\"markdown\":\"$WEBEX_MESSAGE\"}"
shell: bash