From eba241ae112f058f60662567af26bd10d0002f98 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Sat, 27 Jul 2024 23:21:24 +0300 Subject: [PATCH] release: v34 --- CHANGELOG.md | 16 +++++++----- README.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++--- package.json | 2 +- 3 files changed, 82 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 191a8fd3d..50f7cb1fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,18 +4,22 @@ All notable changes to this project will be documented in this file. See [standa --- -## [sdk-v0.6.0](https://github.com/live-codes/livecodes/compare/v33...sdk-v0.6.0) (2024-07-27) +## [v34](https://github.com/live-codes/livecodes/compare/sdk-v0.6.0...0.0.0) (2024-07-27) +- **Config:** allow setting custom editor title ([95287d0](https://github.com/live-codes/livecodes/commit/95287d07d88fe75ca22c69e4c2c5d3241aae4069)) -### Features +- SDK v0.6.0 -* **Config:** allow setting custom editor title ([95287d0](https://github.com/live-codes/livecodes/commit/95287d07d88fe75ca22c69e4c2c5d3241aae4069)) -* **SDK:** add JSDoc comments ([323ce5a](https://github.com/live-codes/livecodes/commit/323ce5ad3cf4bb38450852f7116ad8fb366d08d0)) -* **SDK:** add JSDoc comments for react & vue SDKs ([cf7b46d](https://github.com/live-codes/livecodes/commit/cf7b46de438ea71f25ab404c3a1f85c791d8d2b2)) -* **SDK:** change react SDK build to use `react-jsx` ([d603103](https://github.com/live-codes/livecodes/commit/d603103342b427e5d8d13db81dec4f8101d7643c)) +--- +## [sdk-v0.6.0](https://github.com/live-codes/livecodes/compare/v33...sdk-v0.6.0) (2024-07-27) +### Features +- **Config:** allow setting custom editor title ([95287d0](https://github.com/live-codes/livecodes/commit/95287d07d88fe75ca22c69e4c2c5d3241aae4069)) +- **SDK:** add JSDoc comments ([323ce5a](https://github.com/live-codes/livecodes/commit/323ce5ad3cf4bb38450852f7116ad8fb366d08d0)) +- **SDK:** add JSDoc comments for react & vue SDKs ([cf7b46d](https://github.com/live-codes/livecodes/commit/cf7b46de438ea71f25ab404c3a1f85c791d8d2b2)) +- **SDK:** change react SDK build to use `react-jsx` ([d603103](https://github.com/live-codes/livecodes/commit/d603103342b427e5d8d13db81dec4f8101d7643c)) --- diff --git a/README.md b/README.md index 4e5f92069..e7675b9a4 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Code Playground That Just Works!

-A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-side** code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and [80+ languages/frameworks](https://livecodes.io/docs/languages/). +A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-side** code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and [90+ languages/frameworks](https://livecodes.io/docs/languages/). [![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) @@ -37,7 +37,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid - No subscription fees (free and open-source) - No account required \* - No limits for usage (unlimited private projects) -- 80+ languages/frameworks/processors +- 90+ languages/frameworks/processors - Large set of features and integrations - Import code from a wide variety of sources - Use modules from npm, deno.land/x, jsr, GitHub, and others @@ -87,7 +87,7 @@ Add this code to your page: ## Feature Summary -- A wide range of [language support](https://livecodes.io/docs/languages/) (80+ languages/frameworks/processors) +- A wide range of [language support](https://livecodes.io/docs/languages/) (90+ languages/frameworks/processors) - [Powerful Editor](https://livecodes.io/docs/features/editor-settings) - Mobile-friendly - [External resources/libraries](https://livecodes.io/docs/features/external-resources) @@ -120,6 +120,74 @@ Add this code to your page: For details check the [full list of features](https://livecodes.io/docs/features/). +## LiveCodes SDK + +The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds. + +The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](https://livecodes.io/docs/sdk/#npm-package), that is also available from [CDNs](https://livecodes.io/docs/sdk/#cdn). It can be used to create playgrounds with a wide variety of [configurations](https://livecodes.io/docs/configuration/configuration-object.md) and [embed options](https://livecodes.io/docs/sdk/js-ts.md#embed-options). In addition, [SDK methods](https://livecodes.io/docs/sdk/js-ts.md#sdk-methods) allow programmatic communication and control of the playgrounds during runtime. + +### Installation + +``` +npm i livecodes +``` + +### Usage + +Example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQDKAIgNJH4C22IANCPgQMYBOEADpNgHaIQjEAAtYAQ1yCAPDVhhxRViPHsC8gLwAdEAFUAKgDEAtAA4dRAPQA+LX1nzFfcXO0g0EWAHcu2dmAtWfjBYPjA3LwhcMBENfA9WWGNI6JEGIgg+KAhxaGM2XNgNAEYAOgAGCxthETAaaABBMDA1QWhxPgBzN1DA9oICNx1hBU6CRABtAF0mcVZIDABRXCg-QTZOHmEaVQBrAFcuRFB2rv3xTvgkWvrhILDQsBkVtAzcN3uFTNh2HWtpSwvawgAC+TAIYAAnnBjiBTp1zpdBKwBndgo9BKDwRxuE8ECcOgiLlcQAArcRocQbXFoh5hQQQGi+fxEYBKdgSEIABXakM67Gw+z4uCIIKIADMBTQiAByaDoWBBFgygDcWl+fHVdg4nNgPPEfIFQtwAAoZQBiT7ib7sGXpYBavhEJT8cUQToIVmO53OnbsA5cT0OjU+n3wxGwT0yv27XDYLx8O3e0MuulgKPmogACVg0Gg2CIAHU-NBcABCJMhn1g5M1qsebxRjkEfbQMCVuwggCUao1WJAEOhhDE8nGCGm2M2YDHE5AKIIXOb8kxTC4AsSAz8M5mc-2EOwNBI8kgXTHwDBIEZzOnxwvUK4hFvTBCELPcMJEcE98IOK2TE+GJIP2GBqBA-CCAAzBBIzYNg0BvqE4gAEZwFISC5NAwhzAsJL3AQcHwOCChgHuyL5uoUggiCQA)) + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, + view: 'result', +}); +``` + +The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react.md) and [Vue](https://livecodes.io/docs/sdk/vue.md)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte.md) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts.md#typescript-types) provides type-safety and a great developer experience. + +React SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA)) + +```jsx +import LiveCodes from 'livecodes/react'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello World!', + }, +}; +const Playground = () => ; +export default Playground; +``` + +Vue SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBqArrEQMoAiA0kfgLbYgA0I+BAxgE4QAHSNgB2iEOxAALWAENc4gDxNYYWUW5TZvAqoC8AHRABVACoAxALQAOI0QD0APgMjlq9SNkrDINBFgA7gLYvGB23KJgsCJgPgEQuGBSevh+3LCW8YlSbEQQIlAQstCWPMWwegCMAHQADHZOklJgTNAAgmBgOuLQsiIA5j7R4b0EBD5Gkmr9BIgA2gC6HLLckBgAorhQIeI8-EKSTNoA1mQCiKC9A2Sy-fBIza2SETHRYOIgAL4cBGAAnnALiArv0bndxNwxs9Im8Pt8QHtBO8EJc+qDbvdfBRoa8YkpEUIiLowGdnLwXEQ8kxgqEiKgMDguEQAGa8bBMIgAcmg6FgES49jQFE5AG4DOSROKKRpRL8ZSJmRB+kQ9ERgFKRJTKUdeKcBAg1RqtVqQWDYAbOTrjrhsAERJy2EbjfKojELQBiIgACVg0Gg2CIAHUQtBcABCB1OynfJ2fMUSxT2AlgMkuDWKKLU3pRVOaoiKelYPCEIgIF6KwZGctKux+QI+XiEMjQMIgBy5xOZgTZ2C5r4-f5wAgyVSzBCLH58JFjicgSEEAAKjeJHw4AjZ6TGIRnSznZF+7KoqkgAzHwHhEGpITAZ-h-wEhAud8IN6Bpox4nvhCnBw4L1dyISPCGA6BAojiAAzBBUzYNg0BniA0SyAARnAChIMU0CSCsayYi8BBwfAA6yCSY5zv6ugKJ8nxAA)) + +```html + + + +``` + +See [SDK docs](https://livecodes.io/docs/sdk/) for more details. + ## Documentations Comprehensive documentations for [features](https://livecodes.io/docs/features/), [getting started](https://livecodes.io/docs/getting-started), [configuration](https://livecodes.io/docs/configuration/) and [SDK](https://livecodes.io/docs/sdk/) are available on: diff --git a/package.json b/package.json index 9bf85c7c4..3b17bf2d8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "livecodes", "version": "0.0.0", - "appVersion": "33", + "appVersion": "34", "description": "Code Playground That Just Works!", "author": "Hatem Hosny", "license": "MIT",