Merge pull request #498 from live-codes/develop

release v21

CHANGELOG.md

@@ -4,6 +4,48 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v21](https://github.com/live-codes/livecodes/compare/v20...v21) (2024-01-27)
+
+The major changes in this release include:
+
+- Auto-rendering of default export from JSX/TSX: This significantly reduces the boilerplate code required in JSX (to create and render react-dom root). This is mostly backward-compatible. Manual rendering still works. See [JSX docs](https://livecodes.io/docs/languages/jsx).
+- Use React new JSX transform
+- Apply same changes to react-native and solid
+- Change React, React-Native and Solid starter templates to use default export with auto-rendering
+- Allow the use of JSX fragments in Vue SFC
+- Improve fetching and bundling of types for editor intellisense. This should significantly improve code auto-completion and type info for imported modules, without the need for manual type-bundling or the use of custom types.
+- Add docs for: [JSX](https://livecodes.io/docs/languages/jsx), [TSX](https://livecodes.io/docs/languages/tsx), [Solid](https://livecodes.io/docs/languages/solid), [Solid(TS)](https://livecodes.io/docs/languages/solid.tsx), [React-Native](https://livecodes.io/docs/languages/react-native), [React-Native(TSX)](https://livecodes.io/docs/languages/react-native-tsx)
+
+Thank you @dai-shi for suggesting some of these changes.
+
+In addition to various improvements and fixes (see below).
+
+### Bug Fixes
+
+- **App:** fix loading mode & view ([f982fe0](https://github.com/live-codes/livecodes/commit/f982fe0901798c723d1a62bb256692097bec78c1))
+- **App:** fix result mode toolspane visibility ([cd1861a](https://github.com/live-codes/livecodes/commit/cd1861ab695485ee621836b98b371c5cd4a92998))
+- **Result:** fix removing/ignoring stylesheet imports in scripts ([c77980a](https://github.com/live-codes/livecodes/commit/c77980a1079f09827c8cde44cbf38cf1c3199d58))
+- **Result:** remove extra scripts added to detect classes for CSS processors ([c63a32f](https://github.com/live-codes/livecodes/commit/c63a32ff69b0e4e52a49c18aedc444d8dc3c71d7))
+- **Types:** fix race condition in loading types ([a85ba31](https://github.com/live-codes/livecodes/commit/a85ba31b0c380c0d815533214615bab27b94cea4))
+
+### Features
+
+- **compilers:** allow using JSX fragments in Vue SFC ([32270d8](https://github.com/live-codes/livecodes/commit/32270d801683dd556412e8396de6e56f19702431))
+- **compilers:** render React component if it is the default export ([6daace7](https://github.com/live-codes/livecodes/commit/6daace7f4196e05b9704adfedadedae39cd69187))
+- **compilers:** render React component if it is the default export ([2ba144f](https://github.com/live-codes/livecodes/commit/2ba144f171ba4853636b306c48ef1a50dd97d414))
+- **compilers:** render react-native component if it is the default export ([7db03f6](https://github.com/live-codes/livecodes/commit/7db03f6e39a05beb56d51c8d1798564b0f52536f))
+- **compilers:** render Solid component if it is the default export ([4968f03](https://github.com/live-codes/livecodes/commit/4968f036b6062293d6580eab593f4a99cc83ea14))
+- **compilers:** set typescript option { jsx: 'react-jsx' } ([e46450d](https://github.com/live-codes/livecodes/commit/e46450dd39919415e48896d27dd27ab66a69a417))
+- **compilers:** set typescript option { jsx: 'react-jsx' } ([8793627](https://github.com/live-codes/livecodes/commit/87936277aae60e3d5d3d6ebb2f82d966eca5c709))
+- **Config:** allow disabling JSX auto-render from custom settings ([20d5b5b](https://github.com/live-codes/livecodes/commit/20d5b5b768a0c60c259afb21b62c42c762cdb4d6))
+- **Templates:** update react and jest-react starter templates to use the new jsx runtime ([2e5b9d1](https://github.com/live-codes/livecodes/commit/2e5b9d1d2e8af0c150426d57b249c8112477d5dc))
+- **Types:** bundle types in the browser ([f9a7951](https://github.com/live-codes/livecodes/commit/f9a7951ef7b908dbe4b994f0230d30b037e41502))
+- **UI:** add links to docs in language info ([0bf80a5](https://github.com/live-codes/livecodes/commit/0bf80a5d8576862ebac93c2c53471837ee1045f5))
+- **UI:** add share button to toolbar ([9a1cb6d](https://github.com/live-codes/livecodes/commit/9a1cb6ded6156645ed88168ae8bb41cf5d7d516f))
+- **UI:** use the new X/Twitter logo in share screen ([848db7e](https://github.com/live-codes/livecodes/commit/848db7e0db9d331f1fcb0445b5858098bb75cbe3))
+
+---
+
 ## [v20](https://github.com/live-codes/livecodes/compare/v19...v20) (2024-01-17)
 
 ### Features

docs/docs/advanced/services.md

@@ -9,7 +9,6 @@ Some of the services are not supported on [self-hosted](../features/self-hosting
 Examples:
 
 - The [share](../features/share.md) service in [self-hosted](../features/self-hosting.md) apps uses [dpaste](https://dpaste.com/) for short URLs, which are [**deleted after 365 days**](https://dpaste.com/help).
-- Automatically finding and loading TypeScript types for npm modules (for [editor intellisense](../features/intellisense.md)) are not available for [self-hosted](../features/self-hosting.md) apps.
 - [Firebase configuration](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts) for authentication.
 
 :::info

docs/docs/features/intellisense.md

@@ -20,14 +20,6 @@ These are examples for automatically loading React types with autocomplete and h
 
 ![LiveCodes Intellisense](../../static/img/screenshots/intellisense2.jpg)
 
-:::info
-
-Automatically loading type definitions for npm modules uses a service provided for [https://livecodes.io](https://livecodes.io) and is not available for [self-hosted](./self-hosting.md) apps. You may want to use a [custom service](../advanced/services.md) instead.
-
-LiveCodes [sponsors](../sponsor.md) (Bronze sponsors and above) get access to managed custom services.
-
-:::
-
 ## Custom Types
 
 If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used.
@@ -75,14 +67,6 @@ Please note that the URLs used for `types` and `imports` properties may be full
 
 This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm.
 
-:::info
-
-A single (bundled) data definition file should be used for each module. These files cannot import other files.
-
-You may want to use tools like [dts-bundle](https://www.npmjs.com/package/dts-bundle) or [dts-buddy](https://github.com/Rich-Harris/dts-buddy) to bundle declaration files.
-
-:::
-
 ## Demo
 
 Let's assume we have this TypeScript module:

docs/docs/features/module-resolution.md

@@ -22,10 +22,10 @@ If you run it directly in the browser, you get this error:
 Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
 ```
 
-However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: [jspm.dev](https://jspm.dev/)) which provides ESM versions of NPM packages.
+However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: [esm.sh](https://esm.sh/)) which provides ESM versions of NPM packages.
 
 `import { v4 } from 'uuid';` <br /> becomes <br />
-`import { v4 } from 'https://jspm.dev/uuid';`
+`import { v4 } from 'https://esm.sh/uuid';`
 
 This is made possible by using [import maps](https://github.com/WICG/import-maps).
 
@@ -122,16 +122,14 @@ If you want to bundle (and transpile) any import URL, prefix it with `bundle:` (
 
 ## CDN Providers
 
-By default, npm modules are imported from [jspm.dev](https://jspm.dev/). You may choose another provider by using a CDN prefix. These are examples of importing the library `uuid`:
+By default, npm modules are imported from [esm.sh](https://esm.sh/). You may choose another provider by using a CDN prefix. These are examples of importing the library `uuid`:
 
-`uuid` → https://jspm.dev/uuid ([info](https://jspm.org))
+`uuid` → https://esm.sh/uuid ([info](https://esm.sh))
 
-`jspm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org))
+`esm.sh:uuid` → https://esm.sh/uuid ([info](https://esm.sh/))
 
 `skypack:uuid` → https://cdn.skypack.dev/uuid ([info](https://www.skypack.dev/))
 
-`esm.sh:uuid` → https://esm.sh/uuid ([info](https://esm.sh/))
-
 `jsdelivr:uuid` → https://cdn.jsdelivr.net/npm/uuid ([info](https://www.jsdelivr.com/))
 
 `esm.run:uuid` → https://esm.run/uuid ([info](https://esm.run/))
@@ -146,9 +144,11 @@ By default, npm modules are imported from [jspm.dev](https://jspm.dev/). You may
 
 `deno:uuid` → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts ([info](https://bundlejs.com/))
 
-`npm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org))
+`npm:uuid` → https://esm.sh/uuid ([info](https://esm.sh))
+
+`node:uuid` → https://esm.sh/uuid ([info](https://esm.sh))
 
-`node:uuid` → https://jspm.dev/uuid ([info](https://jspm.org))
+`jspm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org) - [DEPRECATED](https://jspm.org/jspm-dev-deprecation))
 
 Example: