vv-template-html 0.0.1-beta.1 → 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/index.html CHANGED
@@ -15,7 +15,12 @@
15
15
  const main = await TemplateHTML.getTemplate('main', {
16
16
  text: "This is a sample text rendered by TemplateHTML."
17
17
  });
18
- console.log(main);
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);
19
24
  TemplateHTML.render("main", document.body);
20
25
  })();
21
26
  </script>
package/index.js CHANGED
@@ -69,6 +69,9 @@ globalThis.TemplateHTML = (function () {
69
69
  throw new TemplateHTMLError("template is empty");
70
70
  }
71
71
  templates[templateName] = doc.body.children[0];
72
+ templates[templateName].getElementById = function (id) {
73
+ return this.querySelector("#" + id);
74
+ };
72
75
  return templates[templateName];
73
76
  } catch (e) {
74
77
  throw new TemplateHTMLError("cannot load template. " + e.message);
@@ -80,7 +83,7 @@ globalThis.TemplateHTML = (function () {
80
83
  render: {
81
84
  value: async function (templateName, element) {
82
85
  const template = await TemplateHTML.getTemplate(templateName);
83
- element.appendChild(template.cloneNode(true));
86
+ element.appendChild(template);
84
87
  },
85
88
  enumerable: true,
86
89
  configurable: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vv-template-html",
3
- "version": "0.0.1-beta.1",
3
+ "version": "0.0.1-beta.2",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "build": "node esbuild.config.js"
@@ -1,4 +1,6 @@
1
1
  <div id="app">
2
2
  <h1>Hello, TemplateHTML!</h1>
3
3
  <p>{text}</p>
4
+ <button id="btn">Button</button>
5
+ <div id="content"></div>
4
6
  </div>
@@ -1,2 +1,2 @@
1
- globalThis.TemplateHTML=(function(){class r extends Error{constructor(t){super(t),this.name="TemplateHTMLError"}}let i={},o={},s=location.origin+"/template/";return Object.defineProperties(i,{VERSION:{value:"0.0.1-beta",writable:!1,enumerable:!0,configurable:!1},baseUrl:{get:function(){return s},set:function(e){if(e.startsWith("file://"))s=e;else if(e.startsWith("/")||e.startsWith("./")||e.startsWith("../"))s=new URL(e,location.origin).href;else if(e.startsWith("http://")||e.startsWith("https://"))s=e;else throw new r("Invalid baseUrl format")},enumerable:!0,configurable:!1},templates:{get:function(){return o},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(o[e])return o[e];if(typeof t!="object")throw new r("params must be an object");try{let n=await fetch(s+e+".html");if(!n.ok)throw new r("cannot load template");let f=new DOMParser,a=await n.text();for(let l=0;l<Object.keys(t).length;l++)a=a.replaceAll("{"+Object.keys(t)[l]+"}",t[Object.keys(t)[l]].toString());let c=f.parseFromString(a,"text/html");if(!c.body.children[0])throw new r("template is empty");return o[e]=c.body.children[0],o[e]}catch(n){throw new r("cannot load template. "+n.message)}},enumerable:!0,configurable:!1},render:{value:async function(e,t){let n=await TemplateHTML.getTemplate(e);t.appendChild(n.cloneNode(!0))},enumerable:!0,configurable:!1,writable:!1}}),i})();
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
@@ -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, 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 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.cloneNode(true));\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,aACP,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,EACtCT,EAAUG,CAAY,CACjC,OAASO,EAAG,CACR,MAAM,IAAIb,EAAkB,yBAA2Ba,EAAE,OAAO,CACpE,CACJ,EACA,WAAY,GACZ,aAAc,EAClB,EACA,OAAQ,CACJ,MAAO,eAAgBP,EAAcQ,EAAS,CAC1C,IAAMJ,EAAW,MAAM,aAAa,YAAYJ,CAAY,EAC5DQ,EAAQ,YAAYJ,EAAS,UAAU,EAAI,CAAC,CAChD,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", "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
  }