Merge branch 'develop' into ci-typos

live-codes · Dec 20, 2024 · 72b22f0 · 72b22f0
2 parents b253888 + bea4ca3
commit 72b22f0
Show file tree

Hide file tree

Showing 150 changed files with 30,587 additions and 9,041 deletions.
diff --git a/.github/workflows/CI-e2e.yml b/.github/workflows/CI-e2e.yml
@@ -9,7 +9,7 @@ jobs:
       fail-fast: false
       matrix:
         node-version: [18.x]
-        test: [1, 2, 3, 4]
+        test: [1, 2, 3, 4, 5]
     env:
       NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
@@ -36,4 +36,4 @@ jobs:
         env:
           CI: true
           CI_SHARD_INDEX: ${{ matrix.test }}
-          CI_SHARD_TOTAL: 4
+          CI_SHARD_TOTAL: 5
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -40,6 +40,6 @@ jobs:
       - name: Deploy
         run: |
           git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
-          npm run deploy -- -u "livecodes-ci[bot] <186997172+livecodes-ci[bot]@users.noreply.github.com>"
+          npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
         env:
           GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
diff --git a/.github/workflows/i18n-update-pull.yml b/.github/workflows/i18n-update-pull.yml
@@ -102,6 +102,9 @@ jobs:
         mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $PR_BRANCH && rm -rf $LOKALISE_TEMP
       env:
         LOKALISE_TEMP: lokalise_tmp
+
+    - name: Generate Lokalise JSON files
+      run: npm run i18n-lokalise-json all
 
     - name: Linting and fixing
       run: npm run fix

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -95,10 +95,10 @@ jobs:
         if: startsWith(github.head_ref, 'releases/v')
         run: gh pr create --title "release ${{steps.vars.outputs.version}}" --body "https://${{steps.vars.outputs.version}}.livecodes.io" --base main --head develop
         env:
