@kupcad/editor 0.0.0-stage → 0.1.0

package/src/language.js

@@ -0,0 +1,131 @@
+// KupCAD as CodeMirror reads it. Its literals are Ruby's (strings with interpolation, the single
+// quoted ones, %w and %q, heredocs, symbols, comments), so CodeMirror's Ruby mode reads them and
+// indents the blocks; its words are the core's (vocabulary.json, which `zig build grammar`
+// writes from the lexer and the stdlib), so a word is a keyword, a function or a method as the
+// language has it, not as Ruby does. Completion offers the same words.
+
+import { completeFromList } from '@codemirror/autocomplete';
+import { LanguageSupport, StreamLanguage } from '@codemirror/language';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import vocabulary from './vocabulary.json' with { type: 'json' };
+
+/** @import { CompletionContext, CompletionResult } from '@codemirror/autocomplete' */
+/** @import { StreamParser, StringStream } from '@codemirror/language' */
+
+const KEYWORDS = new Set(vocabulary.keywords);
+const FUNCTIONS = new Set(vocabulary.functions);
+const METHODS = new Set(vocabulary.methods);
+/** The highlighting tags the words get: lezer's names, a modifier after a dot. */
+const TOKENS = /** @type {const} */ ({
+  keyword: 'keyword',
+  function: 'variableName.function.standard',
+  method: 'propertyName.function.standard',
+  property: 'propertyName',
+  className: 'className',
+  definition: 'variableName.definition',
+  variable: 'variableName',
+});
+/** A word before the cursor, or a method's name after its dot. */
+const WORD_BEFORE = /\.?[\w?!]*$/;
+const METHOD_NAME = /^[\w?!]*$/;
+
+/** @typedef {Record<string, unknown>} RubyState */
+/** The Ruby mode, whose state starts and indents (its type leaves them optional). */
+const rubyMode =
+  /** @type {Required<Pick<StreamParser<RubyState>, 'startState' | 'indent'>> & StreamParser<RubyState>} */ (
+    /** @type {unknown} */ (ruby)
+  );
+
+/**
+ * The Ruby mode's state, and whether a `for` waits for its `in` (a keyword there alone).
+ * @typedef {{ ruby: RubyState, forOpen: boolean }} State
+ */
+
+/** @type {StreamParser<State>} */
+const parser = {
+  name: 'kupcad',
+  startState: (indentUnit) => ({ ruby: rubyMode.startState(indentUnit), forOpen: false }),
+  copyState: (state) => ({ ruby: copyFields(state.ruby), forOpen: state.forOpen }),
+  token(stream, state) {
+    if (stream.sol()) state.forOpen = false;
+    const style = rubyMode.token(stream, state.ruby);
+    return style ? styleOf(stream, style, state) : null;
+  },
+  indent: (state, textAfter, context) => rubyMode.indent(state.ruby, textAfter, context),
+  languageData: rubyMode.languageData,
+};
+
+/**
+ * What the Ruby mode called a token, as KupCAD has it: a word by the core's vocabulary.
+ * @param {StringStream} stream
+ * @param {string} style the Ruby mode's
+ * @param {State} state
+ * @returns {string}
+ */
+function styleOf(stream, style, state) {
+  const word = stream.current();
+  switch (style) {
+    case 'property':
+      return METHODS.has(word) ? TOKENS.method : TOKENS.property;
+    case 'tag':
+      return TOKENS.className;
+    case 'def':
+      return TOKENS.definition;
+    case 'keyword':
+    case 'variable':
+      if (word === 'for') state.forOpen = true;
+      if (KEYWORDS.has(word)) return TOKENS.keyword;
+      if (word === 'in' && state.forOpen) {
+        state.forOpen = false;
+        return TOKENS.keyword;
+      }
+      return FUNCTIONS.has(word) ? TOKENS.function : TOKENS.variable;
+    default:
+      return style;
+  }
+}
+
+/**
+ * A copy of a mode's state, as CodeMirror copies one whose mode has no copyState of its own (the
+ * Ruby mode's): its fields, an array among them copied.
+ * @param {RubyState} state
+ * @returns {RubyState}
+ */
+function copyFields(state) {
+  return Object.fromEntries(
+    Object.entries(state).map(([key, value]) => [key, Array.isArray(value) ? [...value] : value]),
+  );
+}
+
+/** KupCAD's language, for an editor to read a script by. */
+export const kupcadLanguage = StreamLanguage.define(parser);
+
+const completeKeywordOrFunction = completeFromList([
+  ...vocabulary.keywords.map((label) => ({ label, type: 'keyword' })),
+  ...vocabulary.functions.map((label) => ({ label, type: 'function' })),
+]);
+const METHOD_OPTIONS = vocabulary.methods.map((label) => ({ label, type: 'method' }));
+
+/**
+ * Completes a word with the keywords and the functions, and a name after a dot with the methods.
+ * @param {CompletionContext} context
+ * @returns {CompletionResult | null | Promise<CompletionResult | null>}
+ */
+export function completeKupcad(context) {
+  const before = context.matchBefore(WORD_BEFORE);
+  if (!before || (before.from === before.to && !context.explicit)) return null;
+  if (!before.text.startsWith('.')) return completeKeywordOrFunction(context);
+  return { from: before.from + 1, options: METHOD_OPTIONS, validFor: METHOD_NAME };
+}
+
+/**
+ * KupCAD for an editor: the language, and completion of its words unless something else
+ * completes them (a language server, which knows the script's own names too).
+ * @param {{ complete?: boolean }} [options]
+ */
+export function kupcad({ complete = true } = {}) {
+  return new LanguageSupport(
+    kupcadLanguage,
+    complete ? kupcadLanguage.data.of({ autocomplete: completeKupcad }) : [],
+  );
+}

