From 38408eefbaa1ea2f76184da22a77e88855ecfef2 Mon Sep 17 00:00:00 2001
From: eamedina <eamedina@wikimedia.org>
Date: Fri, 10 Nov 2023 14:37:13 -0400
Subject: [PATCH] build.lib

---
 demo/articles/english.html |  8 ++++----
 index.html                 | 34 +++++++++++++++++-----------------
 package.json               | 14 ++++++++++++--
 vite.config.js             |  8 +++++++-
 4 files changed, 40 insertions(+), 24 deletions(-)
diff --git a/demo/articles/english.html b/demo/articles/english.html
index 6e28bb46..718aade0 100644
--- a/demo/articles/english.html
+++ b/demo/articles/english.html
@@ -9,15 +9,15 @@
         <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="../../dist/style.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
-        <a href="../index.html">
+        <a href="../../index.html">
             <div class="header">Wikipedia Preview demo</div>
         </a>
         <div class="container">
             <div class="cover" style="background-image: url('../img/english-pic.png');">
-                <a href="../index.html">
+                <a href="../../index.html">
                     <div class="close-btn">
                         <div class="outer">
                             <img alt="Image/" src="../img/oval.png" class="oval" />
@@ -52,7 +52,7 @@
             </p>
         </div>
         <!-- Scripts -->
-        <script src="../wikipedia-preview.development.js"></script>
+        <script type="module" src="../../dist/wikipedia-preview.js"></script>
         <script>
             wikipediaPreview.init({
                 lang: 'en',
diff --git a/index.html b/index.html
index fc0796de..6f46fe45 100644
--- a/index.html
+++ b/index.html
@@ -6,18 +6,18 @@
         <meta content="yes" name="apple-mobile-web-app-capable"/>
         <meta content="yes" name="mobile-web-app-capable"/>
         <meta content="default" name="apple-mobile-web-app-status-bar-style"/>
-        <link href="./demo/css/header.css" rel="stylesheet" type="text/css"/>
-        <link href="./demo/css/footer.css" rel="stylesheet" type="text/css"/>
-        <link href="./demo/css/index.css" rel="stylesheet" type="text/css"/>
+        <link href="/demo/css/header.css" rel="stylesheet" type="text/css"/>
+        <link href="/demo/css/footer.css" rel="stylesheet" type="text/css"/>
+        <link href="/demo/css/index.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
         <div class="header">Wikipedia Preview demo</div>
         <div class="container">
             <div class="listview">
                 <div class="item">
-                    <a href="./demo/articles/english.html" target="_self">
+                    <a href="/demo/articles/english.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/english-pic.png');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/english-pic.png');"></div>
                         </div>
                         <div class="title">
                             Wildlife of the Central African Republic
@@ -31,9 +31,9 @@
                     </a>
                 </div>
                 <div class="item">
-                    <a href="./demo/articles/bahasaIndonesia.html" target="_self">
+                    <a href="/demo/articles/bahasaIndonesia.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/bahasa-indonesia-pic.jpg');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/bahasa-indonesia-pic.jpg');"></div>
                         </div>
                         <div class="title">
                             Gili Trawangan
@@ -47,9 +47,9 @@
                     </a>
                 </div>
                 <div class="item">
-                    <a href="./demo/articles/hindi.html" target="_self">
+                    <a href="/demo/articles/hindi.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/hindi-pic.png');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/hindi-pic.png');"></div>
                         </div>
                         <div class="title">
                             विस्तार से जानिये कालिंजर दुर्ग के बारे में
@@ -63,9 +63,9 @@
                     </a>
                 </div>
                 <div class="item">
-                    <a href="./demo/articles/thai.html" target="_self">
+                    <a href="/demo/articles/thai.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/thai-pic.png');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/thai-pic.png');"></div>
                         </div>
                         <div class="title">
                             เฉลิมชัย โฆษิตพิพัฒน์
@@ -79,9 +79,9 @@
                     </a>
                 </div>
                 <div class="item">
-                    <a href="./demo/articles/spanish.html" target="_self">
+                    <a href="/demo/articles/spanish.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/spanish-pic.png');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/spanish-pic.png');"></div>
                         </div>
                         <div class="title">
                             Nikola Tesla
@@ -95,9 +95,9 @@
                     </a>
                 </div>
                 <div class="item">
-                    <a href="./demo/articles/french.html" target="_self">
+                    <a href="/demo/articles/french.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/french-pic.png');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/french-pic.png');"></div>
                         </div>
                         <div class="title">
                             Conseil de sécurité des Nations unies
@@ -111,9 +111,9 @@
                     </a>
                 </div>
                 <div class="item last" dir="rtl">
-                    <a href="./demo/articles/arabic.html" target="_self">
+                    <a href="/demo/articles/arabic.html" target="_self">
                         <div class="image">
-                            <div class="cover" style="background-image: url('./demo/img/arabic-pic.jpg');"></div>
+                            <div class="cover" style="background-image: url('/demo/img/arabic-pic.jpg');"></div>
                         </div>
                         <div class="title">
                             أم كلثوم (مطربة)
diff --git a/package.json b/package.json
index a4ae899c..f46b4dd8 100644
--- a/package.json
+++ b/package.json
@@ -2,14 +2,24 @@
   "name": "wikipedia-preview",
   "version": "1.8.0",
   "description": "Shows Wikipedia article preview in a popup",
-  "main": "dist/wikipedia-preview.production.js",
+  "main": "dist/wikipedia-preview.umd.cjs",
+  "type": "module",
+  "files": ["dist"],
+  "module": "dist/wikipedia-preview.js",
+  "exports": {
+    ".": {
+      "import": "./dist/wikipedia-preview.js",
+      "require": "./dist/wikipedia-preview.umd.cjs"
+    }
+  },
   "scripts": {
     "test": "mocha --require ignore-styles,@babel/register,jsdom-global/register",
     "test:watch": "mocha --require ignore-styles,@babel/register,jsdom-global/register -w",
     "test:fix-lint": "eslint test --fix",
     "coverage": "nyc npm test",
     "build": "vite build",
-    "dev": "vite serve index.html",
+    "dev": "vite",
+    "preview": "vite preview",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "wba": "npm run build:prod && npx webpack-bundle-analyzer dist/stats.json",
diff --git a/vite.config.js b/vite.config.js
index bd868586..f1b05e38 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'path'
 
 import { defineConfig } from 'vite'
 // import vue from '@vitejs/plugin-vue'
@@ -17,6 +18,11 @@ export default defineConfig({
     }
   },
   build: {
-    target: 'es2015'
+    target: 'es2015',
+    lib: {
+        entry: resolve(__dirname, './src/index.js'),
+        name: 'wikipediaPreview',
+        fileName: 'wikipedia-preview',
+    }
   }
 })
