Giter VIP home page Giter VIP logo

spark-sql-online-editor's Introduction

spark-sql-online-editor

中文介绍可以看这里

Base info

feature

  1. syntax highlighting
  2. auto complete (Use 'Ctrl' key)
  3. show syntax error
  4. check sql line one by one
  5. sql context involve

tech stack

  1. codemirror
  2. vue
  3. js

Usage

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Introduce

1. Demo from official webset

All feature's implement are base on Codemirror. There already have "spark-sql" mode in Codemirror sql mode.

You can run this project and access 'http://localhost:8080' to find the Spark-Sql editor.

2. self defined word highlighting and autoComplete

Try to access 'http://localhost:8080/#/selfsql' to see what happened. The implement you can find in SelfsqlEditor.vue and selfsql.js.

3. show syntax error

Spark SQL uses module Spark-Catalyst to do SQL parse. And Spark-Catalyst use ANTLR4 to generate Gammer Parser in Java.

So if we want to use ANTLR4 for syntax check in webpage, we need generate code in JS. Refer to here. There also have a npm implement in github which named antlr4-tool.

The steps are as blow:

  1. Get the G4 file from Spark-Catalyst.
  2. Generate antlr4 related js by using antlr4-tool
  3. According to parsePlan#ParseDriver.scala, create JS function.
  4. Register lint to codemirror

spark-sql-online-editor's People

Contributors

dependabot[bot] avatar waltyou avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

spark-sql-online-editor's Issues

antlr4-tool 生成的没有getErrors方法

// Generated from calculator.g4 by ANTLR 4.8
// jshint ignore: start
var antlr4 = require('antlr4/index');

// This class defines a complete listener for a parse tree produced by calculatorParser.
function calculatorListener() {
antlr4.tree.ParseTreeListener.call(this);
return this;
}

calculatorListener.prototype = Object.create(antlr4.tree.ParseTreeListener.prototype);
calculatorListener.prototype.constructor = calculatorListener;

// Enter a parse tree produced by calculatorParser#prog.
calculatorListener.prototype.enterProg = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#prog.
calculatorListener.prototype.exitProg = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#printExpr.
calculatorListener.prototype.enterPrintExpr = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#printExpr.
calculatorListener.prototype.exitPrintExpr = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#assign.
calculatorListener.prototype.enterAssign = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#assign.
calculatorListener.prototype.exitAssign = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#print.
calculatorListener.prototype.enterPrint = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#print.
calculatorListener.prototype.exitPrint = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#number.
calculatorListener.prototype.enterNumber = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#number.
calculatorListener.prototype.exitNumber = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#parens.
calculatorListener.prototype.enterParens = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#parens.
calculatorListener.prototype.exitParens = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#MulDiv.
calculatorListener.prototype.enterMulDiv = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#MulDiv.
calculatorListener.prototype.exitMulDiv = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#AddSub.
calculatorListener.prototype.enterAddSub = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#AddSub.
calculatorListener.prototype.exitAddSub = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#id.
calculatorListener.prototype.enterId = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#id.
calculatorListener.prototype.exitId = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#power.
calculatorListener.prototype.enterPower = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#power.
calculatorListener.prototype.exitPower = function(ctx) {
};

// Enter a parse tree produced by calculatorParser#factor.
calculatorListener.prototype.enterFactor = function(ctx) {
};

// Exit a parse tree produced by calculatorParser#factor.
calculatorListener.prototype.exitFactor = function(ctx) {
};

exports.calculatorListener = calculatorListener;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.