Components

Some core UI elements are available as generic Web Components. They are library/framework agnostic, and can be used in any Web project irrespective of what its built upon - React, Angular, Ember or something else.

They can be simply imported as classic JavaScript modules for your own development needs or just reused as is.

Importing

There are two ways to get them:

NPM registry

Published as a NPM package in https://www.npmjs.com/package/gethue.

The recommended way. Versioned, published on the stabdard public JavaSCript module registry NPM, without any dependency on a local Hue project.

To run the demo app make the following changes:

  1. Install gethue NPM package

    npm install --save gethue

  2. In package.json, remove "hue": "file:../../../.." without touching the newly added gethue dependency

  3. In src/app.js, change the import line to:

    import sqlAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';

  4. In webpack.config.js:

    • Change 'js' to 'node_modules/gethue' under resolve.modules
    • Remove exclude: /node_modules/, from babel-loader

Local repository

Checkout Hue and cd to the demo app. Steps are similar if you would like to use your own app instead of the demo app.

cd tools/examples/api/hue_dep

npm install
npm run webpack
npm run app

In hue_dep package.json there is a dependency on Hue:

"dependencies": {
  "hue": "file:../../.."
},

Now let's import the Hive parser:

import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';