live-codes / livecodes Goto Github PK

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

Ability to select editor themes for the editor and embeds or configure custom ones in file system

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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:

• Update the wasm compiler to the latest Julia compiler (preferably with an automated script that allows future updates)
• Allow using the standard library
• Think about a way to support popular external libraries (may be similar to Pyodide or WebR)

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Describe the bug

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.

Steps to reproduce

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

Affected services

LiveCodes App

Platforms

Desktop

Browsers

Chrome

Environment

Self-Hosted

Share URL(s)

No response

Configuration

No response

Additional context

No response

Is it already fixed?

None

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

It would be nice to support F#

Currently the available options include:

• Bolero: Try F# on WebAssembly - src
• Fable: repl - src

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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.

Thank you

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

To allow java devs to have a playground on the go

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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.

SAFARI

The sub-menus display for about 0.25 second, and then they appear to get 'clipped' by the main menu, looking like this:

FIREFOX

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:

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

can you support C# and Asp.net please

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

Support kotlin language, u can check kotlin website they have a play ground already, maybe integrate with them

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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!

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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)

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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/

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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.

when i run npm run serve , the browser can not load https://livecodes-sandbox.pages.dev/v4/compiler,is this close source?

On top of the issue below, I got these problem during npm install

1. @types/jest

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

2. after removing @types/jest from package.json, got a problem with esbuild.

3. 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.

Describe the bug

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

Steps to reproduce

1. git clone https://github.com/live-codes/livecodes
2. cd livecodes
3. npm install

Affected services

Repo build/deploy

Platforms

Desktop

Browsers

No response

Environment

Development, Self-Hosted, Local

Share URL(s)

n/a

Configuration

n/a

Additional context

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.

Is it already fixed?

No

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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:

1. 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

2. embedding the image as encoded data - eg., base64 encoded

3. 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?...

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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.

Describe the bug

From build/index.html:
<script src="livecodes/{{hash:index.js}}"></script>

Other files have their hash patterns replaced properly.

Steps to reproduce

DOCS_BASE_URL=null npm run build

Affected services

Repo build/deploy

Platforms

No response

Browsers

No response

Environment

No response

Share URL(s)

No response

Configuration

No response

Additional context

No response

Is it already fixed?

None

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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

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.

microsoft/monaco-editor#4071

Thank you!

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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.

Additional context

https://book.swiftwasm.org

https://pad.swiftwasm.org

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Discussed in https://github.com/orgs/live-codes/discussions/547

This is also related to providing a RTL layout, since a significant percentage of LiveCodes users have Arabic as their first language.

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

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Describe the bug

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.

Steps to reproduce

Configure a simple project with HTML/JS. Export the source code via SDK and run standalone in a new browser tab.

Affected services

LiveCodes App, LiveCodes SDK

Platforms

No response

Browsers

No response

Environment

No response

Share URL(s)

No response

Configuration

No response

Additional context

No response

Is it already fixed?

None

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Problem Statement

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

Let's redesign LiveCodes in LiveCodes!

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.

Guides

• Feel free to use whatever styling language (CSS/SCSS/Less/Stylus/...etc). SCSS is preferred.
• No (or minimum) changes to HTML and TypeScript. I'm open to discussion if this is really needed.
• Cannot use Tailwind CSS or similar (because we do not want changes to HTML).
• The design has to be responsive for different screen sizes.
• Each design needs to have light and dark modes (using CSS variables).
• Bonus for generous use of CSS variables (which allows users to have variants of the design as custom themes when this feature is implemented, see #415 )

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?

Can you guys please provide the env file?

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 buildand 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?

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

Is there anyway to have the console/results display below the editor, rather than alongside it?

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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"

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Type of feature

✨ Feature

Current behavior

Now NPM, Unpkg, JSdeliver, CDNs... can be used to import dependencies. I would like to do the same with private ones.

Suggested feature

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!

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

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.

Code-Runner-Web-Component: A web component that allows you to run high level programming languages on your websites (static websites included!)

Not only would I be grateful - but I am sure some other people would be in the community! plus - they have values inline!

Type of feature

✨ Feature

Current behavior

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.

Like in the picture below:

Suggested feature

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

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

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.

Additional context

No response

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs