Modernize build dependencies

.eslintrc.js → .eslintrc.cjs

@@ -3,11 +3,7 @@ module.exports = {
     browser: true,
     es6: true
   },
-  extends: [
-    'eslint:recommended',
-    'wikimedia/client',
-    'plugin:cypress/recommended'
-  ],
+  extends: ['eslint:recommended', 'wikimedia/client', 'plugin:cypress/recommended', 'plugin:storybook/recommended'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -18,11 +14,15 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
+  ignorePatterns: ["storybook-static", "dist", "vite.config.js"],
   rules: {
     semi: [2, 'never'],
     'no-nonoctal-decimal-escape': 'off',
     'no-only-tests/no-only-tests': 'error',
-    'cypress/no-unnecessary-waiting': 'warn'
+    'cypress/no-unnecessary-waiting': 'warn',
+    'es-x/no-rest-spread-properties': 'off',
+    'es-x/no-export-ns-from': 'off',
+    'es-x/no-regexp-named-capture-groups': 'off'
   },
   plugins: [
     'cypress',

.github/workflows/main.yml

@@ -12,13 +12,16 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
+    strategy:
+      matrix:
+        node: [ 17, 'latest' ]
 
+    steps:
+      - uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: ${{ matrix.node }}
 
       - name: Install and Build
         run: |
@@ -39,17 +42,17 @@ jobs:
 
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v5
+        uses: tj-actions/branch-names@v7
 
       - name: Deploy Pages 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.5
+        uses: JamesIves/github-pages-deploy-action@v4.4.3
         with:
           branch: gh-pages
           folder: demo
           target-folder: ${{ steps.branch-name.outputs.current_branch }}
 
       - name: Deploy Storybook 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.5
+        uses: JamesIves/github-pages-deploy-action@v4.4.3
         with:
           branch: gh-pages
           folder: storybook-static

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 .nyc_output/
 .DS_Store
 storybook-static
+coverage/

.storybook/main.js

@@ -1,29 +1,21 @@
-const webpack = require('webpack')
 const path = require('path');
 
-const custom = require('../webpack.config.js')(null, {mode: 'development'});
-
 module.exports = {
   "stories": [
     "../src/**/*.stories.js"
   ],
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials"
   ],
-  webpackFinal: (config) => {
-    return {
-      ...config,
-      plugins: [
-        ...config.plugins,
-        new webpack.DefinePlugin( {
-          APP_VERSION: '"(mock app version)"',
-          GIT_HASH: '"(mock git hash)"'
-        } ) ],
-      module: {
-        ...config.module,
-        rules: custom.module.rules
-      }
-    };
+
+  framework: {
+    name: "@storybook/html-vite",
+    options: {}
   },
+
+  docs: {
+    autodocs: false
+  }
 }

.stylelintrc.json

@@ -1,11 +1,11 @@
 {
 	"extends": "stylelint-config-wikimedia",
-	"plugins": ["stylelint-no-unsupported-browser-features"],
+	"plugins": [ "stylelint-no-unsupported-browser-features" ],
 	"rules": {
-		"plugin/no-unsupported-browser-features": [true, {
+		"plugin/no-unsupported-browser-features": [ true, {
 			"severity": "warning",
 			"ignorePartialSupport": true
-		}],
+		} ],
 		"declaration-property-unit-disallowed-list": false
 	}
 }

README.md

@@ -141,11 +141,11 @@ To use the default trigger link styling:
 
 * Add the following link to the page header:
 ```html
-<link href="wikipedia-preview.css" rel="stylesheet">
+<link href="wikipedia-preview-link.css" rel="stylesheet">
 ```
 * Add the class `wmf-wp-with-preview` to the node
 
-If you prefer to style them in a way that makes more sense for your context, simply don't include the `wikipediaPreview.css` link in the header and add your own class to the node. Both of these are valid ways:
+If you prefer to style them in a way that makes more sense for your context, simply don't include the `wikipedia-preview-link.css` link in the header and add your own class to the node. Both of these are valid ways:
 
 ```CSS
 [data-wikipedia-preview] {

cypress.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig( {
+	defaultCommandTimeout: 8000,
+	chromeWebSecurity: false,
+	e2e: {
+		baseUrl: 'http://localhost:5173/' // your localhost port in vite (5173 is the default for vite server)
+	}
+} )

cypress/integration/gallery-spec.js → cypress/e2e/gallery.cy.js

@@ -14,7 +14,7 @@ describe( 'Check the Gallery Pages ', () => {
 		// Open the Preview
 		preview.getPreviewSpan().first().click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -35,7 +35,7 @@ describe( 'Check the Gallery Pages ', () => {
 		// Open the Preview
 		preview.getPreviewSpan().first().click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}

cypress/integration/mobile-gallery-spec.js → cypress/e2e/mobile-gallery.cy.js

@@ -14,7 +14,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 		// Open the Preview
 		preview.getPreviewSpan().first().click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -41,7 +41,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 		// Open the Preview
 		preview.getPreviewSpan().first().click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -64,7 +64,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 		// Open the Preview
 		preview.getPreviewSpan().eq( 4 ).click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -77,7 +77,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 			// Check the Gallery Page
 			gallery.checkGalleryPage( i )
 			// Check if the Caption Bar exist
-			gallery.getGalleryCaptionBar( i ).its( 'length' ).then( len => {
+			gallery.getGalleryCaptionBar( i ).its( 'length' ).then( ( len ) => {
 				if ( len > 0 ) {
 					// Scroll the Caption Text
 					gallery.getGalleryCaptionBar( i ).click()

cypress/integration/mobile-swipe-spec.js → cypress/e2e/mobile-swipe.cy.js

@@ -14,7 +14,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 		// Open the Preview
 		preview.getPreviewSpan().eq( 4 ).click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -35,7 +35,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 		// Open the Preview
 		preview.getPreviewSpan().eq( 4 ).click()
 		// Check for the Continue Reading exist
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
@@ -48,7 +48,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => {
 			// Check the Gallery Page
 			gallery.checkGalleryPage( i )
 			// Check if the Caption Bar exist
-			gallery.getGalleryCaptionBar( i ).its( 'length' ).then( len => {
+			gallery.getGalleryCaptionBar( i ).its( 'length' ).then( ( len ) => {
 				if ( len > 0 ) {
 					// Scroll the Caption Text
 					// gallery.getGalleryCaption( i ).swipe( 'bottom', 'center' )

cypress/integration/page-movement-spec.js → cypress/e2e/page-movement.cy.js

@@ -13,14 +13,14 @@
 		preview.getPreviewSpan().eq( 0 ).click()
 
 		// Continue Reading is available
-		preview.getFooterContinueReading().then( res => {
+		preview.getFooterContinueReading().then( ( res ) => {
 			if ( res.css( 'display' ) !== 'none' ) {
 				preview.getFooterContinueReading().click()
 			}
 		} )
 
 		// Open the Wikipedia Page in the same window
-		preview.getFooterReadMore().should( $a => {
+		preview.getFooterReadMore().should( ( $a ) => {
 			expect( $a.attr( 'target' ), 'target' ).to.equal( '_blank' )
 			$a.attr( 'target', '_self' )
 		} ).click()
@@ -33,7 +33,7 @@
 
 		// Check for the Preview
 		preview.getPreviewSpan().eq( 0 ).click()
 		cy.wait( 1000 )
 		preview.checkPreview()
 		preview.getHeaderClosebtn().click()
 
@@ -49,7 +49,7 @@
 
 		// Check for the Preview
 		preview.getPreviewSpan().eq( 0 ).click()
 		cy.wait( 1000 )
 		preview.checkPreview()
 		preview.getHeaderClosebtn().click()
 

cypress/page-objects/preview-page.js

@@ -95,7 +95,7 @@ export class Preview {
 		this.getHeader().should( 'be.visible' )
 		this.getHeaderWatermark().should( 'be.visible' )
 		this.getHeaderClosebtn().should( 'be.visible' )
-		this.getHeaderImage().its( 'length' ).then( len => {
+		this.getHeaderImage().its( 'length' ).then( ( len ) => {
 			if ( len > 0 ) {
 				this.getHeaderImage().should( 'be.visible' )
 			}
@@ -121,7 +121,7 @@ export class Preview {
 		this.getBody().should( 'be.visible' )
 		this.getBodyContent().should( 'be.visible' )
 			.and( 'have.css', 'font-size' ).and( 'equal', '18px' )
-		this.getHeaderImage().its( 'length' ).then( len => {
+		this.getHeaderImage().its( 'length' ).then( ( len ) => {
 			if ( len > 0 ) {
 				this.getBodyGallery().scrollIntoView().should( 'be.visible' )
 				this.getBodyGalleryImages().should( 'be.visible' )
@@ -140,15 +140,15 @@ export class Preview {
 		this.getHeaderWatermark().should( 'be.visible' )
 		this.getHeaderClosebtn().should( 'be.visible' )
 
-		this.getPreview().then( tag => {
+		this.getPreview().then( ( tag ) => {
 
 			const lang = tag.attr( 'lang' )
 
 			this.getBody().should( 'be.visible' )
 				.and( 'have.class', 'wikipediapreview-body-disambiguation' )
 				.and( 'have.css', 'font-size' ).and( 'equal', '16px' )
 
-			this.getBodyMessage().then( ele => {
+			this.getBodyMessage().then( ( ele ) => {
 				cy.wrap( ele ).find( 'div.wikipediapreview-body-icon' )
 			} )
 
@@ -166,15 +166,15 @@ export class Preview {
 		this.getHeaderWatermark().should( 'be.visible' )
 		this.getHeaderClosebtn().should( 'be.visible' )
 
-		this.getPreview().then( tag => {
+		this.getPreview().then( ( tag ) => {
 
 			const lang = tag.attr( 'lang' )
 
 			this.getBody().should( 'be.visible' )
 				.and( 'have.class', 'wikipediapreview-body-offline' )
 				.and( 'have.css', 'font-size' ).and( 'equal', '16px' )
 
-			this.getBodyMessage().then( ele => {
+			this.getBodyMessage().then( ( ele ) => {
 				cy.wrap( ele ).find( 'div.wikipediapreview-body-icon' ).should( 'be.visible' )
 				cy.wrap( ele ).find( 'span' ).should( 'contain', msg( lang, 'preview-offline-message' ) )
 
@@ -194,15 +194,15 @@ export class Preview {
 		this.getHeaderWatermark().should( 'be.visible' )
 		this.getHeaderClosebtn().should( 'be.visible' )
 
-		this.getPreview().then( tag => {
+		this.getPreview().then( ( tag ) => {
 
 			const lang = tag.attr( 'lang' )
 
 			this.getBody().should( 'be.visible' )
 				.and( 'have.class', 'wikipediapreview-body-error' )
 				.and( 'have.css', 'font-size' ).and( 'equal', '16px' )
 
-			this.getBodyMessage().then( ele => {
+			this.getBodyMessage().then( ( ele ) => {
 				cy.wrap( ele ).find( 'div.wikipediapreview-body-icon' )
 				cy.wrap( ele ).find( 'span' ).should( 'contain', msg( lang, 'preview-error-message' ) )
 

cypress/plugins/index.js

@@ -16,7 +16,7 @@
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line no-unused-vars
-module.exports = ( on, config ) => {
+export default ( on, config ) => {
 	// `on` is used to hook into various events Cypress emits
 	// `config` is the resolved Cypress config
 }

cypress/support/commands.js

@@ -1,12 +1,12 @@
 Cypress.Commands.add( 'navigateToTestPage', () => {
-	cy.visit( '/articles/test.html' )
+	cy.visit( 'demo/articles/test.html' )
 } )
 
 Cypress.Commands.add( 'navigateToEnglishPage', () => {
-	cy.visit( '/articles/english.html' )
+	cy.visit( 'demo/articles/english.html' )
 } )
 
 Cypress.Commands.add( 'navigateToMobileTestPage', () => {
 	cy.viewport( 550, 750 )
-	cy.visitMobile( '/articles/test.html' )
+	cy.visitMobile( 'demo/articles/test.html' )
 } )

demo/articles/arabic.html

@@ -9,7 +9,7 @@
         <link href="../css/header.css" rel="stylesheet" type="text/css"/>
         <link href="../css/footer.css" rel="stylesheet" type="text/css"/>
         <link href="../css/article.css" rel="stylesheet" type="text/css"/>
-        <link href="../wikipedia-preview.css" rel="stylesheet" type="text/css"/>
+        <link href="../css/link.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
         <a href="../index.html">
@@ -52,7 +52,7 @@
             </p>
         </div>
         <!-- Scripts -->
-        <script src="../wikipedia-preview.development.js"></script>
+        <script src="/dist/wikipedia-preview.umd.cjs"></script>
         <script>
             wikipediaPreview.init({
                 lang: 'ar'

demo/articles/bahasaIndonesia.html

@@ -9,7 +9,7 @@
         <link href="../css/header.css" rel="stylesheet" type="text/css"/>
         <link href="../css/footer.css" rel="stylesheet" type="text/css"/>
         <link href="../css/article.css" rel="stylesheet" type="text/css"/>
-        <link href="../wikipedia-preview.css" rel="stylesheet" type="text/css"/>
+        <link href="../css/link.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
         <a href="../index.html">
@@ -49,7 +49,7 @@
             </p>
         </div>
         <!-- Scripts -->
-        <script src="../wikipedia-preview.development.js"></script>
+        <script src="/dist/wikipedia-preview.umd.cjs"></script>
         <script>
             wikipediaPreview.init({
                 lang: 'id',