Potential options for addressing FLUID-6359: Make the dist directory self contained

[Justin Obara]

We’ve been moving towards recommending NPM for pulling Infusion into web based projects. It simplifies the process of version tracking, updating, sourcing the latest or specific dev releases, and includes many common custom builds. However, the dist directory has not contained all of the resources required for use in web applications. Specifically things like HTML templates, JSON message bundles, and some CSS were not included in the dist/assets/ directory and needed to be referenced directly from src. 

Earlier this year I filed FLUID-6359 <https://issues.fluidproject.org/browse/FLUID-6359> and have been tracking various options for addressing the issue of missing resources in dist/assets/. Today I’ve published a couple of dev releases from branches that take two approaches to solve the issue. I hope that you’ll take some time to test them out in your projects, let me know if there is anything missing or other bugs, and provide feedback on the approaches. For reference the current structure of the dist/ directory can be seen in the latest dev release 3.0.0-dev.20190905T163833Z.b024bff87 <https://unpkg.com/browse/infusion@3.0.0-dev.20190905T163833Z.b024bff87/dist/>.


Options 1: Copy resources to dist/assets/ retaining the tree structure from src/

In Option 1, we copy over required resources from the src/ directory to dist/assets/; including the CSS, Images, Templates, Messages, and some JS files not included in any of the compiled builds. This option retains the tree structure from source. An example of the structure can be seen in the 3.0.0-dev.20190906T123329Z.e5ad6fbc6.FLUID-6359-src <https://unpkg.com/browse/infusion@3.0.0-dev.20190906T123329Z.e5ad6fbc6.FLUID-6359-src/dist/> dev release.

Benefits:
Easier to find items if you already knew where they were in src/
Retains structure so you know which files are associated
Avoids potential collisions of files with the same name across components (currently do not have any name collisions)
Because the structure is the same, there are no issues with relative URL paths in CSS files

Disadvantages:
Harder to see all of the files at a glance
Harder to find individual files, especially if you don’t already know the structure
Harder to write URL references of copy statements because of the added directory nesting


Options 2: Copy resources to dist/assets/ grouped by type

In Option 2, we copy over required resources from the src/ directory to dist/assets/ but regroup into directories based on their type. For example all CSS files are in dist/assets/css/. However, 3rd party resources will retain their tree structure and be put under dist/assets/lib/. We need to rewrite relative paths to lib resources in CSS, but the other resource were already, by convention, sourced from adjacent directories. An example of the structure can be seen in the 3.0.0-dev.20190906T123957Z.756c03fe5.FLUID-6359-collectedAssets <https://unpkg.com/browse/infusion@3.0.0-dev.20190906T123957Z.756c03fe5.FLUID-6359-collectedAssets/dist/> dev release.

Benefits:
Easier to find items
Easier for writing URLs and/or copy routines

Disadvantages:
Potential collisions of files with the same name across components (currently do not have any name collisions)
Won’t necessarily know which files are related to which components; particularly the case for image files.
Need to rewrite relative URLs to the lib/ directory in CSS files.

Thanks
Justin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20190906/a255d792/attachment.htm>