🎉 Init project

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_size = 2
+end_of_line = lf
+indent_style = space
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - '12'
+  - '10'
+  - '8'

LICENSE

@@ -0,0 +1,20 @@
+Copyright 2020 Dennis Morhardt, https://dennismorhardt.de
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+# simplified-jsx-to-json [![Build Status](https://travis-ci.org/gglnx/simplified-jsx-to-json.svg?branch=master)](https://travis-ci.org/gglnx/simplified-jsx-to-json)
+
+> Converts simplified JSX code into a JSON representation, which can be used by `React.createElement`
+
+## Install
+
+```
+$ npm install simplified-jsx-to-json
+```
+
+## Usage
+
+```js
+const jsxToJson = require('simplified-jsx-to-json');
+
+jsxToJson('<Test myProp={true}>My Child</Test>');
+//=> '[ [ 'Test', { myProp: true }, "My Child" ] ]'
+```
+
+## Features
+
+* `<Test />`: Self-closing JSX tags
+* `<Test myProp="string">`: String props
+* `<Test myProp>`: True props
+* `<Test myProp={false}>`: Boolean props
+* `<Test myProp={34}>`: Number props
+* `<Test myProp={['Test', true, 34]}>`: Arrays (with strings, numbers or booleans)
+* `<Test myProp={{ test: 34 }}>`: Objects with string keys and string, number or boolean value
+* `<>Test</>`: Fragments
+* HTML/SVG DOM attributes are converted to correct React equivalent (`class` -> `className`)
+
+## ToDos
+
+* [ ] Add support for binary expressions (`3 + 3`) in props
+
+## License
+
+MIT © [Dennis Morhardt](https://dennismorhardt.de)

index.d.ts

@@ -0,0 +1,7 @@
+export type JsxCreateElementNode =
+  | [string, { [key: string]: any }, ...JsxCreateElementNode[]]
+  | string;
+
+declare function jsxToJson(input: string): JsxCreateElementNode[];
+
+export default jsxToJson;

index.js

@@ -0,0 +1,124 @@
+const acorn = require('acorn');
+const jsx = require('acorn-jsx');
+const styleToObject = require('style-to-object');
+const htmlTagNames = require('html-tag-names');
+const svgTagNames = require('svg-tag-names');
+const isString = require('is-string');
+
+const possibleStandardNames = require('./possible-standard-names');
+
+const isHtmlOrSvgTag = (tag) =>
+  htmlTagNames.includes(tag) || svgTagNames.includes(tag);
+
+const getAttributeValue = (expression) => {
+  // If the expression is null, this is an implicitly "true" prop, such as readOnly
+  if (expression === null) {
+    return true;
+  }
+
+  if (expression.type === 'Literal') {
+    return expression.value;
+  }
+
+  if (expression.type === 'JSXExpressionContainer') {
+    return getAttributeValue(expression.expression);
+  }
+
+  if (expression.type === 'ArrayExpression') {
+    return expression.elements.map((element) => getAttributeValue(element));
+  }
+
+  if (expression.type === 'ObjectExpression') {
+    const entries = expression.properties
+      .map((property) => {
+        const key = getAttributeValue(property.key);
+        const value = getAttributeValue(property.value);
+
+        if (key === undefined || value === undefined) {
+          return null;
+        }
+
+        return { key, value };
+      })
+      .filter((property) => property)
+      .reduce((properties, property) => {
+        return { ...properties, [property.key]: property.value };
+      }, {});
+
+    return entries;
+  }
+
+  // Unsupported type
+  throw new SyntaxError(`${expression.type} is not supported`);
+};
+
+const getNode = (node) => {
+  if (node.type === 'JSXFragment') {
+    return ['Fragment', null].concat(node.children.map(getNode));
+  }
+
+  if (node.type === 'JSXElement') {
+    return [
+      node.openingElement.name.name,
+      node.openingElement.attributes
+        .map((attribute) => {
+          if (attribute.type === 'JSXAttribute') {
+            let attributeName = attribute.name.name;
+
+            if (isHtmlOrSvgTag(node.openingElement.name.name.toLowerCase())) {
+              if (possibleStandardNames[attributeName.toLowerCase()]) {
+                attributeName =
+                  possibleStandardNames[attributeName.toLowerCase()];
+              }
+            }
+
+            let attributeValue = getAttributeValue(attribute.value);
+
+            if (attributeValue !== undefined) {
+              if (attributeName === 'style' && isString(attributeValue)) {
+                attributeValue = styleToObject(attributeValue);
+              }
+
+              return {
+                name: attributeName,
+                value: attributeValue,
+              };
+            }
+          }
+
+          return null;
+        })
+        .filter((property) => property)
+        .reduce((properties, property) => {
+          return { ...properties, [property.name]: property.value };
+        }, {}),
+    ].concat(node.children.map(getNode));
+  }
+
+  if (node.type === 'JSXText') {
+    return node.value;
+  }
+
+  // Unsupported type
+  throw new SyntaxError(`${node.type} is not supported`);
+};
+
+const jsxToJson = (input) => {
+  if (typeof input !== 'string') {
+    throw new TypeError('Expected a string');
+  }
+
+  const parsed = acorn.Parser.extend(jsx({ allowNamespaces: false })).parse(
+    `<root>${input}</root>`,
+  );
+
+  if (parsed.body[0]) {
+    return parsed.body[0].expression.children
+      .map(getNode)
+      .filter((child) => child);
+  }
+
+  return [];
+};
+
+module.exports = jsxToJson;

index.test-d.ts

@@ -0,0 +1,4 @@
+import { expectType } from 'tsd';
+import jsxToJson, { JsxCreateElementNode } from '.';
+
+expectType<JsxCreateElementNode[]>(jsxToJson('foo bar'));

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "simplified-jsx-to-json",
+  "version": "0.1.0",
+  "description": "Converts basic JSX code into a JSON representation, which can be used by React.createElement",
+  "keywords": [
+    "jsx",
+    "convert",
+    "json",
+    "createElement",
+    "react",
+    "ast"
+  ],
+  "main": "index.js",
+  "repository": "https://github.com/gglnx/simplified-jsx-to-json",
+  "author": {
+    "name": "Dennis Morhardt",
+    "email": "info@dennismorhardt.de",
+    "url": "https://dennismorhardt.de"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=8"
+  },
+  "scripts": {
+    "test": "ava && tsd"
+  },
+  "files": [
+    "index.js",
+    "possible-standard-names.js",
+    "index.d.ts"
+  ],
+  "dependencies": {
+    "acorn": "^7.1.1",
+    "acorn-jsx": "^5.2.0",
+    "html-tag-names": "^1.1.5",
+    "is-string": "^1.0.5",
+    "style-to-object": "^0.3.0",
+    "svg-tag-names": "^2.0.1"
+  },
+  "devDependencies": {
+    "ava": "^3.5.1",
+    "tsd": "^0.11.0"
+  }
+}