Browse Source

[frontend] Generate and export one module for all the Query Editor web components

Johan Ahlen 4 years ago
parent
commit
47f93be430

+ 24 - 10
desktop/core/src/desktop/js/apps/editor/components/aceEditor/QueryEditorWebComponent.ts → desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponent.ts

@@ -15,17 +15,31 @@
 // limitations under the License.
 
 import axios from 'axios';
-import AceEditor from './AceEditor.vue';
+
+import AceEditor from './aceEditor/AceEditor.vue';
+import ExecutableActions from './ExecutableActions.vue';
+import ExecutableProgressBar from './ExecutableProgressBar.vue';
+import ResultTable from './result/ResultTable.vue';
 import { wrap } from 'vue/webComponentWrap';
-import style from '!!css-loader!sass-loader!./AceEditor.scss';
 
-wrap('query-editor', AceEditor, {
-  shadowCss: style,
-  connectedCallback() {
-    const element = <HTMLElement>this;
-    const hueBaseUrl = element.getAttribute('hue-base-url');
-    if (hueBaseUrl) {
-      axios.defaults.baseURL = hueBaseUrl;
-    }
+const registerBaseUrl = (element: HTMLElement): void => {
+  const hueBaseUrl = element.getAttribute('hue-base-url');
+  if (hueBaseUrl) {
+    axios.defaults.baseURL = hueBaseUrl;
   }
+};
+
+const components = [
+  { tag: 'query-editor', component: AceEditor },
+  { tag: 'query-editor-actions', component: ExecutableActions },
+  { tag: 'query-editor-progress-bar', component: ExecutableProgressBar },
+  { tag: 'query-editor-result-table', component: ResultTable }
+];
+
+components.forEach(({ tag, component }) => {
+  wrap(tag, component, {
+    connectedCallback() {
+      registerBaseUrl(this as HTMLElement);
+    }
+  });
 });

+ 13 - 5
webpack.config.npm.js

@@ -38,16 +38,24 @@ const npmSetupPlugins = [
     patterns: [
       { from: './package.json', to: `${DIST_DIR}/package.json` },
       { from: './NPM-README.md', to: `${DIST_DIR}/README.md` },
-
-      { from: JS_ROOT, to: `${DIST_DIR}` }
+      { from: JS_ROOT, to: `${DIST_DIR}/src` }
     ]
   })
 ];
 
+const libConfig = Object.assign({}, defaultConfig, {
+  entry: {
+    executor: [`${JS_ROOT}/apps/editor/execution/executor.ts`]
+  },
+  output: {
+    path: `${DIST_DIR}/lib/`
+  }
+});
+
 const webComponentsConfig = Object.assign({}, defaultConfig, {
   entry: {
     'er-diagram': [`${JS_ROOT}/components/er-diagram/webcomp.ts`],
-    'query-editor': [`${JS_ROOT}/apps/editor/components/aceEditor/QueryEditorWebComponent.ts`]
+    'query-editor-components': [`${JS_ROOT}/apps/editor/components/QueryEditorWebComponent.ts`]
   },
   output: {
     path: `${DIST_DIR}/lib/components`
@@ -55,7 +63,7 @@ const webComponentsConfig = Object.assign({}, defaultConfig, {
   plugins: npmSetupPlugins.concat(new VueLoaderPlugin())
 });
 
-const parserConf = Object.assign({}, defaultConfig, {
+const parserConfig = Object.assign({}, defaultConfig, {
   entry: {
     calciteAutocompleteParser: [`${JS_ROOT}/parse/sql/calcite/calciteAutocompleteParser.js`],
     calciteSyntaxParser: [`${JS_ROOT}/parse/sql/calcite/calciteSyntaxParser.js`],
@@ -107,4 +115,4 @@ const parserConf = Object.assign({}, defaultConfig, {
   }
 });
 
-module.exports = [webComponentsConfig, parserConf];
+module.exports = [libConfig, webComponentsConfig, parserConfig];