live-codes / livecodes Goto Github PK
View Code? Open in Web Editor NEWCode Playground That Just Works!
Home Page: https://livecodes.io
License: MIT License
Code Playground That Just Works!
Home Page: https://livecodes.io
License: MIT License
✨ Feature
No response
When building for example html and JS and then exporting it, ideally (especially for headless mode in CI-like use) there'd be a way to also get an output with all dependencies bundled into the one HTML file or perhaps the file plus the external modules copied locally. This would also simplify the prefix: import map complexity when integrating this output into other projects or deployments/automation, by being able to "vendor" the full deployment rather than inherit the complexity of pulling modules in from various 3rd party CDNs.
One use case is to have github files that are available locally. JSDelivr is good for deployment, but for dev steps, it forces a long cache unless you contact them, unless you update URLs with specific hashes of files as you update them... there's no default way to just use "latest" / @main
for repos. So it could be easier for some users to export html + dependencies as a directory to rehost, or optionally one big html file with dependencies baked-in. It could also be useful to switch back to JSDelivr for prod deployments, and local paths / local github repos during dev (which can be loaded in via parent contexts using the SDK also...) Thanks
No response
I am trying to embed this into my blog, to create a python tutorial for students, and I would it to not run things like input()
on the load of the page, without doing lazy loading for each embed. I'm guessing it's the autoupdate
configuration, but I can't figure out how to insert it into an embed.
I'm trying to do something like this, but it isn't changing anything.
<div id="livecodes-qlbo5jm6qm">
<span>Open the project <a href="https://livecodes.io/?x=id/tse96fdpgz4" target="_blank">Untitled Project</a> in <a href="https://livecodes.io/" target="_blank">LiveCodes</a></span>
</div>
<script src="https://livecodes.io/sdk/livecodes.umd.js"></script>
<script>
const options = {
"config": {
"autoupdate": false,
"tools": {
"status": "open"
}
},
"import": "id/tse96fdpgz4",
"loading": "eager"
};
livecodes.createPlayground("#livecodes-qlbo5jm6qm", options);
</script>
In addition to this, is there a way to have the console be the default page open, rather than results?
✨ Feature
No response
livecodes has useful import features such as skypack: and jsdeliver.gh: prefixes. However these are only runnable inside of livecodes, it seems. It would be great to have a way to reuse these files in other build systems, I'm not familiar enough with JS to know how to make this "cross-platform"
No response
Originally posted by zyf722 April 5, 2024
I'm working on a project that requires me to allow users to edit and run code in multiple languages in the browser. Then I found this project and it works perfectly for my needs.
I notice that currently all messages and texts are hardcoded in the source code. I think it would be better if we can move all these texts to a separate file so that it's easier to maintain and translate. Any plans or thoughts on this i18n feature?
This is also related to providing a RTL layout, since a significant percentage of LiveCodes users have Arabic as their first language.
Hi @hatemhosny
You've done great job with this app! It provides plenty of useful features. However, when the number of projects/pens increases it becomes hard to maintain them. It would be very useful, if there is an ability to organize the projects/pens in folders/groups/tags and reorder them via drag and drop.
Thanks!
Currently, if we go to the 'Settings' (i.e., 'cog') menu, and try to use the 'Save As', 'Export' or 'CSS Preset' sub-menus, strange UI glitches happen on both Safari and Firefox.
The sub-menus display for about 0.25 second, and then they appear to get 'clipped' by the main menu, looking like this:
The 'Save As' menu seems to display OK, but the 'Export' and 'CSS Preset' menus appear "split", with commands shown in 2 different locations in the viewport:
✨ Feature
No response
Ability to load/inject custom CSS to style the UI and embed interfaces themselves without editing core files that will be replaced in an update
No response
✨ Feature
No response
It would be nice to support F#
Currently the available options include:
No response
Is there anyway to have the console/results display below the editor, rather than alongside it?
✨ Feature
No response
To allow java devs to have a playground on the go
No response
✨ Feature
No response
can you support C# and Asp.net please
No response
✨ Feature
Hello!
First of all - thank you very much for so awesome project, ideal for learning and "sandboxed" experimenting!
I noticed that when using the R template (I did not test other languages), the results are printed in the following way: text results first then figures.
I think it would be more natural if the results were displayed in the order they were generated. It would be much easier to match the code and the results. A bit like in the markdown.
So, for the given code:
1
[figure]
a vector of numbers
2
[figure]
3
a vector of numbers
No response
First of all, thanks for the awesome project. This is such impressive work and the team is doing great work for people all over the world.
I found that when I update the code on the left panel, the right panel is automatically reloaded and scrolled to top.
Is it possible to keep the scroll position after the reload? For example, if a user is seeing a section from 1000px from the top and update the code, the reloaded page shows the same section (1000px from the top) so that I can find what's changed without scrolling down the right panel.
Currently, I've added
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
to the JS code manually to keep the scroll.
Thank you
Can you guys please provide the env file?
✨ Feature
Can only export as variations of full HTML pages.
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.
No response
If I try to add a extern resource for e.g. jquery I get the following error. "Failed to load results!". So in my case I tried to get run material-ui with a simple Button. Without any success. I tried another way like through a cdn provider but not worked too. I try to fetch the material ui library via npm. All not worked.
I download the livecodes-v26.zip and unzip in my file server (tomcat 10.1). When I use the the template "React Starter" where I tried to import the material-ui library in my project
LiveCodes App
Desktop
Chrome
Self-Hosted
No response
No response
No response
None
✨ Feature
Currently, in an embedded playground, when the "External Resources" modal is opened and modified ("Load" button clicked), there is no event to listen for.
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.
No response
So weird! You are the first star gazer of my component and oddly enough - I literally have been creeping your repo's the past few days and was going to reach out to see if you have any interest in collaboration / making a pull request on this project.
Not only would I be grateful - but I am sure some other people would be in the community! plus - they have values inline!
From build/index.html:
<script src="livecodes/{{hash:index.js}}"></script>
Other files have their hash patterns replaced properly.
DOCS_BASE_URL=null npm run build
Repo build/deploy
No response
No response
No response
No response
No response
No response
None
It may not be immediately obvious to a new developer playing with code in their local machine that they cannot easily 'add' or 'import' an image from their own local computer to their LiveCode pen. It would be helpful to have a little section in the docs that explains how to use images into the pens. Some of the ways I can think of may include:
using a public image URL - the URL of an image that is publicly available on the internet - while their computer is connected to the internet
embedding the image as encoded data - eg., base64 encoded
Using a local server that can serve their local images via URLs that are resolved by their local machine - eg., if using tools that create virtual servers in their machines, such as MAMP/XAMPP, Nginx, Apache, Node, PHP, etc.
Are there any other ways?...
Julia language support is provided by @chriskoch/julia-wasm, which is based on julia-wasm.
Currently, this package contains a WASM compiled version of the Julia 1.04 compiler. It does support the standard library or using external libraries.
julia-wasm repo has not been active over the past few years.
Proposed improvements:
Hi, @hatemhosny thank you for starting this amazing project.
I've revisited the project since #297 and followed the steps below.
npm install
npm run build
npm start
but encountered this error :
[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: CHANGELOG.md
[nodemon] starting `node LICENSE README.md build docs e2e functions images node_modules package-lock.json package.json patches playwright.config.ts scripts src storybook tsconfig.eslint.json tsconfig.json tsconfig.sdk.json vendor-licenses.md ./scripts/build.js --dev`
MIT License
^^^^^^^
SyntaxError: Unexpected identifier
It opens the http://localhost:8080/ and the project itself can be run. But the watch mode (hot reload) is not working, which means my code updates are not reflected in real-time.
The code updates are applied after I run npm run build
and npm run start
again, which takes much time to see what's changed.
I'd like to contribute to this project. Can you please let me know how I can solve this issue above and run the project in watch mode?
✨ Feature
No response
It would be nice to be able to pass the stdin for languages like python through the config object rather than always using the window prompt. This should also be available in headless mode.
Currently, running a python script that requires an input throws an error in the console when in an headless mode, saying a call to prompt() was ignored due to allow-modals not being set to true.
No response
Greetings~
Attempted to experiment with offline capabilities by following the guidance here (#290).
Running npm install
failed w/ errors:
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@es-joy/[email protected]',
npm WARN EBADENGINE required: { node: '^14 || ^16 || ^17 || ^18 || ^19' },
npm WARN EBADENGINE current: { node: 'v20.5.1', npm: '9.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '^14 || ^16 || ^17 || ^18 || ^19' },
npm WARN EBADENGINE current: { node: 'v20.5.1', npm: '9.8.0' }
npm WARN EBADENGINE }
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(node:28146) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
npm ERR! code ERR_INTERNAL_ASSERTION
npm ERR! This is caused by either a bug in Node.js or incorrect usage of Node.js internals.
npm ERR! Please open an issue with this stack trace at https://github.com/nodejs/node/issues
npm ERR!
npm ERR! A complete log of this run can be found in: /Users/gapmiss/.npm/_logs/2023-08-15T15_05_37_451Z-debug-0.log
I've attached the log file.
2023-08-15T15_05_37_451Z-debug-0.log
git clone https://github.com/live-codes/livecodes
cd livecodes
npm install
Repo build/deploy
Desktop
No response
Development, Self-Hosted, Local
n/a
n/a
I last successfully built livecodes
a week or so ago, but since then, my macOS environment has changed. I did a wipe-n-clean install of macOS Monterey 12.6.8, along with homebrew
and clean installs of node, etc. Previously, the version of macOS was Monterey 12.5.
No
✨ Feature
No response
Would be convenient to have an easy CLI method of building inputs and accessing the result code. I’m guessing it would need to invoke something like playwright but not for testing. Not sure the easiest way to achieve this or if there’s a good way to avoid needing the full browser in headless mode
No response
when i run npm run serve
, the browser can not load https://livecodes-sandbox.pages.dev/v4/compiler,is this close source?
When I use the SDK to export the built source, I don't expect result-utils to be included when it has logic that only applies for running inside of the livecodes iframe sandbox.
Configure a simple project with HTML/JS. Export the source code via SDK and run standalone in a new browser tab.
LiveCodes App, LiveCodes SDK
No response
No response
No response
No response
No response
No response
None
✨ Feature
No response
Example use case: Svelte 4 compiler is currently bundled; Svelte 5 beta is active but will require migration to use. LiveCodes should be able to pin to the version 4 compiler (just as an example of a more general request) as well as introduce the v5 compiler without breaking older configurations or requiring maintaining diff versions of livecodes to compile diff projects.
(It'd also be nice to have this as a way to use beta compilers like Svelte 5)
No response
Hi Hatem. Amazing product 🤩
I was looking for a way to reach out privately, but I couldn't find an email, so excuse the GH issue.
Please email me on faris at replit.com if you're interested in chatting.
All the best
On top of the issue below, I got these problem during npm install
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/jest@"^27.0.0" from [email protected]
npm ERR! node_modules/ts-jest
npm ERR! dev ts-jest@"27.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @types/[email protected]
npm ERR! node_modules/@types/jest
npm ERR! peerOptional @types/jest@"^27.0.0" from [email protected]
npm ERR! node_modules/ts-jest
npm ERR! dev ts-jest@"27.1.3" from the root project
after removing @types/jest
from package.json, got a problem with esbuild
.
after removing esbuild
from package.json, got a problem with @codemirror/comment@^6.0.0
.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @codemirror/comment@^6.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
It finally worked after removing @replit/codemirror-vscode-keymap
and playwrite
from package.json.
It would be super helpful to have a short little paragraph in the docs clarifying what the 'Deploy' command does, and what the requirements are to use it.
Hi, I'm interested in reusing this for a native iOS experience. Not for a full livecodes editor but for a feature involving Astro templates compiled via wasm, and other things. I would run it within a webview and have native UI.
Is there a good way to use livecodes as a library, rather than a full IDE? So that I could programmatically load in JS, WASM etc. and programmatically access the output. Thank you
I've noticed (via Little Snitch firewall) that Livecodes will sometimes load javascript from pollyfill.io
and recently saw this tweet from @wesbos.
Also: https://github.com/polyfillpolyfill/polyfill-service/issues/2834
Is this the same polyfill that Livecodes uses? I did a search for pollyfill.io
and found the script tag.
livecodes/src/livecodes/html/app.html
Line 198 in 367fa25
Thank you
The overall visual design (look and feel) of LiveCodes app and embedded playgrounds needs improvement.
Acknowledging that this is not an area I'm good at, I would very much appreciate help here.
This would also be related to allowing the app to have themes that can be set/changed by users #415 .
The app styles are defined here: src/livecodes/styles/app.scss
This is playground for a mock of the LiveCodes app (HTML structure with just enough TS to allow navigating through different screens), which should allow editing styles without having to keep rebuilding the app:
https://livecodes.io/?x=id/rwurcbpr5ez
Please edit the styles to make new a design then share the playground URL below.
Best designs will be included in LiveCodes as official themes. 🎉
Light/dark modes, app screens and embed preview can be configured by changing the variables at the top of TypeScript code. Please also note that the mock allows navigating through different screens by selecting them from app menu and toolbar buttons. Split panes can be resized.
Obviously this is not a functional app, it is just a mock for the UI for the ease of design changes.
Currently, visiting "https://localpen.io" with the latest version of Safari, both on Big Sur as well as on the latest iOS and iPadOS, yields a never-ending loading screen:
Calling up the console on Safari MacOS, we see only 1 error - not sure whether it's helpful or not:
Visiting the site with Firefox or Chrome loads the LocalPen interface as expected - problem only appears on Safari, on all platforms.
✨ Feature
No response
Support kotlin language, u can check kotlin website they have a play ground already, maybe integrate with them
No response
✨ Feature
No response
I'm not sure what it would take to run on top of your existing WASM support, but direct support for SwiftWASM would be great.
✨ Feature
No response
Have you considered to add iOS simulator/emulator and native shell support to run hybrid apps (react native or flutter or capacitorjs)?
Some projects to see:
https://github.com/Backendless/native-mobile-app-shell
https://github.com/Cap-go
https://socketsupply.co/guides/
No response
Currently, the monaco editor shows errors when using CSS nested selectors.
Is it possible to update the engine to remove these errors? Are there any SDK config options that might solve this issue?
After a brief search, this may be related to my request.
Thank you!
✨ Feature
No response
Ability to select editor themes for the editor and embeds or configure custom ones in file system
No response
✨ Feature
Now NPM, Unpkg, JSdeliver, CDNs... can be used to import dependencies. I would like to do the same with private ones.
We are developing a small component library. For the documentation, we're evaluating different playground options, and Livecodes is a promising candidate. However, we're failing to see how could the following issue be resolved:
Ideally, we would like to use an NPM package which is published to a private NPM Artifactory registry.
As I see it, the way of working would be to -somehow- use the import
property of the playground's options
with the private URL (i.e.: https://privaterepostory:1234/npm/@project/library@semantic-version
).
However, if this is not supported, I would like to know what options are there? Could I include a step in the librarie's pipeline where the required bundle files are extracted (.js
& .css
) and left in a folder of the containing documentation application? Maybe that way, the playground could somehow import those static files from the parent application's directory on load, or after load...
Do I have to create a private CDN for this?
To summarise: I have full control over the package's lifecycle and source code, and I would like to include examples of our library's usage on livecodes embedded playgrounds.
Thanks!
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.