From 9291ae7db5a1eff4bdae195be570f832e9841730 Mon Sep 17 00:00:00 2001 From: Josep Boix Requesens Date: Tue, 6 Feb 2024 22:26:44 +0100 Subject: [PATCH] fix: update build and distribution configuration Addresses several updates to the distribution configuration: - Removed `browser` field to prioritize `module` imports. - Added `style` and `types` field to the package.json. - Updated the output file name in the `"build:css"` script from `video-js.min.css` to `pillarbox.min.css`. - Updated the quick guide to reflect how to properly integrate the library. These configuration was tested in conjunction with the demo (see SRGSSR/pillarbox-web-demo#7) to ensure that the library is easily integrated as a npm module. --- docs/README.md | 12 +++++++++--- docs/api/index.md | 12 +++++++++--- package.json | 8 ++++---- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/docs/README.md b/docs/README.md index 40c6572..5cd2db0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,13 @@ experience of SRGSSR content, making it more accessible and feature-rich. ## Quick Start -To get started with Pillarbox, you can install it through `npm` using the following command: +To get started with Pillarbox, add the `@srgssr` registry in the `.npmrc` file of your project: + +```text +@srgssr:registry=https://npm.pkg.github.com +``` + +You can now install it through `npm` the following command: ```bash npm install --save @srgssr/pillarbox @@ -25,13 +31,13 @@ In your HTML file, add the following code to initialize Pillarbox: Import the CSS file in your HTML to apply Pillarbox default theme: ```html - + ``` Finally, import Pillarbox and set up the player: ```javascript -import Pillarbox from 'pillarbox'; +import Pillarbox from '@srgssr/pillarbox-web'; const player = new Pillarbox('my-player', {// Options... }); player.src({ src: 'urn:swi:video:48115940', type: 'srgssr/urn' }); diff --git a/docs/api/index.md b/docs/api/index.md index 18ae57b..6aca063 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -5,7 +5,13 @@ Video.js. ## Quick Guide -To get started with Pillarbox, you can install it through `npm` using the following command: +To get started with Pillarbox, add the `@srgssr` registry in the `.npmrc` file of your project: + +```text +@srgssr:registry=https://npm.pkg.github.com +``` + +You can now install it through `npm` the following command: ```bash npm install --save @srgssr/pillarbox @@ -20,13 +26,13 @@ In your HTML file, add the following code to initialize Pillarbox: Import the CSS file in your HTML to apply Pillarbox default theme: ```html - + ``` Finally, import Pillarbox and set up the player: ```javascript -import Pillarbox from 'pillarbox'; +import Pillarbox from '@srgssr/pillarbox-web'; const player = new Pillarbox('my-player', {// Options... }); player.src({ src: 'urn:swi:video:48115940', type: 'srgssr/urn' }); diff --git a/package.json b/package.json index 68f43db..fd0591e 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "description": "Pillarbox is the modern SRG SSR player", "version": "0.6.9", "type": "module", - "main": "dist/pillarbox.es.js", - "browser": "dist/pillarbox.umd.js", + "module": "dist/pillarbox.es.js", + "style": "./dist/pillarbox.min.css", + "types": "./dist/types/pillarbox.d.ts", "files": [ "dist/*", - "docs/*", "scss/*" ], "directories": { @@ -23,7 +23,7 @@ }, "scripts": { "build": "npm run build:lib && npm run build:typings && npm run build:css", - "build:css": "sass ./scss/pillarbox.scss:dist/video-js.min.css --style compressed --source-map --load-path node_modules", + "build:css": "sass ./scss/pillarbox.scss:dist/pillarbox.min.css --style compressed --source-map --load-path node_modules", "build:lib": "rollup -c", "build:typings": "npx -p typescript tsc", "eslint": "eslint --ext .js src",