0x1eef/postman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: 0x1eef:39d5f51ee0d003b4906a48af9ab878602ac957e5
Branches Tags
0x1eef:main
..
compare: 0x1eef:4f222ffda6a5a6acfa211e91d099e0297b98311a
Branches Tags
0x1eef:main

10 commits
39d5f51ee0 ... 4f222ffda6

Author SHA1 Message Date
0x1eef
4f222ffda6 Add source 2024-07-12 02:33:34 -03:00
0x1eef
d552685ff2 Update README 2024-07-12 02:30:23 -03:00
0x1eef
9edf257a1d Update README 2024-07-12 02:28:40 -03:00
0x1eef
9d831d6d04 Add share/postman/examples/ 2024-07-12 02:26:46 -03:00
0x1eef
3b9f683b5b Add "See also" 2024-07-12 02:10:05 -03:00
0x1eef
c7112a7640 Reorder args 2024-07-12 01:54:50 -03:00
0x1eef
466c10ba08 Add improvements 2024-07-12 01:51:20 -03:00
0x1eef
2efc9eace2 Apply eslint 2024-07-12 01:00:31 -03:00
0x1eef
23a2b2f9e8 Add eslint, prettier, ts-standard 2024-07-12 01:00:04 -03:00
0x1eef
bb1d672339 Update example 2024-07-12 00:35:17 -03:00
8 changed files with 195 additions and 112 deletions
Show stats Expand all files Collapse all files

18
.eslintrc.js Normal file
View file

@ -0,0 +1,18 @@
module.exports = {
extends: ["standard-with-typescript", "prettier"],
plugins: ["prettier"],
parserOptions: { project: "./tsconfig.json", },
rules: {
"prettier/prettier": [
"error",
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"printWidth": 85,
"arrowParens": "avoid"
}
]
},
};

37
README.md
View file

