Bladeren bron

[frontend] Add the query-editor web component to the npm dist config

Johan Ahlen 5 jaren geleden
bovenliggende
commit
6b98f975a6

+ 0 - 4
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/AceEditor.vue

@@ -27,7 +27,6 @@
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
-  import { wrap } from 'vue/webComponentWrapper';
   import ace, { getAceMode } from 'ext/aceHelper';
   import { Ace } from 'ext/ace';
 
@@ -574,9 +573,6 @@
       this.editor.commands.bindKey({ win: 'Ctrl-j', mac: 'Command-j|Ctrl-j' }, 'gotoline');
     }
   }
-
-  export const COMPONENT_NAME = 'ace-editor';
-  wrap(COMPONENT_NAME, AceEditor);
 </script>
 
 <style lang="scss" scoped>

+ 13 - 0
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/QueryEditorWebComponent.ts

@@ -0,0 +1,13 @@
+import axios from 'axios';
+import AceEditor from './AceEditor.vue';
+import { wrap } from 'vue/webComponentWrapper';
+
+wrap('query-editor', AceEditor, {
+  connectedCallback() {
+    const element = <HTMLElement>this;
+    const hueBaseUrl = element.getAttribute('hue-base-url');
+    if (hueBaseUrl) {
+      axios.defaults.baseURL = hueBaseUrl;
+    }
+  }
+});

+ 7 - 11
desktop/core/src/desktop/js/vue/webComponentWrapper.ts

@@ -1,5 +1,5 @@
-import axios from 'axios';
 import Vue, { ComponentOptions } from 'vue';
+import VueCustomElement from 'vue-custom-element';
 import vueCustomElement from 'vue-custom-element';
 
 Vue.use(vueCustomElement);
@@ -8,14 +8,10 @@ export interface HueComponentOptions<T extends Vue> extends ComponentOptions<T>
   hueBaseUrl?: string;
 }
 
