@thepassle/app-tools 0.7.0 → 0.7.2

package/api/index.js

@@ -9,45 +9,12 @@ function handleStatus(response) {
   return response;
 }
 
-/**
- * @typedef {object} Config
- * @property {Plugin[]} [plugins=[]]
- * @property {'text'|'json'|'stream'|'blob'|'arrayBuffer'|'formData'|'stream'} [responseType=json]
- * @property {string} [baseURL]
- * 
- * @typedef {(url: string, data?: object, opts?: RequestOptions) => Promise<FetchResponse>} BodyMethod
- * @typedef {(url: string, opts?: RequestOptions) => Promise<FetchResponse>} BodylessMethod
- * @typedef {Response & { [key: string]: any }} FetchResponse
- * @typedef {'GET'|'DELETE'|'HEAD'|'OPTIONS'|'POST'|'PUT'|'PATCH'} Method
- *
- * @typedef {{
- *  beforeFetch?: (meta: MetaParams) => MetaParams | Promise<MetaParams> | void,
- *  afterFetch?: (res: Response) => Response | Promise<Response>,
- *  transform?: (data: any) => any,
- *  name: string,
- *  handleError?: (e: Error) => boolean
- * }} Plugin
- * 
- * @typedef {Object} CustomRequestOptions
- * @property {(data: FetchResponse) => FetchResponse} [transform] - callback to transform the received data
- * @property {'text'|'json'|'stream'|'blob'|'arrayBuffer'|'formData'|'stream'} [responseType] - responseType of the request, will call res[responseType](). Defaults to 'json'
- * @property {Record<string, string>} [params] - An object to be queryParam-ified and added to the request url
- * @property {Plugin[]} [plugins] - Array of plugins. Plugins can be added on global level, or on a per request basis
- * @property {string} [baseURL] - BaseURL to resolve all requests from. Can be set globally, or on a per request basis. When set on a per request basis, will override the globally set baseURL (if set)
- * 
- * @typedef {RequestInit & CustomRequestOptions} RequestOptions
- * 
- * @typedef {{
- *  responseType: string,
- *  baseURL: string,
- *  url: string,
- *  method: Method,
- *  headers: Headers,
- *  opts?: RequestOptions,
- *  data?: any,
- *  fetchFn: typeof globalThis.fetch
- * }} MetaParams
- */
+/** @typedef {import('./types.js').Config} Config */
+/** @typedef {import('./types.js').Method} Method */
+/** @typedef {import('./types.js').Plugin} Plugin */
+/** @typedef {import('./types.js').CustomRequestOptions} CustomRequestOptions */
+/** @typedef {import('./types.js').RequestOptions} RequestOptions */
+/** @typedef {import('./types.js').MetaParams} MetaParams */
 
 /**
  * @example 
@@ -115,7 +82,17 @@ export class Api {
       }
     }
 
-    log(`Fetching ${method} ${url}`, { responseType, headers: Object.fromEntries(headers), fetchFn, baseURL, url, method, opts, data });
+    log(`Fetching ${method} ${url}`, { 
+      responseType, 
+      // @ts-ignore
+      headers: Object.fromEntries(headers), 
+      fetchFn, 
+      baseURL, 
+      url, 
+      method, 
+      opts, 
+      data 
+    });
     return fetchFn(url, {
       method,
       headers,
@@ -167,19 +144,19 @@ export class Api {
     });
   }
 
-  /** @type {BodylessMethod} */
+  /** @type {import('./types.js').BodylessMethod<object>} */
   get = (url, opts) => this.fetch(url, 'GET', opts);
-  /** @type {BodylessMethod} */
+  /** @type {import('./types.js').BodylessMethod<object>} */
   options = (url, opts) => this.fetch(url, 'OPTIONS', opts);
-  /** @type {BodylessMethod} */
+  /** @type {import('./types.js').BodylessMethod<object>} */
   delete = (url, opts) => this.fetch(url, 'DELETE', opts);
-  /** @type {BodylessMethod} */
+  /** @type {import('./types.js').BodylessMethod<object>} */
   head = (url, opts) => this.fetch(url, 'HEAD', opts);
-  /** @type {BodyMethod} */
+  /** @type {import('./types.js').BodyMethod<object>} */
   post = (url, data, opts) => this.fetch(url, 'POST', opts, data);
-  /** @type {BodyMethod} */
+  /** @type {import('./types.js').BodyMethod<object>} */
   put = (url, data, opts) => this.fetch(url, 'PUT', opts, data);
-  /** @type {BodyMethod} */
+  /** @type {import('./types.js').BodyMethod<object>} */
   patch = (url, data, opts) => this.fetch(url, 'PATCH', opts, data);
 }
 

package/dialog/index.js

@@ -6,13 +6,10 @@ import { createLogger } from '../utils/log.js';
 const log = createLogger('dialog');
 
 /**
- * @typedef {HTMLDialogElement & { form: HTMLFormElement }} DialogNode
- * @typedef {Record<string, {
- *  opening?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void,
- *  opened?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void,
- *  closing?: (opts: {dialog: DialogNode}) => void,
- *  closed?: (opts: {dialog: DialogNode}) => void,
- * }>} Config 
+ * @typedef {import('./types.js').DialogNode} DialogNode
+ * @typedef {import('./types.js').DialogCallbacks} DialogCallbacks
+ * @typedef {import('./types.js').Config} Config
+ * @typedef {import('./types.js').OpenDialogOptions} OpenDialogOptions
  */
 
 setupGlobalDialogStyles();
