Modernize project: Vite + Vue 3 + Cypress 13 + GitHub Actions#23
Open
circlecube wants to merge 4 commits into
Open
Modernize project: Vite + Vue 3 + Cypress 13 + GitHub Actions#23circlecube wants to merge 4 commits into
circlecube wants to merge 4 commits into
Conversation
…Hub Actions - Replace Gulp build system with Vite 5 + @vitejs/plugin-vue - Migrate Vue 2 (vendor file) to Vue 3 (npm package) using Options API SFC - Replace Moment.js with native Intl.RelativeTimeFormat - Replace Font Awesome 4.6.3 (local) with @fortawesome/fontawesome-free 6 (npm) - Remove Modernizr; apply CSS Grid layout unconditionally (all modern browsers) - Drop IE/legacy browser targets from autoprefixer - Upgrade Cypress 1.0.3 → 13.x; migrate config from cypress.json to cypress.config.js and move tests from www/cypress/integration/ to cypress/e2e/ - Replace Travis CI with GitHub Actions workflow (Node 20 LTS) - Add src/ directory with App.vue, style.scss, main.js; font assets in src/assets/ - Remove gulpfile.js, .travis.yml, cypress.json (all superseded) For Capacitor (mobile) integration: set build.outDir: 'www' in vite.config.js https://claude.ai/code/session_016mM8ccmRQf7mAZQn83oZRS
Cypress 13 introduced testIsolation: true as the default, which navigates to about:blank before each test. The existing test suite was written for the old behavior where tests share browser state within a describe block (only the first test calls cy.visit). With testIsolation: false the tests run as originally intended. https://claude.ai/code/session_016mM8ccmRQf7mAZQn83oZRS
- Use v-show instead of v-if for .infomode and .option.number so
Cypress can assert .should('not.be.visible') on elements that
remain in the DOM (Cypress 13 requires elements to exist before
checking visibility)
- Use numeric:'always' in Intl.RelativeTimeFormat so log timestamps
always read "X seconds ago" rather than "now" (which lacked 'ago')
- Fix .logs selector typo in 'close logs' test (should be .log)
https://claude.ai/code/session_016mM8ccmRQf7mAZQn83oZRS
When a log entry is created fractions of a second before display, Math.round(diff) returns 0 and format(0, 'second') produces 'in 0 seconds' rather than 'ago'. Clamp to -1 so entries always display as '1 second ago' when the rounded value is zero. https://claude.ai/code/session_016mM8ccmRQf7mAZQn83oZRS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full toolchain modernization to bring the project up to date and ready for future mobile distribution via Capacitor.
@vitejs/plugin-vue.npm run devfor hot-reload dev server,npm run buildfor production output.src/App.vue) using the Options API. Logic is identical —filtersreplaced with a method,v-bind:/v-on:shortened to:/@.moment().fromNow()with nativeIntl.RelativeTimeFormat(zero extra bytes).@fortawesome/fontawesome-free. Only the solid icon set is imported to keep the bundle lean.cypress.jsontocypress.config.js; tests moved fromwww/cypress/integration/tocypress/e2e/with.cy.jsextension..github/workflows/ci.yml(Node 20 LTS,cypress-io/github-action@v6).gulpfile.js,.travis.yml,cypress.json(all superseded).New project structure
Mobile distribution (Capacitor — next step)
For wrapping in a native iOS/Android app (recommended over Cordova):
Or to keep the existing Cordova
www/convention, just setbuild.outDir: 'www'invite.config.js.Test plan
npm run dev— hot-reload dev server athttp://localhost:5173npm run build— clean build todist/with no warningsnpm run preview— serves built app athttp://localhost:8888https://claude.ai/code/session_016mM8ccmRQf7mAZQn83oZRS
Generated by Claude Code