v0.8.0

Author: skyrim

README.md

@@ -15,8 +15,14 @@ You can check out the live demo [here](http://skyrim.github.io/hlviewer.js)
 
 Download the library from __dist__ directory and include it in your html.
 ```html
+<link rel="stylesheet" src="your/path/to/hlviewer.style">
 <script src="your/path/to/hlviewer.min.js"></script>
 ```
+or use a CDN
+```html
+<link rel="stylesheet" src="https://unpkg.com/[email protected]/dist/hlviewer.css">
+<script src="https://unpkg.com/[email protected]/dist/hlviewer.min.js"></script>
+```
 
 Create a target element where viewer will later be created.  
 Width and height MUST be set.

demo.html

@@ -138,7 +138,8 @@ <h1 class="title">HLViewer</h1>
       <div id="hlv-target"></div>
     </div>
 
-    <script type="module" src="https://unpkg.com/[email protected]/dist/hlviewer.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/hlviewer.css" />
+    <script type="module" src="https://unpkg.com/[email protected]/dist/hlviewer.min.js"></script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
         var viewer = HLViewer.init('#hlv-target', 'res')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlviewer.js",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "View GoldSrc maps and replays in browser",
   "keywords": [
     "hlviewer",
@@ -9,7 +9,18 @@
     "goldsrc",
     "kreedz"
   ],
-  "main": "dist/hlviewer.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/hlviewer.min.js",
+  "module": "dist/hlviewer.js",
+  "exports": {
+    ".": {
+      "import": "./dist/hlviewer.js",
+      "require": "./dist/hlviewer.min.js"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build"
@@ -23,10 +34,6 @@
   "bugs": {
     "url": "https://github.com/skyrim/hlviewer.js/issues"
   },
-  "type": "module",
-  "files": [
-    "dist/hlviewer.js"
-  ],
   "homepage": "https://skyrim.github.io/hlviewer.js",
   "dependencies": {
     "gl-matrix": "^3.4.3",

vite.config.ts

@@ -10,6 +10,16 @@ export default defineConfig({
       name: 'HLViewer',
       fileName: (format) => (format === 'es' ? 'hlviewer.js' : 'hlviewer.min.js'),
       formats: ['es', 'umd']
+    },
+    rollupOptions: {
+      output: {
+        assetFileNames(assetInfo) {
+          if (assetInfo.name === 'style.css') {
+            return 'hlviewer.css'
+          }
+          return assetInfo.name || ''
+        }
+      }
     }
   },
   define: {