slogsdon / parcel-plugin-fable

Parcel asset type plugin for Fable
https://www.npmjs.com/package/parcel-plugin-fable
MIT License
21 stars 4 forks source link

Remove temp files #5

Closed alfonsogarciacaro closed 6 years ago

alfonsogarciacaro commented 6 years ago

Hi @slogsdon! I'm trying to compile the files directly without using fable-splitter to avoid the generation of temp files in disk.

I was just trying to update your code but I don't know Parcel API, at one point I got some results but now I'm not getting anything (in the sample project Parcel just puts the XML of the .fsproj directly in the bundle).

Could you please have a look at the changes in fable-asset.js and tell me if I'm doing something wrong? Thanks!

slogsdon commented 6 years ago

@alfonsogarciacaro, This is awesome!

When I pulled your changes down locally, I'm seeing this in the bundle:

export * from "./FableDemo.fs";

Parcel will emit the XML from the fsproj file if it doesn't know how to handle the extension / asset type and treats it as a RawAsset, but that doesn't seem to be happening on my end. Are you still seeing this behavior on your end?

alfonsogarciacaro commented 6 years ago

Hmm, I'm still getting the XML directly in the bundle but it seems related with the fact the example is in a subfolder. I put it in a different folder and now it seems to work :) However Parcel leaves the import/require statements as such in the bundle. Doesn't it pull the imported files automatically? (Webpack and Rollup do that.) Also, do you use any tutorial to know Parcel API for plugins? I couldn't find anyone :/

var _String = require("./fable-core/String");

var _Greeting = require("./Greeting");

function init() {
  (0, _String.toConsole)((0, _String.printf)("%s"))((0, _Greeting.hello)("Shane"));
  const canvas = document.getElementsByTagName("canvas")[0];
  canvas.width = 1000;
  canvas.height = 800;
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect(10, 10, 55, 50);
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect(30, 30, 55, 50);
}

init();
slogsdon commented 6 years ago

do you use any tutorial to know Parcel API for plugins? I couldn't find anyone :/

I haven't yet found any detailed documentation or tutorials for creating plugins yet, so I've been looking at the Parcel source code, especially the source for JSAsset.

However Parcel leaves the import/require statements as such in the bundle. Doesn't it pull the imported files automatically?

Looking at the source for JSAsset, I don't think it does. JSAsset is manually walking the AST (with babylon-walk) in a collectDependencies method. I've duplicated their code in ad38843, which seems to do the trick. collectDependencies also seems to be used to add additional files to the watch mode watcher, so there's no need to call this.addDependency within FableAsset anymore.

I also added 008cb9a to get a quick win for adding source map support with the work you've already done.

If everything works on your end, we can get all of this merged in and get a new version published.

alfonsogarciacaro commented 6 years ago

Awesome, thank you! Yes, please, if you are already working on top of this please feel free to merge the PR :)

slogsdon commented 6 years ago

Thanks again!