@@ -118,11 +115,7 @@ export class Dialog extends EventTarget {
   }
 
   /**
-   * 
-   * @param {{
-   *   id: string,
-   *   parameters?: object
-   * }} options 
+   * @param {OpenDialogOptions} options 
    * @returns 
    */
   async open({id, parameters}) {

package/package.json

@@ -1,27 +1,38 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "",
   "main": "index.js",
   "type": "module",
   "scripts": {
     "test": "wtr **/*.test.js --node-resolve",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "lint:types": "tsc",
+    "lint:types:watch": "tsc --watch"
   },
   "exports": {
     "./state.js": "./state.js",
     "./pwa.js": "./pwa.js",
-    "./dialog.js": "./dialog.js",
-    "./pwa/*.js": "./pwa/*.js",
-    "./api.js": "./api.js",
-    "./router.js": "./router.js",
-    "./router/plugins/*.js": "./router/plugins/*.js",
-    "./api/plugins/*.js": "./api/plugins/*.js",
+    "./dialog.js": {
+      "types": "./dialog/types.d.ts",
+      "default": "./dialog.js"
+    },
+    "./pwa/*": "./pwa/*",
+    "./api.js": {
+      "types": "./api/types.d.ts",
+      "default": "./api.js"
+    },
+    "./router.js": {
+      "types": "./router/types.d.ts",
+      "default": "./router.js"
+    },
+    "./router/plugins/*": "./router/plugins/*",
+    "./api/plugins/*": "./api/plugins/*",
     "./utils.js": "./utils.js",
-    "./utils/*.js": "./utils/*.js",
+    "./utils/*": "./utils/*",
     "./env.js": {
-      "development": "./env/env-dev.js",
-      "default": "./env/env-prod.js"
+      "development": "./env/dev.js",
+      "default": "./env/prod.js"
     },
     "./package.json": "./package.json"
   },
@@ -57,6 +68,7 @@
   "devDependencies": {
     "@open-wc/testing": "^3.1.6",
     "@web/test-runner": "^0.13.31",
-    "sinon": "^14.0.0"
+    "sinon": "^14.0.0",
+    "typescript": "^4.9.4"
   }
 }

package/pwa/index.js

@@ -29,8 +29,7 @@ class Pwa extends EventTarget {
   installPrompt;
   /** @type {ServiceWorker | undefined} */
   __waitingServiceWorker;
-  /** @type {boolean} */
-  isInstalled = media.STANDALONE();
+  isInstalled = /** @type {boolean} */ (media.STANDALONE());
 
   /** Triggers the install prompt, when it's available. You can call this method when the `'installable'` event has fired. */
   triggerPrompt = async () => {
@@ -58,7 +57,7 @@ class Pwa extends EventTarget {
 
   /**
    * @param {string} swPath 
-   * @param {RegistrationOptions} opts 
+   * @param {RegistrationOptions} [opts] 
    * @returns {Promise<ServiceWorkerRegistration> | Promise<void>}
    */
   register(swPath, opts) {

package/router/index.js

@@ -12,31 +12,11 @@ class RouteEvent extends Event {
 }
 
 /**
- * @typedef {{
- *  name: string,
- *  shouldNavigate?: (context: Context) => {
- *   condition: () => boolean | (() => Promise<boolean>),
- *   redirect: string
- *  },
- *  beforeNavigation?: (context: Context) => void,
- *  afterNavigation?: (context: Context) => void,
- * }} Plugin
- * @typedef {{
- *  title?: string,
- *  query: Object,
- *  params: Object,
- *  url: URL,
- *  [key: string]: any
- * }} Context
- * @typedef {{
- *  path: string,
- *  title: string | ((context: Context) => string),
- *  render?: <RenderResult>(context: Context) => RenderResult
- *  plugins?: Plugin[]
- * }} RouteDefinition
- * @typedef {RouteDefinition & {
- *  urlPattern?: any,
- * }} Route
+ * @typedef {import('./types.js').Plugin} Plugin
+ * @typedef {import('./types.js').Context} Context
+ * @typedef {import('./types.js').RouteDefinition} RouteDefinition
+ * @typedef {import('./types.js').Route} Route
+ * @typedef {import('./types.js').Config} Config
  */
 
 export class Router extends EventTarget {
@@ -48,11 +28,7 @@ export class Router extends EventTarget {
   }
 
   /**
-   * @param {{
-   *   fallback?: string,
-   *   plugins?: Plugin[],
-   *   routes: RouteDefinition[]
-   * }} config 
+   * @param {Config} config 
    */
   constructor(config) {
     super();
@@ -62,6 +38,7 @@ export class Router extends EventTarget {
     this.routes = config.routes.map((route) => {
       const r = /** @type {unknown} */ ({
         ...route,
+        // @ts-ignore
         urlPattern: new URLPattern({
           pathname: route.path,
           baseURL: window.location.href,

package/state/index.js

@@ -22,7 +22,7 @@ export class State extends EventTarget {
 
   setState(state) {
     log('Before: ', this.#state);
-    this.#state = typeof state === 'function' ? state(this.#state) : state;
+    this.#state = typeof state === 'function' ? state?.(this.#state) : state;
     log('After: ', this.#state);
     this.dispatchEvent(new StateEvent(this.#state));
   }

package/env/env-dev.js

@@ -1,2 +0,0 @@
-export const DEV = true;
-export const PROD = false;

package/env/env-prod.js

@@ -1,2 +0,0 @@
-export const DEV = false;
-export const PROD = true;