From e72738a03e11af35c3f3609e6bbe7ee24f199dd2 Mon Sep 17 00:00:00 2001 From: Domizio Demichelis Date: Tue, 4 Jun 2024 21:08:32 +0700 Subject: [PATCH] Deprecate/rename javascript files keeping copies of old files to avoid production breaking changes; updates playground apps --- CHANGELOG.md | 6 +- docs/api/javascript/setup.md | 101 ++------- e2e/cypress/e2e/calendar.cy.ts | 2 +- e2e/cypress/e2e/demo.cy.ts | 2 +- e2e/cypress/support/test-helper.ts | 2 +- gem/apps/demo.ru | 13 +- gem/apps/rails.ru | 16 +- gem/apps/repro.ru | 20 +- gem/javascripts/pagy-dev.js | 104 --------- .../{pagy-module.d.ts => pagy.d.ts} | 0 gem/javascripts/pagy.js | 5 +- gem/javascripts/pagy.min.js | 4 + gem/javascripts/pagy.min.js.map | 10 + gem/javascripts/pagy.mjs | 101 +++++++++ gem/pagy.gemspec | 2 + scripts/version-bump.sh | 9 +- src/build.sh | 18 +- src/main.js | 1 - src/pagy.min.js | 2 + src/pagy.ts | 203 +++++++++--------- src/tsconfig.json | 9 + test/pagy_test.rb | 12 +- 22 files changed, 315 insertions(+), 327 deletions(-) delete mode 100644 gem/javascripts/pagy-dev.js rename gem/javascripts/{pagy-module.d.ts => pagy.d.ts} (100%) create mode 100644 gem/javascripts/pagy.min.js create mode 100644 gem/javascripts/pagy.min.js.map create mode 100644 gem/javascripts/pagy.mjs delete mode 100644 src/main.js create mode 100644 src/pagy.min.js create mode 100644 src/tsconfig.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d06448e6..aff0566cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,11 @@ If you upgrade from version `< 8.0.0` see the following: - The `foundation`, `materialize`, `semantic` and `uikit` CSS extras have been discontinued and will be removed in v9 (See the [details](https://github.com/ddnexus/pagy/discussions/672#discussioncomment-9212328)) - Protected method `Pagy#setup_pages_var`. Use `Pagy#setup_last_var` instead - +- **Javascript files renamed** + - `pagy.js`: use `pagy.min.js` + - `pagy-module.js`: use `pagy.mjs` + - `pagy-dev.js`: use the `pagy.min.js`with the `pagy.min.js.map` + - `pagy-module.d.ts`: use `pagy.d.ts`
## Version 8.4.2 diff --git a/docs/api/javascript/setup.md b/docs/api/javascript/setup.md index 4861c941f..8455ef074 100644 --- a/docs/api/javascript/setup.md +++ b/docs/api/javascript/setup.md @@ -30,7 +30,7 @@ in the browser. ### 1. Pick a Javascript File -+++ `pagy-module.js` ++++ `pagy.mjs` !!! success Your app uses modern build tools @@ -38,19 +38,19 @@ Your app uses modern build tools * ES6 module to use with webpacker, esbuild, parcel, etc. -[!file](/gem/javascripts/pagy-module.js) +[!file](/gem/javascripts/pagy.mjs) ```ruby -module_path = Pagy.root.join('javascripts', 'pagy-module.js') +module_path = Pagy.root.join('javascripts', 'pagy.mjs') ``` -[!file](/gem/javascripts/pagy-module.d.ts) +[!file](/gem/javascripts/pagy.d.ts) ```ruby -types_path = Pagy.root.join('javascripts', 'pagy-modules.d.ts') +types_path = Pagy.root.join('javascripts', 'pagy.d.ts') ``` -+++ `pagy.js` ++++ `pagy.min.js` !!! success Your app needs standard script or old browser compatibility !!! @@ -59,30 +59,22 @@ Your app needs standard script or old browser compatibility production pages and without any further processing * Minified (~2k) and polyfilled to work also with quite old browsers -[!file](/gem/javascripts/pagy.js) +[!file](/gem/javascripts/pagy.min.js) ```ruby -script_path = Pagy.root.join('javascripts', 'pagy.js') +script_path = Pagy.root.join('javascripts', 'pagy.min.js') ``` -+++ `pagy-dev.js` ++++ `pagy.min.js.map` !!! success -You need to debug the javascript helpers +You need to debug the javascript helpers while using the `pagy.min.js` file !!! -!!! warning Debug only! - -* Large size -* It contains the source map to debug typescript -* It works only on new browsers - -!!! - -[!file](/gem/javascripts/pagy-dev.js) +[!file](/gem/javascripts/pagy.min.js.map) ```ruby -script_path = Pagy.root.join('javascripts', 'pagy-dev.js') +script_path = Pagy.root.join('javascripts', 'pagy.min.js.map') ``` +++ @@ -112,11 +104,11 @@ Rails.application.config.assets.paths << Pagy.root.join('javascripts') #uncommen ``` ```js app/assets/config/manifest.js -//= link pagy-module.js +//= link pagy.mjs ``` ```ruby config/importmap.rb -pin 'pagy-module' +pin 'pagy' ``` +++ Propshaft @@ -133,18 +125,18 @@ Rails.application.config.assets.paths << Pagy.root.join('javascripts') #### Builders -In order to bundle the `pagy-module.js` your builder has to find it either with a link or local copy, or by looking into the pagy +In order to bundle the `pagy.mjs` your builder has to find it either with a link or local copy, or by looking into the pagy javascript path: +++ Generic -You can create a symlink or a copy of the `pagy-module.js` file (available in the pagy gem) into an app compiled dir and use it as +You can create a symlink or a copy of the `pagy.mjs` file (available in the pagy gem) into an app compiled dir and use it as a regular app file. That way any builder will pick it up. For example: ```ruby config/initializers/pagy.rb -# Create/refresh the `app/javascript/pagy-module.js` symlink/copy every time +# Create/refresh the `app/javascript/pagy.mjs` symlink/copy every time # the app restarts (unless in production), ensuring syncing when pagy is updated. # Replace the FileUtils.ln_sf with FileUtils.cp if your OS doesn't support file linking. -FileUtils.ln_sf(Pagy.root.join('javascripts', 'pagy-module.js'), Rails.root.join('app', 'javascript')) \ +FileUtils.ln_sf(Pagy.root.join('javascripts', 'pagy.mjs'), Rails.root.join('app', 'javascript')) \ unless Rails.env.production? ``` @@ -178,55 +170,6 @@ module.exports = { } ``` -#### Legacy way - -Ensure that the `erb` loader is installed: - -```sh -bundle exec rails webpacker:install:erb -``` - -Generate a local pagy javascript file using `erb` with webpacker: - -```erb app/javascript/packs/pagy.js.erb -<%= Pagy.root.join('javascripts', 'pagy.js').read %> -window.addEventListener(YOUR_EVENT_LISTENER, Pagy.init) -``` - -_where `YOUR_EVENT_LISTENER` is the load event that works with your app ( -e.g. `"turbo:load"`, `"turbolinks:load"`, `"load"`, ...)._ - -```js app/javascript/application.js -import './pagy.js.erb' -``` - -+++ Rollup -Prepend the `NODE_PATH` environment variable to the `scripts.build` command: - -```json package.json -{ - "build": "NODE_PATH=\"$(bundle show 'pagy')/javascripts\" " -} -``` - -Configure the `plugins[resolve]`: - -```js rollup.confg.js -export default { - ..., // your original config - plugins: [ - resolve({ - moduleDirectories: [ // add moduleDirectories - "node_modules", // node_modules dir - process.env.PAGY_PATH // pagy dir - ] - }) - ] -} -``` - -+++ - #### Non-Rails apps * Just ensure `Pagy.root.join('javascripts', 'pagy.js')` is served with the page. @@ -239,7 +182,7 @@ After the helper is loaded you have to initialize `Pagy` to make it work: ```js pagy_initializer_controller.js import {Controller} from "@hotwired/stimulus" -import Pagy from "pagy-module" // if using sprockets, you can remove above line, but make sure you have the appropriate directive if your manifest.js file. +import Pagy from "pagy" // if using sprockets, you can remove above line, but make sure you have the appropriate directive if your manifest.js file. export default class extends Controller { connect() { @@ -258,7 +201,7 @@ export default class extends Controller { Import and use the pagy module: ```js app/javascript/application.js -import Pagy from "pagy-module"; +import Pagy from "pagy"; window.addEventListener("turbo:load", Pagy.init); ``` @@ -266,8 +209,8 @@ window.addEventListener("turbo:load", Pagy.init); +++ Others ```js -// if you choose pagy-module.js -import Pagy from "pagy-module" +// if you choose pagy.mjs +import Pagy from "pagy" // plain javascript window.addEventListener("load", Pagy.init) diff --git a/e2e/cypress/e2e/calendar.cy.ts b/e2e/cypress/e2e/calendar.cy.ts index 5bab9e4c9..ede9ce347 100644 --- a/e2e/cypress/e2e/calendar.cy.ts +++ b/e2e/cypress/e2e/calendar.cy.ts @@ -1,6 +1,6 @@ import {snapIds} from "../support/test-helper.ts"; -const app = "calendar"; +const app = "calendar"; const calIds = ["#year-nav", "#month-nav", "#day-nav", "#pagy-info"]; describe(`[${app}] Test helpers`, () => { diff --git a/e2e/cypress/e2e/demo.cy.ts b/e2e/cypress/e2e/demo.cy.ts index 84802691f..433d49e83 100644 --- a/e2e/cypress/e2e/demo.cy.ts +++ b/e2e/cypress/e2e/demo.cy.ts @@ -1,6 +1,6 @@ import {testNav, testComboNav, testInfo, testItemsSelector} from "../support/test-helper.ts"; -const app = "demo"; +const app = "demo"; const paths = [ "/pagy", "/bootstrap", diff --git a/e2e/cypress/support/test-helper.ts b/e2e/cypress/support/test-helper.ts index d64b38046..85286fecf 100644 --- a/e2e/cypress/support/test-helper.ts +++ b/e2e/cypress/support/test-helper.ts @@ -63,7 +63,7 @@ export function testComboNav(app:string, id:string) { export function testItemsSelector(app:string, id:string, path = "/", trim = false) { it(`[${app}] Test ${id}`, () => { - const pages = [1, 36, 50]; + const pages = [1, 36, 50]; const id_input = `${id} input`; for (const page of pages) { cy.visit(`${path}?page=${page}`); diff --git a/gem/apps/demo.ru b/gem/apps/demo.ru index 5e7581824..10e064d56 100644 --- a/gem/apps/demo.ru +++ b/gem/apps/demo.ru @@ -69,7 +69,12 @@ class PagyDemo < Sinatra::Base end get('/javascripts/:file') do - content_type 'application/javascript' + format = params[:file].split('.').last + if format == 'js' + content_type 'application/javascript' + elsif format == 'map' + content_type 'application/json' + end send_file Pagy.root.join('javascripts', params[:file]) end @@ -233,7 +238,7 @@ __END__ Pagy Demo App - + @@ -242,7 +247,7 @@ __END__