Merge pull request #413 from live-codes/develop

release v11

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v11](https://github.com/live-codes/livecodes/compare/v10...v11) (2023-08-18)
+
+### Features
+
+- **editor:** support codeium AI code assistant ([2949ccd](https://github.com/live-codes/livecodes/commit/2949ccd4edbfb997cbb75ed34587382c87434ab1))
+
+---
+
 ## [v10](https://github.com/live-codes/livecodes/compare/sdk-v0.1.2...0.0.0) (2023-08-04)
 
 ### Bug Fixes

README.md

@@ -102,6 +102,7 @@ Add this code to your page:
 - [Dev Tools](https://livecodes.io/docs/features/tools-pane) ([console](https://livecodes.io/docs/features/console), [compiled code viewer](https://livecodes.io/docs/features/compiled-code), [test runner](https://livecodes.io/docs/features/tests))
 - [Code formatting](https://livecodes.io/docs/features/code-format)
 - [Intellisense](https://livecodes.io/docs/features/intellisense)
+- [AI Code Assistant 🪄](https://livecodes.io/docs/features/ai)
 - [Lite mode](https://livecodes.io/docs/features/lite)
 - [Read-only mode](https://livecodes.io/docs/features/read-only)
 - [Broadcast](https://livecodes.io/docs/features/broadcast)

docs/docs/features/ai.md

@@ -0,0 +1,37 @@
+# AI Code Assistant 🪄
+
+LiveCodes supports AI-powered code completion, totally for **free**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative.
+
+The large generative machine learning model is capable of understanding the context of your code and comments in order to generate suggestions on what you might want to type next.
+
+It has a wide range of language support, and it works everywhere (in the [standalone app](../getting-started#standalone-app), [embedded playgrounds](./embeds) and [self-hosted](./self-hosting) apps).
+
+## Examples:
+
+JavaScript:
+
+<video controls style={{width: '100%'}}>
+
+  <source src="/docs/vid/LiveCodes-AI.mp4" type="video/mp4" />
+</video>
+
+Python:
+
+<video controls style={{width: '100%'}}>
+
+  <source src="/docs/vid/LiveCodes-AI-py.mp4" type="video/mp4" />
+</video>
+
+## Instructions
+
+1. Install [Codeium chrome extension](https://codeium.com/chrome_tutorial).
+2. Login to Codeium.
+3. Enjoy the magic!
+
+Currently, only [Monaco editor](./editor-settings.md#code-editor) on desktop Chrome browser is supported. Wider editor and browser support is planned.
+
+:::caution Note
+
+Please note that codeium extension sends your code to their servers for code completion. However, your code is not used for training their model. Check codeium [FAQ](https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F) and [privacy policy](https://codeium.com/privacy-policy) for more details.
+
+:::

docs/docs/features/index.md

@@ -16,6 +16,10 @@ In this page, a quick overview of the important features are presented. A more d
 
 The default code editor is the powerful editor that powers [VS Code](https://code.visualstudio.com/), featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very [customizable](./editor-settings.md). It supports [keyboard shortcuts](./keyboard-shortcuts.md), [code formatting](./code-format.md), [Emmet abbreviations](./editor-settings#emmet) and even [Vim and Emacs bindings](./editor-settings.md#editor-modes).
 
+## AI Code Assistant
+
+LiveCodes supports AI-powered code completion, totally for **free**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. Install the [Codeium chrome extension](https://codeium.com/chrome_tutorial) and enjoy the magic!
+
 ## Mobile-friendly
 
 The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go.

docs/docusaurus.config.js

@@ -144,6 +144,10 @@ const config = {
                 label: 'Import...',
                 href: 'pathname:///../?screen=import',
               },
+              {
+                label: 'AI Code Assistant 🪄',
+                to: '/features/ai',
+              },
               {
                 label: 'Bookmarklet',
                 to: '/bookmarklet',

docs/sidebars.js

@@ -33,6 +33,7 @@ const sidebars = {
             'features/tests',
             'features/module-resolution',
             'features/intellisense',
+            'features/ai',
             'features/code-format',
             'features/keyboard-shortcuts',
             'features/user-settings',

docs/src/components/HomepageFeatures.tsx

@@ -73,9 +73,12 @@ const FeatureList2: FeatureItem[] = [
     image: './img/star.svg',
     description: (
       <>
-        Use the standalone app for quick prototyping, testing new ideas or learning a new
-        framework/language. The app remembers your settings. Organize your projects and assets.
-        Share code with friends. Deploy projects to public URLs.
+        Use the <Link to="./getting-started#standalone-app">standalone app</Link> for quick
+        prototyping, testing new ideas or learning a new framework/language. The app remembers your{' '}
+        <Link to="./features/user-settings">settings</Link>. Organize your{' '}
+        <Link to="./features/projects">projects</Link> and{' '}
+        <Link to="./features/assets">assets</Link>. <Link to="./features/share">Share</Link> code
+        with friends. <Link to="./features/deploy">Deploy</Link> projects to public URLs.
       </>
     ),
   },
@@ -126,14 +129,16 @@ const FeatureList3: FeatureItem[] = [
     ),
   },
   {
-    title: 'Focused on Privacy',
-    image: './img/data-privacy.svg',
+    title: 'AI Code Assistant',
+    image: './img/magic-wand.svg',
     description: (
       <>
-        Projects are private by default. The code you write in LiveCodes never leaves your device,
-        unless you choose to share, export or sync it. User data is stored in the browser. User code
-        runs in a sandboxed environment. <Link to="./features/security">Security</Link> is taken
-        seriously.
+        Leverage the <Link to="./features/ai">power of AI</Link> to help you write/learn code, using
+        the <strong>free</strong> Copilot alternative. It understands the context of your code and
+        comments to generate suggestions. It has a wide range of language support, and it works
+        everywhere (in the <Link to="./getting-started#standalone-app">standalone app</Link>,{' '}
+        <Link to="./features/embeds">embedded playgrounds</Link> and{' '}
+        <Link to="./features/self-hosting">self-hosted</Link> apps).
       </>
     ),
   },
@@ -154,6 +159,18 @@ const FeatureList3: FeatureItem[] = [
 ];
 
 const FeatureList4: FeatureItem[] = [
+  {
+    title: 'Focused on Privacy',
+    image: './img/data-privacy.svg',
+    description: (
+      <>
+        Projects are private by default. The code you write in LiveCodes never leaves your device,
+        unless you choose to share, export or sync it. User data is stored in the browser. User code
+        runs in a sandboxed environment. <Link to="./features/security">Security</Link> is taken
+        seriously.
+      </>
+    ),
+  },
   {
     title: 'Free and Open-Source',
     image: './img/oss.svg',

e2e/specs/import.spec.ts

@@ -12,7 +12,7 @@ const sources = {
   'GitLab snippet': 'https://gitlab.com/-/snippets/2199319',
   'GitLab dir':
     'https://gitlab.com/hatemhosny/typescript-demo-for-testing-import-/-/tree/gh-pages/src',
-  JsBin: 'https://jsbin.com/mikunebofa/edit?html,css,js,output',
+  JsBin: 'https://jsbin.com/jikojak/edit?html,css,js,output',
 };
 
 const githubRepo = 'https://github.com/hatemhosny/typescript-demo-for-testing-import-';
@@ -32,6 +32,7 @@ test.describe('Import from UI', () => {
     test(source, async ({ page, getTestUrl, editor }) => {
       test.skip(editor === 'codejar', 'FIXME: fails on CI');
       test.skip(source.startsWith('GitHub'), 'FIXME: fails on CI');
+      test.skip(source.startsWith('JsBin'), 'FIXME: fails on CI');
 
       await page.goto(getTestUrl());
 
@@ -178,6 +179,7 @@ test.describe('Import from URL', () => {
   Object.entries(sources).forEach(([source, url]) => {
     test(source, async ({ page, getTestUrl }) => {
       test.skip(source.startsWith('GitHub'), 'FIXME: fails on CI');
+      test.skip(source.startsWith('JsBin'), 'FIXME: fails on CI');
 
       await page.goto(getTestUrl() + '#' + url);
 

package.json

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

scripts/build.js

@@ -78,6 +78,10 @@ const prepareDir = async () => {
     path.resolve(__dirname + '/../src/index.html'),
     path.resolve(outDir + '/index.html'),
   );
+  await fs.promises.copyFile(
+    path.resolve(__dirname + '/../src/livecodes/html/app-base.html'),
+    path.resolve(outDir + '/livecodes/app.html'),
+  );
 };
 
 try {

src/livecodes/html/about.html

@@ -27,8 +27,9 @@
         makes it very flexible. A powerful
         <a href="{{DOCS_BASE_URL}}sdk/" target="_blank" rel="noopener">SDK</a> (for
         <a href="{{DOCS_BASE_URL}}sdk/js-ts" target="_blank" rel="noopener">JS/TS</a>,
-        <a href="{{DOCS_BASE_URL}}sdk/react" target="_blank" rel="noopener">React</a> and
-        <a href="{{DOCS_BASE_URL}}sdk/vue" target="_blank" rel="noopener">Vue</a>) facilitates
+        <a href="{{DOCS_BASE_URL}}sdk/react" target="_blank" rel="noopener">React</a>,
+        <a href="{{DOCS_BASE_URL}}sdk/vue" target="_blank" rel="noopener">Vue</a> and
+        <a href="{{DOCS_BASE_URL}}sdk/svelte" target="_blank" rel="noopener">Svelte</a>) facilitates
         <a href="{{DOCS_BASE_URL}}sdk/js-ts#embed-options" target="_blank" rel="noopener"
           >embedding</a
         >

src/livecodes/html/app-base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="codeium:type" content="monaco" />
+    <title>LiveCodes</title>
+    <script>
+      window.addEventListener('message', function (event) {
+        if (
+          event.origin === window.location.origin &&
+          event.source === parent &&
+          event.data.content
+        ) {
+          document.write(event.data.content);
+          document.close();
+        }
+      });
+    </script>
+  </head>
+  <body></body>
+</html>

src/livecodes/html/app.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="codeium:type" content="monaco" />
     <title>LiveCodes</title>
     <style>
       body {

src/livecodes/languages/cpp-clang/lang-cpp-clang-script.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-console */
 import { createWorkerFromContent } from '../../utils/utils';
 import { cppWasmBaseUrl } from '../../vendors';
-console.log(cppWasmBaseUrl);
+
 const getWorkerSrc = async (baseUrl: string) => {
   try {
     const sharedScriptUrl = baseUrl + 'shared.js';

src/livecodes/main.ts

@@ -69,11 +69,11 @@ export const livecodes = (container: string, config: Partial<Config> = {}): Prom
       const iframe = document.createElement('iframe');
       iframe.name = 'app';
       iframe.style.display = 'none';
-
-      containerElement.appendChild(iframe);
-      iframe.contentWindow?.document.open();
-      iframe.contentWindow?.document.write(
-        appHTML
+      iframe.src = baseUrl + '{{hash:app.html}}';
+      let contentLoaded = false;
+      iframe.onload = () => {
+        if (contentLoaded) return;
+        const appContent = appHTML
           .replace(/{{baseUrl}}/g, baseUrl)
           .replace(/{{script}}/g, scriptFile)
           .replace(/{{appCDN}}/g, appCDN)
@@ -83,18 +83,20 @@ export const livecodes = (container: string, config: Partial<Config> = {}): Prom
             supportsImportMaps
               ? ''
               : `
-          <script type="module">
-            import * as mod from '${baseUrl}{{hash:codemirror.js}}';
-            window['${baseUrl}{{hash:codemirror.js}}'] = mod;
-          </script>
-          `,
+    <script type="module">
+      import * as mod from '${baseUrl}{{hash:codemirror.js}}';
+      window['${baseUrl}{{hash:codemirror.js}}'] = mod;
+    </script>
+    `,
           )
           .replace(
             /{{codemirrorCoreUrl}}/g,
             `${baseUrl}vendor/codemirror/${process.env.codemirrorVersion}/codemirror-core.js`,
-          ),
-      );
-      iframe.contentWindow?.document.close();
+          );
+        iframe.contentWindow?.postMessage({ content: appContent }, location.origin);
+        contentLoaded = true;
+      };
+      containerElement.appendChild(iframe);
 
       if (isEmbed) {
         window.addEventListener(customEvents.appLoaded, () => {