Feature: Export as module

[aehlke]

Type of feature

✨ Feature

Current behavior

Can only export as variations of full HTML pages.

Suggested feature

It would be valuable to be able to edit a script which can then be built and exported as a reusable module rather than only as a webpage. In this case, markup/style would either be unneeded or used during dev only for testing integrating the module. I'd like to be able to define some functions that I can then export, host somewhere, and reuse as imports in another livecodes session.

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Contributing Docs

• [X] I agree to follow this project's Contribution Docs

[hatemhosny]

There are currently multiple ways to re-use scripts as modules that can be imported in other projects:

• Deploy: When you deploy the project, select the option "Commit source code (public)". This deploys the source code without changes to the directory src as 3 separate files (e.g. index.html, style.css & script.js). You can directly use these in other projects. This is an example deployed repo: https://github.com/hatemhosny/sample-reusable-module/tree/gh-pages The files are hosted on GitHub pages: script: https://hatemhosny.github.io/sample-reusable-module/src/script.js stylesheet: https://hatemhosny.github.io/sample-reusable-module/src/style.css html: https://hatemhosny.github.io/sample-reusable-module/src/index.html

  or other CDNs that host github assets like jsdelivr or statically

  This is an example project that uses the script and the stylesheet: https://livecodes.io/?x=id/aj9ymhyji77&console

• Data URLs: in case the module you want to re-use is small, you may just convert it into data URL and use it directly, without hosting it anywhere. You may convert the content of any editor to data URL and copy it using the button in the toolbar below the editor with the tooltip (Copy code as data URL) This is a sample data URL: (paste it in the browser address bar)

  data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGFkZCA9IChhLCBiKSA9PiBhICsgYjsNCg0KZXhwb3J0IGNvbnN0IHN1YnRyYWN0ID0gKGEsIGIpID0+IGEgLSBiOw==

  This is an example project that uses it: https://livecodes.io/?x=id/mqmrcz9gr2k&console

• Assets: (app menu -> Assets) You may use assets to upload your local files to GitHub and get the hosted GitHub Pages URL or generated data URL for them to be used as described above.

I hope this helps. If you have other suggestions or ideas, I'd be happy to know about.

[aehlke]

jsdelivr works well! thank you

My next question is how I could use the outputs of these together with another language, without having them isolated into separate sandboxes. Is there a good way to combine the built JS/wasm outputs together into one HTML file besides statically combining the rendered files outside of livecodes? for example, in order to run both python/pyodide & JS in the same document/frame. I understand it's not the focus of livecodes but maybe there's a simple way to extend it with this behavior. Thanks for your guidance

edit: I'd also like to use jsdelivr.gh: / skypack: prefixes for imports in these modules. How do you also reuse their module maps?

[hatemhosny]

As you mentioned, running multiple scripts/multi-file projects are out of the focus of LiveCodes. However, you may use something like the methods described above to "import/re-use" code.

In addition, since you can use HTML, there is nothing that prevents you from adding a script tag there and add the JS code you want.

Example: https://livecodes.io/?x=id/cird58vjmfh (edit: added import from skypack) In this example, you can increment the same counter from python and from JS code. Also, module resolution works in script tags added to HTML (the example imports from skypack).

Is that what you mean?