Skip to content

Commit

Permalink
[frontend] Change npm module generation to put the source in root of …
Browse files Browse the repository at this point in the history
…the library

This takes care of an issue with broken imports when a npm module user relies on the Hue source. Pre-generated components are placed in a "lib" folder instead of the root.
  • Loading branch information
JohanAhlen committed Jan 27, 2021
1 parent d3c8aaf commit 810edd5
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
8 changes: 4 additions & 4 deletions docs/docs-site/content/developer/components/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ To run the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples
2. In [package.json](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/package.json), remove `"hue": "file:../../../.."` without touching the newly added gethue dependency
3. In [src/app.js](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/src/app.js), change the import line to:

import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
import sqlAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';

4. In [webpack.config.js](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/webpack.config.js):
- Change `'js'` to `'node_modules/gethue'` under `resolve.modules`
Expand Down Expand Up @@ -66,11 +66,11 @@ Here is an example on how to use the er-diagram component once installed:

er-diagram can be imported into an html file using a simple script tag as follows.

<script type = "text/javascript" src="node_modules/gethue/web/er-diagram.js"></script>
<script type = "text/javascript" src="node_modules/gethue/lib/components/er-diagram.js"></script>

If you are using a bundler like webpack. They can be imported using a normal import statement.

import 'gethue/web/er-diagram';
import 'gethue/lib/components/er-diagram';

### Instantiate

Expand All @@ -84,4 +84,4 @@ Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools

Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.

import ERDiagram from 'gethue/components/er-diagram/index.vue';
import ERDiagram from 'gethue/lib/components/er-diagram/index.vue';
6 changes: 3 additions & 3 deletions webpack.config.npm.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const npmSetupPlugins = [
{ from: './package.json', to: `${DIST_DIR}/package.json` },
{ from: './NPM-README.md', to: `${DIST_DIR}/README.md` },

{ from: JS_ROOT, to: `${DIST_DIR}/src` }
{ from: JS_ROOT, to: `${DIST_DIR}` }
]
})
];
Expand All @@ -50,7 +50,7 @@ const webComponentsConfig = Object.assign({}, defaultConfig, {
'query-editor': [`${JS_ROOT}/apps/editor/components/aceEditor/QueryEditorWebComponent.ts`]
},
output: {
path: `${DIST_DIR}/components`
path: `${DIST_DIR}/lib/components`
},
plugins: npmSetupPlugins.concat(new VueLoaderPlugin())
});
Expand Down Expand Up @@ -98,7 +98,7 @@ const parserConf = Object.assign({}, defaultConfig, {
maxAssetSize: 1500000
},
output: {
path: `${DIST_DIR}/parsers`,
path: `${DIST_DIR}/lib/parsers`,
library: '[name]',
libraryExport: 'default',
libraryTarget: 'umd',
Expand Down

0 comments on commit 810edd5

Please sign in to comment.