Assignment of text to JavaScript asset produces invalid code

Hey,

I’ve got a bit of a weird situation - I use AssetGraph to load JavaScript assets associated with HTML pages. There is a rewriting process that I do on the text of these assets, and then I serialize them back out.

In the process of doing that I think I’ve found a bit of a nasty issue where an assignment to the text property causes broken code to be produced which is then returned on the next read of the asset .text property, and it seems specifically to do with some bad treatment of a comment causing a line break to be added after a return and when combined with ASI… I have included demo code below.

With the following placed in a file called asset.js:

const MyComponent = () => {
    return /*#__PURE__*/React.createElement(Provider, {
      store: services.store
    }, /*#__PURE__*/React.createElement(Router, {
      routes: routes,
      history: createBrowserHistory()
    }, /*#__PURE__*/React.createElement(App, null)));
};

Alongside the above I place the following demo file:

const AssetGraph = require('assetgraph');

const ag = new AssetGraph({root: "."});

(async () => {
    const jsAsset = (await ag.loadAssets("/asset.js"))[0];
    console.log(jsAsset.text); // JS still fine
    jsAsset.text = jsAsset.text; // re-assign the propety
    console.log(jsAsset.text); // JS not fine
})();

When executed, the first console log outputs:

const MyComponent = () => {
    return /*#__PURE__*/React.createElement(Provider, {
      store: services.store
    }, /*#__PURE__*/React.createElement(Router, {
      routes: routes,
      history: createBrowserHistory()
    }, /*#__PURE__*/React.createElement(App, null)));
};

but the second results in:

const MyComponent = () => {
    return /*#__PURE__*/
    React.createElement(Provider, { store: services.store }, /*#__PURE__*/
    React.createElement(Router, {
        routes: routes,
        history: createBrowserHistory()
    }, /*#__PURE__*/
    React.createElement(App, null)));
};

In this case the addition of the newline breaks the code by causing the function which itself is react component to return undefined. It seems like something different is happening when the property is assigned versus when the asset is created, but I’m too unfamiliar with the internals to have a clue about what the cause might be.

Please let me know if there is anything else I can do to help diagnose this.

Thanks!

[alexjeffburke]

I think the weird extra situation was at least partially a result of me calling .markDirty() myself. When I understood what the comment in https://github.com/assetgraph/assetgraph/commit/85b65c15fcc46cad55b4c63e379e1adc896a6a86 was saying it’s that marking dirty clears the cached representations, i.e. _text. I made the associated change my side (https://github.com/alexjeffburke/relivestyle/commit/4d9c0842f6810f02a1a3002de890cf1c66126fbd) and have shipped it so consider this closed.

Thank you again!

[alexjeffburke]

Thanks so much for doing that, it really helps 😃

There’s a still a little piece of behaviour that makes newly instantiated JS assets and those that have been interacted with different, and the best proposal I’ve got to address it (if only for the purposes of prompting a discussion) here: https://github.com/assetgraph/assetgraph/pull/1182