vzcode 2.0.0 → 2.3.0

package/src/client/tabsSearchParameters.ts

@@ -1,137 +0,0 @@
-import { TabState } from '../types';
-import { VizFileId, VizContent } from '@vizhub/viz-types';
-
-// The delimiter used to separate file names in the `tabs` parameter.
-// We need a character that is both URL-safe (does not get escaped in URLs)
-// and is not typically found in file names, especially for JavaScript and CSS files.
-//
-// The following characters are not URL-safe as they get converted to escaped sequences in URLs,
-// leading to less readable URLs:
-// - `+` becomes `%2B`
-// - `|` becomes `%7C`
-// - `;` becomes `%3B`
-// - `:` becomes `%3A`
-// - `,` becomes `%2C`
-// - `!` becomes `%21`
-// - `/` becomes `%2F`
-//
-// The following characters, while URL-safe, are commonly used in file names,
-// hence using them could lead to conflicts or misinterpretation:
-// - `.` commonly used as a dot separator in file names and extensions
-// - ` ` (space) often found in file names but can lead to issues in URLs
-// - `-` (hyphen) frequently used in file and folder names for readability
-// - `_` (underscore) also commonly used in file and folder names
-//
-// Considering the above constraints, we need a character that is both URL-safe
-// and not typically used in file names. The following character meets these criteria:
-// - `~` is URL-safe (remains unescaped in URLs) and is not a standard character
-//   in file names for JavaScript and CSS files, making it a suitable choice for a delimiter.
-export const delimiter = '~';
-
-// Gets the file id of a file with the given name.
-// Returns null if not found.
-const getFileId = (
-  content: VizContent,
-  fileName: string,
-): string | null => {
-  if (content && content.files) {
-    for (const fileId of Object.keys(content.files)) {
-      const file = content.files[fileId];
-      if (file.name === fileName) {
-        return fileId;
-      }
-    }
-  }
-  return null;
-};
-
-// Gets the file name of a file with the given id,
-// guard against failure cases.
-// Returns null if not found.
-const getFileName = (
-  content: VizContent,
-  fileId: string,
-): string | null => {
-  if (content && content.files) {
-    const file = content.files[fileId];
-    if (file) {
-      return file.name;
-    }
-  }
-  return null;
-};
-
-// An object representing the search parameters.
-export type TabStateParams = {
-  file?: string;
-  tabs?: string;
-};
-
-// Decodes the tab list and active file from the search parameters.
-export const decodeTabs = ({
-  tabStateParams,
-  content,
-}: {
-  tabStateParams: TabStateParams;
-  content: VizContent;
-}): {
-  tabList: Array<TabState>;
-  activeFileId: VizFileId;
-} => {
-  const { file, tabs } = tabStateParams;
-  const tabList: TabState[] = [];
-
-  // Decode active file
-  const activeFileId = getFileId(content, file);
-
-  // Decode tab list
-  if (tabs) {
-    tabs.split(delimiter).forEach((fileName) => {
-      const fileId = getFileId(content, fileName);
-      if (fileId) {
-        tabList.push({ fileId });
-      }
-    });
-  } else if (activeFileId) {
-    // If there's only an active file without a tab list
-    tabList.push({ fileId: activeFileId });
-  }
-
-  return { tabList, activeFileId };
-};
-
-// Encodes the tab list and active file into the search parameters.
-export const encodeTabs = ({
-  tabList,
-  activeFileId,
-  content,
-}: {
-  tabList: Array<TabState>;
-  activeFileId: VizFileId | null;
-  content: VizContent;
-}): TabStateParams => {
-  // Get the file name of the active file
-  const activeFileName = getFileName(content, activeFileId);
-
-  const params: TabStateParams = {};
-
-  // If that's missing, no need to proceed (should never happen).
-  if (activeFileName) {
-    // In any case we set the `file` parameter.
-    params.file = activeFileName;
-
-    // We only need to encode the `tabs` parameter
-    // if there's more than one tab.
-    if (tabList.length > 1) {
-      // Set tab list
-      const tabs = tabList
-        .map((tabstate: TabState) =>
-          getFileName(content, tabstate.fileId),
-        )
-        .join(delimiter);
-      params.tabs = tabs;
-    }
-  }
-
-  return params;
-};

package/src/client/themes/index.ts

