Skip `__source` and `__self` from `renderToJsxString`

[sampi]

I'm integrating preact-compat into create-react-app without ejecting and had quite a lot of success doing it so far.

My setup

For the Jest tests, I managed to use moduleNameMapper to use the preact-* testing utilities instead of anything from React, something similar to this:

{
	'^react-dom/server$': '<rootDir>/node_modules/preact-render-to-string/dist/index.js',
	'^react-dom/test-utils$': '<rootDir>/node_modules/preact-test-utils/lib/index.js',
	'^react-dom$': '<rootDir>/node_modules/preact-compat-enzyme/lib/index.js',
	'^react-test-renderer/shallow$': '<rootDir>/node_modules/preact-test-utils/lib/index.js',
	'^react-test-renderer$': '<rootDir>/node_modules/preact-test-utils/lib/index.js',
	'^react-addons-test-utils$': '<rootDir>/node_modules/preact-test-utils/lib/index.js',
	'^react-addons-transition-group$': '<rootDir>/node_modules/preact-transition-group/dist/preact-transition-group.js',
	'^react$': '<rootDir>/node_modules/preact-compat-enzyme/lib/index.js'
}

The issue

While running the Jest tests, I've run into an issue when using renderToJsxString directly to expect(renderToJsxString(<SomeComponent></SomeComponent>)).toMatchSnapshot(); there are __source and __self attributes on every component in the output.

The output looks similar to this:

<div
  __source={
    Object {
      "fileName": "<some-path-here>/src/components/mainframe/MainFrame.js",
      "lineNumber": 9
    }
  }
>
  <cl
    src=""
    id="main-app-iframe"
    __source={
      Object {
        "fileName": "<some-path-here>/src/components/mainframe/MainFrame.js",
        "lineNumber": 10
      }
    }
    class="tst-app-frame"
  >
  </cl>
</div>

I managed to fix this by supplying my own attributeHook, but it means that I needed to recreate all of the functionality from within which is not the best for keeping in sync with updates.

This is all I wanted to add inside attributeHook

if (name === '__source' || name === '__self') {
	return '';
}

The opts I'm passing to renderToJsxString are:

{
	jsx: true,
	xml: false,
	functions: true,
	functionNames: true,
	skipFalseAttributes: false,
	pretty: '  ',
	shallow: true,
	min: true,
	attributeHook // the one mentioned above
}

I'm not sure if this is by design, or something that only happens with preact-compat or if it's related to me using the moduleNameMapper setup written above.

The solution could be to have a switch to filter for these fields, it could be to have a blacklist of attributes or it could be that there's an error on my part.

Can you help to figure it out?

[developit]

Hi there,

Those attributes are added by babel-preset-react when it is in development mode. I would recommend avoiding babel-preset-react, since it provides nothing of use to Preact except babel-plugin-transform-react-jsx.

I think we can install your hook into preact-compat though, that seems like a reasonable place for it to exist.

[teodragovic]

In case somebody else is still using Preact w/ CRA, this is what worked for me:

if ( process.env.NODE_ENV !== 'production' )
{
    options.vnode = vnode =>
    {
        // Remove __self and __source from attributes
        const { __self, __source, ...rest } = vnode.attributes;
        vnode.attributes = rest;
    };
}

(put in index.js, before call to render).

[sventschui]

Should have been resolved with #152. Feel free to reopen the issue if you still experiencing issues with the latest version.