Bundler: New tool to bundle Cadl libraries for browser usage

[timotheeguerin]

Been playing a while back with making a bundler so we can bundle our libraries and use them in the browser instead of the hard coded loading we currently have in the playground.
This simplify:

• no need to export all the files directly imported from the cadl
• no need to specify which files should be included, it is resolved automatically

This would unlock a few possibilities:

• Ability to load a custom library in the playground
• Ability to provide an alternative playground with the cadl-azure packages.

How this work:

1. resolve all the cadl files to be used.
2. resolve all the JS files that could be imported from Cadl.
3. Create a new entrypoint JS that contains a map of all those files
4. Entrypoint export a _CadlLibrary_ object that contains all the info to load the library.
5. Use rollup to create a single file browser version of this
6. The playground can then load that single file and then look for _CadlLibrary_ to add all the cadl files and js files to the brwoser host.

Todo:

• Right now the resolving of files is a big glob. We could be smart and compile the library and only include the files that were loaded.
• update the index.html with the importMap automatically?

[bterlson]

Is it possible to make this work with Vite since it uses rollup behind the covers and can take rollup config? I really appreciate Vite's speed and live reload functionality and it would be sad to leave that behind.

[timotheeguerin]

@bterlson would you mean as you do some change in the compiler or one of the libraries and vite auto compile+reload?

I guess could maybe make that work with using some watch functionality which then gets picked up by vite.

Are you using the playground as a way to quickly develop the compiler or libraries? Never thought about using it that way.

[bterlson]

Right now you can run npm run watch in the playground and make any change anywhere and the website updates in a second or so. It's very nice. It is a really easy way to play with changes to the compiler as you make them, but also makes playground dev much more enjoyable.

[timotheeguerin]

I agree with the playground dev experience and if you are just adding/working on the playground this shouldn't change.

The problem is indeed if you need to touch up compiler and other libraries, in that case right now it wouldn't get picked up.
I think I could change to have something like

cadl-bundler watch

I think that could then depend on cadl compiler --watch but I think for this to work correctly do need to change to be able to cadl compile . a library itself.

[nguerrera]

need to change to be able to cadl compile . a library itself.

I'm not sure what this means. Can't you do this today?

[timotheeguerin]

@nguerrera no if you run cadl compile . in a library it treats the entrypoint as cadl regardless of what it is and then fails

The main use case for that originally was the library linter but that can also be used in this case and just to do a build/validation of your own library to make sure it is valid.

[timotheeguerin]

@bterlson Also looking at vite plugins seems like it does look like I might be able to tweak how rollup is run to make this a rollup plugin which is then usable in vite.

[nguerrera]

@timotheeguerin I see, that seems worth fixing for sure!

[azure-pipelines]

You can try these changes at https://cadlplayground.z22.web.core.windows.net/prs/510/

[timotheeguerin]

@bterlson @nguerrera, ok so in its current state if you make changes in the other packages then it will automatically reload the playground in watch mode.

Updated:

• use cadl compile to resolve what are the files to import in the bundle
• made a simple vite plugin that hook on the vite server for auto reloading on change

[bterlson]

Looks good to me. Just to confirm, with the latest changes there shouldn't be any changes to workflow?

[timotheeguerin]

@bterlson nope, just npm run watch and saving any file in the cadl libs will tsc compile -> bundle -> refresh the page