@@ -1,7 +0,0 @@
-export {
-  themes,
-  defaultTheme,
-  themeOptionsByLabel,
-} from './themes';
-export type { ThemeLabel, ThemeOption } from './themes';
-export { useDynamicTheme } from './useDynamicTheme';

package/src/client/themes/themes.ts

@@ -1,77 +0,0 @@
-import { oneDark } from '@codemirror/theme-one-dark';
-
-import { vizhubTheme } from './vizhubTheme';
-import {
-  okaidia,
-  abcdef,
-  dracula,
-  eclipse,
-  githubDark,
-  material,
-  nord,
-  xcodeLight,
-} from './uiwImports';
-
-// CodeMirror themes
-export type ThemeLabel =
-  | 'abcdef'
-  | 'dracula'
-  | 'eclipse'
-  | 'material'
-  | 'nord'
-  | 'oneDark'
-  | 'okaidia'
-  | 'github'
-  | 'xcode'
-  | 'vizhub';
-
-export type ThemeOption = {
-  value: any;
-  label: ThemeLabel;
-};
-// add light theme brackets to eclipse theme
-// const modifiedEclipse = {
-//   ...eclipse,
-//   '.rainbow-bracket-red > span': {
-//     color: 'white',
-//   },
-//   '.rainbow-bracket-orange > span': {
-//     //yellow
-//     color: '#FFFFB2',
-//   },
-//   '.rainbow-bracket-yellow > span': {
-//     // orange
-//     color: '#FFB2DA',
-//   },
-//   '.rainbow-bracket-green > span': {
-//     // green
-//     color: '#B2FFB2',
-//   }
-// };
-export const themes: Array<ThemeOption> = [
-  { value: abcdef, label: 'abcdef' },
-  { value: dracula, label: 'dracula' },
-  { value: eclipse, label: 'eclipse' },
-  { value: material, label: 'material' },
-  { value: nord, label: 'nord' },
-  { value: oneDark, label: 'oneDark' },
-  { value: okaidia, label: 'okaidia' },
-  { value: githubDark, label: 'github' },
-  { value: xcodeLight, label: 'xcode' },
-  { value: vizhubTheme, label: 'vizhub' },
-];
-
-// Map theme labels to theme values
-export const themeOptionsByLabel: Record<
-  ThemeLabel,
-  ThemeOption
-> = themes.reduce(
-  (acc, themeOption: ThemeOption) => {
-    acc[themeOption.label] = themeOption;
-    return acc;
-  },
-  {} as Record<ThemeLabel, any>,
-);
-
-// The default theme
-export const defaultTheme: ThemeLabel = 'vizhub';

package/src/client/themes/uiwImports.ts

@@ -1,32 +0,0 @@
-// These import are wreaking havoc with the build process
-// and causing app deployments to fail.
-// The upstream library is not configured properly in NPM.
-// See:
-// https://github.com/uiwjs/react-codemirror/issues/680
-// https://github.com/scalar/scalar/issues/4222
-// As a workaround, we need to explicitly target the ESM
-// distribution of the library, which is not used by default
-// because there is no "type": "module" field in the package.json
-// of any of these `@uiw/codemirror-theme-*` packages.
-
-import { okaidia } from '@uiw/codemirror-theme-okaidia';
-import { abcdef } from '@uiw/codemirror-theme-abcdef';
-import { dracula } from '@uiw/codemirror-theme-dracula';
-import { eclipse } from '@uiw/codemirror-theme-eclipse';
-import { githubDark } from '@uiw/codemirror-theme-github';
-import { material } from '@uiw/codemirror-theme-material';
-import { nord } from '@uiw/codemirror-theme-nord';
-import { xcodeLight } from '@uiw/codemirror-theme-xcode';
-import { createTheme } from '@uiw/codemirror-themes';
-
-export {
-  okaidia,
-  abcdef,
-  dracula,
-  eclipse,
-  githubDark,
-  material,
-  nord,
-  xcodeLight,
-  createTheme,
-};

package/src/client/themes/useDynamicTheme.ts

@@ -1,29 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { EditorCache } from '../useEditorCache';
-import { ThemeLabel, themeOptionsByLabel } from './themes';
-
-export const useDynamicTheme = (
-  editorCache: EditorCache,
-  theme: ThemeLabel,
-) => {
-  const isFirstRun = useRef(true);
-  useEffect(() => {
-    // Skip the first run, since the theme is already initialized.
-    if (isFirstRun.current) {
-      isFirstRun.current = false;
-    } else {
-      // When the user changes the theme, update the theme of all editors.
-      for (const editorCacheValue of Array.from(
-        editorCache.values(),
-      )) {
-        const { editor, themeCompartment } =
-          editorCacheValue;
-        editor.dispatch({
-          effects: themeCompartment.reconfigure([
-            themeOptionsByLabel[theme].value,
-          ]),
-        });
-      }
-    }
-  }, [theme, editorCache]);
-};

package/src/client/themes/vizhubTheme/colors.ts

@@ -1,80 +0,0 @@
-// import { hcl } from 'd3-color';
-
-// This module defines all the colors for the VizHub theme.
-// Ported from the CodeMirror 5 theme defined here:
-// https://github.com/vizhub-core/vizhub-legacy/blob/01cadfb78a2611df32f981b1fd8136b70447de9e/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/themes/vizHub.js
-
-// This is how the colors were generated:
-// const sidebarDark = hcl('#3d4b65');
-// const sidebarLight = hcl('#5b677d');
-// const luminaceDifference = sidebarLight.l - sidebarDark.l;
-// const backgroundLuminance =
-//   sidebarDark.l - luminaceDifference * 1.1;
-// const luminance = 90;
-// export const backgroundColor = hcl(
-//   sidebarDark.h,
-//   sidebarDark.c,
-//   backgroundLuminance,
-// ).formatHex();
-// export const light = hcl(0, 0, luminance).formatHex();
-// export const dark = hcl(
-//   sidebarDark.h,
-//   sidebarDark.c,
-//   80,
-// ).formatHex();
-// console.log(
-//   JSON.stringify(
-//     {
-//       backgroundColor,
-//       light,
-//       dark,
-//     },
-//     null,
-//     2,
-//   ),
-// );
-
-// These are inlined from the above code, but the code is kept around for future reference.
-export const backgroundColor = '#202e46';
-export const light = '#e2e2e2';
-export const dark = '#b9c7e6';
-
-export const lineNumbers = 'rgba(255,255,255,0.2)';
-export const lineNumbersActive = 'rgba(255,255,255,0.5)';
-export const selectionBackground = '#000';
-export const selectionBackgroundMatch = 'rgba(0,0,0,0.4)';
-export const lineHighlight = 'rgba(0,0,0,0.1)';
-export const caretColor = 'white';
-
-// Compute 6 colors that are evenly spaced in terms of hue
-// Keeping this code around for future reference
-// const rotation = 0.397;
-// const numColors = 6;
-// const highlightColors = Array.from(
-//   { length: numColors },
-//   (_, i) => {
-//     let t = (i / numColors + rotation) % 1;
-//     return hcl(t * 360, saturation, luminance).formatHex();
-//   },
-// );
-// console.log(JSON.stringify(highlightColors));
-
-// We inline the colors here, but the code above is how they were generated.
-const highlightColors = [
-  '#77fd8c',
-  '#00ffff',
-  '#66ecff',
-  '#ffb9ff',
-  '#ffabb3',
-  '#ffdb56',
-];
-
-export const MINT = highlightColors[0];
-export const AQUA = highlightColors[1];
-export const SKY = highlightColors[2];
-export const LAVENDER = highlightColors[3];
-export const SALMON = highlightColors[4];
-export const GOLDENROD = highlightColors[5];
-
-// Red that's not too bright, for errors
-export const PANIC = '#ff2222';

package/src/client/themes/vizhubTheme/index.ts

