Merge pull request #480 from live-codes/develop

release v19

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+---
+
+## [v19](https://github.com/live-codes/livecodes/compare/v18...v19) (2023-11-27)
+
+
+### Bug Fixes
+
+* **Templates:** fix solid template ([32732a0](https://github.com/live-codes/livecodes/commit/32732a0bc32a0660561d4d104379785877e755aa))
+
+
+### Features
+
+* **compilers:** upgrade Brython to v3.12.1 running Python v3.12 ([933f606](https://github.com/live-codes/livecodes/commit/933f606d960d9cea9b41534e944e6c2417902b77))
+* **Types:** load types for imports from CDN URLs ([8d25463](https://github.com/live-codes/livecodes/commit/8d2546393591c49e1b698e707e731b2977ad8085))
+
+
+
+
 ---
 
 ## [v18](https://github.com/live-codes/livecodes/compare/v17...v18) (2023-11-26)

README.md

@@ -152,8 +152,8 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
-<a href="https://www.skypack.dev/" target="_blank" title="Skypack">
-  <img alt="Skypack" width="200" src="https://dev.livecodes.io/docs/img/credits/skypack.svg">
+<a href="https://esm.sh/" target="_blank" title="esm.sh">
+  <img alt="esm.sh" width="200" src="https://dev.livecodes.io/docs/img/credits/esm.sh.png">
 </img></a><br /><br />
 </p>
 <p>
@@ -172,11 +172,6 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
-<a href="https://kapa.ai/" target="_blank" title="Kapa.ai">
-  <img alt="Kapa.ai" width="200" src="https://dev.livecodes.io/docs/img/credits/kapa-ai.jpg">
-</img></a><br /><br />
-</p>
-<p>
 <a href="https://www.sonarsource.com/products/sonarcloud/" target="_blank" title="SonarCloud">
   <img alt="SonarCloud" width="200" src="https://dev.livecodes.io/docs/img/credits/sonarcloud.svg">
 </img></a><br /><br />

docs/docs/credits.md

@@ -20,8 +20,8 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
-<a href="https://www.skypack.dev/" target="_blank" title="Skypack">
-  <img alt="Skypack" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/skypack.svg">
+<a href="https://esm.sh/" target="_blank" title="esm.sh">
+  <img alt="esm.sh" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/esm.sh.png">
 </img></a>
 </p>
 <p>
@@ -40,11 +40,6 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
-<a href="https://kapa.ai/" target="_blank" title="Kapa.ai">
-  <img alt="Kapa.ai" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/kapa-ai.jpg">
-</img></a>
-</p>
-<p>
 <a href="https://www.sonarsource.com/products/sonarcloud/" target="_blank" title="SonarCloud">
   <img alt="SonarCloud" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/sonarcloud.svg">
 </img></a>

docs/docs/features/tests.md

@@ -145,7 +145,7 @@ import '@testing-library/jest-dom';
 
 ### Chai
 
-Jest assertions can be used in the tests. However, if you prefer to Chai, it can be easily used.
+Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used.
 Autocomplete is also available in Monaco editor for Chai API.
 
 ```js

docs/docs/languages/python.md

@@ -49,7 +49,7 @@ Check the [starter template](#starter-template) for an example.
 
 ### Version
 
-Brython v3.11.3, running Python v3.11
+Brython v3.12.1, running Python v3.12
 
 ## Code Formatting
 

docs/docusaurus.config.js

@@ -248,14 +248,6 @@ const config = {
       async: true,
       defer: true,
     },
-    {
-      src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
-      'data-website-id': 'c5e9cf39-ef75-4290-becc-151b380252a3',
-      'data-project-name': 'LiveCodes',
-      'data-project-color': '#44494F',
-      'data-project-logo': 'https://avatars.githubusercontent.com/u/90906587?s=280&v=4',
-      async: true,
-    },
   ],
   headTags: [
     {

docs/src/components/HomepageFeatures.tsx

@@ -152,8 +152,7 @@ const FeatureList3: FeatureItem[] = [
         <Link to="./features">features</Link>, <Link to="./configuration">configuration</Link> and{' '}
         <Link to="./sdk">SDK</Link> (including <Link to="./api/modules">TypeScript types</Link>).
         Documentations are rich with code samples, live demos and screenshots. A gallery of usage
-        examples is provided as a <Link to="pathname:///../stories">storybook</Link>. You can even
-        just ask our <strong>AI chatbot</strong>.
+        examples is provided as a <Link to="pathname:///../stories">storybook</Link>.
       </>
     ),
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "livecodes",
   "version": "0.0.0",
-  "appVersion": "18",
+  "appVersion": "19",
   "description": "Code Playground That Just Works!",
   "author": "Hatem Hosny",
   "license": "MIT",

src/livecodes/services/modules.ts

@@ -2,7 +2,7 @@ import type { CDN } from '../models';
 
 declare const globalThis: { appCDN: CDN };
 
-const moduleCDNs: CDN[] = ['jspm', 'skypack'];
+const moduleCDNs: CDN[] = ['jspm', 'esm.sh', 'skypack'];
 const npmCDNs: CDN[] = ['unpkg', 'jsdelivr', 'fastly.jsdelivr'];
 const ghCDNs: CDN[] = ['fastly.jsdelivr.gh', 'jsdelivr.gh', 'statically'];
 

src/livecodes/services/types.ts

@@ -7,9 +7,9 @@ export const typesService = {
     const fetchedTypes: Types = {};
     await Promise.all(
       types.map(async (type) => {
-        if (!isBare(type)) return;
+        const mod = removeSpecifier(removeCDNPrefix(type));
+        if (!isBare(mod)) return;
         try {
-          const mod = type.includes(':') ? type.split(':')[1] : type;
           const res = await fetch('https://esm.sh/' + mod);
           if (!res.ok) return;
           const typesUrl = res.headers.get('X-Typescript-Types');
@@ -23,3 +23,29 @@ export const typesService = {
     return fetchedTypes;
   },
 };
+
+const removeCDNPrefix = (url: string) => {
+  if (!url.startsWith('https://')) return url;
+
+  const prefixes = [
+    'https://jspm.dev/',
+    'https://cdn.skypack.dev/',
+    'https://cdn.jsdelivr.net/npm/',
+    'https://fastly.jsdelivr.net/npm/',
+    'https://esm.run/',
+    'https://esm.sh/',
+    'https://esbuild.vercel.app/',
+    'https://bundle.run/',
+    'https://unpkg.com/',
+    'https://deno.bundlejs.com/?file&q=',
+  ];
+
+  for (const prefix of prefixes) {
+    if (url.startsWith(prefix)) {
+      return url.replace(prefix, '');
+    }
+  }
+  return url;
+};
+
+const removeSpecifier = (type: string) => (type.includes(':') ? type.split(':')[1] : type);

src/livecodes/templates/starter/angular-starter.ts

@@ -20,7 +20,7 @@ import { Component, Input, NgModule, enableProdMode } from '@angular/[email protected]
 import { CommonModule } from '@angular/[email protected]';
 import { BrowserModule } from '@angular/[email protected]';
 import { platformBrowserDynamic } from '@angular/[email protected]';
-import 'zone.js/dist/zone';
+import 'zone.js@0.12.0/dist/zone';
 
 // app.component.ts
 @Component({
@@ -87,13 +87,6 @@ platformBrowserDynamic()
   .catch((err: Error) => console.error(err));
 `.trimStart(),
   },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {
-    'zone.js/dist/zone': '',
-  },
   customSettings: {
     typescript: {
       experimentalDecorators: true,

src/livecodes/templates/starter/lit-starter.ts

@@ -43,17 +43,17 @@ export class SignalExample extends SignalWatcher(LitElement) {
   }
 
   static styles = css\`
-  :host {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  :host, button {
-    font: 1em sans-serif;
-  }
-  .logo {
-    width: 150px;
-  }
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    :host, button {
+      font: 1em sans-serif;
+    }
+    .logo {
+      width: 150px;
+    }
   \`;
 }
 `.trimStart(),

src/livecodes/templates/starter/solid-starter.ts

@@ -40,7 +40,7 @@ function App(props: Props) {
     <div className="container">
       <h1>Hello, {props.title}!</h1>
       <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/solid.svg" />
-      <p>You clicked {count} times.</p>
+      <p>You clicked {count()} times.</p>
       <button onClick={increment}>Click me</button>
     </div>
   );

src/livecodes/toolspane/tools.ts

@@ -95,7 +95,7 @@ export const createToolsPane = (
   const updateConfig = () => {
     setTools({
       enabled: tools.length === allTools.length ? 'all' : tools.map((tool) => tool.name),
-      active: tools[activeToolId].name,
+      active: tools[activeToolId]?.name,
       status,
     });
   };

src/livecodes/types/type-loader.ts

@@ -1,7 +1,7 @@
 import { getImports } from '../compiler';
 import type { EditorLibrary, Types } from '../models';
 import { typesService } from '../services';
-import { objectFilter } from '../utils';
+import { objectFilter, safeName } from '../utils';
 
 export const createTypeLoader = () => {
   let loadedTypes: Types = {};
@@ -28,7 +28,7 @@ export const createTypeLoader = () => {
     }
     loadedTypes = { ...loadedTypes, ...type };
     return {
-      filename: `file:///node_modules/${name}/index.d.ts`,
+      filename: `file:///node_modules/${safeName(name)}/index.d.ts`,
       content,
     };
   };

src/livecodes/vendors.ts

@@ -38,11 +38,11 @@ export const browserJestUrl = /* @__PURE__ */ getUrl(
   '@live-codes/[email protected]/dist/browser-jest.umd.js',
 );
 
-export const brythonBaseUrl = /* @__PURE__ */ getUrl('brython@3.11.3/');
+export const brythonBaseUrl = /* @__PURE__ */ getUrl('brython@3.12.1/');
 
-export const chaiUrl = /* @__PURE__ */ getModuleUrl('chai@4.3.6');
+export const chaiUrl = /* @__PURE__ */ getModuleUrl('chai@5.0.0-alpha.2');
 
-export const chaiTypesUrl = /* @__PURE__ */ getUrl('@types/chai@4.2.22/index.d.ts');
+export const chaiTypesUrl = /* @__PURE__ */ getUrl('@types/chai@4.3.11/index.d.ts');
 
 export const cherryCljsBaseUrl = /* @__PURE__ */ getUrl('[email protected]/');