package/src/svelte.js

@@ -0,0 +1,4 @@
+// The editor for Svelte (Editor.svelte), by a module a host imports it from: a bare specifier
+// to the .svelte file itself leaves svelte-check without its types, a relative import doesn't.
+
+export { default as Editor } from './Editor.svelte';

package/src/theme.js

@@ -0,0 +1,71 @@
+// How the editor looks: by the --kc-* tokens a host sets (@kupcad/ui's tokens.css), else the
+// page's own colours (CSS system colours, light or dark as the page is); the code's colours by
+// the --kc-code-* tokens (keyword, string, comment, constant, function, definition), else
+// GitHub's, light or dark.
+
+import { HighlightStyle } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+
+/**
+ * The colour of a kind of code: its token's, else GitHub's for the page's scheme.
+ * @param {string} kind
+ * @param {string} light
+ * @param {string} dark
+ */
+const code = (kind, light, dark) => `var(--kc-code-${kind}, light-dark(${light}, ${dark}))`;
+const FG = 'var(--kc-fg, CanvasText)';
+const BG = 'var(--kc-bg, Canvas)';
+const MUTED = 'var(--kc-muted, GrayText)';
+const BORDER = 'var(--kc-border, GrayText)';
+const ACCENT = 'var(--kc-accent, Highlight)';
+
+export const editorTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    color: FG,
+    backgroundColor: BG,
+    fontSize: 'var(--kc-code-font-size, var(--kc-font-size, 13px))',
+    // What light-dark() picks by, where the page says nothing of its scheme
+    colorScheme: 'light dark',
+  },
+  '.cm-scroller': {
+    fontFamily: 'var(--kc-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)',
+    lineHeight: '1.5',
+  },
+  '.cm-gutters': { color: MUTED, backgroundColor: BG, borderRight: `1px solid ${BORDER}` },
+  '.cm-activeLine': { backgroundColor: `color-mix(in srgb, ${ACCENT} 6%, transparent)` },
+  '.cm-activeLineGutter': { backgroundColor: `color-mix(in srgb, ${ACCENT} 10%, transparent)` },
+  '.cm-cursor, .cm-dropCursor': { borderLeftColor: FG },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: `color-mix(in srgb, ${ACCENT} 28%, transparent)`,
+  },
+  '.cm-matchingBracket': { backgroundColor: `color-mix(in srgb, ${ACCENT} 20%, transparent)` },
+  '.cm-tooltip': { color: FG, backgroundColor: BG, border: `1px solid ${BORDER}` },
+  '.cm-tooltip-autocomplete ul li[aria-selected]': {
+    color: 'var(--kc-accent-fg, HighlightText)',
+    backgroundColor: ACCENT,
+  },
+  '.cm-panels': { color: FG, backgroundColor: BG },
+});
+
+export const highlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: code('keyword', '#cf222e', '#ff7b72') },
+  { tag: [tags.string, tags.special(tags.string)], color: code('string', '#0a3069', '#a5d6ff') },
+  { tag: tags.comment, color: code('comment', '#6e7781', '#8b949e'), fontStyle: 'italic' },
+  {
+    tag: [tags.number, tags.bool, tags.null, tags.atom],
+    color: code('constant', '#0550ae', '#79c0ff'),
+  },
+  {
+    tag: [
+      tags.standard(tags.function(tags.variableName)),
+      tags.standard(tags.function(tags.propertyName)),
+    ],
+    color: code('function', '#8250df', '#d2a8ff'),
+  },
+  {
+    tag: [tags.definition(tags.variableName), tags.className],
+    color: code('definition', '#953800', '#ffa657'),
+  },
+]);

package/src/vocabulary.json

