Skip to content

Add Vanilla JS + Yii3 co-work example (JSON API + fetch) - #480

Closed
Ai-TOS-789 wants to merge 1 commit into
yiisoft:masterfrom
Ai-TOS-789:example/vanilla-js-yii3-cowork
Closed

Add Vanilla JS + Yii3 co-work example (JSON API + fetch)#480
Ai-TOS-789 wants to merge 1 commit into
yiisoft:masterfrom
Ai-TOS-789:example/vanilla-js-yii3-cowork

Conversation

@Ai-TOS-789

Copy link
Copy Markdown

Summary

Adds a minimal, dependency-free example of Vanilla JS working together with a Yii3 backend, demonstrating the recommended way to:

  • return JSON from an action (ResponseFactoryInterface)
  • expose a JSON API route
  • serve plain JS/CSS through AssetBundle (auto-published to public/assets)

Changes

  • src/Web/Api/HealthAction.php (new): GET /api/health JSON endpoint.
  • config/common/routes.php: register Route::get('/api/health').
  • src/Web/Shared/Layout/Main/MainAsset.php: register app.js in $js.
  • assets/main/app.js (new): Vanilla JS fetching /api/health, updating DOM, with a refresh button. Lint-clean.
  • src/Web/HomePage/template.php: demo box (#yii3-vanilla-box).
  • assets/main/site.css: styles for the demo box/badge/button.

Verification

  • GET /api/health returns 200 JSON {status, framework, frontend, time}.
  • Homepage renders the demo box; <script src="/assets/main/<hash>/app.js"> and <link .../site.css> are emitted automatically.
  • phpstan analyse src config --level=5 → no errors.

Note / question for reviewers

While building this I hit WebViewRenderer::render('') throwing "The view path is not set" when trying to return a raw JSON response. This PR uses ResponseFactoryInterface instead. Should the template/docs recommend ResponseFactoryInterface for JSON APIs, and/or should WebViewRenderer allow an empty view path for API actions? (Tracked in #478 and discussions/479.)

How to test

php yii serve 0.0.0.0:8094 --docroot=public
# open http://127.0.0.1:8094/  -> Vanilla JS box loads status from the API

- New JSON API endpoint GET /api/health via ResponseFactoryInterface
- Register plain assets/main/app.js (Vanilla JS) through MainAsset
- Homepage demo box fetches the API and updates the DOM
- Verified: API 200 JSON, asset published, phpstan level 5 clean

See #478 and /discussions/479
@coderabbitai

coderabbitai Bot commented Aug 21, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 00e7141e-a9be-4a76-80b2-a958e2e991e2

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Aug 21, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 78.17%. Comparing base (db67e2e) to head (b8725f8).
⚠️ Report is 1 commits behind head on master.

Files with missing lines Patch % Lines
src/Web/Api/HealthAction.php 0.00% 16 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##             master     #480      +/-   ##
============================================
- Coverage     85.08%   78.17%   -6.92%     
- Complexity       29       31       +2     
============================================
  Files            11       12       +1     
  Lines           181      197      +16     
============================================
  Hits            154      154              
- Misses           27       43      +16     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@Ai-TOS-789 Ai-TOS-789 closed this by deleting the head repository Aug 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant