From d64bcc016b72e57536e6b7a93531580997ed3dd1 Mon Sep 17 00:00:00 2001 From: aanthonymax Date: Mon, 25 Nov 2024 22:41:24 +0000 Subject: [PATCH] Copied changes from hmpl/app --- docs/.vuepress/config.ts | 96 ++++++++++++++++++++++------------------ docs/hmpl.md | 77 ++++++++++++++++++++------------ 2 files changed, 102 insertions(+), 71 deletions(-) diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 9c286bf..4872bf4 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -26,31 +26,31 @@ export default defineUserConfig({ "SocialLink", "Repo", "Outlook", - "Search", - ], + "Search" + ] }, navbar: [ // NavbarLink { text: "Home", - link: "/", + link: "/" }, { text: "Docs", - link: "introduction.md", + link: "introduction.md" }, { text: "Examples", - link: "examples.md", + link: "examples.md" }, { text: "Blog", - link: "https://blog.hmpl-lang.dev", + link: "https://blog.hmpl-lang.dev" }, { text: "Why hmpl?", - link: "#why-hmpl", - }, + link: "#why-hmpl" + } ], iconAssets: "fontawesome-with-brands", @@ -58,15 +58,15 @@ export default defineUserConfig({ sidebar: [ { text: "Introduction", - link: "introduction.md", + link: "introduction.md" }, { text: "Installation", - link: "installation.md", + link: "installation.md" }, { text: "Getting started", - link: "getting-started.md", + link: "getting-started.md" }, { text: "hmpl", @@ -75,16 +75,28 @@ export default defineUserConfig({ { text: "compile", link: "hmpl.md#compile", + children: [ + { + text: "RequestInit", + link: "hmpl.md#requestinit", + children: [ + { + text: "get", + link: "hmpl.md#get" + } + ] + } + ] }, { text: "stringify", - link: "hmpl.md#stringify", + link: "hmpl.md#stringify" }, { text: "Concept of context", - link: "hmpl.md#concept-of-context", - }, - ], + link: "hmpl.md#concept-of-context" + } + ] }, { text: "Request", @@ -92,49 +104,49 @@ export default defineUserConfig({ children: [ { text: "src", - link: "request.md#src", + link: "request.md#src" }, { text: "method", - link: "request.md#method", + link: "request.md#method" }, { text: "after", - link: "request.md#after", + link: "request.md#after" }, { text: "indicators", - link: "request.md#indicators", + link: "request.md#indicators" }, { text: "repeat", - link: "request.md#repeat", + link: "request.md#repeat" }, { text: "memo", - link: "request.md#memo", + link: "request.md#memo" }, { text: "autoBody", - link: "request.md#autobody", + link: "request.md#autobody" }, { text: "initId", - link: "request.md#initid", - }, - ], + link: "request.md#initid" + } + ] }, { text: "Types", - link: "types.md", + link: "types.md" }, { text: "Webpack", - link: "webpack.md", + link: "webpack.md" }, { text: "Examples", - link: "examples.md", + link: "examples.md" }, { text: "About", @@ -144,41 +156,41 @@ export default defineUserConfig({ children: [ { text: "Discussion and development of an open-source project", - link: "discussion-and-development-of-an-open-source-project.md", + link: "discussion-and-development-of-an-open-source-project.md" }, { text: "GitHub repository with examples", - link: "github-repository-with-examples.md", + link: "github-repository-with-examples.md" }, { text: "Server-side rendering", - link: "server-side-rendering.md", - }, - ], + link: "server-side-rendering.md" + } + ] }, { text: "Changelog", - link: "changelog.md", - }, + link: "changelog.md" + } ], plugins: { search: true, sitemap: { - hostname: "hmpl-lang.dev", + hostname: "hmpl-lang.dev" }, git: { createdTime: false, updatedTime: false, - contributors: false, + contributors: false }, shiki: { langAlias: { - hmpl: "html", + hmpl: "html" }, - theme: "min-light", - }, - }, + theme: "min-light" + } + } }), head: [["link", { rel: "icon", href: "/images/favicon.ico" }]], - bundler: viteBundler(), + bundler: viteBundler() }); diff --git a/docs/hmpl.md b/docs/hmpl.md index b6cabf2..38b87dc 100644 --- a/docs/hmpl.md +++ b/docs/hmpl.md @@ -18,8 +18,8 @@ const templateFn = hmpl.compile( { memo: true, autoBody: { - formData: true, - }, + formData: true + } } ); ``` @@ -72,7 +72,7 @@ const elementObj = templateFn({ cache: "no-cache", credentials: "same-origin", headers: { - "Content-Type": "text/html", + "Content-Type": "text/html" }, redirect: "follow", get: (prop, value) => {}, @@ -81,7 +81,7 @@ const elementObj = templateFn({ signal: new AbortController().signal, integrity: "...", window: null, - refferer: "about:client", + refferer: "about:client" }); ``` @@ -96,14 +96,14 @@ const elementObj = templateFn([ cache: "no-cache", credentials: "same-origin", headers: { - "Content-Type": "text/html", + "Content-Type": "text/html" }, redirect: "follow", get: (prop, value) => {}, referrerPolicy: "no-referrer", - body: JSON.stringify(data), - }, - }, + body: JSON.stringify(data) + } + } ]); ``` @@ -177,6 +177,31 @@ Values are dynamically assigned to the object depending on the server response. > The status changes depending on the server response. But, the most important thing is that it is not assigned several times if it is the same. When working with `Proxy` or `Object.defineProperty` or `get` or something like that, this will not give the object unnecessary updates! +### RequestInit function + +In order to work with the [context](#concept-of-context), the new version introduced the [HMPLRequestInitFunction](/types.md#hmplrequestinitfunction) function. It takes as an argument the [HMPLInstanceContext](/types.md#hmplinstancecontext) object. Returns [HMPLRequestInit](/types.md#hmplrequestinit). + +```javascript +const elementObj = templateFn(({ + request: { event } +})=>{ + { + mode: "cors", + cache: "no-cache", + credentials: "same-origin", + headers: { + "Content-Type": "text/html", + }, + redirect: "follow", + get: (prop, value) => {}, + referrerPolicy: "no-referrer", + body: new FormatData(event.target, event.submitter), + } +}); +``` + +Also, the function value can be used as a `value` for the identification RequestInit. + #### get The get property takes the value of a function that fires every time one of the properties is updated. @@ -195,36 +220,30 @@ const elementObj = templateFn({ console.log(value); break; } - }, + } }); ``` It is worth noting that the `requests` property is not called when the value changes, because the function is called when the values ​​in this property change only for array elements. This is a debatable thing, but it may not be necessary to call this function when a specific property of an object is called. -### RequestInit function - -In order to work with the [context](#concept-of-context), the new version introduced the [HMPLRequestInitFunction](/types.md#hmplrequestinitfunction) function. It takes as an argument the [HMPLInstanceContext](/types.md#hmplinstancecontext) object. Returns [HMPLRequestInit](/types.md#hmplrequestinit). +Also, to work with `async` `await` you can use a similar construct that uses a vanilla `Promise` object: ```javascript -const elementObj = templateFn(({ - request: { event } -})=>{ - { - mode: "cors", - cache: "no-cache", - credentials: "same-origin", - headers: { - "Content-Type": "text/html", - }, - redirect: "follow", - get: (prop, value) => {}, - referrerPolicy: "no-referrer", - body: new FormatData(event.target, event.submitter), +const val = await new Promise((res, rej) => { + templateFn({ + get: (prop, value, requestObject) => { + switch (prop) { + case "response": + if (!value) return; + res(value); + break; + } } + }); }); ``` -Also, the function value can be used as a `value` for the identification RequestInit. +This is described in more detail in the blog in [this article](https://blog.hmpl-lang.dev/2024/11/26/asynchronicity-async-await-support-when-working-with-hmpl.html). ## stringify @@ -232,7 +251,7 @@ This function accepts an object of type [HMPLRequestInfo](/types.md#hmplrequesti ```javascript const request = hmpl.stringify({ - src: "/api/test", + src: "/api/test" }); const templateFn = hmpl.compile(`{${request}}`); ``` @@ -265,7 +284,7 @@ const initFn = (ctx) => { const event = ctx.request.event; const text = event.target.textContent; return { - body: text, + body: text }; }; const elementObj = templateFn(initFn);