@@ -0,0 +1,301 @@
+{
+  "keywords": [
+    "and",
+    "as",
+    "begin",
+    "break",
+    "case",
+    "class",
+    "def",
+    "do",
+    "else",
+    "elsif",
+    "end",
+    "ensure",
+    "export",
+    "false",
+    "for",
+    "from",
+    "if",
+    "import",
+    "module",
+    "next",
+    "nil",
+    "not",
+    "or",
+    "private",
+    "public",
+    "rescue",
+    "return",
+    "self",
+    "super",
+    "then",
+    "true",
+    "unless",
+    "until",
+    "when",
+    "while",
+    "with",
+    "yield"
+  ],
+  "functions": [
+    "arc",
+    "assemble",
+    "assert",
+    "batch_hull",
+    "benchmark",
+    "block_given?",
+    "circle",
+    "cube",
+    "cylinder",
+    "debugger",
+    "defined?",
+    "ghost",
+    "highlight",
+    "import_3mf",
+    "import_dxf",
+    "import_font",
+    "import_json",
+    "import_obj",
+    "import_step",
+    "import_stl",
+    "import_svg",
+    "inspect",
+    "line",
+    "param",
+    "polygon",
+    "polyhedron",
+    "polyline",
+    "print",
+    "puts",
+    "raise",
+    "regular_polygon",
+    "sphere",
+    "square",
+    "text",
+    "torus",
+    "union",
+    "warn"
+  ],
+  "methods": [
+    "abs",
+    "acos",
+    "acosd",
+    "align",
+    "all?",
+    "any?",
+    "arc_to",
+    "area",
+    "asin",
+    "asind",
+    "atan",
+    "atan2",
+    "atan2d",
+    "atand",
+    "bbox",
+    "between?",
+    "bom",
+    "bytes_allocated",
+    "cbrt",
+    "ceil",
+    "center",
+    "center_of_mass",
+    "chamfer",
+    "chars",
+    "clamp",
+    "class",
+    "clone",
+    "close",
+    "close?",
+    "cm",
+    "collect",
+    "compact",
+    "config",
+    "contains?",
+    "cos",
+    "cosd",
+    "count",
+    "cover?",
+    "current_config",
+    "decompose",
+    "deg2rad",
+    "delete",
+    "difference",
+    "dig",
+    "downcase",
+    "downto",
+    "drop",
+    "dup",
+    "each",
+    "each_cons",
+    "each_slice",
+    "each_with_index",
+    "empty?",
+    "end",
+    "end_with?",
+    "ends_with?",
+    "even?",
+    "exclusive?",
+    "exp",
+    "export_3mf",
+    "export_dxf",
+    "export_gltf",
+    "export_obj",
+    "export_step",
+    "export_stl",
+    "export_svg",
+    "extrude",
+    "fetch",
+    "fillet",
+    "filter",
+    "find",
+    "finite?",
+    "first",
+    "flat_map",
+    "flatten",
+    "floor",
+    "gcd",
+    "genus",
+    "get",
+    "ghost",
+    "group_by",
+    "helix",
+    "highlight",
+    "hull",
+    "hypot",
+    "inch",
+    "include?",
+    "infinite?",
+    "inspect",
+    "integer?",
+    "intersection",
+    "intersects?",
+    "into",
+    "invert",
+    "is_a?",
+    "join",
+    "key?",
+    "keys",
+    "last",
+    "lcm",
+    "length",
+    "lerp",
+    "line_to",
+    "ljust",
+    "loft",
+    "log",
+    "log10",
+    "log2",
+    "m",
+    "map",
+    "mass",
+    "material",
+    "max",
+    "max_by",
+    "merge",
+    "method",
+    "min",
+    "min_by",
+    "min_gap",
+    "minkowski",
+    "mirror",
+    "mm",
+    "name",
+    "named",
+    "nan?",
+    "negative?",
+    "nil?",
+    "none?",
+    "odd?",
+    "offset",
+    "parts",
+    "polar",
+    "pop",
+    "positive?",
+    "preview?",
+    "project",
+    "push",
+    "rad2deg",
+    "rand",
+    "ray_cast",
+    "reduce",
+    "reject",
+    "remap",
+    "repeat_linear",
+    "repeat_polar",
+    "replace",
+    "resize",
+    "respond_to?",
+    "reverse",
+    "revolve",
+    "rjust",
+    "rotate",
+    "round",
+    "sample",
+    "scale",
+    "seed",
+    "shell",
+    "shift",
+    "shuffle",
+    "sign",
+    "simplify",
+    "sin",
+    "sind",
+    "size",
+    "slice",
+    "smoothstep",
+    "snap",
+    "sort",
+    "sort_by",
+    "split",
+    "split_by_plane",
+    "sqrt",
+    "start",
+    "start_with?",
+    "starts_with?",
+    "step",
+    "stringify_keys",
+    "strip",
+    "stroke",
+    "sum",
+    "surface_area",
+    "sweep",
+    "symbolize_keys",
+    "take",
+    "tan",
+    "tand",
+    "tangent_arc_to",
+    "tap",
+    "times",
+    "to_a",
+    "to_f",
+    "to_h",
+    "to_i",
+    "to_s",
+    "to_sym",
+    "transform",
+    "transform_values",
+    "translate",
+    "trim",
+    "trim_by_plane",
+    "union",
+    "uniq",
+    "unshift",
+    "upcase",
+    "upto",
+    "values",
+    "volume",
+    "with_config",
+    "x_max",
+    "x_min",
+    "x_size",
+    "y_max",
+    "y_min",
+    "y_size",
+    "z_max",
+    "z_min",
+    "z_size",
+    "zero?",
+    "zip"
+  ]
+}