@@ -1,193 +0,0 @@
-// A CodeMirror 6 theme for the VizHub syntax highlighting colors.
-
-// Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
-
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-
-import {
-  // Colors for various things outside the code itself
-  backgroundColor,
-  lineHighlight,
-  light,
-  dark,
-  lineNumbers,
-  lineNumbersActive,
-  selectionBackground,
-  selectionBackgroundMatch,
-  caretColor,
-
-  // Syntax highlighting colors
-  MINT,
-  AQUA,
-  SKY,
-  LAVENDER,
-  SALMON,
-  GOLDENROD,
-  PANIC,
-} from './colors';
-import { EditorView } from 'codemirror';
-
-// Use semi-bold weight for keywords and other important things
-// const boldWeight = 'bold';
-
-// This looks way better as we are pulling in the semi-bold font from Google Fonts
-const boldWeight = '500';
-
-const defaultSettingsVizhubTheme = {
-  background: backgroundColor,
-  foreground: light,
-  caret: caretColor,
-  selection: selectionBackground,
-  selectionMatch: selectionBackgroundMatch,
-  lineHighlight,
-  gutterBackground: backgroundColor,
-  gutterForeground: lineNumbers,
-  gutterActiveForeground: lineNumbersActive,
-};
-
-function vizhubThemeInit(options?: Partial<any>) {
-  const {
-    theme = 'dark',
-    settings = {},
-    styles = [],
-  } = options || {};
-  return [
-    createTheme({
-      theme: theme,
-      settings: {
-        ...defaultSettingsVizhubTheme,
-        ...settings,
-      },
-      styles: [
-        {
-          tag: [
-            t.keyword,
-            t.operatorKeyword,
-            t.modifier,
-            t.color,
-            t.constant(t.name),
-            t.standard(t.name),
-            t.standard(t.tagName),
-            t.special(t.brace),
-            t.atom,
-            t.bool,
-            t.special(t.variableName),
-          ],
-          color: MINT,
-        },
-        {
-          tag: [t.controlKeyword, t.moduleKeyword],
-          color: MINT,
-        },
-        {
-          tag: [
-            t.name,
-            t.deleted,
-            t.character,
-            t.macroName,
-
-            t.variableName,
-            t.labelName,
-            t.definition(t.name),
-          ],
-          color: AQUA,
-        },
-        {
-          tag: [t.propertyName],
-          color: GOLDENROD,
-        },
-        {
-          tag: t.heading,
-          fontWeight: boldWeight,
-          color: SKY,
-        },
-        {
-          tag: [
-            t.typeName,
-            t.className,
-            t.tagName,
-            t.number,
-            t.changed,
-            t.annotation,
-            t.self,
-            t.namespace,
-          ],
-          color: AQUA,
-        },
-        {
-          tag: [
-            t.function(t.variableName),
-            t.function(t.propertyName),
-          ],
-          color: AQUA,
-        },
-        { tag: [t.number], color: SALMON },
-        {
-          tag: [
-            t.operator,
-            t.punctuation,
-            t.separator,
-            t.url,
-            t.escape,
-            t.regexp,
-          ],
-          color: light,
-        },
-        {
-          tag: [t.regexp],
-          color: LAVENDER,
-        },
-        {
-          tag: [t.special(t.string), t.string, t.inserted],
-          color: LAVENDER,
-        },
-        {
-          tag: [t.processingInstruction],
-          color: AQUA,
-        },
-        { tag: [t.angleBracket], color: AQUA },
-        { tag: t.strong, fontWeight: boldWeight },
-        { tag: t.emphasis, fontStyle: 'italic' },
-        {
-          tag: t.strikethrough,
-          textDecoration: 'line-through',
-        },
-        { tag: [t.meta, t.comment], color: dark },
-        {
-          tag: t.link,
-          color: GOLDENROD,
-          textDecoration: 'underline',
-        },
-        { tag: t.invalid, color: PANIC },
-        // {
-        //   class: 'cm-nonmatchingBracket',
-        //   // color: "rede",
-        //   backgroundColor: 'red', // Optional: set background color for matching brackets
-        // },
-        // {
-        //   tag: t.nonmatchingBracket,
-        //   color: nonMatchingBracketColor,
-        //   backgroundColor: 'transparent', // Optional: set background color for non-matching brackets
-        // },
-        ...styles,
-      ],
-    }),
-    // Theme matching and non-matching brackets.
-    EditorView.theme(
-      {
-        '&.cm-focused .cm-matchingBracket': {
-          backgroundColor: 'transparent',
-          outline: '1px solid #888888',
-        },
-        '&.cm-focused .cm-nonmatchingBracket': {
-          backgroundColor: 'transparent',
-          outline: '1px solid #ff2222',
-        },
-      },
-      { dark: true },
-    ),
-  ];
-}
-
-export const vizhubTheme = vizhubThemeInit();