Forráskód Böngészése

[frontend] Use relative imports in exported NPM package sources

This allows consumers of the NPM lib to use any code inside Hue given that they use the required webpack plugins and babel loaders.

By using relative imports there's no need to set it as an additional module root, limiting transpile to the actual used modules as opposed to the entire Hue source.
Johan Åhlén 4 éve
szülő
commit
e320a6b7d5

+ 1 - 1
desktop/core/src/desktop/js/apps/editor/components/sqlScratchpad/SqlScratchpad.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import 'desktop/core/src/desktop/js/components/styles/mixins';
+@import '../../../../components/styles/mixins';
 
 .sql-scratchpad {
   position: relative;

+ 22 - 22
desktop/core/src/desktop/js/parse/sql/sqlParserRepository.ts

@@ -21,30 +21,30 @@ import { AutocompleteParser, SqlParserProvider, SyntaxParser } from 'parse/types
  * AUTOCOMPLETE_MODULES and SYNTAX_MODULES are generated, do not edit manually, see tools/jison/generateParsers.js
  */
 const AUTOCOMPLETE_MODULES = {
-  calcite: () => import(/* webpackChunkName: "calcite-parser" */ 'parse/sql/calcite/calciteAutocompleteParser'),
-  dasksql: () => import(/* webpackChunkName: "dasksql-parser" */ 'parse/sql/dasksql/dasksqlAutocompleteParser'),
-  druid: () => import(/* webpackChunkName: "druid-parser" */ 'parse/sql/druid/druidAutocompleteParser'),
-  elasticsearch: () => import(/* webpackChunkName: "elasticsearch-parser" */ 'parse/sql/elasticsearch/elasticsearchAutocompleteParser'),
-  flink: () => import(/* webpackChunkName: "flink-parser" */ 'parse/sql/flink/flinkAutocompleteParser'),
-  generic: () => import(/* webpackChunkName: "generic-parser" */ 'parse/sql/generic/genericAutocompleteParser'),
-  hive: () => import(/* webpackChunkName: "hive-parser" */ 'parse/sql/hive/hiveAutocompleteParser'),
-  impala: () => import(/* webpackChunkName: "impala-parser" */ 'parse/sql/impala/impalaAutocompleteParser'),
-  ksql: () => import(/* webpackChunkName: "ksql-parser" */ 'parse/sql/ksql/ksqlAutocompleteParser'),
-  phoenix: () => import(/* webpackChunkName: "phoenix-parser" */ 'parse/sql/phoenix/phoenixAutocompleteParser'),
-  presto: () => import(/* webpackChunkName: "presto-parser" */ 'parse/sql/presto/prestoAutocompleteParser')
+  calcite: () => import(/* webpackChunkName: "calcite-parser" */ './calcite/calciteAutocompleteParser'),
+  dasksql: () => import(/* webpackChunkName: "dasksql-parser" */ './dasksql/dasksqlAutocompleteParser'),
+  druid: () => import(/* webpackChunkName: "druid-parser" */ './druid/druidAutocompleteParser'),
+  elasticsearch: () => import(/* webpackChunkName: "elasticsearch-parser" */ './elasticsearch/elasticsearchAutocompleteParser'),
+  flink: () => import(/* webpackChunkName: "flink-parser" */ './flink/flinkAutocompleteParser'),
+  generic: () => import(/* webpackChunkName: "generic-parser" */ './generic/genericAutocompleteParser'),
+  hive: () => import(/* webpackChunkName: "hive-parser" */ './hive/hiveAutocompleteParser'),
+  impala: () => import(/* webpackChunkName: "impala-parser" */ './impala/impalaAutocompleteParser'),
+  ksql: () => import(/* webpackChunkName: "ksql-parser" */ './ksql/ksqlAutocompleteParser'),
+  phoenix: () => import(/* webpackChunkName: "phoenix-parser" */ './phoenix/phoenixAutocompleteParser'),
+  presto: () => import(/* webpackChunkName: "presto-parser" */ './presto/prestoAutocompleteParser')
 };
 const SYNTAX_MODULES = {
-  calcite: () => import(/* webpackChunkName: "calcite-parser" */ 'parse/sql/calcite/calciteSyntaxParser'),
-  dasksql: () => import(/* webpackChunkName: "dasksql-parser" */ 'parse/sql/dasksql/dasksqlSyntaxParser'),
-  druid: () => import(/* webpackChunkName: "druid-parser" */ 'parse/sql/druid/druidSyntaxParser'),
-  elasticsearch: () => import(/* webpackChunkName: "elasticsearch-parser" */ 'parse/sql/elasticsearch/elasticsearchSyntaxParser'),
-  flink: () => import(/* webpackChunkName: "flink-parser" */ 'parse/sql/flink/flinkSyntaxParser'),
-  generic: () => import(/* webpackChunkName: "generic-parser" */ 'parse/sql/generic/genericSyntaxParser'),
-  hive: () => import(/* webpackChunkName: "hive-parser" */ 'parse/sql/hive/hiveSyntaxParser'),
-  impala: () => import(/* webpackChunkName: "impala-parser" */ 'parse/sql/impala/impalaSyntaxParser'),
-  ksql: () => import(/* webpackChunkName: "ksql-parser" */ 'parse/sql/ksql/ksqlSyntaxParser'),
-  phoenix: () => import(/* webpackChunkName: "phoenix-parser" */ 'parse/sql/phoenix/phoenixSyntaxParser'),
-  presto: () => import(/* webpackChunkName: "presto-parser" */ 'parse/sql/presto/prestoSyntaxParser')
+  calcite: () => import(/* webpackChunkName: "calcite-parser" */ './calcite/calciteSyntaxParser'),
+  dasksql: () => import(/* webpackChunkName: "dasksql-parser" */ './dasksql/dasksqlSyntaxParser'),
+  druid: () => import(/* webpackChunkName: "druid-parser" */ './druid/druidSyntaxParser'),
+  elasticsearch: () => import(/* webpackChunkName: "elasticsearch-parser" */ './elasticsearch/elasticsearchSyntaxParser'),
+  flink: () => import(/* webpackChunkName: "flink-parser" */ './flink/flinkSyntaxParser'),
+  generic: () => import(/* webpackChunkName: "generic-parser" */ './generic/genericSyntaxParser'),
+  hive: () => import(/* webpackChunkName: "hive-parser" */ './hive/hiveSyntaxParser'),
+  impala: () => import(/* webpackChunkName: "impala-parser" */ './impala/impalaSyntaxParser'),
+  ksql: () => import(/* webpackChunkName: "ksql-parser" */ './ksql/ksqlSyntaxParser'),
+  phoenix: () => import(/* webpackChunkName: "phoenix-parser" */ './phoenix/phoenixSyntaxParser'),
+  presto: () => import(/* webpackChunkName: "presto-parser" */ './presto/prestoSyntaxParser')
 };
 /* eslint-enable */
 

+ 2 - 2
tools/jison/generateParsers.js

@@ -49,9 +49,9 @@ const JISON_FOLDER = '../../desktop/core/src/desktop/js/parse/jison/';
 const SQL_PARSER_REPOSITORY_PATH =
   '../../desktop/core/src/desktop/js/parse/sql/sqlParserRepository.ts';
 const SYNTAX_PARSER_IMPORT_TEMPLATE =
-  '  KEY: () => import(/* webpackChunkName: "KEY-parser" */ \'parse/sql/KEY/KEYSyntaxParser\')';
+  '  KEY: () => import(/* webpackChunkName: "KEY-parser" */ \'./KEY/KEYSyntaxParser\')';
 const AUTOCOMPLETE_PARSER_IMPORT_TEMPLATE =
-  '  KEY: () => import(/* webpackChunkName: "KEY-parser" */ \'parse/sql/KEY/KEYAutocompleteParser\')';
+  '  KEY: () => import(/* webpackChunkName: "KEY-parser" */ \'./KEY/KEYAutocompleteParser\')';
 
 const parserDefinitions = {
   globalSearchParser: {

+ 43 - 49
webpack.config.npm.js

@@ -19,6 +19,7 @@
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const fs = require('fs');
 const { VueLoaderPlugin } = require('vue-loader');
 
 const DIST_DIR = path.join(__dirname, 'npm_dist');
@@ -33,62 +34,61 @@ const defaultConfig = Object.assign({}, require('./webpack.config'), {
   plugins: []
 });
 
-const executorLibConfig = Object.assign({}, defaultConfig, {
-  entry: {
-    executor: [`${JS_ROOT}/apps/editor/execution/executor.ts`]
-  },
-  output: {
-    path: `${DIST_DIR}/lib/execution`,
-    library: '[name]',
-    libraryExport: 'default',
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-    globalObject: `(typeof self !== 'undefined' ? self : this)`
-  },
-  plugins: [
-    new CleanWebpackPlugin([DIST_DIR]),
-    new CopyWebpackPlugin({
-      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}/apps/editor/execution/executor.d.ts`,
-          to: `${DIST_DIR}/lib/execution`
-        }
-      ]
-    })
-  ]
+const rootFiles = new Set();
+
+fs.readdirSync(JS_ROOT).forEach(file => {
+  rootFiles.add(file.replace(/\..+$/, ''));
 });
 
-const hueConfigLibConfig = Object.assign({}, defaultConfig, {
+const relatives = ['./'];
+
+let current = '';
+for (let i = 1; i < 50; i++) {
+  current += '../';
+  relatives.push(current);
+}
+
+const copySourceConfig = {
+  mode: 'production',
   entry: {
-    hueConfig: [`${JS_ROOT}/config/hueConfig.ts`],
-    contextCatalog: [`${JS_ROOT}/catalog/contextCatalog.ts`]
+    pjson: './package.json'
   },
   output: {
-    path: `${DIST_DIR}/lib/config`,
-    library: '[name]',
-    libraryExport: 'default',
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-    globalObject: `(typeof self !== 'undefined' ? self : this)`
+    path: `${DIST_DIR}`
+  },
+  optimization: {
+    minimize: false,
+    usedExports: true
   },
   plugins: [
+    new CleanWebpackPlugin([DIST_DIR]),
     new CopyWebpackPlugin({
       patterns: [
+        { from: './NPM-README.md', to: `${DIST_DIR}/README.md` },
+        { from: './package.json', to: `${DIST_DIR}/package.json` },
         {
-          from: `${JS_ROOT}/config/hueConfig.d.ts`,
-          to: `${DIST_DIR}/lib/config`
-        },
-        {
-          from: `${JS_ROOT}/catalog/contextCatalog.d.ts`,
-          to: `${DIST_DIR}/lib/config`
+          from: JS_ROOT,
+          to: `${DIST_DIR}`,
+          transform: (content, absoluteFrom) => {
+            // This turns all absolute imports to relative (except for npm dependencies) and solves module
+            // resolution issues when the Hue source files are used directly from another project.
+            if (/\.(jsx?|tsx?|vue)$/.test(absoluteFrom)) {
+              const depth = absoluteFrom.slice(JS_ROOT.length + 1).split('/').length - 1;
+              return content
+                .toString()
+                .replace(
+                  /(import\s(?:[\S\s]+?\sfrom\s[^'"]*)?['"])([^.][^'"/]*)([/])/gi,
+                  (all, pre, module, post) =>
+                    `${pre}${rootFiles.has(module) ? relatives[depth] : ''}${module}${post}`
+                );
+            }
+            return content;
+          }
         }
       ]
     })
   ]
-});
+};
 
 const webComponentsConfig = Object.assign({}, defaultConfig, {
   entry: {
@@ -193,10 +193,4 @@ const vue3WebCompWrapperConfig = Object.assign({}, defaultConfig, {
   ]
 });
 
-module.exports = [
-  executorLibConfig,
-  hueConfigLibConfig,
-  webComponentsConfig,
-  parserConfig,
-  vue3WebCompWrapperConfig
-];
+module.exports = [copySourceConfig, webComponentsConfig, parserConfig, vue3WebCompWrapperConfig];