vv-template-html 0.0.1-beta → 0.0.1-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +5 -12
- package/index.html +9 -2
- package/index.js +12 -3
- package/package.json +1 -1
- package/template/main.html +3 -0
- package/template-html.d.ts +2 -1
- package/template-html.min.js +1 -1
- package/template-html.min.js.map +3 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 IFTC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
- 支持多种 baseUrl 格式
|
|
10
10
|
- 提供 TypeScript 类型定义
|
|
11
11
|
|
|
12
|
-
## 安装与构建
|
|
13
|
-
开发依赖使用 esbuild 打包：
|
|
14
|
-
```bash
|
|
15
|
-
npm install
|
|
16
|
-
npm run build # 会调用 esbuild.config.js，生成 template-html.min.js
|
|
17
|
-
```
|
|
18
|
-
|
|
19
12
|
## 快速开始
|
|
20
13
|
在页面中引入构建产物：
|
|
21
14
|
```html
|
|
@@ -30,11 +23,11 @@ npm run build # 会调用 esbuild.config.js，生成 template-html.min.js
|
|
|
30
23
|
```
|
|
31
24
|
|
|
32
25
|
## API 概览
|
|
33
|
-
- TemplateHTML.VERSION: string
|
|
34
|
-
- TemplateHTML.baseUrl: string
|
|
35
|
-
- TemplateHTML.templates: { [key: string]: HTMLElement }
|
|
36
|
-
- TemplateHTML.getTemplate(templateName: string): Promise<HTMLElement
|
|
37
|
-
- TemplateHTML.render(templateName: string, element: HTMLElement): Promise<void
|
|
26
|
+
- `TemplateHTML.VERSION: string`（只读）
|
|
27
|
+
- `TemplateHTML.baseUrl: string`（可读写，支持多种格式）
|
|
28
|
+
- `TemplateHTML.templates: { [key: string]: HTMLElement }`（只读缓存）
|
|
29
|
+
- `TemplateHTML.getTemplate(templateName: string): Promise<HTMLElement>`
|
|
30
|
+
- `TemplateHTML.render(templateName: string, element: HTMLElement): Promise<void>`
|
|
38
31
|
|
|
39
32
|
自定义错误类：TemplateHTMLError（继承自 Error）
|
|
40
33
|
|
package/index.html
CHANGED
|
@@ -12,8 +12,15 @@
|
|
|
12
12
|
<script>
|
|
13
13
|
(async function () {
|
|
14
14
|
console.log(TemplateHTML.VERSION);
|
|
15
|
-
const main = await TemplateHTML.getTemplate('main'
|
|
16
|
-
|
|
15
|
+
const main = await TemplateHTML.getTemplate('main', {
|
|
16
|
+
text: "This is a sample text rendered by TemplateHTML."
|
|
17
|
+
});
|
|
18
|
+
const btn = main.getElementById('btn');
|
|
19
|
+
const content = main.getElementById('content');
|
|
20
|
+
btn.addEventListener('click', () => {
|
|
21
|
+
content.innerHTML = "Button Clicked!";
|
|
22
|
+
});
|
|
23
|
+
console.log(main, btn);
|
|
17
24
|
TemplateHTML.render("main", document.body);
|
|
18
25
|
})();
|
|
19
26
|
</script>
|
package/index.js
CHANGED
|
@@ -44,25 +44,34 @@ globalThis.TemplateHTML = (function () {
|
|
|
44
44
|
configurable: false,
|
|
45
45
|
},
|
|
46
46
|
getTemplate: {
|
|
47
|
-
value: async function (templateName) {
|
|
47
|
+
value: async function (templateName, params = {}) {
|
|
48
48
|
if (!templateName) {
|
|
49
49
|
throw new TemplateHTMLError("Template name is required");
|
|
50
50
|
}
|
|
51
51
|
if (templates[templateName]) {
|
|
52
52
|
return templates[templateName];
|
|
53
53
|
}
|
|
54
|
+
if (typeof params != "object") {
|
|
55
|
+
throw new TemplateHTMLError("params must be an object");
|
|
56
|
+
}
|
|
54
57
|
try {
|
|
55
58
|
const r = await fetch(baseUrl + templateName + ".html");
|
|
56
59
|
if (!r.ok) {
|
|
57
60
|
throw new TemplateHTMLError("cannot load template");
|
|
58
61
|
}
|
|
59
62
|
const parser = new DOMParser();
|
|
60
|
-
|
|
63
|
+
let template = await r.text();
|
|
64
|
+
for (let i = 0; i < Object.keys(params).length; i++) {
|
|
65
|
+
template = template.replaceAll("{" + Object.keys(params)[i] + "}", params[Object.keys(params)[i]].toString());
|
|
66
|
+
}
|
|
61
67
|
const doc = parser.parseFromString(template, "text/html");
|
|
62
68
|
if (!doc.body.children[0]) {
|
|
63
69
|
throw new TemplateHTMLError("template is empty");
|
|
64
70
|
}
|
|
65
71
|
templates[templateName] = doc.body.children[0];
|
|
72
|
+
templates[templateName].getElementById = function (id) {
|
|
73
|
+
return this.querySelector("#" + id);
|
|
74
|
+
};
|
|
66
75
|
return templates[templateName];
|
|
67
76
|
} catch (e) {
|
|
68
77
|
throw new TemplateHTMLError("cannot load template. " + e.message);
|
|
@@ -74,7 +83,7 @@ globalThis.TemplateHTML = (function () {
|
|
|
74
83
|
render: {
|
|
75
84
|
value: async function (templateName, element) {
|
|
76
85
|
const template = await TemplateHTML.getTemplate(templateName);
|
|
77
|
-
element.appendChild(template
|
|
86
|
+
element.appendChild(template);
|
|
78
87
|
},
|
|
79
88
|
enumerable: true,
|
|
80
89
|
configurable: false,
|
package/package.json
CHANGED
package/template/main.html
CHANGED
package/template-html.d.ts
CHANGED
|
@@ -28,9 +28,10 @@ declare global {
|
|
|
28
28
|
/**
|
|
29
29
|
* 获取指定名称的模板
|
|
30
30
|
* @param templateName 模板名称
|
|
31
|
+
* @param params 模板参数对象，用于替换模板中的占位符
|
|
31
32
|
* @returns 返回模板的 HTMLElement
|
|
32
33
|
*/
|
|
33
|
-
getTemplate(templateName: string): Promise<HTMLElement>;
|
|
34
|
+
getTemplate(templateName: string, params?: { [key: string]: string }): Promise<HTMLElement>;
|
|
34
35
|
|
|
35
36
|
/**
|
|
36
37
|
* 渲染指定名称的模板到指定元素
|
package/template-html.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
globalThis.TemplateHTML=(function(){class r extends Error{constructor(t){super(t),this.name="TemplateHTMLError"}}let
|
|
1
|
+
globalThis.TemplateHTML=(function(){class r extends Error{constructor(t){super(t),this.name="TemplateHTMLError"}}let a={},n={},i=location.origin+"/template/";return Object.defineProperties(a,{VERSION:{value:"0.0.1-beta.2",writable:!1,enumerable:!0,configurable:!1},baseUrl:{get:function(){return i},set:function(e){if(e.startsWith("file://"))i=e;else if(e.startsWith("/")||e.startsWith("./")||e.startsWith("../"))i=new URL(e,location.origin).href;else if(e.startsWith("http://")||e.startsWith("https://"))i=e;else throw new r("Invalid baseUrl format")},enumerable:!0,configurable:!1},templates:{get:function(){return n},set:function(e){throw new r("templates cannot be set")},enumerable:!0,configurable:!1},getTemplate:{value:async function(e,t={}){if(!e)throw new r("Template name is required");if(n[e])return n[e];if(typeof t!="object")throw new r("params must be an object");try{let o=await fetch(i+e+".html");if(!o.ok)throw new r("cannot load template");let f=new DOMParser,l=await o.text();for(let s=0;s<Object.keys(t).length;s++)l=l.replaceAll("{"+Object.keys(t)[s]+"}",t[Object.keys(t)[s]].toString());let c=f.parseFromString(l,"text/html");if(!c.body.children[0])throw new r("template is empty");return n[e]=c.body.children[0],n[e].getElementById=function(s){return this.querySelector("#"+s)},n[e]}catch(o){throw new r("cannot load template. "+o.message)}},enumerable:!0,configurable:!1},render:{value:async function(e,t){let o=await TemplateHTML.getTemplate(e);t.appendChild(o)},enumerable:!0,configurable:!1,writable:!1}}),a})();
|
|
2
2
|
//# sourceMappingURL=template-html.min.js.map
|
package/template-html.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.js"],
|
|
4
|
-
"sourcesContent": ["globalThis.TemplateHTML = (function () {\r\n class TemplateHTMLError extends Error {\r\n constructor(message) {\r\n super(message);\r\n this.name = \"TemplateHTMLError\";\r\n }\r\n }\r\n const obj = {};\r\n const templates = {};\r\n let baseUrl = location.origin + \"/template/\";\r\n Object.defineProperties(obj, {\r\n VERSION: {\r\n value: VERSION,\r\n writable: false,\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n baseUrl: {\r\n get: function () {\r\n return baseUrl;\r\n },\r\n set: function (value) {\r\n if (value.startsWith(\"file://\")) {\r\n baseUrl = value;\r\n } else if (value.startsWith(\"/\") || value.startsWith(\"./\") || value.startsWith(\"../\")) {\r\n baseUrl = new URL(value, location.origin).href;\r\n } else if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\r\n baseUrl = value;\r\n } else {\r\n throw new TemplateHTMLError(\"Invalid baseUrl format\");\r\n }\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n templates: {\r\n get: function () {\r\n return templates;\r\n },\r\n set: function (value) {\r\n throw new TemplateHTMLError(\"templates cannot be set\");\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n getTemplate: {\r\n value: async function (templateName) {\r\n if (!templateName) {\r\n throw new TemplateHTMLError(\"Template name is required\");\r\n }\r\n if (templates[templateName]) {\r\n return templates[templateName];\r\n }\r\n try {\r\n const r = await fetch(baseUrl + templateName + \".html\");\r\n if (!r.ok) {\r\n throw new TemplateHTMLError(\"cannot load template\");\r\n }\r\n const parser = new DOMParser();\r\n
|
|
5
|
-
"mappings": "AAAA,WAAW,cAAgB,UAAY,CACnC,MAAMA,UAA0B,KAAM,CAClC,YAAYC,EAAS,CACjB,MAAMA,CAAO,EACb,KAAK,KAAO,mBAChB,CACJ,CACA,IAAMC,EAAM,CAAC,EACPC,EAAY,CAAC,EACfC,EAAU,SAAS,OAAS,aAChC,cAAO,iBAAiBF,EAAK,CACzB,QAAS,CACL,MAAO,
|
|
6
|
-
"names": ["TemplateHTMLError", "message", "obj", "templates", "baseUrl", "value", "templateName", "r", "parser", "template", "doc", "e", "element"]
|
|
4
|
+
"sourcesContent": ["globalThis.TemplateHTML = (function () {\r\n class TemplateHTMLError extends Error {\r\n constructor(message) {\r\n super(message);\r\n this.name = \"TemplateHTMLError\";\r\n }\r\n }\r\n const obj = {};\r\n const templates = {};\r\n let baseUrl = location.origin + \"/template/\";\r\n Object.defineProperties(obj, {\r\n VERSION: {\r\n value: VERSION,\r\n writable: false,\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n baseUrl: {\r\n get: function () {\r\n return baseUrl;\r\n },\r\n set: function (value) {\r\n if (value.startsWith(\"file://\")) {\r\n baseUrl = value;\r\n } else if (value.startsWith(\"/\") || value.startsWith(\"./\") || value.startsWith(\"../\")) {\r\n baseUrl = new URL(value, location.origin).href;\r\n } else if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\r\n baseUrl = value;\r\n } else {\r\n throw new TemplateHTMLError(\"Invalid baseUrl format\");\r\n }\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n templates: {\r\n get: function () {\r\n return templates;\r\n },\r\n set: function (value) {\r\n throw new TemplateHTMLError(\"templates cannot be set\");\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n getTemplate: {\r\n value: async function (templateName, params = {}) {\r\n if (!templateName) {\r\n throw new TemplateHTMLError(\"Template name is required\");\r\n }\r\n if (templates[templateName]) {\r\n return templates[templateName];\r\n }\r\n if (typeof params != \"object\") {\r\n throw new TemplateHTMLError(\"params must be an object\");\r\n }\r\n try {\r\n const r = await fetch(baseUrl + templateName + \".html\");\r\n if (!r.ok) {\r\n throw new TemplateHTMLError(\"cannot load template\");\r\n }\r\n const parser = new DOMParser();\r\n let template = await r.text();\r\n for (let i = 0; i < Object.keys(params).length; i++) {\r\n template = template.replaceAll(\"{\" + Object.keys(params)[i] + \"}\", params[Object.keys(params)[i]].toString());\r\n }\r\n const doc = parser.parseFromString(template, \"text/html\");\r\n if (!doc.body.children[0]) {\r\n throw new TemplateHTMLError(\"template is empty\");\r\n }\r\n templates[templateName] = doc.body.children[0];\r\n templates[templateName].getElementById = function (id) {\r\n return this.querySelector(\"#\" + id);\r\n };\r\n return templates[templateName];\r\n } catch (e) {\r\n throw new TemplateHTMLError(\"cannot load template. \" + e.message);\r\n }\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n },\r\n render: {\r\n value: async function (templateName, element) {\r\n const template = await TemplateHTML.getTemplate(templateName);\r\n element.appendChild(template);\r\n },\r\n enumerable: true,\r\n configurable: false,\r\n writable: false,\r\n }\r\n });\r\n return obj;\r\n})();"],
|
|
5
|
+
"mappings": "AAAA,WAAW,cAAgB,UAAY,CACnC,MAAMA,UAA0B,KAAM,CAClC,YAAYC,EAAS,CACjB,MAAMA,CAAO,EACb,KAAK,KAAO,mBAChB,CACJ,CACA,IAAMC,EAAM,CAAC,EACPC,EAAY,CAAC,EACfC,EAAU,SAAS,OAAS,aAChC,cAAO,iBAAiBF,EAAK,CACzB,QAAS,CACL,MAAO,eACP,SAAU,GACV,WAAY,GACZ,aAAc,EAClB,EACA,QAAS,CACL,IAAK,UAAY,CACb,OAAOE,CACX,EACA,IAAK,SAAUC,EAAO,CAClB,GAAIA,EAAM,WAAW,SAAS,EAC1BD,EAAUC,UACHA,EAAM,WAAW,GAAG,GAAKA,EAAM,WAAW,IAAI,GAAKA,EAAM,WAAW,KAAK,EAChFD,EAAU,IAAI,IAAIC,EAAO,SAAS,MAAM,EAAE,aACnCA,EAAM,WAAW,SAAS,GAAKA,EAAM,WAAW,UAAU,EACjED,EAAUC,MAEV,OAAM,IAAIL,EAAkB,wBAAwB,CAE5D,EACA,WAAY,GACZ,aAAc,EAClB,EACA,UAAW,CACP,IAAK,UAAY,CACb,OAAOG,CACX,EACA,IAAK,SAAUE,EAAO,CAClB,MAAM,IAAIL,EAAkB,yBAAyB,CACzD,EACA,WAAY,GACZ,aAAc,EAClB,EACA,YAAa,CACT,MAAO,eAAgBM,EAAcC,EAAS,CAAC,EAAG,CAC9C,GAAI,CAACD,EACD,MAAM,IAAIN,EAAkB,2BAA2B,EAE3D,GAAIG,EAAUG,CAAY,EACtB,OAAOH,EAAUG,CAAY,EAEjC,GAAI,OAAOC,GAAU,SACjB,MAAM,IAAIP,EAAkB,0BAA0B,EAE1D,GAAI,CACA,IAAMQ,EAAI,MAAM,MAAMJ,EAAUE,EAAe,OAAO,EACtD,GAAI,CAACE,EAAE,GACH,MAAM,IAAIR,EAAkB,sBAAsB,EAEtD,IAAMS,EAAS,IAAI,UACfC,EAAW,MAAMF,EAAE,KAAK,EAC5B,QAASG,EAAI,EAAGA,EAAI,OAAO,KAAKJ,CAAM,EAAE,OAAQI,IAC5CD,EAAWA,EAAS,WAAW,IAAM,OAAO,KAAKH,CAAM,EAAEI,CAAC,EAAI,IAAKJ,EAAO,OAAO,KAAKA,CAAM,EAAEI,CAAC,CAAC,EAAE,SAAS,CAAC,EAEhH,IAAMC,EAAMH,EAAO,gBAAgBC,EAAU,WAAW,EACxD,GAAI,CAACE,EAAI,KAAK,SAAS,CAAC,EACpB,MAAM,IAAIZ,EAAkB,mBAAmB,EAEnD,OAAAG,EAAUG,CAAY,EAAIM,EAAI,KAAK,SAAS,CAAC,EAC7CT,EAAUG,CAAY,EAAE,eAAiB,SAAUO,EAAI,CACnD,OAAO,KAAK,cAAc,IAAMA,CAAE,CACtC,EACOV,EAAUG,CAAY,CACjC,OAASQ,EAAG,CACR,MAAM,IAAId,EAAkB,yBAA2Bc,EAAE,OAAO,CACpE,CACJ,EACA,WAAY,GACZ,aAAc,EAClB,EACA,OAAQ,CACJ,MAAO,eAAgBR,EAAcS,EAAS,CAC1C,IAAML,EAAW,MAAM,aAAa,YAAYJ,CAAY,EAC5DS,EAAQ,YAAYL,CAAQ,CAChC,EACA,WAAY,GACZ,aAAc,GACd,SAAU,EACd,CACJ,CAAC,EACMR,CACX,GAAG",
|
|
6
|
+
"names": ["TemplateHTMLError", "message", "obj", "templates", "baseUrl", "value", "templateName", "params", "r", "parser", "template", "i", "doc", "id", "e", "element"]
|
|
7
7
|
}
|