@technik-sde/foxy - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/foxy.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("foxy",[],t):"object"==typeof exports?exports.foxy=t():e.foxy=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";n.r(t),n.d(t,"Foxy",(function(){return s})),n.d(t,"utils",(function(){return r})),n.d(t,"handler",(function(){return u}));var r={loadImageInfo:function(e,t={}){const n={image:new Image,type:"",width:0,height:0};return fetch(e,t).then(e=>e.blob()).then(e=>(n.type=e.type.replace(/^[^/]+\//,""),URL.createObjectURL(e))).then(e=>new Promise((t,r)=>{n.image.addEventListener("load",()=>t()),n.image.addEventListener("error",r),n.image.src=e})).then(()=>(n.width=n.image.naturalWidth,n.height=n.image.naturalHeight,n))},loadVideoInfo:function(e,t={}){const n={type:"",width:0,height:0,video:document.createElement("video"),duration:0,poster:""};return fetch(e,t).then(e=>e.blob()).then(e=>(n.type=e.type.replace(/^[^/]+\//,""),URL.createObjectURL(e))).then(e=>new Promise((t,r)=>{n.video.addEventListener("error",r),n.video.addEventListener("loadedmetadata",()=>{const{video:e}=n;n.width=e.videoWidth,n.height=e.videoHeight,n.duration=e.duration,n.poster=e.poster,t(n)});const o=document.createElement("source");o.setAttribute("src",e),n.video.appendChild(o)}))}};const o=/^https:\/\/images\.unsplash\.com\/photo-\d{13}-[0-9a-f]{12}/;function i(e){const t=e.url.replace(/\?.*$/,""),n=new URLSearchParams(e.url.replace(/^.*\?/,""));return e.width&&n.set("w",e.width),e.height&&n.set("h",e.height),e.quality&&n.set("q",e.quality),e.fit&&n.set("fit",e.fit),e.auto&&n.set("fit",e.auto),`${t}?${n.toString()}`}class s{constructor(e={}){this.handlers=e.handlers||[]}addHandler(e,t=0){null==this.handlers[t]&&this.handlers.push(e),this.handlers.splice(t,0,e)}removeHandler(e){this.handlers=this.handlers.filter(t=>t!==e)}getImageURL(e){return this.get("getImageURL",e)}getImageInfo(e){return this.get("getImageInfo",e)}getVideoURL(e){return this.get("getVideoURL",e)}getVideoInfo(e){return this.get("getVideoInfo",e)}getURL(e){return this.get("getURL",e)}get(e,t){const n=this.findHandler(e,t);if(null==n)throw new Error(`There is no handler for method '${e}(${JSON.stringify(t)})'`);return n[e](t)}findHandler(e,t){for(const n of this.handlers)if("function"==typeof n[e]&&!0===n.use(t))return n}}const u={unsplash:{use:e=>o.test(e.url),getImageURL:e=>Promise.resolve(i(e)),getImageInfo:e=>r.loadImageInfo(i(e))},image:{use:e=>/^https?:\/\//.test(e.url),getImageURL:e=>Promise.resolve(e.url),getImageInfo:e=>r.loadImageInfo(e.url)},video:{use:e=>/^https?:\/\//.test(e.url),getVideoURL:e=>Promise.resolve(e.url),getVideoInfo:e=>r.loadVideoInfo(e.url)}}}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("foxy",[],t):"object"==typeof exports?exports.foxy=t():e.foxy=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";n.r(t),n.d(t,"Foxy",(function(){return r})),n.d(t,"handler",(function(){return u})),n.d(t,"utils",(function(){return o}));class r{constructor(e={}){this.handlers=e.handlers||[]}addHandler(e,t=0){null==this.handlers[t]&&this.handlers.push(e),this.handlers.splice(t,0,e)}removeHandler(e){this.handlers=this.handlers.filter(t=>t!==e)}getImageURL(e){return this.get("getImageURL",e)}getImageInfo(e){return this.get("getImageInfo",e)}getVideoURL(e){return this.get("getVideoURL",e)}getVideoInfo(e){return this.get("getVideoInfo",e)}getURL(e){return this.get("getURL",e)}get(e,t){const n=this.findHandler(e,t);if(null==n)throw new Error(`There is no handler for method '${e}(${JSON.stringify(t)})'`);return n[e](t)}findHandler(e,t){for(const n of this.handlers)if("function"==typeof n[e]&&!0===n.use(t))return n}}var o={loadImageInfo:function(e,t={}){const n={src:e,image:new Image,type:"",width:0,height:0};return fetch(e,t).then(e=>e.blob()).then(e=>(n.type=e.type.replace(/^[^/]+\//,""),URL.createObjectURL(e))).then(e=>new Promise((t,r)=>{n.image.addEventListener("load",()=>t()),n.image.addEventListener("error",r),n.image.src=e})).then(()=>(n.width=n.image.naturalWidth,n.height=n.image.naturalHeight,n))},loadVideoInfo:function(e,t={}){const n={src:e,width:0,height:0,video:document.createElement("video"),duration:0,poster:""};return fetch(e,t).then(e=>e.blob()).then(e=>(n.type=e.type.replace(/^[^/]+\//,""),URL.createObjectURL(e))).then(e=>new Promise((t,r)=>{n.video.addEventListener("error",r),n.video.addEventListener("loadedmetadata",()=>{const{video:e}=n;n.width=e.videoWidth,n.height=e.videoHeight,n.duration=e.duration,n.poster=e.poster,t(n)});const o=document.createElement("source");o.setAttribute("src",e),n.video.appendChild(o)}))},isHandler:function(e){return"[object Object]"===Object.prototype.toString.call(e)&&"function"==typeof e.use}};const i=/^https:\/\/images\.unsplash\.com\/photo-\d{13}-[0-9a-f]{12}/;function s(e){const t=e.url.replace(/\?.*$/,""),n=new URLSearchParams(e.url.replace(/^.*\?/,""));return e.width&&n.set("w",e.width),e.height&&n.set("h",e.height),e.quality&&n.set("q",e.quality),e.fit&&n.set("fit",e.fit),e.auto&&n.set("auto",e.auto),`${t}?${n.toString()}`}const u={unsplash:{use:e=>i.test(e.url),getImageURL:e=>Promise.resolve(s(e)),getImageInfo:e=>o.loadImageInfo(s(e))},image:{use:e=>/^https?:\/\//.test(e.url),getImageURL:e=>Promise.resolve(e.url),getImageInfo:e=>o.loadImageInfo(e.url)},video:{use:e=>/^https?:\/\//.test(e.url),getVideoURL:e=>Promise.resolve(e.url),getVideoInfo:e=>o.loadVideoInfo(e.url)}}}])}));

dist/index.d.ts

@@ -0,8 +1,9 @@
+import Foxy, { Options } from "./Foxy";
+import utils from "./utils";
+import Handler, { Request, URLRequest, InfoRequest } from "./handler/Handler";
 declare const handler: {
-    unsplash: import("./handler/Handler").default;
-    image: import("./handler/Handler").default;
-    video: import("./handler/Handler").default;
+    unsplash: Handler;
+    image: Handler;
+    video: Handler;
 };
-export { default as Foxy } from "./Foxy";
-export { default as utils } from "./utils";
-export { handler };
+export { Foxy, Options, Handler, Request, URLRequest, InfoRequest, handler, utils };

dist/utils.d.ts

 import AnyObject from "./AnyObject";
 import Handler from "./handler/Handler";
-export declare function isHandler(handler: any): handler is Handler;
+declare function isHandler(handler: any): handler is Handler;
 export interface ImageInfo {
+    src: string;
     type: string;
@@ -12,3 +13,4 @@ width: number;
 export interface VideoInfo {
-    type: string;
+    src: string;
+    type?: string;
     width: number;
@@ -24,3 +26,4 @@ height: number;
     loadVideoInfo: typeof loadVideoInfo;
+    isHandler: typeof isHandler;
 };
 export default _default;

package.json

 {
   "name": "@technik-sde/foxy",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/foxy.js",

README.md

@@ -5,7 +5,14 @@ # simple frontend proxy
 
+**Motivation** Our infrastructure may contain different media-services and on different environments. Having a set of nested widgets, libraries and applications they all access the same services within an environment. This frontend-proxy helps to open source applications, since internal ressources and behaviour can be configured, but its public api is consistent and has default handlers for the normal use-case.
 
+`yarn add @technik-sde/foxy`
+
+
+**Handler** A handler registers its methods for a specific request-object, containing an url-property. The handler will be selected for the exposed request-method, when its function `use(RequestObject):boolean` returns `true`.
+
+
 ## Usage
 
 ```js
-import { Foxy, utils } from "foxy";
+import { Foxy, utils } from "technik-sde/foxy";
 
@@ -36,3 +43,3 @@ const proxy = new Foxy({
 ```js
-import { Foxy } from "foxy";
+import { Foxy } from "technik-sde/foxy";
 
@@ -61,3 +68,3 @@ const proxy = new Foxy({
 
-Per default the following methods are supported via api: `getImageURL, getImageInfo, getVideoURL, getVideoInfo`. The 
+Per default the following methods are supported via api: `getImageURL`, `getImageInfo`, `getVideoURL`, `getVideoInfo`. The 
 generic method `get(methodName: string, requestData: AnyObject)` may be used to access any custom methods defined on
@@ -67,3 +74,3 @@ handlers. e.g.
 ```js
-import { Foxy } from "foxy";
+import { Foxy } from "technik-sde/foxy";
 
@@ -87,3 +94,22 @@ const proxy = new Foxy({
 
+## Handlers
 
+Currently three example handlers are exported with this module. They probably should not be used in production:
 
+- unsplash: allowing modification of query params to load images from unsplash.com
+- image: default image handler, to load image-urls and metadata
+- video: crude video handler to get video-type, dimensions and duration as metadata
+
+Import these handlers with
+
+```js
+import { handler } from "technik-sde/foxy";
+
+// handler.unsplash
+// handler.image
+// handler.video
+
+
+
+
+

src/handler/unsplash.ts

@@ -34,3 +34,3 @@ import Handler, { Request } from "./Handler";
     if (request.fit) params.set("fit", request.fit);
-    if (request.auto) params.set("fit", request.auto);
+    if (request.auto) params.set("auto", request.auto);
     return `${baseURL}?${params.toString()}`;
@@ -37,0 +37,0 @@ }

src/index.ts

@@ -0,1 +1,4 @@
+import Foxy, { Options } from "./Foxy";
+import utils from "./utils";
+import Handler, { Request, URLRequest, InfoRequest } from "./handler/Handler";
 import unsplash from "./handler/unsplash";
@@ -11,4 +14,12 @@ import image from "./handler/imageHandler";
 
-export { default as Foxy } from "./Foxy";
-export { default as utils } from "./utils";
-export { handler };
+export {
+    Foxy,
+    Options,
+    Handler,
+    Request,
+    URLRequest,
+    InfoRequest,
+    handler,
+    utils
+};
+

src/utils.ts

@@ -5,3 +5,3 @@ import AnyObject from "./AnyObject";
 
-export function isHandler(handler): handler is Handler {
+function isHandler(handler): handler is Handler {
     return Object.prototype.toString.call(handler) === "[object Object]" && typeof handler.use === "function";
@@ -12,2 +12,3 @@ }
 export interface ImageInfo {
+    src: string;
     type: string;
@@ -21,2 +22,3 @@ width: number;
     const result = {
+        src: url,
         image: new Image(),
@@ -26,3 +28,3 @@ type: "",
         height: 0
-    };
+    } as ImageInfo;
 
@@ -50,3 +52,4 @@ return fetch(url, fetchOptions)
 export interface VideoInfo {
-    type: string;
+    src: string;
+    type?: string;
     width: number;
@@ -62,3 +65,3 @@ height: number;
     const result = {
-        type: "",
+        src: url,
         width: 0,
@@ -69,3 +72,3 @@ height: 0,
         poster: ""
-    };
+    } as VideoInfo;
 
@@ -100,3 +103,4 @@ return fetch(url, fetchOptions)
     loadImageInfo,
-    loadVideoInfo
+    loadVideoInfo,
+    isHandler
 }

No alert changes

Improved metrics

Total package byte prevSize

31145

increased by5.69%

Lines of code

548

increased by3.4%

Number of lines in readme file

111

increased by30.59%

No dependency changes