flex-html-render 1.0.0 → 1.0.1

package/README.md

@@ -42,8 +42,6 @@ console.log(JSON.stringify(flexMessage, null, 2));
 - **參數**：`htmlString` (string) - Flex Message 對應的 HTML 字串
 - **回傳**：Flex Message JSON 物件陣列
 
-### 其他匯出
-- `officialDemoString`：官方範例 HTML 字串
 
 ## 支援的 Flex Message 元素
 本工具支援大部分 [LINE Flex Message](https://developers.line.biz/en/reference/messaging-api/#flex-message) 元素，包括：

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

@@ -0,0 +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;

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

@@ -0,0 +1,244 @@
+import { Parser as f } from "htmlparser2";
+const g = {
+  ELEMENT: "element",
+  TEXT: "text"
+}, e = {
+  // flex message container
+  CAROUSEL: "carousel",
+  BUBBLE: "bubble",
+  // flex message top level sections
+  HEADER: "header",
+  HERO: "hero",
+  BODY: "body",
+  FOOTER: "footer",
+  // flex message tags
+  BOX: "box",
+  TEXT: "text",
+  SPAN: "span",
+  IMAGE: "image",
+  VIDEO: "video",
+  ICON: "icon",
+  SEPARATOR: "separator",
+  BUTTON: "button",
+  // custom render tags
+  SPACE: "space",
+  STRONG: "strong",
+  // box extends
+  BASELINE: "baseline",
+  ROW: "row",
+  VERTICAL: "vertical",
+  // custom utils tags
+  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(
+    {
+      onopentag(s, u) {
+        const N = {
+          type: g.ELEMENT,
+          tagName: s,
+          attributes: Object.fromEntries(
+            Object.entries(u).map(([h, m]) => [h, T(m)])
+          ),
+          children: []
+        };
+        a[a.length - 1].children.push(N), a.push(N);
+      },
+      ontext(s) {
+        s.trim() && a[a.length - 1].children.push({
+          type: g.TEXT,
+          content: s.replace(/\n/g, "").trim()
+        });
+      },
+      onclosetag() {
+        a.pop();
+      },
+      onerror(s) {
+        console.error("解析錯誤:", s);
+      }
+    },
+    {
+      xmlMode: !0,
+      // 開啟 XML 模式以支援自定義 self-closing tags
+      lowerCaseTags: !1,
+      // 保留標籤大小寫
+      lowerCaseAttributeNames: !1
+    }
+  );
+  return n.write(t), n.end(), r.children;
+}
+const l = (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 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 && l("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 && l("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 === g.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);
+    return c.bubble({
+      ...t.attributes,
+      header: n ? i(n) : void 0,
+      hero: s ? i(s) : void 0,
+      body: u ? i(u) : void 0,
+      footer: N ? i(N) : 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(
+      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 (t.tagName === e.BUTTON)
+    return t.attributes.action || l("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)
+      return c.span(
+        n.content,
+        t.attributes
+      );
+    l("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 && 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);
+  if (t.tagName === e.ICON)
+    return c.icon(t.attributes);
+  if (t.tagName === e.BOX)
+    return 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 A(t).map(i);
+  } catch (r) {
+    console.error("Error converting HTML to Flex Message:", r);
+  }
+}
+export {
+  C as default
+};

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

@@ -0,0 +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"}})}));

package/package.json

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