FLUID-6359: Make the dist directory self contained

Description

Currently the NPM package for Infusion contains a dist directory. The dist directory includes the various js builds of Infusion. It also includes an assets directory that includes the css, and their dependencies, that are generated from Stylus files. In this way the dist directory contains all of the generated/compiled resources. However other dependencies still need to be pulled from source, for example the templates and message bundles.

When pulling down Infusion for a website or other front end project, it would be more convenient if all of the distributed resources were contained within the dist directory. That might look like including the src, with the compiled css in place, along side the js files.

• dist
  • src
  • infusion-all.js
  • ...

or

• dist
  • assets
    • src
  • infusion-all.js

With either of the above structures, an integrator would only need to copy over the dist directory from node_modules/infusion.

Comments

• Justin Obara commented 2019-07-15T10:25:08.505-0400

  Another option could be to only have the JS builds in the dist directory and have the generated CSS published in the src directory. In that way, we wouldn't have to duplicate anything. I guess the draw back here would be about expectation. Perhaps a user would expect everything to be in dist.

• Alan Harnum commented 2019-07-15T10:31:07.728-0400

  Guarded +1 - all assets necessary to use Infusion components should be present in the /dist directory following build. We will need to make sure we update any relevant tutorials, such as any for UIO.

• Gregor Moss commented 2019-07-15T11:03:23.158-0400

  I echo @@Alan Harnum's sentiment. It makes sense that the dist folder should be wholly sufficient for usage of infusion in an external project.

• Justin Obara commented 2019-07-16T11:30:31.459-0400

  In talking with @@Colin Clark another option would be to create a "package" specific NPM module. For example an infusion-uiOptions module that provided everything needed for UIO at an easy to grab place. This would be setup to pull in infusion, and copy over all the necessary bits to a specific location before publishing.

• Justin Obara commented 2019-07-16T11:31:36.244-0400

  Another option form talking with @@Colin Clark is to copy templates and message bundles to the dist directory.

• Justin Obara commented 2019-07-16T13:25:50.792-0400

  The following JS files are not included in any of the concatenated distributions. However, jquery.standalone.js and the module js files are probably not needed for use on the web.

  src/components/textToSpeech/js/mockTTS.js
  src/components/uploader/js/UploaderCompatibility-Infusion1.2.js
  src/components/uploader/js/UploaderCompatibility-Infusion1.3.js
  src/framework/core/js/jquery.standalone.js
  src/framework/lib/hypher/patterns/be.js
  src/framework/lib/hypher/patterns/bn.js
  src/framework/lib/hypher/patterns/ca.js
  src/framework/lib/hypher/patterns/cs.js
  src/framework/lib/hypher/patterns/da.js
  src/framework/lib/hypher/patterns/de.js
  src/framework/lib/hypher/patterns/el-monoton.js
  src/framework/lib/hypher/patterns/el-polyton.js
  src/framework/lib/hypher/patterns/en-gb.js
  src/framework/lib/hypher/patterns/en-us.js
  src/framework/lib/hypher/patterns/es.js
  src/framework/lib/hypher/patterns/fi.js
  src/framework/lib/hypher/patterns/fr.js
  src/framework/lib/hypher/patterns/grc.js
  src/framework/lib/hypher/patterns/gu.js
  src/framework/lib/hypher/patterns/hi.js
  src/framework/lib/hypher/patterns/hu.js
  src/framework/lib/hypher/patterns/hy.js
  src/framework/lib/hypher/patterns/is.js
  src/framework/lib/hypher/patterns/it.js
  src/framework/lib/hypher/patterns/kn.js
  src/framework/lib/hypher/patterns/la.js
  src/framework/lib/hypher/patterns/lt.js
  src/framework/lib/hypher/patterns/lv.js
  src/framework/lib/hypher/patterns/ml.js
  src/framework/lib/hypher/patterns/nb-no.js
  src/framework/lib/hypher/patterns/nl.js
  src/framework/lib/hypher/patterns/or.js
  src/framework/lib/hypher/patterns/pa.js
  src/framework/lib/hypher/patterns/pl.js
  src/framework/lib/hypher/patterns/pt.js
  src/framework/lib/hypher/patterns/ru.js
  src/framework/lib/hypher/patterns/sk.js
  src/framework/lib/hypher/patterns/sj.js
  src/framework/lib/hypher/patterns/sv.js
  src/framework/lib/hypher/patterns/ta.js
  src/framework/lib/hypher/patterns/te.js
  src/framework/lib/hypher/patterns/tr.js
  src/framework/lib/hypher/patterns/uk.js
  src/module/fluid.js
  src/module/module.js

• Justin Obara commented 2019-08-02T08:54:59.516-0400

  I was talking to @@Antranig Basman in the fluid-work channel today and it came up that we may want to perform this work in conjunction with FLUID-5579

• Antranig Basman commented 2019-08-02T09:20:42.356-0400

  Whilst the work is related, I don't think we want to hold up this useful improvement awaiting the big reorg. But let's keep notes as we are doing this, especially with respect to CSS concatenation/rebasing etc. bearing in mind that the reorg is coming and check if anything about the reorg would make this work easier or harder.

• Justin Obara commented 2019-08-14T15:01:25.488-0400

  Here's an example of how the structure would look like trying to just bring in the pieces that are missing:

  • dist
    • assets
      • CSS
      • Fonts
      • Images
      • Messages
      • Templates
      • Lib (3rd party code)
      • Additional JS Files (These ones aren't typically going to be necessary, maybe we can leave them off)
        • src/components/textToSpeech/js/mockTTS.js
        • src/components/uploader/js/UploaderCompatibility-Infusion1.2.js
        • src/components/uploader/js/UploaderCompatibility-Infusion1.3.js
    • concatenated JS files and source maps

• Justin Obara commented 2019-09-03T16:29:53.328-0400

  For most of the CSS files references to images or fonts are to an adjacent directory. However, OverviewPanel.css references OpenSans from the lib directory. Similarly, the prefs framework references OpenDyslexic from the lib directory. These references are expecting three steps back. This means that these CSS, if using the previously mentioned suggestion, wouldn't be able to properly source the fonts.

• Justin Obara commented 2019-09-04T10:35:11.448-0400

  May be able to use the copy task's process option to rebase the URLs.

  https://github.com/gruntjs/grunt-contrib-copy#process

• Justin Obara commented 2019-09-06T09:52:29.147-0400

  I have created dev releases for a couple of the potential solutions.

  • 3.0.0-dev.20190906T123329Z.e5ad6fbc6.FLUID-6359-src
    • Retains the src/ tree structure when copying assets to dist/assets/
  • 3.0.0-dev.20190906T123957Z.756c03fe5.FLUID-6359-collectedAssets
    • Regroups assets based on type when copying to dist/assets/

  A more detailed write can be seen in the related post to the fluid-work mailing list.

  http://fluid.2324889.n4.nabble.com/Potential-options-for-addressing-FLUID-6359-Make-the-dist-directory-self-contained-td10638.html

• Justin Obara commented 2021-05-05T13:34:12.960-0400

  Instead of moving more into the dist directory, the dist directory was modified to only contain the concatenated js files and the related source maps. This was done along with changes for FLUID-6594 to migrate the build system from grunt to npm scripts.