Export version in public API (#53)

Author: MattiasBuelens

CHANGELOG.md

@@ -10,6 +10,11 @@
 > -   🏠 Internal
 > -   💅 Polish
 
+## Unreleased
+
+-   💅 Export `version` in public API. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
+-   💅 Allow importing `@theoplayer/web-ui/package.json`. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
+
 ## v1.7.0 (2024-02-15)
 
 -   🚀 Added support for loading in Node for static site generation (SSG) or server-side rendering (SSR). ([#50](https://github.com/THEOplayer/web-ui/pull/50))

package-lock.json

@@ -18,7 +18,9 @@
       "import": "./dist/THEOplayerUI.es5.mjs",
       "default": "./dist/THEOplayerUI.es5.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./package": "./package.json",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist/",
@@ -61,6 +63,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-virtual": "^3.0.2",
     "@rollup/pluginutils": "^5.0.4",

package.json

@@ -13,6 +13,8 @@
 ## Unreleased
 
 -   🐛 Fix "Warning: useLayoutEffect does nothing on the server" when using `@theoplayer/react-ui` in Node. ([#52](https://github.com/THEOplayer/web-ui/pull/52))
+-   💅 Export `version` in public API. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
+-   💅 Allow importing `@theoplayer/react-ui/package.json`. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
 
 ## v1.7.0 (2024-02-15)
 

react/CHANGELOG.md

@@ -16,7 +16,9 @@
       "import": "./dist/THEOplayerReactUI.es5.mjs",
       "default": "./dist/THEOplayerReactUI.es5.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./package": "./package.json",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist/",
@@ -58,6 +60,7 @@
     "theoplayer": "^6"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.5",
     "@swc/cli": "^0.1.62",

react/package.json

@@ -1,6 +1,7 @@
 import { defineConfig } from 'rollup';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json';
 import { minify, swc } from 'rollup-plugin-swc3';
 import * as path from 'node:path';
 import { readFile } from 'node:fs/promises';
@@ -106,6 +107,7 @@ function jsPlugins({ es5 = false, module = false, production = false, sourcemap
                 }
             }),
         nodeResolve(),
+        json(),
         // Transpile TypeScript.
         swc({
             include: './src/**',

react/rollup.config.mjs

@@ -3,3 +3,4 @@ export * from './UIContainer';
 export * from './DefaultUI';
 export * from './components/index';
 export * from './hooks/index';
+export * from './version';

react/src/index.ts

@@ -0,0 +1,6 @@
+import { version as packageVersion } from '../package.json';
+
+/**
+ * The version of Open Video UI for React.
+ */
+export const version: string = packageVersion;

react/src/version.ts

@@ -11,6 +11,7 @@ import { string } from 'rollup-plugin-string';
 import dts from 'rollup-plugin-dts';
 import inject from '@rollup/plugin-inject';
 import virtual from '@rollup/plugin-virtual';
+import json from '@rollup/plugin-json';
 
 const fileName = 'THEOplayerUI';
 const umdName = 'THEOplayerUI';
@@ -117,6 +118,7 @@ function jsPlugins({ es5 = false, node = false, module = false, production = fal
                 // Remove createTemplate() helper.
                 ['./src/util/TemplateUtils']: `export function createTemplate() { return () => undefined; }`
             }),
+        json(),
         // Run PostCSS on .css files.
         postcss({
             include: './src/**/*.css',

rollup.config.mjs

@@ -27,9 +27,9 @@ const template = createTemplate('theoplayer-default-ui', `<style>${defaultUiCss}
  * ## Usage
  *
  * 1. Create a `<theoplayer-default-ui>` element.
- * 1. Set its `configuration` attribute or property to a valid player configuration.
- * 1. Set its `source` attribute or property to a valid stream source.
- * 1. Optionally, customize the player using CSS custom properties and/or extra controls.
+ * 2. Set its `configuration` attribute or property to a valid player configuration.
+ * 3. Set its `source` attribute or property to a valid stream source.
+ * 4. Optionally, customize the player using CSS custom properties and/or extra controls.
  *
  * ## Customization
  *

src/DefaultUI.ts

@@ -54,10 +54,10 @@ const DEFAULT_DVR_THRESHOLD = 60;
  * ## Usage
  *
  * 1. Create a `<theoplayer-ui>` element.
- * 1. Place your UI elements as children of the `<theoplayer-ui>`.
+ * 2. Place your UI elements as children of the `<theoplayer-ui>`.
  *    Set their `slot` attribute to one of the defined slots (see below) to place them in the layout.
- * 1. Set its `configuration` attribute or property to a valid player configuration.
- * 1. Set its `source` attribute or property to a valid stream source.
+ * 3. Set its `configuration` attribute or property to a valid player configuration.
+ * 4. Set its `source` attribute or property to a valid stream source.
  *
  * ## Customization
  *

src/UIContainer.ts

@@ -7,3 +7,4 @@ export { type DeviceType } from './util/DeviceType';
 export { type StreamType } from './util/StreamType';
 export { type Constructor } from './util/CommonUtils';
 export { ColorStops } from './util/ColorStops';
+export * from './version';

src/index.ts

@@ -0,0 +1,6 @@
+import { version as packageVersion } from '../package.json';
+
+/**
+ * The version of Open Video UI for Web.
+ */
+export const version: string = packageVersion;

src/version.ts

@@ -4,6 +4,7 @@
     "module": "es2015",
     "moduleResolution": "bundler",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipDefaultLibCheck": true,