Skip to content

datdao/atlas-monaco

Repository files navigation

 

Branches Functions Lines Statements Jest coverage

Atlas Monaco Editor

The library integrates Atlas HCL with Monaco Editor. Atlas HCL Demo

Features

Code Completion

Library provides robust code completion support for all SQL resources available within Atlas. For a comprehensive list of the supported resources, please visit the following link: https://atlasgo.io/atlas-schema/sql-resources.

Code Completion Demo

SQL Dialect

Support for configuring dialects is available for specific database drivers, such as SQLite, MySQL, and PostgreSQL, etc.

Referencing Qualified Tables

Users are able to search for attributes from multiple data blocks while working within a specific block. This feature can assist users in locating and referencing related data with greater ease.

Code Completion Demo

Linter

This feature allows for safer typing when defining a schema or configuring an Atlas project, as it uses a linter to check for errors while the user types. It will also warn the user if they type a word that does not follow the specified template.

Linter Demo

Installation

npm install atlas-monaco

Usage

Register AtlasHCL With React (@monaco-editor/react)

import * as AtlasHCL from "../../lib";
import Editor from "@monaco-editor/react";

function HCLSchemaEditor() {
  function handleEditorDidMount(editor, monaco) {
    AtlasHCL.AutoRegister(monaco);
    AtlasHCL.ConnectEditor(monaco, editor);
  }

  return (
    <div>
      <Editor
        onMount={handleEditorDidMount}
        options={{
          wordBasedSuggestions: false,
        }}
      />
    </div>
  );
}

export default HCLSchemaEditor;

After the ReactEditor has been rendered, we can use AtlasHCL.ConnectReactEditor() to connect it with AtlasHCL. Full Example

Change SQL Dialect

import * as AtlasHCL from "../../lib";

// Select options with value are languague IDs provide by AtlasHCL
const languages = [
  { value: AtlasHCL.langIds.schema.sqlite, label: "sqlite" },
  { value: AtlasHCL.langIds.schema.mysql, label: "mysql" },
  { value: AtlasHCL.langIds.schema.postgresql, label: "postgresql" },
];

Contrib

Custom SQL Resource

The configuration file is located at Templates. Follow these steps to configure the SQL resources:

  • Use an object with key-value pairs to define a resource.
  • Use a string with Attribute + Value to define a simple completion item.
  • Use an array with Attribute + Value to define a completion item that supports multiple options.
  • Use ${0|1|2|3} to define the position of the pointer after rendering. You can set priority by numbering the options. Use ${?} to auto set position

Standard datatypes:

bool: ["true", "false"],
number: "${?}",
string: "\"${?}\"",
array: "[${?}]",
switch: ["on", "off"],
ref: "${?}",

Example for config

mysql: {
        schema: {
            charset: dataType.string,
        },

        table: {
            schema: dataType.string,
            primary_key: {
                type: [
                    "BTREE",
                    ...
                ],
                columns: dataType.array
            },
            index: {
                comment: dataType.string,
                type: dataType.index,
                columns: dataType.array,
                unique: dataType.bool,
                on: {
                    column: dataType.string,
                    desc: dataType.bool,
                    where: dataType.string,
                    ...

About

AtlasHCL library on Monaco Editor

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published