npm - vzcode - Versions diffs - 0.42.0 → 0.43.0 - Mend

vzcode 0.42.0 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/assets/{index-EvjpKQwB.js → index-WNLp-4Rf.js} +20 -20
package/dist/assets/{worker-5MYmBNqK.js → worker-VwMsqrhy.js} +82 -82
package/dist/index.html +1 -1
package/package.json +19 -7
package/src/client/CodeEditor/widgets.ts +39 -22
package/src/client/useTypeScript/worker.ts +20 -0

package/dist/index.html CHANGED Viewed

@@ -24,7 +24,7 @@
       href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-EvjpKQwB.js"></script>
+    <script type="module" crossorigin src="/assets/index-WNLp-4Rf.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-vD_kE3p2.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -43,6 +43,18 @@
     {
       "name": "Anooj Pai",
       "url": "https://github.com/Anooj-Pai"
+    },
+    {
+      "name": "Jack Hankin",
+      "url": "https://github.com/Darmin-Geek"
+    },
+    {
+      "name": "Amanda Ruan",
+      "url": "https://github.com/aruan20"
+    },
+    {
+      "name": "Evan Whymark",
+      "url": "https://github.com/EvWhymark"
     }
   ],
   "license": "MIT",
@@ -59,7 +71,7 @@
     "@codemirror/lang-markdown": "^6.2.3",
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.1",
+    "@codemirror/view": "^6.22.2",
     "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-indentation-markers": "^6.5.0",
     "@replit/codemirror-interact": "^6.3.0",
@@ -94,16 +106,16 @@
     "sharedb": "^4.1.2",
     "sharedb-client-browser": "^4.4.0",
     "vizhub-ui": "^3.10.0",
-    "ws": "^8.14.2"
+    "ws": "^8.15.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "sass": "^1.69.5",
     "typescript": "^5.3.3",
-    "vite": "^5.0.6",
-    "vitest": "^1.0.1"
+    "vite": "^5.0.7",
+    "vitest": "^1.0.4"
   }
 }

package/src/client/CodeEditor/widgets.ts CHANGED Viewed

