flex-html-render 1.0.0 → 1.0.2

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) 元素，包括：
@@ -84,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

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

@@ -0,0 +1,251 @@
+import { Parser as f } from "htmlparser2";
+const m = {
+  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",
+  DIV: "div",
+  ARTICLE: "article",
+  // custom utils tags
+  ACTION: "action",
+  BACKGROUND: "background"
+}, p = [
+  e.HEADER,
+  e.HERO,
+  e.BODY,
+  e.FOOTER
+], b = [
+  e.BOX,
+  e.VERTICAL,
+  e.ROW,
+  e.BASELINE,
+  e.DIV,
+  e.ARTICLE
+], E = [
+  e.TEXT,
+  e.STRONG
+];
+function T(t) {
+  const a = Number(t);
+  return isNaN(a) ? t : a;
+}
+function O(t) {
+  return t === "true" ? !0 : t === "false" ? !1 : t;
+}
+function A(t) {
+  return [
+    T,
+    O
+  ].reduce((r, l) => l(r), t);
+}
+function B(t) {
+  const a = { type: "root", children: [] }, r = [a], l = new f(
+    {
+      onopentag(n, u) {
+        const g = {
+          type: m.ELEMENT,
+          tagName: n,
+          attributes: Object.fromEntries(
+            Object.entries(u).map(([h, N]) => [h, A(N)])
+          ),
+          children: []
+        };
+        r[r.length - 1].children.push(g), r.push(g);
+      },
+      ontext(n) {
+        n.trim() && r[r.length - 1].children.push({
+          type: m.TEXT,
+          content: n.replace(/\n/g, "").trim()
+        });
+      },
+      onclosetag() {
+        r.pop();
+      },
+      onerror(n) {
+        console.error("解析錯誤:", n);
+      }
+    },
+    {
+      xmlMode: !0,
+      // 開啟 XML 模式以支援自定義 self-closing tags
+      lowerCaseTags: !1,
+      // 保留標籤大小寫
+      lowerCaseAttributeNames: !1
+    }
+  );
+  return l.write(t), l.end(), a.children;
+}
+const o = (t) => {
+  throw Error(`[Flex Html Render]: ${t}`);
+}, c = {
+  carousel: (t) => ({
+    type: "carousel",
+    contents: t
+  }),
+  bubble: (t = {}) => ({
+    type: "bubble",
+    ...t
+  }),
+  box: (t, a = {}) => ({
+    type: "box",
+    contents: t,
+    ...a
+  }),
+  text: (t, a = {}) => ({
+    type: "text",
+    ...typeof t == "string" ? { text: t } : {
+      contents: t
+    },
+    ...a
+  }),
+  span: (t, a = {}) => ({
+    type: "span",
+    text: t,
+    ...a
+  }),
+  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 d(t) {
+  if (t.tagName !== e.BACKGROUND && t.children && t.children.length > 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 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 || {}, 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 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: 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) && 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 (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 || o("Button component should contain an action node"), c.button(t.attributes);
+  if (t.tagName === e.SPAN) {
+    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(
+        l.content,
+        t.attributes
+      );
+    o("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 && 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 || 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 x(t) {
+  try {
+    return B(t).map(i);
+  } catch (a) {
+    throw console.error("Error converting HTML to Flex Message:", a), a;
+  }
+}
+export {
+  x as default
+};

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

@@ -0,0 +1 @@
+(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.0",
+  "version": "1.0.2",
   "description": "將 HTML 字串轉換為 LINE Flex Message JSON 結構的工具",
   "type": "module",
   "main": "dist/flex-html-render.cjs.js",