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

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.

[bjartek]

I firmly belive that a cadence/blockchain dev should not have to be a frontend dev. And the other way around.

Cadence code should be tested and verified long before it hits the ui.

Many devs currently hold both hats but encouraging patterns where that is always the case is not optimal in my view.

[bjartek]

@bluesign not sure if CLI is the place for that, because I don’t want it to become a build tool for all possible languages, but I feel the notion of leaving that to be solved by existing built tools for languages would be better.

Overflow has this. We use it in .find