@@ -4,7 +4,6 @@ import {
   ViewPlugin,
   Decoration,
   WidgetType,
-  keymap,
 } from '@codemirror/view';
 import {
   Annotation,
@@ -30,15 +29,17 @@ export const widgets = ({
     rules: [
       // hex color picker
       // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
+      // Extended to support single and double quotes
       {
-        regexp: /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
+        regexp: /["']\#([0-9]|[A-F]|[a-f]){6}["']/g,
         cursor: 'pointer',
         onClick(text, setText, e) {
           const res =
-            /\"(?<hex>\#([0-9]|[A-F]|[a-f]){6})\"/.exec(
+            /(?<quote>["'])(?<hex>\#([0-9]|[A-F]|[a-f]){6})\k<quote>/.exec(
               text,
             );
           const startingColor = res.groups?.hex;
+          const quoteType = res.groups?.quote;
           const sel = document.createElement('input');
           sel.type = 'color';
@@ -54,11 +55,11 @@ export const widgets = ({
             if (onInteract) onInteract();
             if (el.value) {
               setText(
-                `"${
+                `${quoteType}${
                   valueIsUpper
                     ? el.value.toUpperCase()
                     : el.value
-                }"`,
+                }${quoteType}`,
               );
             }
           };
@@ -210,11 +211,12 @@ const rgb2Hex = (r: number, g: number, b: number): string =>
   '#' + r.toString(16) + g.toString(16) + b.toString(16);
 const colorCircleTheme = EditorView.baseTheme({
-  '.color-circle-parent': { display: 'inline-block' },
+  '.color-circle-parent': {
+    display: 'inline-block',
+    cursor: 'inherit',
+  },
 });
-const colorCircleAnnotation = Annotation.define();
 export const colorsInTextPlugin: Extension = [
   ViewPlugin.fromClass(
     class {
@@ -232,7 +234,8 @@ export const colorsInTextPlugin: Extension = [
         const lines = v.view.state.doc.iter();
         let line = lines.next();
-        //Offset is the number of characters before the hex so the circle can be placed properly.
+        // Offset is the number of characters before the hex
+        // so the circle can be placed properly.
         let offset = 0;
         while (!line.done) {
           if (line.value === '\n') {
@@ -240,15 +243,16 @@ export const colorsInTextPlugin: Extension = [
             line = lines.next();
             continue;
           }
-          const hexColorOccurances = line.value.matchAll(
-            /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
+          const hexColorOccurences = line.value.matchAll(
+            // /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
+            /["']\#([0-9]|[A-F]|[a-f]){6}["']/g,
           );
-          let hexOccurance = hexColorOccurances.next();
+          let hexOccurance = hexColorOccurences.next();
           while (!hexOccurance.done) {
             const offsetColorInfo = hexOccurance.value;
             offsetColorInfo.index += offset;
             colorInfos.push(offsetColorInfo);
-            hexOccurance = hexColorOccurances.next();
+            hexOccurance = hexColorOccurences.next();
           }
           offset += line.value.length;
           line = lines.next();
@@ -257,7 +261,7 @@ export const colorsInTextPlugin: Extension = [
         return Decoration.set(
           colorInfos.map((colorInfo) => {
             return {
-              //9 is the length of the hex color string including quotation marks
+              // 9 is the length of the hex color string including quotation marks
               from: colorInfo.index + 9,
               to: colorInfo.index + 9,
               value: Decoration.widget({
@@ -287,8 +291,13 @@ class ColorWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const parent = document.createElement('div');
+    const size = 20;
+    const innerSize = 16;
-    parent.setAttribute('style', 'width:10px;height:10px');
+    parent.setAttribute(
+      'style',
+      `width:${size}px;height:${size}px`,
+    );
     parent.className = 'color-circle-parent';
     const svg = document.createElementNS(
       'http://www.w3.org/2000/svg',
@@ -301,15 +310,23 @@ class ColorWidget extends WidgetType {
     colorCircle.setAttributeNS(
       null,
       'fill',
-      this.color.replace(/\"/g, ''),
+      this.color.replace(/["']/g, ''),
+    );
+    colorCircle.setAttributeNS(null, 'stroke', 'black');
+    colorCircle.setAttributeNS(
+      null,
+      'r',
+      '' + innerSize / 2,
+    );
+    colorCircle.setAttributeNS(null, 'cx', '' + size / 2);
+    colorCircle.setAttributeNS(
+      null,
+      'cy',
+      '' + (size / 2 - 1),
     );
-    colorCircle.setAttributeNS(null, 'r', '5');
-    colorCircle.setAttributeNS(null, 'cx', '5');
-    colorCircle.setAttributeNS(null, 'cy', '5');
-    svg.setAttributeNS(null, 'viewBox', '0 0 10 10');
-    svg.setAttributeNS(null, 'width', '10');
-    svg.setAttributeNS(null, 'height', '10');
+    svg.setAttributeNS(null, 'width', '' + size);
+    svg.setAttributeNS(null, 'height', '' + size);
     svg.appendChild(colorCircle);

package/src/client/useTypeScript/worker.ts CHANGED Viewed

@@ -244,4 +244,24 @@ onmessage = async ({ data }) => {
     };
     postMessage(linterResponse);
   }
+  // Handle the transpile-request event, which
+  // transpiles TypeScript to JavaScript.
+  if (data.event === 'transpile-request') {
+    const tsCode = data.tsCode;
+    const compilerOptions = {
+      jsx: ts.JsxEmit.React,
+    };
+    const jsCode = ts.transpileModule(tsCode, {
+      compilerOptions,
+    }).outputText;
+    postMessage({
+      event: 'transpile-response',
+      jsCode,
+      fileId: data.fileId,
+    });
+  }
 };