Parcel integration problem, r is not defined about solid

[ryansolid]

Thank you for reporting. This came up before with my other library using this renderer. I think if Parcel doesn't find the direct reference it feels like it can just rename it however it likes.
ryansolid/mobx-jsx#2

Ultimately we had to set the moduleName in the babel plugin to match the output from Parcel. I am just unclear what the right solution is. Libraries that use JSX compilation to HyperScript like Preact must suffer similar issues since they need to import the h. I've read issue with similar issues related to TypeScript. The biggest thing here is that conventions setup to handle JSX for libraries like TypeScript don't work. Solid JSX isn't just another VDOM library that compiles down to HyperScript render trees so some of the automatic niceties found there aren't applicable.

In any case I don't know know what the Parcel output looks like so I'm not sure what the right module name is to set is. I can try looking at the output tonight, or if you can check it out that would be helpful. I'm definitely interested in reducing friction so if I can find the answer I can add it to the Documentation.

[amoutonbrady]

Thank you very much for getting back this fast to me.

Reading through the issue you link was very helpful. What is suggested in there worked for Solid as well.

I'd not consider myself at a very high level of comprehension but I'd love to help you out as much as I can. I found out that importing through common js syntax also fix the issue here's the comparison of the code generated by parcel for CJS import:

const { r } = require('solid-js/dom')

const NotWorkingNode = ({ name }) => <h1>Not working {name}</h1>;

that translate to:

const _tmpl$ = document.createElement("template");

_tmpl$.innerHTML = "<h1>Not working <!--3--></h1>";

var _require = require('solid-js/dom'),
    r = _require.r;

var NotWorkingNode = function NotWorkingNode(_ref) {
  var name = _ref.name;
  return function () {
    var _el$ = _tmpl$.content.firstChild.cloneNode(true),
        _el$2 = _el$.firstChild,
        _el$3 = _el$2.nextSibling;

    r.insert(_el$, name, null, _el$3);
    return _el$;
  }();
};

whereas the following ES6 import syntax:

import { r } from  'solid-js/dom';

const NotWorkingNode = ({ name }) => <h1>Not working {name}</h1>;

translate to:

var _dom = require("solid-js/dom");

const _tmpl$ = document.createElement("template");

_tmpl$.innerHTML = "<h1>Not working <!--3--></h1>";

var NotWorkingNode = function NotWorkingNode(_ref) {
  var name = _ref.name;
  return function () {
    var _el$ = _tmpl$.content.firstChild.cloneNode(true),
        _el$2 = _el$.firstChild,
        _el$3 = _el$2.nextSibling;

    r.insert(_el$, name, null, _el$3);
    return _el$;
  }();
};

I'm not sure if this can give you any clues as to why it's happening. If there's anything else I can do, let me know.

[ryansolid]

ok.. That's a little bit strange. If we set moduleName to "_dom.r" it probably works in ES6 import syntax.

I just don't understand why it would not compile down the destructuring statement. I'd expect like with the CJS version for it to have a second line something to the effect of:

var _dom = require("solid-js/dom"),
  r = _dom.r;

I suspect somewhere in its process it is deciding that r is never used if it isn't top level and not including it in the final output. The fact that CJS works might be a hint that there is some incorrect identification of dependencies and something related to Tree Shaking might be causing this.

In any case I have my answer in terms of what the alias should be. Thank you for the new insight about it working when it is top level (not in a function) and with CJS. This is likely something on the Parcel side that we're missing or there is a bug there. I will have to probably look through their docs a bit and see if I can submit an issue.

[ryansolid]

I downloaded the project to give it a try and it all worked. I got this:

var NotWorkingNode = function NotWorkingNode(_ref2) {
  var name = _ref2.name;
  return function () {
    var _el$5 = _tmpl$3.content.firstChild.cloneNode(true),
        _el$6 = _el$5.firstChild,
        _el$7 = _el$6.nextSibling;

    _dom.r.insert(_el$5, name, null, _el$7);

    return _el$5;
  }();
};

However, I do suspect it was my bug caused by ryansolid/babel-plugin-jsx-dom-expressions#5. Can you confirm with latest version it works for you too?

[amoutonbrady]

Sorry it took me some time to get back to you for such an easy test. Updating solid-js to version 0.5.0and babel-plugin-jsx-dom-expressions to version 0.7.0 completely fixed the issue.

Thank you so much for your reactivity. I'm sure a lot of others that want to try it out will equally love that as well. You might consider adding a bit of this in your documentation. Parcel is awesome for prototyping stuff.

[ryansolid]

For sure. Is there anything special that needs to be done in parcel? As far as I can tell it just works. By comparison Webpack or Rollup are a bit more involved. I'm gathering the documentation you are suggesting is as an easy way to get started.

I was actually thinking on making a Create Solid App so that npm init solid could just bootstrap a repo. But I'm still looking into what is involved.