Provide easier way to use React and similar createElement functions about tracespace HOT 15 CLOSED

If you want to specify that a stackup should use external styles, it probably makes more sense to specify that via the stackup color option rather than the createElement function:

const stackup = pcbStackup(layers, {
  id: 'some-id',
  colors: {
    fr4: false,
    cu: false,
    cf: false,
    sm: false,
    ss: false,
    sp: false,
    out: false
  }
})

Each element can be individually set to a color or set to a falsey value to use an external style

from tracespace.

One thing to consider is that people might like to override the styles if they are putting SVG tags into their HTML with the createElement function. In my usage I actually also have

function createElement(type, props, children) {
  if (type === 'style') {
    return
  }
...

so I can define the styles in an external stylesheet.

from tracespace.

I was doing some searching and couldn't find anything, but we should see if there's an npm module out there already does this (renames the props, I mean).

I don't think we should build it in because I don't want a React dependency in here. If we can't find anything on npm, we can create another module like tracespace/xml-element-string. No idea what to call it, though

from tracespace.

No, I didn't mean to depend on React. More something that could be used like:

options.createElement = renameProps(React.createElement)

I wanted to search as well but didn't know what to search for. We are translating from the SVG spec to a just a React convention they have adopted for JSX? Or is it called something else maybe and more libs use it? Isn't it used in the DOM, e.g. const a = documentQuerySelector('a'); a.className='my-link' ? We could make a small module if there isn't one and simply document the usage here.

from tracespace.

Oh right, that makes more sense. But yeah, depending on how universal it is, could be useful generally as a small module.

React seems to be renaming SVG properties using some internal spec: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js

from tracespace.

It's not much code and doesn't do class or xmlns:... but it's the closest thing I could find: https://github.com/stevenvachon/camelcase-css

from tracespace.

I encountered a strange issue with this on submit.preview.kitnic.it with Gerbers from BQ25570_Harvester. The top copper layer wouldn't show up when using pcb-stackup client side. Adding those gerbers as an integration test here works fine though.

I tracked it down to an empty group with transform being added when run in the browser and the custom createElement. Ignoring the group in the createElement function sorts it:

if (props.transform && type === 'g' && /_cu$/.test(props.id)) {
  return
}

from tracespace.

I'm not sure I understand the problem as described, but not creating an element for a group seems like it may be papering over a larger problem. There's no reason browser output should be any different from server output

from tracespace.

It's definitely papering over the issue, yes. 😆 I wasn't suggesting it as a permanent solution.

What the exact cause is, I am not sure but this group element isn't present on the server output. To dig deeper we could check if xml-element-string is seeing this and ignoring it somehow.

The only other difference I noticed is the ordering of props on the <svg element. But that seems reasonable since objects are not ordered.

from tracespace.

This is the element that is being added for the BQ25570_Harvester that is causing the top copper to not be visible:

<g id="pcb-stackup_top_cu" transform="scale(25.4,25.4)"/>

from tracespace.

That's really weird. That's a unit change scaling but all these Gerbers (as far as I can tell) are in mm, so that scaling should never appear.

from tracespace.

So I'm testing out this board on tracespace viewer, and there's definitely a bug somewhere in the stack where empty layers don't have units and then pcb-stackup-core incorrectly scales them because an empty string does not match mm. So that's frustrating.

But I'm not seeing that happen with the top copper layer, only with a bunch of the drawing layers / the NPTH drill file.

from tracespace.

I see what's causing the issue now! On the Kitnic submit thing I am trialling trying to find the gerbers automatically by using any matches from whats-that-gerber. cad/BQ25570_Harvester.cmp is matching as tcu (but is actually a KiCAD file) so that's why I am getting an empty top copper. Sorry for the confusion!

I suppose I have to be a bit more clever than just filtering out everything that matches as 'drw'.

from tracespace.

After going through #104, I think for most use-cases the best way to use tracespace renders in React is with dangerouslySetInnerHTML. Given:

1. The SVG renders tend to have many nodes
2. The renders are static; once a file is rendered it's going to change rarely, if ever (except for a potential brief period where the user may need to figure out the proper render options)
3. tracespace renders are full, sanitized markup documents, in my mind similar to the output of a markdown renderer

I think the best move here is to update the docs to either remove references to (or note that while you can, you probably shouldn't use) React.createElement with the createElement function, and that it would require a wrapper to work properly.

from tracespace.

Yeah, makes sense. Maybe we should actually remove createElement from pcb-stackup options (can still stay in core of course)?

from tracespace.