@ -19,7 +19,7 @@ progress bar is removed once the delivery is complete:
<html>
<head>
<title>Postman</title>
<script type="module" src="/postman.js"></script>
<script type="module" src="delivery.js"></script>
</head>
<body>
<div class="postman loader">
@ -31,39 +31,46 @@ progress bar is removed once the delivery is complete:
</html>
```
**postman.js**
**delivery.js**
```typescript
import postman, { item } from "postman";
document.addEventListener("DOMContentLoaded", () => {
const progressBar = document.querySelector("progress");
const bar = document.querySelector("progress");
const span = document.querySelector(".percentage");
postman(
const delivery = postman(
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.script("/js/app.js"),
item.image("/images/app.png"),
item.css("/css/app.css"),
item.progress((percent) => {
progressBar.value = percent;
bar.value = percent;
span.innerText = `${percent}%`;
})
).deliver()
.then((package) => {
/* Add page assets */
package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */
progressBar.remove();
span.remove();
});
).deliver();
delivery.then((package) => {
/* Add page assets */
package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */
bar.remove();
span.remove();
});
});
```
## See also
* [https://al-quran.reflectslight.io/](https://al-quran.reflectslight.io) <br>
Delivers all of its assets with Postman
## Sources
* [GitHub](https://github.com/0x1eef/postman)
* [GitLab](https://gitlab.com/0x1eef/postman)
* [brew.bsd.cafe/@0x1eef](https://brew.bsd.cafe/@0x1eef)
## License

12
package.json
View file

@ -3,10 +3,14 @@
"version": "0.1.0",
"description": "Delivers the assets of a web page",
"main": "dist/index.js",
"types": ["dist/index.d.ts"],
"types": [
"dist/index.d.ts"
],
"scripts": {
"build": "npm exec tsc",
"prepare": "npm run build"
"prepare": "npm run build",
"tsc": "npm exec tsc -- --noEmit",
"eslint": "npm exec eslint -- src/*.ts src/**/*.ts"
},
"repository": {
"type": "git",
@ -16,6 +20,10 @@
"license": "0BSDL",
"devDependencies": {
"@types/node": "^16.18",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"ts-standard": "^12.0.2",
"typescript": "^4.5"
}
}

25
share/postman/examples/progressbar/delivery.js Normal file
View file

@ -0,0 +1,25 @@
import postman, { item } from "postman";
document.addEventListener("DOMContentLoaded", () => {
const bar = document.querySelector("progress");
const span = document.querySelector(".percentage");
const delivery = postman(
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.script("/js/app.js"),
item.image("/images/app.png"),
item.css("/css/app.css"),
item.progress((percent) => {
bar.value = percent;
span.innerText = `${percent}%`;
})
).deliver();
delivery.then((package) => {
/* Add page assets */
package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */
bar.remove();
span.remove();
});
});

14
share/postman/examples/progressbar/index.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Postman</title>
<script type="module" src="postman.js"></script>
</head>
<body>
<div class="postman loader">
<progress value="0" max="100"></progress>
<span class="percentage"></span>
</div>
</div>
</body>
</html>

96
src/index.ts
View file

@ -1,73 +1,79 @@
import type { Item, FontItem } from './postman/item';
import item from './postman/item';
import request from './postman/request';
import type { Item, FontItem } from "./postman/item";
import item from "./postman/item";
import request from "./postman/request";
type Postman = { deliver: () => Promise<Package> };
type Args = Array<Item | FontItem | Function>
interface Postman {
deliver: () => Promise<Package>;
}
type Args = Array<Item | FontItem | ((n: number) => number)>;
type Items = Array<Item | FontItem>;
type Package = {
fonts: FontFace[]
images: HTMLElement[]
css: HTMLElement[]
scripts: HTMLElement[]
json: HTMLElement[]
};
interface Package {
fonts: FontFace[];
images: HTMLElement[];
css: HTMLElement[];
scripts: HTMLElement[];
json: HTMLElement[];
}
function parseArgs(args: Args): [Items, Function] {
function parseArgs(args: Args): [Items, (n: number) => number] {
const items: Items = [];
let callback: Function = (n: number) => n
args.forEach((item) => {
if (typeof item === 'function') {
callback = item;
let progresscb = (n: number): number => n;
args.forEach(item => {
if (typeof item === "function") {
progresscb = item;
} else {
items.push(item);
}
});
return [items, callback];
return [items.sort((i1, i2) => (i1.priority >= i2.priority ? 1 : -1)), progresscb];
}
export { item };
export default function (...args: Args) {
const self: Postman = Object.create(null);
const result: Package = { fonts: [], images: [], css: [], scripts: [], json: [] };
const [items, callback] = parseArgs(args);
items.sort((i1, i2) => i1.priority >= i2.priority ? 1 : -1);
export default function (...args: Args): Postman {
const self = Object.create(null);
const [items, progresscb] = parseArgs(args);
const _package: Package = {
fonts: [],
images: [],
css: [],
scripts: [],
json: [],
};
let index = 0;
const onProgress = <T>(el: T) => {
function onProgress<T>(el: T): T {
index++;
if (index <= items.length) {
callback(100 * (index / items.length));
progresscb(100 * (index / items.length));
}
return el;
};
}
const spawnRequests = () => {
const reqs = items.map((item: Item | FontItem) => {
if ('fontFamily' in item) {
function fetch(): Array<Promise<Package | null>> {
return items.map(async (item: Item | FontItem) => {
if ("fontFamily" in item) {
const req = request.font;
return req(item)
.then((el) => onProgress<FontFace>(el))
.then((font) => result.fonts.push(font))
.then(() => result);
} else if(item.requestId !== 'font' && item.group !== 'fonts') {
return await req(item)
.then(el => onProgress<FontFace>(el))
.then(font => _package.fonts.push(font))
.then(() => _package);
} else if (item.requestId !== "font" && item.group !== "fonts") {
const req = request[item.requestId];
const ary = result[item.group];
return req(item)
.then((el) => onProgress<HTMLElement>(el))
.then((el) => ary.push(el))
.then(() => result);
const ary = _package[item.group];
return await req(item)
.then(el => onProgress<HTMLElement>(el))
.then(el => ary.push(el))
.then(() => _package);
} else {
return null;
}
/* unreachable */
return null;
});
return reqs as Array<Promise<Package>>;
};
}
self.deliver = async () => {
await Promise.all<Package>(spawnRequests());
return result;
await Promise.all(fetch());
return _package;
};
return self;

59
src/postman/item.ts
View file

@ -1,65 +1,70 @@
type Group = 'fonts' | 'images' | 'css' | 'scripts' | 'json';
type RequestID = 'font' | 'image' | 'css' | 'script' | 'json';
type Group = "fonts" | "images" | "css" | "scripts" | "json";
type RequestID = "font" | "image" | "css" | "script" | "json";
export type Item = {
priority: number
group: Group
requestId: RequestID
href: string
props?: Partial<HTMLElement>
};
export interface Item {
priority: number;
group: Group;
requestId: RequestID;
href: string;
props?: Partial<HTMLElement>;
}
export type FontItem = {
fontFamily: string
fontFamily: string;
} & Item;
export default {
font(fontFamily: string, href: string): FontItem {
return {
priority: 1,
group: 'fonts',
requestId: 'font',
href, fontFamily,
group: "fonts",
requestId: "font",
href,
fontFamily,
};
},
image(href: string, props?: Partial<HTMLElement>): Item {
return {
priority: 2,
group: 'images',
requestId: 'image',
href, props
group: "images",
requestId: "image",
href,
props,
};
},
css(href: string, props?: Partial<HTMLElement>): Item {
return {
priority: 3,
group: 'css',
requestId: 'css',
href, props
group: "css",
requestId: "css",
href,
props,
};
},
script(href: string, props?: Partial<HTMLElement>): Item {
return {
priority: 4,
group: 'scripts',
requestId: 'script',
href, props
group: "scripts",
requestId: "script",
href,
props,
};
},
json(href: string, props?: Partial<HTMLElement>): Item {
return {
priority: 5,
group: 'json',
requestId: 'json',
href, props
}
group: "json",
requestId: "json",
href,
props,
};
},
progress(fn: (percent: number) => void): (percent: number) => void {
return fn;
}
},
};

46
src/postman/request.ts
View file

@ -1,43 +1,43 @@
import type { Item, FontItem } from './item';
import type { Item, FontItem } from "./item";
export default {
font(item: FontItem): Promise<FontFace> {
async font(item: FontItem): Promise<FontFace> {
const { fontFamily, href } = item;
return new FontFace(fontFamily, href).load();
return await new FontFace(fontFamily, href).load();
},
script(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
async script(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
const { href } = item;
return fetch(href, options)
.then((res) => res.text())
.then((text) => ({ type: 'application/javascript', text }))
.then((props) => Object.assign(document.createElement('script'), props));
return await fetch(href, options)
.then(async res => await res.text())
.then(text => ({ type: "application/javascript", text }))
.then(props => Object.assign(document.createElement("script"), props));
},
css(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
async css(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
const { href } = item;
return fetch(href, options)
.then((res) => res.text())
.then((text) => ({ innerText: text }))
.then((props) => Object.assign(document.createElement('style'), props));
return await fetch(href, options)
.then(async res => await res.text())
.then(text => ({ innerText: text }))
.then(props => Object.assign(document.createElement("style"), props));
},
image(item: Item): Promise<HTMLElement> {
async image(item: Item): Promise<HTMLElement> {
const { href } = item;
return new Promise<HTMLElement>((resolve, reject) => {
const el = document.createElement('img');
return await new Promise<HTMLElement>((resolve, reject) => {
const el = document.createElement("img");
el.onload = () => resolve(el);
el.onerror = reject;
el.src = href;
});
},
json(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
async json(item: Item, options: RequestInit = {}): Promise<HTMLElement> {
const { href } = item;
return fetch(href, options)
.then((res) => res.text())
.then((text) => ({type: 'application/json', text}))
.then((props) => Object.assign(props, item.props || {}))
.then((props) => Object.assign(document.createElement('script'), props));
}
return await fetch(href, options)
.then(async res => await res.text())
.then(text => ({ type: "application/json", text }))
.then(props => Object.assign(props, item.props != null || {}))
.then(props => Object.assign(document.createElement("script"), props));
},
};