developit / jsxobj

Build JSON using JSX 🌈 (may contain blood magic)

jsxobj

Converts JSX to Objects (JSON) _{using blood magic}.

npm install --save jsxobj

---

Example

import jsxobj from 'jsxobj';

// example of an import'd plugin
const CustomPlugin = config => ({
	...config,
	name: 'custom-plugin'
});

console.log(
	<webpack target="web" watch>
		<entry path="src/index.js" />
		<resolve>
			<alias from="react" to="preact-compat" />
			<alias from="react-dom" to="preact-compat" />
		</resolve>
		<plugins>
			<uglify-js opts={{
				compression: true,
				mangle: false
			}} />
			<CustomPlugin foo="bar" />
		</plugins>
	</webpack>
);

The above outputs:

{
  "name": "webpack",
  "target": "web",
  "watch": true,
  "entry": {
    "path": "src/index.js"
  },
  "resolve": {
    "alias": {
      "from": "react-dom",
      "to": "preact-compat"
    }
  },
  "plugins": {
    "uglify-js": {
      "opts": {
        "compression": true,
        "mangle": false
      }
    },
    "custom-plugin": {
      "foo": "bar"
    }
  }
}

jsxobj's Issues

Support Array of Attributes

@texastoland showed me your readme and we discussed how it would be cool to support an array of attributes.

In the example in the read me:

import jsxobj from 'jsxobj';

// example of an import'd plugin
const CustomPlugin = config => ({
	...config,
	name: 'custom-plugin'
});

console.log(
	<webpack target="web" watch>
		<entry path="src/index.js" />
		<resolve>
			<alias from="react" to="preact-compat" />
			<alias from="react-dom" to="preact-compat" />
		</resolve>
		<plugins>
			<uglify-js opts={{
				compression: true,
				mangle: false
			}} />
			<CustomPlugin foo="bar" />
		</plugins>
	</webpack>
);

The resolve attribute should turn into an array of aliases:

<resolve>
  <alias from="react" to="preact-compat" />
  <alias from="react-dom" to="preact-compat" />
</resolve>

into:

"resolve": {
    "alias": [
      {
        "from": "react",
        "to": "preact-compat"
      },
      {
        "from": "react-dom",
        "to": "preact-compat"
      }
    ]
  },

We can support this by adding a check for if the obj[name] is already defined.

/** @jsx h */
function h(name, attrs, ...children) {
    let obj = { name, ...attrs };
    if (typeof name==='function') obj = name(obj);
    [].concat(...children).forEach( child => {
        let { name } = child;
        if (name) {
          if(obj[name]){
            obj[name] = [obj[name], child].flat()
          } else {
            obj[name] = child;
          }        
            delete child.name;
        }
        else obj.value = child;
    });
    return obj;
}

Heres a js fiddle example

Support single element or top level arrays

Building on @theianjones's proposal in #3.

1 open question is how to represent an array with a single element. The only idea I had was fragments like <>...</>. But that would be a separate PR anyway.

Given a component-like function:

const Aliases = () => (
  <>
    <alias from="react" to="preact-compat" />
    <alias from="react-dom" to="preact-compat" />
  </>
)

Expect <Aliases/>:

[
  {
    // name: "alias",?
    from: "react",
    to: "preact-compat",
  },
  {
    // name: "alias",?
    from: "react-dom",
    to: "preact-compat",
  },
]

Given:

const Resolve = () => (
  <resolve>
    <>
      <alias from="react-dom" to="preact-compat" />
    </>
  </resolve>
)

Expect <Resolve/>:

{
  name: "resolve",
  alias: [
    {
      from: "react-dom",
      to: "preact-compat",
    },
  ],
}