flex-html-render 1.0.1 → 1.0.2

package/README.md

@@ -82,6 +82,7 @@ console.log(JSON.stringify(flexMessage, null, 2));
 
 ### 便捷標籤 (Convenience Tags)
 這些是對常用設定的簡寫標籤：
+- `<div>`, `<article>` - 等同於 `<box>`
 - `<baseline>` - 等同於 `<box layout="baseline">`
 - `<row>` - 等同於 `<box layout="horizontal">`
 - `<vertical>` - 等同於 `<box layout="vertical">`

package/dist/flex-html-render.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("htmlparser2"),N={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",ACTION:"action",BACKGROUND:"background"},b=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE];function E(t){const r=Number(t);return isNaN(r)?t:r}function O(t){return t==="true"?!0:t==="false"?!1:t}function T(t){return[E,O].reduce((a,n)=>n(a),t)}function A(t){const r={type:"root",children:[]},a=[r],n=new f.Parser({onopentag(s,u){const g={type:N.ELEMENT,tagName:s,attributes:Object.fromEntries(Object.entries(u).map(([h,m])=>[h,T(m)])),children:[]};a[a.length-1].children.push(g),a.push(g)},ontext(s){s.trim()&&a[a.length-1].children.push({type:N.TEXT,content:s.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(s){console.error("解析錯誤:",s)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return n.write(t),n.end(),r.children}const c=t=>{throw Error(`[Flex Html Render]: ${t}`)},l={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function B(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&c("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function y(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&c("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function i(t){t.attributes=t.attributes||{};const r=y(t);r&&(t.attributes.action=i(r));const a=B(t);if(a&&p.includes(t.tagName)&&(t.attributes.background=i(a)),t.type===N.TEXT)return l.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const n=t.children.find(o=>o.tagName===e.HEADER),s=t.children.find(o=>o.tagName===e.HERO),u=t.children.find(o=>o.tagName===e.BODY),g=t.children.find(o=>o.tagName===e.FOOTER);return l.bubble({...t.attributes,header:n?i(n):void 0,hero:s?i(s):void 0,body:u?i(u):void 0,footer:g?i(g):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(n=>n.tagName!==e.BUBBLE)&&c("Carousel can only have Bubble as children"),t.children.length>12&&c("Carousel can have maximum 12 bubbles"),l.carousel(t.children.map(i));if(b.includes(t.tagName))return t.children.length!==1&&c(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||c("Button component should contain an action node"),l.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&c("Span component can only have one text child");const n=t.children[0];if(n&&n.type===N.TEXT)return l.span(n.content,t.attributes);c("Span component only allowed text child")}if(t.tagName===e.TEXT)return l.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return l.separator(t.attributes);if(t.tagName===e.IMAGE)return l.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&c("Video component should only has one Box or Image as altContent"),[e.BOX,e.IMAGE].includes(t.children[0]?.tagName)||c("Video component should only has Box or Image child as altContent"),t.attributes.altContent=i(t.children[0]),l.video(t.attributes);if(t.tagName===e.ICON)return l.icon(t.attributes);if(t.tagName===e.BOX)return l.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return l.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return l.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function R(t){try{return A(t).map(i)}catch(r){console.error("Error converting HTML to Flex Message:",r)}}exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("htmlparser2"),h={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",DIV:"div",ARTICLE:"article",ACTION:"action",BACKGROUND:"background"},b=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE,e.DIV,e.ARTICLE],E=[e.TEXT,e.STRONG];function T(t){const r=Number(t);return isNaN(r)?t:r}function O(t){return t==="true"?!0:t==="false"?!1:t}function A(t){return[T,O].reduce((a,l)=>l(a),t)}function d(t){const r={type:"root",children:[]},a=[r],l=new f.Parser({onopentag(n,u){const g={type:h.ELEMENT,tagName:n,attributes:Object.fromEntries(Object.entries(u).map(([m,N])=>[m,A(N)])),children:[]};a[a.length-1].children.push(g),a.push(g)},ontext(n){n.trim()&&a[a.length-1].children.push({type:h.TEXT,content:n.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(n){console.error("解析錯誤:",n)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return l.write(t),l.end(),r.children}const s=t=>{throw Error(`[Flex Html Render]: ${t}`)},c={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function y(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&s("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function B(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&s("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function C(t){!E.includes(t.tagName)&&t.children?.some(n=>n.type===h.TEXT)&&s("Span component only allowed inside Text component"),t.tagName===e.VIDEO&&t.children?.some(n=>![e.BOX,e.IMAGE].includes(n.tagName))&&s("Video component only allowed Box or Image as altContent child"),!p.includes(t.tagName)&&t.children?.some(n=>n.tagName===e.BACKGROUND)&&s("Only Box component allowed to have Background child")}function i(t){t.attributes=t.attributes||{},C(t);const r=B(t);r&&(t.attributes.action=i(r));const a=y(t);if(a&&(t.attributes.background=i(a)),t.type===h.TEXT)return c.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const l=t.children.find(o=>o.tagName===e.HEADER),n=t.children.find(o=>o.tagName===e.HERO),u=t.children.find(o=>o.tagName===e.BODY),g=t.children.find(o=>o.tagName===e.FOOTER);return c.bubble({...t.attributes,header:l?i(l):void 0,hero:n?i(n):void 0,body:u?i(u):void 0,footer:g?i(g):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(l=>l.tagName!==e.BUBBLE)&&s("Carousel can only have Bubble as children"),t.children.length>12&&s("Carousel can have maximum 12 bubbles"),c.carousel(t.children.map(i));if(b.includes(t.tagName))return t.children.length!==1&&s(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||s("Button component should contain an action node"),c.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&s("Span component can only have one text child");const l=t.children[0];if(l&&l.type===h.TEXT)return c.span(l.content,t.attributes);s("Span component only allowed text child")}if(t.tagName===e.TEXT)return c.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return c.separator(t.attributes);if(t.tagName===e.IMAGE)return c.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&s("Video component should only has one Box or Image as altContent"),t.attributes.altContent=i(t.children[0]),c.video(t.attributes);if(t.tagName===e.ICON)return c.icon(t.attributes);if(t.tagName===e.BOX||t.tagName===e.DIV||t.tagName===e.ARTICLE)return t.attributes.layout||(t.attributes.layout="vertical"),c.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return c.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return c.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function R(t){try{return d(t).map(i)}catch(r){throw console.error("Error converting HTML to Flex Message:",r),r}}exports.default=R;

package/dist/flex-html-render.es.js

@@ -1,5 +1,5 @@
 import { Parser as f } from "htmlparser2";
-const g = {
+const m = {
   ELEMENT: "element",
   TEXT: "text"
 }, e = {
@@ -27,58 +27,65 @@ const g = {
   BASELINE: "baseline",
   ROW: "row",
   VERTICAL: "vertical",
+  DIV: "div",
+  ARTICLE: "article",
   // custom utils tags
   ACTION: "action",
   BACKGROUND: "background"
-}, b = [
+}, p = [
   e.HEADER,
   e.HERO,
   e.BODY,
   e.FOOTER
-], p = [
+], b = [
   e.BOX,
   e.VERTICAL,
   e.ROW,
-  e.BASELINE
+  e.BASELINE,
+  e.DIV,
+  e.ARTICLE
+], E = [
+  e.TEXT,
+  e.STRONG
 ];
-function E(t) {
-  const r = Number(t);
-  return isNaN(r) ? t : r;
+function T(t) {
+  const a = Number(t);
+  return isNaN(a) ? t : a;
 }
 function O(t) {
   return t === "true" ? !0 : t === "false" ? !1 : t;
 }
-function T(t) {
+function A(t) {
   return [
-    E,
+    T,
     O
-  ].reduce((a, n) => n(a), t);
+  ].reduce((r, l) => l(r), t);
 }
-function A(t) {
-  const r = { type: "root", children: [] }, a = [r], n = new f(
+function B(t) {
+  const a = { type: "root", children: [] }, r = [a], l = new f(
     {
-      onopentag(s, u) {
-        const N = {
-          type: g.ELEMENT,
-          tagName: s,
+      onopentag(n, u) {
+        const g = {
+          type: m.ELEMENT,
+          tagName: n,
           attributes: Object.fromEntries(
-            Object.entries(u).map(([h, m]) => [h, T(m)])
+            Object.entries(u).map(([h, N]) => [h, A(N)])
           ),
           children: []
         };
-        a[a.length - 1].children.push(N), a.push(N);
+        r[r.length - 1].children.push(g), r.push(g);
       },
-      ontext(s) {
-        s.trim() && a[a.length - 1].children.push({
-          type: g.TEXT,
-          content: s.replace(/\n/g, "").trim()
+      ontext(n) {
+        n.trim() && r[r.length - 1].children.push({
+          type: m.TEXT,
+          content: n.replace(/\n/g, "").trim()
         });
       },
       onclosetag() {
-        a.pop();
+        r.pop();
       },
-      onerror(s) {
-        console.error("解析錯誤:", s);
+      onerror(n) {
+        console.error("解析錯誤:", n);
       }
     },
     {
@@ -89,9 +96,9 @@ function A(t) {
       lowerCaseAttributeNames: !1
     }
   );
-  return n.write(t), n.end(), r.children;
+  return l.write(t), l.end(), a.children;
 }
-const l = (t) => {
+const o = (t) => {
   throw Error(`[Flex Html Render]: ${t}`);
 }, c = {
   carousel: (t) => ({
@@ -102,22 +109,22 @@ const l = (t) => {
     type: "bubble",
     ...t
   }),
-  box: (t, r = {}) => ({
+  box: (t, a = {}) => ({
     type: "box",
     contents: t,
-    ...r
+    ...a
   }),
-  text: (t, r = {}) => ({
+  text: (t, a = {}) => ({
     type: "text",
     ...typeof t == "string" ? { text: t } : {
       contents: t
     },
-    ...r
+    ...a
   }),
-  span: (t, r = {}) => ({
+  span: (t, a = {}) => ({
     type: "span",
     text: t,
-    ...r
+    ...a
   }),
   image: (t = {}) => ({
     type: "image",
@@ -147,54 +154,57 @@ const l = (t) => {
     ...t
   })
 };
-function B(t) {
+function d(t) {
   if (t.tagName !== e.BACKGROUND && t.children && t.children.length > 0) {
-    const r = t.children.filter((a) => a.tagName === e.BACKGROUND);
-    return r.length > 1 && l("A box node can only allowed with one background node inside"), t.children = t.children.filter((a) => a.tagName !== e.BACKGROUND), r[0];
+    const a = t.children.filter((r) => r.tagName === e.BACKGROUND);
+    return a.length > 1 && o("A box node can only allowed with one background node inside"), t.children = t.children.filter((r) => r.tagName !== e.BACKGROUND), a[0];
   }
   return null;
 }
 function y(t) {
   if (t.tagName !== e.ACTION && t.children && t.children.length > 0) {
-    const r = t.children.filter((a) => a.tagName === e.ACTION);
-    return r.length > 1 && l("A node can only allowed with one action node inside"), t.children = t.children.filter((a) => a.tagName !== e.ACTION), r[0];
+    const a = t.children.filter((r) => r.tagName === e.ACTION);
+    return a.length > 1 && o("A node can only allowed with one action node inside"), t.children = t.children.filter((r) => r.tagName !== e.ACTION), a[0];
   }
   return null;
 }
+function C(t) {
+  !E.includes(t.tagName) && t.children?.some((n) => n.type === m.TEXT) && o("Span component only allowed inside Text component"), t.tagName === e.VIDEO && t.children?.some((n) => ![e.BOX, e.IMAGE].includes(n.tagName)) && o("Video component only allowed Box or Image as altContent child"), !b.includes(t.tagName) && t.children?.some((n) => n.tagName === e.BACKGROUND) && o("Only Box component allowed to have Background child");
+}
 function i(t) {
-  t.attributes = t.attributes || {};
-  const r = y(t);
-  r && (t.attributes.action = i(r));
-  const a = B(t);
-  if (a && p.includes(t.tagName) && (t.attributes.background = i(a)), t.type === g.TEXT)
+  t.attributes = t.attributes || {}, C(t);
+  const a = y(t);
+  a && (t.attributes.action = i(a));
+  const r = d(t);
+  if (r && (t.attributes.background = i(r)), t.type === m.TEXT)
     return c.span(t.content, t.attributes);
   if (t.tagName === e.BUBBLE) {
-    const n = t.children.find((o) => o.tagName === e.HEADER), s = t.children.find((o) => o.tagName === e.HERO), u = t.children.find((o) => o.tagName === e.BODY), N = t.children.find((o) => o.tagName === e.FOOTER);
+    const l = t.children.find((s) => s.tagName === e.HEADER), n = t.children.find((s) => s.tagName === e.HERO), u = t.children.find((s) => s.tagName === e.BODY), g = t.children.find((s) => s.tagName === e.FOOTER);
     return c.bubble({
       ...t.attributes,
-      header: n ? i(n) : void 0,
-      hero: s ? i(s) : void 0,
+      header: l ? i(l) : void 0,
+      hero: n ? i(n) : void 0,
       body: u ? i(u) : void 0,
-      footer: N ? i(N) : void 0
+      footer: g ? i(g) : void 0
     });
   }
   if (t.tagName === e.CAROUSEL)
-    return t.children.some((n) => n.tagName !== e.BUBBLE) && l("Carousel can only have Bubble as children"), t.children.length > 12 && l("Carousel can have maximum 12 bubbles"), c.carousel(
+    return t.children.some((l) => l.tagName !== e.BUBBLE) && o("Carousel can only have Bubble as children"), t.children.length > 12 && o("Carousel can have maximum 12 bubbles"), c.carousel(
       t.children.map(i)
     );
-  if (b.includes(t.tagName))
-    return t.children.length !== 1 && l(`${t.tagName} should have exactly one child node`), i(t.children[0]);
+  if (p.includes(t.tagName))
+    return t.children.length !== 1 && o(`${t.tagName} should have exactly one child node`), i(t.children[0]);
   if (t.tagName === e.BUTTON)
-    return t.attributes.action || l("Button component should contain an action node"), c.button(t.attributes);
+    return t.attributes.action || o("Button component should contain an action node"), c.button(t.attributes);
   if (t.tagName === e.SPAN) {
-    t.children.length > 1 && l("Span component can only have one text child");
-    const n = t.children[0];
-    if (n && n.type === g.TEXT)
+    t.children.length > 1 && o("Span component can only have one text child");
+    const l = t.children[0];
+    if (l && l.type === m.TEXT)
       return c.span(
-        n.content,
+        l.content,
         t.attributes
       );
-    l("Span component only allowed text child");
+    o("Span component only allowed text child");
   }
   if (t.tagName === e.TEXT)
     return c.text(
@@ -206,14 +216,11 @@ function i(t) {
   if (t.tagName === e.IMAGE)
     return c.image(t.attributes);
   if (t.tagName === e.VIDEO)
-    return t.children.length !== 1 && l("Video component should only has one Box or Image as altContent"), [
-      e.BOX,
-      e.IMAGE
-    ].includes(t.children[0]?.tagName) || l("Video component should only has Box or Image child as altContent"), t.attributes.altContent = i(t.children[0]), c.video(t.attributes);
+    return t.children.length !== 1 && o("Video component should only has one Box or Image as altContent"), t.attributes.altContent = i(t.children[0]), c.video(t.attributes);
   if (t.tagName === e.ICON)
     return c.icon(t.attributes);
-  if (t.tagName === e.BOX)
-    return c.box(
+  if (t.tagName === e.BOX || t.tagName === e.DIV || t.tagName === e.ARTICLE)
+    return t.attributes.layout || (t.attributes.layout = "vertical"), c.box(
       t.children.map(i),
       t.attributes
     );
@@ -232,13 +239,13 @@ function i(t) {
   if (t.tagName === e.BACKGROUND)
     return t.attributes;
 }
-function C(t) {
+function x(t) {
   try {
-    return A(t).map(i);
-  } catch (r) {
-    console.error("Error converting HTML to Flex Message:", r);
+    return B(t).map(i);
+  } catch (a) {
+    throw console.error("Error converting HTML to Flex Message:", a), a;
   }
 }
 export {
-  C as default
+  x as default
 };

package/dist/flex-html-render.umd.js

@@ -1 +1 @@
-(function(u,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("htmlparser2")):typeof define=="function"&&define.amd?define(["exports","htmlparser2"],f):(u=typeof globalThis<"u"?globalThis:u||self,f(u.FlexHtmlRender={},u.htmlparser2))})(this,(function(u,f){"use strict";const g={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",ACTION:"action",BACKGROUND:"background"},N=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE];function b(t){const r=Number(t);return isNaN(r)?t:r}function E(t){return t==="true"?!0:t==="false"?!1:t}function T(t){return[b,E].reduce((a,l)=>l(a),t)}function O(t){const r={type:"root",children:[]},a=[r],l=new f.Parser({onopentag(c,h){const m={type:g.ELEMENT,tagName:c,attributes:Object.fromEntries(Object.entries(h).map(([B,R])=>[B,T(R)])),children:[]};a[a.length-1].children.push(m),a.push(m)},ontext(c){c.trim()&&a[a.length-1].children.push({type:g.TEXT,content:c.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(c){console.error("解析錯誤:",c)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return l.write(t),l.end(),r.children}const s=t=>{throw Error(`[Flex Html Render]: ${t}`)},n={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function y(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&s("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function A(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&s("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function i(t){t.attributes=t.attributes||{};const r=A(t);r&&(t.attributes.action=i(r));const a=y(t);if(a&&p.includes(t.tagName)&&(t.attributes.background=i(a)),t.type===g.TEXT)return n.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const l=t.children.find(o=>o.tagName===e.HEADER),c=t.children.find(o=>o.tagName===e.HERO),h=t.children.find(o=>o.tagName===e.BODY),m=t.children.find(o=>o.tagName===e.FOOTER);return n.bubble({...t.attributes,header:l?i(l):void 0,hero:c?i(c):void 0,body:h?i(h):void 0,footer:m?i(m):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(l=>l.tagName!==e.BUBBLE)&&s("Carousel can only have Bubble as children"),t.children.length>12&&s("Carousel can have maximum 12 bubbles"),n.carousel(t.children.map(i));if(N.includes(t.tagName))return t.children.length!==1&&s(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||s("Button component should contain an action node"),n.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&s("Span component can only have one text child");const l=t.children[0];if(l&&l.type===g.TEXT)return n.span(l.content,t.attributes);s("Span component only allowed text child")}if(t.tagName===e.TEXT)return n.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return n.separator(t.attributes);if(t.tagName===e.IMAGE)return n.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&s("Video component should only has one Box or Image as altContent"),[e.BOX,e.IMAGE].includes(t.children[0]?.tagName)||s("Video component should only has Box or Image child as altContent"),t.attributes.altContent=i(t.children[0]),n.video(t.attributes);if(t.tagName===e.ICON)return n.icon(t.attributes);if(t.tagName===e.BOX)return n.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return n.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return n.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function d(t){try{return O(t).map(i)}catch(r){console.error("Error converting HTML to Flex Message:",r)}}u.default=d,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(u,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("htmlparser2")):typeof define=="function"&&define.amd?define(["exports","htmlparser2"],h):(u=typeof globalThis<"u"?globalThis:u||self,h(u.FlexHtmlRender={},u.htmlparser2))})(this,(function(u,h){"use strict";const m={ELEMENT:"element",TEXT:"text"},e={CAROUSEL:"carousel",BUBBLE:"bubble",HEADER:"header",HERO:"hero",BODY:"body",FOOTER:"footer",BOX:"box",TEXT:"text",SPAN:"span",IMAGE:"image",VIDEO:"video",ICON:"icon",SEPARATOR:"separator",BUTTON:"button",SPACE:"space",STRONG:"strong",BASELINE:"baseline",ROW:"row",VERTICAL:"vertical",DIV:"div",ARTICLE:"article",ACTION:"action",BACKGROUND:"background"},N=[e.HEADER,e.HERO,e.BODY,e.FOOTER],p=[e.BOX,e.VERTICAL,e.ROW,e.BASELINE,e.DIV,e.ARTICLE],b=[e.TEXT,e.STRONG];function E(t){const r=Number(t);return isNaN(r)?t:r}function T(t){return t==="true"?!0:t==="false"?!1:t}function d(t){return[E,T].reduce((a,l)=>l(a),t)}function O(t){const r={type:"root",children:[]},a=[r],l=new h.Parser({onopentag(n,f){const g={type:m.ELEMENT,tagName:n,attributes:Object.fromEntries(Object.entries(f).map(([R,x])=>[R,d(x)])),children:[]};a[a.length-1].children.push(g),a.push(g)},ontext(n){n.trim()&&a[a.length-1].children.push({type:m.TEXT,content:n.replace(/\n/g,"").trim()})},onclosetag(){a.pop()},onerror(n){console.error("解析錯誤:",n)}},{xmlMode:!0,lowerCaseTags:!1,lowerCaseAttributeNames:!1});return l.write(t),l.end(),r.children}const s=t=>{throw Error(`[Flex Html Render]: ${t}`)},c={carousel:t=>({type:"carousel",contents:t}),bubble:(t={})=>({type:"bubble",...t}),box:(t,r={})=>({type:"box",contents:t,...r}),text:(t,r={})=>({type:"text",...typeof t=="string"?{text:t}:{contents:t},...r}),span:(t,r={})=>({type:"span",text:t,...r}),image:(t={})=>({type:"image",...t}),video:(t={})=>({type:"video",...t}),icon:(t={})=>({type:"icon",...t}),button:(t={})=>({type:"button",...t}),separator:(t={color:"#E0E3EA"})=>({type:"separator",...t}),uri:(t={})=>({type:"uri",altUri:t.altUri?{desktop:t.altUri}:void 0,...t})};function A(t){if(t.tagName!==e.BACKGROUND&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.BACKGROUND);return r.length>1&&s("A box node can only allowed with one background node inside"),t.children=t.children.filter(a=>a.tagName!==e.BACKGROUND),r[0]}return null}function y(t){if(t.tagName!==e.ACTION&&t.children&&t.children.length>0){const r=t.children.filter(a=>a.tagName===e.ACTION);return r.length>1&&s("A node can only allowed with one action node inside"),t.children=t.children.filter(a=>a.tagName!==e.ACTION),r[0]}return null}function B(t){!b.includes(t.tagName)&&t.children?.some(n=>n.type===m.TEXT)&&s("Span component only allowed inside Text component"),t.tagName===e.VIDEO&&t.children?.some(n=>![e.BOX,e.IMAGE].includes(n.tagName))&&s("Video component only allowed Box or Image as altContent child"),!p.includes(t.tagName)&&t.children?.some(n=>n.tagName===e.BACKGROUND)&&s("Only Box component allowed to have Background child")}function i(t){t.attributes=t.attributes||{},B(t);const r=y(t);r&&(t.attributes.action=i(r));const a=A(t);if(a&&(t.attributes.background=i(a)),t.type===m.TEXT)return c.span(t.content,t.attributes);if(t.tagName===e.BUBBLE){const l=t.children.find(o=>o.tagName===e.HEADER),n=t.children.find(o=>o.tagName===e.HERO),f=t.children.find(o=>o.tagName===e.BODY),g=t.children.find(o=>o.tagName===e.FOOTER);return c.bubble({...t.attributes,header:l?i(l):void 0,hero:n?i(n):void 0,body:f?i(f):void 0,footer:g?i(g):void 0})}if(t.tagName===e.CAROUSEL)return t.children.some(l=>l.tagName!==e.BUBBLE)&&s("Carousel can only have Bubble as children"),t.children.length>12&&s("Carousel can have maximum 12 bubbles"),c.carousel(t.children.map(i));if(N.includes(t.tagName))return t.children.length!==1&&s(`${t.tagName} should have exactly one child node`),i(t.children[0]);if(t.tagName===e.BUTTON)return t.attributes.action||s("Button component should contain an action node"),c.button(t.attributes);if(t.tagName===e.SPAN){t.children.length>1&&s("Span component can only have one text child");const l=t.children[0];if(l&&l.type===m.TEXT)return c.span(l.content,t.attributes);s("Span component only allowed text child")}if(t.tagName===e.TEXT)return c.text(t.children.map(i),t.attributes);if(t.tagName===e.SEPARATOR)return c.separator(t.attributes);if(t.tagName===e.IMAGE)return c.image(t.attributes);if(t.tagName===e.VIDEO)return t.children.length!==1&&s("Video component should only has one Box or Image as altContent"),t.attributes.altContent=i(t.children[0]),c.video(t.attributes);if(t.tagName===e.ICON)return c.icon(t.attributes);if(t.tagName===e.BOX||t.tagName===e.DIV||t.tagName===e.ARTICLE)return t.attributes.layout||(t.attributes.layout="vertical"),c.box(t.children.map(i),t.attributes);if(t.tagName===e.SPACE)return c.span(" ".repeat(t.attributes.size||1));if(t.tagName===e.STRONG)return t.tagName=e.TEXT,t.attributes.weight="bold",i(t);if(t.tagName===e.BASELINE)return t.tagName=e.BOX,t.attributes.layout="baseline",i(t);if(t.tagName===e.ROW)return t.tagName=e.BOX,t.attributes.layout="horizontal",i(t);if(t.tagName===e.VERTICAL)return t.tagName=e.BOX,t.attributes.layout="vertical",i(t);if(t.tagName===e.ACTION&&t.attributes.type==="uri")return c.uri(t.attributes);if(t.tagName===e.BACKGROUND)return t.attributes}function C(t){try{return O(t).map(i)}catch(r){throw console.error("Error converting HTML to Flex Message:",r),r}}u.default=C,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flex-html-render",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "將 HTML 字串轉換為 LINE Flex Message JSON 結構的工具",
   "type": "module",
   "main": "dist/flex-html-render.cjs.js",