Can a Framework app be imported back into Framework?

[aaronkyle]

Hi there 👋

I am aware that importing Observable notebooks is not supported, ^{ref1, ref2} and that the recommended procedure for getting notebooks into Framework is to convert and adapt them. However -- once I do that, is there a way that I can import functions from a Framework app into another app (or from one file in an app to another in the same app)?

I ask this because I have converted a number of notebooks into working apps, and would like to re-use the code as imports. To date, I have been doing this in two steps: 1) converting the notebook, and then 2) refactoring it into a vanilla JS file for exporting.

Recently, when working on a port of Tom Larkworthy's AWS Helpers notebook, I discovered behaviors that work just fine in the context of the Framework app ^{[code] [rendered site]}, but which do not translate well when trying to adapt it to a vanilla JS export^[code]. The errors I am facing could be avoided if I were able to export a framework app with the Observable runtime in a similar manner as with notebooks.

Thank you for your help and insights! 🙏

[aaronkyle]

I suspect that re-deploying as a standard JS object is the only way to go, per this thread: observablehq/notebook-kit#96 (comment)

... I'll dig into whether importing the runtime takes me anywhere (in this context, I am looking to get Invalidation working).

[stevexvm]

Are the functions from your converted notebooks currently embedded directly in the page markdown? If so and apologies for my naivety, one approach, speaking as someone new to Framework, would be to pull those functions out of the markdown and place them into their own ESM module as exported functions. You can then re-import them back into your markdown file, so as not to break the original notebook.

Since Framework fully supports ESM modules, this keeps your original notebook logic intact while making the functions reusable. Once the functions live in separate modules your converted notebook can be copied directly into your "docs" folder. Then you should be able to import those modules from anywhere within the "docs" project just as you normally would with any vanilla JS code. Is that what you are doing now?

A true “notebook export” feature would certainly be even more convenient. But, I imagine it would be quite a task to implement, since Observable JavaScript differs from vanilla JS and relies heavily on top-level reactive variables, which make scope handling really complex for modules. Maybe the Notebooks 2.0 file format will solve all this?

[aaronkyle]

Hi @stevexvm - Thank you for helping me think through this.

I am indeed doing as you suggested: converting notebooks into ESM modules and then importing those modules into other notebooks. For the most part, this works OK (despite it being a lot of work). My hope in raising this question was to determine if trick that would allow me to skip the step of converting again from Framework into ESM.

In terms of the particular issue I was experiencing, it had to do with one of my functions using invalidation, which doesn't work in vanilla JS (it is part of Observable's runtime and is injected into cells, which don't exist in the vanilla JS context).

Here's an elaborated walk-through of the error and a workaround solution.

While I haven't gotten a hard 'no, this won't work', my expectation from the Notebooks 2.0 thread is direct exporting of Framework apps is not supported.