-          GITHUB_token: ${{ steps.generate-token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
 
       - name: Create pull request to main (SDK)
         if: startsWith(github.head_ref, 'releases/sdk-v')
         run: gh pr create --title "release ${{steps.vars.outputs.version}}" --body "https://www.npmjs.com/package/livecodes" --base main --head develop
         env:
-          GITHUB_token: ${{ steps.generate-token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,111 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v37](https://github.com/live-codes/livecodes/compare/v36...v37) (2024-12-09)
+
+### Features
+
+- **Compilers:** add support for React Compiler ([353ed97](https://github.com/live-codes/livecodes/commit/353ed9734b664fecaa79231d2bd573016bbc65a9)). The [React starter template](https://livecodes.io/?template=react) now uses the React compiler.
+- **Compilers:** upgrade Svelte to version 5 ([db3053c](https://github.com/live-codes/livecodes/commit/db3053ce407a7996add3586e4549eceae77f72c3))
+
+### Breaking Changes
+
+- Svelte 5 is mostly compatible with Svelte 4, but there are some breaking changes. See [release notes](https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0)
+
+---
+
+## [sdk-v0.7.1](https://github.com/live-codes/livecodes/compare/v36...sdk-v0.7.1) (2024-12-09)
+
+### Features
+
+- Add `react` and `react-tsx` to supported languages for React compiler.
+
+---
+
+## [v36](https://github.com/live-codes/livecodes/compare/v35...v36) (2024-12-07)
+
+### Highlights for this release
+
+This is a big release, featuring:
+
+- Total redesign of the UI to a cleaner, more modern, more consistent and more accessible design. In addition, a customizable `themeColor` allows for a lot of customization (see [livecodes.io/docs/configuration/configuration-object#themecolor](https://livecodes.io/docs/configuration/configuration-object#themecolor)).
+- Internationalization (i18n) support for the entire UI. The app can be displayed in multiple languages - currently 12. The new config option `appLanguage` allows setting the app language (see [livecodes.io/docs/configuration/configuration-object#applanguage](https://livecodes.io/docs/configuration/configuration-object#applanguage)).
+
+### Credits:
+
+A huge shout-out to our contributors for making this release possible!
+
+- @gigamaster for the design and implementation of the new UI.
+- @zyf722 for the i18n support.
+
+Thank you :)
+
+### Bug Fixes
+
+- **App:** do not clear console in style-only update ([f6ebeb5](https://github.com/live-codes/livecodes/commit/f6ebeb54e8dc62aa4bcfe21adedee30081213e21))
+- **docs:** align code block for e2e tests ([751c766](https://github.com/live-codes/livecodes/commit/751c7663f9644fc31b306ab6d465aac8171cfd3c))
+- **docs:** fix links to CDNs ([4150510](https://github.com/live-codes/livecodes/commit/41505101106b9005063da49fe3338851302ac6b0))
+- **services:** fix CORS error in firefox when calling jsdelivr API ([d00c7e5](https://github.com/live-codes/livecodes/commit/d00c7e538a3ea54a9b6866a612558526ab6be624))
+- **ToolsPane:** fix console themes ([58da00c](https://github.com/live-codes/livecodes/commit/58da00ce92d6f5b613f78175573a3527865c612a))
+- **UI:** fix external resources screen styles in firefox ([ff9f347](https://github.com/live-codes/livecodes/commit/ff9f3479ee7d15eac500956bf01b5313f98805c7))
+- **Templates** modify React Native template till React Native Web supports React 19.
+
+### Features
+
+- **Config:** add [`appLanguage`](https://livecodes.io/docs/configuration/configuration-object#applanguage) config property to set i18n language ([c682d7c](https://github.com/live-codes/livecodes/commit/c682d7c3c666e38089c3c150420406a56483a9f6))
+- **Config:** add [`themeColor`](https://livecodes.io/docs/configuration/configuration-object#themecolor) config property to set theme color.
+
+* abstract tag for innerHTML ([7c942e3](https://github.com/live-codes/livecodes/commit/7c942e3357131e2710a9bda93abab166083e1c51))
+* add a script to generate English .ts and .json template from .html for i18n ([7ab9473](https://github.com/live-codes/livecodes/commit/7ab9473ba6ffd4997579cef3182f84d4e969e11e))
+* add i18n integration for html pages ([e426d0f](https://github.com/live-codes/livecodes/commit/e426d0f45d519d8f0554545927b867890b578cf4))
+* **App:** add console message ([c17c4ed](https://github.com/live-codes/livecodes/commit/c17c4ed0868391d485508d83d308af8b84b58760))
+* export i18n keys in alphabetical order to have better diff ([7c72fda](https://github.com/live-codes/livecodes/commit/7c72fdaf4bd0bbad0be2d17f20be138e6c283aff))
+* extract i18n from .ts files with translateString ([1f1f507](https://github.com/live-codes/livecodes/commit/1f1f5071135cc5f0a5875ca99b99ccc182369975))
+* **i18n:** add `getLanguageDirection` to get ltr/rtl layout ([016b62c](https://github.com/live-codes/livecodes/commit/016b62cf53dc96ee75f218389139bb39a8ff9811))
+* **i18n:** add `placeholder` as translatable attribute ([6c9a27c](https://github.com/live-codes/livecodes/commit/6c9a27c221b9cae0436a751b22bb8935a60e15f5))
+* **i18n:** add a ci script to push source texts to lokalise ([0eaa5e7](https://github.com/live-codes/livecodes/commit/0eaa5e7fdc46269c8ea1038c464bd3b330eb1fe9))
+* **i18n:** add an `overwrite` flag for `i18n-export` ([eb9ba81](https://github.com/live-codes/livecodes/commit/eb9ba816dc5622ad8e8f9a5bb642f473ca68e2bb))
+* **i18n:** add app language in editor settings ([861a26b](https://github.com/live-codes/livecodes/commit/861a26b665b477c63fb40b099e38740c31cefe18))
+* **i18n:** add branching and rename `i18n-push-to-lokalise` ([d304f09](https://github.com/live-codes/livecodes/commit/d304f09cfdecf6e8afe7f9681211d5c5e8ea4828))
+* **i18n:** add i18n for loading screen ([1ff478d](https://github.com/live-codes/livecodes/commit/1ff478da270dbb4e72ddeb6622acd73c25c7415f))
+* **i18n:** add i18n-import ([83a040a](https://github.com/live-codes/livecodes/commit/83a040a035c5d379c1e45d9de8dc42bf08437f84))
+* **i18n:** add i18n-lokalise-json ([35471c7](https://github.com/live-codes/livecodes/commit/35471c7487b512f9d3fb53abc59122551523cf30))
+* **i18n:** add interpolation for element-level translation ([647849a](https://github.com/live-codes/livecodes/commit/647849ad153305ee14942458435f9c155e496169))
+* **i18n:** add types for translation keys ([d44159e](https://github.com/live-codes/livecodes/commit/d44159e982dc162da1064aba9f814c16c5cc2050))
+* **i18n:** async lazy load i18n for language-info ([a7bc906](https://github.com/live-codes/livecodes/commit/a7bc9066c2972f5dd4cfb0f2fee0fbdaf5fc6419))
+* **i18n:** change escapeValue to false to prevent HTML tag escaping ([4d3c04b](https://github.com/live-codes/livecodes/commit/4d3c04bd91ea8bf564e2dadfc32eea9019a566d6))
+* **i18n:** change tag numbering to left-to-right in `abstractifyHTML` ([f995c76](https://github.com/live-codes/livecodes/commit/f995c76279cd3ca7e922ea440359d3b3405017bf))
+* **i18n:** change translate to support multiple properties ([f482820](https://github.com/live-codes/livecodes/commit/f482820c361c1f69832519821d6fb1e7f4c81c70))
+* **i18n:** custom event driven translation ([a6c60cf](https://github.com/live-codes/livecodes/commit/a6c60cfa5b9baa3fb3a2e4b1b9603060e10c23b5))
+* **i18n:** deprecate outdated keys when importing ([2c4b49a](https://github.com/live-codes/livecodes/commit/2c4b49a2012706f84492088ba443beef438c8863))
+* **i18n:** enhance type-safety and intellisense of i18n ([cb4d9d6](https://github.com/live-codes/livecodes/commit/cb4d9d678ac741734dcd2cec31d20a76fb5fb210))
+* **i18n:** enhance type-safety for translateString ([12bdeea](https://github.com/live-codes/livecodes/commit/12bdeea5b7779e04560759174d7dda6cafd5c0ca))
+* **i18n:** lazy-load i18n ([56411fc](https://github.com/live-codes/livecodes/commit/56411fcd8aad172322b85fd2b67fd28879cbe797))
+* **i18n:** only allow supported appLanguages ([4114d98](https://github.com/live-codes/livecodes/commit/4114d98e0b57ed23acb95761dc2e8a067bad0dbf))
+* **i18n:** remove empty translation entries ([5d05602](https://github.com/live-codes/livecodes/commit/5d056029101719f91d3a0b33c43f253645f156f4))
+* **i18n:** set `dir` based on `appLanguage` ([cf115c1](https://github.com/live-codes/livecodes/commit/cf115c1975dc2985d57b44aa7f93c867b6a16e54))
+* **i18n:** string-level i18n ([d01bab0](https://github.com/live-codes/livecodes/commit/d01bab0632366da041bf5c8a172cfa72f7a8a892))
+* **i18n:** use ts to have type-safe translation ([b38e1a9](https://github.com/live-codes/livecodes/commit/b38e1a9ae488fb1fdfba7bdcf4f1cf6be4010be7))
+* **i18n:** utility function to support dynamically-added elements ([fe69071](https://github.com/live-codes/livecodes/commit/fe69071084b505ce6c305d720b4e9c077a4c6da2))
+* **Import:** import local files by dropping in editor ([09c69f6](https://github.com/live-codes/livecodes/commit/09c69f6015f552ab441174f99581b4fa8d090b1f))
+* **Import:** improve file selection criteria on import ([c96c541](https://github.com/live-codes/livecodes/commit/c96c541ec10f180e8f9e8fd0290ca35d18c1ba00))
+* load `appLanguage` in `getUserConfig` ([2e73a96](https://github.com/live-codes/livecodes/commit/2e73a963a04cfe9c88e265029ddc29d40a5eee31))
+* set document language with i18n ([0149c4a](https://github.com/live-codes/livecodes/commit/0149c4affb0f081438a982a4b32f58d864f12938))
+* **UI:** add fallback when css masking is not supported ([bde3df7](https://github.com/live-codes/livecodes/commit/bde3df7d0ed9b032f4ee2c6f70e047e9abc0ddb5))
+* use i18next ([73d74e2](https://github.com/live-codes/livecodes/commit/73d74e263081789d1a01caa63993a432a3e55dd8))
+
+---
+
+## [sdk-v0.7.0](https://github.com/live-codes/livecodes/compare/v35...sdk-v0.7.0) (2024-12-07)
+
+### Features
+
+- **Config:** add [`appLanguage`](https://livecodes.io/docs/configuration/configuration-object#applanguage) config property to set i18n language ([c682d7c](https://github.com/live-codes/livecodes/commit/c682d7c3c666e38089c3c150420406a56483a9f6))
+
+- **Config:** add [`themeColor`](https://livecodes.io/docs/configuration/configuration-object#themecolor) config property to set theme color.
+
+---
+
 ## [v35](https://github.com/live-codes/livecodes/compare/v34...v35) (2024-08-01)
 
 ### Highlights for this release:

diff --git a/README.md b/README.md
@@ -13,14 +13,16 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: uptime status](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/upptime/master/api/live-codes/uptime.json)](https://status.livecodes.io)
 [![LiveCodes: app version](https://img.shields.io/github/v/release/live-codes/livecodes?label=app)](https://livecodes.io)
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
-[![LiveCodes: npm downloads](https://img.shields.io/npm/dw/livecodes)](https://www.npmjs.com/package/livecodes)
+[![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-91-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-93-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/3d39f15618e048db9d13c2a0e8002b33)](https://www.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=github.com&utm_medium=referral&utm_content=live-codes/livecodes&utm_campaign=Badge_Grade)
 [![Lokalise: translated](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/translated.json)](https://app.lokalise.com/public/34958094667a72e9454592.95108106/)
 [![Lokalise: UI languages](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/languages.json)](https://app.lokalise.com/public/34958094667a72e9454592.95108106/)
 [![license - MIT](https://img.shields.io/github/license/live-codes/livecodes)](https://github.com/live-codes/livecodes/blob/develop/LICENSE)
-[![LiveCodes: GitHub repo](https://img.shields.io/github/stars/live-codes/livecodes?style=social)](https://github.com/live-codes/livecodes)
+[![LiveCodes: GitHub repo](https://img.shields.io/github/stars/live-codes/livecodes?style=flat&logo=github)](https://github.com/live-codes/livecodes)
+[![Follow us on X (formerly Twitter)](https://img.shields.io/badge/Follow%20@livecodes__io-575757?logo=x)](https://x.com/livecodes_io)
 
 [Try it now on livecodes.io](https://livecodes.io)
 

diff --git a/docs/docs/contribution/i18n.md b/docs/docs/contribution/i18n.md
@@ -169,7 +169,9 @@ Several npm scripts are available to facilitate the i18n workflow:
   - The `<phase>` argument is required to specify whether the script is to exclude files or revert the exclusion. Valid values are `pre` and `post`.
   - This script only works when environment variable `BUILD_INCLUDE_LOCALES` is **NOT** set to `true`.
 - [`i18n-lokalise-json`](../../../scripts/i18n-lokalise-json.mjs): Generates `.lokalise.json` files from codebase for manually authoring translations on Lokalise.
-  - The `<lang>` argument is required to specify the language that the `.lokalise.json` files are generated from.
+  - Arguments to the script are required to specify the languages that the `.lokalise.json` files are generated from.
+  - You can also use `all` to generate `.lokalise.json` files for all languages.
+  - This script **should not** be used for the source language English. Use `i18n-export` instead.
 
 Please run `i18n-export` before pushing changes to the codebase to ensure that the source texts are up-to-date.
 
@@ -204,6 +206,16 @@ This means new changes are made to the source code/texts. In this case, maintain
 7. Once the translation is complete, maintainers can comment `.i18n-update-pull` to trigger the `i18n-update-pull` workflow. The workflow will pull the translated texts from Lokalise, update the `.ts` files under `src/livecodes/i18n/locales`, and commit the changes to the `i18n/<owner>/<head-branch>` branch. Then, it will create a PR to merge the changes back to the default branch `develop`.
 8. Maintainers should perform a final review on the i18n PR and merge it if everything is fine. Meanwhile, a merging from the `i18n/<owner>/<head-branch>` to `master` should also be done to keep the `master` branch on Lokalise up-to-date.
 
+#### Minor Fixes / Updates
+Sometimes there is already an ongoing main prerelease branch with many features being developed and translated on Lokalise, and a minor fix or update to the prerelease branch is needed. In this case, maintainers should follow the steps below:
+
+1. Switch to `develop` branch.
+2. Do `i18n-export` and upload corresponding `.lokalise.json` to the prerelease branch of the Lokalise project through web UI.
+3. Affected entries will be updated and [marked as `unverified`](https://docs.lokalise.com/en/articles/3684557-translation-statuses-translated-verified-reviewed-and-completed#verified-and-unverified).
+4. Provide correct translations in other languages on Lokalise.
+
+Here we do not want an extra i18n branch for simplicity, nor need to pull from Lokalise as we always consider English source strings from codebase as the latest version and do not recommend modifying them on Lokalise directly.
+
 ### Github Actions (CI)
 
 Four i18n-related workflows are set up in the repository:

diff --git a/docs/docs/features/code-to-image.md b/docs/docs/features/code-to-image.md
@@ -0,0 +1,23 @@
+# Code to Image
+
+LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.
+
+This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor.
+
+![Code to Image](../../static/img/screenshots/code-to-image-1.jpg)
+
+Code can be modified in the "Code to Image" screen and then downloaded as image or shared.
+
+![Code to Image](../../static/img/screenshots/code-to-image-2.jpg)
+
+There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc.
+
+There are multiple presets that can be used or the options can be manually configured.
+
+![Code to Image](../../static/img/screenshots/code-to-image-3.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-4.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-5.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-6.jpg)
diff --git a/docs/docs/features/index.md b/docs/docs/features/index.md
@@ -6,7 +6,7 @@ sidebar_class_name: exclude_from_sidebar
 
 ## Overview
 
-_LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/index.md) (including 80+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity.
+_LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/index.md) (including 90+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity.
 
 ![LiveCodes screenshot](../../static/img/screenshots/features-1.jpg)
 
@@ -70,6 +70,14 @@ You can [broadcast](./broadcast.md) source code or result in real-time to others
 
 Do you work on multiple devices? No Problem! You may [sync](./sync.md), [backup and restore](./backup-restore.md) your data any time on any device.
 
+## Themes
+
+LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.
+
+## i18n
+
+LiveCodes supports [internationalization](./i18n.md) for multiple languages.
+
 ## Client-side!
 
 LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No `npm install`s. Just the browser!