-export const wrap = <T extends Vue>(tag: string, component: { new (): T }): void => {
-  Vue.customElement(tag, new component().$options, {
-    connectedCallback() {
-      const element = <HTMLElement>this;
-      const hueBaseUrl = element.getAttribute('hue-base-url');
-      if (hueBaseUrl) {
-        axios.defaults.baseURL = hueBaseUrl;
-      }
-    }
-  });
+export const wrap = <T extends Vue>(
+  tag: string,
+  component: { new (): T },
+  options?: VueCustomElement.options
+): void => {
+  Vue.customElement(tag, new component().$options, options);
 };

+ 27 - 27
webpack.config.npm.js

@@ -46,7 +46,8 @@ const npmSetupPlugins = [
 
 const webComponentsConfig = Object.assign({}, defaultConfig, {
   entry: {
-    'er-diagram': [`${JS_ROOT}/components/er-diagram/webcomp.ts`]
+    'er-diagram': [`${JS_ROOT}/components/er-diagram/webcomp.ts`],
+    'query-editor': [`${JS_ROOT}/apps/notebook2/components/aceEditor/QueryEditorWebComponent.ts`]
   },
   output: {
     path: `${DIST_DIR}/components`
@@ -56,35 +57,37 @@ const webComponentsConfig = Object.assign({}, defaultConfig, {
 
 const parserConf = Object.assign({}, defaultConfig, {
   entry: {
-    'calciteAutocompleteParser': [`${JS_ROOT}/parse/sql/calcite/calciteAutocompleteParser.js`],
-    'calciteSyntaxParser': [`${JS_ROOT}/parse/sql/calcite/calciteSyntaxParser.js`],
+    calciteAutocompleteParser: [`${JS_ROOT}/parse/sql/calcite/calciteAutocompleteParser.js`],
+    calciteSyntaxParser: [`${JS_ROOT}/parse/sql/calcite/calciteSyntaxParser.js`],
 
-    'druidAutocompleteParser': [`${JS_ROOT}/parse/sql/druid/druidAutocompleteParser.js`],
-    'druidSyntaxParser': [`${JS_ROOT}/parse/sql/druid/druidSyntaxParser.js`],
+    druidAutocompleteParser: [`${JS_ROOT}/parse/sql/druid/druidAutocompleteParser.js`],
+    druidSyntaxParser: [`${JS_ROOT}/parse/sql/druid/druidSyntaxParser.js`],
 
-    'elasticsearchAutocompleteParser': [`${JS_ROOT}/parse/sql/elasticsearch/elasticsearchAutocompleteParser.js`],
-    'elasticsearchSyntaxParser': [`${JS_ROOT}/parse/sql/elasticsearch/elasticsearchSyntaxParser.js`],
+    elasticsearchAutocompleteParser: [
+      `${JS_ROOT}/parse/sql/elasticsearch/elasticsearchAutocompleteParser.js`
+    ],
+    elasticsearchSyntaxParser: [`${JS_ROOT}/parse/sql/elasticsearch/elasticsearchSyntaxParser.js`],
 
-    'flinkAutocompleteParser': [`${JS_ROOT}/parse/sql/flink/flinkAutocompleteParser.js`],
-    'flinkSyntaxParser': [`${JS_ROOT}/parse/sql/flink/flinkSyntaxParser.js`],
+    flinkAutocompleteParser: [`${JS_ROOT}/parse/sql/flink/flinkAutocompleteParser.js`],
+    flinkSyntaxParser: [`${JS_ROOT}/parse/sql/flink/flinkSyntaxParser.js`],
 
-    'genericAutocompleteParser': [`${JS_ROOT}/parse/sql/generic/genericAutocompleteParser.js`],
-    'genericSyntaxParser': [`${JS_ROOT}/parse/sql/generic/genericSyntaxParser.js`],
+    genericAutocompleteParser: [`${JS_ROOT}/parse/sql/generic/genericAutocompleteParser.js`],
+    genericSyntaxParser: [`${JS_ROOT}/parse/sql/generic/genericSyntaxParser.js`],
 
-    'hiveAutocompleteParser': [`${JS_ROOT}/parse/sql/hive/hiveAutocompleteParser.js`],
-    'hiveSyntaxParser': [`${JS_ROOT}/parse/sql/hive/hiveSyntaxParser.js`],
+    hiveAutocompleteParser: [`${JS_ROOT}/parse/sql/hive/hiveAutocompleteParser.js`],
+    hiveSyntaxParser: [`${JS_ROOT}/parse/sql/hive/hiveSyntaxParser.js`],
 
-    'impalaAutocompleteParser': [`${JS_ROOT}/parse/sql/impala/impalaAutocompleteParser.js`],
-    'impalaSyntaxParser': [`${JS_ROOT}/parse/sql/impala/impalaSyntaxParser.js`],
+    impalaAutocompleteParser: [`${JS_ROOT}/parse/sql/impala/impalaAutocompleteParser.js`],
+    impalaSyntaxParser: [`${JS_ROOT}/parse/sql/impala/impalaSyntaxParser.js`],
 
-    'ksqlAutocompleteParser': [`${JS_ROOT}/parse/sql/ksql/ksqlAutocompleteParser.js`],
-    'ksqlSyntaxParser': [`${JS_ROOT}/parse/sql/ksql/ksqlSyntaxParser.js`],
+    ksqlAutocompleteParser: [`${JS_ROOT}/parse/sql/ksql/ksqlAutocompleteParser.js`],
+    ksqlSyntaxParser: [`${JS_ROOT}/parse/sql/ksql/ksqlSyntaxParser.js`],
 
-    'phoenixAutocompleteParser': [`${JS_ROOT}/parse/sql/phoenix/phoenixAutocompleteParser.js`],
-    'phoenixSyntaxParser': [`${JS_ROOT}/parse/sql/phoenix/phoenixSyntaxParser.js`],
+    phoenixAutocompleteParser: [`${JS_ROOT}/parse/sql/phoenix/phoenixAutocompleteParser.js`],
+    phoenixSyntaxParser: [`${JS_ROOT}/parse/sql/phoenix/phoenixSyntaxParser.js`],
 
-    'prestoAutocompleteParser': [`${JS_ROOT}/parse/sql/presto/prestoAutocompleteParser.js`],
-    'prestoSyntaxParser': [`${JS_ROOT}/parse/sql/presto/prestoSyntaxParser.js`]
+    prestoAutocompleteParser: [`${JS_ROOT}/parse/sql/presto/prestoAutocompleteParser.js`],
+    prestoSyntaxParser: [`${JS_ROOT}/parse/sql/presto/prestoSyntaxParser.js`]
   },
   performance: {
     hints: false,
@@ -94,14 +97,11 @@ const parserConf = Object.assign({}, defaultConfig, {
   output: {
     path: `${DIST_DIR}/parsers`,
     library: '[name]',
-    libraryExport: "default",
+    libraryExport: 'default',
     libraryTarget: 'umd',
     umdNamedDefine: true,
     globalObject: `(typeof self !== 'undefined' ? self : this)`
-  },
+  }
 });
 
-module.exports = [
-  webComponentsConfig,
-  parserConf
-];
+module.exports = [webComponentsConfig, parserConf];