Support usage of Cadence `.cdc` files as JS objects and address replacement via `flow.json`

[srinjoyc]

Instructions

Issue To Be Solved

As a developer new to Flow, I want to be able to:

• Use a single source of truth for all my contract code and configuration so I don't need to repeat configurations in the fcl.config for things like address replacements based on network so when switching between local and live networks, there should be little to no additional logic or configuration required past the flow.json.
• Import my cadence files into my JS project without needing to write additional code so that I'm able to focus on the logic of my contracts as I develop and not need to manage .cdc files in bespoke ways.
• Use the code in the Cadence files as direct inputs to FCL query and mutate interfaces in the cadence field.
• Have all the updates to any changes in .cdc files be reflected in realtime when developing.

Solution - TBD

Freshmint is using webpack and onflow/cadut to achieve similar functionality: https://github.com/packagelabs/freshmint/tree/alpha/packages/cadence-loader

We would like to do something similar.

Requirements

• We should not bloat the FCL package such that it impacts current FCL users in their page load times, etc.
• The network defined in fcl.config should determine which addresses are replaced (using flow.json)
• The developer should have a script they can run npm fcl compile --dev to manually bundle their cadence or have it watch for changes to any .cdc files in the cadence folder of the project. We should try to minimize the time it takes to rebuild.
• The solution should be compatible (or easily configurable) with most if not all common JS frameworks, however, it should be highly optimized for any React-based project.