Skip to content

Commit

Permalink
Copied changes from hmpl/app
Browse files Browse the repository at this point in the history
  • Loading branch information
aanthonymax committed Nov 25, 2024
1 parent 2e92626 commit d64bcc0
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 71 deletions.
96 changes: 54 additions & 42 deletions docs/.vuepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,47 +26,47 @@ 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",

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",
Expand All @@ -75,66 +75,78 @@ 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",
link: "request.md",
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",
Expand All @@ -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()
});
77 changes: 48 additions & 29 deletions docs/hmpl.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const templateFn = hmpl.compile(
{
memo: true,
autoBody: {
formData: true,
},
formData: true
}
}
);
```
Expand Down Expand Up @@ -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) => {},
Expand All @@ -81,7 +81,7 @@ const elementObj = templateFn({
signal: new AbortController().signal,
integrity: "...",
window: null,
refferer: "about:client",
refferer: "about:client"
});
```

Expand All @@ -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)
}
}
]);
```

Expand Down Expand Up @@ -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.
Expand All @@ -195,44 +220,38 @@ 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

This function accepts an object of type [HMPLRequestInfo](/types.md#hmplrequestinfo) with request data and returns a string request object.

```javascript
const request = hmpl.stringify({
src: "/api/test",
src: "/api/test"
});
const templateFn = hmpl.compile(`{${request}}`);
```
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit d64bcc0

Please sign in to comment.