search

live-codes / livecodes

Code Playground That Just Works!
https://livecodes.io
MIT License
778 stars 66 forks source link

Feature: add event to SDK watch method #534

Closed gapmiss closed 5 months ago

gapmiss commented 5 months ago

Type of feature

✨ Feature

Current behavior

Currently, in an embedded playground, when the "External Resources" modal is opened and modified ("Load" button clicked), there is no event to listen for.

Suggested feature

Add new event (External Resources changed) to the watch() method - https://livecodes.io/docs/sdk/js-ts/#watch so that a local config can be updated and playground refreshed.

Additional context

No response

Code of Conduct

Contributing Docs

hatemhosny commented 5 months ago

@gapmiss good catch (as usual!) I will add something like that 👍 Thank you.

hatemhosny commented 5 months ago

@gapmiss

The SDK watch method allows you to run the callback functions registered to code event when playground "content" changes. This currently include changes in:

I missed firing that event with changes in external resources.

I believe it makes sense to associate the same event (code) with changes in external resources (stylesheets, scripts, cssPreset). Please note that the callback function allows accessing the changed Code and Config (which has the changed resources).

You can always know what changed by comparing the Config before and after the event.

Does that cover your use-case?

hatemhosny commented 5 months ago

@gapmiss you may try it on this preview URL: https://watch-external-resources.livecodes.pages.dev/

also added a note about sources of change for code event in docs: https://watch-external-resources.livecodes.pages.dev/docs/sdk/js-ts#watch

gapmiss commented 5 months ago

@hatemhosny

This is great. Am already watching for code changes, so your preview appUrl worked straight away.

… and the documentation, first-class as always!

Thank you for your attention to details and accommodating my request so quickly.

hatemhosny commented 5 months ago

@gapmiss Great. This has now been merged and should be available in next release. Thank you for reporting 💚.

By the way, great work with the Obsidian plugin. 👍 I posted about it on Twitter here: https://x.com/hatem_hosny_/status/1769893392463401375?s=20

gapmiss commented 5 months ago

@hatemhosny

My pleasure!

Appreciate the complement, still a work in progress, but am happy with the results so far. Hope others will find it useful in their development journeys. I have many more ideas on use cases, publishing, sharing, etc.

For testing the plugin and learning, I've accumulated a library of over 3,200 playgrounds over the last 6+ months. I've really been putting Livecodes thru the "ringer." I do have some questions that have arisen from so much testing… but for another day.

Thank you for the shout-out on Twitter. I'm not on Twitter (at the moment) but am on Mastadon. Have you considered joining/posting to Mastadon? Quite a decent developer community present on Mastadon and I would definitely "boost" your posts if you chose to do so. This morning, I helped someone with a CSS question and posted a demo on Livecodes. Check it out: https://thoresson.social/@anders/112144602797874363

Until next time, all the best to you!

hatemhosny commented 5 months ago

@gapmiss Thank you, indeed. I would be very interested to know your comments/questions. I'm sure that would be very valuable. I'm not currently active on Mastodon. I will let you know if I start being active there. Thank you.

hatemhosny commented 4 months ago

@gapmiss This has now been released in v27. Credit was given to you in release notes and on Twitter announcement. Thank you 💚