chore: enhance create script and add tests

- Added a `platform` prompt to the creation script to specify if the element targets video.js or pillarbox. Templates have been adapted based on the platform answer. - Included tests for the `create` script, which will execute in the CI only when changes are detected in the scripts folder. - Added keywords in the template and all existing packages.
SRGSSR · May 22, 2024 · fa2b4c6 · fa2b4c6
1 parent 54520dc
commit fa2b4c6
Show file tree

Hide file tree

Showing 16 changed files with 222 additions and 59 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,7 +9,8 @@
   "overrides": [
     {
       "files": [
-        "packages/**/test/**"
+        "packages/**/test/**",
+        "scripts/**/test/**"
       ],
       "plugins": [
         "vitest"

diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
@@ -41,3 +41,17 @@ jobs:
 
       - name: Report Coverage
         uses: davelosert/vitest-coverage-report-action@v2
+
+      - name: Filter changes in scripts folder
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            scripts:
+              - 'scripts/**'
+
+      - name: Run create tests if scripts folder changed
+        if: steps.filter.outputs.scripts == 'true'
+        run: |
+          echo "Changes detected in scripts folder."
+          npm run test:create
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -2,3 +2,12 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm test
+
+# Check for changes in the scripts folder
+if git diff --name-only origin/main | grep -q '^scripts/'; then
+  echo "Changes detected in scripts folder."
+  echo "Running npm run test:create"
+  npm run test:create
+else
+  echo "No changes in scripts folder. Skipping npm run test:create"
+fi
diff --git a/package.json b/package.json
@@ -3,24 +3,26 @@
   "description": "A suite of plugins and themes for pillarbox-web",
   "version": "0.0.1",
   "license": "MIT",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SRGSSR/pillarbox-web-suite.git"
   },
+  "homepage": "https://srgssr.github.io/pillarbox-web-suite",
+  "type": "module",
   "workspaces": [
     "packages/*",
     "themes/*"
   ],
   "scripts": {
     "create": "plop --plopfile scripts/create.js",
     "eslint": "eslint {packages/**/{src,test}/**/*.{js,jsx},scripts/*.{js,jsx}}",
+    "github:page": "npm run github:page --ws && node scripts/prepare-deployment.js",
     "outdated": "npm outdated",
     "prepare": "husky",
     "stylelint": "stylelint **/*.{css,scss} --allow-empty-input",
     "stylelint:fix": "stylelint **/*.{css,scss} --fix",
-    "github:page": "npm run github:page --ws && node scripts/prepare-deployment.js",
-    "test": "vitest run --coverage --reporter=verbose --silent"
+    "test": "vitest run --coverage --reporter=verbose --silent",
+    "test:create": "vitest run --config scripts/vitest.scripts.config.js"
   },
   "devDependencies": {
     "@babel/core": "^7.24.1",
@@ -40,6 +42,7 @@
     "jsdom": "^24.0.0",
     "parcel": "^2.12.0",
     "plop": "^4.0.1",
+    "node-plop": "^0.32.0",
     "sass": "^1.75.0",
     "stylelint": "^16.3.1",
     "stylelint-config-rational-order": "^0.1.2",

diff --git a/packages/pillarbox-playlist/package.json b/packages/pillarbox-playlist/package.json
@@ -1,6 +1,13 @@
 {
   "name": "@srgssr/pillarbox-playlist",
+  "description": "Add Playlist management capabilities to video.js",
   "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SRGSSR/pillarbox-web-suite.git"
+  },
+  "homepage": "https://srgssr.github.io/pillarbox-web-suite/pillarbox-playlist",
   "type": "module",
   "main": "dist/pillarbox-playlist.cjs.js",
   "module": "dist/pillarbox-playlist.es.js",
@@ -16,14 +23,13 @@
     "dist/*",
     "scss/*"
   ],
-  "targets": {
-    "main": false,
-    "github-page": {
-      "publicUrl": "./",
-      "isLibrary": false,
-      "outputFormat": "esmodule"
-    }
-  },
+  "keywords": [
+    "video.js",
+    "player",
+    "pillarbox",
+    "pillarbox-plugin",
+    "playlist"
+  ],
   "scripts": {
     "build": "npm run build:lib && npm run build:css",
     "build:css": "sass ./scss/pillarbox-playlist.scss:dist/pillarbox-playlist.min.css --style compressed --source-map --load-path node_modules",

diff --git a/packages/skip-button/package.json b/packages/skip-button/package.json
@@ -1,6 +1,13 @@
 {
   "name": "@srgssr/skip-button",
+  "description": "A button to skip certain parts of the content, such as opening credits or end credits",
   "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SRGSSR/pillarbox-web-suite.git"
+  },
+  "homepage": "https://srgssr.github.io/pillarbox-web-suite/skip-button",
   "type": "module",
   "main": "dist/skip-button.cjs.js",
   "module": "dist/skip-button.es.js",
@@ -16,6 +23,13 @@
     "dist/*",
     "scss/*"
   ],
+  "keywords": [
+    "video.js",
+    "player",
+    "pillarbox",
+    "pillarbox-plugin",
+    "skip-button"
+  ],
   "scripts": {
     "build": "npm run build:lib && npm run build:css",
     "build:css": "sass ./scss/skip-button.scss:dist/skip-button.min.css --style compressed --source-map --load-path node_modules",

diff --git a/scripts/create.js b/scripts/create.js
@@ -8,12 +8,21 @@ export default function(plop) {
   plop.setGenerator('plugin', {
     description: 'Create a new Pillarbox elemet',
     prompts: [
+      {
+        type: 'list',
+        name: 'platform',
+        message: 'Which platform are you targeting?',
+        choices: [
+          { name: 'Pillarbox \x1b[90m(Contains business logic linked to SRG SSR media content)\x1b[0m', value: 'pillarbox' },
+          { name: 'Video.js \x1b[90m(Standard video.js element without specific business logic)\x1b[0m', value: 'videojs' }
+        ]
+      },
       {
         type: 'list',
         name: 'type',
         message: 'What type of the element would you like to create?',
         choices: [
-          { name: 'Plugin \x1b[90m(Extend Pillarbox functionality or add new features)\x1b[0m', value: 'Plugin' },
+          { name: 'Plugin \x1b[90m(Extend the player functionality or add new features)\x1b[0m', value: 'Plugin' },
           { name: 'Component \x1b[90m(Manipulate or display content within the player)\x1b[0m', value: 'Component' },
           { name: 'Button \x1b[90m(Provide custom interactive functionality to the player)\x1b[0m', value: 'Button' }
         ]
@@ -38,6 +47,9 @@ export default function(plop) {
         globOptions: {
           dot: true,
           ignore: !data.wantLocalization ? '**/src/lang/**' : undefined
+        },
+        data: {
+          importAlias: data.platform === 'pillarbox' ? '@srgssr/pillarbox-web' : 'video.js'
         }
       }
     ]

diff --git a/scripts/template/README.md.hbs b/scripts/template/README.md.hbs
@@ -29,26 +29,24 @@ visit: [Authenticating with a Personal Access Token][token-guide].
 You can now install it through `npm` the following command:
 
 ```bash
-npm install --save @srgssr/pillarbox-web @srgssr/{{kebabCase name}}
+npm install --save {{importAlias}} @srgssr/{{kebabCase name}}
 ```
 
+{{#ifEq platform 'pillarbox'}}
 For instructions on setting up Pillarbox, see the [Quick Start guide](SRGSSR/pillarbox-web#quick-start).
 
+{{/ifEq}}
 Once the player is installed you can activate the {{lowerCase type}} as follows:
 
 ```javascript
-import Pillarbox from '@srgssr/pillarbox-web';
+import {{platform}} from '{{importAlias}}';
 import '@srgssr/{{kebabCase name}}';
 
 {{#ifEq type 'plugin'}}
-const player = new Pillarbox('my-player', { plugins: { '{{camelCase name}}': true } });
+const player = {{platform}}('my-player', { plugins: { '{{camelCase name}}': true } });
 {{else}}
-const player = new Pillarbox('my-player', { {{properCase name}}: true });
+const player = {{platform}}('my-player', { {{properCase name}}: true });
 {{/ifEq}}
-player.src({
-  src: 'urn:swi:video:48115940',
-  type: 'srgssr/urn'
-});
 ```
 
 ## Contributing

diff --git a/scripts/template/package.json.hbs b/scripts/template/package.json.hbs
@@ -1,6 +1,12 @@
 {
   "name": "@srgssr/{{kebabCase name}}",
   "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SRGSSR/pillarbox-web-suite.git"
+  },
+  "homepage": "https://srgssr.github.io/pillarbox-web-suite/{{kebabCase name}}",
   "type": "module",
   "main": "dist/{{kebabCase name}}.cjs.js",
   "module": "dist/{{kebabCase name}}.es.js",
@@ -16,14 +22,13 @@
     "dist/*",
     "scss/*"
   ],
-  "targets": {
-    "main": false,
-    "github-page": {
-      "publicUrl": "./",
-      "isLibrary": false,
-      "outputFormat": "esmodule"
-    }
-  },
+  "keywords": [
+    "video.js",
+    "player"{{#ifEq platform 'videojs'}}{{#ifEq type 'Plugin'}},
+    "videojs-plugin"{{/ifEq}}{{else}},
+    "pillarbox"{{#ifEq type 'Plugin'}},
+    "pillarbox-plugin"{{/ifEq}}{{/ifEq}}
+  ],
   "scripts": {
     "build": "npm run build:lib && npm run build:css",
     "build:css": "sass ./scss/{{kebabCase name}}.scss:dist/{{kebabCase name}}.min.css --style compressed --source-map --load-path node_modules",
@@ -33,6 +38,9 @@
     "test": "vitest run --silent --coverage --coverage.reporter text"
   },
   "peerDependencies": {
+    "{{importAlias}}": {{#ifEq platform 'pillarbox'}}"^1.12.1"{{else}}"^8.0.0"{{/ifEq}}
+  }{{#ifEq platform 'videojs'}},
+  "devDependencies": {
     "@srgssr/pillarbox-web": "^1.12.1"
-  }
+  }{{/ifEq}}
 }
diff --git a/scripts/template/src/lang/index.js b/scripts/template/src/lang/index.js
diff --git a/scripts/template/src/lang/index.js.hbs b/scripts/template/src/lang/index.js.hbs
@@ -0,0 +1,12 @@
+import * as de from './de.json';
+import * as en from './en.json';
+import * as fr from './fr.json';
+import * as it from './it.json';
+import * as rm from './rm.json';
+import {{platform}} from '{{importAlias}}';
+
+{{platform}}.addLanguage('de', de);
+{{platform}}.addLanguage('en', en);
+{{platform}}.addLanguage('fr', fr);
+{{platform}}.addLanguage('it', it);
+{{platform}}.addLanguage('rm', rm);
diff --git a/scripts/template/src/{{kebabCase name}}.js.hbs b/scripts/template/src/{{kebabCase name}}.js.hbs
@@ -1,45 +1,44 @@
-import pillarbox from '@srgssr/pillarbox-web';
+import {{platform}} from '{{importAlias}}';
 {{#if wantLocalization}}import './lang';{{/if}}
 
 {{#ifEq type 'Plugin'}}
 /**
  * @ignore
  * @type {typeof import('video.js/dist/types/plugin').default}
  */
-const Plugin = pillarbox.getPlugin('plugin');
+const Plugin = {{platform}}.getPlugin('plugin');
 
 /**
- * Represents a {{properCase name}} plugin for the pillarbox player.
+ * Represents a {{properCase name}} plugin for the {{platform}} player.
  */
 class {{properCase name}} extends Plugin {
   /**
    * Creates an instance of a {{properCase name}}.
    *
-   * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
+   * @param {import('{{importAlias}}{{#ifEq platform 'pillarbox'}}').Player}{{else}}/dist/types/player.js').default}{{/ifEq}} player The player instance.
    * @param {Object} options Configuration options for the plugin.
    */
   constructor(player, options) {
     super(player, options);
   }
 }
 
-pillarbox.registerPlugin('{{camelCase name}}', {{properCase name}});
-
+{{platform}}.registerPlugin('{{camelCase name}}', {{properCase name}});
 {{else}}
 /**
 * @ignore
 * @type {typeof import('video.js/dist/types/{{kebabCase type}}').default}
 */
-const {{type}} = pillarbox.getComponent('{{type}}');
+const {{type}} = {{platform}}.getComponent('{{type}}');
 
 /**
-* Represents a {{properCase name}} component for the pillarbox player.
+* Represents a {{properCase name}} component for the {{platform}} player.
 */
 class {{properCase name}} extends {{type}} {
   /**
   * Creates an instance of a {{properCase name}}.
   *
-  * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
+  * @param {import('{{importAlias}}{{#ifEq platform 'pillarbox'}}').Player}{{else}}/dist/types/player.js').default}{{/ifEq}} player The player instance.
   * @param {Object} options Configuration options for the component.
   */
   constructor(player, options) {
@@ -55,8 +54,7 @@ class {{properCase name}} extends {{type}} {
   }
 }
 
-pillarbox.registerComponent('{{properCase name}}', {{properCase name}});
+{{platform}}.registerComponent('{{properCase name}}', {{properCase name}});
 {{/ifEq}}
 
-
 export default {{properCase name}};
diff --git a/scripts/template/test/{{kebabCase name}}.spec.js.hbs b/scripts/template/test/{{kebabCase name}}.spec.js.hbs
@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
-import pillarbox from '@srgssr/pillarbox-web';
+import {{platform}} from '{{importAlias}}';
 import {{properCase name}} from '../src/{{kebabCase name}}.js';
 
 window.HTMLMediaElement.prototype.load = () => {};
@@ -14,13 +14,13 @@ describe('{{properCase name}}', () => {
 
   beforeEach(() => {
 {{#ifEq type 'Plugin'}}
-    player = pillarbox(videoElement, {
+    player = {{platform}}(videoElement, {
       plugins: {
         {{camelCase name}}: true
       }
     });
 {{else}}
-    player = pillarbox(videoElement, {
+    player = {{platform}}(videoElement, {
       {{properCase name}}: true
     });
 {{/ifEq}}
@@ -32,10 +32,10 @@ describe('{{properCase name}}', () => {
 
   it('should be registered and attached to the player', () => {
 {{#ifEq type 'Plugin'}}
-    expect(pillarbox.getPlugin('{{camelCase name}}')).toBe({{properCase name}});
+    expect({{platform}}.getPlugin('{{camelCase name}}')).toBe({{properCase name}});
     expect(player.{{camelCase name}}).toBeDefined();
 {{else}}
-    expect(pillarbox.getComponent('{{properCase name}}')).toBe({{properCase name}});
+    expect({{platform}}.getComponent('{{properCase name}}')).toBe({{properCase name}});
     expect(player.{{properCase name}}).toBeDefined();
 {{/ifEq}}
   });

diff --git a/scripts/template/vite.config.lib.js.hbs b/scripts/template/vite.config.lib.js.hbs
@@ -18,7 +18,7 @@ export default defineConfig({
       entry: 'src/{{kebabCase name}}.js'
     },
     rollupOptions: {
-      external: ['@srgssr/pillarbox-web'],
+      external: ['{{importAlias}}'],
       plugins: [babel({
         babelHelpers: 'bundled',
         exclude: 'node_modules/**'