feat: Add support for prop: & attr: directives

babel.config.js

@@ -31,7 +31,7 @@ module.exports = function (api) {
  ],
  plugins: [
  '@babel/plugin-proposal-object-rest-spread',
- '@babel/plugin-transform-react-jsx',
+ ['@babel/plugin-transform-react-jsx', { throwIfNamespace: false }],
  'babel-plugin-transform-async-to-promises',
  ['babel-plugin-transform-rename-properties', { rename }]
  ],

src/diff/props.js

@@ -35,7 +35,11 @@ let eventClock = 0;
  * @param {string} namespace Whether or not this DOM node is an SVG node or not
  */
 export function setProperty(dom, name, value, oldValue, namespace) {
- let useCapture;
+ let useCapture, prefix;
+ if ((name[0] == 'a' || name[0] == 'p') && name[4] == ':') {
+ prefix = name.slice(0, 4);
+ name = name.slice(5);
+ }
 
  o: if (name === 'style') {
  if (typeof value == 'string') {
@@ -104,20 +108,22 @@ export function setProperty(dom, name, value, oldValue, namespace) {
  // - className --> class
  name = name.replace(/xlink(H|:h)/, 'h').replace(/sName$/, 's');
  } else if (
- name != 'width' &&
- name != 'height' &&
- name != 'href' &&
- name != 'list' &&
- name != 'form' &&
- // Default value in browsers is `-1` and an empty string is
- // cast to `0` instead
- name != 'tabIndex' &&
- name != 'download' &&
- name != 'rowSpan' &&
- name != 'colSpan' &&
- name != 'role' &&
- name != 'popover' &&
- name in dom
+ (prefix != 'attr' &&
+ name != 'width' &&
+ name != 'height' &&
+ name != 'href' &&
+ name != 'list' &&
+ name != 'form' &&
+ // Default value in browsers is `-1` and an empty string is
+ // cast to `0` instead
+ name != 'tabIndex' &&
+ name != 'download' &&
+ name != 'rowSpan' &&
+ name != 'colSpan' &&
+ name != 'role' &&
+ name != 'popover' &&
+ name in dom) ||
+ prefix == 'prop'
  ) {
  try {
  dom[name] = value == null ? '' : value;

test/browser/render.test.js

@@ -631,6 +631,17 @@ describe('render()', () => {
  expect(links[3].hasAttribute('href')).to.equal(true);
  });
 
+ it('should support using `prop:` directive to set properties', () => {
+ render(<input prop:foo="bar" />, scratch);
+ expect(scratch.firstChild.foo).to.equal('bar');
+ expect(scratch.firstChild.getAttribute('foo')).to.equal(null);
+ });
+
+ it('should support using `attr:` directive to set attributes', () => {
+ render(<input attr:value="foo" />, scratch);
+ expect(scratch.firstChild.getAttribute('value')).to.equal('foo');
+ });
+
  describe('dangerouslySetInnerHTML', () => {
  it('should support dangerouslySetInnerHTML', () => {
  let html = '<b>foo &amp; bar</b>';