{Astro.props.prefix}
{it.title}
{it.description}
tag with the text of `test` from the JSON of the API endpoint - * - * this library is a mix between systems like React/Svelte (which have a lot of frontend handling) and HTMX (which return HTML entirely from the server) - * - * _Hyperion is a mix of HyperText(HTML) and Action_ - * - * @author Florian Bouillon - * @version 1.0.0 - * @license MIT - */ -export default class Hyperion { - private static instance: Hyperion - private constructor() { - this.init() - } - - /** - * setup the library for usage - */ - public static setup() { - if (!this.instance) { - this.instance = new Hyperion() - } - return this.instance - } - - /** - * Allows you to manually trigger an element - * @param el the element to trigger - */ - public static trigger(el: HTMLElement) { - el.dispatchEvent(new Event('hyperion:trigger')) - } - - /** - * initialise hyperion - * @param base the base to query from - */ - private init(base?: HTMLElement) { - (base ?? document).querySelectorAll('[data-action]').forEach((it) => { - this.initItem(it) - }) - } - - /** - * initialize a single element - * @param it the element to initialize - */ - private initItem(it: HTMLElement) { - // get the trigger action - let trigger = it.dataset.trigger ?? (it.tagName === 'FORM' ? 'submit' : 'click') - - // the triggering options - const options: { - once?: boolean - load?: boolean - after?: number - } = {} - - // handle options - const splitted = trigger.split(' ') - for (const item of splitted) { - console.log('ah', splitted, item) - // item runs only once - if (item === 'once') { - options.once = true - continue - } - if (item === 'load') { - options.load = true - continue - } - if (item.includes(':')) { - const [key, value] = item.split(':', 2) - // trigger is done after {x}ms (if another trigger is not done) - if (key === 'after') { - options.after = parseInt(value!) - } - continue - } - - // trigger is not special - trigger = item - } - - let timeout: NodeJS.Timeout | undefined - - // the triggering function - let fn = (ev?: Event) => { - if (ev) { - ev.preventDefault() - } - if (options.after) { // handle options:after - if (timeout) { - clearTimeout(timeout) - timeout = undefined - } - timeout = setTimeout(() => { - this.processElement(it) - timeout = undefined - }, options.after) - } else { - this.processElement(it) - } - - - // handle event only happening once - if (options.once) { - it.removeEventListener('hyperion:trigger', fn) - it.removeEventListener(trigger, fn) - } - } - - // event can also manually be triggered using `hyperion:trigger` - it.addEventListener('hyperion:trigger', fn) - it.addEventListener(trigger, fn) - - // on load run instantly - if (options.load) { - this.processElement(it) - } - } - - /** - * process an element that has it's trigger triggered - * @param it the element to process - */ - private async processElement(it: HTMLElement) { - console.log(it) - const action = it.dataset.action // get the URL to try - const method = it.dataset.method ?? 'GET' // get the method to use - const subPath = it.dataset.path // get a subPath if desired (dot-separated values) - let target = it.dataset.target ?? 'innerHTML' // indicate how the data is set - const templateQuery = it.dataset.template // get the template query - const runQuery = it.dataset.run // get the template query - const multiple = it.hasAttribute('data-multiple') // get if the result should be an array - const params: Record = {} // the request parameters - - /** - * PRE REQUEST HANDLING - */ - - // handle mendatory elements that are not necessary set - if ((!templateQuery && !runQuery) || !action) { - it.dispatchEvent(new CustomEvent('hyperion:attributeError', { - detail: { - reason: 'data-template/data-run or data-action not found' - } - })) - throw new Error(`the data-template (${templateQuery}) and data-run (${runQuery}) or data-action (${action}) attribute is not set :(`) - } - - const url = new URL(action, window.location.href) - - // pre-process the target attribute - let targetEl: HTMLElement | null = it - - // handle if the target has a querySelector needed - if (target.includes(' ')) { - // split the target and the query - let [newTarget, query] = target.split(' ', 2) - - // set the new target - target = newTarget! - - // handle if the query start with `this` - let base: HTMLElement | Document = document - if (query?.startsWith('this')) { - query.replace('this', '') - base = it - } - - // query the targetElement - targetEl = base.querySelector(query!) - } - - // handle if the target was not found - if (!targetEl) { - it.dispatchEvent(new CustomEvent('hyperion:targetError', { - detail: { - type: 'target not found', - data: target - } - })) - throw new Error(`target not found ${target}`) - } - - if (it.tagName === 'INPUT') { - const value = (it as HTMLInputElement).value - if (value) { - params[(it as HTMLInputElement).name] = (it as HTMLInputElement).value - } - } else if (it.tagName === 'FORM') { - const form = (it as HTMLFormElement) - for (const item of form.elements) { - const name = (item as HTMLInputElement).name - const value = (item as HTMLInputElement).value - if (value) { - params[name] = value - } - } - } - - /** - * REQUEST HANDLING - */ - - if (method === 'GET' && objectSize(params) > 0) { - objectLoop(params, (value, key) => { - url.searchParams.set(key, value) - }) - } - - // do the request - const res = await fetch(url, { - method: method, - body: method === 'POST' && objectSize(params) > 0 ? JSON.stringify(params) : null - }) - - /** - * POST REQUEST HANDLING - */ - - // handle if the request does not succeed - if (res.status >= 400) { - it.dispatchEvent(new CustomEvent('hyperion:statusError', { - detail: { - statusCode: res.status - } - })) - throw new Error(`request returned a ${res.status} error code :(`) - } - - // transform the response into JSON - let json = await res.json() - - if (runQuery) { - const runEl = document.querySelector(runQuery) - if (!runEl) { - it.dispatchEvent(new CustomEvent('hyperion:runError', { - detail: { - reason: 'run element not found' - } - })) - throw new Error(`the run Element for the query ${runQuery} was not found ! :(`) - } - - Hyperion.trigger(runEl) - return - } - - // query the remote template - const template = document.querySelector(templateQuery!) - if (!template) { - it.dispatchEvent(new CustomEvent('hyperion:templateError', { - detail: { - reason: 'template not found' - } - })) - throw new Error(`the Template for the query ${templateQuery} was not found ! :(`) - } - - // if subPath was set get to the path described - if (subPath) { - for (const child of subPath.split('.')) { - json = json[child] - } - } - - // create the template clone(s) - const clones: Array = [] - - // if the query should have multiple clones (data-multiple) - if (multiple) { - // the data should be an array :D - if (!Array.isArray(json)) { - it.dispatchEvent(new CustomEvent('hyperion:dataError', { - detail: { - type: 'data_not_array', - data: json - } - })) - throw new Error(`the data inputted should be an array, instead it is an ${typeof json}`) - } - - // loop through the array - for (const item of json) { - // fill the template element with every values - clones.push(this.fillTemplate(template, item)) - } - } else { - // fill the template element with the data - clones.push(this.fillTemplate(template, json)) - } - - // handle how the clones are placed - switch (target) { - case 'outerHTML': // the clones replace the targetted element - targetEl.replaceWith(...clones) - break; - case 'innerHTML': // the clones replace the childs of the targetted element - // remove the current childs - while (targetEl.firstChild) { - targetEl.removeChild(targetEl.firstChild) - } - // add each clones - clones.forEach((it) => targetEl.appendChild(it)) - break - default: - break; - } - } - - /** - * fill the template from the data given - * - * @param template the template to fill - * @param data the data to filel with - * @returns the filled HTMLElement - */ - private fillTemplate(template: HTMLTemplateElement, data: any): HTMLElement { - // clone the template - const clone = template.content.cloneNode(true) as HTMLElement - - clone.querySelectorAll('[data-loop]').forEach((it) => { - const attr = it.dataset.loop! - const tpl = it.children.item(0)! - const childContent = attr === 'this' ? data : data[attr] - console.log(it, childContent) - if (!Array.isArray(childContent)) { - throw new Error('child MUST be an array') - } - for (let idx = 0; idx < childContent.length; idx++) { - const child = tpl!.cloneNode(true) as HTMLElement - console.log(child) - let childAttr = child.dataset.attribute - if (childAttr === 'this') childAttr = idx.toString() - child.dataset.attribute = attr + '.' + childAttr - it.appendChild(child) - } - - it.removeChild(tpl) - }) - - // go through every elements that has a attribute to fill - clone.querySelectorAll('[data-attribute]').forEach((it) => { - // get the raw attribute - const attrRaw = it.dataset.attribute! - - // parse into an array - let attrs: Array = [] - let quoteCount = 0 - let current = '' - const splitted = attrRaw.split('') - for (let idx = 0; idx < splitted.length; idx++) { - const char = splitted[idx]; - if (char === '\'' && splitted[idx - 1] != '\\') { - quoteCount += 1 - continue - } else if (char === ' ' && quoteCount % 2 === 0) { - attrs.push(current) - current = '' - continue - } - if (char === '\'' && splitted[idx - 1] === '\\') { - current = current.slice(0, current.length - 1) - } - current += char - } - if (current) { - attrs.push(current) - } - console.log(attrs) - - // loop through each attributes - for (let attr of attrs) { - // get the display type of the attribute - let target = it.dataset.type ?? 'text' - - // detect if it should be set as an attribute instead - const setToAttribute = attr.includes(':') - if (setToAttribute) { - const splitted = attr.split(':', 2) - attr = splitted.pop()! - target = splitted[0]! - } - - // handle processing of string - let content: string - // handle a string with attribute processing - if (attr.includes('{')) { - let res = /\{(.*?)\}/g.exec(attr) - while (res) { - attr = attr.replace(`${res[0]}`, data[res[1]!]) - res = /\{(.*?)\}/g.exec(attr) - } - content = attr - } else { // handle basic string - content = attr === 'this' ? data : objectGet(data, attr) - } - - if (setToAttribute) { // set it as attribute - it.setAttribute(target, content) - } else { - // get the real target function - if (target === 'html') { - target = 'innerHTML' - } else if ( target === 'text') { - target = 'innerText' - } - - if (!(target in it)) { - template.dispatchEvent(new CustomEvent('hyperion:dataError', { - detail: { - type: 'data-type invalid', - data: target - } - })) - throw new Error(`the data-type is not valid (${target}), it should be one of ('innerHTML' | 'innerText' | 'outerHTML' | 'outerText')`) - } - - // set it has inner/outer HTML/Text - it[target as 'innerHTML' | 'innerText' | 'outerHTML' | 'outerText'] = content - } - } - // idk if necessary but remove the attributes from the final HTML - // it.removeAttribute('data-attribute') - // it.removeAttribute('data-type') - }) - - // setup the clone to work if it contains Hyperion markup - this.init(clone) - - return clone - } -} - -/** - * go through an object to get a specific value - * - * note: it will be slower than getting it directly but it allows some dynamism and other libs to query things - * - * @param obj the object to go through - * @param path the path to follow (if path is a string it will be splitted with `.` and ints will be parsed) - * - * @returns the value or undefined - */ -function objectGet(obj: object, path: Array | string): any | undefined { - mustBeObject(obj) - - // transform path into an Array - if (typeof path === 'string') { - path = path.split('.').map((it) => /^\d+$/g.test(it) ? parseInt(it) : it) - } - let pointer: object = obj - for (let index = 0; index < path.length; index++) { - const key = path[index] - const nextIndex = index + 1; - if (typeof key === 'undefined' || !Object.prototype.hasOwnProperty.call(pointer, key) && nextIndex < path.length) { - return undefined - } - // if last index - if (nextIndex === path.length) { - return (pointer as any)[key] - } - // move pointer to new key - pointer = (pointer as any)[key] - } -} diff --git a/src/libs/Hyperion/README.md b/src/libs/Hyperion/README.md new file mode 100644 index 0000000..18d3e2f --- /dev/null +++ b/src/libs/Hyperion/README.md @@ -0,0 +1,133 @@ +# Hyperion + +Hyperion is a library that allow you to make changes to the HTML content by using a mix of `` and `JSON` Reponse from API endpoints + +## Installation + +```bash +npm i hyperion +``` + +## Usage + +```js +import Hyperion from 'hyperion' +Hyperion.setup() +``` + +```html + +``` + +- Template +it MUST only have one child +```html + + + +``` + +## References + +### Attributes + +one of the `data-input` or `data-output` MUST be set so that everything work. + +#### data-trigger: (optionnal) +the different trigger available (default: 'submit' for else 'click' for the rest) (multiple can be used) +- load: action is run on start +- once: only run Hyperion once (manual trigger can still happens if `force` is `true`) +- `after:xx`: trigger will defer until xx time of ms passed (allow to dedup requests) +- HTMLListenerEvent: any HTMLElement event available + +#### data-input: (optionnal) +if data-input is not set it will directly got for data-output with an empty object +- url: will query the URL using a GET method for JSON data +- `method:url`: will query the URL using the method for JSON data +- `run:action`: Get informations by running an action + +#### data-path: (optionnal) +a Subpath of the input data to lessen strain on the output + +#### data-multiple: (optionnal) +if the input is an array and data-multiple is set, the output will be using array + +#### data-output: (optionnal) +- template: The template used to display +- location: the location to display the element (default: this) +note: by using `this` as a prefix it will query relative to the current element (ex: `this#pouet`) +- replace|child: replace or append as child (default: child) + + +### Actions + +Actions are elements defined in Hyperion that run code to fetch informations or run custom code + +there is two types of actions: +- input Action +An input Action MUST return a JSON object and will have access to the HTMLElement that was triggered +`(element?: HTMLElement, input?: object) => Promise | object` +the element can be omitted when trigger is done remotely +the input can be available depending on the source + +- output Action +`(element: HTMLElement, output: object) => Promise | void` +the output is the data fetched by the input + +example output Action +`popup` +will search a popup template by using an additionnal attribute `data-template` and fill the elements to display a popup + +builtin output actions +- `reload`: Reload the current page + +### Hyperion Class + +- Static + - setup() +- Methods + - on('trigger', ({ target: HTMLElement, trigger: string, force: boolean }) => void) + - on('htmlChanged', ({ rootElement: HTMLElement }) => void) + - on('error', ({ error: Error }) => void) + - trigger('trigger', HTMLElement, options?: { force: boolean }) + - addInputAction(action) + - addOutputAction(action) + - fillTemplate(template: HTMLTemplateElement, data: object) => HTMLElement + +## Examples + +### pushing changes of a textarea to the remote server + +```html + + base text + +``` + +It will send this as a POST request to the url `/api/v1/text` with the body below +```json +{"text": "base text"} +``` \ No newline at end of file diff --git a/src/libs/Hyperion/index.ts b/src/libs/Hyperion/index.ts new file mode 100644 index 0000000..00bdbe5 --- /dev/null +++ b/src/libs/Hyperion/index.ts @@ -0,0 +1,662 @@ +import { isObject, objectGet, objectLoop } from '@dzeio/object-util' + +type MaybePromise = T | Promise + +type InputAction = (element?: HTMLElement, input?: object) => MaybePromise +type OutputAction = (element: HTMLElement, output: object) => MaybePromise + +interface Options { + force?: boolean +} + +interface Events { + trigger: (ev: { + /** + * the source element + */ + target: HTMLElement, + + /** + * the trigger that triggered + */ + trigger: string, + + /** + * is the trigger forced or not + */ + force: boolean + }) => MaybePromise + htmlChange: (ev: { newElement: HTMLElement }) => MaybePromise + error: (ev: { error: Error, params?: object | undefined }) => MaybePromise +} + +/** + * Hyperion is a library that allow you to make changes to the HTML content by using a mix of `` and `JSON` Reponse from API endpoints + * + * @author Florian Bouillon + * @version 2.0.0 + * @license MIT + */ +export default class Hyperion { + private static instance: Hyperion + private constructor() { + this.init() + } + + private events: Partial>> = {} + private inputActions: Record = {} + private outputActions: Record = { + reload() { + window.location.reload() + }, + debug(el, out) { + console.log('Output launched !', el, out) + } + } + + /** + * setup the library for usage + */ + public static setup() { + if (!Hyperion.instance) { + Hyperion.instance = new Hyperion() + } + return Hyperion.instance + } + + public addOutputAction(action: string, ev: OutputAction | null) { + if (ev === null) { + delete this.outputActions[action] + return this + } + this.outputActions[action] = ev + return this + } + + /** + * add an event to Hyperion + * + * @param event the event to register on + * @param ev the event that will run + */ + public on(event: T, ev: Events[T]): this { + if (!this.events[event]) { + this.events[event] = [] + } + this.events[event]?.push(ev) + return this + } + + /** + * manually trigger an element + * + * @param element the element to trigger + */ + public trigger(element: HTMLElement): this { + this.processInput(element) + return this + } + + private emit(ev: T, params: Parameters[0]) { + const listeners = (this.events[ev] ?? []) as Array + for (const listener of listeners) { + listener(params as any) + } + } + + /** + * initialise hyperion + * @param base the base to query from + */ + private init(base?: HTMLElement) { + // setup on itself when possible + if (base && (base.dataset.output || base.dataset.input)) { + this.setupTrigger(base) + } + // biome-ignore lint/complexity/noForEach: + (base ?? document).querySelectorAll('[data-output],[data-input]').forEach((it) => { + this.setupTrigger(it) + }) + } + + private async setupTrigger(it: HTMLElement) { + // get the trigger action + const isForm = it.tagName === 'FORM' + const triggers: Array = [] + + // the triggering options + const options: { + once?: boolean + load?: boolean + after?: number + } = {} + + // handle options + const splitted = this.betterSplit(it.dataset.trigger ?? '') + for (const item of splitted) { + const { prefix, value } = this.decodeParam(item) + switch (prefix ?? value) { + case 'once': + options.once = true + break + case 'load': + options.load = true + break + case 'after': + options.after = Number.parseInt(value, 10) + break + default: + triggers.push(item) + break; + } + } + + if (triggers.length === 0) { + triggers.push(isForm ? 'submit' : 'click') + } + + let timeout: NodeJS.Timeout | undefined + + // the triggering function + const fn = (ev?: Event) => { + if (isForm && ev) { + ev.preventDefault() + } + + // handle event only happening once + if (options.once) { + for (const trigger of triggers) { + it.removeEventListener(trigger, fn) + } + } + + // special case for option `after:xxx` + if (options.after) { + if (timeout) { // remove existing timer + clearTimeout(timeout) + timeout = undefined + } + + // set a new timer + timeout = setTimeout(() => { + // process + this.processInput(it) + timeout = undefined + }, options.after) + return + } + + // run it + this.processInput(it) + } + + // event can also manually be triggered using `hyperion:trigger` + for (const trigger of triggers) { + it.addEventListener(trigger, fn) + } + + // on load run instantly + if (options.load) { + this.processInput(it) + } + } + + private async processInput(it: HTMLElement, data?: object, options?: Options): Promise { + // get the input + let input = it.dataset.input + + /** + * Setup Params + */ + const params: object = data ?? {} + + + // parse form values into input params + if (it.tagName === 'FORM') { + const formData = new FormData(it as HTMLFormElement) + formData.forEach((value, key) => { + params[key] = value + }) + // parse input value into input param + } else if (it.tagName === 'INPUT' && (it as HTMLInputElement).name) { + params[(it as HTMLInputElement).name] = (it as HTMLInputElement).value + } + + if (it.dataset.params) { + const exchange = this.betterSplit(it.dataset.params) + for (const item of exchange) { + const { prefix, value } = this.decodeParam(item) + if (!prefix) { + continue + } + params[prefix] = value + } + } + + + // if data-input is not set goto output + if (!input) { + return this.processOutput(it, params, options) + } + + const { prefix, value } = this.decodeParam(input) + + // handle running an input Action + if (prefix === 'run') { + const inputAction = this.inputActions[value] + if (!inputAction) { + throw this.makeError( + it, + `Input Action not found (${value}), you might need to add it using Hyperion.addInputAction()` + ) + } + + const res = await inputAction(it, params) + + return this.processOutput(it, res, options) + } + + let method = 'GET' + + if (prefix) { + method = prefix.toUpperCase() + input = value + } + + console.log(method, input) + + const url = new URL(input, window.location.href) + let body: string | FormData | null = null + + if (method === 'GET') { + console.log('going into GET mode') + objectLoop(params, (value, key) => { + url.searchParams.set(key, value) + }) + } else if (it.getAttribute('enctype') === 'multipart/form-data') { + const formData = new FormData() + objectLoop(params, (value, key) => { + formData.set(key, value) + }) + body = formData + } else { + body = JSON.stringify(params) + } + + // do the request + const res = await fetch(url, { + method: method, + body: body + }) + + // handle if the request does not succeed + if (res.status >= 400) { + throw this.makeError(it, `request returned a ${res.status} error code :(`, { statusCode: res.status }) + } + + // transform the response into JSON + return this.processOutput(it, await res.json(), options) + } + + private async processOutput(it: HTMLElement, dataTmp: object, options?: Options): Promise { + let data = dataTmp + const output = it.dataset.output + if (!output) { + return + } + + const subpath = it.dataset.path + if (subpath) { + data = objectGet(data, subpath) as object + } + + const { prefix, value } = this.decodeParam(output) + + if (prefix === 'run') { + const outputActions = this.outputActions[value] + if (!outputActions) { + throw this.makeError(it, `Output Action Action not found (${value}), you might need to add it using Hyperion.addOutputAction()`) + } + + return outputActions(it, data) + } + + if (prefix === 'hyp') { + const hypItem = document.querySelector(value) + + if (!hypItem) { + throw this.makeError(it, `Could not find Hyperion element using the query (${value})`) + } + + return this.processInput(hypItem, data, options) + } + + let [ + templateQuery, + locationQuery = null, + placement = 'inner' + ] = this.betterSplit(output) + + const template = document.querySelector(templateQuery as string) + + if (!template || template.tagName !== 'TEMPLATE') { + const msg = !template ? `Template not found using query(${templateQuery})` : `Template is not a template ! (tag is ${template.tagName} while it should be TEMPLATE)` + throw this.makeError(it, msg) + } + + const placements = ['inner', 'outer', 'append'] + + if (locationQuery && placements.includes(locationQuery)) { + placement = locationQuery + locationQuery = null + } + + const isArray = 'multiple' in it.dataset + const clones = isArray ? (data as Array).map((it) => this.fillTemplate(template, it)) : [this.fillTemplate(template, data)] + + let location = it + if (locationQuery) { + if (locationQuery === 'body') { + location = document.body + } else { + let origin = document.body + if (locationQuery.startsWith('this')) { + origin = it + locationQuery = locationQuery.slice(4) + } + const tmp = origin.querySelector(locationQuery) + if (!tmp) { + throw this.makeError(it, `New location not found (origin: ${origin.tagName}, query: ${locationQuery})`) + } + location = tmp + } + } + + if (!location) { + throw this.makeError(it, 'location not found :(') + } + + switch (placement) { + case 'outer': // the clones replace the targetted element + location.replaceWith(...clones) + // TODO: might be buggy due to shit + for (const clone of clones) { + this.emit('htmlChange', { newElement: clone }) + } + break; + case 'inner': // the clones replace the childs of the targetted element + // remove the current childs + while (location.firstChild) { + location.removeChild(location.firstChild) + } + // add each clones + // biome-ignore lint/complexity/noForEach: + clones.forEach((it) => { + const appendedChild = location.appendChild(it) + this.emit('htmlChange', { newElement: appendedChild }) + }) + break + case 'append': { + // biome-ignore lint/complexity/noForEach: + clones.forEach((it) => { + document.body.appendChild(it) + this.emit('htmlChange', { newElement: it }) + }) + break + } + default: + break; + } + } + + /** + * fill the template from the data given + * + * @param template the template to fill + * @param data the data to filel with + * @returns the filled HTMLElement + */ + public fillTemplate(template: HTMLTemplateElement, data: object): HTMLElement { + // clone the template + let node = template.content.cloneNode(true) as DocumentFragment | HTMLElement + + if (node.childNodes.length > 1) { + const parent = document.createElement('div') + parent.appendChild(node) + node = parent + } + + const clone = node.firstElementChild as HTMLElement + + return this.fill(clone, data) + } + + /** + * + * @param el the element to fill + * @param data the data to fill it with + * @returns the filled element (original changed) + */ + public fill(el: HTMLElement, data: object) { + if (el.dataset.loop) { + this.fillLoop(el, data) + } + + let childLoop = el.querySelector('[data-loop]') + while (childLoop) { + this.fillLoop(childLoop, data) + childLoop = el.querySelector('[data-loop]') + } + + // go through every elements that has a attribute to fill + this.fillAttrs(el, data) + // biome-ignore lint/complexity/noForEach: + el.querySelectorAll('[data-attribute],[data-input],[data-output],[data-params]').forEach((it) => this.fillAttrs(it, data)) + + // setup the clone to work if it contains Hyperion markup + this.init(el) + + return el + } + + private fillLoop(it: HTMLElement, data: object, context: Array = []) { + const path = it.dataset.loop + if (!path) { + return + } + + const subElement = objectGet(data, path) as Array + for (let idx = 0; idx < subElement.length; idx++) { + const currentContext = [...context, path, idx] + const child = it.cloneNode(true) as HTMLElement + child.removeAttribute('data-loop') + + let childLoop = child.querySelector('[data-loop]') + while (childLoop) { + this.fillLoop(childLoop, data, currentContext) + childLoop = child.querySelector('[data-loop]') + } + + this.fillLoop(child, data, currentContext) + + // go through every elements that has a attribute to fill + this.fillAttrs(child, data, currentContext) + // biome-ignore lint/complexity/noForEach: + const items = Array.from(child.querySelectorAll('[data-attribute],[data-input],[data-output]')) + for (const item of items) { + this.fillAttrs(item, data, currentContext) + } + // child.querySelectorAll('[data-attribute],[data-input],[data-output]').forEach((it) => this.fillAttrs(it, sub)) + + it!.after(child) + } + + it.remove() + } + + /** + * fill the attributes to the element + * @param it the element to fill + * @param data the data link to this element + * @returns the filled element + */ + private fillAttrs(it: HTMLElement, data: object, context: Array = []) { + // get the raw attribute + const attrRaw = it.dataset.attribute + + for (const attr of ['output', 'input', 'trigger', 'params']) { + let value = it.dataset[attr] + if (!value || !value.includes('{')) { + continue + } + value = this.parseValue(value, data, context) + + it.setAttribute(`data-${attr}`, value) + // it.dataset[attr] = value + } + + if (typeof attrRaw !== 'string') { + return + } + + // parse into an array + const attrs: Array = this.betterSplit(attrRaw) + + // loop through each attributes + for (const attrRaw of attrs) { + const { prefix = 'innerhtml', value } = this.decodeParam(attrRaw) + + // handle processing of string + // handle a string with attribute processing + const attr = this.parseValue(value, data, context) + + switch (prefix) { + case 'html': + case 'innerhtml': { + it.innerHTML = attr + break + } + case 'text': + case 'innertext': { + it.innerText = attr + break + } + case 'outerhtml': { + it.outerHTML = attr + break + } + case 'outertext': { + it.outerText = attr + break + } + default: { + it.setAttribute(prefix, attr) + } + } + } + + // idk if necessary but remove the attributes from the final HTML + it.removeAttribute('data-attribute') + } + + /** + * A space centered split but it does not split if inside singlequotes + */ + private betterSplit(input: string): Array { + const attrs: Array = [] + let quoteCount = 0 + let current = '' + const splitted = input.split('') + for (let idx = 0; idx < splitted.length; idx++) { + const char = splitted[idx]; + if (char === '\'' && splitted[idx - 1] !== '\\') { + quoteCount += 1 + continue + } + if (char === ' ' && quoteCount % 2 === 0) { + attrs.push(current) + current = '' + continue + } + if (char === '\'' && splitted[idx - 1] === '\\') { + current = current.slice(0, current.length - 1) + } + current += char + } + if (current) { + attrs.push(current) + } + + return attrs + } + + private decodeParam(str: string): { prefix?: string, value: string } { + const index = str.indexOf(':') + + if (index === -1) { + return { value: str } + } + + return { prefix: str.slice(0, index), value: str.slice(index + 1) } + } + + private parseValue(str: string, data: object, context: Array): string { + let value = str + if (!value) { + return value + } + function findValue(key: string) { + if (key.startsWith('this')) { + const fromContext = objectGet(data, context) + let sliced = key.slice(4) + if (sliced.startsWith('.')) { + sliced = sliced.slice(1) + const tmp = objectGet(fromContext, sliced) + if (!tmp) { + console.log(3) + return key + } + return tmp + } else { + console.log(fromContext, data, context) + return fromContext + } + } + if (!isObject(data) && (Array.isArray(key) && key.length > 0 || key)) { + console.log(str, data, context, key) + return key + } + const res = objectGet(data, key) + if (!res) { + console.log(2) + return key + } + return res + } + if (!value.includes('{')) { + return findValue(value) + } else { + let res = /\{(.*?)\}/g.exec(value) + while (res && res.length >= 2) { + const key = res[1]! + value = value.replace(`${res[0]}`, findValue(key)) + + res = /\{(.*?)\}/g.exec(value) + } + } + + return value + } + + private makeError(el: HTMLElement, message: string, params?: object) { + el.dispatchEvent(new CustomEvent('hyperion:error', { + detail: { + error: message, + params: params + } + })) + const error = new Error(message) + this.emit('error', { error, params }) + return error + } +} diff --git a/src/models/Adapters/PostgresAdapter.ts b/src/models/Adapters/PostgresAdapter.ts index 946858b..5768eb6 100644 --- a/src/models/Adapters/PostgresAdapter.ts +++ b/src/models/Adapters/PostgresAdapter.ts @@ -13,7 +13,7 @@ import { filter } from './AdapterUtils' export default class PostgresAdapter implements DaoAdapter { - private id!: Array + private id: Array = [] public constructor( /** @@ -24,15 +24,7 @@ export default class PostgresAdapter implements DaoAdapter { * the table name */ public readonly table: string, - /** - * the id(s) - */ - id?: keyof T | Array, - /** - * other secondary keys necessary to update data - */ - private readonly partitionKeys?: Array, /** * additionnal options to make the adapter work */ @@ -43,20 +35,14 @@ export default class PostgresAdapter implements DaoAdapter { debug?: boolean } ) { - if (!id) { - objectLoop(schema.model, (value, key) => { - if (!isSchemaItem(value)) { - return true - } - if (!value.database?.unique) { - return true - } - id = key - return false - }) - } else { - this.id = typeof id === 'string' ? [id] : id as Array - } + objectLoop(this.schema.model, (schema, key) => { + if (!isSchemaItem(schema)) { + return + } + if (schema.database?.auto) { + this.id.push(key) + } + }) } // TODO: make it clearer what it does @@ -107,65 +93,6 @@ export default class PostgresAdapter implements DaoAdapter { public async read(query?: Query> | undefined): Promise> { let req: Array = ['SELECT', '*', 'FROM', this.table] - // list of the differents items in the WHERE statement - const whereItems: Array = [] - // if ((query?.where?.length ?? 0) > 0 && (query?.where?.length !== 1 || query?.where?.[0]?.[1] !== 'includes')) { - // for (const it of query?.where ?? []) { - // // eslint-disable-next-line max-depth - // switch (it[1]) { - // case 'in': - // // eslint-disable-next-line no-case-declarations - // const arr = it[2] as Array - - // whereItems.push(`${String(it[0])} IN (${arr.map(() => '?').join(',')})`) - // params.push(...arr) - // break - - // case 'equal': - // whereItems.push(`${String(it[0])} = ?`) - // params.push(it[2]) - // break - - // case 'after': - // whereItems.push(`${String(it[0])} >= ?`) - // params.push(it[2]) - // break - - // case 'before': - // whereItems.push(`${String(it[0])} <= ?`) - // params.push(it[2]) - // break - // } - // } - // } - - if (whereItems.length > 0) { - req.push('WHERE') - for (let idx = 0; idx < whereItems.length; idx++) { - const item = whereItems[idx] as string - if (idx > 0) { - req.push('AND') - } - req.push(item) - } - } - - // ORDER BY (not working as we want :() - // const sort = query?.$sort - // if (sort && sort.length >= 1) { - // const suffix = sort[0]?.[1] === 'asc' ? 'ASC' : 'DESC' - // req = req.concat(['ORDER', 'BY', sort[0]?.[0] as string, suffix]) - // } - - // LIMIT (not working because of ORDER BY) - // const page: number = query?.page ?? 0 - // const pageLimit: number | null = query?.limit ?? null - // let limit: number | null = null - // if (pageLimit && pageLimit > 0) { - // limit = pageLimit * (page + 1) - // req = req.concat(['LIMIT', limit.toString()]) - // } - const client = (await Client.get())! if (this.options?.debug) { @@ -190,7 +117,7 @@ export default class PostgresAdapter implements DaoAdapter { } } - let dataset = res.rows + const raw = res.rows .map((obj) => objectRemap(this.schema.model, (_, key) => ({ key, value: this.dbToValue(key, (obj as any)[key]) @@ -207,45 +134,6 @@ export default class PostgresAdapter implements DaoAdapter { .map((it) => this.schema.parse(it)) .filter((it): it is Implementation => !!it) - /** - * POST QUERY TREATMENT - */ - // if ((query?.where?.length ?? 0) > 0) { - // for (const it of query?.where ?? []) { - // // eslint-disable-next-line max-depth - // switch (it[1]) { - // case 'includes': - // dataset = dataset.filter((entry) => entry[it[0]]?.toString()?.includes(it[2])) - // break - // } - // } - // } - - // sort - // const sort = query?.$sort - // if (sort) { - // const sortKey = sort ? sort[0]![0] : objectFind(this.schema.model, (value) => { - // if (!isSchemaItem(value)) { - // return false - // } - // return !!value.database?.created - // }) - // const sortValue = sort ? sort[0]![1] : 'asc' - // if (sortKey && sortValue) { - // if (sortValue === 'asc') { - // dataset = dataset.sort((a, b) => b[sortKey as string]! > a[sortKey as string]! ? 1 : -1) - // } else { - // dataset = dataset.sort((a, b) => b[sortKey as string]! < a[sortKey as string]! ? 1 : -1) - // } - // } - // } - - // console.log(res.rows, req) - // post request processing - // if (limit) { - // dataset = dataset.slice(page * (query?.limit ?? 0), limit) - // } - // temp modification of comportement to use the new and better query system if ((!query || !query?.$sort) && objectFind(this.schema.model, (_, key) => key === 'created')) { // temp fix for the sorting algorithm @@ -256,13 +144,13 @@ export default class PostgresAdapter implements DaoAdapter { query.$sort = { created: Sort.DESC } } } + let dataset = raw if (query) { dataset = filter(query, dataset, this.options) } - // console.log(res) return { - rows: res.rowCount ?? 0, + rows: dataset.length ?? 0, rowsTotal: res.rowCount ?? 0, page: 1, pageTotal: 1, @@ -307,7 +195,7 @@ export default class PostgresAdapter implements DaoAdapter { } // map the items to update - const keys = objectMap(obj as {}, (_, key) => `${key}=?`) + const keys = objectMap(obj as {}, (_, key, idx) => `${key}=$${idx+1}`) parts.push(keys.join(', ')) params.push(...objectValues(obj as {})) @@ -320,7 +208,7 @@ export default class PostgresAdapter implements DaoAdapter { if (idx > 0) { parts.push('AND') } - parts.push(`${key}=?`) + parts.push(`${key}=$${params.length+1}`) const value = obj[key] ?? (typeof id === 'string' ? id : id[key]) read[key] = this.valueToDB(key, value) if (!value) { @@ -329,14 +217,6 @@ export default class PostgresAdapter implements DaoAdapter { params.push(value) } - if (this.partitionKeys && this.partitionKeys?.length > 0) { - const { data } = await this.read(read) - const item = data[0] - for (const key of this.partitionKeys) { - parts.push('AND', `${key as string}=${this.valueToDB(key, item![key])}`) - } - } - const req = parts.join(' ') const client = await Client.get() @@ -345,7 +225,7 @@ export default class PostgresAdapter implements DaoAdapter { } try { - const res = await client!.query(`${req}`) + const res = await client!.query(req, params) // console.log(res, req) if (this.options?.debug) { console.log('post patch result', res, req) diff --git a/src/models/DaoAdapter.ts b/src/models/DaoAdapter.ts index b724d66..fc4d7f5 100644 --- a/src/models/DaoAdapter.ts +++ b/src/models/DaoAdapter.ts @@ -2,11 +2,28 @@ import { type Query } from './Query' import type { Implementation, Model } from './Schema' export interface DBPull { + /** + * total number of rows that are valid with the specified query + */ rows: number + /** + * total number of rows in the table + */ rowsTotal: number + + /** + * current page number + */ page: number + + /** + * total amount of pages + */ pageTotal: number + /** + * the data fetched + */ data: Array> } diff --git a/src/models/Migrations/2024-05-15T9:57:48.ts b/src/models/Migrations/2024-05-15T9:57:48.ts index 01a23f0..6a28ae1 100644 --- a/src/models/Migrations/2024-05-15T9:57:48.ts +++ b/src/models/Migrations/2024-05-15T9:57:48.ts @@ -7,15 +7,16 @@ export default { id TEXT PRIMARY KEY, name TEXT, description TEXT, - displayID TEXT, + displayid TEXT, visibility BOOL, archived BOOL );`) await client.query(`CREATE TABLE IF NOT EXISTS state ( id TEXT PRIMARY KEY, + project TEXT, name TEXT, - color CHAR(6), + color CHAR(7), preset BOOL )`) diff --git a/src/models/Project/index.ts b/src/models/Project/index.ts index 50d4ccb..b0f6179 100644 --- a/src/models/Project/index.ts +++ b/src/models/Project/index.ts @@ -12,7 +12,7 @@ const schema = new Schema({ description: { type: String, nullable: true }, - displayID: { type: String, nullable: true }, + displayid: { type: String, nullable: true }, visibility: { type: String, nullable: true }, archived: { type: Boolean, defaultValue: false } }) diff --git a/src/models/Schema.ts b/src/models/Schema.ts index 658faff..554de22 100644 --- a/src/models/Schema.ts +++ b/src/models/Schema.ts @@ -210,7 +210,7 @@ export default class Schema { * @returns an object containin ONLY the elements defined by the schema */ public parse(input: any): Implementation | null { - console.log(input) + // console.log(input) if (!isObject(input)) { return null } diff --git a/src/models/State/index.ts b/src/models/State/index.ts index 6accc53..4989ac2 100644 --- a/src/models/State/index.ts +++ b/src/models/State/index.ts @@ -19,4 +19,4 @@ const schema = new Schema({ export default schema -export type ProjectObj = Impl +export type StateObj = Impl diff --git a/src/pages/api/v1/projects/[id].ts b/src/pages/api/v1/projects/[id].ts new file mode 100644 index 0000000..22d19e5 --- /dev/null +++ b/src/pages/api/v1/projects/[id].ts @@ -0,0 +1,15 @@ +import { objectOmit } from '@dzeio/object-util' +import type { APIRoute } from 'astro' +import ResponseBuilder from 'libs/ResponseBuilder' +import DaoFactory from 'models/DaoFactory' + +export const POST: APIRoute = async (ctx) => { + const id = ctx.params.id! + const dao = DaoFactory.get('project') + const body = objectOmit(await ctx.request.json(), 'label') + const res = await dao.patch(id, body) + + return new ResponseBuilder() + .body(res) + .build() +} diff --git a/src/pages/api/v1/projects/[id]/issues/[issueId].ts b/src/pages/api/v1/projects/[id]/issues/[issueId].ts index 2d7ec9e..e3e51e9 100644 --- a/src/pages/api/v1/projects/[id]/issues/[issueId].ts +++ b/src/pages/api/v1/projects/[id]/issues/[issueId].ts @@ -1,3 +1,4 @@ +import { objectOmit } from '@dzeio/object-util' import type { APIRoute } from 'astro' import ResponseBuilder from 'libs/ResponseBuilder' import DaoFactory from 'models/DaoFactory' @@ -11,3 +12,13 @@ export const GET: APIRoute = async (ctx) => { .body((await dao.findOne({project: projectId, id: taskId}))) .build() } +export const POST: APIRoute = async (ctx) => { + const taskId = ctx.params.issueId! + const dao = DaoFactory.get('issue') + const body = objectOmit(await ctx.request.json(), 'label') + const res = await dao.patch(taskId, {id: taskId, ...body}) + + return new ResponseBuilder() + .body(res) + .build() +} diff --git a/src/pages/api/v1/projects/[id]/issues/[issueId]/labels.ts b/src/pages/api/v1/projects/[id]/issues/[issueId]/labels.ts new file mode 100644 index 0000000..de571e9 --- /dev/null +++ b/src/pages/api/v1/projects/[id]/issues/[issueId]/labels.ts @@ -0,0 +1,31 @@ +import type { APIRoute } from 'astro' +import ResponseBuilder from 'libs/ResponseBuilder' +import DaoFactory from 'models/DaoFactory' + +export const POST: APIRoute = async (ctx) => { + const taskId = ctx.params.issueId! + const body = await ctx.request.json() + const newLabel = body.label + const dao = DaoFactory.get('issue') + const req = await dao.get(taskId) + req?.labels.push(newLabel) + const res = await dao.update(req!) + + return new ResponseBuilder() + .body(res) + .build() +} +export const DELETE: APIRoute = async (ctx) => { + const taskId = ctx.params.issueId! + const body = await ctx.request.json() + const labelToRemove = body.label + const dao = DaoFactory.get('issue') + const req = await dao.get(taskId)! + console.log(req, taskId) + req!.labels.splice(req!.labels.indexOf(labelToRemove), 1) + const res = await dao.update(req!) + + return new ResponseBuilder() + .body(res) + .build() +} diff --git a/src/pages/api/v1/projects/[id]/issues/index.ts b/src/pages/api/v1/projects/[id]/issues/index.ts index dfd6caf..f7bb64b 100644 --- a/src/pages/api/v1/projects/[id]/issues/index.ts +++ b/src/pages/api/v1/projects/[id]/issues/index.ts @@ -1,6 +1,7 @@ import type { APIRoute } from 'astro' import ResponseBuilder from 'libs/ResponseBuilder' import DaoFactory from 'models/DaoFactory' +import { Sort } from 'models/Query' export const POST: APIRoute = async (ctx) => { const projectId = ctx.params.id! @@ -13,11 +14,10 @@ export const POST: APIRoute = async (ctx) => { project: projectId, preset: true }) - console.log(issueCount) const res = await dao.create({ ...(await ctx.request.json()), project: projectId, - localid: issueCount.rowsTotal + 1, + localid: issueCount.rows + 1, state: defaultState?.id ?? 'empty', labels: [] }) @@ -29,6 +29,6 @@ export const GET: APIRoute = async (ctx) => { const dao = DaoFactory.get('issue') return new ResponseBuilder() - .body((await dao.findAll({project: projectId})).data) + .body((await dao.findAll({project: projectId, $sort: { localid: Sort.ASC}})).data) .build() } diff --git a/src/pages/api/v1/projects/index.ts b/src/pages/api/v1/projects/index.ts index 49f154f..b8159aa 100644 --- a/src/pages/api/v1/projects/index.ts +++ b/src/pages/api/v1/projects/index.ts @@ -7,7 +7,7 @@ export const GET: APIRoute = async ({ url }) => { const dao = DaoFactory.get('project') const filters: Query = {} url.searchParams.forEach((it, key) => { - filters[key] = it + filters[key] = { $inc: it } }) const res = await dao.findAll(filters) return new ResponseBuilder().body(res.data).build() diff --git a/src/pages/index.astro b/src/pages/index.astro index 2eca903..d6a1d0a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,9 +4,24 @@ import Input from 'components/global/Input.astro' import MainLayout from 'layouts/MainLayout.astro' import DaoFactory from 'models/DaoFactory' import Schema from 'models/Schema' +import type { StateObj } from 'models/State' import route from 'route' const dao = DaoFactory.get('project') +const stateDao = DaoFactory.get('state') +const defaultStates: Array> = [{ + name: 'Todo', + color: '#123456', + preset: true +}, { + name: 'WIP', + color: '#123456', + preset: false +}, { + name: 'Done', + color: '#123456', + preset: false +}] if (Astro.request.method === 'POST') { const input = new Schema({ @@ -16,9 +31,17 @@ if (Astro.request.method === 'POST') { const project = await dao.create({ name: input.name }) + + if (!project) { + return Astro.redirect('/?message=project+not+created') + } + + for (const state of defaultStates) { + await stateDao.create({ ...state, project: project.id }) + } + if (project) { return Astro.redirect(route('/projects/[id]', {id: project.id, message: 'project created succefully'})) - } } @@ -36,10 +59,9 @@ if (Astro.request.method === 'POST') { diff --git a/src/pages/projects/[id].astro b/src/pages/projects/[id].astro index 97c9590..e2d1543 100644 --- a/src/pages/projects/[id].astro +++ b/src/pages/projects/[id].astro @@ -4,6 +4,31 @@ import Button from 'components/global/Button.astro' import DaoFactory from 'models/DaoFactory' import route from 'route' import Input from 'components/global/Input.astro' +import Table from 'components/global/Table/Table.astro' +import Select from 'components/global/Select.astro' +import { X } from 'lucide-astro' +import { Sort } from 'models/Query' +import type { StateObj } from 'models/State' + +const defaultStates: Array = [{ + id: '', + name: 'Todo', + project: '', + color: '#123456', + preset: true +}, { + id: '', + name: 'WIP', + project: '', + color: '#123456', + preset: false +}, { + id: '', + name: 'Done', + project: '', + color: '#123456', + preset: false +}] const id = Astro.params.id! const project = await DaoFactory.get('project').findById(id) @@ -12,22 +37,51 @@ if (!project) { return Astro.rewrite(route('/404')) } -const tasks = await DaoFactory.get('issue').findAll({ - project: project.id -}) +const dbStates = await DaoFactory.get('state').findAll({ project: project.id, $sort: { preset: Sort.DESC } }) +console.log(dbStates) +const states = dbStates.data.length > 0 ? dbStates.data : defaultStates +console.log(project, states) --- - + + + + {project.name} - {tasks.data.map((it) => ({project.displayID}-{it.localid} {it.name}))} - - + + + + id + name + + + + + + + + + + + Ajouter @@ -35,11 +89,32 @@ const tasks = await DaoFactory.get('issue').findAll({ - - - - - + + + ({ value: state.id, title: state.name}))} /> + + + + + + + + + Submit +