multiple libraries, add request and cookie

index.html

@@ -24,6 +24,7 @@
           </div>
           <div id="buttons" class="app-module">
             <button title="Edit Contact">Edit</button>
+            <button id="button-fetch" title="Fetch">Fetch</button>
           </div>
         </div>
       </div>

lib/ui.js

@@ -1,6 +1,6 @@
-import { createIcon, resolveIcon } from "./ui/icon"
+import { createIcon, resolveIcon } from "./ui/icon";
-import { createCheckbox, resolveCheckbox } from "./ui/checkbox"
+import { createCheckbox, resolveCheckbox } from "./ui/checkbox";
-import { setTooltip, resolveTooltip } from "./ui/tooltip"
+import { setTooltip, resolveTooltip } from "./ui/tooltip";
 
 export {
   createIcon,

lib/utility.js

@@ -0,0 +1,10 @@
+import { getCookie, setCookie, deleteCookie } from "./utility/cookie";
+import { get, post } from "./utility/request";
+
+export {
+    getCookie,
+    setCookie,
+    deleteCookie,
+    get,
+    post
+}

lib/utility/cookie.d.ts

@@ -0,0 +1,3 @@
+export function getCookie(name: string): string
+export function setCookie(name: string, value: string, expireDays?: Number): void
+export function deleteCookie(name: string): void

lib/utility/cookie.js

@@ -0,0 +1,34 @@
+function setCookie(name, value, expireDays) {
+    let extra = `; domain=${location.host}; path=/`;
+    if (expireDays != null) {
+        const d = new Date();
+        d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
+        extra += `; expires=${d.toGMTString()}`;
+    }
+    if (/^(https|wss):$/.test(location.protocol)) {
+        extra += '; secure';
+    }
+    document.cookie = `${name}=${encodeURIComponent(value)}${extra}`;
+}
+
+function getCookie(name) {
+    name += '=';
+    const cookies = document.cookie.split(';');
+    for (let cookie of cookies) {
+        cookie = cookie.trim();
+        if (cookie.indexOf(name) === 0) {
+            return decodeURIComponent(cookie.substring(name.length));
+        }
+    }
+    return null;
+}
+
+function deleteCookie(name) {
+    setCookie(name, '', -1);
+}
+
+export {
+    getCookie,
+    setCookie,
+    deleteCookie
+}

lib/utility/request.d.ts

@@ -0,0 +1,9 @@
+interface RequestOptions {
+    method?: string;
+    contentType?: string;
+    customerHeaders?: { [key: string]: string };
+    signal?: AbortSignal | null;
+}
+
+export function get(url: string, options?: RequestOptions): Promise<Response>
+export function post(url: string, data?: BodyInit | null, options?: RequestOptions): Promise<Response>

lib/utility/request.js

@@ -0,0 +1,38 @@
+function combineUrl(url) {
+    if (typeof consts === 'undefined') {
+        return url;
+    }
+    return (consts.path || '') + url;
+}
+
+function get(url, options) {
+    options ??= {};
+    return fetch(combineUrl(url), {
+        method: options.method || 'GET',
+        headers: {
+            ...options.customerHeaders,
+            'Content-Type': options.contentType || 'application/json'
+        },
+        signal: options.signal,
+        cache: 'default'
+    });
+}
+
+function post(url, data, options) {
+    options ??= {};
+    return fetch(combineUrl(url), {
+        method: options.method || 'POST',
+        headers: {
+            ...options.customerHeaders,
+            'Content-Type': options.contentType || 'application/json'
+        },
+        body: data,
+        signal: options.signal,
+        cache: 'no-cache'
+    });
+}
+
+export {
+    get,
+    post
+}

main.js

@@ -1,9 +1,10 @@
 import './css/ui.min.css'
 import './style.css'
-import javascriptLogo from './javascript.svg'
+// import javascriptLogo from './javascript.svg'
 import { resolveCheckbox, resolveIcon, resolveTooltip } from './lib/ui'
+import { get, post } from './lib/utility'
 
-document.querySelector('#js-logo').src = javascriptLogo
+// document.querySelector('#js-logo').src = javascriptLogo
 
 window.consts = {
     path: '/',
@@ -19,3 +20,12 @@ resolveIcon(document.querySelector('#create-icon'))
 resolveCheckbox(document.querySelector('#create-checkbox'))
 
 resolveTooltip(document.querySelector('#buttons'))
+
+document.querySelector('#button-fetch').addEventListener('click', () => {
+    // get('./javascript.svg')
+    //     .then(r => r.blob())
+    //     .then(blob => document.querySelector('#js-logo').src = URL.createObjectURL(blob));
+    post('./', JSON.stringify({ a: 1, b: 'test' }))
+        .then(r => console.log(r))
+        .catch(e => console.warn(e));
+});

package.json

@@ -6,17 +6,19 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/ui-lib.umd.cjs",
-  "module": "./dist/ui-lib.js",
   "exports": {
-    "./lib": {
+    "ui": {
-      "import": "./dist/ui-lib.js",
+      "import": "./dist/ui.es.js",
-      "require": "./dist/ui-lib.umd.cjs"
+      "require": "./dist/ui.min.js"
+    },
+    "utility": {
+      "import": "./dist/utility.es.js",
+      "require": "./dist/utility.min.js"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "node ./vite.build.js"
   },
   "devDependencies": {
     "vite": "^4.0.4"

vite.build.js

@@ -0,0 +1,24 @@
+import { build } from "vite";
+
+const libraries = [
+  {
+    entry: './lib/ui.js',
+    name: 'lib-ui'
+  },
+  {
+    entry: './lib/utility.js',
+    name: 'lib-utility'
+  }
+]
+
+libraries.forEach(async (lib) => {
+  await build({
+    build: {
+      lib: {
+        ...lib,
+        formats: ['umd'],
+        fileName: (_format, name) => `${name}.min.js`
+      }
+    }
+  })
+})

vite.config.js

@@ -1,11 +0,0 @@
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: './lib/main.js',
-      name: 'uiLib',
-      fileName: 'ui-lib'
-    }
-  }
-})