html2any 0.0.6 → 0.1.1

package/README.md

@@ -10,19 +10,7 @@ But I also want to render the whole html easily rather than parse it manually.
 
 Now `html2any` help you to render html string. It not only parses your html but also gives you ability to transform it from origin to the dest.
 
-
-### Theory
-
-Use `html2any` to construct an AST of html string, then convert each node recursively with `rule` passed to transform function.
-
-For example, we translate `<p>` tag into React Native component `<Text style={styles.paragraph}>` with the prepared styles. Then decode the p tag' s content to avoid html entities mess up.
-
-### Demo
-
-- [Web React Online Demo](https://huozhi.github.io/html2any-web-demo/)
-- React Native demo: https://github.com/huozhi/html2any-rn-demo
-
-### Documentation
+### API
 
 html2any provide following APIs
 
@@ -39,29 +27,29 @@ html2any provide following APIs
 - html2any
 > Convert the html/xml to the final form directly.
 
-If it's not easy to reach the point, you could look at the [demo code](https://huozhi.github.io/html2any-web-demo/).
+### Usage
 
-#### Example
+```
+npm i -S html2any
+```
 
 ```js
-import html2any, {parse, transform} from 'html2any'
+import html2any, { parse, transform } from 'html2any'
 
-const html = `
-  <div>123</div>
-`
+const html = escapeHTMLEntity(`<div>123</div>`)
 
 const ast = parse(html)[0]
 
 function rule(node, children) {
-  if (node.name === 'div') {
-    return <div>{children}</div>
+  if (typeof node === 'string') {
+    return node
   } else {
-    return node // string node
+    return <div>{node}</div>
   }
 }
 
 const vdom = transform(ast, rule)
-// vdom form of Dumb
+// JSX vdom form of html
 // { type: 'div', props: {...}, children: '...' }
 
 ```
@@ -72,7 +60,9 @@ Or you can just call html2any directly
 const vdom = html2any(html, rule)
 ```
 
-### Issue
+### How It Works
+
+Use `html2any` to construct an AST of html string, then convert each node recursively with `rule` passed to transform function.
+
+For example, we translate `<p>` tag into React Native component `<Text style={styles.paragraph}>` with the prepared styles. Then decode the p tag' s content to avoid html entities mess up.
 
-Any suggestions or beautifier API you expect, just post issue [here](https://github.com/huozhi/html2any/issues).
-Reporting bugs is welcomed. : )

package/dist/index.js

@@ -0,0 +1,255 @@
+function transform(ast, rule) {
+    function next(node, index) {
+        if (node) {
+            if (typeof node === 'string') {
+                return rule(node, undefined, index);
+            }
+            if (Array.isArray(node)) {
+                return node.map((n, index)=>{
+                    if (typeof n !== 'string') {
+                        n.index = index; // critical array element index
+                    }
+                    return rule(n, next(n.children), index);
+                });
+            } else {
+                return rule(node, next(node.children), index);
+            }
+        }
+        return null;
+    }
+    return next(ast);
+}
+
+const voidElementTags = [
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+];
+function isSelfClose(tagName) {
+    return voidElementTags.indexOf(tagName.toLowerCase()) > -1;
+}
+function isPair(tagX, tagY) {
+    return tagX.name === tagY.name && tagX.type === 'start' && tagY.type === 'end';
+}
+var utils = {
+    isPair,
+    isSelfClose
+};
+
+const RAW_TEXT_TAGS = [
+    'script',
+    'style',
+    'textarea',
+    'title'
+];
+function extraAttrs(str) {
+    let i = 0;
+    const attrs = {};
+    while(i < str.length){
+        while(/\s/.test(str[i]))i++;
+        if (!str[i] || str[i] === '/') {
+            break;
+        }
+        const nameStart = i;
+        while(str[i] && !/[\s=/>]/.test(str[i]))i++;
+        const key = str.slice(nameStart, i);
+        let value = true;
+        while(/\s/.test(str[i]))i++;
+        if (str[i] === '=') {
+            i++;
+            while(/\s/.test(str[i]))i++;
+            const quote = str[i];
+            if (quote === '"' || quote === "'") {
+                i++;
+                const valueStart = i;
+                while(str[i] && str[i] !== quote)i++;
+                value = str.slice(valueStart, i);
+                if (str[i] === quote) i++;
+            } else {
+                const valueStart = i;
+                while(str[i] && !/[\s>]/.test(str[i]))i++;
+                value = str.slice(valueStart, i);
+            }
+        }
+        if (key) {
+            attrs[key] = value;
+        }
+    }
+    return attrs;
+}
+function makeToken(tag) {
+    const isTag = tag[0] === '<' && tag[tag.length - 1] === '>';
+    if (!isTag) {
+        return {
+            type: 'string',
+            value: tag
+        };
+    } else if (/^<!--/.test(tag) || /^<!doctype/i.test(tag) || /^<\?/.test(tag)) {
+        return null;
+    } else if (tag.startsWith('</')) {
+        return {
+            type: 'end',
+            name: tag.slice(2, -1).trim().split(/\s+/)[0]
+        };
+    } else {
+        const body = tag.slice(1, -1).trim();
+        const match = body.match(/^([^\s/>]+)/);
+        if (!match) {
+            return null;
+        }
+        const tagName = match[1];
+        const tagBody = body.slice(tagName.length);
+        return {
+            type: utils.isSelfClose(tagName) || tagBody[tagBody.length - 1] === '/' ? 'self-close' : 'start',
+            name: tagName,
+            attributes: extraAttrs(tagBody)
+        };
+    }
+}
+function findTagEnd(html, start) {
+    let quote = null;
+    for(let i = start + 1; i < html.length; i++){
+        const curr = html[i];
+        if (quote) {
+            if (curr === quote) quote = null;
+        } else if (curr === '"' || curr === "'") {
+            quote = curr;
+        } else if (curr === '>') {
+            return i;
+        }
+    }
+    return -1;
+}
+function getStartTagName(tag) {
+    if (tag.startsWith('</') || tag.startsWith('<!') || tag.startsWith('<?')) {
+        return null;
+    }
+    const match = tag.slice(1, -1).trim().match(/^([^\s/>]+)/);
+    return match && match[1];
+}
+function splitTokens(html) {
+    let i = 0;
+    let j = 0;
+    const tokens = [];
+    while(i < html.length){
+        const curr = html[i];
+        if (curr === '<') {
+            if (html.startsWith('<!--', i)) {
+                const k = html.indexOf('-->', i + 4);
+                if (k === -1) break;
+                if (j < i) {
+                    tokens.push(html.slice(j, i));
+                }
+                tokens.push(html.slice(i, k + 3));
+                i = j = k + 3;
+                continue;
+            }
+            if (j < i) {
+                tokens.push(html.slice(j, i));
+                j = i;
+            }
+            const k = findTagEnd(html, i);
+            if (k === -1) {
+                break;
+            }
+            tokens.push(html.slice(i, k + 1));
+            const tagName = getStartTagName(html.slice(i, k + 1));
+            if (tagName && RAW_TEXT_TAGS.indexOf(tagName.toLowerCase()) > -1) {
+                const closeTagStart = html.toLowerCase().indexOf(`</${tagName.toLowerCase()}`, k + 1);
+                if (closeTagStart > -1) {
+                    const closeTagEnd = findTagEnd(html, closeTagStart);
+                    if (closeTagEnd > -1) {
+                        if (k + 1 < closeTagStart) {
+                            tokens.push(html.slice(k + 1, closeTagStart));
+                        }
+                        tokens.push(html.slice(closeTagStart, closeTagEnd + 1));
+                        i = j = closeTagEnd + 1;
+                        continue;
+                    }
+                }
+            }
+            i = j = k + 1;
+            continue;
+        }
+        i++;
+    }
+    if (j < html.length) {
+        tokens.push(html.slice(j));
+    }
+    return tokens;
+}
+function tokenize(html) {
+    return splitTokens(html).map((s)=>s.replace(/^\n+$/g, '')).map((s)=>s.trim()).filter(Boolean).map(makeToken).filter(Boolean);
+}
+
+function isEmpty(stack) {
+    return stack.length === 0;
+}
+function getTop(stack) {
+    return stack[stack.length - 1];
+}
+function appendChild(node, child) {
+    if (!node.children) {
+        node.children = [];
+    }
+    node.children.push(filterProps(child));
+}
+function filterProps(node) {
+    if (typeof node === 'string') {
+        return node;
+    }
+    return [
+        'name',
+        'children',
+        'attributes'
+    ].reduce((r, c)=>Object.assign({}, r, {
+            [c]: node[c]
+        }), {});
+}
+function parse(src) {
+    const tokens = tokenize(src);
+    const stack = [];
+    const tree = {
+        type: 'root',
+        children: []
+    };
+    stack.push(tree);
+    while(!isEmpty(stack) && !isEmpty(tokens)){
+        const curr = tokens.shift();
+        const top = getTop(stack);
+        if (curr.type === 'string') {
+            appendChild(top, curr.value);
+        } else if (utils.isPair(top, curr)) {
+            const node = stack.pop();
+            if (!isEmpty(stack)) {
+                appendChild(getTop(stack), node);
+            }
+        } else if (curr.type === 'self-close') {
+            appendChild(top, curr);
+        } else if (curr.type === 'start') {
+            stack.push(curr);
+        }
+    }
+    while(stack.length > 1){
+        const node = stack.pop();
+        appendChild(getTop(stack), node);
+    }
+    return tree.children;
+}
+
+function html2any(html, rule) {
+    return transform(parse(html)[0], rule);
+}
+
+export { html2any as default, parse, transform };

package/package.json

@@ -1,28 +1,50 @@
 {
   "name": "html2any",
-  "version": "0.0.6",
-  "description": "convert html to anything from ast form",
-  "main": "lib/index.js",
-  "module": "lib/index.mjs",
-  "scripts": {
-    "test": "jest",
-    "test:update": "jest -u",
-    "build": "rm -rf lib && bun src/index.js"
+  "version": "0.1.1",
+  "description": "understand html with flexible transform",
+  "keywords": [
+    "html",
+    "parser",
+    "transform",
+    "html-transform",
+    "html-parser"
+  ],
+  "homepage": "https://github.com/huozhi/html2any#readme",
+  "bugs": {
+    "url": "https://github.com/huozhi/html2any/issues"
   },
-  "engines": {
-    "node": ">=4.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/huozhi/html2any.git"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "bun test",
+    "build": "bunchee",
+    "prepublishOnly": "bun run build",
+    "web:dev": "next dev web",
+    "web:build": "next build web",
+    "web:check-load": "node web/scripts/check-load.mjs",
+    "web:start": "next start web"
   },
   "files": [
     "*.md",
-    "lib"
+    "dist"
   ],
-  "author": "huozhi <gilesliu12@gmial.com>",
-  "license": "UNLICENSED",
+  "author": "huozhi",
+  "license": "MIT",
   "devDependencies": {
-    "@babel/preset-env": "^7.3.1",
-    "@bunchee/bunchee": "^0.1.2",
-    "jest": "^24.1.0",
-    "react": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "bunchee": "^6.10.0",
+    "react": "^19.2.6",
+    "next": "^16.2.6",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "sugar-high": "^1.2.0",
+    "typescript": "^6.0.3",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/lib/index.js

@@ -1,210 +0,0 @@
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var voidElementTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-
-function isSelfClose(tagName) {
-  return voidElementTags.indexOf(tagName) > -1;
-}
-
-function isPair(tagX, tagY) {
-  return tagX.name === tagY.name && tagX.type === 'start' && tagY.type === 'end';
-}
-
-var utils = {
-  isPair: isPair,
-  isSelfClose: isSelfClose
-};
-
-var ATTR_FIND = /((^\w|\s+)[a-zA-Z-:]+)(="[^"]+"|\s+|\s*$)?/;
-
-function extraAttrs(str) {
-  var i = 0;
-  var attrs = {};
-
-  while (i < str.length) {
-    var suffix = str.slice(i);
-    var match = ATTR_FIND.exec(suffix);
-
-    if (!match || !match[1]) {
-      break;
-    }
-
-    var result = match[0];
-    var key = match[1];
-    var value = match[3];
-    key = key.trim();
-    value = value && value.trim();
-    attrs[key] = value && value[0] === '=' ? value.slice(2, -1) : true;
-    i += result.length;
-  }
-
-  return attrs;
-}
-
-function makeToken(tag) {
-  var isTag = tag[0] === '<' && tag[tag.length - 1] === '>';
-
-  if (!isTag) {
-    return {
-      type: 'string',
-      value: tag
-    };
-  } else if (tag.startsWith('</')) {
-    return {
-      type: 'end',
-      name: tag.slice(2, -1)
-    };
-  } else {
-    var match = tag.match(/<([\w+:?\w*]+)\s*([^>]*)/);
-    var tagName = match[1];
-    var tagBody = match[2];
-    return {
-      type: utils.isSelfClose(tagName) || tagBody[tagBody.length - 1] === '/' ? 'self-close' : 'start',
-      name: tagName,
-      attributes: extraAttrs(tagBody)
-    };
-  }
-}
-
-function splitTokens(html) {
-  var i = 0;
-  var j = 0;
-  var tokens = [];
-
-  while (i < html.length) {
-    var curr = html[i];
-
-    if (curr === '<') {
-      if (j < i) {
-        tokens.push(html.slice(j, i));
-        j = i;
-      }
-
-      var k = i;
-
-      while (html[k] !== '>') {
-        k++;
-      }
-
-      tokens.push(html.slice(i, k + 1));
-      i = j = k + 1;
-      continue;
-    }
-
-    i++;
-  }
-
-  return tokens;
-}
-
-function tokenize(html) {
-  return splitTokens(html).map(function (s) {
-    return s.replace(/^\n|\n$/g, '');
-  }).map(function (s) {
-    return s.trim();
-  }).filter(Boolean).map(makeToken);
-}
-
-function isEmpty(stack) {
-  return stack.length === 0;
-}
-
-function getTop(stack) {
-  return stack[stack.length - 1];
-}
-
-function appendChild(node, child) {
-  if (!node.children) {
-    node.children = [];
-  }
-
-  node.children.push(filterProps(child));
-}
-
-function filterProps(node) {
-  if (typeof node === 'string') {
-    return node;
-  }
-
-  return ['name', 'children', 'attributes'].reduce(function (r, c) {
-    return Object.assign({}, r, _defineProperty({}, c, node[c]));
-  }, {});
-}
-
-function parse(src) {
-  var tokens = tokenize(src);
-  var stack = [];
-  var tree = {
-    type: 'root',
-    children: []
-  };
-  stack.push(tree);
-
-  while (!isEmpty(stack) && !isEmpty(tokens)) {
-    var curr = tokens.shift();
-    var top = getTop(stack);
-
-    if (curr.type === 'string') {
-      appendChild(top, curr.value);
-    } else if (utils.isPair(top, curr)) {
-      var node = stack.pop();
-
-      if (!isEmpty(stack)) {
-        appendChild(getTop(stack), node);
-      }
-    } else if (curr.type === 'self-close') {
-      appendChild(top, curr);
-    } else if (curr.type === 'start') {
-      stack.push(curr);
-    }
-  }
-
-  return tree.children;
-}
-
-function transform(ast, rule) {
-  function next(node) {
-    if (node) {
-      if (typeof node === 'string') {
-        return rule(node);
-      }
-
-      if (Array.isArray(node)) {
-        return node.map(function (n, index) {
-          if (typeof n !== 'string') {
-            n.index = index; // critical array element index
-          }
-
-          return rule(n, next(n.children));
-        });
-      } else {
-        return rule(node, next(node.children));
-      }
-    }
-
-    return null;
-  }
-
-  return next(ast);
-}
-
-var html2any = function html2any(html, rule) {
-  return transform(parse(html)[0], rule);
-};
-
-exports.default = html2any;
-exports.parse = parse;
-exports.transform = transform;

package/lib/index.mjs

@@ -1,209 +0,0 @@
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var voidElementTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-
-function isSelfClose(tagName) {
-  return voidElementTags.indexOf(tagName) > -1;
-}
-
-function isPair(tagX, tagY) {
-  return tagX.name === tagY.name && tagX.type === 'start' && tagY.type === 'end';
-}
-
-var utils = {
-  isPair: isPair,
-  isSelfClose: isSelfClose
-};
-
-var ATTR_FIND = /((^\w|\s+)[a-zA-Z-:]+)(="[^"]+"|\s+|\s*$)?/;
-
-function extraAttrs(str) {
-  var i = 0;
-  var attrs = {};
-
-  while (i < str.length) {
-    var suffix = str.slice(i);
-    var match = ATTR_FIND.exec(suffix);
-
-    if (!match || !match[1]) {
-      break;
-    }
-
-    var result = match[0];
-    var key = match[1];
-    var value = match[3];
-    key = key.trim();
-    value = value && value.trim();
-    attrs[key] = value && value[0] === '=' ? value.slice(2, -1) : true;
-    i += result.length;
-  }
-
-  return attrs;
-}
-
-function makeToken(tag) {
-  var isTag = tag[0] === '<' && tag[tag.length - 1] === '>';
-
-  if (!isTag) {
-    return {
-      type: 'string',
-      value: tag
-    };
-  } else if (tag.startsWith('</')) {
-    return {
-      type: 'end',
-      name: tag.slice(2, -1)
-    };
-  } else {
-    var match = tag.match(/<([\w+:?\w*]+)\s*([^>]*)/);
-    var tagName = match[1];
-    var tagBody = match[2];
-    return {
-      type: utils.isSelfClose(tagName) || tagBody[tagBody.length - 1] === '/' ? 'self-close' : 'start',
-      name: tagName,
-      attributes: extraAttrs(tagBody)
-    };
-  }
-}
-
-function splitTokens(html) {
-  var i = 0;
-  var j = 0;
-  var tokens = [];
-
-  while (i < html.length) {
-    var curr = html[i];
-
-    if (curr === '<') {
-      if (j < i) {
-        tokens.push(html.slice(j, i));
-        j = i;
-      }
-
-      var k = i;
-
-      while (html[k] !== '>') {
-        k++;
-      }
-
-      tokens.push(html.slice(i, k + 1));
-      i = j = k + 1;
-      continue;
-    }
-
-    i++;
-  }
-
-  return tokens;
-}
-
-function tokenize(html) {
-  return splitTokens(html).map(function (s) {
-    return s.replace(/^\n|\n$/g, '');
-  }).map(function (s) {
-    return s.trim();
-  }).filter(Boolean).map(makeToken);
-}
-
-function isEmpty(stack) {
-  return stack.length === 0;
-}
-
-function getTop(stack) {
-  return stack[stack.length - 1];
-}
-
-function appendChild(node, child) {
-  if (!node.children) {
-    node.children = [];
-  }
-
-  node.children.push(filterProps(child));
-}
-
-function filterProps(node) {
-  if (typeof node === 'string') {
-    return node;
-  }
-
-  return ['name', 'children', 'attributes'].reduce(function (r, c) {
-    return Object.assign({}, r, _defineProperty({}, c, node[c]));
-  }, {});
-}
-
-function parse(src) {
-  var tokens = tokenize(src);
-  var stack = [];
-  var tree = {
-    type: 'root',
-    children: []
-  };
-  stack.push(tree);
-
-  while (!isEmpty(stack) && !isEmpty(tokens)) {
-    var curr = tokens.shift();
-    var top = getTop(stack);
-
-    if (curr.type === 'string') {
-      appendChild(top, curr.value);
-    } else if (utils.isPair(top, curr)) {
-      var node = stack.pop();
-
-      if (!isEmpty(stack)) {
-        appendChild(getTop(stack), node);
-      }
-    } else if (curr.type === 'self-close') {
-      appendChild(top, curr);
-    } else if (curr.type === 'start') {
-      stack.push(curr);
-    }
-  }
-
-  return tree.children;
-}
-
-function transform(ast, rule) {
-  function next(node) {
-    if (node) {
-      if (typeof node === 'string') {
-        return rule(node);
-      }
-
-      if (Array.isArray(node)) {
-        return node.map(function (n, index) {
-          if (typeof n !== 'string') {
-            n.index = index; // critical array element index
-          }
-
-          return rule(n, next(n.children));
-        });
-      } else {
-        return rule(node, next(node.children));
-      }
-    }
-
-    return null;
-  }
-
-  return next(ast);
-}
-
-var html2any = function html2any(html, rule) {
-  return transform(parse(html)[0], rule);
-};
-
-export default html2any;
-export { parse, transform };